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

680 lines
12 KiB
CSS
Raw Normal View History

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
2016-12-02 07:38:54 +00:00
body
{
font-family: arial;
padding-bottom: 8px;
background-image: url('/static/test_bg2.svg');
background-size: cover;
2016-12-02 07:38:54 +00:00
}
/* Patch for Edge, until they fix emojis in arial x.x */
@supports (-ms-ime-align:auto) {
.user_content { font-family: Segoe UI Emoji, arial; }
}
/*.move_left{float: left;position: relative;left: 50%;}
.move_right{float: left;position: relative;left: -50%;}*/
2016-12-02 07:38:54 +00:00
ul
{
padding-left: 0px;
padding-right: 0px;
height: 36px;
2016-12-02 07:38:54 +00:00
list-style-type: none;
border: 1px solid #ccc;
background-color: white;
margin-bottom: 12px;
2016-12-02 07:38:54 +00:00
}
li
{
height: 35px;
2016-12-02 07:38:54 +00:00
padding-left: 10px;
padding-top: 8px;
padding-bottom: 8px;
2016-12-02 07:38:54 +00:00
}
li:hover { background: rgb(250,250,250); }
2016-12-02 07:38:54 +00:00
li a
{
text-decoration: none;
/*color: #515151;*/
color: black;
font-size: 17px;
2016-12-02 07:38:54 +00:00
}
.menu_left
2016-12-02 07:38:54 +00:00
{
float: left;
2016-12-02 07:38:54 +00:00
border-right: 1px solid #ccc;
padding-right: 10px;
}
.menu_right
{
float: right;
border-left: 1px solid #ccc;
padding-right: 10px;
}
2016-12-02 07:38:54 +00:00
.menu_alerts {
/*padding-left: 7px;*/
font-size: 20px;
padding-top: 2px;
color: rgb(80,80,80);
}
.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 {
display: none;
}
.menu_alerts .alertList {
display: none;
text-transform: none;
}
.selectedAlert .alertList {
position: absolute;
top: 51px;
display: block;
background: white;
font-size: 10px;
line-height: 16px;
width: 156px;
right: calc(5% + 7px);
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 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;
font-size: 10px;
font-weight: bold;
}
.alertItem .text.smaller {
font-size: 9px;
}
2016-12-02 07:38:54 +00:00
.container
{
width: 90%;
padding: 0px;
margin-left: auto;
margin-right: auto;
}
.rowblock
{
border: 1px solid #ccc;
width: 100%;
padding: 0px;
padding-top: 0px;
}
.rowblock:empty { display: none; }
2016-12-02 07:38:54 +00:00
.colblock_left
{
border: 1px solid #ccc;
padding: 0px;
padding-top: 0px;
width: 30%;
float: left;
margin-right: 8px;
}
.colblock_right
{
border: 1px solid #ccc;
padding: 0px;
padding-top: 0px;
width: 65%;
overflow: hidden;
word-wrap: break-word;
}
.colblock_left:empty { display: none; }
.colblock_right:empty { display: none; }
/* The new method of doing columns layouts, colblock is now deprecated :( */
.colstack_left
{
float: left;
width: 30%;
margin-right: 8px;
}
.colstack_right
{
float: left;
width: 65%;
width: calc(70% - 15px);
}
.colstack_item
{
border: 1px solid #ccc;
padding: 0px;
padding-top: 0px;
width: 100%;
margin-bottom: 12px;
overflow: hidden;
word-wrap: break-word;
}
.colstack_head { margin-bottom: 0px; }
.colstack_left:empty { display: none; }
.colstack_right:empty { display: none; }
.colstack_grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
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 {
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; }
2016-12-02 07:38:54 +00:00
.rowitem
{
width: 100%;
2016-12-02 07:38:54 +00:00
padding-left: 8px;
padding-right: 8px;
padding-top: 17px;
padding-bottom: 12px;
font-weight: bold;
text-transform: uppercase;
background-color: white;
2016-12-02 07:38:54 +00:00
}
.rowitem.passive
{
font-weight: normal;
text-transform: none;
}
.rowitem:not(:last-child)
2016-12-02 07:38:54 +00:00
{
border-bottom: 1px dotted #ccc;
}
.rowitem a
{
text-decoration: none;
color: black;
}
.rowitem a:hover { color: silver; }
.opthead { display: none; }
2016-12-02 07:38:54 +00:00
.col_left
{
width: 30%;
float: left;
}
.col_right
{
width: 69%;
overflow: hidden;
}
.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; }
2016-12-02 07:38:54 +00:00
.formrow
{
width: 100%;
background-color: white;
2016-12-02 07:38:54 +00:00
}
/* Clearfix */
.formrow:before, .formrow:after {
content: " ";
display: table;
2016-12-02 07:38:54 +00:00
}
.formrow:after { clear: both; }
.formrow:not(:last-child) { border-bottom: 1px dotted #ccc; }
2016-12-02 07:38:54 +00:00
.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; }
2016-12-02 07:38:54 +00:00
/* Mostly for textareas */
.formitem:only-child { width: 100%; }
2016-12-02 07:38:54 +00:00
.formitem textarea
{
width: 100%;
height: 100px;
outline-color: #8e8e8e;
2016-12-02 07:38:54 +00:00
}
.formitem:has-child()
{
margin: 0 auto;
float: none;
}
button
{
background: white;
border: 1px solid #8e8e8e;
}
/* Topics */
.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; }
2016-12-02 07:38:54 +00:00
.rowhead {
background: linear-gradient(to bottom, white, hsl(0, 0%, 93%));
}
.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
{
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: 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;
}
button.username
{
position: relative;
top: -0.25px;
}
.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;
}
.tag-mini
{
text-transform: none;
margin-left: 0px;
padding-left: 3px;
padding-right: 3px;
padding-top: 1.5px;
padding-bottom: 0px;
color: #505050; /* 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: 10px;
}
.mention { font-weight: bold; }
.show_on_edit { display: none; }
2016-12-02 07:38:54 +00:00
.alert
{
display: block;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
}
2016-12-02 07:38:54 +00:00
.alert_success
{
display: block;
padding: 5px;
2016-12-02 07:38:54 +00:00
border: 1px solid A2FC00;
margin-bottom: 10px;
2016-12-02 07:38:54 +00:00
background-color: DAF7A6;
}
.alert_error
{
display: block;
padding: 5px;
2016-12-02 07:38:54 +00:00
border: 1px solid #FF004B;
margin-bottom: 8px;
2016-12-02 07:38:54 +00:00
background-color: #FEB7CC;
}
/* 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;
}
.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_item:last-child {
padding-bottom: 7px;
}
.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; }
/* Media Queries from Simple. Probably useless in Conflux */
@media (max-width: 880px) {
li {
height: 29px;
font-size: 15px;
padding-left: 9px;
padding-top: 6px;
padding-bottom: 6px;
}
ul {
height: 30px;
margin-top: 8px;
}
.menu_left { padding-right: 9px; }
.menu_right { padding-right: 9px; }
.menu_alerts {
padding-left: 7px;
padding-right: 7px;
font-size: 18px;
}
body { padding-left: 4px; padding-right: 4px; margin: 0px !important; width: 100% !important; height: 100% !important; overflow-x: hidden; }
.container { width: auto; }
.selectedAlert .alertList { top: 37px; right: 4px; }
}
@media (max-width: 810px) {
.rowitem { text-transform: none; }
}
@media (max-width: 680px) {
li {
padding-left: 5px;
padding-top: 3px;
padding-bottom: 2px;
height: 25px;
}
li a { font-size: 14px; }
ul { height: 26px; }
.menu_left { padding-right: 7px; }
.menu_right { padding-right: 7px; }
.menu_create_topic { display: none; }
.menu_alerts {
padding-left: 4px;
padding-right: 4px;
font-size: 16px;
padding-top: 1px;
}
.selectedAlert .alertList { top: 33px; }
.hide_on_mobile { display: none; }
.prev_button, .next_button { top: auto;bottom: 5px; }
.colstack_grid { grid-template-columns: none; grid-gap: 8px; }
.grid_istat { margin-bottom: 0px; }
}
@media (max-width: 470px) {
.menu_overview, .menu_profile, .hide_on_micro { display: none; }
.post_container { overflow: visible !important; }
.post_item {
background-position: 0px 2px !important;
background-size: 64px 64px !important;
padding-left: 2px !important;
min-height: 96px;
position: relative !important;
}
.post_item > .user_content {
margin-left: 75px !important;
width: 100% !important;
}
.post_item > .mod_button {
float: right !important;
margin-left: 2px !important;
position: relative;
top: -14px;
}
.post_item > .real_username {
position: absolute;
top: 70px;
float: left;
margin-top: 0px;
padding-top: 3px !important;
margin-right: 2px;
width: 60px;
font-size: 15px;
}
.userinfo { width: 70px; }
.userinfo .avatar_item {
background-size: 64px;
width: 64px;
min-height: 64px;
}
.content_container {
margin-left: 73px;
min-height: inherit !important;
}
.user_content { min-height: 76.5px !important; font-size: 15px; }
.user_content.nobuttons { min-height: 100.5px !important; }
.the_name { font-size: 15px; }
.post_tag { font-size: 12px; }
.container { width: 100% !important; }
}
@media (max-width: 330px) {
li { padding-left: 6px; }
.menu_left { padding-right: 6px; }
}