gosora/themes/tempra-simple/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

926 lines
15 KiB
CSS

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
font-family: arial;
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 hsl(0, 0%, 80%);
background-color: rgb(252,252,252);
margin-bottom: 12px;
}
li {
height: 35px;
padding-left: 10px;
padding-top: 8px;
padding-bottom: 8px;
background: white;
border-bottom: 1px solid hsl(0, 0%, 80%);
}
li:hover { background: rgb(252,252,252); }
li a {
text-decoration: none;
color: black;
font-size: 17px;
}
.menu_left {
float: left;
border-right: 1px solid hsl(0, 0%, 80%);
padding-right: 10px;
}
.menu_right {
float: right;
border-left: 1px solid hsl(0, 0%, 80%);
padding-right: 10px;
}
#menu_overview {
background: none;
padding-right: 13px;
}
#menu_overview a {
padding-left: 3px;
}
#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 {
/*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;
}
.selectedAlert .alert_counter { display: none; }
.menu_alerts .alertList {
display: none;
z-index: 500;
}
.selectedAlert .alertList {
position: absolute;
top: 51px;
display: block;
background: white;
font-size: 10px;
line-height: 16px;
width: 300px;
right: calc(5% + 7px);
border-top: 1px solid hsl(0, 0%, 80%);
border-left: 1px solid hsl(0, 0%, 80%);
border-right: 1px solid hsl(0, 0%, 80%);
border-bottom: 1px solid hsl(0, 0%, 80%);
margin-bottom: 10px;
}
.alertItem {
padding: 8px;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 17px;
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 hsl(0, 0%, 80%);
width: 100%;
padding: 0px;
padding-top: 0px;
}
.rowblock:empty {
display: none;
}
.rowmenu {
border: 1px solid hsl(0, 0%, 80%);
}
.rowsmall {
font-size: 12px;
}
.colstack_left {
float: left;
width: 30%;
margin-right: 8px;
}
.colstack_right {
float: left;
width: 65%;
width: calc(70% - 15px);
}
.colstack_item {
border: 1px solid hsl(0, 0%, 80%);
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: 12px;
margin-left: 5px;
margin-top: 2px;
}
.grid_item {
border: 1px solid hsl(0, 0%, 80%);
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: 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;
}
.rowhead .rowitem, .colstack_head .rowitem {
background-color: rgb(252,252,252);
}
.rowhead h1, .colstack_head h1 {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
margin-block-start: 0;
margin-block-end: 0;
font-weight: normal;
font-size: 16px;
}
.rowitem {
width: 100%;
padding-left: 10px;
padding-top: 14px;
padding-bottom: 12px;
padding-right: 10px;
background-color: white;
}
.rowitem:not(:last-child) {
border-bottom: 1px solid hsl(0,0%,85%);
}
.rowitem a {
text-decoration: none;
color: black;
}
.rowitem a:hover {
color: silver;
}
.top_post {
margin-bottom: 12px;
}
.opthead {
display: none;
}
.rowitem.has_opt {
float: left;
width: calc(100% - 50px);
border-right: 1px solid hsl(0, 0%, 80%);
border-bottom: none;
}
.opt {
float: left;
font-size: 32px;
height: 100%;
background-color: white;
width: 50px;
text-align: center;
}
.create_topic_opt a.create_topic_link:before {
content: '🖊︎';
}
.create_topic_opt, .create_topic_opt a {
color: rgb(120,120,120);
text-decoration: none;
}
.locked_opt {
color: rgb(80,80,80);
}
.locked_opt:before {
content: '🔒︎';
}
.to_right {
margin-left: auto;
float: right;
}
.rowlist {
font-size: 15px;
}
.datarow, .rowlist .rowitem {
padding-top: 10px;
padding-bottom: 10px;
}
.bgsub {
display: none;
}
.bgavatars .rowitem {
background-repeat: no-repeat;
background-size: 40px;
padding-left: 46px;
}
.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 hsl(0, 0%, 80%); }
.formitem {
float: left;
padding: 10px;
min-width: 20%;
font-weight: normal;
}
.formitem:not(:last-child) {
border-right: 1px dotted hsl(0, 0%, 80%);
}
.formitem.invisible_border {
border: none;
}
input, select {
padding: 3px;
}
/* Mostly for textareas */
.formitem:only-child {
width: 100%;
}
.formitem:only-child select {
padding: 1px;
margin-top: -1px;
margin-bottom: -1px;
}
.formitem textarea {
width: 100%;
height: 100px;
outline-color: #8e8e8e;
}
.formitem:has-child() {
margin: 0 auto;
float: none;
}
.formitem:not(:only-child).formlabel {
padding-top: 15px;
padding-bottom: 12px;
}
.formbutton, button, input[type="submit"] {
background: white;
border: 1px solid #8e8e8e;
}
.formbutton {
padding: 7px;
display: block;
margin-left: auto;
margin-right: auto;
font-size: 15px;
}
.formbutton, ip_search_search {
border-color: hsl(0, 0%, 80%);
}
.dont_have_account {
color: #505050;
font-size: 12px;
font-weight: normal;
float: right;
}
.ip_search_block {
border-bottom: none;
}
.ip_search_block .rowitem {
display: flex;
}
.ip_search_input {
width: 100%;
}
.ip_search_search {
margin-left: 10px;
}
/* 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 {
border-bottom: none;
}
.topic_list .topic_row {
display: grid;
grid-template-columns: calc(100% - 204px) 204px;
}
.topic_list .rowitem {
border-bottom: 1px solid hsl(0,0%,85%);
}
.topic_list .topic_inner_right {
display: none;
}
.topic_list .lastReplyAt {
white-space: nowrap;
}
.topic_list .lastReplyAt:before {
content: "Last: ";
}
.topic_list .starter:before {
content: "Starter: ";
}
@supports not (display: grid) {
.topic_list .rowitem {
float: left;
overflow: hidden;
}
.topic_list .topic_left {
width: calc(100% - 204px);
}
.topic_list .topic_right {
width: 204px;
}
}
.topic_left, .topic_right {
display: flex;
padding: 0px;
height: 58px;
overflow: hidden;
}
.topic_left img, .topic_right img {
width: 64px;
height: auto;
}
.topic_left .topic_inner_left, .topic_right > span {
margin-top: 10px;
margin-left: 8px;
}
.postImage {
max-width: 100%;
max-height: 200px;
background-color: white;
padding: 10px;
}
.little_row_avatar {
display: none;
}
.quick_create_form .quick_button_row .formitem {
display: flex;
}
.quick_create_form .formbutton:first-child {
margin-left: 0px;
margin-right: 5px;
}
.quick_create_form .formbutton:not(:first-child) {
margin-left: 0px;
margin-right: 5px;
}
.quick_create_form .formbutton:last-child {
margin-left: auto;
}
.quick_create_form .upload_file_dock {
display: flex;
}
.quick_create_form .uploadItem {
display: inline-block;
margin-left: 8px;
margin-right: 8px;
background-size: 25px 35px;
background-repeat: no-repeat;
padding-left: 30px;
}
.username, .panel_tag {
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: solid;
border-color: hsl(0, 0%, 80%);
border-width: 1px;
font-size: 15px;
}
.topic_item {
display: flex;
}
.topic_status_sticky {
display: none;
}
.topic_status_closed {
margin-left: auto;
margin-top: -5px;
font-size: 0.90em;
margin-bottom: -2px;
}
.topic_sticky {
background-color: rgb(255,255,234);
}
.topic_closed {
background-color: rgb(248,248,248);
}
.topic_sticky_head {
background-color: #FFFFEA;
}
.topic_closed_head {
background-color: #eaeaea;
}
.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;
}
button.username {
position: relative;
top: -0.25px;
}
.username.level {
color: #303030;
}
.username.real_username {
color: #404040;
font-size: 16px;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
}
.username.real_username:hover {
color: black;
}
.post_item > .username {
margin-top: 20px;
display: inline-block;
}
.post_item > .mod_button > button {
font-size: 15px;
color: #202020;
opacity: 0.7;
}
.post_item > .mod_button > button:hover {
opacity: 0.9;
}
.user_tag {
float: right;
color: #505050;
font-size: 16px;
}
.post_item {
background-size: 128px;
padding-left: 136px;
}
.staff_post {
background-color: #ffeaff;
}
.mod_button {
margin-right: 4px;
}
.like_label:before, .like_count_label:before {
content: "😀";
}
.like_count_label {
color: #505050;
float: right;
opacity: 0.85;
margin-left: 5px;
}
.like_count {
float: right;
color: #505050;
border-left: none;
padding-left: 5px;
padding-right: 5px;
font-size: 17px;
}
.edit_label:before {
content: "🖊️";
}
.trash_label:before {
content: "🗑️";
}
.pin_label:before, .unpin_label:before {
content: "📌";
}
.unpin_label, .unlock_label {
background-color: #D6FFD6;
}
.lock_label:before, .unlock_label:before {
content: "🔒";
}
.ip_label:before {
content: "🔍";
}
.flag_label:before {
content: "🚩";
}
.level_label:before {
content: "👑";
}
.level_label {
color: #505050;
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 hsl(0, 0%, 80%);
background: white;
padding: 5px;
margin: 0px;
display: inline-block;
width: 100%;
margin-bottom: 8px;
}
.level {
float: right;
color: #505050;
border-left: none;
padding-left: 5px;
padding-right: 5px;
font-size: 17px;
}
.mention {
font-weight: bold;
}
.show_on_edit, .auto_hide, .hide_on_big, .show_on_mobile {
display: none;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + label {
display: inline-block;
width: 12px;
height: 12px;
margin-bottom: -2px;
border: 1px solid hsl(0, 0%, 80%);
background-color: white;
}
input[type=checkbox]:checked + label .sel {
display: inline-block;
width: 5px;
height: 5px;
background-color: white;
}
input[type=checkbox] + label.poll_option_label {
width: 18px;
height: 18px;
margin-right: 2px;
background-color: white;
border: 1px solid hsl(0, 0%, 70%);
color: #505050;
}
input[type=checkbox]:checked + label.poll_option_label .sel {
display: inline-block;
width: 10px;
height: 10px;
margin-left: 3px;
background: hsl(0,0%,70%);
}
.poll_option {
margin-bottom: 1px;
}
.poll_item {
display: flex;
padding-left: 8px;
background: none !important;
}
.poll_buttons button {
margin-top: 8px;
padding: 5px;
padding-top: 3px;
padding-bottom: 3px;
border: 1px solid hsl(0, 0%, 70%);
}
.poll_results {
margin-left: auto;
}
.quick_create_form .pollinputlabel {
display: none;
}
.alert {
display: block;
padding: 5px;
margin-bottom: 10px;
border: 1px solid hsl(0, 0%, 80%);
}
.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 {
float: right;
position: relative;
top: -2px;
}
#poweredByHolder {
border: 1px solid hsl(0, 0%, 80%);
margin-top: 12px;
clear: both;
height: 40px;
padding: 6px;
padding-left: 10px;
padding-right: 10px;
}
#poweredByHolder select {
padding: 2px;
margin-top: 1px;
}
#poweredBy {
float: left;
margin-top: 4px;
}
#poweredBy span {
font-size: 12px;
}
#poweredByName {
color: black;
text-decoration: none;
}
#profile_comments .rowitem {
background-repeat: no-repeat, repeat-y;
background-size: 128px;
padding-left: 136px;
}
/* Profiles */
#profile_left_lane {
width: 220px;
}
#profile_left_pane {
margin-bottom: 12px;
}
#profile_left_lane .avatarRow {
overflow: hidden;
max-height: 220px;
padding: 0;
}
#profile_left_lane .avatar {
width: 100%;
margin: 0;
display: block;
}
#profile_left_lane .username {
font-size: 14px;
display: block;
margin-top: 3px;
}
#profile_left_pane .nameRow .username {
float: right;
font-weight: normal;
}
#profile_left_lane .profileName {
font-size: 18px;
}
#profile_left_lane .report_item:after {
content: "Report";
}
#profile_right_lane {
width: calc(100% - 245px);
}
#profile_comments {
overflow: hidden;
border-top: none;
margin-bottom: 0;
}
.simple .user_tag {
font-size: 14px;
}
.pageset {
display: flex;
margin-bottom: 10px;
margin-top: 8px;
}
.pageitem {
background-color: white;
padding: 5px;
margin-right: 5px;
padding-bottom: 4px;
border: 1px solid hsl(0, 0%, 80%);
}
.pageitem a {
color: black;
text-decoration: none;
}
.colstack_right .pageset {
margin-top: -5px;
}
{{template "media.partial.css" }}