gosora/themes/tempra-conflux/public/main.css
Azareal 7be011a30d Almost finished live topic lists, you can find them at /topics/. You can disable them via config.json
The topic list cache can handle more groups now, but don't go too crazy with groups (e.g. thousands of them).

Make the suspicious request logs more descriptive.
Added the phrases API endpoint.
Split the template phrases up by prefix, more work on this coming up.
Removed #dash_saved and part of #dash_username.
Removed some temporary artifacts from trying to implement FA5 in Nox.
Removed some commented CSS.
Fixed template artifact deletion on Windows.
Tweaked HTTPSRedirect to make it more compact.
Fixed NullUserCache not complying with the expectations for BulkGet.
Swapped out a few RunVhook calls for more appropriate RunVhookNoreturn calls.
Removed a few redundant IsAdmin checks when IsMod would suffice.
Commented out a few pushers.
Desktop notification permission requests are no longer served to guests.
Split topics.html into topics.html and topics_topic.html
RunThemeTemplate should now fallback to interpreted templates properly when the transpiled variants aren't avaialb.e
Changed TopicsRow.CreatedAt from a string to a time.Time
Added SkipTmplPtrMap to CTemplateConfig.
Added SetBuildTags to CTemplateSet.
A bit more data is dumped when something goes wrong while transpiling templates now.
topics_topic, topic_posts, and topic_alt_posts are now transpiled for the client, although not all of them are ready to be served to the client yet.
Client rendered templates now support phrases.
Client rendered templates now support loops.
Fixed loadAlerts in global.js
Refactored some of the template initialisation code to make it less repetitive.
Split topic.html into topic.html and topic_posts.html
Split topic_alt.html into topic_alt.html and topic_alt_posts.html
Added comments for PollCache.
Fixed a data race in the MemoryPollCache.
The writer is now closed properly in WsHubImpl.broadcastMessage.
Fixed a potential deadlock in WsHubImpl.broadcastMessage.
Removed some old commented code in websockets.go

Added the DisableLiveTopicList config setting.
2018-06-24 23:49:29 +10:00

1051 lines
19 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;
}
.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;
display: flex;
}
#main {
width: 100%;
}
/* 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 */
.forum_list .forum_nodesc {
font-style: italic;
}
.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;
overflow: hidden;
}
.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_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;
}
.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_count {
display: none;
}
.has_likes .like_count {
display: block;
}
.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: 2px inset var(--main-border-color);
border-left: 1px solid var(--main-border-color);
border-right: 1px solid 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: none;
}
.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, .remove_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"}}";
}
.footer {
margin-left: 12px;
margin-right: 12px;
margin-bottom: 12px;
}
#poweredByHolder {
border: 1px solid var(--main-border-color);
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" }}