gosora/themes/tempra-conflux/public/main.css
Azareal 6f45c62815 We made more progress with topic views on Cosora. We accidentally broke Tempra Conflux's topic view in the process and we're planning to fix it in the following commit.
Added the ForumPermsStore.
Fixed the creation dates of the posts.
Added a skippable version of the vhooks.
Social Groups now work again, although I'm planning to refactor them ;)
Added more Markdown tests and fixed a few Markdown bugs.
2017-11-02 02:52:21 +00:00

912 lines
17 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);
}
/* 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;
}
.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, .auto_hide {
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;
}
#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" }}