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 {
color : white ;
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 ;
}
. rowblock : not ( . topic_list ) : not ( . rowhead ) : not ( . opthead ) . rowitem {
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 ;
margin-left : 12px ;
}
2018-06-17 07:28:18 +00:00
. colstack_right . colstack_item . the_form {
border-radius : 3px ;
background-color : # 444444 ;
padding : 16px ;
}
. 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
h1 , h3 {
-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 ;
}
. mod_floater , . modal_pane {
display : none ;
}
. rowhead , . opthead {
margin-left : 18px ;
margin-bottom : 8px ;
}
. rowhead h1 , . opthead h1 {
font-size : 23px ;
}
. sidebar . rowhead {
margin-top : 4px ;
margin-bottom : 8px ;
}
. sidebar . rowhead h1 {
font-size : 20px ;
}
. 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 ;
padding-bottom : 12px ;
display : flex ;
width : 33 % ;
}
. topic_middle {
padding-top : 15px ;
}
. topic_left {
margin-right : auto ;
}
. topic_left img , . topic_right img {
border-radius : 24px ;
height : 38px ;
width : 38px ;
margin-right : 8px ;
margin-top : 1px ;
}
. topic_inner_left {
display : flex ;
flex-direction : column ;
}
. 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 ;
}
. 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 ;
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-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-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 ;
}
@ 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 ;
}
}