gosora/themes/cosmo-conflux/public/main.css
Azareal e30707bc17 Refactored the installer's code. We're moving towards supporting multiple database engines.
More progress has been made with PostgreSQL, but it's still incomplete and experimental.
The items on the Social Group menu bar are no longer decorative and now let you jump from page to page.
Social Group permissions are now fully functional. More features to come like privacy levels, secondary board permissions, etc. for Social Groups.

One of our dependencies added a dependecy, so we've added that dependency as a dependency.
Tweaked the ForumStore to better conform to the tests.
Fixed an issue with the generated file comment stopping the build tags from being read by the compiler for a few files.
Fixed the test system.
Renamed the route_create_topic handler to route_topic_create_submit
Moved the user table into the query generator.
Fixed a bug in MySQL where it doesn't allow unique keys longer than 180 characters.
Fixed a race condition in the forum deletion handler.
Fixed a crash bug where Gosora crashes when [rand]0[/rand] is passed to the BBCode parser.
Fixed a bug with superadmins not being able to see all the forums they should be able to.
Fixed a bug in simple_forum_session_check where it assumes every request has an error.

Tests:
Added 8 ForumStore tests.
Added 4 Auth tests.
Added 14 bbcode_full_parse tests.
Added 4 bbcode_regex_parse tests.
Fixed a bug in one of the bbcode_full_parse tests.

Apparently, routes.go wasn't commited in the previous commit o_o
2017-07-12 12:05:18 +01:00

1016 lines
20 KiB
CSS

/* AtomBB Cosmo Port. Copyright Azareal 2017 - 2018 */
/* I'm currently converting the CSS over from one of my previous projects. 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, 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-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;
}
#footer {
clear: left;
margin: 0px auto;
width: 300px;
text-align: center;
}
hr { color: silver; border: 1px solid silver; }
.rowhead .rowitem, .colstack_head .rowitem, .opthead .rowitem {
border-top: none;
font-weight: bold;
color: white;
}
.rowhead .rowitem:hover, .colstack_head .rowItem:hover, .opthead .rowitem: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, .colstack_item {
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; }
.datarow {
padding-top: 10px;
padding-bottom: 10px;
}
.rowsmall {
font-size:12px;
}
.rowhead .rowitem, .colhead, .opthead .rowitem, .colstack_head .rowitem {
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, .opthead a, .colstack_head a {
color: white;
display: block;
padding-top: 5px;
}
.rowhead span, .opthead span, .colstack_head 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, .opthead .topic_status_e, .colstack_head .topic_status_e {
display: none !important;
}
.topic_sticky {
background-color: rgb(255,255,234);
}
.topic_closed {
background-color: rgb(248,248,248);
}
.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, .colblock_right:empty { display: none; }
.colblock_left:first-of-type, .colblock_right:first-of-type { margin-top: 8px; }
/* The new method of doing columns layouts, colblock is now deprecated :( */
.colstack_left {
float: left;
width: 30%;
margin-right: 8px;
margin-top: 12px;
}
.colstack_right {
float: left;
width: 65%;
width: calc(70% - 15px);
margin-top: 12px;
}
.colstack_item {
padding: 0px;
padding-top: 0px;
margin-bottom: 16px;
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: 15px;*/
grid-gap: 12px;
margin-left: 5px;
}
.grid_item {
border: 1px solid #ccc;
word-wrap: break-word;
background-color: white;
width: 100%;
overflow: hidden;
}
.grid_stat, .grid_istat {
/*padding-top: 15px;*/
text-align: center;
/*padding-bottom: 15px;
font-size: 20px;*/
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; }
.formrow { 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: 10px;
min-width: 20%;
/*font-size: 17px;*/
font-weight: normal;
}
.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;
}
.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: 14px;
border-color: #ccc;
}
.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: solid;
border-color: rgb(180,180,180);
border-width: 1px;
font-size: 15px;
}
.simple > .real_username {
color: #404040;
font-size: 16px;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
}
.postQuote {
padding: 5px;
border: 1px solid rgb(200,200,200);
display: inline-block;
margin-bottom: 8px;
width: 100%;
background: rgb(250,250,250);
}
.mention { font-weight: bold; }
.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:not(.simple) {
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;
}
.like_label:before { content: "😀"; }
.edit_label:before { content: "🖊️"; }
.trash_label:before { content: "🗑️"; }
.flag_label:before { content: "🚩"; }
.mod_button { margin-right: 4px; }
.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);
}
.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: 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; }
.head_tag_upshift { display: none; }
/* 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, .tbody {
border-left: none;
border-right: none;
}
}
@media(max-width: 620px) {
.menu_create_topic, .menu_overview, .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; }
.colstack_grid { grid-template-columns: none; grid-gap: 8px; }
.grid_istat { margin-bottom: 0px; }
}
@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) { .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;
}
#main:not(.shrink_main) { width: calc(100% - 30px); }
.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; }
#main { width: 1250px; }
#main:not(.shrink_main) { width: calc(100% - 30px); }
}
@media (min-width: 2400px) {
#back { width: 2000px; }
#main { width: 1690px; }
#main:not(.shrink_main) { width: calc(100% - 30px); }
.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; }
#main:not(.shrink_main) { width: calc(100% - 30px); }
.index_category { width: 1230px; }
.index_category:only-child { width: 100%; }
.right_sidebar { width: 350px; }
}