ea63768a8e
Added the Tempra Cursive theme. A fork of Tempra Simple which is less boxy and uses the cursive font. Improved the theme manager. Primary themes and variant themes (themes based upon another) are now seperate. plugin_bbcode has been modified to use the URL parsing facilities of the core rather than implementing them itself. git:// and ftp:// links are now supported by plugin_bbcode. Added the simple quote BBCode. Fixed a bug in route_like_topic where the no row error type isn't handled properly. Moved the rowhead class onto the right element in the topic template. Removed a couple of linebreaks in the topic template in favour of pure CSS. Converted some inline CSS in the topic template into new CSS classes. alerts.png contains some alert types for features which haven't been implemented yet, this is mainly to test if the alert system would work under the presence of those alert types. Think of this as my plans for the future.
627 lines
11 KiB
CSS
627 lines
11 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
}
|
|
|
|
body
|
|
{
|
|
font-family: arial;
|
|
padding-bottom: 8px;
|
|
background-image: url('/static/test_bg2.svg');
|
|
background-size: cover;
|
|
}
|
|
|
|
/* 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;
|
|
background-color: white;
|
|
}
|
|
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;
|
|
}
|
|
|
|
.menu_alerts {
|
|
padding-left: 7px;
|
|
padding-top: 2px;
|
|
color: rgb(80,80,80);
|
|
}
|
|
.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;
|
|
text-transform: none;
|
|
}
|
|
.selectedAlert .alertList {
|
|
position: absolute;
|
|
top: 43px;
|
|
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;
|
|
}
|
|
.alertItem .text.smaller {
|
|
font-size: 9px;
|
|
}
|
|
|
|
.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;
|
|
background-color: white;
|
|
}
|
|
.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; }
|
|
.opthead { display: none; }
|
|
|
|
.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
|
|
{
|
|
width: 100%;
|
|
background-color: white;
|
|
}
|
|
/* 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;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.postQuote {
|
|
border: rgb(200,200,210);
|
|
background: rgb(245,245,255);
|
|
padding: 3px;
|
|
margin: 0px;
|
|
display: inline-block;
|
|
width: 100%;
|
|
margin-bottom: 5px;
|
|
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;
|
|
}
|
|
|
|
.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: 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;
|
|
}
|
|
|
|
.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: 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; }
|
|
.selectedAlert .alertList { top: 33px; right: 4px; }
|
|
}
|
|
|
|
@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; }
|
|
.menu_alerts { padding-left: 4px; padding-right: 4px; }
|
|
.hide_on_mobile { display: none; }
|
|
.prev_button, .next_button { top: auto;bottom: 5px; }
|
|
}
|
|
|
|
@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;
|
|
}
|
|
.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; }
|
|
} |