gosora/themes/shadow/public/main.css
Azareal e22ddfec40 Added support for password resets.
Sha256 hashes are now stored in the SFile structures, this will come of use later.
Rows should be properly closed in DefaultTopicStore.BulkGetMap.
All errors should be properly reported now in DefaultTopicStore.BulkGetMap.
Rows should be properly closed in DefaultUserStore.BulkGetMap.
All errors should be properly reported now in DefaultUserStore.BulkGetMap.
Don't have an account on the login page should now be linkified.
Renamed tempra-simple to tempra_simple to avoid breaking the template transpiler.
Fixed up bits and pieces of login.html on every theme.
Removed an old commented code chunk from template_init.go
widget_wol widgets should now get minified.
bindToAlerts() should now unbind the alert items before attempting to bind to them.
Tweaked the SendValidationEmail phrase.
Removed a layer of indentation from DefaultAuth.ValidateMFAToken and added the ErrNoMFAToken error for when MFA isn't setup on the specified account.
Email validation now uses a constant time compare to mitigate certain classes of timing attacks.

Added the /accounts/password-reset/ route.
Added the /accounts/password-reset/submit/ route.
Added the /accounts/password-reset/token/ route.
Added the /accounts/password-reset/token/submit/ route.
Added the password_resets table.

Added the password_reset_email_fail phrase.
Added the password_reset phrase.
Added the password_reset_token phrase.
Added the password_reset_email_sent phrase.
Added the password_reset_token_token_verified phrase.
Added the login_forgot_password phrase.
Added the password_reset_head phrase.
Added the password_reset_username phrase.
Added the password_reset_button phrase.
Added the password_reset_subject phrase.
Added the password_reset_body phrase.
Added the password_reset_token_head phrase.
Added the password_reset_token_password phrase.
Added the password_reset_token_confirm_password phrase.
Added the password_reset_mfa_token phrase.
Added the password_reset_token_button phrase.

You will need to run the updater or patcher for this commit.
2019-03-11 18:47:45 +10:00

1183 lines
21 KiB
CSS

/* Patch for Edge, until they fix emojis in arial x.x */
@supports (-ms-ime-align:auto) { .user_content { font-family: Segoe UI Emoji, arial; } }
:root {
--main-block-color: rgb(61,61,61);
--main-text-color: white;
--dim-text-color: rgb(205,205,205);
--main-background-color: #222222;
--inner-background-color: #333333;
--input-background-color: #444444;
--input-border-color: #555555;
--input-text-color: #999999;
--bright-input-background-color: #555555;
--bright-input-border-color: #666666;
--input-text-color: #a3a3a3;
}
body {
font-family: arial;
color: var(--main-text-color);
background-color: var(--main-background-color);
margin: 0;
}
*::selection {
background-color: hsl(0,0%,75%);
color: hsl(0,0%,20%);
font-weight: 100;
}
#back {
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: var(--inner-background-color);
position: relative;
top: -2px;
}
#main {
padding-bottom: 5px;
}
ul {
list-style-type: none;
background-color: var(--main-block-color);
border-bottom: 1px solid var(--main-background-color);
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: "{{lang "menu_alerts" . }}";
}
.menu_alerts .alertList, .hide_on_big, .show_on_mobile {
display: none;
}
.auto_hide {
display: none !important;
}
.selectedAlert .alertList {
display: block;
position: absolute;
top: 44px;
float: left;
width: 200px;
z-index: 50;
right: 15%;
font-size: 13px;
background-color: var(--inner-background-color);
}
.alertItem {
margin-bottom: 2px;
}
.alertItem.withAvatar {
height: 40px;
background-size: 48px;
background-repeat: no-repeat;
background-color: var(--main-block-color);
padding-left: 56px;
padding-top: 8px;
}
a {
text-decoration: none;
color: var(--main-text-color);
}
.alertbox {
display: flex;
}
.alert {
padding-bottom: 12px;
background-color: var(--main-block-color);
border-left: 4px solid hsl(21, 100%, 50%);
padding: 12px;
display: block;
margin-top: 8px;
margin-bottom: -3px;
margin-left: 8px;
margin-right: 8px;
width: 100%;
}
.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; /*16px*/
}
.rowblock:last-child, .colstack_item:last-child {
padding-bottom: 10px;
}
.rowitem, .formitem {
padding-bottom: 12px;
background-color: var(--main-block-color);
margin-top: 8px;
padding: 12px;
}
.rowitem h1, .rowitem h2 {
font-size: 16px;
display: inline;
}
h1, h2, h3 {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-top: 0px;
margin-bottom: 0px;
font-weight: normal;
}
.rowsmall {
font-size: 12px;
}
.colstack {
display: flex;
}
.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:not(.edit_opened),
.hide_on_edit.edit_opened,
.show_on_block_edit:not(.edit_opened),
.hide_on_block_edit.edit_opened,
.link_select:not(.link_opened) {
display: none;
}
.colline {
font-size: 14px;
background-color: var(--main-block-color);
margin-top: 5px;
padding: 10px;
}
/* Align to right in a flex head */
.to_right {
float: right;
margin-left: auto;
}
/* Topic View */
/* TODO: How should we handle the sticky headers? */
.topic_sticky_head {
}
/* TODO: Add the avatars to the forum list */
.forum_list .forum_nodesc {
font-style: italic;
}
.extra_little_row_avatar {
display: none;
}
.shift_left {
float: left;
}
.shift_right {
float: right;
}
/* 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);
}
.user_content {
word-break: break-word;
}
.controls {
width: 100%;
display: inline-block;
margin-top: 20px;
}
.staff_post {
border: 1px solid rgb(101, 71, 101)
}
.user_tag {
float: right;
color: var(--dim-text-color);
}
.real_username {
float: left;
margin-right: 7px;
}
.mod_button {
margin-right: 5px;
display: block;
float: left;
}
.mod_button button {
border: none;
background: none;
color: var(--main-text-color);
font-size: 12px;
padding: 0;
}
.like_label:before {
content: "{{lang "topic.plus_one" . }}";
}{{$out := .}}
{{range (toArr "edit" "delete" "pin" "lock" "unlock" "unpin" "ip" "flag")}}
.{{.}}_label:before {
content: "{{lang (concat "topic." . "_button_text") ($out) }}";
}{{end}}
.like_count_label, .like_count {
display: none;
}
.like_count_label:before {
content: "{{lang "topics_likes_suffix" . }}";
}
.has_likes .like_count_label, .has_likes .like_count {
font-size: 12px;
display: block;
float: left;
line-height: 19px;
}
.has_likes .like_count {
margin-right: 2px;
}
.like_count:before {
content: "{{lang "pipe" . }}";
margin-right: 5px;
}
.level_label, .level {
color: var(--dim-text-color);
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;
}
.login_button_row {
display: flex;
}
.login_button_row .formitem > * {
padding-top: 5px;
}
.fall_opts {
display: flex;
}
.dont_have_account {
margin-left: auto;
padding-right: 0px;
}
.dont_have_account:after {
content: "|";
padding-left: 8px;
padding-right: 8px;
}
.forgot_password {
padding-left: 0px;
}
.formitem.dont_have_account, .formitem.forgot_password {
color: #909090;
font-size: 12px;
font-weight: normal;
padding-top: 11px;
}
textarea {
background-color: var(--input-background-color);
border-color: var(--input-border-color);
color: var(--input-text-color);
width: calc(100% - 15px);
min-height: 80px;
}
textarea:focus, input:focus, select:focus, button:focus {
outline-color: rgb(95,95,95);
}
textarea.large {
min-height: 120px;
margin-top: 1px;
padding: 5px;
display: block;
}
.formitem button, .formbutton, .mod_floater_submit, .pane_buttons button {
background-color: var(--input-background-color);
border: 1px solid var(--input-border-color);
color: var(--input-text-color);
padding: 7px;
padding-bottom: 6px;
font-size: 13px;
}
.mod_floater_submit {
padding: 5px;
padding-bottom: 4px;
margin-left: 2px;
}
.pane_buttons button {
padding: 5px;
padding-bottom: 4px;
}
.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;
display: flex;
flex-direction: row;
margin-left: 8px;
margin-bottom: 8px;
}
.pageitem {
background-color: var(--main-block-color);
padding: 10px;
margin-right: 4px;
font-size: 13px;
}
.bgsub {
display: none;
}
.rowlist.bgavatars .rowitem {
background-repeat: no-repeat;
background-size: 40px;
padding-left: 46px;
}
.bgavatars:not(.rowlist) .rowitem {
background-repeat: no-repeat;
background-size: 40px;
padding-left: 46px;
}
.rowlist .formrow, .rowlist .formrow:first-child {
margin-top: 0px;
}
input {
background-color: var(--input-background-color);
border: 1px solid var(--input-border-color);
color: var(--input-text-color);
padding-bottom: 6px;
font-size: 13px;
padding: 5px;
width: calc(100% - 16px);
}
select {
background-color: var(--input-background-color);
border: 1px solid var(--input-border-color);
color: var(--input-text-color);
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;
}
.little_row_avatar {
display: none;
}
.topic_create_form .topic_board_row .formitem, .topic_create_form .topic_name_row .formitem {
padding-bottom: 5px;
}
.topic_create_form input, .topic_create_form select {
padding: 7px;
font-size: 13px;
}
.topic_create_form select {
padding: 6px;
}
.topic_create_form input {
width: calc(100% - 14px);
}
.topic_create_form textarea, .topic_reply_form textarea {
width: calc(100% - 26px);
min-height: 80px;
font-family: arial;
font-size: 14px;
padding: 12px;
}
.topic_create_form textarea {
padding: 7px;
width: calc(100% - 14px);
}
.quick_button_row .formitem, .quick_create_form .upload_file_dock {
display: flex;
}
.quick_create_form .add_file_button, .quick_create_form #add_poll_button {
margin-left: 8px;
}
.quick_create_form .close_form {
margin-left: auto;
}
.quick_create_form .uploadItem {
display: inline-block;
margin-left: 8px;
background-size: 25px 30px;
background-repeat: no-repeat;
padding-left: 30px;
}
.footBlock {
margin-top: -2px;
display: flex;
}
.footer {
width: 70%;
margin-left: auto;
margin-right: auto;
}
.elapsed {
display: none;
}
#poweredByHolder {
background-color: var(--main-block-color);
padding: 10px;
font-size: 14px;
padding-left: 13px;
padding-right: 13px;
clear: left;
height: 25px;
}
#poweredByHolder select {
background-color: var(--input-background-color);
border: 1px solid var(--input-border-color);
color: var(--input-text-color);
font-size: 13px;
padding: 4px;
}
#poweredBy {
float: left;
margin-top: 4px;
}
#poweredBy span {
font-size: 12px;
}
.poll_item {
display: flex;
}
.poll_option {
margin-bottom: 3px;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + label {
display: inline-block;
width: 12px;
height: 12px;
margin-bottom: -2px;
border: 1px solid var(--bright-input-border-color);
background-color: var(--bright-input-background-color);
}
input[type=checkbox]:checked + label .sel {
display: inline-block;
width: 5px;
height: 5px;
background-color: var(--bright-input-background-color);
}
input[type=checkbox] + label.poll_option_label {
width: 14px;
height: 14px;
margin-right: 3px;
background-color: var(--bright-input-background-color);
border: 1px solid var(--bright-input-border-color);
color: var(--bright-input-text-color);
}
input[type=checkbox]:checked + label.poll_option_label .sel {
display: inline-block;
width: 10px;
height: 10px;
margin-left: 3px;
background: var(--bright-input-border-color);
}
.pollinput {
display: flex;
margin-bottom: 8px;
}
.quick_create_form .pollinputlabel {
display: none;
}
/*#poll_option_text_0 {
color: hsl(359,98%,43%);
}*/
.poll_buttons {
margin-top: 12px;
}
.poll_buttons button {
background-color: var(--bright-input-background-color);
border: 1px solid var(--bright-input-border-color);
color: var(--bright-input-text-color);
padding: 7px;
padding-bottom: 6px;
font-size: 13px;
}
.poll_results {
margin-left: auto;
max-height: 120px;
}
/* Forum View */
.rowhead, .opthead, .colstack_head, .rowhead .rowitem {
display: flex;
flex-direction: row;
}
.rowhead:not(.has_opt) .rowitem, .opthead .rowitem, .colstack_head .rowitem {
width: 100%;
}
.optbox {
display: flex;
padding-left: 5px;
padding-top: 10.5px;
margin-top: 7px;
width: 100%;
background-color: var(--main-block-color);
}
.has_opt .rowitem {
margin-right: 0px;
display: inline-block;
padding-right: 0px;
margin-top: 7px;
padding-left: 12px;
padding-top: 12px;
}
.opt a {
font-size: 11px;
}
.topic_list_title_block .pre_opt:before {
content: "{{lang "topics_click_topics_to_select" . }}";
font-size: 14px;
}
.create_topic_opt a:before {
content: "{{lang "topics_new_topic" . }}";
margin-left: 3px;
}
.locked_opt a:before {
content: "{{lang "forum_locked" . }}";
}
.mod_opt a {
margin-left: 4px;
}
.mod_opt a:after {
content: "{{lang "topics_moderate" . }}";
padding-left: 1px;
}
.create_topic_opt {
order: 1;
}
.mod_opt {
order: 2;
}
.pre_opt {
order: 3;
margin-left: auto;
margin-right: 12px;
}
.filter_opt {
display: none;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.mod_floater {
position: fixed;
bottom: 15px;
right: 15px;
width: 150px;
height: 65px;
font-size: 14px;
padding: 14px;
z-index: 9999;
animation: fadein 0.8s;
background-color: var(--main-block-color);
}
.mod_floater_head {
margin-bottom: 8px;
}
.modal_pane {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: var(--main-block-color);
border: 2px solid #333333;
padding-left: 24px;
padding-right: 24px;
z-index: 9999;
animation: fadein 0.8s;
}
.pane_header {
font-size: 15px;
}
.pane_header h3 {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-top: 10px;
margin-bottom: 10px;
font-weight: normal;
}
.pane_row {
font-size: 14px;
margin-bottom: 1px;
}
.pane_selected {
font-weight: bold;
}
.pane_buttons {
margin-top: 7px;
margin-bottom: 8px;
}
.topic_list .topic_row {
display: flex;
}
.topic_selected .rowitem {
background-color: hsla(0, 0%, 29%, 1);
}
/* 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: 100%;
height: 59px;
display: flex;
padding: 0px;
overflow: hidden;
}
.topic_sticky .topic_left .topic_inner_left {
border-top: 4px solid hsl(41, 100%, 50%);
padding-left: 10px;
padding-top: 10px;
margin-top: 0px;
margin-left: 0px;
width: 100%;
}
.topic_list .topic_right {
height: 59px;
margin-left: 8px;
display: flex;
width: 284px;
padding: 0px;
}
.topic_right_inside {
display: flex;
}
.topic_list .topic_left img, .topic_list .topic_right img {
width: 64px;
}
.topic_list .topic_inner_left, .topic_right_inside > span {
margin-left: 8px;
margin-top: 12px;
}
.topic_list .topic_row:last-child {
margin-bottom: 10px;
}
.topic_list .lastReplyAt {
white-space: nowrap;
}
.topic_list .lastReplyAt:before {
content: "{{lang "topics_last" . }}: ";
}
.topic_list .starter:before {
content: "{{lang "topics_starter" . }}: ";
}
.topic_middle {
display: none;
}
.more_topic_block_initial {
display: none;
}
.more_topic_block_active {
display: block;
}
.topic_name_input {
width: 100%;
margin-right: 10px;
background-color: var(--input-background-color);
border: 1px solid var(--input-border-color);
color: var(--input-text-color);
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;
}
.prev_link, .next_link {
display: none;
}
.postImage {
max-width: 100%;
max-height: 200px;/*300px;*/
background-color: rgb(71,71,71);
padding: 10px;
}
/* Profiles */
#profile_left_lane {
width: 220px;
margin-top: 5px;
}
#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_pane .report_item:after {
content: "{{lang "topic.report_button_text" . }}";
}
#profile_left_lane .profileName {
font-size: 18px;
}
#profile_right_lane {
width: calc(100% - 245px);
}
#profile_right_lane .rowitem,
#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;
}
.ip_search_block .rowitem {
display: flex;
flex-direction: row;
}
.ip_search_block input {
background-color: var(--input-background-color);
border: 1px solid var(--input-border-color);
color: var(--input-text-color);
margin-top: -3px;
margin-bottom: -3px;
padding: 4px;
padding-bottom: 3px;
}
.ip_search_input {
font-size: 15px;
width: 100%;
margin-left: 0px;
}
.ip_search_search {
font-size: 14px;
margin-left: 8px;
}
.level_complete, .level_future, .level_inprogress {
display: flex;
}
.progressWrap {
margin-left: auto;
width: auto !important;
}
.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: var(--main-block-color);
}
#panel_dashboard_right .colstack_head .rowitem {
padding: 10px;
}
#panel_dashboard_right .colstack_head .rowitem h1 {
font-size: 15px;
margin-left: auto;
}
#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, .footer {
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);
}
}
@media(max-width: 500px) {
.topic_list .rowitem {
float: none;
}
.topic_list .topic_left {
width: 100%;
}
.topic_list .topic_right {
display: none;
}
#poweredBy span {
display: none;
}
}
@media(max-width: 470px) {
.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;
}
}