gosora/themes/tempra-cursive/public/main.css
Azareal 8ecc637ab9 Moved routeProfile to routes.ViewProfile.
Requests are now logged as one big chunk to help prevent them getting torn apart and improve log throughput.
Newlines are now stripped from dumped requests.
Prepared statement logging now only happens in debug mode for speedier server startups.
More suspicious request tracking is done outside of debug mode now.
Only log the initial message in plugin_markdown in debug mode.
Moved the CreateTopicSubmit attachment logging to super debug mode.
Removed a couple of unneccesary menu items from the Account Manager menu.
Hid the add friend option on the profiles for now.
Moved the remaining analytics results loops into a common function.
Only log the graph for the analytics routes in debug mode.

Every Theme:
Added CSS for the Don't have an Account link on the Login Page.

Cosora:
Fixed the header CSS on mobile.
The header CSS now covers optheads on mobile.
Revamped the profile comment UI.

Shadow:
Added CSS for sticky topics.

Tempra Simple:
Button CSS now applies to type=submit inputs.
Fixed the IP Search CSS.

Tempra Conflux:
Button CSS now applies to type=submit inputs.
Fixed the IP Search CSS.

Tempra Cursive (Deprecated):
Button CSS now applies to type=submit inputs.
2018-02-26 09:07:00 +00:00

755 lines
13 KiB
CSS

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
font-family: cursive;
padding-bottom: 8px;
}
/* Patch for Edge, until they fix emojis in arial x.x */
@supports (-ms-ime-align:auto) { .user_content { font-family: Segoe UI Emoji, arial; } }
ul {
padding-left: 0px;
padding-right: 0px;
height: 36px;
list-style-type: none;
border: 1px solid #ccc;
background-color: white;
margin-bottom: 12px;
}
li {
height: 35px;
padding-left: 10px;
padding-top: 8px;
padding-bottom: 8px;
}
li:hover { background: rgb(250,250,250); }
li a {
text-decoration: none;
color: black;
font-size: 17px;
}
.menu_left {
float: left;
border-right: 1px solid #ccc;
padding-right: 10px;
font-family: cursive;
padding-top: 4px;
}
.menu_right {
float: right;
border-left: 1px solid #ccc;
padding-right: 10px;
}
#menu_forums a:after {
content: "Forums";
}
.menu_topics a:after {
content: "Topics";
}
.menu_account a:after {
content: "Account";
}
.menu_profile a:after {
content: "Profile";
}
.menu_panel a:after {
content: "Panel";
}
.menu_logout a:after {
content: "Logout";
}
.menu_login a:after {
content: "Login";
}
.menu_register a:after {
content: "Register";
}
.alert_bell:before {
content: '🔔︎';
}
.menu_bell {
cursor: default;
}
.menu_alerts {
font-size: 20px;
padding-top: 2px;
color: rgb(80,80,80);
z-index: 500;
}
.menu_alerts .alert_counter {
position: relative;
font-family: arial;
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, .selectedAlert:hover {
background: white;
color: black;
}
.menu_alerts .alertList {
display: none;
}
.selectedAlert .alertList {
position: absolute;
top: 51px;
display: block;
background: white;
font-size: 10px;
line-height: 16px;
width: 300px;
right: calc(5% + 7px);
border: 1px solid #ccc;
margin-bottom: 10px;
}
.alertItem {
padding: 8px;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 15px;
padding-bottom: 16px;
}
.alertItem.withAvatar {
background-size: 60px;
background-repeat: no-repeat;
padding-right: 12px;
padding-left: 68px;
height: 50px;
}
.alertItem.withAvatar:not(:last-child) {
border-bottom: 1px solid rgb(230,230,230);
}
.alertItem.withAvatar .text {
overflow: hidden;
text-overflow: ellipsis;
float: right;
height: 40px;
width: 100%;
white-space: nowrap;
}
.alertItem .text {
font-size: 13px;
font-weight: normal;
margin-left: 5px;
}
.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;
}
.rowsmall {
font-size: 12px;
}
.bgsub {
display: none;
}
.bgavatars .rowitem {
background-repeat: no-repeat;
background-size: 50px;
padding-left: 58px;
}
.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, .colstack_right:empty {
display: none;
}
.colstack_grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
/*grid-gap: 15px;*/
grid-gap: 12px;
margin-left: 5px;
margin-top: 2px;
}
.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: 10px;*/
margin-bottom: 3px;
}
.stat_green {
background-color: lightgreen;
border-color: lightgreen;
}
.stat_orange {
background-color: #ffe4b3;
border-color: #ffe4b3;
}
.stat_red {
background-color: #ffb2b2;
border-color: #ffb2b2;
}
.stat_disabled {
background-color: lightgray;
border-color: lightgray;
}
.rowitem {
width: 100%;
padding-left: 8px;
padding-right: 8px;
padding-top: 12px;
padding-bottom: 12px;
background-color: white;
font-family: cursive;
}
.rowitem:not(:last-child) {
border-bottom: 1px dotted #ccc;
}
.rowitem a {
text-decoration: none;
color: black;
}
.rowitem a:hover { color: silver; }
.top_post { margin-bottom: 16px; }
.opthead { display: none; }
.datarow {
padding-top: 10px;
padding-bottom: 10px;
}
.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: 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:has-child() {
margin: 0 auto;
float: none;
}
.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: 15px;
border-color: #ccc;
}
.dont_have_account {
color: #505050;
font-size: 12px;
font-weight: normal;
float: right;
}
button, input[type="submit"] {
background: white;
border: 1px solid #8e8e8e;
}
/* TODO: Add the avatars to the forum list */
.extra_little_row_avatar {
display: none;
}
.shift_left {
float: left;
}
.shift_right {
float: right;
}
/* Topics */
.topic_list .starter:before {
content: "Starter: ";
}
.topic_sticky {
background-color: rgb(255,255,234);
}
.topic_closed {
background-color: rgb(248,248,248);
}
.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; }
.username, .panel_tag {
text-transform: none;
margin-left: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 2px;
padding-bottom: 2px;
color: #505050; /* 80,80,80 */
font-size: 15px;
background: none;
}
button.username {
position: relative;
top: -0.25px;
}
.username.level { color: #303030; }
.username.real_username {
color: #404040;
font-size: 16px;
padding-right: 4px;
}
.username.real_username:hover { color: black; }
.tag-text {
padding-top: 23px;
display: inline-block;
}
.user_tag {
float: right;
color: #505050;
font-size: 16px;
}
.post_item {
background-size: 128px;
padding-left: calc(128px + 12px);
}
.controls {
width: 100%;
display: inline-block;
/*margin-top: 20px;*/
}
.controls > .username {
display: inline-block;
padding-bottom: 0px;
}
.real_username {
margin-right: -8px;
}
.mod_button > button {
font-family: cursive;
font-size: 12px;
color: #202020;
opacity: 0.7;
border: none;
}
.post_item > .mod_button > button:hover {
opacity: 0.9;
}
.mod_button:not(:last-child) {
margin-right: 4px;
}
.like_label:before {
content: "+1";
}
.like_count_label:before {
content: "likes";
}
.like_count_label {
color: #202020;
opacity: 0.7;
font-size: 12px;
}
.like_count {
color: #202020;
opacity: 0.7;
padding-left: 1px;
padding-right: 2px;
font-size: 12px;
}
.like_count:before {
content: "|";
margin-right: 5px;
}
.edit_label:before { content: "Edit"; }
.trash_label:before { content: "Delete"; }
.pin_label:before { content: "Pin"; }
.unpin_label:before { content: "Unpin"; }
.flag_label:before { content: "Flag"; }
.level_label { margin-right: 1px; color: #505050; }
.level_label:before { content: "Level"; opacity:0.85; }
.controls {
margin-top: 23px;
display: inline-block;
width: 100%;
}
.action_item {
padding: 14px;
text-align: center;
background-color: rgb(255,245,245);
}
.postQuote {
border: 1px solid #ccc;
background: white;
padding: 5px;
margin: 0px;
display: inline-block;
width: 100%;
margin-bottom: 8px;
}
.level {
float: right;
border-left: none;
padding-left: 3px;
padding-right: 5px;
font-family: cursive;
font-size: 15px;
color: #202020;
opacity: 0.7;
border: none;
}
.mention {
font-weight: bold;
}
.show_on_edit, .auto_hide, .hide_on_big, .show_on_mobile {
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;
}
.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 {
color: #202020;
opacity: 0.7;
font-size: 12px;
}
#profile_comments .rowitem {
background-repeat: no-repeat, repeat-y;
background-size: 128px;
padding-left: 136px;
}
#profile_left_lane .avatarRow {
padding: 0;
}
#profile_left_pane .nameRow .username {
float: right;
font-weight: normal;
}
#profile_left_pane .report_item:after {
content: "Report";
}
/* Media Queries */
@media(min-width: 881px) {
.shrink_main {
float: left;
width: calc(75% - 12px);
}
.sidebar {
float: left;
width: 25%;
margin-left: 12px;
}
}
@media (max-width: 880px) {
li {
height: 29px;
font-size: 15px;
padding-left: 9px;
padding-top: 2px;
padding-bottom: 6px;
}
ul {
height: 30px;
margin-top: 8px;
}
.menu_left { padding-right: 9px; padding-top: 2px; }
.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; }
.sidebar { display: none; }
.selectedAlert .alertList { top: 37px; right: 4px; }
}
@media (max-width: 810px) {
body { font-family: arial; }
}
@media (max-width: 700px) {
li {
padding-left: 5px;
padding-top: 3px;
padding-bottom: 2px;
height: 25px;
}
li a { font-size: 14px; }
ul { height: 26px; }
.menu_left { padding-right: 5px; padding-top: 1px; }
.menu_right { padding-right: 5px; }
.menu_alerts {
padding-left: 4px;
padding-right: 4px;
font-size: 16px;
padding-top: 1px;
}
.menu_alerts .alert_counter {
top: -23px;
left: 8px;
}
.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: 350px) {
.hide_on_micro { display: none !important; }
}
@media (max-width: 470px) {
#menu_overview, .menu_profile, .hide_on_micro { display: none; }
.selectedAlert .alertList {
width: 135px;
margin-bottom: 5px;
}
.alertItem.withAvatar {
background-size: 36px;
text-align: right;
padding-left: 10px;
height: 46px;
}
.alertItem {
padding: 8px;
}
.alertItem.withAvatar .text {
width: calc(100% - 20px);
height: 30px;
white-space: normal;
}
.alertItem .text {
font-size: 10px;
font-weight: bold;
margin-left: 0px;
}
.post_container { overflow: visible !important; }
.post_item {
background-position: 0px 2px !important;
background-size: 64px auto !important;
padding-left: 2px !important;
min-height: 96px;
position: relative !important;
}
.post_item > .user_content {
margin-left: 75px !important;
width: 100% !important;
min-height: 45px;
}
.post_item > .mod_button {
float: right !important;
margin-left: 2px !important;
position: relative;
top: -14px;
}
.post_item > .mod_button > button { opacity: 1; }
.post_item > .real_username {
position: absolute;
top: 70px;
float: left;
margin-top: -2px;
padding-top: 3px !important;
margin-right: 2px;
width: 60px;
font-size: 15px;
text-align: center;
}
.post_item > .controls {
margin-top: 0px;
margin-left: 74px;
width: calc(100% - 74px);
}
.container { width: 100% !important; }
}
@media (max-width: 330px) {
li { padding-left: 6px; }
.menu_left { padding-right: 6px; }
.menu_alerts { border-left: none; }
}