gosora/themes/tempra-conflux/public/main.css
Azareal 31f506c50c Removed the images for Cosmo from /images/, it's very saddening to see it go :(
Moved Reload from the UserStore into the UserCache.
Replaced many of the calls to Reload with CacheRemove.
Simplified the error functions.
Fixed a bug in the errors where they didn't have any CSS. Oops.
Added CustomErrorJS(), unused for now, but it may be useful in the future, especially for plugins.
Fixed many problems in the themes.
Added the Stick(), Unstick(), CreateActionReply(), Lock() and Unlock() methods to *Topic.
Renamed ip-search.html to ip-search-results.html
Added the Activate() and initPerms methods to *User.

Tempra Cursive is hiding from sight for this one commit.
Added Font Awesome to /public/, it isn't used yet.
2017-09-22 03:21:17 +01:00

795 lines
15 KiB
CSS

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
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 hsl(0,0%,80%);
background: hsl(0, 0%, 97%);
margin-bottom: 12px;
margin-top: 0px;
border-bottom: 1.5px inset hsl(0,0%,80%);
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 hsl(0,0%,80%);
border-bottom: 1.5px inset hsl(0,0%,80%);
padding-right: 10px;
background: hsl(0, 0%, 98%);
}
.menu_right {
float: right;
border-left: 1px solid hsl(0,0%,80%);
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 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: 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 hsl(0,0%,80%);
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 hsl(0,0%,80%);
width: 100%;
padding: 0px;
padding-top: 0px;
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: 1.5px inset hsl(0,0%,80%);
}
.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 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: 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; }
.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 hsl(0,0%,80%);
}
.formitem {
float: left;
padding: 10px;
min-width: 20%;
/*font-size: 17px;*/
font-weight: normal;
}
.formitem:not(:last-child) {
border-right: 1px dotted hsl(0,0%,80%);
}
.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 {
padding: 7px;
display: block;
margin-left: auto;
margin-right: auto;
font-size: 15px;
border-color: hsl(0,0%,80%);
}
button {
background: white;
border: 1px solid #8e8e8e;
}
/* Topics */
.topic_list {
display: grid;
grid-template-columns: calc(100% - 204px) 204px;
}
.topic_list .topic_inner_right {
display: none;
}
.topic_list .lastReplyAt {
white-space: nowrap;
}
@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_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: hsl(0,0%,80%);
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 hsl(0,0%,80%);
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 hsl(0,0%,80%);
width: 220px;
margin-bottom: 10px;
border-bottom: 1.5px inset hsl(0,0%,80%);
}
#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 hsl(0,0%,80%);
}
.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 hsl(0,0%,80%);
}
.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 hsl(0,0%,80%);
}
.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: 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;
}
.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 hsl(0,0%,80%);
}
.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 hsl(0,0%,80%);
margin-top: 12px;
clear: both;
height: 40px;
padding: 6px;
padding-left: 10px;
padding-right: 10px;
background-color: white;
border-bottom: 1.5px inset hsl(0,0%,80%);
}
.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 hsl(0,0%,80%);
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" }}