gosora/themes/shadow/public/main.css

807 lines
13 KiB
CSS
Raw Normal View History

/* Patch for Edge, until they fix emojis in arial x.x */
@supports (-ms-ime-align:auto) { .user_content { font-family: Segoe UI Emoji, arial; } }
body {
font-family: arial;
color: white;
background-color: #222222;
margin: 0;
}
#back {
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: #333333;
position: relative;
top: -2px;
}
ul {
list-style-type: none;
background-color: rgb(61,61,61);
border-bottom: 1px solid #222222;
padding-left: 15%;
padding-right: 15%;
margin: 0;
height: 41px;
}
li {
float: left;
height: 29.5px;
padding-top: 12px;
margin: 0;
}
.menu_left {
margin-right: 10px;
}
.menu_right {
float: right;
}
.menu_overview {
margin-right: 13px;
margin-left: 10px;
font-size: 16px;
}
.menu_left:not(.menu_overview) {
font-size: 15px;
padding-top: 13px;
}
.alert_bell {
float: right;
}
.menu_alerts {
float: right;
padding-top: 14px;
}
.alert_counter {
background-color: rgb(200,0,0);
border-radius: 2px;
font-size: 11px;
padding: 3px;
float: right;
position: relative;
top: -1px;
}
.alert_aftercounter {
float: right;
margin-right: 4px;
font-size: 14px;
}
.alert_aftercounter:before {
content: "Alerts";
}
.menu_alerts .alertList {
display: none;
}
.selectedAlert .alertList {
display: block;
position: absolute;
top: 44px;
float: left;
width: 200px;
z-index: 50;
right: 15%;
font-size: 13px;
background-color: #333333;
}
.alertItem {
margin-bottom: 2px;
}
.alertItem.withAvatar {
height: 40px;
background-size: 48px;
background-repeat: no-repeat;
background-color: rgb(61,61,61);
padding-left: 56px;
padding-top: 8px;
}
a {
text-decoration: none;
color: white;
}
.alert {
padding-bottom: 12px;
background-color: rgb(61,61,61);
padding: 12px;
display: block;
}
.rowblock {
margin-left: 8px;
margin-right: 8px;
}
.opthead, .rowhead, .colstack_head {
padding-bottom: 0px;
padding-top: 3px !important;
white-space: nowrap;
}
.rowblock:not(.opthead):not(.colstack_head):not(.rowhead) .rowitem {
font-size: 15px;
}
.rowblock:last-child, .colstack_item:last-child {
padding-bottom: 10px;
}
.rowitem, .formitem {
padding-bottom: 12px;
background-color: rgb(61,61,61);
margin-top: 8px;
padding: 12px;
}
.rowitem h1 {
font-size: 16px;
font-weight: normal;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
display: inline;
}
.rowsmall {
font-size: 12px;
}
.colstack_left, .colstack_right {
margin-left: 8px;
}
.colstack_left {
float: left;
width: 30%;
}
.colstack_right {
float: left;
width: calc(70% - 24px);
}
.colstack_left:empty, .colstack_right:empty, .show_on_edit {
display: none;
}
.colline {
font-size: 14px;
background-color: rgb(61,61,61);
margin-top: 5px;
padding: 10px;
}
/* Topic View */
/* TODO: How should we handle the sticky headers? */
.topic_sticky_head {
}
/* TODO: Rewrite the closed topic header so that it looks more consistent with the rest of the theme */
.topic_closed_head .topic_status_closed {
margin-bottom: -10px;
font-size: 19px;
}
.post_item {
background-size: 128px;
padding-left: calc(128px + 12px);
}
.controls {
width: 100%;
display: inline-block;
margin-top: 20px;
}
.staff_post {
border: 1px solid rgb(101, 71, 101)
}
.user_tag {
float: right;
color: rgb(205,205,205);
}
.real_username {
float: left;
margin-right: 7px;
}
.mod_button {
margin-right: 5px;
display: block;
float: left;
}
.mod_button button {
border: none;
background: none;
color: white;
font-size: 12px;
padding: 0;
}
.like_label:before {
content: "+1";
}
.edit_label:before {
content: "Edit";
}
.trash_label:before {
content: "Delete";
}
.pin_label:before {
content: "Pin";
}
.lock_label:before {
content: "Lock";
}
.unlock_label:before {
content: "Unlock";
}
.unpin_label:before {
content: "Unpin";
}
.ip_label:before {
content: "IP";
}
.flag_label:before {
content: "Flag";
}
.level_label:before {
content: "Level";
}
.like_count_label:before {
content: "likes";
}
.like_count_label {
font-size: 12px;
display: block;
float: left;
line-height: 19px;
}
.like_count {
font-size: 12px;
display: block;
float: left;
line-height: 19px;
margin-right: 2px;
}
.like_count:before {
content: "|";
margin-right: 5px;
}
.level_label, .level {
color: rgb(205,205,205);
float: right;
}
.level {
margin-left: 3px;
}
.formrow.real_first_child, .formrow:first-child {
margin-top: 8px;
}
.formrow.real_first_child .formitem, .formrow:first-child .formitem {
padding-top: 12px;
}
.formrow:last-child .formitem {
padding-bottom: 12px;
}
textarea {
background-color: #444444;
border-color: #555555;
Added support for HTTP/2 Push. The themes are still going to be a little broken for a while, but here's the progress I've made. Renamed the topics_trow_assign hook to topics_topic_row_assign. Added more debug code to the generated router. Added a robots.txt file. Gosora now responds to favicon.ico requests with a 404 rather than the topic list. Fixed the tests and some of the benchmarks. Changed the default UserCacheCapacity from 100 to 120. Changed the default TopicCacheCapacity from 100 to 200. Added the last replyer to the topics list and the forum pages. Added the BulkCascadeGetMap method to the UserStore. Refactored the topics list and forum page to load the users with a call to the UserStore rather than via a join. WebSockets now work on SSL. Fixed a race condition when the user permissions are initialised at the start of a request. Fixed a race condition when the user permissions for the OP of a topic are initialised. The rows.Close() calls are deferred once more, so that we can catch problems with recover() Improved support for struct pointers in the template compiler. Added a pin emoji to pinned topics to make them stand-out on the Shadow theme, we have some other ideas in mind for this, but I'd like to get Shadow fully functional for this commit. Fixed a bug an issue with Chrome not detecting XHTML style closes on <form>s. Fixed a visual issue with `color` not being set for textarea elements for the Shadow theme. Fixed a function which wasn't getting renamed for PGSQL. Added seven new UserStore tests.
2017-08-06 15:22:18 +00:00
color: #999999;
width: calc(100% - 15px);
min-height: 80px;
}
textarea:focus, input:focus, select:focus {
outline-color: rgb(95,95,95);
}
textarea.large {
min-height: 120px;
margin-top: 1px;
padding: 5px;
display: block;
}
.topic_reply_form textarea {
width: calc(100% - 5px);
min-height: 80px;
}
.formitem button, .formbutton {
background-color: #444444;
border: 1px solid #555555;
color: #999999;
padding: 7px;
padding-bottom: 6px;
font-size: 13px;
}
.formrow {
flex-direction: row;
display: flex;
}
.formitem {
margin-top: 0px;
padding-bottom: 2px;
padding-top: 3px;
flex-grow: 2;
}
.formlabel {
flex-grow: 0;
width: 20%;
padding-top: 9px;
}
/* If the form label is on the right */
.formlabel:not(:first-child) {
font-size: 15px;
flex-grow: 2;
}
.formrow.real_first_child .formlabel, .formrow:first-child .formlabel {
padding-top: 17px;
}
/* Too big compared to the other items in the Control Panel and Account Panel */
/*.colstack_item .formrow.real_first_child, .colstack_item .formrow:first-child {
margin-top: 8px;
}*/
.colstack_item .formrow.real_first_child, .colstack_item .formrow:first-child {
margin-top: 3px;
}
.thin_margins .formrow.real_first_child, .thin_margins .formrow:first-child {
margin-top: 5px;
}
.formitem a {
font-size: 14px;
}
.rowmenu .rowitem, .rowlist .rowitem, .rowlist .formitem {
margin-top: 3px;
font-size: 13px;
padding: 10px;
}
.menu_stats {
font-size: 12px;
}
/* Mini paginators aka panel paginators */
.pageset {
margin-top: 4px;
clear: both;
height: 32px;
}
.pageitem {
background-color: rgb(61,61,61);
padding: 10px;
margin-right: 4px;
font-size: 13px;
float: left;
}
.rowlist.bgavatars .rowitem {
background-repeat: no-repeat;
background-size: 40px;
padding-left: 46px;
}
.rowlist .formrow, .rowlist .formrow:first-child {
margin-top: 0px;
}
.formitem input {
background-color: #444444;
border: 1px solid #555555;
color: #999999;
padding-bottom: 6px;
font-size: 13px;
padding: 5px;
width: calc(100% - 16px);
}
.formitem select {
background-color: #444444;
border: 1px solid #555555;
color: #999999;
font-size: 13px;
padding: 4px;
}
.rowlist .formitem select {
padding: 2px;
font-size: 11px;
margin-top: -5px;
}
input, select, textarea {
caret-color: rgb(95,95,95);
}
.form_middle_button {
margin-left: auto;
margin-right: auto;
display: block;
margin-top: 5px;
}
.footer {
background-color: rgb(61,61,61);
margin-top: 5px;
padding: 10px;
font-size: 14px;
padding-left: 13px;
padding-right: 13px;
clear: left;
height: 25px;
}
.footer select {
background-color: #444444;
border: 1px solid #555555;
color: #999999;
font-size: 13px;
padding: 4px;
}
#poweredBy {
float: left;
margin-top: 4px;
}
#poweredBy span {
font-size: 12px;
}
/* Forum View */
.rowhead {
display: flex;
flex-direction: row;
}
.has_opt {
margin-right: 0px;
display: inline-block;
float: left;
padding-right: 0px;
}
.rowhead .rowitem:not(.has_opt) {
width: 100%;
}
.opt {
float: left;
margin-top: 8px;
height: 30.4px;
padding-left: 5px;
width: 100%;
background-color: rgb(61,61,61);
padding-top: 11px;
}
.opt a {
font-size: 11px;
}
.create_topic_opt a:before {
content: "New Topic";
}
.locked_opt a:before {
content: "Locked";
}
Added support for HTTP/2 Push. The themes are still going to be a little broken for a while, but here's the progress I've made. Renamed the topics_trow_assign hook to topics_topic_row_assign. Added more debug code to the generated router. Added a robots.txt file. Gosora now responds to favicon.ico requests with a 404 rather than the topic list. Fixed the tests and some of the benchmarks. Changed the default UserCacheCapacity from 100 to 120. Changed the default TopicCacheCapacity from 100 to 200. Added the last replyer to the topics list and the forum pages. Added the BulkCascadeGetMap method to the UserStore. Refactored the topics list and forum page to load the users with a call to the UserStore rather than via a join. WebSockets now work on SSL. Fixed a race condition when the user permissions are initialised at the start of a request. Fixed a race condition when the user permissions for the OP of a topic are initialised. The rows.Close() calls are deferred once more, so that we can catch problems with recover() Improved support for struct pointers in the template compiler. Added a pin emoji to pinned topics to make them stand-out on the Shadow theme, we have some other ideas in mind for this, but I'd like to get Shadow fully functional for this commit. Fixed a bug an issue with Chrome not detecting XHTML style closes on <form>s. Fixed a visual issue with `color` not being set for textarea elements for the Shadow theme. Fixed a function which wasn't getting renamed for PGSQL. Added seven new UserStore tests.
2017-08-06 15:22:18 +00:00
/* Temporary hack, so that I don't break the topic lists of the other themes */
.topic_list .topic_inner_right {
display: none;
}
.topic_list .rowitem {
float: left;
overflow: hidden;
}
.topic_list .topic_left {
width: calc(100% - 284px);
}
.topic_list .topic_right {
height: 35px;
margin-left: 8px;
width: 108px;
}
.topic_list .rowitem:last-child {
margin-bottom: 10px;
}
.topic_list .lastReplyAt {
white-space: nowrap;
}
Added support for HTTP/2 Push. The themes are still going to be a little broken for a while, but here's the progress I've made. Renamed the topics_trow_assign hook to topics_topic_row_assign. Added more debug code to the generated router. Added a robots.txt file. Gosora now responds to favicon.ico requests with a 404 rather than the topic list. Fixed the tests and some of the benchmarks. Changed the default UserCacheCapacity from 100 to 120. Changed the default TopicCacheCapacity from 100 to 200. Added the last replyer to the topics list and the forum pages. Added the BulkCascadeGetMap method to the UserStore. Refactored the topics list and forum page to load the users with a call to the UserStore rather than via a join. WebSockets now work on SSL. Fixed a race condition when the user permissions are initialised at the start of a request. Fixed a race condition when the user permissions for the OP of a topic are initialised. The rows.Close() calls are deferred once more, so that we can catch problems with recover() Improved support for struct pointers in the template compiler. Added a pin emoji to pinned topics to make them stand-out on the Shadow theme, we have some other ideas in mind for this, but I'd like to get Shadow fully functional for this commit. Fixed a bug an issue with Chrome not detecting XHTML style closes on <form>s. Fixed a visual issue with `color` not being set for textarea elements for the Shadow theme. Fixed a function which wasn't getting renamed for PGSQL. Added seven new UserStore tests.
2017-08-06 15:22:18 +00:00
.topic_item {
display: flex;
}
.topic_name_input {
width: 100%;
margin-right: 10px;
background-color: #444444;
border: 1px solid #555555;
color: #999999;
padding-bottom: 6px;
font-size: 13px;
padding: 5px;
}
.topic_item .submit_edit {
margin-left: auto;
}
.topic_item .topic_status_closed {
margin-left: auto;
position: relative;
top: -5px;
}
/* Profiles */
#profile_left_lane {
width: 220px;
margin-top: 5px;
}
#profile_left_lane .avatarRow {
overflow: hidden;
max-height: 220px;
}
#profile_left_lane .avatar {
width: 100%;
margin: 0;
display: block;
}
#profile_left_lane .username {
font-size: 14px;
display: block;
margin-top: 3px;
}
#profile_left_lane .profileName {
font-size: 18px;
}
#profile_right_lane {
width: calc(100% - 245px);
}
#profile_right_lane .rowitem {
margin-top: 5px;
}
#profile_right_lane .colstack_item .formrow.real_first_child, #profile_right_lane .colstack_item .formrow:first-child {
margin-top: 5px;
}
.simple .user_tag {
font-size: 14px;
}
/* TODO: Have a has_avatar class for profile comments and topic replies to allow posts without avatars? Won't that look inconsistent next to everything else for just about every theme though? */
#profile_comments .rowitem {
background-repeat: no-repeat, repeat-y;
background-size: 128px;
padding-left: 136px;
}
Added support for HTTP/2 Push. The themes are still going to be a little broken for a while, but here's the progress I've made. Renamed the topics_trow_assign hook to topics_topic_row_assign. Added more debug code to the generated router. Added a robots.txt file. Gosora now responds to favicon.ico requests with a 404 rather than the topic list. Fixed the tests and some of the benchmarks. Changed the default UserCacheCapacity from 100 to 120. Changed the default TopicCacheCapacity from 100 to 200. Added the last replyer to the topics list and the forum pages. Added the BulkCascadeGetMap method to the UserStore. Refactored the topics list and forum page to load the users with a call to the UserStore rather than via a join. WebSockets now work on SSL. Fixed a race condition when the user permissions are initialised at the start of a request. Fixed a race condition when the user permissions for the OP of a topic are initialised. The rows.Close() calls are deferred once more, so that we can catch problems with recover() Improved support for struct pointers in the template compiler. Added a pin emoji to pinned topics to make them stand-out on the Shadow theme, we have some other ideas in mind for this, but I'd like to get Shadow fully functional for this commit. Fixed a bug an issue with Chrome not detecting XHTML style closes on <form>s. Fixed a visual issue with `color` not being set for textarea elements for the Shadow theme. Fixed a function which wasn't getting renamed for PGSQL. Added seven new UserStore tests.
2017-08-06 15:22:18 +00:00
.colstack_grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 3px;
grid-gap: 3px;
text-align: center;
}
.grid_stat, .grid_istat {
padding-top: 10px;
padding-bottom: 10px;
font-size: 13px;
background-color: rgb(61,61,61);
}
#panel_dashboard_right .colstack_head .rowitem {
padding: 10px;
}
#panel_dashboard_right .colstack_head a {
text-align: center;
width: 100%;
display: block;
font-size: 15px;
}
@media(max-width: 935px) {
.simple .user_tag {
display: none;
}
#profile_left_lane {
width: 160px;
}
#profile_left_lane .avatarRow {
max-height: 160px;
}
#profile_left_lane .profileName {
font-size: 16px;
}
#profile_right_lane {
width: calc(100% - 185px);
}
}
@media(max-width: 830px) {
ul {
padding-left: 10px;
padding-right: 0px;
height: 35px;
}
li {
height: 26px;
}
.menu_overview {
margin-right: 9px;
margin-left: 0px;
font-size: 15px;
width: 32px;
text-align: center;
}
.menu_left {
margin-right: 7px;
}
.menu_left:not(.menu_overview) {
font-size: 13px;
padding-top: 10px;
}
.menu_alerts {
padding-top: 9px;
float: left;
margin-right: 6px;
}
.alert_counter {
border-radius: 8px;
font-size: 0px;
color: #c80000;
left: 2px;
}
.alert_aftercounter {
float: none;
margin-right: 0px;
font-size: 13px;
padding-top: 1.5px;
}
.has_alerts .alert_aftercounter {
position: relative;
top: -5px;
}
.menu_alerts:not(.has_alerts) .alert_counter {
display: none;
}
.selectedAlert .alertList {
right: 10px;
top: 42px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.alertItem.withAvatar {
height: 28px;
background-size: 38px;
padding-left: 46px;
padding-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
}
#back {
width: calc(100% - 20px);
}
.opthead, .rowhead, .colstack_head {
padding-top: 0px !important;
font-size 15px;
}
.rowblock:not(.opthead):not(.colstack_head):not(.rowhead) .rowitem {
font-size: 14px;
}
.rowsmall {
font-size: 11px;
}
@media(min-width: 400px) {
ul {
height: 40px;
}
.menu_overview {
font-size: 16px;
}
.menu_left:not(.menu_overview) {
font-size: 14px;
padding-top: 13px;
}
.alert_aftercounter {
font-size: 14px;
padding-top: 4px;
}
}
}
@media(max-width: 520px) {
.user_tag, .level_label, .level {
display: none;
}
#profile_left_lane {
width: 100px;
}
#profile_comments .rowitem {
background-size: 80px;
padding-left: calc(80px + 12px);
}
#profile_left_lane .avatarRow {
max-height: 100px;
}
#profile_right_lane {
width: calc(100% - 125px);
}
}
Added support for HTTP/2 Push. The themes are still going to be a little broken for a while, but here's the progress I've made. Renamed the topics_trow_assign hook to topics_topic_row_assign. Added more debug code to the generated router. Added a robots.txt file. Gosora now responds to favicon.ico requests with a 404 rather than the topic list. Fixed the tests and some of the benchmarks. Changed the default UserCacheCapacity from 100 to 120. Changed the default TopicCacheCapacity from 100 to 200. Added the last replyer to the topics list and the forum pages. Added the BulkCascadeGetMap method to the UserStore. Refactored the topics list and forum page to load the users with a call to the UserStore rather than via a join. WebSockets now work on SSL. Fixed a race condition when the user permissions are initialised at the start of a request. Fixed a race condition when the user permissions for the OP of a topic are initialised. The rows.Close() calls are deferred once more, so that we can catch problems with recover() Improved support for struct pointers in the template compiler. Added a pin emoji to pinned topics to make them stand-out on the Shadow theme, we have some other ideas in mind for this, but I'd like to get Shadow fully functional for this commit. Fixed a bug an issue with Chrome not detecting XHTML style closes on <form>s. Fixed a visual issue with `color` not being set for textarea elements for the Shadow theme. Fixed a function which wasn't getting renamed for PGSQL. Added seven new UserStore tests.
2017-08-06 15:22:18 +00:00
@media(max-width: 500px) {
.topic_list .topic_inner_right {
display: block;
}
.topic_list .rowitem {
float: none;
}
.topic_list .topic_left {
width: calc(100% - 84px);
}
.topic_list .topic_right {
display: none;
}
}
@media(max-width: 470px) {
.menu_create_topic, .like_count_label, .like_count {
display: none;
}
.post_item {
background-size: 100px;
padding-left: calc(100px + 12px);
}
}
@media(max-width: 370px) {
.menu_profile {
display: none;
}
.post_item {
background-size: 80px;
padding-left: calc(80px + 12px);
}
.controls {
margin-top: 14px;
}
#profile_comments .rowitem {
background-image: none !important;
padding-left: 10px !important;
}
}
@media(max-width: 324px) {
ul {
padding-left: 5px;
}
}