bbbd0c381f
The porting is still underway, part of it relies on functionality which hasn't be implemented in Gosora yet like sidebars and alerts. Restructured the BBCode parser plugin. Added the [code] tag to the BBCode parser. Disabled by default for now. Added a benchmark for comparing performance between when [code] is enabled and when it isn't. Tweaked the templates to make them more flexible, thus allowing a wider variety of themes. Images of the themes can now be found in the Theme Manager. There's an emoji on each theme row to show which themes are mobile friendly and which aren't. Fixed editing and deleting posts on Tempra Conflux. Moved a large portion of the inline CSS in the topic_alt template into the stylesheets.
472 lines
7.5 KiB
CSS
472 lines
7.5 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
}
|
|
|
|
body
|
|
{
|
|
font-family: arial;
|
|
}
|
|
|
|
/* Patch for Edge */
|
|
@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%;}*/
|
|
ul
|
|
{
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
height: 28px;
|
|
list-style-type: none;
|
|
border: 1px solid #ccc;
|
|
}
|
|
li
|
|
{
|
|
height: 26px;
|
|
padding-left: 10px;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
li:hover { background: rgb(250,250,250); }
|
|
li a
|
|
{
|
|
text-decoration: none;
|
|
color: #515151;
|
|
}
|
|
/*li a:hover { color: #7a7a7a; }*/
|
|
.menu_left
|
|
{
|
|
float: left;
|
|
border-right: 1px solid #ccc;
|
|
padding-right: 10px;
|
|
}
|
|
.menu_right
|
|
{
|
|
float: right;
|
|
border-left: 1px solid #ccc;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.rowitem
|
|
{
|
|
width: 100%;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
padding-top: 17px;
|
|
padding-bottom: 12px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
.rowitem.passive
|
|
{
|
|
font-weight: normal;
|
|
text-transform: none;
|
|
}
|
|
.rowitem:not(:last-child)
|
|
{
|
|
border-bottom: 1px dotted #ccc;
|
|
}
|
|
.rowitem a
|
|
{
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
.rowitem a:hover
|
|
{
|
|
color: silver;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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: 97%;
|
|
}
|
|
.formitem textarea
|
|
{
|
|
width: 100%;
|
|
height: 100px;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.show_on_edit
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.alert
|
|
{
|
|
display: block;
|
|
padding: 5px;
|
|
margin-bottom: 10px;
|
|
border: 1px solid #ccc;
|
|
}
|
|
.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: 5px;
|
|
margin-top: 3px;
|
|
margin-bottom: 0;
|
|
background: white;
|
|
min-height: 129px;
|
|
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: 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;
|
|
}
|
|
|
|
.post_item {
|
|
background-color: #eaeaea;
|
|
padding-top: 4px;
|
|
padding-left: 5px;
|
|
clear: both;
|
|
border-bottom: none;
|
|
padding-right: 4px;
|
|
padding-bottom: 2px;
|
|
}
|
|
.post_item:last-child {
|
|
padding-bottom: 7px;
|
|
}
|
|
.post_tag {
|
|
display: none;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
.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);
|
|
}
|
|
|
|
/* Media Queries from Simple. Probably useless in Conflux */
|
|
@media (max-width: 880px) {
|
|
li
|
|
{
|
|
height: 25px;
|
|
font-size: 15px;
|
|
padding-left: 7px;
|
|
}
|
|
ul { height: 26px; margin-top: 8px; }
|
|
.menu_left { padding-right: 7px; }
|
|
.menu_right { padding-right: 7px; }
|
|
body { padding-left: 4px; padding-right: 4px; margin: 0px !important; width: 100% !important; height: 100% !important; overflow-x: hidden; }
|
|
.container { width: auto; }
|
|
}
|
|
|
|
@media (max-width: 810px) {
|
|
li
|
|
{
|
|
font-weight: normal;
|
|
text-transform: none;
|
|
}
|
|
.rowitem
|
|
{
|
|
text-transform: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
li
|
|
{
|
|
padding-left: 5px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
height: 23px;
|
|
}
|
|
ul { height: 24px; }
|
|
.menu_left { padding-right: 5px; }
|
|
.menu_right { padding-right: 5px; }
|
|
.menu_create_topic { display: none;}
|
|
.hide_on_mobile { display: none; }
|
|
}
|
|
|
|
@media (max-width: 470px) {
|
|
.menu_overview { display: none; }
|
|
.menu_profile { display: none; }
|
|
.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;
|
|
}
|
|
.container { width: 100% !important; }
|
|
} |