gosora/themes/cosmo-conflux/public/main.css

1046 lines
18 KiB
CSS
Raw Normal View History

/* AtomBB Cosmo Port. Copyright Azareal 2017 */
/* I'm currently converting the CSS over. Don't use this yet! */
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
h1
{
text-shadow: 0 1px 0 black;
color: darkgray;
height: 60px;
}
a
{
text-decoration: none;
color: black;
}
a img { border: 0; /* IE fix..*/ }
body
{
background: url('/static/atombb-small.png') no-repeat left, url('/static/stars-mk1.png');
color: black;
background-color: #141414;
padding: 0px;
margin: 0px;
font-family: Arial;
}
ul
{
background: darkgray;
padding-top: 0px;
padding-bottom: 0px;
list-style-type: none;
}
li
{
display: block;
float: left;
text-align: center;
margin-top: 1px;
margin-left: -1px;
margin-right: 2px;
padding-left: 1px;
padding-right: 1px;
border: 1px solid #7a7a7a;
border-top: none;
border-bottom: none;
border-left: none;
font-weight: normal;
color: white;
}
li:first-child { border-left: 1px solid #7a7a7a; }
li a
{
color: white;
text-decoration: none;
}
li:hover a, li a:hover, li a:link, li a:visited
{
color: white;
text-decoration: none;
}
li:hover
{
background: rgba(10,10,10,0.5);
font-weight: normal;
color: white;
}
.menu_right
{
float: right;
color: white;
font-size: 25px;
font-weight: bold;
padding-left: 10px;
padding-right: 10px;
height: 38px;
text-align: center;
border-left: 1px solid #7a7a7a;
}
.menu_alerts .alert_counter {
position: relative;
font-size: 9px;
top: -24px;
background-color: rgb(140,0,0);
color: white;
padding: 3px;
width: 14px;
left: 10px;
line-height: 8px;
border-radius: 20px;
padding-top: 2.5px;
height: 14px;
opacity: 0.8;
text-align: center;
}
.menu_alerts .alert_counter:empty {
display: none;
}
.selectedAlert {
background: white;
color: black;
}
.selectedAlert:hover {
background: white;
color: black;
font-weight: bold;
}
.selectedAlert .alert_counter {
display: none;
}
.menu_alerts .alertList {
display: none;
}
.selectedAlert .alertList {
position: absolute;
top: 41px;
display: block;
background: white;
font-size: 10px;
line-height: 16px;
width: 156px;
right: -15px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.alertItem {
padding: 8px;
overflow: hidden;
text-overflow: ellipsis;
}
.alertItem.withAvatar {
/*background-image: url('/uploads/avatar_1.jpg');*/
background-size: 36px;
background-repeat: no-repeat;
text-align: center;
padding-right: 12px;
padding-left: 42px;
height: 46px;
}
.alertItem.withAvatar:not(:last-child) {
border-bottom: 1px solid rgb(230,230,230);
}
.alertItem .text {
overflow: hidden;
text-overflow: ellipsis;
height: 30px;
width: 100%;
color: black;
}
.alertItem .text.smaller {
font-size: 9px;
}
#footer
{
clear: left;
margin: 0px auto;
width: 300px;
text-align: center;
}
hr { color: silver; border: 1px solid silver; }
.rowhead
{
border-top: none;
font-weight: bold;
color: white;
}
.rowhead:hover
{
color: rgba(200,200,200,1);
transition: color 1s;
-moz-transition: color 1s;
-webkit-transition: color 1s;
-o-transition: color 1s;
}
.rowblock, .colblock_left, .colblock_right {
background: rgba(240,240,240,1);
border-spacing: 0;
border-collapse: collapse;
width: 100%;
margin: 0px;
border-bottom: 1px solid black;
}
.rowitem {
padding-left: 8px;
padding-right: 8px;
padding-top: 17px;
padding-bottom: 12px;
border-left: 1px solid black;
border-right: 1px solid black;
}
.rowitem:not(:last-child)
{
border-bottom: 1px dotted #ccc;
}
.rowblock:first-of-type {
margin-top: 8px;
}
.rowhead, .colhead {
background: #ce2424;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f97779), to(#ce2424));
background: -moz-linear-gradient(#f97779, #ce2424);
background: linear-gradient(#f97779, #ce2424);
border: 0px solid #b32424;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
box-shadow: inset 0 0 0 1px #e67e7b;
text-shadow: 0 1px 0 #bd2524;
text-align: center;
font-weight: bold;
color: white;
padding: 0px;
margin: 0px;
height: 30px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
overflow: hidden;
text-overflow: ellipsis;
}
.rowhead a { color: white; display: block; padding-top: 5px; }
.rowhead span { display: block; padding-top: 5px; }
.colhead a { color: white; display: block; padding-top: 5px; }
.colhead span { display: block; padding-top: 5px; }
.show_on_edit { display: none; }
.rowhead .topic_status_e { display: none !important; }
.topic_button { float: right; position: relative; top: -22px; margin-right: 2px; border-style: solid !important; }
.colblock_left
{
padding: 0px;
padding-top: 0px;
width: 30%;
float: left;
margin-right: 8px;
}
.colblock_right
{
padding: 0px;
padding-top: 0px;
width: 65%;
overflow: hidden;
word-wrap: break-word;
}
.colblock_left:empty
{
display: none;
}
.colblock_right:empty
{
display: none;
}
.colblock_left:first-of-type {
margin-top: 8px;
}
.colblock_right:first-of-type {
margin-top: 8px;
}
.colitem
{
padding-left: 8px;
padding-right: 8px;
padding-top: 17px;
padding-bottom: 12px;
font-weight: bold;
text-transform: uppercase;
}
.colitem.passive
{
font-weight: normal;
text-transform: none;
}
.colitem a
{
text-decoration: none;
color: black;
}
.colitem a:hover
{
color: silver;
}
.col_left
{
width: 30%;
float: left;
}
.col_right
{
width: 69%;
overflow: hidden;
}
.formrow
{
/*height: 40px;*/
width: 100%;
}
/*Clearfix*/
.formrow:before,
.formrow:after {
content: " ";
display: table;
}
.formrow:after {
clear: both;
}
.formrow:not(:last-child)
{
border-bottom: 1px dotted #ccc;
}
.formitem
{
float: left;
padding-left: 8px;
padding-right: 8px;
padding-top: 13px;
padding-bottom: 8px;
font-weight: bold;
}
.formitem:first-child
{
font-weight: bold;
}
.formitem:not(:last-child)
{
border-right: 1px dotted #ccc;
}
.formitem.invisible_border
{
border: none;
}
/* Mostly for textareas */
.formitem:only-child { width: 100%; }
.formitem textarea
{
width: 100%;
height: 100px;
outline-color: #8e8e8e;
}
.tbody
{
border-top: 1px solid silver;
margin: 8px;
padding: 8px;
}
.error
{
padding: 5px;
margin: 5px;
width: 90%;
background: #FA8072;
color: maroon;
border: 1px solid #FF3C2A;
border-radius: 5px;
}
.success
{
padding: 5px;
padding-left: 24px;
margin: 5px;
width: 90%;
background: #CAE08A;
background-repeat: no-repeat;
background-position: 5px center;
background-image: url("../../images/success-16.png");
color: #667C26;
border: 1px solid #667C26;
border-radius: 5px;
}
.notice
{
padding: 5px;
padding-left: 24px;
margin: 5px;
width: 100%;
background: #96CDCD;
background-repeat: no-repeat;
background-position: 5px center;
background-image: url("../../images/info-16.png");
color: #008080;
border: 1px solid #5F9F9F;
box-sizing: border-box;
}
/*button
{
background: #ce2424;
background: linear-gradient(#f97779, #ce2424);
border: 1px solid #be2424;
color: rgba(255,255,255,1);
box-shadow: inset 0 0 0 1px #e67e7b;
text-shadow: 0 1px 0 #bd2524;
font-weight: bold;
padding: 3px;
margin-bottom: 2px;
border-radius: 5px;
}
button .big { padding: 6px; }*/
.formbutton
{
background: white;
border: 1px solid #8e8e8e;
color: #505050;
box-shadow: none;
text-shadow: none;
font-weight: normal;
border-radius: 0px;
}
.username
{
text-transform: none;
text-shadow: none;
margin-left: 0px;
padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
padding-bottom: 2px;
color: #505050 !important; /* 80,80,80 */
background-color: #FFFFFF;
border-style: dotted;
border-color: #505050; /* 232,232,232. All three RGB colours being the same seems to create a shade of gray */
border-width: 1px;
font-size: 15px;
}
.postQuote {
padding: 5px;
border: 1px solid rgb(200,200,200);
display: inline-block;
margin-bottom: 5px;
width: 100%;
background: rgb(250,250,250);
}
.threadHidden { background: orange; }
.threadDeleted { background: rgba(255,0,0,0.5); }
.pagination
{
margin-top: 8px;
margin-left: 5px;
}
.pagination a { color: #717171; }
.page
{
display: inline-block;
margin-right: 5px;
text-decoration: none;
padding: 5px 10px;
border: solid 1px #c0c0c0;
color: #717171;
background: #e9e9e9;
font-weight: bold;
font-size: 13px;
border-radius: 5px;
}
blockquote
{
border: solid 1px darkgray;
background-color: #f8fafd;
color: #758fa3;
font-family: Arial;
font-size: 12px;
border-radius: 5px;
margin: 5px;
}
blockquote .head
{
display: block;
font-weight: bold;
font-size: 13px;
padding: 5px 10px;
background-color: lightgray;
margin-bottom: 5px;
border-top: solid 1px #f4f7fa;
border-bottom: solid 1px #dde5ed;
}
blockquote p
{
line-height: 20px;
margin-bottom: 10px;
padding-left: 15px;
}
.rep-upvote { font-size: 13.5px !important; }
.rep-upvote span
{
position: relative;
top: -4px;
letter-spacing: 0.02em;
}
.action
{
background-color: #A0CFEC;
font-style: italic;
padding: 15px;
text-align: center;
font-size: 18px;
}
.post-content { word-wrap: break-word; }
.sidebar
{
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: -webkit-sticky;
position: sticky;
top: 44px;
}
.gadget { padding-bottom: 20px; }
/* Topic */
.post_avatar
{
border-radius: 5px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
display: block;
max-height: 128px;
max-width: 128px;
}
/* From Tempra Conflux */
.user_content {
padding: 5px;
margin-top: 3px;
margin-bottom: 0;
background: white;
min-height: 145px;
padding-bottom: 0;
width: 100%;
}
.user_content.nobuttons {
min-height: 168px;
}
.button_container {
border-top: solid 1px #eaeaea;
border-spacing: 0px;
border-collapse: collapse;
padding: 0;
margin: 0;
margin-top: 3px;
display: block;
height: 20px;
}
.action_button {
display: block;
float: left;
border-right: solid 1px #eaeaea;
color: #505050;
font-size: 13px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 5px;
padding-right: 5px;
}
Dramatically improved Gosora's speed by two to four times. Admins and mods can now see the IP Addresses of users. The last IP Address of a user is now tracked. The IP Addresses a user used to create replies and topics are now tracked. Dramatically improved the speed of templates with the new Fragment System. More optimisations to come! Decreased the memory usage of compiled templates with the new Fragment System. build.bat now provides more information on what it's doing. Added the `go generate` command to the .bat files in preparation for the future. We're currently in the process of overhauling the benchmark system to run tests in parallel rather than serially. More news on that later. We're also looking into the best way of integrating pprof with the benchmarks for detailed profiling. The internal and notfound errors are now static pages. Internal Error pages are now served properly. Optimised most of the errors. Added an internal flag for checking if the plugins have been initialised yet. Mainly for tests. Decoupled the global initialisation code from the tests. Removed URL Tags from Tempra Simple. We're pondering over how to re-introduce this in a less intrusive way. Template file writing is now multi-threaded. The number of maximum open connections is now explicitly set. Removed the Name field from the page struct. Turned some of the most frequently hit queries into prepared statements. Added the [rand] BBCode. Converted the NoticeList map into a slice. Added the missing_tag error type to the [url] tag. error_notfound is now used for when the router can't find a route. Fixed a bug in the custom page route where both the page AND the error is served when the page doesn't exist. Removed some deferrals. Reduced the number of allocations on the topic page. run.bat now provides more information on what it's doing.
2017-01-17 07:55:46 +00:00
.action_button_right {
float: right;
border-left: solid 1px #eaeaea;
}
.post_item:not(.simple) {
background-color: #eaeaea;
}
.post_item {
background-color: #eaeaea;
padding-top: 4px;
padding-left: 5px;
clear: both;
border-top: none !important;
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);
}
.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: 137px;
min-height: 128px;
margin-bottom: 0;
margin-right: 3px;
box-shadow:0 1px 2px rgba(0,0,0,.1);
}
.prev_button, .next_button {
position: fixed;
top: 50%;
font-size: 30px;
border-width: 1px;
background-color: #FFFFFF;
border-style: dotted;
border-color: #505050;
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; }
/* Responsive Layout */
/* Anything that isn't a small mobile */
@media(min-width: 501px)
{
.options
{
float: right;
position: relative;
top: -50px;
border: 1px solid rgba(100,100,110,0.75);
border-left: none;
border-right: none;
padding: 5px;
height: 30px;
width: 30px;
overflow: none;
transition-property: background;
transition-duration: 0.5s;
transition-timing-function: linear;
}
.options:last-child { border-left: 1px solid rgba(100,100,110,0.75); }
.right_most { margin-right: 10%; border-right: 1px solid rgba(100,100,110,0.75); }
/*.options > .counter
{
background: red;
border-radius: 5px;
color: #FFFFFF;
display: inline-block;
font-weight: bold;
text-align: center;
line-height: 16px;
font-size: 10px;
width: 16px;
position: absolute;
right: 0px;
}*/
}
@media (max-width: 800px)
{
body { background: #505050; margin-bottom: 10px;}
#main
{
width: 100%;
min-width: 300px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px;
box-sizing: border-box;
}
ul
{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
line-height: 30px;
min-height: 30px;
padding-left: 8px;
padding-right: 8px;
background-image: linear-gradient(bottom, #2e2e2e, #4c4c4c);
background-image: -moz-linear-gradient(bottom, #2e2e2e, #4c4c4c);
background-image: -o-linear-gradient(bottom, #2e2e2e, #4c4c4c);
background-image: -ms-linear-gradient(bottom, #2e2e2e, #4c4c4c);
background-image: -webkit-linear-gradient(bottom, #2e2e2e, #4c4c4c);
}
li
{
font-size: 14px;
padding-left: 12px;
padding-right: 12px;
height: 30px;
}
li:hover
{
background-image: linear-gradient(bottom, #4c4c4c, #2e2e2e);
background-image: -moz-linear-gradient(bottom, #4c4c4c, #2e2e2e);
background-image: -o-linear-gradient(bottom, #4c4c4c, #2e2e2e);
background-image: -ms-linear-gradient(bottom, #4c4c4c, #2e2e2e);
background-image: -webkit-linear-gradient(bottom, #4c4c4c, #2e2e2e);
}
.rowblock { border-left: none;border-right: none;border-bottom: none; }
.rowitem { border-left: none;border-right: none; }
.rowhead { border-left: none;border-right: none; }
.tbody { border-left: none;border-right: none; }
}
@media(max-width: 620px)
{
.menu_create_topic { display: none;}
.menu_overview { display: none; }
.hide_on_mobile { display: none; }
}
/* This one is specifically for small mobiles.. */
@media(max-width: 500px)
{
#main { margin-top: 20px; }
.rowblock { box-sizing: border-box; }
.rowblock:first-of-type { margin-top: 2px; }
body { overflow-x: hidden; }
.topic_name { text-align: left; margin-left: 8px; width: 50%; text-overflow: ellipsis; overflow: hidden; }
.menu_profile { display: none; }
.options { display: none !important; }
ul
{
line-height: 30px;
min-height: 30px;
padding-left: 4px;
padding-right: 4px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
clear: left;
width: 100%;
}
li
{
font-size: 15px;
padding-left: 6px;
padding-right: 6px;
height: 28px;
}
#back
{
position: relative;
top: -25px;
}
#main
{
padding-left: 4px;
padding-right: 6px;
}
.notice
{
width: 100%;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 8px;
margin-top: 0px;
padding: 5px;
background: #96CDCD;
background-image: none;
box-sizing: border-box;
}
.post-content { word-wrap: normal; }
.post-meta { white-space: normal; }
.post_avatar
{
max-height: 80px;
max-width: 80px;
}
.tag_block { word-wrap: break-word; }
.notice:first-child { display: inline-block; }
.getTopics { display: none; }
.userinfo {
width: 70px;
}
.userinfo .avatar_item {
background-size: 64px;
width: 64px;
min-height: 64px;
}
.content_container {
margin-left: 73px;
min-height: inherit;
}
.user_content { min-height: 80px !important; }
.user_content.nobuttons { min-height: 103px !important; }
}
@media (min-width: 800px)
{
@-webkit-keyframes slidein
{
from { transform: translate(0,-50px) scale(0.75); }
to {}
}
@-moz-keyframes slidein
{
from { transform: translate(0,-50px) scale(0.75); }
to {}
}
@keyframes slidein
{
from { transform: translate(0,-50px) scale(0.75); }
to {}
}
.right_most { margin-right: 15%; }
#back
{
width: 800px;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
background: none;
border-top: none;
padding: 0px;
padding-top: 0px;
padding-bottom: 10px;
background-color: rgba(30,30,30,0.75);
border: 1px solid rgba(100,100,110,0.75);
box-shadow: -1px -1px 1px rgba(0, 0, 0, 1), 1px 1px 1px rgba(0,0,0,0.5);
transition-property: height;
transition-duration: 0.5s;
transition-timing-function: linear;
}
#main
{
float: left;
clear: left;
width: 765px;
min-width: 300px;
margin-top: 0px;
margin-left: 15px;
margin-right: 12px;
margin-bottom: 15px;
}
.nav
{
position: sticky;
top: 0px;
width: 800px;
margin-left: auto;
margin-right: auto;
perspective: 1000px;
z-index: 20;
}
ul
{
line-height: 40px;
min-height: 40px;
padding-left: 20px;
padding-right: 20px;
margin-top: 0px;
margin-bottom: 0px;
background: none;
background-color: rgba(30,30,30,0.75);
border: 1px solid rgba(90,90,90,0.75);
transition: transform 0.7s;
}
ul:hover
{
transform: rotateX(-15deg);
}
li
{
font-size: 15px;
padding-left: 15px;
padding-right: 15px;
height: 38px;
}
}
@media (max-width: 1023px) { .left_sidebar { display: none; } .right_sidebar { display: none; } }
@media (min-width: 1024px)
{
#back
{
width: 1000px;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
background: none;
border-top: none;
padding: 0px;
padding-top: 0px;
padding-bottom: 10px;
background-color: rgba(30,30,30,0.75);
border: 1px solid rgba(100,100,110,0.75);
box-shadow: -1px -1px 1px rgba(0, 0, 0, 1), 1px 1px 1px rgba(0,0,0,0.5);
}
#main
{
float: left;
clear: left;
width: 700px;
min-width: 300px;
margin-top: 9px;
margin-left: 15px;
margin-right: 12px;
margin-bottom: 15px;
}
.left_sidebar { display: none; } /* This theme only supports right sidebars, at the moment.. */
.right_sidebar {
float: left;
width: 250px;
margin-top: 5px;
margin-left: 0px;
margin-right: 5px;
margin-bottom: 8px;
padding: 8px;
}
.nav { width: 1000px; }
}
@media (min-width: 1603px)
{
#back
{
width: 1548px;
margin-left: auto;
margin-right: auto;
}
#main { width: 1250px; }
}
@media (min-width: 2400px)
{
#back
{
width: 2000px;
margin-left: auto;
margin-right: auto;
}
#main { width: 1690px; }
.index_category
{
float: left;
width: 835px;
}
.index_category:nth-child(even) { margin-left: 10px; }
.index_category:nth-child(odd) { overflow: hidden; }
.index_category:only-child { width: 100%; }
}
@media (min-width: 3000px)
{
#back { width: 2900px; }
#main { width: 2490px; }
.index_category { width: 1230px; }
.index_category:only-child { width: 100%; }
.right_sidebar { width: 350px; }
}