97860d4f79
Added the ReplyStore and the ProfileReplyStore. Added more allowed file extensions for attachments. The tif, webp, and apng extensions are now recognised as images. Added the Delete method to the Reply struct. Added the Like method to the Reply struct. Refactored the topic list avatars to make things easier on Cosora. The attachment cap should now work properly on topics. You can now attach files to replies. The Markdown parser now ignores URLs rather than mangling them. Fixed a bug where themes weren't able to register custom resources. Added the ability to embed images. Added the ability to embed videos. Made the requirements for URLs looser. Misc improvements to the themes and templates.
880 lines
16 KiB
CSS
880 lines
16 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: #515151;*/
|
|
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;
|
|
}
|
|
|
|
.alert_bell:before {
|
|
content: '🔔︎';
|
|
}
|
|
.menu_bell {
|
|
cursor: default;
|
|
}
|
|
.menu_alerts {
|
|
/*padding-left: 7px;*/
|
|
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%);
|
|
}
|
|
}
|
|
|
|
.rowlist .rowitem {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
.rowlist.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; }
|
|
.rowitem.has_opt {
|
|
float: left;
|
|
width: calc(100% - 50px);
|
|
border-right: 1px solid #ccc;
|
|
border-bottom: none;
|
|
}
|
|
.opt {
|
|
float: left;
|
|
font-size: 32px;
|
|
height: 100%;
|
|
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;*/
|
|
}
|
|
|
|
.formbutton, button {
|
|
background: white;
|
|
border: 1px solid #8e8e8e;
|
|
}
|
|
.formbutton {
|
|
padding: 7px;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
font-size: 15px;
|
|
border-color: var(--main-border-color);
|
|
}
|
|
|
|
/* 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 .starter:before {
|
|
content: "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;
|
|
}
|
|
|
|
.topic_create_form .topic_button_row .formitem {
|
|
display: flex;
|
|
}
|
|
.topic_create_form .formbutton:first-child {
|
|
margin-left: 0px;
|
|
margin-right: 5px;
|
|
}
|
|
.topic_create_form .formbutton:not(:first-child) {
|
|
margin-left: 0px;
|
|
margin-right: 5px;
|
|
}
|
|
.topic_create_form .formbutton:last-child {
|
|
margin-left: auto;
|
|
}
|
|
.topic_create_form .upload_file_dock {
|
|
display: flex;
|
|
}
|
|
.topic_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;
|
|
}
|
|
|
|
/* We'll be rewriting the profiles soon too! */
|
|
/*.username.real_username { color: #404040; font-size: 16px; padding-right: 4px; }
|
|
.username.real_username:hover { color: black; }*/
|
|
|
|
.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 { 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 {
|
|
border-left: solid 1px #eaeaea;
|
|
border-right: none;
|
|
}
|
|
|
|
.button_container .report_item {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.like_label:before { content: "😀"; }
|
|
.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;
|
|
}
|
|
#profile_left_lane .avatar {
|
|
width: 100%;
|
|
margin: 0;
|
|
display: block;
|
|
}
|
|
#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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.footer {
|
|
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);
|
|
}
|
|
.footer select {
|
|
padding: 2px;
|
|
margin-top: 1px;
|
|
}
|
|
#poweredBy {
|
|
float: left;
|
|
margin-top: 4px;
|
|
}
|
|
#poweredBy span {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.pageset {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
margin-top: -5px;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
/* Firefox specific CSS */
|
|
@supports (-moz-appearance: none) {
|
|
.footer, .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) {
|
|
.footer, .rowmenu, #profile_right_lane .topic_reply_form, .content_container {
|
|
border-bottom: 1.5px inset hsl(0,0%,100%);
|
|
}
|
|
}
|
|
|
|
{{template "media.partial.css" }}
|