2019-03-04 06:43:07 +00:00
{ { $ darkest_bg : = "#222222" } }
{ { $ second_dark_bg : = "#292929" } }
{ { $ third_dark_bg : = "#333333" } }
2018-05-27 09:36:35 +00:00
* {
box-sizing : border-box ;
}
body {
margin : 0px ;
padding : 0px ;
color : # AAAAAA ;
2019-03-04 06:43:07 +00:00
background-color : { { $ d a r k e s t _ b g } } ;
2018-05-27 09:36:35 +00:00
font-family : "Segoe UI" ;
}
a {
2018-07-13 11:27:58 +00:00
color : # eeeeee ;
2018-05-27 09:36:35 +00:00
text-decoration : none ;
}
nav . nav {
2019-03-04 06:43:07 +00:00
background : { { $ d a r k e s t _ b g } } ;
2018-05-27 09:36:35 +00:00
width : calc ( 100 % - 200px ) ;
float : left ;
}
ul {
list-style-type : none ;
margin-top : 0px ;
margin-bottom : 0px ;
clear : both ;
}
li {
float : left ;
margin-right : 12px ;
}
li a {
padding-top : 35px ;
padding-bottom : 22px ;
font-size : 18px ;
display : inline-block ;
color : # aaaaaa ;
}
# menu_overview {
margin-right : 24px ;
}
# menu_overview a {
font-size : 22px ;
padding-bottom : 21px ;
color : rgb ( 221 , 221 , 221 ) ;
padding-top : 31px ;
}
2018-10-14 06:09:25 +00:00
. menu_left . menu_active a {
2018-05-27 09:36:35 +00:00
border-bottom : 2px solid # 777777 ;
padding-bottom : 21px ;
color : # dddddd ;
}
2018-10-10 07:33:51 +00:00
. menu_alerts . alert_bell ,
. menu_alerts . alert_counter ,
. menu_alerts : not ( . selectedAlert ) . alertList {
2018-05-27 09:36:35 +00:00
display : none ;
}
2018-09-20 10:45:33 +00:00
. alertList {
display : flex ;
flex-direction : column ;
background-color : # 444444 ;
position : absolute ;
border : 1px solid # 333333 ;
top : 82px ;
border-top : none ;
right : 0px ;
padding-left : 16px ;
padding-right : 16px ;
}
2018-10-10 07:33:51 +00:00
. alertItem {
padding : 10px ;
padding-left : 8px ;
padding-right : 8px ;
}
2018-09-20 10:45:33 +00:00
. alertItem . withAvatar {
background : none ! important ;
height : 66px ;
padding-top : 4px ;
display : flex ;
padding : 16px ;
padding-left : 0px ;
padding-right : 0px ;
}
. alertItem . withAvatar : not ( : last-child ) {
border-bottom : 1px solid # 555555 ;
}
. alertItem . withAvatar . bgsub {
height : 36px ;
width : 36px ;
border-radius : 32px ;
}
. alertItem . withAvatar . text {
margin-left : 12px ;
padding-top : 5px ;
font-size : 16px ;
}
2019-04-02 00:59:29 +00:00
. menu_hamburger > a : after {
content : "{{lang " menu_more " . }}" ;
}
. menu_hamburger , . more_menu , . menu_hide {
display : none ;
}
. more_menu {
position : absolute ;
background-color : # 444444 ;
border : 1px solid # 333333 ;
flex-direction : column ;
list-style-type : none ;
padding : 16px ;
padding-top : 12px ;
padding-bottom : 12px ;
top : 70px ;
}
. more_menu_selected {
display : flex ! important ;
}
. more_menu li a {
font-size : 17px ;
padding-top : 0px ! important ;
padding-bottom : 0px ! important ;
}
. more_menu li a : not ( : last-child ) {
padding-bottom : 8px ! important ;
}
. more_menu . menu_active a {
border-bottom : none ;
}
2018-09-20 10:45:33 +00:00
2018-05-27 09:36:35 +00:00
. right_of_nav {
float : left ;
width : 200px ;
2019-03-04 06:43:07 +00:00
background-color : { { $ d a r k e s t _ b g } } ;
2018-05-27 09:36:35 +00:00
padding-top : 12px ;
padding-bottom : 12px ;
padding-right : 12px ;
}
. user_box {
display : flex ;
flex-direction : row ;
2018-06-17 07:28:18 +00:00
border-radius : 3px ;
2019-03-04 06:43:07 +00:00
background-color : { { $ t h i r d _ d a r k _ b g } } ;
2018-06-06 00:21:22 +00:00
padding-top : 11px ;
padding-bottom : 11px ;
padding-left : 12px ;
2018-05-27 09:36:35 +00:00
}
2018-10-06 06:35:53 +00:00
. user_box . has_alerts {
padding-top : 10px ;
padding-bottom : 10px ;
border : 1px solid # 444444 ;
}
2018-05-27 09:36:35 +00:00
. user_box img {
display : block ;
width : 36px ;
height : 36px ;
border-radius : 32px ;
margin-right : 8px ;
}
. user_box . username {
display : block ;
font-size : 16px ;
padding-top : 4px ;
line-height : 10px ;
}
. user_box . alerts {
font-size : 12px ;
line-height : 12px ;
}
2019-04-02 00:59:29 +00:00
# container {
2018-05-27 09:36:35 +00:00
clear : both ;
}
# back {
2019-03-04 06:43:07 +00:00
background : { { $ t h i r d _ d a r k _ b g } } ;
2018-05-27 09:36:35 +00:00
padding : 24px ;
padding-top : 12px ;
clear : both ;
display : flex ;
}
# main , # main . rowblock {
width : 100 % ;
}
2019-02-24 08:02:00 +00:00
. alert {
border-radius : 3px ;
background-color : # 444444 ;
padding : 12px ;
}
2019-02-28 09:35:27 +00:00
. shrink_main . sidebar {
2018-05-27 09:36:35 +00:00
width : 320px ;
}
2019-02-10 05:52:26 +00:00
. widget_simple . rowitem {
line-height : 18px ;
padding-top : 14px ! important ;
padding-bottom : 14px ! important ;
}
2019-02-24 08:02:00 +00:00
. widget_simple . rowhead . rowitem {
padding-bottom : 4px ! important ;
}
2018-07-05 09:54:01 +00:00
. the_form {
border-radius : 3px ;
background-color : # 444444 ;
padding : 16px ;
}
. rowblock : not ( . topic_list ) : not ( . rowhead ) : not ( . opthead ) . rowitem : not ( . post_item ) {
2018-06-17 07:28:18 +00:00
border-radius : 3px ;
2018-05-27 09:36:35 +00:00
background-color : # 444444 ;
display : flex ;
padding : 12px ;
2018-07-03 10:01:49 +00:00
}
. sidebar . rowblock : not ( . topic_list ) : not ( . rowhead ) : not ( . opthead ) . rowitem {
2018-05-27 09:36:35 +00:00
margin-left : 12px ;
}
2019-01-21 12:27:59 +00:00
. sidebar . search {
margin-left : 12px ;
}
. widget_search : first-child {
margin-top : 36px ;
}
. widget_search input {
width : 100 % ;
height : 30px ;
margin-left : 0px ;
}
. filter_list {
margin-top : 5px ;
}
2018-06-17 07:28:18 +00:00
. colstack_right . colstack_item : not ( . colstack_head ) : not ( . rowhead ) . rowitem {
border-radius : 3px ;
background-color : # 444444 ;
padding : 16px ;
2019-03-24 07:23:38 +00:00
/*padding: 18px;*/
2018-06-17 07:28:18 +00:00
}
2019-01-21 12:27:59 +00:00
. filter_item {
margin-bottom : 5px ;
padding : 4px ;
}
2019-02-10 05:52:26 +00:00
. filter_item a {
color : # BBBBBB ;
2019-02-28 07:28:17 +00:00
text-overflow : ellipsis ;
overflow : hidden ;
2019-02-10 05:52:26 +00:00
}
2018-06-17 07:28:18 +00:00
. colstack_right . colstack_item : not ( . colstack_head ) : not ( . rowhead ) . rowitem : not ( : last-child ) {
margin-bottom : 8px ;
}
. colstack_right . colstack_head : not ( : first-child ) {
margin-top : 16px ;
}
. rowmsg {
margin-bottom : 8px ;
}
2018-05-27 09:36:35 +00:00
2018-07-03 10:01:49 +00:00
h1 , h2 , h3 , h4 , h5 {
2018-05-27 09:36:35 +00:00
-webkit-margin-before : 0 ;
-webkit-margin-after : 0 ;
margin-block-start : 0 ;
margin-block-end : 0 ;
margin-top : 0px ;
margin-bottom : 0px ;
font-weight : normal ;
2018-07-24 05:40:26 +00:00
white-space : nowrap ;
2018-05-27 09:36:35 +00:00
}
2019-02-10 05:52:26 +00:00
/* new */
. filter_list {
margin-top : 5px ;
background-color : # 444444 ;
margin-left : 12px ;
border-radius : 3px ;
}
. filter_item {
margin-left : 0px ! important ;
}
. filter_selected {
background-color : # 555555 ! important ;
border-radius : 0px ! important ;
}
/* new end */
2018-07-24 05:40:26 +00:00
@ keyframes fadein {
from { opacity : 0 ; }
to { opacity : 1 ; }
}
. modal_pane {
position : fixed ;
left : 50 % ;
top : 50 % ;
transform : translate ( -50 % , -50 % ) ;
background : # 444444 ;
border : 2px solid # 333333 ;
border-radius : 5px ;
padding : 12px ;
padding-top : 8px ;
z-index : 9999 ;
animation : fadein 0 . 8s ;
}
. pane_header {
margin-bottom : 2px ;
}
. pane_row {
margin-top : 2px ;
2019-04-10 10:29:55 +00:00
cursor : pointer ;
}
. pane_selected {
font-weight : bold ;
2018-07-24 05:40:26 +00:00
}
. pane_buttons {
margin-top : 8px ;
}
. mod_floater {
position : absolute ;
right : 10px ;
bottom : 10px ;
background : # 444444 ;
border-radius : 5px ;
padding : 12px ;
padding-top : 8px ;
width : 200px ;
}
. mod_floater_head span {
margin-bottom : 6px ;
display : block ;
}
. mod_floater_body {
display : flex ;
}
. mod_floater_options {
width : 100 % ;
margin-right : 10px ;
2018-08-11 12:09:26 +00:00
padding : 4px ;
margin-bottom : 0px ;
2018-05-27 09:36:35 +00:00
}
2018-07-03 10:01:49 +00:00
. rowhead , . opthead , . colstack_head {
margin-left : 8px ;
2018-05-27 09:36:35 +00:00
margin-bottom : 8px ;
}
2018-07-03 10:01:49 +00:00
. rowhead h1 , . opthead h1 , . colstack_head h1 {
2018-09-24 07:49:19 +00:00
font-size : 21px ;
2018-05-27 09:36:35 +00:00
}
. sidebar . rowhead {
2018-07-03 10:01:49 +00:00
margin-left : 18px ;
2018-05-27 09:36:35 +00:00
margin-top : 4px ;
margin-bottom : 8px ;
}
. sidebar . rowhead h1 {
font-size : 20px ;
}
2019-01-21 12:27:59 +00:00
. sidebar . rowhead : not ( : first-child ) h1 {
margin-top : 12px ;
font-size : 19px ;
}
2018-05-27 09:36:35 +00:00
2018-07-03 10:01:49 +00:00
h2 {
font-size : 18px ;
margin-top : 12px ;
margin-bottom : 8px ;
margin-left : 8px ;
}
2018-07-05 09:54:01 +00:00
. topic_create_form {
2018-07-13 11:27:58 +00:00
display : flex ;
2018-07-05 09:54:01 +00:00
}
. quick_reply_form , . topic_reply_form , . topic_create_form {
background-color : # 444444 ;
border-radius : 3px ;
}
. quick_create_form {
margin-bottom : 8px ;
padding : 16px ;
}
. quick_create_form . little_row_avatar {
border-radius : 36px ;
margin-left : 4px ;
margin-right : 20px ;
height : 48px ;
width : 48px ;
}
. quick_create_form . main_form {
width : 80 % ;
}
. quick_create_form . topic_meta {
display : flex ;
}
2018-12-27 05:42:41 +00:00
. quick_create_form input , . quick_create_form select {
margin-left : 0px ;
margin-bottom : 0px ;
}
2018-07-05 09:54:01 +00:00
. quick_create_form . topic_meta . topic_name_row {
margin-bottom : 8px ;
width : 100 % ;
2018-12-27 05:42:41 +00:00
font-size : 14px ;
2018-07-05 09:54:01 +00:00
}
2018-09-21 04:23:25 +00:00
. quick_create_form . topic_meta . topic_name_row : not ( : only-child ) {
2018-12-27 05:42:41 +00:00
margin-left : 6px ;
2018-09-21 04:23:25 +00:00
}
. quick_create_form . topic_meta . topic_name_row : only-child input {
margin-left : 0px ;
}
2018-07-05 09:54:01 +00:00
. quick_create_form . topic_meta . topic_name_row input {
width : 100 % ;
}
. quick_create_form . topic_content_row textarea {
width : 100 % ;
height : 60px ;
2018-09-02 05:43:17 +00:00
resize : vertical ;
2018-07-05 09:54:01 +00:00
}
. quick_create_form . quick_button_row . formitem {
display : flex ;
margin-top : 6px ;
}
. quick_create_form . quick_button_row button , . quick_create_form . quick_button_row label {
margin-right : 8px ;
}
2018-08-19 06:25:59 +00:00
. quick_create_form # input_content {
width : 100 % ;
height : 100px ;
2018-09-02 05:43:17 +00:00
resize : vertical ;
2018-08-19 06:25:59 +00:00
}
2018-07-05 09:54:01 +00:00
2018-07-03 10:01:49 +00:00
. more_topic_block_initial {
display : none ;
}
. more_topic_block_active {
display : block ;
}
2019-01-21 12:27:59 +00:00
. hide_ajax_topic ,
. auto_hide ,
. show_on_edit : not ( . edit_opened ) ,
. hide_on_edit . edit_opened ,
. show_on_block_edit : not ( . edit_opened ) ,
. hide_on_block_edit . edit_opened ,
. link_select : not ( . link_opened ) {
2018-07-03 10:01:49 +00:00
display : none ! important ;
}
2018-07-13 11:27:58 +00:00
. topic_list_title_block {
display : flex ;
margin-left : 8px ;
}
. topic_list_title {
margin-left : 2px ;
}
. topic_list_title_block . optbox {
display : flex ;
font-size : 17px ;
margin-top : 3 . 5px ;
margin-right : 16px ;
margin-right : 18px ;
2018-09-25 08:02:40 +00:00
width : 100 % ;
2018-07-13 11:27:58 +00:00
}
2018-07-15 05:00:48 +00:00
. topic_list_title_block . pre_opt : before {
2018-12-06 11:09:10 +00:00
content : "{{lang " topics_click_topics_to_select " . }}" ;
2018-07-24 05:40:26 +00:00
font-size : 17px ;
margin-right : 20px ;
2018-07-15 05:00:48 +00:00
}
2018-07-13 11:27:58 +00:00
. topic_list_title_block . opt a {
color : # afafaf ;
margin-left : 8px ;
2018-07-24 05:40:26 +00:00
white-space : nowrap ;
2018-07-13 11:27:58 +00:00
}
. topic_list_title_block . create_topic_opt a : before {
2018-12-06 11:09:10 +00:00
content : "{{lang " quick_topic . create_topic_button " . }}" ;
2018-07-13 11:27:58 +00:00
}
. topic_list_title_block . mod_opt a : before {
2018-12-06 11:09:10 +00:00
content : "{{lang " topic_list . moderate " . }}" ;
2018-07-13 11:27:58 +00:00
}
2018-12-08 06:49:14 +00:00
. filter_opt , . dummy_opt {
2018-09-25 09:08:48 +00:00
margin-right : auto ;
}
2018-12-08 06:49:14 +00:00
. filter_opt . opt a . filter_opt_label {
2018-09-25 09:08:48 +00:00
font-size : 18px ;
margin-left : 5px ;
}
. filter_opt_pointy {
margin-left : -5px ;
}
2018-09-25 08:02:40 +00:00
. link_select {
background : # 333333 ;
background-color : # 444444 ;
position : absolute ;
border : 1px solid # 333333 ;
padding : 16px ;
padding-top : 10px ;
padding-bottom : 10px ;
margin-top : 2px ;
}
. link_select . link_option a {
margin-left : 0px ;
}
2018-05-27 09:36:35 +00:00
. topic_row : not ( : last-child ) {
margin-bottom : 8px ;
}
. topic_row {
2018-06-17 07:28:18 +00:00
border-radius : 3px ;
2018-05-27 09:36:35 +00:00
background-color : # 444444 ;
display : flex ;
}
. topic_left , . topic_right , . topic_middle {
padding : 16px ;
2018-07-13 11:27:58 +00:00
padding-bottom : 10px ;
padding-top : 16px ;
2018-05-27 09:36:35 +00:00
display : flex ;
width : 33 % ;
}
. topic_middle {
2018-07-03 10:01:49 +00:00
line-height : 20px ;
2018-05-27 09:36:35 +00:00
}
. topic_left {
margin-right : auto ;
}
2018-07-15 05:00:48 +00:00
. topic_sticky . topic_left {
2018-07-13 11:27:58 +00:00
border-left : 3px solid rgb ( 215 , 155 , 0 ) ;
border-radius : 3px ;
}
2018-07-15 05:00:48 +00:00
. topic_closed . topic_left {
2018-07-13 11:27:58 +00:00
border-left : 3px solid grey ;
2018-07-03 10:01:49 +00:00
border-radius : 3px ;
}
2018-07-15 05:00:48 +00:00
. topic_closed {
background-color : # 4b4b4b ;
}
2018-07-24 05:40:26 +00:00
. topic_selected {
background-color : rgb ( 68 , 68 , 88 ) ;
}
2018-07-03 10:01:49 +00:00
. new_item . topic_left {
border-left : 3px solid rgb ( 215 , 215 , 215 ) ;
border-radius : 3px ;
}
2018-05-27 09:36:35 +00:00
. topic_left img , . topic_right img {
border-radius : 24px ;
height : 38px ;
width : 38px ;
2018-07-13 11:27:58 +00:00
margin-right : 10px ;
2018-05-27 09:36:35 +00:00
}
. topic_inner_left {
display : flex ;
flex-direction : column ;
2018-07-03 10:01:49 +00:00
width : 92 % ;
}
. topic_inner_left . rowtopic {
white-space : nowrap ;
text-overflow : ellipsis ;
overflow : hidden ;
2018-05-27 09:36:35 +00:00
}
2019-02-28 07:28:17 +00:00
. parent_forum_sep {
margin-left : 6px ;
margin-right : 6px ;
2018-05-27 09:36:35 +00:00
}
. topic_right_inside {
display : flex ;
margin-left : auto ;
width : 180px ;
}
. topic_right_inside . lastName , . topic_left . rowtopic {
font-size : 15px ! important ;
line-height : 22px ;
2018-07-13 11:27:58 +00:00
margin-top : -2px ;
2018-05-27 09:36:35 +00:00
}
. topic_right_inside . lastReplyAt , . topic_left . starter {
font-size : 14px ;
line-height : 14px ;
}
. topic_right_inside span {
display : flex ;
flex-direction : column ;
}
2018-10-14 06:09:25 +00:00
. topic_inner_left br ,
. topic_right_inside br ,
. topic_inner_right ,
2018-09-26 07:46:30 +00:00
. topic_list : not ( . topic_list_mostviewed ) . topic_middle . viewCount ,
. topic_list_mostviewed . topic_middle . likeCount {
display : none ;
2018-05-27 09:36:35 +00:00
}
. topic_middle_inside {
2018-09-26 07:46:30 +00:00
display : flex ;
flex-direction : column ;
2018-05-27 09:36:35 +00:00
margin-left : auto ;
margin-right : auto ;
2018-07-13 11:27:58 +00:00
margin-top : -3px ;
2018-05-27 09:36:35 +00:00
width : 80px ;
}
. topic_status_e {
display : none ;
}
2018-06-30 03:40:50 +00:00
/* TODO: Make a generic version of this so that we can have more blocks which are initially hidden but flip over to visible under certain conditions */
. more_topic_block_initial {
display : none ;
}
. more_topic_block_active {
display : block ;
}
2018-09-02 05:43:17 +00:00
input , select , button , . formbutton , . panel_right_button : not ( . has_inner_button ) , textarea {
2018-06-17 07:28:18 +00:00
border-radius : 3px ;
background : rgb ( 90 , 90 , 90 ) ;
color : rgb ( 200 , 200 , 200 ) ;
border : none ;
padding : 4px ;
}
input : focus , select : focus , textarea : focus {
outline : 1px solid rgb ( 120 , 120 , 120 ) ;
}
2018-09-01 08:03:26 +00:00
input : not ( input [ type = search ] ) : not ( input [ type = submit ] ) {
2018-06-17 07:28:18 +00:00
background-image : url ( . / fa-svg / pencil-alt . svg ) ;
background-size : 12px ;
background-repeat : no-repeat ;
background-position : right 10px bottom 9px ;
background-position-x : right 10px ;
2018-09-01 08:03:26 +00:00
}
input {
2018-06-17 07:28:18 +00:00
padding : 5px ;
padding-bottom : 3px ;
font-size : 16px ;
}
2018-08-11 12:09:26 +00:00
input , select {
margin-left : 3px ;
margin-bottom : 4px ;
}
2018-09-02 05:43:17 +00:00
button , . formbutton , . panel_right_button : not ( . has_inner_button ) {
2018-06-17 07:28:18 +00:00
background : rgb ( 110 , 110 , 210 ) ;
color : rgb ( 250 , 250 , 250 ) ;
font-family : "Segoe UI" ;
font-size : 15px ;
text-align : center ;
padding : 6px ;
}
2018-07-13 11:27:58 +00:00
. formlabel {
margin-bottom : 4px ;
}
/ * . formlabel + . formitem {
margin-left : 4px ;
} * /
. formrow {
margin-bottom : 6px ;
}
. form_button_row {
margin-top : 10px ;
}
2018-09-02 05:43:17 +00:00
. formitem a {
margin-bottom : 5px ;
display : block ;
}
2018-06-17 07:28:18 +00:00
2018-07-24 05:40:26 +00:00
. login_mfa_token_row . formlabel {
display : none ;
}
2019-03-11 08:47:45 +00:00
. fall_opts {
display : flex ;
}
. dont_have_account , . forgot_password {
margin-top : 12px ;
margin-bottom : -8px ;
}
. forgot_password {
margin-left : auto ;
}
2018-07-24 05:40:26 +00:00
2018-05-27 09:36:35 +00:00
. pageset {
display : flex ;
margin-top : 8px ;
}
. pageitem {
2018-06-01 05:02:29 +00:00
font-size : 17px ;
2018-06-17 07:28:18 +00:00
border-radius : 3px ;
2018-06-01 05:02:29 +00:00
background-color : # 444444 ;
2018-06-17 07:28:18 +00:00
padding : 7px ;
margin-right : 6px ;
2018-05-27 09:36:35 +00:00
}
2019-02-10 05:52:26 +00:00
. pagefirst , . pagenext , . pageprev , . pagelast {
padding-top : 2px ;
padding-bottom : 6px ;
}
. pagefirst a , . pagenext a , . pageprev a , . pagelast a {
font-size : 22px ;
}
2018-05-27 09:36:35 +00:00
# prevFloat , # nextFloat {
display : none ;
}
. forum_list . rowitem {
margin-bottom : 8px ;
display : flex ;
}
. forum_list . forum_left {
margin-left : 8px ;
}
. forum_list . forum_nodesc {
font-style : italic ;
}
. forum_list . forum_right {
display : flex ;
margin-left : auto ;
margin-right : 8px ;
padding-top : 2px ;
2018-11-23 08:58:34 +00:00
width : 155px ;
2018-05-27 09:36:35 +00:00
}
. forum_list . forum_right img {
margin-right : 10px ;
margin-top : 2px ;
}
. forum_list . forum_right span {
line-height : 19px ;
2018-11-23 08:58:34 +00:00
overflow : hidden ;
text-overflow : ellipsis ;
2018-05-27 09:36:35 +00:00
}
2018-11-17 02:36:02 +00:00
. forum_list . forum_right span a {
white-space : nowrap ;
}
2018-05-27 09:36:35 +00:00
. extra_little_row_avatar {
border-radius : 24px ;
height : 36px ;
width : 36px ;
}
2018-08-30 10:31:21 +00:00
. colstack , . topic_item {
2018-06-06 00:21:22 +00:00
display : flex ;
}
2018-08-30 10:31:21 +00:00
. topic_item . topic_name_forum_sep {
font-size : 20px ;
line-height : 30px ;
margin-left : 7px ;
margin-right : 7px ;
}
. topic_item . topic_forum {
font-size : 19px ;
2018-12-31 09:03:49 +00:00
line-height : 30px ;
2018-09-01 06:53:50 +00:00
color : # cccccc ;
2018-08-30 10:31:21 +00:00
}
. topic_view_count {
font-size : 17px ;
margin-left : auto ;
margin-right : 20px ;
margin-top : 6px ;
}
. topic_view_count : after {
2018-12-06 11:09:10 +00:00
content : "{{lang " topic . view_count_suffix " . }}" ;
2018-08-30 10:31:21 +00:00
}
2018-12-27 05:42:41 +00:00
. edithead {
margin-left : 0px ;
margin-bottom : 10px ;
}
2018-08-30 10:31:21 +00:00
. topic_name_input {
width : 100 % ;
2018-12-27 05:42:41 +00:00
margin-right : 10px ;
margin-bottom : 0px ;
margin-left : 0px ;
margin-left : 0px ;
2018-08-30 10:31:21 +00:00
}
. topic_item . submit_edit {
2018-12-27 05:42:41 +00:00
/*margin-right: 16px;*/
}
. zone_view_topic button , . zone_view_topic . formbutton {
padding : 5px ;
padding-top : 4px ;
padding-bottom : 4px ;
2018-08-30 10:31:21 +00:00
}
2018-07-13 11:27:58 +00:00
. postImage {
width : 100 % ;
max-width : 320px ;
}
2019-03-24 07:23:38 +00:00
blockquote {
background-color : # 555555 ;
border-radius : 3px ;
padding : 8px ;
margin : 0px ;
2019-03-25 03:30:56 +00:00
margin-top : 8px ;
2019-03-24 07:23:38 +00:00
margin-bottom : 8px ;
}
blockquote + br {
display : none ;
}
blockquote : only-child {
2019-03-25 03:30:56 +00:00
margin-top : 0px ;
2019-03-24 07:23:38 +00:00
margin-bottom : 0px ;
}
2019-03-25 03:30:56 +00:00
blockquote : first-child {
margin-top : 0px ;
}
2018-07-05 09:54:01 +00:00
. post_item {
display : flex ;
margin-bottom : 12px ;
}
. userinfo {
margin-right : 12px ;
2018-07-13 11:27:58 +00:00
padding : 24px ;
padding-bottom : 16px ;
2018-07-05 09:54:01 +00:00
background-color : # 444444 ;
border-radius : 3px ;
2018-07-13 11:27:58 +00:00
width : 150px ;
2018-07-05 09:54:01 +00:00
}
2018-10-14 06:09:25 +00:00
. userinfo , . user_meta {
2018-08-19 06:25:59 +00:00
display : flex ;
flex-direction : column ;
}
2018-07-05 09:54:01 +00:00
. avatar_item {
2018-07-13 11:27:58 +00:00
border-radius : 36px ;
height : 58px ;
width : 58px ;
background-size : 78px ;
2018-07-05 09:54:01 +00:00
margin-left : auto ;
margin-right : auto ;
}
. the_name {
margin-left : auto ;
margin-right : auto ;
white-space : nowrap ;
display : block ;
2018-07-13 11:27:58 +00:00
font-size : 18px ;
2018-07-05 09:54:01 +00:00
margin-top : 8px ;
line-height : 16px ;
}
. tag_block {
display : flex ;
}
. post_tag {
white-space : nowrap ;
margin-left : auto ;
margin-right : auto ;
display : block ;
}
2018-09-01 06:53:50 +00:00
. post_item . topic_content_input {
resize : vertical ;
height : 150px ;
2018-07-05 09:54:01 +00:00
padding : 16px ;
2018-09-01 06:53:50 +00:00
}
. post_item . content_container {
2018-07-05 09:54:01 +00:00
border-radius : 3px ;
width : 100 % ;
2018-07-13 11:27:58 +00:00
display : flex ;
flex-direction : column ;
color : # bbbbbb ;
}
2018-12-27 05:42:41 +00:00
. action_item . content_container , . post_item . user_content , . post_item . button_container {
2018-09-01 06:53:50 +00:00
background-color : # 444444 ;
border-radius : 3px ;
padding : 16px ;
}
2019-02-28 08:42:25 +00:00
. user_content {
word-break : break-word ;
}
2019-04-09 05:33:39 +00:00
. user_content h2 {
font-size : 20px ;
}
. user_content h3 {
font-size : 19px ;
}
. user_content h2 , . user_content h3 {
margin-top : 3px ;
margin-bottom : 12px ;
margin-left : 0px ;
}
. user_content h2 + br , . user_content h3 + br {
display : none ;
}
. user_content strong h2 , . user_content strong h3 {
font-weight : bold ;
}
2018-12-27 09:12:30 +00:00
. user_content . in_edit {
padding : 0px ;
background : none ;
}
. user_content textarea {
resize : vertical ;
height : 150px ;
width : 100 % ! important ;
padding : 16px ;
}
2019-04-10 07:40:47 +00:00
red {
color : red ;
}
2018-12-27 09:12:30 +00:00
. user_content . in_edit a {
display : flex ;
background-color : # 444444 ;
border-radius : 4px ;
margin-top : 4px ; /*8 without <br>*/
padding : 6px ;
}
2018-07-13 11:27:58 +00:00
. post_item . button_container {
display : flex ;
2018-09-01 06:53:50 +00:00
margin-top : 8px ;
margin-bottom : auto ;
padding : 14px ;
2018-07-13 11:27:58 +00:00
}
. post_item . action_button {
margin-right : 5px ;
font-size : 15px ;
color : # dddddd ;
2018-08-30 05:53:21 +00:00
white-space : nowrap ;
2018-07-13 11:27:58 +00:00
}
2018-10-14 06:09:25 +00:00
. post_item . action_button_left , . post_item . action_button_right {
2018-08-21 08:00:35 +00:00
display : flex ;
}
2018-07-13 11:27:58 +00:00
. post_item . action_button_right {
margin-left : auto ;
}
2018-12-27 05:42:41 +00:00
. post_item . controls : not ( . has_likes ) . like_count , . action_item . userinfo , . action_item . action_icon {
2018-07-24 05:40:26 +00:00
display : none ;
}
. action_item . content_container {
padding-top : 12px ;
padding-bottom : 12px ;
}
. action_item . content_container span {
margin-left : auto ;
margin-right : auto ;
}
2018-08-30 10:31:21 +00:00
input [ type = checkbox ] {
display : none ;
}
input [ type = checkbox ] + label {
display : inline-flex ;
width : 18px ;
height : 18px ;
margin-bottom : -2px ;
margin-right : 8px ;
border : 1px solid rgb ( 120 , 120 , 120 ) ;
background-color : rgb ( 90 , 90 , 90 ) ;
padding-top : 1px ;
border-radius : 2px ;
}
input [ type = checkbox ] : checked + label . sel {
width : 8px ;
height : 8px ;
background : rgb ( 160 , 160 , 160 ) ;
margin-left : auto ;
margin-right : auto ;
margin-top : auto ;
margin-bottom : auto ;
border-radius : 2px ;
}
. poll_option {
display : flex ;
margin-bottom : 10px ;
}
. poll_option_text {
line-height : 14px ;
}
. poll_buttons {
padding-top : 4px ;
}
. poll_buttons button {
margin-right : 8px ;
}
2019-04-10 07:40:47 +00:00
. poll_results {
margin-left : 12px ;
}
2018-08-30 10:31:21 +00:00
2018-09-01 06:53:50 +00:00
. ip_item {
display : none ;
}
2018-07-13 11:27:58 +00:00
. add_like : before , . remove_like : before {
2018-12-06 11:09:10 +00:00
content : "{{lang " topic . plus_one " . }}" ;
2018-07-13 11:27:58 +00:00
}
2018-08-19 06:25:59 +00:00
. button_container . open_edit : after , . edit_item : after {
2018-12-06 11:09:10 +00:00
content : "{{lang " topic . edit_button_text " . }}" ;
2018-07-13 11:27:58 +00:00
}
. ip_item_button : after {
2018-12-06 11:09:10 +00:00
content : "{{lang " topic . ip_button_text " . }}" ;
2018-12-14 04:08:53 +00:00
} { { $ p : = . } }
2019-03-25 03:30:56 +00:00
{ { r a n g e ( t o A r r " q u o t e " " d e l e t e " " l o c k " " u n l o c k " " p i n " " u n p i n " " r e p o r t " ) } }
2018-12-14 04:08:53 +00:00
. { { . } } _item : after {
content : "{{lang (concat " topic . " . " _button_text ") ($p) }}" ;
} { { e n d } }
2018-08-25 09:32:00 +00:00
. like_count : after {
2018-12-06 11:09:10 +00:00
content : "{{lang " topic . like_count_suffix " . }}" ;
2018-08-25 09:32:00 +00:00
}
2018-07-05 09:54:01 +00:00
2018-12-27 05:42:41 +00:00
/ * . attach_edit_bay {
display : flex ;
flex-direction : row ;
} * /
. attach_item {
display : flex ;
background-color : # 444444 ;
border-radius : 4px ;
margin-top : 8px ;
padding : 6px ;
text-overflow : ellipsis ;
overflow : hidden ;
}
. attach_item_selected {
background-color : # 446644
}
. attach_item img {
margin-right : 8px ;
border-radius : 4px ;
}
2019-04-16 11:45:55 +00:00
. attach_item_item span {
2018-12-27 05:42:41 +00:00
margin-bottom : 4px ;
}
. attach_edit_bay button {
margin-top : 8px ;
margin-left : 8px ;
}
/* New */
. attach_item {
padding : 8px ;
width : 100 % ;
}
2019-04-16 11:45:55 +00:00
. attach_item_item span {
2018-12-27 05:42:41 +00:00
margin-right : auto ;
overflow : hidden ;
text-overflow : ellipsis ;
2019-04-16 11:45:55 +00:00
width : 350px ;
}
. attach_image_holder span {
2018-12-27 05:42:41 +00:00
width : 300px ;
}
. attach_item button {
margin-top : -1px ;
}
2019-04-16 09:42:20 +00:00
. post_item : not ( . has_attachs ) . attach_item_delete {
display : none ;
}
2018-12-27 05:42:41 +00:00
2018-12-17 04:58:55 +00:00
. zone_view_topic . pageset {
margin-bottom : 14px ;
}
2018-07-05 09:54:01 +00:00
. topic_reply_container {
display : flex ;
}
2019-01-21 12:27:59 +00:00
. rowlist . bgavatars : not ( . not_grid ) , . micro_grid {
2018-09-01 08:03:26 +00:00
display : grid ;
2018-12-06 11:09:10 +00:00
/ * grid-gap : 16px ;
grid-row-gap : 8px ; * /
grid-gap : 24px ;
grid-row-gap : 16px ;
2018-09-01 08:03:26 +00:00
grid-template-columns : repeat ( 3 , 1fr ) ;
2018-12-06 11:09:10 +00:00
grid-template-columns : repeat ( auto-fit , minmax ( 180px , 1fr ) ) ;
}
. rowlist . bgavatars . micro_grid , . micro_grid {
grid-gap : 16px ;
grid-row-gap : 4px ;
grid-template-columns : repeat ( auto-fit , minmax ( 100px , 1fr ) ) ;
2018-09-01 08:03:26 +00:00
}
2018-12-06 11:09:10 +00:00
. rowlist . bgavatars . rowitem , . micro_grid . rowitem {
2018-09-01 08:03:26 +00:00
display : flex ;
flex-direction : column ;
2018-12-06 11:09:10 +00:00
/*width: 180px;*/
2018-09-01 08:03:26 +00:00
background-image : none ! important ;
margin-bottom : 10px ;
padding : 16px ;
}
2019-01-21 12:27:59 +00:00
. rowlist . not_grid . rowitem {
flex-direction : row ;
}
2018-10-14 06:09:25 +00:00
. rowlist . bgavatars . bgsub , . rowlist . bgavatars . rowTitle {
2018-09-01 08:03:26 +00:00
margin-left : auto ;
margin-right : auto ;
2018-10-14 06:09:25 +00:00
}
. rowlist . bgavatars . bgsub {
2018-09-01 08:03:26 +00:00
border-radius : 32px ;
height : 64px ;
width : 64px ;
}
. rowlist . bgavatars . rowTitle {
font-size : 18px ;
margin-top : 4px ;
}
2019-01-21 12:27:59 +00:00
. rowlist . bgavatars . not_grid . bgsub {
2019-02-10 05:52:26 +00:00
height : 28px ;
width : 28px ;
margin-left : 4px ;
margin-right : 10px ;
2019-01-21 12:27:59 +00:00
}
. rowlist . bgavatars . not_grid . rowTitle {
2019-02-10 05:52:26 +00:00
font-size : 17px ;
2019-01-21 12:27:59 +00:00
margin-left : 0px ;
2019-02-10 05:52:26 +00:00
margin-top : 0px ;
2019-01-21 12:27:59 +00:00
}
2018-09-01 08:03:26 +00:00
. ip_search_block {
margin-bottom : 12px ;
}
. ip_search_input {
width : 100 % ;
margin-right : 8px ;
}
2018-11-17 02:36:02 +00:00
. footer . widget , . elapsed {
2018-05-27 09:36:35 +00:00
padding : 12px ;
2018-06-06 00:21:22 +00:00
border-bottom : 1px solid # 555555 ;
2018-05-27 09:36:35 +00:00
}
2018-11-17 02:36:02 +00:00
. elapsed {
padding : 6px ;
background : rgb ( 82 , 82 , 82 ) ;
border-radius : 3px ;
font-size : 13 . 5px ;
color : rgb ( 200 , 200 , 200 ) ;
margin-top : 1px ;
margin-bottom : 4px ;
padding-bottom : 2px ;
padding-top : 3px ;
2018-11-18 05:28:27 +00:00
margin-right : 3px ;
2018-11-17 02:36:02 +00:00
}
2018-05-27 09:36:35 +00:00
# poweredByHolder {
display : flex ;
2018-09-02 05:43:17 +00:00
padding-top : 12px ;
2018-05-27 09:36:35 +00:00
padding-left : 16px ;
padding-right : 16px ;
2018-09-02 05:43:17 +00:00
padding-bottom : 8px ;
2018-05-27 09:36:35 +00:00
}
# poweredBy {
margin-right : auto ;
}
. footer . widget , # poweredByHolder {
background-color : # 444444 ;
}
2018-10-14 06:09:25 +00:00
. level_complete , . level_future , . level_inprogress , . progressWrap {
2018-10-10 07:33:51 +00:00
display : flex ;
}
. level_complete {
background-color : rgb ( 68 , 93 , 68 ) ! important ;
width : 100 % ;
}
. level_future {
background-color : rgb ( 88 , 68 , 68 ) ! important ;
width : 100 % ;
}
. progressWrap {
margin-left : auto ;
}
2018-10-24 12:54:07 +00:00
. levelBit {
color : # dadada ;
}
2018-10-10 07:33:51 +00:00
/* CSS behaves in stupid ways, so we need to be very specific about this */
2018-10-11 09:50:48 +00:00
. rowblock : not ( . topic_list ) : not ( . rowhead ) : not ( . opthead ) . rowitem . level_inprogress : not ( . post_item ) ,
. coldyn_item . rowitem . level_inprogress {
padding : 0px ! important ;
2018-10-10 07:33:51 +00:00
}
. level_inprogress > div {
display : flex ;
padding-top : 12px ;
padding-bottom : 12px ;
padding-left : 12px ;
border-radius : 3px ;
width : 100 % ;
background-color : rgb ( 68 , 93 , 68 ) ! important ;
}
2018-10-11 09:50:48 +00:00
. level_inprogress . levelBit {
display : inline ;
}
2018-12-03 12:32:46 +00:00
. level_inprogress . levelBit a {
white-space : nowrap ;
}
2018-10-10 07:33:51 +00:00
. level_inprogress . progressWrap {
width : 100 % ;
padding-left : 0px ;
padding-right : 12px ;
background-color : rgb ( 68 , 68 , 68 ) ! important ;
}
. level_inprogress . progressWrap div {
margin-left : auto ;
2018-10-24 12:54:07 +00:00
white-space : nowrap ;
2018-10-10 07:33:51 +00:00
}
2018-08-31 06:25:13 +00:00
@ media ( max-width : 600px ) {
. rowhead h1 , . opthead h1 , . colstack_head h1 {
font-size : 19px ;
}
. topic_list_title_block . opt {
margin-top : -1px ;
}
. topic_list_title_block . opt a {
font-size : 16px ;
}
. topic_list . topic_middle {
display : none ;
}
. topic_left , . topic_right , . topic_middle {
width : 50 % ;
}
. topic_right_inside . lastName , . topic_left . rowtopic {
margin-top : -4px ;
}
. topic_left img , . topic_right img {
height : 32px ;
width : 32px ;
}
. topic_list . topic_right_inside . lastReplyAt , . topic_list . topic_left . starter {
white-space : nowrap ;
}
. userinfo {
padding : 18px ;
width : 140px ;
}
. avatar_item {
height : 48px ;
width : 48px ;
background-size : 68px ;
}
. the_name {
font-size : 17px ;
}
}
2018-08-19 06:25:59 +00:00
@ media ( max-width : 500px ) {
2018-12-27 09:12:30 +00:00
. sidebar , . topic_view_count {
2018-09-01 06:53:50 +00:00
display : none ;
2018-08-21 08:00:35 +00:00
}
2018-09-01 06:53:50 +00:00
2018-08-21 08:00:35 +00:00
. post_item . button_container {
display : block ;
margin-top : 8px ;
2018-09-01 06:53:50 +00:00
background : transparent ;
padding : 0px ;
2018-08-21 08:00:35 +00:00
}
. post_item . action_button_left {
display : block ;
background-color : # 444444 ;
2018-09-01 06:53:50 +00:00
border-radius : 3px ;
2018-08-21 08:00:35 +00:00
padding : 10px ;
}
2018-08-25 09:32:00 +00:00
. post_item . action_button_right {
background-color : # 444444 ;
2018-09-01 06:53:50 +00:00
border-radius : 3px ;
2018-08-25 09:32:00 +00:00
padding : 10px ;
padding-left : 14px ;
/*padding-right: 12px;*/
margin-top : 8px ;
}
. post_item . controls : not ( . has_likes ) . like_count {
display : inline ;
}
. post_item . created_at {
margin-left : auto ;
}
2018-08-19 06:25:59 +00:00
. post_item , . topic_reply_container {
flex-direction : column ;
}
. userinfo {
margin-right : 0px ;
width : auto ;
flex-direction : row ;
2018-12-08 06:49:14 +00:00
margin-bottom : 8px ;
2018-08-19 06:25:59 +00:00
padding : 18px ;
padding-bottom : 14px ;
}
. avatar_item {
height : 46px ;
width : 46px ;
margin-left : 0px ;
margin-right : 0px ;
}
. user_meta {
margin-left : 10px ;
margin-top : -4px ;
}
}
2018-12-08 06:49:14 +00:00
@ media ( max-width : 460px ) {
2019-04-02 00:59:29 +00:00
ul {
background : # 3f3f3f ;
}
2018-12-08 06:49:14 +00:00
. topic_list_title , . filter_opt_sep {
display : none ;
}
. topic_list_title_block . create_topic_opt a : before {
content : "{{lang " quick_topic . create_topic_button_short " . }}" ;
}
. topic_list_title_block . mod_opt a : before {
content : "{{lang " topic_list . moderate_short " . }}" ;
}
2019-02-28 07:28:17 +00:00
. topic_inner_left . parent_forum , . parent_forum_sep {
display : none ;
}
2018-12-08 06:49:14 +00:00
}
2018-08-30 05:53:21 +00:00
@ media ( max-width : 601px ) {
2018-07-24 05:40:26 +00:00
ul {
padding-left : 14px ;
}
li a {
padding-bottom : 6px ;
font-size : 15px ;
color : # bfbfbf ;
}
2018-08-30 05:53:21 +00:00
2018-07-24 05:40:26 +00:00
# menu_overview {
margin-right : 10px ;
}
# menu_overview a {
font-size : 17px ;
padding-bottom : 7px ;
color : rgb ( 226 , 226 , 226 ) ;
padding-top : 12px ;
}
2018-10-14 06:09:25 +00:00
. menu_left . menu_active a {
2018-08-30 05:53:21 +00:00
color : # cfcfcf ;
2018-07-24 05:40:26 +00:00
}
2018-08-30 05:53:21 +00:00
}
2018-07-24 05:40:26 +00:00
2018-08-30 05:53:21 +00:00
@ media ( max-width : 750px ) and ( min-width : 600px ) {
ul {
padding-left : 16px ;
2018-07-24 05:40:26 +00:00
}
2018-08-30 05:53:21 +00:00
# menu_overview {
margin-right : 12px ;
2018-07-24 05:40:26 +00:00
}
2018-08-30 05:53:21 +00:00
# menu_overview a {
font-size : 19px ;
padding-bottom : 5px ;
color : rgb ( 231 , 231 , 231 ) ;
padding-top : 11px ;
2018-07-24 05:40:26 +00:00
}
2018-08-30 05:53:21 +00:00
li a {
padding-bottom : 13px ;
2018-07-24 05:40:26 +00:00
font-size : 16px ;
2018-08-30 05:53:21 +00:00
color : # cfcfcf ;
}
2018-10-14 06:09:25 +00:00
. menu_left . menu_active a {
2018-08-30 05:53:21 +00:00
color : # dddddd ;
2018-07-24 05:40:26 +00:00
}
2018-08-30 05:53:21 +00:00
}
2018-07-24 05:40:26 +00:00
2018-08-30 05:53:21 +00:00
@ media ( max-width : 750px ) {
nav . nav {
background : # 2a2a2a ;
width : 100 % ;
2018-07-24 05:40:26 +00:00
}
2018-08-30 05:53:21 +00:00
ul {
display : flex ;
padding-right : 0px ;
2018-07-28 12:52:23 +00:00
}
2018-08-30 05:53:21 +00:00
li {
float : left ;
margin-right : 6px ;
2018-07-28 12:52:23 +00:00
}
2018-08-30 05:53:21 +00:00
li a {
padding-top : 14px ;
display : inline-block ;
2018-07-24 05:40:26 +00:00
}
2018-10-14 06:09:25 +00:00
. menu_left . menu_active a {
2018-08-30 05:53:21 +00:00
padding-bottom : 15px ;
border : none ;
}
2019-04-02 00:59:29 +00:00
. more_menu {
top : 50px ;
}
2018-08-30 05:53:21 +00:00
. right_of_nav {
width : auto ;
padding : 0px ;
}
. user_box {
display : none ;
}
# back {
flex-direction : column ;
2018-07-24 05:40:26 +00:00
}
2018-09-01 06:53:50 +00:00
. topic_item . topic_name_forum_sep {
font-size : 17px ;
line-height : 28px ;
margin-left : 5px ;
margin-right : 5px ;
}
. topic_item . topic_forum {
font-size : 17px ;
line-height : 28px ;
}
2018-07-24 05:40:26 +00:00
}
2018-09-20 12:39:03 +00:00
@ media ( min-width : 751px ) {
. menu_profile {
display : none ;
}
2019-02-28 09:01:28 +00:00
. shrink_main # main {
2019-02-28 07:28:17 +00:00
max-width : calc ( 100 % - 180px ) ;
}
2018-09-20 12:39:03 +00:00
}
2018-07-24 05:40:26 +00:00
@ media ( max-width : 850px ) {
/**/
}
2018-05-27 09:36:35 +00:00
@ media ( min-width : 1010px ) {
2019-04-02 00:59:29 +00:00
# container {
2019-03-04 06:43:07 +00:00
background-color : { { $ s e c o n d _ d a r k _ b g } } ;
2018-05-27 09:36:35 +00:00
}
2018-08-30 05:53:21 +00:00
# back , . footer {
2018-05-27 09:36:35 +00:00
width : 1000px ;
margin-left : auto ;
margin-right : auto ;
}
. footBlock {
display : flex ;
}
. footer {
display : flex ;
flex-direction : column ;
}
2018-08-30 05:53:21 +00:00
. userinfo {
width : 180px ;
padding-bottom : 18px ;
}
. userinfo . avatar_item {
height : 64px ;
width : 64px ;
background-size : 88px ;
}
. userinfo . the_name {
font-size : 19px ;
}
. userinfo . post_tag {
font-size : 17px ;
}
2018-05-27 09:36:35 +00:00
}
@ media ( min-width : 1330px ) {
nav . nav {
width : calc ( 85 % - 200px )
}
ul {
margin-left : 205px ;
}
. right_of_nav {
width : calc ( 15 % + 200px ) ;
}
. user_box {
width : 200px ;
}
2019-02-28 07:28:17 +00:00
}