github.com/Azareal/Gosora@v0.0.0-20210729070923-553e66b59003/themes/shadow/public/main.css (about)

     1  /* Patch for Edge, until they fix emojis in arial x.x */
     2  @supports (-ms-ime-align:auto) { .user_content { font-family: Segoe UI Emoji, arial; } }
     3  
     4  :root {
     5  	--main-block-color: rgb(61,61,61);
     6  	--main-text-color: white;
     7  	--dim-text-color: rgb(205,205,205);
     8  	--main-background-color: #222222;
     9  	--inner-background-color: #333333;
    10  	--input-background-color: #444444;
    11  	--input-border-color: #555555;
    12  	--input-text-color: #999999;
    13  	--bright-input-background-color: #555555;
    14  	--bright-input-border-color: #666666;
    15  	--input-text-color: #a3a3a3;
    16  }
    17  
    18  body {
    19  	font-family: arial;
    20  	color: var(--main-text-color);
    21  	background-color: var(--main-background-color);
    22  	margin: 0;
    23  }
    24  *::selection {
    25  	background-color: hsl(0,0%,75%);
    26  	color: hsl(0,0%,20%);
    27  	font-weight: 100;
    28  }
    29  
    30  #back {
    31  	margin-left: auto;
    32  	margin-right: auto;
    33  	width: 70%;
    34  	background-color: var(--inner-background-color);
    35  	position: relative;
    36  	top: -2px;
    37  }
    38  #main {
    39  	padding-bottom: 5px;
    40  }
    41  
    42  #main_menu {
    43  	list-style-type: none;
    44  	background-color: var(--main-block-color);
    45  	border-bottom: 1px solid var(--main-background-color);
    46  	padding-left: 15%;
    47  	padding-right: 15%;
    48  	margin: 0;
    49  	height: 41px;
    50  }
    51  
    52  .menu_left, .menu_right li {
    53  	float: left;
    54  	height: 29.5px;
    55  	padding-top: 12px;
    56  	margin: 0;
    57  }
    58  .menu_left {
    59  	margin-right: 10px;
    60  }
    61  .menu_right {
    62  	float: right;
    63  }
    64  
    65  #main_menu #menu_overview {
    66  	margin-right: 13px;
    67  	margin-left: 10px;
    68  	font-size: 16px;
    69  }
    70  
    71  #main_menu .menu_left:not(#menu_overview) {
    72  	font-size: 15px;
    73  	padding-top: 13px;
    74  }
    75  
    76  .alert_bell {
    77  	float: right;
    78  }
    79  .menu_alerts {
    80  	float: right;
    81  	padding-top: 14px;
    82  }
    83  .alert_counter {
    84  	background-color: rgb(200,0,0);
    85  	border-radius: 2px;
    86  	font-size: 11px;
    87  	padding: 3px;
    88  	float: right;
    89  	position: relative;
    90  	top: -1px;
    91  }
    92  .alert_aftercounter {
    93  	float: right;
    94  	margin-right: 4px;
    95  	font-size: 14px;
    96  }
    97  .alert_aftercounter:before {
    98  	content: "{{lang "menu_alerts" . }}";
    99  }
   100  
   101  .menu_alerts .alertList, .hide_on_big, .show_on_mobile {
   102  	display: none;
   103  }
   104  .auto_hide {
   105  	display: none !important;
   106  }
   107  .selectedAlert .alertList {
   108  	display: block;
   109  	position: absolute;
   110  	top: 44px;
   111  	float: left;
   112  	width: 200px;
   113  	z-index: 50;
   114  	right: 15%;
   115  	font-size: 13px;
   116  	background-color: var(--inner-background-color);
   117  }
   118  
   119  .alertItem {
   120  	margin-bottom: 2px;
   121  }
   122  .alertItem.withAvatar {
   123  	height: 40px;
   124  	background-size: 48px;
   125  	background-repeat: no-repeat;
   126  	background-color: var(--main-block-color);
   127  	padding-left: 56px;
   128  	padding-top: 8px;
   129  }
   130  
   131  a {
   132  	text-decoration: none;
   133  	color: var(--main-text-color);
   134  }
   135  
   136  .alertbox {
   137  	display: flex;
   138  }
   139  .alert {
   140  	padding-bottom: 12px;
   141  	background-color: var(--main-block-color);
   142  	border-left: 4px solid hsl(21, 100%, 50%);
   143  	padding: 12px;
   144  	display: block;
   145  	margin-top: 8px;
   146  	margin-bottom: -3px;
   147  	margin-left: 8px;
   148  	margin-right: 8px;
   149  	width: 100%;
   150  }
   151  
   152  .rowblock {
   153  	margin-left: 8px;
   154  	margin-right: 8px;
   155  }
   156  
   157  .opthead, .rowhead, .colstack_head {
   158  	padding-bottom: 0px;
   159  	padding-top: 3px !important;
   160  	white-space: nowrap;
   161  }
   162  
   163  .rowblock:not(.opthead):not(.colstack_head):not(.rowhead) .rowitem {
   164  	font-size: 15px; /*16px*/
   165  }
   166  .rowblock:last-child, .colstack_item:last-child {
   167  	padding-bottom: 10px;
   168  }
   169  
   170  .rowitem, .formitem {
   171  	padding-bottom: 12px;
   172  	background-color: var(--main-block-color);
   173  	margin-top: 8px;
   174  	padding: 12px;
   175  }
   176  .rowitem h1, .rowitem h2 {
   177  	font-size: 16px;
   178  	display: inline;
   179  }
   180  h1, h2, h3, h4, h5 {
   181  	-webkit-margin-before:0;
   182  	-webkit-margin-after:0;
   183  	margin-block-start:0;
   184  	margin-block-end:0;
   185  	margin-top:0;
   186  	margin-bottom:0;
   187  	font-weight: normal;
   188  }
   189  .rowsmall {
   190  	font-size: 12px;
   191  }
   192  
   193  .colstack {
   194  	display: flex;
   195  }
   196  .colstack_left, .colstack_right {
   197  	margin-left: 8px;
   198  }
   199  .colstack_left {
   200  	float: left;
   201  	width: 30%;
   202  }
   203  .colstack_right {
   204  	float: left;
   205  	width: calc(70% - 24px);
   206  }
   207  .colstack_left:empty,
   208  .colstack_right:empty,
   209  .show_on_edit:not(.edit_opened),
   210  .hide_on_edit.edit_opened,
   211  .show_on_block_edit:not(.edit_opened),
   212  .hide_on_block_edit.edit_opened,
   213  .link_select:not(.link_opened) {
   214  	display: none;
   215  }
   216  
   217  .colline {
   218  	font-size: 14px;
   219  	background-color: var(--main-block-color);
   220  	margin-top: 5px;
   221  	padding: 10px;
   222  }
   223  
   224  /* Align to right in a flex head */
   225  .to_left {
   226  	float: left;
   227  }
   228  .to_right {
   229  	float: right;
   230  	margin-left: auto;
   231  }
   232  
   233  /* Topic View */
   234  
   235  /* TODO: How should we handle the sticky headers? */
   236  .topic_sticky_head {}
   237  
   238  /* TODO: Add the avatars to the forum list */
   239  .forum_list .forum_nodesc {
   240  	font-style: italic;
   241  }
   242  .extra_little_row_avatar {
   243  	display: none;
   244  }
   245  .shift_left {
   246  	float: left;
   247  }
   248  .shift_right {
   249  	float: right;
   250  }
   251  
   252  .action_item .action_icon {
   253  	font-size: 18px;
   254  	padding-right: 5px;
   255  }
   256  
   257  /* TODO: Rewrite the closed topic header so that it looks more consistent with the rest of the theme */
   258  .topic_closed_head .topic_status_closed {
   259  	margin-bottom: -10px;
   260  	font-size: 19px;
   261  }
   262  
   263  .post_item {
   264  	background-size: 128px;
   265  	padding-left: calc(128px + 12px);
   266  }
   267  .user_content {
   268  	word-break: break-word;
   269  }
   270  .user_content h2 {
   271  	font-size: 18px;
   272  }
   273  .user_content h2, .user_content h3 {
   274  	margin-bottom: 12px;
   275  	display: block;
   276  }
   277  .user_content h4 {
   278  	margin-bottom: 8px;
   279  	display: block;
   280  }
   281  .user_content strong h2, .user_content strong h3, .user_content strong h4 {
   282  	font-weight: bold;
   283  }
   284  red {
   285  	color: red;
   286  }
   287  .update_buttons .add_file_button {
   288  	display: none;
   289  }
   290  
   291  .controls {
   292  	width: 100%;
   293  	display: inline-block;
   294  	margin-top: 20px;
   295  }
   296  
   297  .staff_post {
   298  	border: 1px solid rgb(101, 71, 101)
   299  }
   300  
   301  .user_tag {
   302  	float: right;
   303  	color: var(--dim-text-color);
   304  }
   305  .real_username {
   306  	float: left;
   307  	margin-right: 7px;
   308  }
   309  
   310  .mod_button {
   311  	margin-right: 5px;
   312  	display: block;
   313  	float: left;
   314  }
   315  .mod_button button {
   316  	border: none;
   317  	background: none;
   318  	color: var(--main-text-color);
   319  	font-size: 12px;
   320  	padding: 0;
   321  }
   322  
   323  .like_label:before {
   324  	content: "{{lang "topic.plus_one" . }}";
   325  }{{$out := .}}
   326  {{range (toArr "quote" "edit" "delete" "pin" "lock" "unlock" "unpin" "ip" "flag")}}
   327  .{{.}}_label:before {
   328  	content: "{{lang (concat "topic." . "_button_text") ($out) }}";
   329  }{{end}}
   330  
   331  .like_count_label, .like_count {
   332  	display: none;
   333  }
   334  .like_count_label:before {
   335  	content: "{{lang "topics_likes_suffix" . }}";
   336  }
   337  .has_likes .like_count_label, .has_likes .like_count {
   338  	font-size: 12px;
   339  	display: block;
   340  	float: left;
   341  	line-height: 19px;
   342  }
   343  .has_likes .like_count {
   344  	margin-right: 2px;
   345  }
   346  .like_count:before {
   347  	content: "{{lang "pipe" . }}";
   348  	margin-right: 5px;
   349  }
   350  
   351  .level_label, .level {
   352  	color: var(--dim-text-color);
   353  	float: right;
   354  }
   355  .level_label:before {
   356  	content: "{{lang "topic.level_tooltip" . }}";
   357  }
   358  .level {
   359  	margin-left: 3px;
   360  }
   361  
   362  .hide_spoil {
   363  	background-color: grey;
   364  	color: grey;
   365  }
   366  .hide_spoil img {
   367  	border: 0;
   368  	clip: rect(0 0 0 0);
   369  	height: 1px;
   370  	margin: -1px;
   371  	overflow: hidden;
   372  	padding: 50px;
   373  	white-space: nowrap;
   374  	width: 1px;
   375  	background-color: grey;
   376  }
   377  .hide_spoil img {
   378  	content: "   ";
   379  }
   380  .attach_box {
   381  	background-color: #5a5555;
   382  	background-color: rgb(71,71,76);
   383  	border-radius: 3px;
   384  	padding: 16px;
   385  	overflow-wrap: break-word;
   386  }
   387  
   388  .formrow.real_first_child, .formrow:first-child {
   389  	margin-top: 8px;
   390  }
   391  .formrow.real_first_child .formitem, .formrow:first-child .formitem {
   392  	padding-top: 12px;
   393  }
   394  .formrow:last-child .formitem {
   395  	padding-bottom: 12px;
   396  }
   397  
   398  .login_button_row {
   399  	display: flex;
   400  }
   401  .login_button_row .formitem > * {
   402  	padding-top: 5px;
   403  }
   404  .fall_opts {
   405  	display: flex;
   406  }
   407  .dont_have_account {
   408  	margin-left: auto;
   409  	padding-right: 0px;
   410  }
   411  .dont_have_account:after {
   412  	content: "|";
   413  	padding-left: 8px;
   414  	padding-right: 8px;
   415  }
   416  .forgot_password {
   417  	padding-left: 0px;
   418  }
   419  .formitem.dont_have_account, .formitem.forgot_password {
   420  	color: #909090;
   421  	font-size: 12px;
   422  	font-weight: normal;
   423  	padding-top: 11px;
   424  }
   425  
   426  textarea {
   427  	background-color: var(--input-background-color);
   428  	border-color: var(--input-border-color);
   429  	color: var(--input-text-color);
   430  	width: calc(100% - 15px);
   431  	min-height: 80px;
   432  }
   433  textarea:focus, input:focus, select:focus, button:focus {
   434  	outline-color: rgb(95,95,95);
   435  }
   436  textarea.large {
   437  	min-height: 120px;
   438  	margin-top: 1px;
   439  	padding: 5px;
   440  	display: block;
   441  }
   442  
   443  .formitem button, .formbutton, .mod_floater_submit, .pane_buttons button {
   444  	background-color: var(--input-background-color);
   445  	border: 1px solid var(--input-border-color);
   446  	color: var(--input-text-color);
   447  	padding: 7px;
   448  	padding-bottom: 6px;
   449  	font-size: 13px;
   450  }
   451  .mod_floater_submit {
   452  	padding: 5px;
   453  	padding-bottom: 4px;
   454  	margin-left: 2px;
   455  }
   456  .pane_buttons button {
   457  	padding: 5px;
   458  	padding-bottom: 4px;
   459  }
   460  
   461  .formrow {
   462  	flex-direction: row;
   463  	display: flex;
   464  }
   465  
   466  .formitem {
   467  	margin-top: 0px;
   468  	padding-bottom: 2px;
   469  	padding-top: 3px;
   470  	flex-grow: 2;
   471  }
   472  
   473  .formlabel {
   474  	flex-grow: 0;
   475  	width: 20%;
   476  	padding-top: 9px;
   477  }
   478  
   479  /* If the form label is on the right */
   480  .formlabel:not(:first-child) {
   481  	font-size: 15px;
   482  	flex-grow: 2;
   483  }
   484  
   485  .formrow.real_first_child .formlabel, .formrow:first-child .formlabel {
   486  	padding-top: 17px;
   487  }
   488  
   489  /* Too big compared to the other items in the Control Panel and Account Panel */
   490  /*.colstack_item .formrow.real_first_child, .colstack_item .formrow:first-child {
   491  	margin-top: 8px;
   492  }*/
   493  .colstack_item .formrow.real_first_child, .colstack_item .formrow:first-child {
   494  	margin-top: 3px;
   495  }
   496  
   497  .thin_margins .formrow.real_first_child, .thin_margins .formrow:first-child {
   498  	margin-top: 5px;
   499  }
   500  
   501  .formitem a {
   502  	font-size: 14px;
   503  }
   504  .rowmenu .rowitem, .rowlist .rowitem, .rowlist .formitem {
   505  	margin-top: 3px;
   506  	font-size: 13px;
   507  	padding: 10px;
   508  }
   509  .menu_stats {
   510  	font-size: 12px;
   511  }
   512  
   513  /* Mini paginators aka panel paginators */
   514  .pageset {
   515  	margin-top: 4px;
   516  	display: flex;
   517  	flex-direction: row;
   518  	margin-left: 8px;
   519  	margin-bottom: 8px;
   520  }
   521  .pageitem {
   522  	background-color: var(--main-block-color);
   523  	padding: 10px;
   524  	margin-right: 4px;
   525  	font-size: 13px;
   526  }
   527  
   528  .bgsub {
   529  	display: none;
   530  }
   531  .rowlist.bgavatars .rowitem {
   532  	background-repeat: no-repeat;
   533  	background-size: 40px;
   534  	padding-left: 46px;
   535  }
   536  .bgavatars:not(.rowlist) .rowitem {
   537  	background-repeat: no-repeat;
   538  	background-size: 40px;
   539  	padding-left: 46px;
   540  }
   541  .rowlist .formrow, .rowlist .formrow:first-child {
   542  	margin-top: 0px;
   543  }
   544  .loglist .to_left small {
   545  	margin-left: 2px;
   546  	font-size: 12px;
   547  }
   548  .loglist .to_right span {
   549  	font-size: 14px;
   550  }
   551  
   552  input {
   553  	background-color: var(--input-background-color);
   554  	border: 1px solid var(--input-border-color);
   555  	color: var(--input-text-color);
   556  	padding-bottom: 6px;
   557  	font-size: 13px;
   558  
   559  	padding: 5px;
   560   	width: calc(100% - 16px);
   561  }
   562  select {
   563  	background-color: var(--input-background-color);
   564  	border: 1px solid var(--input-border-color);
   565  	color: var(--input-text-color);
   566  	font-size: 13px;
   567  	padding: 4px;
   568  }
   569  .rowlist .formitem select {
   570  	padding: 2px;
   571  	font-size: 11px;
   572  	margin-top: -5px;
   573  }
   574  
   575  input, select, textarea {
   576  	caret-color: rgb(95,95,95);
   577  }
   578  
   579  .form_middle_button {
   580  	margin-left: auto;
   581  	margin-right: auto;
   582  	display: block;
   583  	margin-top: 5px;
   584  }
   585  
   586  .little_row_avatar {
   587  	display: none;
   588  }
   589  .topic_create_form .topic_board_row .formitem, .topic_create_form .topic_name_row .formitem {
   590  	padding-bottom: 5px;
   591  }
   592  .topic_create_form input, .topic_create_form select {
   593  	padding: 7px;
   594  	font-size: 13px;
   595  }
   596  .topic_create_form select {
   597  	padding: 6px;
   598  }
   599  .topic_create_form input {
   600  	width: calc(100% - 14px);
   601  }
   602  .topic_create_form textarea, .topic_reply_form textarea {
   603  	width: calc(100% - 26px);
   604  	min-height: 80px;
   605  	font-family: arial;
   606  	font-size: 14px;
   607  	padding: 12px;
   608  }
   609  .topic_create_form textarea {
   610  	padding: 7px;
   611  	width: calc(100% - 14px);
   612  }
   613  
   614  .quick_button_row .formitem, .quick_create_form .upload_file_dock {
   615  	display: flex;
   616  }
   617  .quick_create_form .add_file_button, .quick_create_form #add_poll_button {
   618  	margin-left: 8px;
   619  }
   620  .quick_create_form .close_form {
   621  	margin-left: auto;
   622  }
   623  .quick_create_form .uploadItem {
   624  	display: inline-block;
   625  	margin-left: 8px;
   626  	background-size: 25px 30px;
   627  	background-repeat: no-repeat;
   628  	padding-left: 30px;
   629  }
   630  
   631  .footBlock {
   632  	margin-top: -2px;
   633  	display: flex;
   634  }
   635  .footer {
   636  	width: 70%;
   637  	margin-left: auto;
   638  	margin-right: auto;
   639  }
   640  .elapsed {
   641  	display: none;
   642  }
   643  #poweredByHolder {
   644  	background-color: var(--main-block-color);
   645  	padding: 10px;
   646  	font-size: 14px;
   647  	padding-left: 13px;
   648  	padding-right: 13px;
   649  	clear: left;
   650  	height: 25px;
   651  }
   652  #poweredByHolder select {
   653  	background-color: var(--input-background-color);
   654  	border: 1px solid var(--input-border-color);
   655  	color: var(--input-text-color);
   656  	font-size: 13px;
   657  	padding: 4px;
   658  }
   659  #poweredBy {
   660  	float: left;
   661  	margin-top: 4px;
   662  }
   663  #poweredBy span {
   664  	font-size: 12px;
   665  }
   666  #themeSelector {
   667  	float: right;
   668  }
   669  
   670  .poll_item {
   671  	display: flex;
   672  }
   673  .poll_option {
   674  	margin-bottom: 3px;
   675  }
   676  input[type=checkbox] {
   677  	display: none;
   678  }
   679  input[type=checkbox] + label {
   680  	display: inline-block;
   681  	width: 12px;
   682  	height: 12px;
   683  	margin-bottom: -2px;
   684  	border: 1px solid var(--bright-input-border-color);
   685  	background-color: var(--bright-input-background-color);
   686  }
   687  input[type=checkbox]:checked + label .sel {
   688  	display: inline-block;
   689  	width: 5px;
   690  	height: 5px;
   691  	background-color: var(--bright-input-background-color);
   692  }
   693  input[type=checkbox] + label.poll_option_label {
   694  	width: 14px;
   695  	height: 14px;
   696  	margin-right: 3px;
   697  	background-color: var(--bright-input-background-color);
   698  	border: 1px solid var(--bright-input-border-color);
   699  	color: var(--bright-input-text-color);
   700  }
   701  input[type=checkbox]:checked + label.poll_option_label .sel {
   702  	display: inline-block;
   703  	width: 10px;
   704  	height: 10px;
   705  	margin-left: 3px;
   706  	background: var(--bright-input-border-color);
   707  }
   708  .pollinput {
   709  	display: flex;
   710  	margin-bottom: 8px;
   711  }
   712  .quick_create_form  .pollinputlabel {
   713  	display: none;
   714  }
   715  
   716  /*#poll_option_text_0 {
   717  	color: hsl(359,98%,43%);
   718  }*/
   719  .poll_buttons {
   720  	margin-top: 12px;
   721  }
   722  .poll_buttons button {
   723  	background-color: var(--bright-input-background-color);
   724  	border: 1px solid var(--bright-input-border-color);
   725  	color: var(--bright-input-text-color);
   726  	padding: 7px;
   727  	padding-bottom: 6px;
   728  	font-size: 13px;
   729  }
   730  .poll_buttons > *:not(:first-child) {
   731  	margin-left: 5px;
   732  }
   733  .poll_results {
   734  	margin-left: auto;
   735  	max-height: 120px;
   736  }
   737  
   738  /* Forum View */
   739  .rowhead, .opthead, .colstack_head, .rowhead .rowitem {
   740  	display: flex;
   741  	flex-direction: row;
   742  }
   743  .rowhead:not(.has_opt) .rowitem, .opthead .rowitem, .colstack_head .rowitem {
   744  	width: 100%;
   745  }
   746  
   747  .optbox {
   748  	display: flex;
   749  	padding-left: 5px;
   750  	padding-top: 10.5px;
   751  	margin-top: 7px;
   752  	width: 100%;
   753  	background-color: var(--main-block-color);
   754  }
   755  .has_opt .rowitem {
   756  	margin-right: 0px;
   757  	display: inline-block;
   758  	padding-right: 0px;
   759  	margin-top: 7px;
   760  	padding-left: 12px;
   761  	padding-top: 12px;
   762  }
   763  .opt a {
   764  	font-size: 11px;
   765  }
   766  
   767  .topic_list_title_block .pre_opt:before {
   768  	content: "{{lang "topics_click_topics_to_select" . }}";
   769  	font-size: 14px;
   770  }
   771  .create_topic_opt a:before {
   772  	content: "{{lang "topics_new_topic" . }}";
   773  	margin-left: 3px;
   774  }
   775  .locked_opt a:before {
   776  	content: "{{lang "forum_locked" . }}";
   777  }
   778  .mod_opt a {
   779  	margin-left: 4px;
   780  }
   781  .mod_opt a:after {
   782  	content: "{{lang "topics_moderate" . }}";
   783  	padding-left: 1px;
   784  }
   785  .topic_list_title_block .moderate_link.moderate_open:after {
   786  	content: "{{lang "topic_list.cancel_mod" . }}";
   787  }
   788  .create_topic_opt {
   789  	order: 1;
   790  }
   791  .mod_opt {
   792  	order: 2;
   793  }
   794  .pre_opt {
   795  	order: 3;
   796  	margin-left: auto;
   797  	margin-right: 12px;
   798  }
   799  .filter_opt {
   800  	display: none;
   801  }
   802  
   803  @keyframes fadein {
   804  	from { opacity: 0; }
   805  	to { opacity: 1; }
   806  }
   807  .mod_floater {
   808  	position: fixed;
   809  	bottom: 15px;
   810  	right: 15px;
   811  	width: 150px;
   812  	height: 65px;
   813  	font-size: 14px;
   814  	padding: 14px;
   815  	z-index: 9999;
   816  	animation: fadein 0.8s;
   817  	background-color: var(--main-block-color);
   818  }
   819  .mod_floater_head {
   820  	margin-bottom: 8px;
   821  }
   822  .modal_pane {
   823  	position: fixed;
   824  	left: 50%;
   825  	top: 50%;
   826  	transform: translate(-50%, -50%);
   827  	background-color: var(--main-block-color);
   828  	border: 2px solid #333333;
   829  	padding-left: 24px;
   830  	padding-right: 24px;
   831  	z-index: 9999;
   832  	animation: fadein 0.8s;
   833  }
   834  .pane_header {
   835  	font-size: 15px;
   836  }
   837  .pane_header h3 {
   838  	-webkit-margin-before: 0;
   839  	-webkit-margin-after: 0;
   840  	margin-block-start: 0;
   841  	margin-block-end: 0;
   842  	margin-top: 10px;
   843  	margin-bottom: 10px;
   844  	font-weight: normal;
   845  }
   846  .pane_row {
   847  	font-size: 14px;
   848  	margin-bottom: 1px;
   849  }
   850  .pane_selected {
   851  	font-weight: bold;
   852  }
   853  .pane_buttons {
   854  	margin-top: 7px;
   855  	margin-bottom: 8px;
   856  }
   857  
   858  .topic_list .topic_row {
   859  	display: flex;
   860  }
   861  .topics_moderate .topic_row:not(.can_mod) .rowitem {
   862  	background-color: hsla(0, 0%, 22%, 1);
   863  }
   864  .topics_moderate .can_mod .rowitem {
   865  	background-color: hsla(0, 0%, 25%, 1);
   866  }
   867  .topics_moderate .can_mod:hover .rowitem {
   868  	background-color: hsla(0, 0%, 29%, 1);
   869  }
   870  .topic_row.topic_selected .rowitem {
   871  	background-color: hsla(0, 0%, 31%, 1);
   872  }
   873  /* Temporary hack, so that I don't break the topic lists of the other themes */
   874  .topic_list .topic_inner_right {
   875  	display: none;
   876  }
   877  .topic_list .rowitem {
   878  	float: left;
   879  	overflow: hidden;
   880  }
   881  .topic_list .topic_left {
   882  	width: 100%;
   883  	height: 59px;
   884  	display: flex;
   885  	padding: 0px;
   886  	overflow: hidden;
   887  }
   888  .topic_sticky .topic_left .topic_inner_left {
   889  	border-top: 4px solid hsl(41, 100%, 50%);
   890  	padding-left: 10px;
   891  	padding-top: 10px;
   892  	margin-top: 0px;
   893  	margin-left: 0px;
   894  	width: 100%;
   895  }
   896  .topic_list .topic_right {
   897  	height: 59px;
   898  	margin-left: 8px;
   899  	display: flex;
   900  	width: 284px;
   901  	padding: 0px;
   902  }
   903  .topic_right_inside {
   904  	display: flex;
   905  }
   906  .topic_list .topic_left img, .topic_list .topic_right img {
   907  	width: 64px;
   908  }
   909  .topic_list .topic_inner_left, .topic_right_inside > span {
   910  	margin-left: 8px;
   911  	margin-top: 12px;
   912  }
   913  .topic_right_inside .lastName {
   914  	font-size: 14px;
   915  }
   916  .topic_list .topic_row:last-child {
   917  	margin-bottom: 10px;
   918  }
   919  .topic_list .lastReplyAt {
   920  	white-space: nowrap;
   921  }
   922  .topic_list .lastReplyAt:before {
   923  	content: "{{lang "topics_last" . }}: ";
   924  }
   925  .topic_list .starter:before {
   926  	content: "{{lang "topics_starter" . }}: ";
   927  }
   928  .topic_middle {
   929  	display: none;
   930  }
   931  
   932  .more_topic_block_initial {
   933  	display: none;
   934  }
   935  .more_topic_block_active {
   936  	display: block;
   937  }
   938  
   939  .topic_name_input {
   940  	width: 100%;
   941  	margin-right: 10px;
   942  	background-color: var(--input-background-color);
   943  	border: 1px solid var(--input-border-color);
   944  	color: var(--input-text-color);
   945  	padding-bottom: 6px;
   946  	font-size: 13px;
   947  	padding: 5px;
   948  }
   949  .topic_item .submit_edit {
   950  	margin-left: auto;
   951  }
   952  .topic_item .topic_status_closed {
   953  	margin-left: auto;
   954  	position: relative;
   955  	top: -5px;
   956  }
   957  
   958  .prev_link, .next_link {
   959  	display: none;
   960  }
   961  
   962  .postImage {
   963  	max-width: 100%;
   964  	max-height: 200px;/*300px;*/
   965  	background-color: rgb(71,71,71);
   966  	padding: 10px;
   967  }
   968  video {
   969  	width: 100%;
   970  }
   971  blockquote {
   972  	background-color: rgb(71,71,71);
   973  	margin: 0px;
   974  	margin-top: 10px;
   975  	padding: 10px;
   976  }
   977  blockquote:first-child {
   978  	margin-top: 0px;
   979  }
   980  
   981  /* Profiles */
   982  #profile_left_lane {
   983  	width: 220px;
   984  	margin-top: 5px;
   985  }
   986  #profile_left_lane .avatarRow {
   987  	overflow: hidden;
   988  	max-height: 220px;
   989  	padding: 0;
   990  }
   991  #profile_left_lane .avatar {
   992  	width: 100%;
   993  	margin: 0;
   994  	display: block;
   995  }
   996  #profile_left_lane .username {
   997  	font-size: 14px;
   998  	display: block;
   999  	margin-top: 3px;
  1000  }
  1001  #profile_left_pane .nameRow .username {
  1002  	float: right;
  1003  	font-weight: normal;
  1004  }
  1005  #profile_left_pane .report_item:after {
  1006  	content: "{{lang "topic.report_button_text" . }}";
  1007  }
  1008  #profile_left_lane .profileName {
  1009  	font-size: 18px;
  1010  }
  1011  #profile_right_lane {
  1012  	width: calc(100% - 245px);
  1013  }
  1014  #profile_right_lane .rowitem,
  1015  #profile_right_lane .colstack_item .formrow.real_first_child,
  1016  #profile_right_lane .colstack_item .formrow:first-child {
  1017  	margin-top: 5px;
  1018  }
  1019  .simple .user_tag {
  1020  	font-size: 14px;
  1021  }
  1022  /* TODO: Have a has_avatar class for profile comments and topic replies to allow posts without avatars? Won't that look inconsistent next to everything else for just about every theme though? */
  1023  #profile_comments .rowitem {
  1024  	background-repeat: no-repeat, repeat-y;
  1025  	background-size: 128px;
  1026  	padding-left: 136px;
  1027  }
  1028  
  1029  .ip_search_block .rowitem {
  1030  	display: flex;
  1031  	flex-direction: row;
  1032  }
  1033  .ip_search_block input {
  1034  	background-color: var(--input-background-color);
  1035  	border: 1px solid var(--input-border-color);
  1036  	color: var(--input-text-color);
  1037  	margin-top: -3px;
  1038  	margin-bottom: -3px;
  1039  	padding: 4px;
  1040  	padding-bottom: 3px;
  1041  }
  1042  .ip_search_input {
  1043  	font-size: 15px;
  1044  	width: 100%;
  1045  	margin-left: 0px;
  1046  }
  1047  .ip_search_search {
  1048  	font-size: 14px;
  1049  	margin-left: 8px;
  1050  }
  1051  
  1052  .level_complete, .level_future, .level_inprogress {
  1053  	display: flex;
  1054  }
  1055  .progressWrap {
  1056  	margin-left: auto;
  1057  	width: auto !important;
  1058  }
  1059  
  1060  .colstack_grid {
  1061  	display: grid;
  1062  	grid-template-columns: repeat(3, 1fr);
  1063  	margin-top: 3px;
  1064  	grid-gap: 3px;
  1065  	text-align: center;
  1066  }
  1067  
  1068  .grid_stat, .grid_istat {
  1069  	padding-top: 10px;
  1070  	padding-bottom: 10px;
  1071  	font-size: 13px;
  1072  	background-color: var(--main-block-color);
  1073  }
  1074  
  1075  @media(max-width: 935px) {
  1076  	.simple .user_tag {
  1077  		display: none;
  1078  	}
  1079  	#profile_left_lane {
  1080  		width: 160px;
  1081  	}
  1082  	#profile_left_lane .avatarRow {
  1083  		max-height: 160px;
  1084  	}
  1085  	#profile_left_lane .profileName {
  1086  		font-size: 16px;
  1087  	}
  1088  	#profile_right_lane {
  1089  		width: calc(100% - 185px);
  1090  	}
  1091  }
  1092  
  1093  @media(max-width: 830px) {
  1094  	#main_menu {
  1095  		padding-left: 10px;
  1096  		padding-right: 0px;
  1097  		height: 35px;
  1098  	}
  1099  	li {
  1100  		height: 26px;
  1101  	}
  1102  
  1103  	#menu_overview {
  1104  		margin-right: 9px;
  1105  		margin-left: 0px;
  1106  		font-size: 15px;
  1107  		width: 32px;
  1108  		text-align: center;
  1109  	}
  1110  	.menu_left {
  1111  		margin-right: 7px;
  1112  	}
  1113  	.menu_left:not(#menu_overview) {
  1114  		font-size: 13px;
  1115  		padding-top: 10px;
  1116  	}
  1117  
  1118  	.menu_alerts {
  1119  		padding-top: 9px;
  1120  		float: left;
  1121  		margin-right: 6px;
  1122  	}
  1123  	.alert_counter {
  1124  		border-radius: 8px;
  1125  		font-size: 0px;
  1126  		color: #c80000;
  1127  		left: 2px;
  1128  	}
  1129  	.alert_aftercounter {
  1130  		float: none;
  1131  		margin-right: 0px;
  1132  		font-size: 13px;
  1133  		padding-top: 1.5px;
  1134  	}
  1135  	.has_alerts .alert_aftercounter {
  1136  		position: relative;
  1137  		top: -5px;
  1138  	}
  1139  	.menu_alerts:not(.has_alerts) .alert_counter {
  1140  		display: none;
  1141  	}
  1142  
  1143  	.selectedAlert .alertList {
  1144  		right: 10px;
  1145  		top: 42px;
  1146  		white-space: nowrap;
  1147  		overflow: hidden;
  1148  		text-overflow: ellipsis;
  1149  	}
  1150  	.alertItem.withAvatar {
  1151  		height: 28px;
  1152  		background-size: 38px;
  1153  		padding-left: 46px;
  1154  		padding-top: 10px;
  1155  		overflow: hidden;
  1156  		text-overflow: ellipsis;
  1157  	}
  1158  
  1159  	#back, .footer {
  1160  		width: calc(100% - 20px);
  1161  	}
  1162  	.opthead, .rowhead, .colstack_head {
  1163  		padding-top: 0px !important;
  1164  		font-size: 15px;
  1165  	}
  1166  	.rowblock:not(.opthead):not(.colstack_head):not(.rowhead) .rowitem {
  1167  		font-size: 14px;
  1168  	}
  1169  	.rowsmall {
  1170  		font-size: 11px;
  1171  	}
  1172  
  1173  	@media(min-width: 400px) {
  1174  		#main_menu {
  1175  			height: 40px;
  1176  		}
  1177  		#menu_overview {
  1178  			font-size: 16px;
  1179  		}
  1180  		.menu_left:not(#menu_overview) {
  1181  			font-size: 14px;
  1182  			padding-top: 13px;
  1183  		}
  1184  		.alert_aftercounter {
  1185  			font-size: 14px;
  1186  			padding-top: 4px;
  1187  		}
  1188  	}
  1189  }
  1190  
  1191  @media(max-width: 520px) {
  1192  	.user_tag, .level_label, .level {
  1193  		display: none;
  1194  	}
  1195  	#profile_left_lane {
  1196  		width: 100px;
  1197  	}
  1198  	#profile_comments .rowitem {
  1199  		background-size: 80px;
  1200  		padding-left: calc(80px + 12px);
  1201  	}
  1202  	#profile_left_lane .avatarRow {
  1203  		max-height: 100px;
  1204  	}
  1205  	#profile_right_lane {
  1206  		width: calc(100% - 125px);
  1207  	}
  1208  }
  1209  
  1210  @media(max-width: 500px) {
  1211  	.topic_list .rowitem {
  1212  		float: none;
  1213  	}
  1214  	.topic_list .topic_left {
  1215  		width: 100%;
  1216  	}
  1217  	.topic_list .topic_right, #poweredBy span {
  1218  		display: none;
  1219  	}
  1220  }
  1221  
  1222  @media(max-width: 470px) {
  1223  	.like_count_label, .like_count {
  1224  		display: none;
  1225  	}
  1226  	.post_item {
  1227  		background-size: 100px;
  1228  		padding-left: calc(100px + 12px);
  1229  	}
  1230  }
  1231  
  1232  @media(max-width: 370px) {
  1233  	.menu_profile {
  1234  		display: none;
  1235  	}
  1236  	.post_item {
  1237  		background-size: 80px;
  1238  		padding-left: calc(80px + 12px);
  1239  	}
  1240  	.controls {
  1241  		margin-top: 14px;
  1242  	}
  1243  	#profile_comments .rowitem {
  1244  		background-image: none !important;
  1245  		padding-left: 10px !important;
  1246  	}
  1247  }
  1248  
  1249  @media(max-width: 324px) {
  1250  	#main_menu {
  1251  		padding-left: 5px;
  1252  	}
  1253  }