gosora/themes/tempra_simple/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

1000 lines
17 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;
}
.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;
}
#back {
display: flex;
}
#main {
width: 100%;
}
.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%);
}
.rowmenu > div:not(:last-child) {
border-bottom: 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);
display: flex;
}
.rowhead .rowitem select, .colstack_head .rowitem select {
padding-top: 2px;
padding-bottom: 2px;
margin-top: -3px;
margin-bottom: -2px;
}
.rowhead h1, .colstack_head h1,
.rowhead h2, .colstack_head h2 {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
margin-block-start: 0;
margin-block-end: 0;
font-weight: normal;
font-size: 16px;
margin-left: 4px;
}
.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;
}
.topic_list_title_block {
display: flex;
}
.has_opt {
border-bottom: 1px solid hsl(0, 0%, 80%);
}
.has_opt .rowitem {
border-right: 1px solid hsl(0, 0%, 80%);
border-bottom: none;
}
.optbox {
margin-left: auto;
}
.opt {
font-size: 32px;
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: '🔒︎';
}
/*.mod_opt a.moderate_link:before {
content: '🔨︎';
}
.mod_opt, .mod_opt a {
color: rgb(120,120,120);
text-decoration: none;
}*/
.filter_opt {
display: none;
}
.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%);
}
.fall_opts {
float: right;
display: flex;
}
.dont_have_account, .forgot_password {
color: #505050;
font-size: 14px;
margin-top: 6px;
border-right: none !important;
}
.dont_have_account:after {
content: "|";
margin-left: 5px;
margin-right: 5px;
}
.dont_have_account {
padding-right: 0px;
}
.forgot_password {
padding-left: 0px;
}
.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 */
.forum_list .forum_nodesc {
font-style: italic;
}
.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: "{{lang "topics_last" . }}: ";
}
.topic_list .starter:before {
content: "{{lang "topics_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_right_inside {
display: flex;
}
.topic_left img, .topic_right_inside img {
width: 64px;
height: auto;
}
.topic_left .topic_inner_left, .topic_right_inside > span {
margin-top: 10px;
margin-left: 8px;
}
.topic_middle {
display: none;
}
.more_topic_block_initial {
display: none;
}
.more_topic_block_active {
display: block;
}
.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 .topic_left, .topic_sticky .topic_right {
background-color: rgb(255,255,234);
}
.topic_closed .topic_left, .topic_closed .topic_right {
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_count_label, .like_count {
display: none;
}
.has_likes .like_count_label, .has_likes .like_count {
display: block;
}
.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: "🖊️";
}
.delete_label:before {
content: "🗑️";
}
.pin_label:before, .unpin_label:before {
content: "📌";
}
.remove_like, .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;
float: right;
}
.level_hideable {
display: none;
}
.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:not(.edit_opened),
.hide_on_edit.edit_opened,
.show_on_block_edit:not(.edit_opened),
.hide_on_block_edit.edit_opened,
.auto_hide,
.hide_on_big,
.show_on_mobile,
.link_select:not(.link_opened) {
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;
}
/* TODO: Can we just set .alert on the alert_success and .alert_error ones? */
.alert, .alert_success, .alert_error {
display: block;
padding: 5px;
margin-bottom: 10px;
}
.alert {
border: 1px solid hsl(0, 0%, 80%);
}
.alert_success {
border: 1px solid #A2FC00;
background-color: #DAF7A6;
}
.alert_error {
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: 1px solid hsl(0,0%,80%);
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;
padding: 2px;
}
.prev_button {
left: 14px;
}
.next_button {
right: 14px;
}
.head_tag_upshift {
float: right;
position: relative;
top: -2px;
}
.elapsed {
display: none;
}
#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;
}
.sidebar .rowhead:not(:first-child) {
margin-top: 12px;
}
.widget_search {
margin-bottom: 8px;
}
#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: "{{lang "topic.report_button_text" . }}";
}
#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;
}
.level_complete, .level_future, .level_inprogress {
display: flex;
}
#profile_left_pane .level_hideable, .levelBit .level_hideable {
display: inline;
}
.progressWrap {
margin-left: auto;
width: auto !important;
}
{{template "media.partial.css" }}