3821e626ce
Add support for phrases in template files. Revamped every template to make them use phrases. Revamped every CSS file to make them use phrases. Tweaked the contributing document. We now use LogError instead of log.Fatal() in a few places to capture more stack traces. Fixed the suffixes on the topic and post count pages, as they were saying views instead of posts / topics. Split the paginator into it's own template. Refactored the theme logic to defer loading the static files to a later stage. Greatly improved the accessibility with a number of ARIA attributes in places where there were none. Removed the edit-topic and page templates. Renamed the panel-adminlogs template to panel_adminlogs. Non-existent phrases used by transpiled templates should now be logged. Fixed a bug where alertbox was plopped down multiple times on one page. The phrase placeholders are more informative now. Added the CurrentLanguagePackName and GetLanguagePackByName API functions. Notices are now shown when you delete, update, or create a forum.
1050 lines
20 KiB
CSS
1050 lines
20 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
}
|
|
|
|
/* TODO: Run a find and replacer in Gosora to support browsers without CSS Variable support */
|
|
:root {
|
|
--main-border-color: hsl(0,0%,80%);
|
|
}
|
|
|
|
body {
|
|
font-family: arial;
|
|
padding-bottom: 8px;
|
|
/* TODO: Redo the background */
|
|
background-image: url('/static/test_bg2.svg');
|
|
background-size: cover;
|
|
background: white;
|
|
}
|
|
|
|
/* Patch for Edge, until they fix emojis in arial x.x */
|
|
@supports (-ms-ime-align:auto) { .user_content { font-family: Segoe UI Emoji, arial; } }
|
|
|
|
ul {
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
height: 36px;
|
|
list-style-type: none;
|
|
border: 1px solid var(--main-border-color);
|
|
background: hsl(0, 0%, 97%);
|
|
margin-bottom: 12px;
|
|
margin-top: 0px;
|
|
border-bottom: 1.5px inset var(--main-border-color);
|
|
margin-left: -8px;
|
|
margin-right: -8px;
|
|
}
|
|
li {
|
|
height: 35px;
|
|
padding-left: 10px;
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
}
|
|
li:hover {
|
|
background: rgb(250,250,250);
|
|
}
|
|
li a {
|
|
text-decoration: none;
|
|
color: black;
|
|
font-size: 17px;
|
|
}
|
|
.menu_left {
|
|
float: left;
|
|
border-right: 1px solid var(--main-border-color);
|
|
border-bottom: 1.5px inset var(--main-border-color);
|
|
padding-right: 10px;
|
|
background: hsl(0, 0%, 98%);
|
|
}
|
|
.menu_right {
|
|
float: right;
|
|
border-left: 1px solid var(--main-border-color);
|
|
padding-right: 10px;
|
|
}
|
|
|
|
#menu_forums a:after {
|
|
content: "{{index .Phrases "menu_forums"}}";
|
|
}
|
|
.menu_topics a:after {
|
|
content: "{{index .Phrases "menu_topics"}}";
|
|
}
|
|
.menu_account a:after {
|
|
content: "{{index .Phrases "menu_account"}}";
|
|
}
|
|
.menu_profile a:after {
|
|
content: "{{index .Phrases "menu_profile"}}";
|
|
}
|
|
.menu_panel a:after {
|
|
content: "{{index .Phrases "menu_panel"}}";
|
|
}
|
|
.menu_logout a:after {
|
|
content: "{{index .Phrases "menu_logout"}}";
|
|
}
|
|
.menu_login a:after {
|
|
content: "{{index .Phrases "menu_login"}}";
|
|
}
|
|
.menu_register a:after {
|
|
content: "{{index .Phrases "menu_register"}}";
|
|
}
|
|
|
|
.alert_bell:before {
|
|
content: '🔔︎';
|
|
}
|
|
.menu_bell {
|
|
cursor: default;
|
|
}
|
|
.menu_alerts {
|
|
font-size: 20px;
|
|
padding-top: 2px;
|
|
color: rgb(80,80,80);
|
|
z-index: 500;
|
|
}
|
|
.menu_alerts .alert_counter {
|
|
position: relative;
|
|
font-size: 8px;
|
|
top: -25px;
|
|
background-color: rgb(190,0,0);
|
|
color: white;
|
|
width: 14px;
|
|
left: 10px;
|
|
line-height: 8px;
|
|
padding-top: 2.5px;
|
|
height: 14px;
|
|
text-align: center;
|
|
border: white solid 1px;
|
|
}
|
|
.menu_alerts .alert_counter:empty { display: none; }
|
|
|
|
.selectedAlert {
|
|
background: white;
|
|
color: black;
|
|
}
|
|
.selectedAlert:hover {
|
|
background: white;
|
|
color: black;
|
|
font-weight: bold;
|
|
}
|
|
.selectedAlert .alert_counter, .menu_alerts .alertList {
|
|
display: none;
|
|
}
|
|
.selectedAlert .alertList {
|
|
position: absolute;
|
|
top: 51px;
|
|
display: block;
|
|
background: white;
|
|
font-size: 10px;
|
|
line-height: 16px;
|
|
width: 300px;
|
|
right: calc(5% + 7px);
|
|
border-top: 1px solid var(--main-border-color);
|
|
border-left: 1px solid var(--main-border-color);
|
|
border-right: 1px solid var(--main-border-color);
|
|
border-bottom: 1px solid var(--main-border-color);
|
|
margin-bottom: 10px;
|
|
}
|
|
.alertItem {
|
|
padding: 8px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding-top: 15px;
|
|
padding-bottom: 16px;
|
|
}
|
|
.alertItem.withAvatar {
|
|
background-size: 60px;
|
|
background-repeat: no-repeat;
|
|
padding-right: 12px;
|
|
padding-left: 68px;
|
|
height: 50px;
|
|
}
|
|
.alertItem.withAvatar:not(:last-child) {
|
|
border-bottom: 1px solid rgb(230,230,230);
|
|
}
|
|
.alertItem .text {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
height: 40px;
|
|
width: 100%;
|
|
color: black;
|
|
font-size: 13px;
|
|
white-space: nowrap;
|
|
font-weight: normal;
|
|
}
|
|
.alertItem:not(.withAvatar) { margin-left: 5px; }
|
|
|
|
.container {
|
|
width: 90%;
|
|
padding: 0px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
background: hsl(0, 0%, 98%);
|
|
border: 1px solid var(--main-border-color);
|
|
border-top: none;
|
|
}
|
|
|
|
#back {
|
|
padding: 12px;
|
|
padding-top: 0px;
|
|
}
|
|
|
|
/* Explict declaring each border direction to fix a bug in Chrome where an override to .rowhead was also applying to .rowblock in some cases */
|
|
.rowblock {
|
|
border: 1px solid var(--main-border-color);
|
|
width: 100%;
|
|
padding: 0px;
|
|
padding-top: 0px;
|
|
border-top: 1px solid var(--main-border-color);
|
|
border-left: 1px solid var(--main-border-color);
|
|
border-right: 1px solid var(--main-border-color);
|
|
border-bottom: 1.5px inset var(--main-border-color);
|
|
}
|
|
.rowblock:empty {
|
|
display: none;
|
|
}
|
|
.rowsmall {
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Firefox specific CSS */
|
|
@supports (-moz-appearance: none) {
|
|
ul, .menu_left, .rowblock {
|
|
border-bottom: 2px inset hsl(0,0%,40%);
|
|
}
|
|
}
|
|
/* Edge... We can't get the exact shade here, because of how they implemented it x.x */
|
|
@supports (-ms-ime-align:auto) {
|
|
ul, .menu_left, .rowblock {
|
|
border-bottom: 1.5px inset hsl(0,0%,100%);
|
|
}
|
|
}
|
|
|
|
.bgsub {
|
|
display: none;
|
|
}
|
|
.rowlist .rowitem {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
.bgavatars .rowitem {
|
|
background-repeat: no-repeat;
|
|
background-size: 40px;
|
|
padding-left: 48px;
|
|
}
|
|
|
|
.colstack_left {
|
|
float: left;
|
|
width: 30%;
|
|
margin-right: 10px;
|
|
}
|
|
.colstack_right {
|
|
float: left;
|
|
width: 65%;
|
|
width: calc(70% - 13px);
|
|
}
|
|
.colstack_item {
|
|
border: 1px solid var(--main-border-color);
|
|
padding: 0px;
|
|
padding-top: 0px;
|
|
width: 100%;
|
|
margin-bottom: 12px;
|
|
overflow: hidden;
|
|
word-wrap: break-word;
|
|
}
|
|
.colstack_head { margin-bottom: 0px; }
|
|
.colstack_left:empty, .colstack_right:empty { display: none; }
|
|
|
|
.colstack_grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-gap: 12px;
|
|
margin-left: 5px;
|
|
margin-top: 2px;
|
|
}
|
|
.grid_item {
|
|
border: 1px solid var(--main-border-color);
|
|
word-wrap: break-word;
|
|
background-color: white;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.grid_stat, .grid_istat {
|
|
text-align: center;
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
font-size: 16px;
|
|
}
|
|
.grid_istat {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stat_green {
|
|
background-color: lightgreen;
|
|
border-color: green;
|
|
}
|
|
.stat_orange {
|
|
background-color: #ffe4b3;
|
|
border-color: orange;
|
|
}
|
|
.stat_red {
|
|
background-color: #ffb2b2;
|
|
border-color: red;
|
|
}
|
|
.stat_disabled {
|
|
background-color: lightgray;
|
|
border-color: gray;
|
|
}
|
|
|
|
.rowitem {
|
|
width: 100%;
|
|
/*padding-left: 8px;
|
|
padding-right: 8px;
|
|
padding-top: 17px;
|
|
padding-bottom: 12px;*/
|
|
padding-left: 10px;
|
|
padding-top: 14px;
|
|
padding-bottom: 12px;
|
|
padding-right: 10px;
|
|
background-color: white;
|
|
}
|
|
.rowitem.passive {
|
|
font-weight: normal;
|
|
text-transform: none;
|
|
}
|
|
.rowitem:not(:last-child) {
|
|
border-bottom: 1px solid hsl(0,0%,85%);
|
|
}
|
|
.rowitem a {
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
.rowitem a:hover {
|
|
color: hsl(0,0%,40%);
|
|
}
|
|
|
|
.opthead {
|
|
display: none;
|
|
}
|
|
.has_opt {
|
|
display: flex;
|
|
}
|
|
.has_opt .rowitem {
|
|
display: flex;
|
|
width: calc(100% - 50px);
|
|
border-right: 1px solid #ccc;
|
|
border-bottom: none;
|
|
}
|
|
.optbox {
|
|
margin-left: auto;
|
|
}
|
|
.opt {
|
|
font-size: 32px;
|
|
background-color: hsl(0, 0%, 99%);
|
|
width: 50px;
|
|
text-align: center;
|
|
}
|
|
.create_topic_opt a.create_topic_link:before {
|
|
content: '🖊︎';
|
|
}
|
|
.create_topic_opt, .create_topic_opt a {
|
|
color: rgb(120,120,120);
|
|
text-decoration: none;
|
|
}
|
|
.locked_opt {
|
|
color: rgb(80,80,80);
|
|
}
|
|
.locked_opt:before {
|
|
content: '🔒︎';
|
|
}
|
|
|
|
.datarow {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.formrow {
|
|
width: 100%;
|
|
background-color: white;
|
|
}
|
|
/* Clearfix */
|
|
.formrow:before, .formrow:after {
|
|
content: " ";
|
|
display: table;
|
|
}
|
|
.formrow:after {
|
|
clear: both;
|
|
}
|
|
.formrow:not(:last-child) {
|
|
border-bottom: 1px dotted var(--main-border-color);
|
|
}
|
|
|
|
.formitem {
|
|
float: left;
|
|
padding: 10px;
|
|
min-width: 20%;
|
|
/*font-size: 17px;*/
|
|
font-weight: normal;
|
|
}
|
|
.formitem:not(:last-child) {
|
|
border-right: 1px dotted var(--main-border-color);
|
|
}
|
|
.formitem.invisible_border {
|
|
border: none;
|
|
}
|
|
/* Mostly for textareas */
|
|
.formitem:only-child { width: 100%; }
|
|
.formitem textarea {
|
|
width: 100%;
|
|
height: 100px;
|
|
outline-color: #8e8e8e;
|
|
}
|
|
.formitem:has-child() {
|
|
margin: 0 auto;
|
|
float: none;
|
|
}
|
|
.formitem:not(:only-child) input, .formitem:not(:only-child) select {
|
|
padding: 3px;/*5px;*/
|
|
}
|
|
.formitem:not(:only-child).formlabel {
|
|
padding-top: 15px;/*18px;*/
|
|
padding-bottom: 12px;/*16px;*/
|
|
/*padding-left: 15px;*/
|
|
}
|
|
|
|
.dont_have_account {
|
|
color: #505050;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
float: right;
|
|
}
|
|
|
|
.formbutton, button, input[type="submit"] {
|
|
background: white;
|
|
border: 1px solid #8e8e8e;
|
|
}
|
|
.formbutton {
|
|
padding: 7px;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
font-size: 15px;
|
|
}
|
|
.formbutton .ip_search_search {
|
|
border-color: var(--main-border-color);
|
|
}
|
|
|
|
.ip_search_block {
|
|
border-bottom: none;
|
|
}
|
|
.ip_search_block .rowitem {
|
|
display: flex;
|
|
}
|
|
.ip_search_input {
|
|
width: 100%;
|
|
}
|
|
.ip_search_search {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
/* TODO: Add the avatars to the forum list */
|
|
.extra_little_row_avatar {
|
|
display: none;
|
|
}
|
|
.shift_left {
|
|
float: left;
|
|
}
|
|
.shift_right {
|
|
float: right;
|
|
}
|
|
|
|
/* Topics */
|
|
|
|
.topic_list .topic_row {
|
|
display: grid;
|
|
grid-template-columns: calc(100% - 204px) 204px;
|
|
}
|
|
.topic_list .topic_inner_right {
|
|
display: none;
|
|
}
|
|
.topic_list .lastReplyAt {
|
|
white-space: nowrap;
|
|
}
|
|
.topic_list .lastReplyAt:before {
|
|
content: "{{index .Phrases "topics_last"}}: ";
|
|
}
|
|
.topic_list .starter:before {
|
|
content: "{{index .Phrases "topics_starter"}}: ";
|
|
}
|
|
|
|
@supports not (display: grid) {
|
|
.topic_list .rowitem {
|
|
float: left;
|
|
overflow: hidden;
|
|
}
|
|
.topic_list .topic_left {
|
|
width: calc(100% - 204px);
|
|
}
|
|
.topic_list .topic_right {
|
|
width: 204px;
|
|
}
|
|
}
|
|
|
|
.topic_left, .topic_right {
|
|
display: flex;
|
|
padding: 0px;
|
|
height: 58px;
|
|
}
|
|
.topic_left img, .topic_right img {
|
|
width: 64px;
|
|
height: auto;
|
|
}
|
|
.topic_left .topic_inner_left, .topic_right > span {
|
|
margin-top: 10px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.postImage {
|
|
max-width: 100%;
|
|
max-height: 200px;
|
|
background-color: white;
|
|
padding: 10px;
|
|
}
|
|
|
|
.to_right {
|
|
margin-left: auto;
|
|
float: right;
|
|
}
|
|
.little_row_avatar {
|
|
display: none;
|
|
}
|
|
.quick_create_form .quick_button_row .formitem {
|
|
display: flex;
|
|
}
|
|
.quick_create_form .formbutton:first-child {
|
|
margin-left: 0px;
|
|
margin-right: 5px;
|
|
}
|
|
.quick_create_form .formbutton:not(:first-child) {
|
|
margin-left: 0px;
|
|
margin-right: 5px;
|
|
}
|
|
.quick_create_form .formbutton:last-child {
|
|
margin-left: auto;
|
|
}
|
|
.quick_create_form .upload_file_dock {
|
|
display: flex;
|
|
}
|
|
.quick_create_form .uploadItem {
|
|
display: inline-block;
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
background-size: 25px 35px;
|
|
background-repeat: no-repeat;
|
|
padding-left: 30px;
|
|
}
|
|
|
|
.topic_status_sticky {
|
|
display: none;
|
|
}
|
|
.topic_status_closed {
|
|
margin-left: auto;
|
|
}
|
|
.topic_sticky {
|
|
background-color: rgb(255,255,234);
|
|
}
|
|
.topic_closed {
|
|
background-color: rgb(248,248,248);
|
|
}
|
|
|
|
.topic_status {
|
|
text-transform: none;
|
|
margin-left: 8px;
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
background-color: #E8E8E8; /* 232,232,232. All three RGB colours being the same seems to create a shade of gray */
|
|
color: #505050; /* 80,80,80 */
|
|
border-radius: 2px;
|
|
}
|
|
.topic_status:empty {
|
|
display: none;
|
|
}
|
|
|
|
.topic_item {
|
|
display: flex;
|
|
}
|
|
.topic_item .topic_name_input {
|
|
padding: 5px;
|
|
width: 100%;
|
|
margin-right: 9px;
|
|
}
|
|
.topic_item .submit_edit {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.topic_content_input {
|
|
width: 100%;
|
|
min-height: 143px;
|
|
}
|
|
|
|
.rowhead, .colstack_head {
|
|
border-bottom: none;
|
|
}
|
|
.rowhead .rowitem, .opthead .rowitem, .colstack_head .rowitem {
|
|
/*background: linear-gradient(to bottom, white, hsl(0, 0%, 93%));*/
|
|
background: hsl(0, 0%, 98%);
|
|
}
|
|
.rowhead h1, .colstack_head h1 {
|
|
-webkit-margin-before: 0; /* Opera / Chrome Implicit padding */
|
|
-webkit-margin-after: 0;
|
|
font-weight: normal;
|
|
font-size: 16px;
|
|
margin-block-start: 0; /* Firefox Implicit padding */
|
|
margin-block-end: 0;
|
|
margin-top: 0;
|
|
margin-bottom: 0; /* Edge Implicit padding */
|
|
}
|
|
.topic_sticky_head {
|
|
background-color: #FFFFEA;
|
|
background: linear-gradient(to bottom, hsl(60, 70%, 96%), hsl(60, 70%, 89%)), url('/static/fabric-base-simple-alpha.png');
|
|
}
|
|
.topic_closed_head {
|
|
background-color: #eaeaea;
|
|
background: linear-gradient(to bottom, #eaeaea, hsl(0,0%,79%));
|
|
}
|
|
|
|
.username, .panel_tag {
|
|
text-transform: none;
|
|
margin-left: 0px;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
color: #505050; /* 80,80,80 */
|
|
background-color: #FFFFFF;
|
|
border-style: solid;
|
|
border-color: var(--main-border-color);
|
|
border-width: 1px;
|
|
font-size: 15px;
|
|
}
|
|
button.username {
|
|
position: relative;
|
|
top: -0.25px;
|
|
}
|
|
|
|
.postQuote {
|
|
border: rgb(200,200,210);
|
|
background: rgb(245,245,255);
|
|
padding: 5px;
|
|
margin: 0px;
|
|
display: inline-block;
|
|
width: 100%;
|
|
margin-bottom: 8px;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.mention {
|
|
font-weight: bold;
|
|
}
|
|
.show_on_edit, .auto_hide, .hide_on_big, .show_on_mobile, .button_menu {
|
|
display: none;
|
|
}
|
|
|
|
.alert {
|
|
display: block;
|
|
padding: 5px;
|
|
margin-bottom: 10px;
|
|
border: 1px solid var(--main-border-color);
|
|
background-color: white;
|
|
}
|
|
.alert_success {
|
|
display: block;
|
|
padding: 5px;
|
|
border: 1px solid #A2FC00;
|
|
margin-bottom: 10px;
|
|
background-color: #DAF7A6;
|
|
}
|
|
.alert_error {
|
|
display: block;
|
|
padding: 5px;
|
|
border: 1px solid #FF004B;
|
|
margin-bottom: 8px;
|
|
background-color: #FEB7CC;
|
|
}
|
|
|
|
/* Tempra Conflux */
|
|
|
|
.user_content {
|
|
padding: 7px;
|
|
margin-top: 2px;
|
|
margin-bottom: 0;
|
|
background: white;
|
|
min-height: 145.30px;
|
|
padding-bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.button_container {
|
|
border-top: solid 1px #eaeaea;
|
|
border-spacing: 0px;
|
|
border-collapse: collapse;
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-top: 3px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.action_button {
|
|
display: block;
|
|
border-right: solid 1px #eaeaea;
|
|
color: #505050;
|
|
font-size: 13px;
|
|
padding-top: 2px;
|
|
padding-bottom: 1.5px;
|
|
padding-left: 7px;
|
|
padding-right: 7px;
|
|
}
|
|
.action_button_right {
|
|
display: flex;
|
|
}
|
|
.action_button_right .action_button {
|
|
border-left: solid 1px #eaeaea;
|
|
border-right: none;
|
|
}
|
|
|
|
.button_container .report_item {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.like_label:before {
|
|
content: "😀";
|
|
}
|
|
.like_count:after {
|
|
content: "{{index .Phrases "topic_gap_up"}}";
|
|
}
|
|
.edit_label:before {
|
|
content: "🖊️";
|
|
}
|
|
.trash_label:before {
|
|
content: "🗑️";
|
|
}
|
|
.flag_label:before {
|
|
content: "🚩";
|
|
}
|
|
|
|
.mod_button {
|
|
margin-right: 4px;
|
|
}
|
|
.simple > .real_username {
|
|
color: #404040;
|
|
font-size: 16px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
}
|
|
.simple > .user_content {
|
|
background: none;
|
|
}
|
|
|
|
#profile_left_lane {
|
|
border: 1px solid var(--main-border-color);
|
|
width: 220px;
|
|
margin-bottom: 10px;
|
|
border-bottom: 1.5px inset var(--main-border-color);
|
|
}
|
|
#profile_left_lane .avatarRow {
|
|
overflow: hidden;
|
|
max-height: 220px;
|
|
padding: 0;
|
|
}
|
|
#profile_left_lane .avatar {
|
|
width: 100%;
|
|
margin: 0;
|
|
display: block;
|
|
}
|
|
#profile_left_pane .nameRow .username {
|
|
float: right;
|
|
font-weight: normal;
|
|
}
|
|
#profile_left_pane .report_item:after {
|
|
content: "{{index .Phrases "topic_report_button_text"}}";
|
|
}
|
|
#profile_right_lane {
|
|
width: calc(100% - 230px);
|
|
}
|
|
#profile_comments {
|
|
overflow: hidden;
|
|
margin-bottom: 0;
|
|
}
|
|
#profile_comments .rowitem {
|
|
background-repeat: no-repeat, repeat-y;
|
|
background-size: 128px;
|
|
padding-left: 136px;
|
|
}
|
|
#profile_comments .controls {
|
|
width: 100%;
|
|
display: inline-block;
|
|
margin-top: 20px;
|
|
}
|
|
#profile_right_lane .topic_reply_form {
|
|
border-bottom: 1.5px inset var(--main-border-color);
|
|
}
|
|
|
|
/* TODO: Show the avatar next to the reply form */
|
|
.topic_reply_container .userinfo {
|
|
display: none;
|
|
}
|
|
|
|
input[type=checkbox] {
|
|
display: none;
|
|
}
|
|
input[type=checkbox] + label {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-bottom: -2px;
|
|
border: 1px solid hsl(0, 0%, 80%);
|
|
background-color: white;
|
|
}
|
|
input[type=checkbox]:checked + label .sel {
|
|
display: inline-block;
|
|
width: 5px;
|
|
height: 5px;
|
|
background-color: white;
|
|
}
|
|
input[type=checkbox] + label.poll_option_label {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 2px;
|
|
background-color: white;
|
|
border: 1px solid hsl(0, 0%, 70%);
|
|
color: #505050;
|
|
}
|
|
input[type=checkbox]:checked + label.poll_option_label .sel {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-left: 3px;
|
|
background: hsl(0,0%,70%);
|
|
}
|
|
.poll_option {
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.quick_create_form .pollinputlabel {
|
|
display: none;
|
|
}
|
|
|
|
.simple {
|
|
background-color: white;
|
|
}
|
|
.post_item:not(.simple) {
|
|
background-color: #eaeaea;
|
|
}
|
|
.post_item {
|
|
padding-top: 4px;
|
|
padding-left: 5px;
|
|
clear: both;
|
|
border-bottom: none !important;
|
|
padding-right: 4px;
|
|
padding-bottom: 2px;
|
|
}
|
|
.post_tag {
|
|
margin-top: 0px;
|
|
text-align: center;
|
|
color: #505050;
|
|
display: block;
|
|
font-size: 13px;
|
|
}
|
|
.the_name {
|
|
margin-top: 3px;
|
|
text-align: center;
|
|
color: #505050;
|
|
display: block;
|
|
}
|
|
|
|
.userinfo {
|
|
background: white;
|
|
width: 132px;
|
|
padding: 2px;
|
|
margin-top: 2px;
|
|
float: left;
|
|
position: sticky;
|
|
top: 4px;
|
|
/*box-shadow: 0 1px 2px rgba(0,0,0,.1);*/
|
|
border-bottom: 1.5px inset var(--main-border-color);
|
|
}
|
|
.userinfo .avatar_item {
|
|
background-repeat: no-repeat, repeat-y;
|
|
background-size: 128px;
|
|
width: 128px;
|
|
height: 100%;
|
|
min-height: 128px;
|
|
border-style: solid;
|
|
border-color: #eaeaea;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.content_container {
|
|
background: white;
|
|
margin-left: 138px;
|
|
min-height: 128px;
|
|
margin-bottom: 0;
|
|
margin-right: 3px;
|
|
/*box-shadow: 0 1px 2px rgba(0,0,0,.1);*/
|
|
border-bottom: 1.5px inset var(--main-border-color);
|
|
}
|
|
|
|
.action_item .userinfo {
|
|
display: none;
|
|
}
|
|
.action_item .content_container {
|
|
min-height: auto;
|
|
padding: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.prev_button, .next_button {
|
|
position: fixed;
|
|
top: 50%;
|
|
font-size: 30px;
|
|
border-width: 1px;
|
|
background-color: #FFFFFF;
|
|
border-style: solid;
|
|
border-color: var(--main-border-color);
|
|
padding: 0px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
z-index: 100;
|
|
}
|
|
.prev_button a, .next_button a {
|
|
line-height: 28px;
|
|
margin-top: 2px;
|
|
margin-bottom: 0px;
|
|
display: block;
|
|
text-decoration: none;
|
|
color: #505050;
|
|
}
|
|
.prev_button {
|
|
left: 14px;
|
|
}
|
|
.next_button {
|
|
right: 14px;
|
|
}
|
|
|
|
.head_tag_upshift {
|
|
float: right;
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
|
|
.post_container {
|
|
border-bottom: none;
|
|
}
|
|
.topic_reply_form {
|
|
border-top: 1px solid var(--main-border-color);
|
|
}
|
|
.post_container .post_item {
|
|
background-color: #eaeaea;
|
|
padding-top: 4px;
|
|
padding-left: 5px;
|
|
clear: both;
|
|
border-bottom: none;
|
|
padding-right: 4px;
|
|
padding-bottom: 2px;
|
|
}
|
|
.post_container .post_item:first-child {
|
|
padding-top: 6px;
|
|
}
|
|
.post_container .post_item:last-child .content_container {
|
|
margin-bottom: 6px !important;
|
|
}
|
|
|
|
.add_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"}}";
|
|
}
|
|
.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"}}";
|
|
}
|
|
|
|
#poweredByHolder {
|
|
border: 1px solid var(--main-border-color);
|
|
margin-top: 12px;
|
|
clear: both;
|
|
height: 40px;
|
|
padding: 6px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
background-color: white;
|
|
border-bottom: 1.5px inset var(--main-border-color);
|
|
}
|
|
#poweredByHolder select {
|
|
padding: 2px;
|
|
margin-top: 1px;
|
|
}
|
|
#poweredBy {
|
|
float: left;
|
|
margin-top: 4px;
|
|
}
|
|
#poweredBy span {
|
|
font-size: 12px;
|
|
}
|
|
#poweredByName {
|
|
color: black;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.pageset {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
margin-top: 8px;
|
|
}
|
|
.pageitem {
|
|
border: 1px solid var(--main-border-color);
|
|
background-color: white;
|
|
padding: 5px;
|
|
margin-right: 5px;
|
|
padding-bottom: 4px;
|
|
}
|
|
.pageitem a {
|
|
color: black;
|
|
text-decoration: none;
|
|
}
|
|
.colstack_right .pageset {
|
|
margin-top: -5px;
|
|
}
|
|
|
|
/* Firefox specific CSS */
|
|
@supports (-moz-appearance: none) {
|
|
#poweredByHolder, .rowmenu, #profile_right_lane .topic_reply_form, .content_container {
|
|
border-bottom: 2px inset hsl(0,0%,40%);
|
|
}
|
|
}
|
|
/* Edge... We can't get the exact shade here, because of how they implemented it x.x */
|
|
@supports (-ms-ime-align:auto) {
|
|
#poweredByHolder, .rowmenu, #profile_right_lane .topic_reply_form, .content_container {
|
|
border-bottom: 1.5px inset hsl(0,0%,100%);
|
|
}
|
|
}
|
|
|
|
{{template "media.partial.css" }}
|