gosora/themes/cosmo-conflux/public/main.css
Azareal 5e3b61d910 Added pagination for forums.
You can now use the left and right keyboard keys to go to the next and previous page.
Making the shell files a little friendlier. Needs testing.
The main executable will always be named gosora.exe or the Linux equivalent ./Gosora
Reports is now a physical forum and not a "virtual" one.
Added create_forum() and delete_forum() for creating and deleting forums.
Synced the installer's config.go with the main one.
Forums are now stored in slices rather than maps for improved performance and concurrency.
You can now set a forum as hidden when initially creating it.
BBCode tag names may only be seven characters long now. This is part of a new anti-overflow measure that's much faster and simpler than the previous one.
Updated the last block of code in routes.go which uses the antiquated "success = 0" error detection method.
Fixed a visual bug in the Control Panel CSS.
Seperated the system forums from the normal ones in the Forum Manager.
You can now see if a forum is marked as Hidden in the Forum Manager.
Fixed the position of the lock status indicator.
IP Addresses now have a simple title attribute explaining that this long incomprehensible string is in fact an IP Address.
Textareas look a little better now.
Next / Previous buttons are now visible on mobile.
.bat files always say what they're doing now.
2017-01-26 13:37:50 +00:00

1052 lines
19 KiB
CSS

/* 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;
}
.menu_right:hover
{
border: #282828 1px solid;
background: #282828;
padding-left: 10px;
padding-right: 10px;
height: 38px;
text-align: center;
}
#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; }
.open_edit { display: none !important; }
.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;
}
.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;
}
.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); }
#alertFeed { background: url('../../images/bell.png') no-repeat center center / 24px, rgba(30,30,30,0.75); }
#alertFeed:hover { background: url('../../images/bell.png') no-repeat center center / 24px, rgba(90, 90, 90, 0.4); }
#mailFeed { background: url('../../images/mail.png') no-repeat center center / 24px, rgba(30,30,30,0.75); }
#mailFeed:hover { background: url('../../images/mail.png') no-repeat center center / 24px, rgba(90, 90, 90, 0.4); }
#awardFeed { background: url('../../images/emblem.png') no-repeat center center / 24px, rgba(30,30,30,0.75); }
#awardFeed:hover { background: url('../../images/emblem.png') no-repeat center center / 24px, rgba(90, 90, 90, 0.4); }
.selectedAlert { background: url('../../images/bell.png') no-repeat center center / 24px, rgba(250,250,250, 1) !important; }
.selectedMail { background: url('../../images/mail.png') no-repeat center center / 24px, rgba(250,250,250, 1) !important; }
.selectedAward { background: url('../../images/emblem.png') no-repeat center center / 24px, rgba(250,250,250, 1) !important; }
.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;
}
.options > .alertList
{
display: none;
position: absolute;
display: block;
width: 250px;
left: -250%;
top: 40px;
opacity: 0;
visibility: hidden;
overflow: hidden;
background: rgba(250,250,250,1);
word-wrap: none;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
padding: 0px;
z-index: 50;
}
.options > .alertList > h2
{
font-weight: normal;
padding-top: 10px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
margin-left: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
font-size: 20px;
line-height: 30px;
border: none;
}
.options > .alertList > hr
{
border: 0.5px solid rgba(220,220,220,1);
width: 100%;
margin: 0px;
padding: 0px;
}
.options > .alertList > .alertItem
{
display: block;
font-size: 13px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 3px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 0px;
overflow: hidden;
border-bottom: 1px solid rgb(220, 220, 220);
}
.options > .alertList > .alertItem:last-child { border: none; }
.options > .alertList > .alertItem > a { color: rgba(25,25,25,1); }
.options > .alertList > .alertItem > .alertAvatar
{
float: left;
border-radius: 3px;
margin-right: 2px;
}
}
@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; }
}