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 ;
}
. menu_topics a {
border-bottom : 2px solid # 777777 ;
padding-bottom : 21px ;
color : # dddddd ;
}
. menu_alerts {
display : none ;
}
. 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
}
. 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-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-07-13 11:27:58 +00:00
font-size : 22px ;
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-left : 8px ;
margin-bottom : 8px ;
width : 100 % ;
}
. quick_create_form . topic_meta . topic_name_row input {
width : 100 % ;
}
. quick_create_form . topic_content_row textarea {
width : 100 % ;
height : 60px ;
}
. 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-07-03 10:01:49 +00:00
. more_topic_block_initial {
display : none ;
}
. more_topic_block_active {
display : block ;
}
. hide_ajax_topic {
display : none ! important ;
}
2018-07-05 09:54:01 +00:00
. auto_hide , . show_on_edit {
display : none ;
}
2018-07-03 10:01:49 +00:00
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 ;
margin-left : auto ;
font-size : 17px ;
margin-top : 3 . 5px ;
margin-right : 16px ;
margin-right : 18px ;
}
2018-07-15 05:00:48 +00:00
. topic_list_title_block . pre_opt : before {
content : "{{index .Phrases " 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 {
content : "Create Topic" ;
}
. topic_list_title_block . mod_opt a : before {
content : "Moderate" ;
}
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 ;
}
. topic_inner_left br , . topic_right_inside br , . topic_inner_right {
display : none ;
}
. topic_middle . replyCount : after {
content : "replies" ;
margin-left : 3px ;
}
. topic_middle . likeCount : after {
content : "likes" ;
margin-left : 3px ;
}
. topic_middle_inside {
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-06-17 07:28:18 +00:00
input , select , button , . formbutton , textarea {
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 ) ;
}
input {
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 ;
padding : 5px ;
padding-bottom : 3px ;
font-size : 16px ;
}
button , . formbutton {
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-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 ;
width : 140px ;
}
. forum_list . forum_right img {
margin-right : 10px ;
margin-top : 2px ;
}
. forum_list . forum_right span {
line-height : 19px ;
}
. extra_little_row_avatar {
border-radius : 24px ;
height : 36px ;
width : 36px ;
}
2018-06-06 00:21:22 +00:00
. colstack {
display : flex ;
}
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
display : flex ;
flex-direction : column ;
}
. 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 ;
}
. post_item . content_container {
padding : 16px ;
background-color : # 444444 ;
border-radius : 3px ;
width : 100 % ;
2018-07-13 11:27:58 +00:00
display : flex ;
flex-direction : column ;
color : # bbbbbb ;
}
. post_item . button_container {
display : flex ;
margin-top : auto ;
}
. post_item . action_button {
margin-right : 5px ;
font-size : 15px ;
color : # dddddd ;
}
. post_item . action_button_right {
margin-left : auto ;
display : flex ;
}
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-07-13 11:27:58 +00:00
. add_like : before , . remove_like : before {
content : "{{index .Phrases " topic . plus_one "}}" ;
}
. button_container . open_edit : after , . edit_item : after {
content : "{{index .Phrases " topic . edit_button_text "}}" ;
}
. delete_item : after {
content : "{{index .Phrases " topic . delete_button_text "}}" ;
}
. ip_item_button : after {
content : "{{index .Phrases " topic . ip_button_text "}}" ;
}
. lock_item : after {
content : "{{index .Phrases " topic . lock_button_text "}}" ;
}
. unlock_item : after {
content : "{{index .Phrases " topic . unlock_button_text "}}" ;
}
. pin_item : after {
content : "{{index .Phrases " topic . pin_button_text "}}" ;
}
. unpin_item : after {
content : "{{index .Phrases " topic . unpin_button_text "}}" ;
}
. report_item : after {
content : "{{index .Phrases " topic . report_button_text "}}" ;
2018-07-05 09:54:01 +00:00
}
. topic_reply_container {
display : flex ;
}
2018-05-27 09:36:35 +00:00
. footer . widget {
padding : 12px ;
2018-06-06 00:21:22 +00:00
border-bottom : 1px solid # 555555 ;
2018-05-27 09:36:35 +00:00
}
# poweredByHolder {
display : flex ;
padding : 12px ;
padding-left : 16px ;
padding-right : 16px ;
}
# poweredBy {
margin-right : auto ;
}
. footer . widget , # poweredByHolder {
background-color : # 444444 ;
}
2018-07-24 05:40:26 +00:00
@ media ( max-width : 600px ) {
nav . nav {
background : # 2a2a2a ;
width : 100 % ;
}
ul {
display : flex ;
padding-left : 14px ;
padding-right : 0px ;
}
li {
float : left ;
margin-right : 6px ;
}
li a {
padding-top : 14px ;
padding-bottom : 6px ;
font-size : 15px ;
display : inline-block ;
color : # bfbfbf ;
}
. menu_topics a {
padding-bottom : 15px ;
color : # cfcfcf ;
border : none ;
}
# menu_overview {
margin-right : 10px ;
}
# menu_overview a {
font-size : 17px ;
padding-bottom : 7px ;
color : rgb ( 226 , 226 , 226 ) ;
padding-top : 12px ;
}
. right_of_nav {
width : auto ;
padding : 0px ;
}
. user_box {
display : none ;
}
# back {
flex-direction : column ;
}
. 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 ;
}
2018-07-28 12:52:23 +00:00
. topic_left , . topic_right , . topic_middle {
width : 50 % ;
}
. topic_right_inside . lastName , . topic_left . rowtopic {
margin-top : -4px ;
}
2018-07-24 05:40:26 +00:00
. topic_left img , . topic_right img {
height : 32px ;
width : 32px ;
}
. topic_list . topic_right_inside . lastReplyAt , . topic_list . topic_left . starter {
white-space : nowrap ;
}
}
@ 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
}
# back {
width : 1000px ;
margin-left : auto ;
margin-right : auto ;
}
. footBlock {
display : flex ;
}
. footer {
margin-left : auto ;
margin-right : auto ;
width : 1000px ;
display : flex ;
flex-direction : column ;
}
}
@ 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 ;
}
}