2018-05-27 09:36:35 +00:00
: root {
--darkest-background : # 222222 ;
2018-06-17 07:28:18 +00:00
--second-dark-background : # 292929 ;
--third-dark-background : # 333333 ;
}
2018-05-27 09:36:35 +00:00
* {
box-sizing : border-box ;
}
body {
margin : 0px ;
padding : 0px ;
color : # AAAAAA ;
2018-06-06 00:21:22 +00:00
background-color : var ( --darkest-background ) ;
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 {
background : var ( --darkest-background ) ;
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 ;
}
2018-05-27 09:36:35 +00:00
. right_of_nav {
float : left ;
width : 200px ;
background-color : var ( --darkest-background ) ;
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 ;
background-color : var ( --third-dark-background ) ;
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 ;
}
. container {
clear : both ;
}
# back {
2018-06-17 07:28:18 +00:00
background : var ( --third-dark-background ) ;
2018-05-27 09:36:35 +00:00
padding : 24px ;
padding-top : 12px ;
clear : both ;
display : flex ;
}
# main , # main . rowblock {
width : 100 % ;
}
. sidebar {
width : 320px ;
}
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 ;
}
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 ;
}
. 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
}
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 ;
}
. 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 ;
}
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 ;
}
. quick_create_form . topic_meta . topic_name_row {
margin-bottom : 8px ;
width : 100 % ;
}
2018-09-21 04:23:25 +00:00
. quick_create_form . topic_meta . topic_name_row : not ( : only-child ) {
margin-left : 8px ;
}
. 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 ;
}
2018-09-26 07:46:30 +00:00
. hide_ajax_topic , . auto_hide , . show_on_edit : not ( . edit_opened ) , . hide_on_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
}
. topic_inner_left . parent_forum {
display : none ; /* Comment this until we figure out how to make it work */
}
. 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 ;
}
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
}
# 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 ;
line-height : 31px ;
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
}
. topic_name_input {
width : 100 % ;
margin-right : 12px ;
}
. topic_item . submit_edit {
margin-right : 16px ;
}
2018-07-13 11:27:58 +00:00
. postImage {
width : 100 % ;
max-width : 320px ;
}
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-09-02 05:43:17 +00:00
. action_item . content_container , . post_item . user_content {
2018-09-01 06:53:50 +00:00
background-color : # 444444 ;
border-radius : 3px ;
padding : 16px ;
}
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 ;
background-color : # 444444 ;
border-radius : 3px ;
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-08-25 09:32:00 +00:00
. post_item . controls : not ( . has_likes ) . like_count {
display : none ;
}
2018-07-13 11:27:58 +00:00
2018-07-24 05:40:26 +00:00
. action_item . userinfo , . action_item . action_icon {
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 ;
}
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 : = . } }
{ { r a n g e ( t o A r r " 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 " ) } }
. { { . } } _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
. topic_reply_container {
display : flex ;
}
2018-12-06 11:09:10 +00:00
. rowlist . bgavatars , . 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 ;
}
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 ;
}
. 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 ) {
. sidebar {
display : none ;
}
2018-09-01 06:53:50 +00:00
. topic_view_count {
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 ) {
. 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 " . }}" ;
}
}
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 ;
}
. 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 ;
}
}
2018-07-24 05:40:26 +00:00
@ media ( max-width : 850px ) {
/**/
}
2018-05-27 09:36:35 +00:00
@ media ( min-width : 1010px ) {
. container {
2018-06-17 07:28:18 +00:00
background-color : var ( --second-dark-background ) ;
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 ;
}
}