gosora/themes/tempra-simple/public/main.css
Azareal cc1d0f089a Client templates can now be overriden like every other template.
The client templates load earlier now for a smoother user experience.
Added a setting for setting a Google Site Verification meta tag without editing header.html
Added support for favicons. /static/favicon.ico will be mapped to favicon.ico, if it exists.
The parent forum is now visible on the topics list for Nox.

Language headers which contain the wildcard character are no longer considered unknowns.
Meta descriptions and open graph descriptions are no longer emitted for logged in users.
Slimmed down topics_topic slightly for Nox.
Pre-parsed widgets are now minified.
Stale WebSockets connections should be cleaned up far quicker now.
Template generation is now logged separately.
Commented out some obsolete template logic.
Marked a few template generator fields as unexported.

Fixed the styling for the ban page in the profile for Nox.
Fixed the styling for colline for Cosora and Tempra Simple.
Fixed the sidebar overflowing outside of the box on Nox.
Fixed the meta description text overflowing the box in the Setting Manager on Nox.
Fixed excessive padding in the Page Manager.
Fixed a few missing border on the profiles for Tempra Simple.
Fixed the sidebar appearing in places it shouldn't on Tempra Simple.
Fixed the status code emitted by NotFoundJS
Fixed a bug where Gosora kept falling back to interpreted templates.
Fixed a bug where WebSockets connections weren't getting closed properly if the user cache overflowed.
Fixed a bug where WebSocket connections weren't getting initialised for guests.
Fixed a bug where template overrides weren't always getting applied.
Fixed a bug where root template overrides weren't always getting applied.

Added the google_site_verify setting.
Added the google_site_verify phrase.

You will need to run the patcher or updater for this commit.
2019-02-28 17:28:17 +10:00

985 lines
16 KiB
CSS

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
font-family: arial;
padding-bottom: 8px;
}
/* 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 hsl(0, 0%, 80%);
background-color: rgb(252,252,252);
margin-bottom: 12px;
}
li {
height: 35px;
padding-left: 10px;
padding-top: 8px;
padding-bottom: 8px;
background: white;
border-bottom: 1px solid hsl(0, 0%, 80%);
}
li:hover { background: rgb(252,252,252); }
li a {
text-decoration: none;
color: black;
font-size: 17px;
}
.menu_left {
float: left;
border-right: 1px solid hsl(0, 0%, 80%);
padding-right: 10px;
}
.menu_right {
float: right;
border-left: 1px solid hsl(0, 0%, 80%);
padding-right: 10px;
}
#menu_overview {
background: none;
padding-right: 13px;
}
#menu_overview a {
padding-left: 3px;
}
.alert_bell:before {
content: '🔔︎';
}
.menu_bell {
cursor: default;
}
.menu_alerts {
/*padding-left: 7px;*/
font-size: 20px;
padding-top: 2px;
color: rgb(80,80,80);
}
.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;
}
.selectedAlert .alert_counter { display: none; }
.menu_alerts .alertList {
display: none;
z-index: 500;
}
.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 hsl(0, 0%, 80%);
border-left: 1px solid hsl(0, 0%, 80%);
border-right: 1px solid hsl(0, 0%, 80%);
border-bottom: 1px solid hsl(0, 0%, 80%);
margin-bottom: 10px;
}
.alertItem {
padding: 8px;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 17px;
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.withAvatar .text {
overflow: hidden;
text-overflow: ellipsis;
float: right;
height: 40px;
width: 100%;
white-space: nowrap;
}
.alertItem .text {
font-size: 13px;
font-weight: normal;
margin-left: 5px;
}
.container {
width: 90%;
padding: 0px;
margin-left: auto;
margin-right: auto;
}
#back {
display: flex;
}
#main {
width: 100%;
}
.rowblock {
border: 1px solid hsl(0, 0%, 80%);
width: 100%;
padding: 0px;
padding-top: 0px;
}
.rowblock:empty {
display: none;
}
.rowmenu {
border: 1px solid hsl(0, 0%, 80%);
}
.rowmenu > div:not(:last-child) {
border-bottom: 1px solid hsl(0, 0%, 80%);
}
.rowsmall {
font-size: 12px;
}
.colstack_left {
float: left;
width: 30%;
margin-right: 8px;
}
.colstack_right {
float: left;
width: 65%;
width: calc(70% - 15px);
}
.colstack_item {
border: 1px solid hsl(0, 0%, 80%);
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 hsl(0, 0%, 80%);
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: lightgreen;
}
.stat_orange {
background-color: #ffe4b3;
border-color: #ffe4b3;
}
.stat_red {
background-color: #ffb2b2;
border-color: #ffb2b2;
}
.stat_disabled {
background-color: lightgray;
border-color: lightgray;
}
.rowhead .rowitem, .colstack_head .rowitem {
background-color: rgb(252,252,252);
display: flex;
}
.rowhead .rowitem select, .colstack_head .rowitem select {
padding-top: 2px;
padding-bottom: 2px;
margin-top: -3px;
margin-bottom: -2px;
}
.rowhead h1, .colstack_head h1,
.rowhead h2, .colstack_head h2 {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
margin-block-start: 0;
margin-block-end: 0;
font-weight: normal;
font-size: 16px;
margin-left: 4px;
}
.rowitem {
width: 100%;
padding-left: 10px;
padding-top: 14px;
padding-bottom: 12px;
padding-right: 10px;
background-color: white;
}
.rowitem:not(:last-child) {
border-bottom: 1px solid hsl(0,0%,85%);
}
.rowitem a {
text-decoration: none;
color: black;
}
.rowitem a:hover {
color: silver;
}
.top_post {
margin-bottom: 12px;
}
.opthead {
display: none;
}
.topic_list_title_block {
display: flex;
}
.has_opt {
border-bottom: 1px solid hsl(0, 0%, 80%);
}
.has_opt .rowitem {
border-right: 1px solid hsl(0, 0%, 80%);
border-bottom: none;
}
.optbox {
margin-left: auto;
}
.opt {
font-size: 32px;
background-color: white;
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: '🔒︎';
}
/*.mod_opt a.moderate_link:before {
content: '🔨︎';
}
.mod_opt, .mod_opt a {
color: rgb(120,120,120);
text-decoration: none;
}*/
.filter_opt {
display: none;
}
.to_right {
margin-left: auto;
float: right;
}
.rowlist {
font-size: 15px;
}
.datarow, .rowlist .rowitem {
padding-top: 10px;
padding-bottom: 10px;
}
.bgsub {
display: none;
}
.bgavatars .rowitem {
background-repeat: no-repeat;
background-size: 40px;
padding-left: 46px;
}
.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 hsl(0, 0%, 80%); }
.formitem {
float: left;
padding: 10px;
min-width: 20%;
font-weight: normal;
}
.formitem:not(:last-child) {
border-right: 1px dotted hsl(0, 0%, 80%);
}
.formitem.invisible_border {
border: none;
}
input, select {
padding: 3px;
}
/* Mostly for textareas */
.formitem:only-child {
width: 100%;
}
.formitem:only-child select {
padding: 1px;
margin-top: -1px;
margin-bottom: -1px;
}
.formitem textarea {
width: 100%;
height: 100px;
outline-color: #8e8e8e;
}
.formitem:has-child() {
margin: 0 auto;
float: none;
}
.formitem:not(:only-child).formlabel {
padding-top: 15px;
padding-bottom: 12px;
}
.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: hsl(0, 0%, 80%);
}
.dont_have_account {
color: #505050;
font-size: 12px;
font-weight: normal;
float: right;
}
.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 */
.forum_list .forum_nodesc {
font-style: italic;
}
.extra_little_row_avatar {
display: none;
}
.shift_left {
float: left;
}
.shift_right {
float: right;
}
/* Topics */
.topic_list {
border-bottom: none;
}
.topic_list .topic_row {
display: grid;
grid-template-columns: calc(100% - 204px) 204px;
}
.topic_list .rowitem {
border-bottom: 1px solid hsl(0,0%,85%);
}
.topic_list .topic_inner_right {
display: none;
}
.topic_list .lastReplyAt {
white-space: nowrap;
}
.topic_list .lastReplyAt:before {
content: "{{lang "topics_last" . }}: ";
}
.topic_list .starter:before {
content: "{{lang "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;
overflow: hidden;
}
.topic_right_inside {
display: flex;
}
.topic_left img, .topic_right_inside img {
width: 64px;
height: auto;
}
.topic_left .topic_inner_left, .topic_right_inside > span {
margin-top: 10px;
margin-left: 8px;
}
.topic_middle {
display: none;
}
.more_topic_block_initial {
display: none;
}
.more_topic_block_active {
display: block;
}
.postImage {
max-width: 100%;
max-height: 200px;
background-color: white;
padding: 10px;
}
.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;
}
.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: hsl(0, 0%, 80%);
border-width: 1px;
font-size: 15px;
}
.topic_item {
display: flex;
}
.topic_status_sticky {
display: none;
}
.topic_status_closed {
margin-left: auto;
margin-top: -5px;
font-size: 0.90em;
margin-bottom: -2px;
}
.topic_sticky .topic_left, .topic_sticky .topic_right {
background-color: rgb(255,255,234);
}
.topic_closed .topic_left, .topic_closed .topic_right {
background-color: rgb(248,248,248);
}
.topic_sticky_head {
background-color: #FFFFEA;
}
.topic_closed_head {
background-color: #eaeaea;
}
.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;
}
button.username {
position: relative;
top: -0.25px;
}
.username.level {
color: #303030;
}
.username.real_username {
color: #404040;
font-size: 16px;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
}
.username.real_username:hover {
color: black;
}
.post_item > .username {
margin-top: 20px;
display: inline-block;
}
.post_item > .mod_button > button {
font-size: 15px;
color: #202020;
opacity: 0.7;
}
.post_item > .mod_button > button:hover {
opacity: 0.9;
}
.user_tag {
float: right;
color: #505050;
font-size: 16px;
}
.post_item {
background-size: 128px;
padding-left: 136px;
}
.staff_post {
background-color: #ffeaff;
}
.mod_button {
margin-right: 4px;
}
.like_count_label, .like_count {
display: none;
}
.has_likes .like_count_label, .has_likes .like_count {
display: block;
}
.like_label:before, .like_count_label:before {
content: "😀";
}
.like_count_label {
color: #505050;
float: right;
opacity: 0.85;
margin-left: 5px;
}
.like_count {
float: right;
color: #505050;
border-left: none;
padding-left: 5px;
padding-right: 5px;
font-size: 17px;
}
.edit_label:before {
content: "🖊️";
}
.delete_label:before {
content: "🗑️";
}
.pin_label:before, .unpin_label:before {
content: "📌";
}
.remove_like, .unpin_label, .unlock_label {
background-color: #D6FFD6;
}
.lock_label:before, .unlock_label:before {
content: "🔒";
}
.ip_label:before {
content: "🔍";
}
.flag_label:before {
content: "🚩";
}
.level_label:before {
content: "👑";
}
.level_label {
color: #505050;
opacity: 0.85;
float: right;
}
.level_hideable {
display: none;
}
.controls {
margin-top: 23px;
display: inline-block;
width: 100%;
}
.action_item {
padding: 14px;
text-align: center;
background-color: rgb(255,245,245);
}
.postQuote {
border: 1px solid hsl(0, 0%, 80%);
background: white;
padding: 5px;
margin: 0px;
display: inline-block;
width: 100%;
margin-bottom: 8px;
}
.level {
float: right;
color: #505050;
border-left: none;
padding-left: 5px;
padding-right: 5px;
font-size: 17px;
}
.mention {
font-weight: bold;
}
.show_on_edit:not(.edit_opened),
.hide_on_edit.edit_opened,
.show_on_block_edit:not(.edit_opened),
.hide_on_block_edit.edit_opened,
.auto_hide,
.hide_on_big,
.show_on_mobile,
.link_select:not(.link_opened) {
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;
}
.poll_item {
display: flex;
padding-left: 8px;
background: none !important;
}
.poll_buttons button {
margin-top: 8px;
padding: 5px;
padding-top: 3px;
padding-bottom: 3px;
border: 1px solid hsl(0, 0%, 70%);
}
.poll_results {
margin-left: auto;
}
.quick_create_form .pollinputlabel {
display: none;
}
/* TODO: Can we just set .alert on the alert_success and .alert_error ones? */
.alert, .alert_success, .alert_error {
display: block;
padding: 5px;
margin-bottom: 10px;
}
.alert {
border: 1px solid hsl(0, 0%, 80%);
}
.alert_success {
border: 1px solid #A2FC00;
background-color: #DAF7A6;
}
.alert_error {
border: 1px solid #FF004B;
margin-bottom: 8px;
background-color: #FEB7CC;
}
.prev_button, .next_button {
position: fixed;
top: 50%;
font-size: 30px;
border-width: 1px;
background-color: #FFFFFF;
border: 1px solid hsl(0,0%,80%);
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;
padding: 2px;
}
.prev_button {
left: 14px;
}
.next_button {
right: 14px;
}
.head_tag_upshift {
float: right;
position: relative;
top: -2px;
}
.elapsed {
display: none;
}
#poweredByHolder {
border: 1px solid hsl(0, 0%, 80%);
margin-top: 12px;
clear: both;
height: 40px;
padding: 6px;
padding-left: 10px;
padding-right: 10px;
}
#poweredByHolder select {
padding: 2px;
margin-top: 1px;
}
#poweredBy {
float: left;
margin-top: 4px;
}
#poweredBy span {
font-size: 12px;
}
#poweredByName {
color: black;
text-decoration: none;
}
.sidebar .rowhead:not(:first-child) {
margin-top: 12px;
}
.widget_search {
margin-bottom: 8px;
}
#profile_comments .rowitem {
background-repeat: no-repeat, repeat-y;
background-size: 128px;
padding-left: 136px;
}
/* Profiles */
#profile_left_lane {
width: 220px;
}
#profile_left_pane {
margin-bottom: 12px;
}
#profile_left_lane .avatarRow {
overflow: hidden;
max-height: 220px;
padding: 0;
}
#profile_left_lane .avatar {
width: 100%;
margin: 0;
display: block;
}
#profile_left_lane .username {
font-size: 14px;
display: block;
margin-top: 3px;
}
#profile_left_pane .nameRow .username {
float: right;
font-weight: normal;
}
#profile_left_lane .profileName {
font-size: 18px;
}
#profile_left_lane .report_item:after {
content: "{{lang "topic.report_button_text" . }}";
}
#profile_right_lane {
width: calc(100% - 245px);
}
#profile_comments {
overflow: hidden;
border-top: none;
margin-bottom: 0;
}
.simple .user_tag {
font-size: 14px;
}
.pageset {
display: flex;
margin-bottom: 10px;
margin-top: 8px;
}
.pageitem {
background-color: white;
padding: 5px;
margin-right: 5px;
padding-bottom: 4px;
border: 1px solid hsl(0, 0%, 80%);
}
.pageitem a {
color: black;
text-decoration: none;
}
.colstack_right .pageset {
margin-top: -5px;
}
.level_complete, .level_future, .level_inprogress {
display: flex;
}
#profile_left_pane .level_hideable, .levelBit .level_hideable {
display: inline;
}
.progressWrap {
margin-left: auto;
width: auto !important;
}
{{template "media.partial.css" }}