gosora/themes/tempra-conflux/public/main.css
Azareal be47066770 General:
Added better pagination to /forum/{id}
Fixed the ordering of the elements in the pagesets.
Added hooks to the task system.
Reduced the amount of boilerplate for RunVhook and RunVhookNoReturn.
Added RunVhookNeedHook to allow plugin developers to add custom content types to the report system.
Added BulkGetMap to the DefaultPollStore.
Renamed the MultiServer config setting to ServerCount and made it an integer.
Don't cache topic lists for empty groups.
Don't load replies for topics without any.

Tempra Simple:
Added chart and submenu CSS.
Improved the input and select CSS.
Fixed the pageset CSS.
Fixed the poll input CSS.

Tempra Conflux:
Fixed the quick reply button CSS.
Hid the avatar in the quick reply area.
Added the poll CSS.
Fixed the pageset CSS.

Shadow:
Fixed the time range selector CSS.
Fixed the poll input CSS.
2018-02-15 13:15:27 +00:00

1024 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;
}
#menu_forums a:after {
content: "Forums";
}
.menu_topics a:after {
content: "Topics";
}
.menu_account a:after {
content: "Account";
}
.menu_profile a:after {
content: "Profile";
}
.menu_panel a:after {
content: "Panel";
}
.menu_logout a:after {
content: "Logout";
}
.menu_login a:after {
content: "Login";
}
.menu_register a:after {
content: "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; }
.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);
}
/* 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: "Last: ";
}
.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;
}
.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: " 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: "Report";
}
#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: "+1";
}
.button_container .open_edit:after, .edit_item:after {
content: "Edit";
}
.delete_item:after {
content: "Delete";
}
.lock_item:after {
content: "Lock";
}
.unlock_item:after {
content: "Unlock";
}
.pin_item:after {
content: "Pin";
}
.unpin_item:after {
content: "Unpin";
}
.report_item:after {
content: "Report";
}
#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" }}