forked from e621ng/e621ng
[CSS] Clean up colors and implement colorblind palettes (#682)
This commit is contained in:
Cinder
parent
961cfa351c
commit
7bdabdf2b4
@ -2,7 +2,7 @@
|
||||
|
||||
module TagsHelper
|
||||
def format_transitive_item(transitive)
|
||||
html = "<strong class=\"redtext\">#{transitive[0].to_s.titlecase}</strong> ".html_safe
|
||||
html = "<strong class=\"text-error\">#{transitive[0].to_s.titlecase}</strong> ".html_safe
|
||||
if transitive[0] == :alias
|
||||
html << "#{transitive[2]} -> #{transitive[3]} will become #{transitive[2]} -> #{transitive[4]}"
|
||||
else
|
||||
|
||||
@ -4,10 +4,10 @@ module TakedownsHelper
|
||||
def pretty_takedown_status(takedown)
|
||||
status = takedown.status.capitalize
|
||||
classes = {
|
||||
"inactive" => "sect_grey",
|
||||
"denied" => "sect_red",
|
||||
"partial" => "sect_green",
|
||||
"approved" => "sect_green",
|
||||
"inactive" => "background-grey",
|
||||
"denied" => "background-red",
|
||||
"partial" => "background-green",
|
||||
"approved" => "background-green",
|
||||
}
|
||||
tag.td(status, class: classes[takedown.status])
|
||||
end
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="sect_red error_message" v-if="showErrors && errorMessage !== undefined">
|
||||
<div class="background-red error_message" v-if="showErrors && errorMessage !== undefined">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<span>
|
||||
<div v-if="!disableFileUpload">
|
||||
<div class="box-section sect_red" v-if="fileTooLarge">
|
||||
<div class="box-section background-red" v-if="fileTooLarge">
|
||||
The file you are trying to upload is too large. Maximum allowed is {{this.maxFileSize / (1024*1024) }} MiB.<br>
|
||||
Check out <a href="/help/supported_filetypes">the Supported Formats</a> for more information.
|
||||
</div>
|
||||
@ -13,7 +13,7 @@
|
||||
<button @click.prevent="clearFileUpload" v-show="disableURLUpload">Clear</button>
|
||||
</div>
|
||||
<div v-if="!disableURLUpload">
|
||||
<div class="box-section sect_red" v-if="badDirectURL">
|
||||
<div class="box-section background-red" v-if="badDirectURL">
|
||||
The direct URL entered has the following problem: {{ directURLProblem }}<br>
|
||||
You should review <a href="/wiki_pages/howto:sites_and_sources">the sourcing guide</a>.
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="upload_preview_container" :class="classes">
|
||||
<div class="box-section sect_red" v-show="overDims">
|
||||
<div class="box-section background-red" v-show="overDims">
|
||||
One of the image dimensions is above the maximum allowed of 15,000px and will fail to upload.
|
||||
</div>
|
||||
<div v-if="!failed">
|
||||
@ -12,7 +12,7 @@
|
||||
referrerpolicy="no-referrer"
|
||||
v-on:load="updateDimensions($event)" v-on:error="previewFailed()"/>
|
||||
</div>
|
||||
<div v-else class="preview-fail box-section sect_yellow">
|
||||
<div v-else class="preview-fail box-section background-yellow">
|
||||
<p>The preview for this file failed to load. Please, double check that the URL you provided is correct.</p>
|
||||
Note that some sites intentionally prevent images they host from being displayed on other sites. The file can still be uploaded despite that.
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="box-section sect_red source_warning" v-show="showErrors && sourceWarning">
|
||||
<div class="box-section background-red source_warning" v-show="showErrors && sourceWarning">
|
||||
A source must be provided or you must select that there is no available source.
|
||||
</div>
|
||||
<div v-if="!noSource">
|
||||
|
||||
@ -113,7 +113,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col2">
|
||||
<div class="box-section sect_red" v-if="showErrors && invalidRating">
|
||||
<div class="box-section background-red" v-if="showErrors && invalidRating">
|
||||
You must select an appropriate rating for this image.
|
||||
</div>
|
||||
<div>
|
||||
@ -144,7 +144,7 @@
|
||||
</div>
|
||||
<div class="col2">
|
||||
<file-preview classes="box-section in-editor" :data="previewData"></file-preview>
|
||||
<div class="box-section sect_red" v-show="showErrors && notEnoughTags">
|
||||
<div class="box-section background-red" v-show="showErrors && notEnoughTags">
|
||||
You must provide at least <b>{{4 - tagCount}}</b> more tags. Tags in other sections count
|
||||
towards this total.
|
||||
</div>
|
||||
@ -218,16 +218,16 @@
|
||||
<div class="flex-grid">
|
||||
<div class="col"></div>
|
||||
<div class="col2">
|
||||
<div class="box-section sect_red" v-show="preventUpload && showErrors">
|
||||
<div class="box-section background-red" v-show="preventUpload && showErrors">
|
||||
Unmet requirements above prevent the submission of the post.
|
||||
</div>
|
||||
<div class="box-section sect_green" v-show="submitting">
|
||||
<div class="box-section background-green" v-show="submitting">
|
||||
Submitting your post, please wait.
|
||||
</div>
|
||||
<div class="box-section sect_red" v-show="error">
|
||||
<div class="box-section background-red" v-show="error">
|
||||
{{ error }}
|
||||
</div>
|
||||
<div class="box-section sect_red" v-show="duplicateId">
|
||||
<div class="box-section background-red" v-show="duplicateId">
|
||||
Post is a duplicate of <a :href="duplicatePath">post #{{duplicateId}}.</a>
|
||||
</div>
|
||||
<button @click="submit" :disabled="(showErrors && preventUpload) || submitting" accesskey="s">
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "base/functions";
|
||||
@import "base/palette";
|
||||
@import "base/themable"; //Drags in themes automatically
|
||||
@import "base/colors";
|
||||
@import "base/vars";
|
||||
@ -8,6 +9,7 @@
|
||||
@import "base/fontawesome";
|
||||
|
||||
@import "common/helper_classes";
|
||||
@import "common/helper_palette";
|
||||
@import "common/ads.scss";
|
||||
@import "common/autocomplete.scss";
|
||||
@import "common/blacklists.scss";
|
||||
|
||||
@ -100,15 +100,3 @@ table tfoot {
|
||||
font-style: italic;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.greentext, .greentext a, .approved-ticket { color: $green-text-color !important; font-weight:bold; }
|
||||
.greytext, .greytext a { color: $grey-text-color !important; font-weight:bold; }
|
||||
.yellowtext, .yellowtext a, .partial-ticket { color: $yellow-text-color !important; font-weight:bold; }
|
||||
.redtext, .redtext a { color: $red-text-color !important; font-weight:bold; }
|
||||
|
||||
|
||||
.sect_green { background-color: $section-green-background; /* green */ }
|
||||
.sect_red { background-color: $section-red-background; /* red */ }
|
||||
.sect_yellow { background-color: $section-yellow-background; /* yellow */ }
|
||||
.sect_grey { background-color: $section-grey-background; /* yellow */ }
|
||||
.sect_green a:hover, .sect_red a:hover, .sect_yellow a:hover { color: $section-link-hover-color; }
|
||||
|
||||
@ -1,16 +1,5 @@
|
||||
// Font
|
||||
$inverted-text-color: invert(#fff);
|
||||
$green-text-color: #3e9e49;
|
||||
$yellow-text-color: #e4e150;
|
||||
$red-text-color: #e45f5f;
|
||||
$grey-text-color: #959595;
|
||||
|
||||
|
||||
$section-green-background: #288233;
|
||||
$section-yellow-background: #828028;
|
||||
$section-red-background: #822828;
|
||||
$section-grey-background: #5d656e;
|
||||
$section-link-hover-color: white;
|
||||
|
||||
// Main background colors
|
||||
$lighten-background-5: rgba(255,255,255,0.05);
|
||||
@ -22,9 +11,6 @@ $state-error-color: #e45f5f;
|
||||
// DText
|
||||
$dtext-code-background: rgba(255,255,255,0.2);
|
||||
|
||||
// Blips
|
||||
$blip-hidden-background: $section-red-background;
|
||||
|
||||
// Forms
|
||||
$form-focus-color: black;
|
||||
$form-focus-background: #FFC;
|
||||
@ -37,11 +23,11 @@ $form-submit-button-background: #eee;
|
||||
$page-header-sign-in-link-color: #e00;
|
||||
|
||||
// Post previews
|
||||
$preview-has-children-color: #0F0;
|
||||
$preview-has-parent-color: #CC0;
|
||||
$preview-deleted-color: #000;
|
||||
$preview-pending-color: #00F;
|
||||
$preview-flagged-color: #F00;
|
||||
$preview-has-children-color: palette("plain-green");
|
||||
$preview-has-parent-color: palette("plain-yellow");
|
||||
$preview-deleted-color: palette("plain-black");
|
||||
$preview-pending-color: palette("plain-blue");
|
||||
$preview-flagged-color: palette("plain-red");
|
||||
|
||||
// Autocomplete
|
||||
$autocomplete-border: #C5C5C5;
|
||||
@ -88,7 +74,6 @@ $negative-record-color: $red-color;
|
||||
$neutral-record-color: $dark-grey-color;
|
||||
|
||||
$comment-highlight-background: rgba(255,255,255,0.25);
|
||||
$comment-hidden-background: $section-red-background;
|
||||
$comment-vote-background: rgba(255, 255, 255, 0.2);
|
||||
|
||||
// Keyboard shortcuts
|
||||
@ -111,8 +96,6 @@ $forum-vote-down-color: red;
|
||||
$forum-vote-meh-color: goldenrod;
|
||||
$forum-topic-new-color: red;
|
||||
$forum-topic-except-color: gray;
|
||||
$forum-topic-hidden-background: rgba(130,40,40,0.75);
|
||||
$forum-post-hidden-background: rgba(130,40,40,0.75);
|
||||
|
||||
// IQDB lookup
|
||||
$iqdb-post-border: lightgrey;
|
||||
@ -142,12 +125,12 @@ $post-preview-highlight-background: rgba(0,0,0,0.1);
|
||||
$post-tag-low-count-color: red;
|
||||
|
||||
// Post Mode
|
||||
$post-mode-edit: $section-yellow-background;
|
||||
$post-mode-edit: palette("background-yellow");
|
||||
$post-mode-tag-script: #4f114f;
|
||||
$post-mode-add-fav: #104e17;
|
||||
$post-mode-remove-fav: darken($post-mode-add-fav, 10%);
|
||||
$post-mode-vote-up: $section-green-background;
|
||||
$post-mode-vote-down: $section-red-background;
|
||||
$post-mode-vote-up: palette("background-green");
|
||||
$post-mode-vote-down: palette("background-red");
|
||||
$post-mode-add-pool: #104b57;
|
||||
$post-mode-lock-rating: #AA3;
|
||||
$post-mode-lock-note: #3AA;
|
||||
|
||||
43
app/javascript/src/styles/base/_palette.scss
Normal file
43
app/javascript/src/styles/base/_palette.scss
Normal file
@ -0,0 +1,43 @@
|
||||
// Base color palette.
|
||||
// These colors should not normally change between
|
||||
// themes, but could still be overriden if need be.
|
||||
|
||||
// Palette definitions
|
||||
$palette: (
|
||||
"background-red": #76312e,
|
||||
"background-yellow": #827428,
|
||||
"background-green": #227d2a,
|
||||
"background-grey": #60686f,
|
||||
|
||||
"background-red-d5": #{darken(#76312e, 5%)},
|
||||
"background-yellow-d5": #{darken(#827428, 5%)},
|
||||
"background-green-d5": #{darken(#227d2a, 5%)},
|
||||
"background-grey-d5": #{darken(#60686f, 5%)},
|
||||
|
||||
"text-white": #ffffff,
|
||||
"text-red": #FE6A64,
|
||||
"text-yellow": #F5D76E,
|
||||
"text-green": #76C376,
|
||||
"text-grey": #aaaaaa,
|
||||
|
||||
// Just here for the post borders, nothing else
|
||||
"plain-black": #000,
|
||||
"plain-green": #0F0,
|
||||
"plain-yellow": #CC0,
|
||||
"plain-blue": #00F,
|
||||
"plain-red": #F00,
|
||||
);
|
||||
|
||||
:root {
|
||||
@each $name, $color in $palette {
|
||||
--palette-#{$name}: #{$color};
|
||||
}
|
||||
}
|
||||
|
||||
// Helper function
|
||||
@function palette($key) {
|
||||
@return var(--palette-#{$key});
|
||||
}
|
||||
|
||||
// Element-specific
|
||||
$background-article-hidden: palette("background-red");
|
||||
@ -4,6 +4,9 @@
|
||||
@import "../themes/theme_serpent";
|
||||
@import "../themes/theme_hotdog";
|
||||
|
||||
@import "../themes/palette_deutranomaly";
|
||||
@import "../themes/palette_tritanomaly";
|
||||
|
||||
@import "../themes/extra_none";
|
||||
@import "../themes/extra_autumn";
|
||||
@import "../themes/extra_winter";
|
||||
|
||||
@ -87,21 +87,21 @@
|
||||
}
|
||||
}
|
||||
&.score-positive {
|
||||
color: themed("color-score-positive");
|
||||
background: themed("color-success");
|
||||
color: palette("text-white");
|
||||
background: palette("background-green");
|
||||
&:hover {
|
||||
background: themed("color-success-darken-5");
|
||||
background: palette("background-green-d5");
|
||||
}
|
||||
}
|
||||
&.score-negative {
|
||||
color: themed("color-score-negative");
|
||||
background: themed("color-danger");
|
||||
color: palette("text-white");
|
||||
background: palette("background-red");
|
||||
&:hover {
|
||||
background: themed("color-danger-darken-5");
|
||||
background: palette("background-red-d5");
|
||||
}
|
||||
}
|
||||
&.score-neutral {
|
||||
color: themed("color-text-muted");
|
||||
color: palette("text-grey");
|
||||
background: themed("color-section");
|
||||
&:hover {
|
||||
background: themed("color-section-darken-5");
|
||||
|
||||
17
app/javascript/src/styles/common/_helper_palette.scss
Normal file
17
app/javascript/src/styles/common/_helper_palette.scss
Normal file
@ -0,0 +1,17 @@
|
||||
@each $name in ("red", "yellow", "green", "grey") {
|
||||
.background-#{$name} {
|
||||
background: palette("background-#{$name}") !important;
|
||||
}
|
||||
.text-#{$name} {
|
||||
color: palette("text-#{$name}") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-error {
|
||||
color: palette("text-red") !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.text-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -6,33 +6,33 @@
|
||||
}
|
||||
|
||||
.score-positive, span.score-positive {
|
||||
color: themed("color-score-positive");
|
||||
color: palette("text-green");
|
||||
|
||||
a {
|
||||
color: themed("color-score-positive");
|
||||
color: palette("text-green");
|
||||
}
|
||||
}
|
||||
.score-negative, span.score-negative {
|
||||
color: themed("color-score-negative");
|
||||
color: palette("text-red");
|
||||
|
||||
a {
|
||||
color: themed("color-score-negative");
|
||||
color: palette("text-red");
|
||||
}
|
||||
}
|
||||
.score-neutral, span.score-neutral {
|
||||
color: themed("color-text-muted");
|
||||
color: palette("text-grey");
|
||||
|
||||
a {
|
||||
color: themed("color-text-muted");
|
||||
color: palette("text-grey");
|
||||
}
|
||||
}
|
||||
|
||||
.post-rating-text-safe {
|
||||
color: themed("color-rating-safe");
|
||||
color: palette("text-green");
|
||||
}
|
||||
.post-rating-text-questionable {
|
||||
color: themed("color-rating-questionable");
|
||||
color: palette("text-yellow");
|
||||
}
|
||||
.post-rating-text-explicit {
|
||||
color: themed("color-rating-explicit");
|
||||
color: palette("text-red");
|
||||
}
|
||||
|
||||
@ -1,24 +1,13 @@
|
||||
|
||||
|
||||
.box-section {
|
||||
background-color: themed("color-section");
|
||||
padding: $base-padding;
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: $border-radius-half;
|
||||
}
|
||||
|
||||
.box-section.sect_green {
|
||||
background-color: $section-green-background;
|
||||
}
|
||||
|
||||
.box-section.sect_grey {
|
||||
background-color: $section-grey-background;
|
||||
}
|
||||
|
||||
.box-section.sect_red {
|
||||
background-color: $section-red-background;
|
||||
}
|
||||
|
||||
.box-section.sect_yellow {
|
||||
background-color: $section-yellow-background;
|
||||
// For some reason, link hover color was overriden in the original stylesheet.
|
||||
&.background-green, &.background-grey, &.background-red, &.background-yellow {
|
||||
a:hover {
|
||||
color: themed("color-text");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ div#c-blips {
|
||||
margin-bottom: $base-padding;
|
||||
|
||||
&[data-is-deleted="true"] {
|
||||
background-color: $blip-hidden-background;
|
||||
background-color: $background-article-hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@ div.comments-for-post {
|
||||
}
|
||||
|
||||
&[data-is-deleted="true"] {
|
||||
background: $comment-hidden-background;
|
||||
background: $background-article-hidden;
|
||||
}
|
||||
|
||||
div.content {
|
||||
|
||||
@ -15,19 +15,19 @@ div.list-of-forum-posts {
|
||||
}
|
||||
|
||||
&[data-is-hidden="true"] {
|
||||
background-color: $forum-post-hidden-background;
|
||||
background-color: $background-article-hidden;
|
||||
}
|
||||
|
||||
.vote-score-up {
|
||||
color: $forum-vote-up-color;
|
||||
color: palette("text-green");
|
||||
}
|
||||
|
||||
.vote-score-meh {
|
||||
color: $forum-vote-meh-color;
|
||||
color: palette("text-yellow");
|
||||
}
|
||||
|
||||
.vote-score-down {
|
||||
color: $forum-vote-down-color;
|
||||
color: palette("text-red");
|
||||
}
|
||||
|
||||
div.content-menu {
|
||||
@ -71,7 +71,7 @@ div#c-forum-topics {
|
||||
|
||||
tr.forum-topic-row {
|
||||
&[data-topic-is-hidden="true"] {
|
||||
background-color: $forum-topic-hidden-background;
|
||||
background-color: $background-article-hidden;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
@ -91,6 +91,6 @@ div#c-forum-topics {
|
||||
color: $forum-topic-except-color;
|
||||
}
|
||||
tr[data-is-hidden="true"], tr[data-topic-is-hidden="true"] {
|
||||
background-color: $forum-topic-hidden-background;
|
||||
background-color: $background-article-hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,15 +30,15 @@ article.post-preview {
|
||||
}
|
||||
|
||||
&.post-rating-explicit .post-score-rating {
|
||||
color: $post-rating-explicit-color;
|
||||
color: palette("text-red");
|
||||
}
|
||||
|
||||
&.post-rating-safe .post-score-rating {
|
||||
color: $post-rating-safe-color;
|
||||
color: palette("text-green");
|
||||
}
|
||||
|
||||
&.post-rating-questionable .post-score-rating {
|
||||
color: $post-rating-questionable-color;
|
||||
color: palette("text-yellow");
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
@ -20,3 +20,12 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.approved-ticket {
|
||||
color: palette("text-green");
|
||||
font-weight: bold;
|
||||
}
|
||||
.partial-ticket {
|
||||
color: palette("text-yellow");
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@ -1,30 +1,30 @@
|
||||
.user-feedback-positive {
|
||||
color: $positive-record-color;
|
||||
color: palette("text-green");
|
||||
}
|
||||
|
||||
.user-feedback-neutral {
|
||||
color: $neutral-record-color;
|
||||
color: palette("text-grey");
|
||||
}
|
||||
|
||||
.user-feedback-negative {
|
||||
color: $negative-record-background;
|
||||
color: palette("text-red");
|
||||
}
|
||||
|
||||
div#c-user-feedbacks, div#c-moderator-dashboards .activity-container {
|
||||
.feedback-category-positive {
|
||||
background: $positive-record-background;
|
||||
}
|
||||
|
||||
.feedback-category-negative {
|
||||
background: $negative-record-background;
|
||||
background: palette("background-green");
|
||||
}
|
||||
|
||||
.feedback-category-neutral {
|
||||
background: $neutral-record-background;
|
||||
background: palette("background-grey");
|
||||
}
|
||||
|
||||
.feedback-category-negative {
|
||||
background: palette("background-red");
|
||||
}
|
||||
|
||||
tr.user-feedback[data-is-deleted="true"] {
|
||||
background: #827428;
|
||||
background: palette("background-yellow");
|
||||
}
|
||||
|
||||
blockquote {
|
||||
|
||||
31
app/javascript/src/styles/themes/_palette_deutranomaly.scss
Normal file
31
app/javascript/src/styles/themes/_palette_deutranomaly.scss
Normal file
@ -0,0 +1,31 @@
|
||||
$palette: (
|
||||
"background-red": #bc4c00,
|
||||
"background-yellow": #4b8099,
|
||||
"background-green": #794eb1,
|
||||
"background-grey": #666664,
|
||||
|
||||
"background-red-d5": #{darken(#bc4c00, 5%)},
|
||||
"background-yellow-d5": #{darken(#4b8099, 5%)},
|
||||
"background-green-d5": #{darken(#794eb1, 5%)},
|
||||
"background-grey-d5": #{darken(#666664, 5%)},
|
||||
|
||||
"text-white": #ffffff,
|
||||
"text-red": #ff6f1b,
|
||||
"text-yellow": #fdff94,
|
||||
"text-green": #9f98ff,
|
||||
"text-grey": #aaaaaa,
|
||||
|
||||
"plain-black": #000,
|
||||
"plain-green": #9e1fff,
|
||||
"plain-yellow": #CC0,
|
||||
"plain-blue": #afb1ff,
|
||||
"plain-red": #bc4c00,
|
||||
);
|
||||
|
||||
body[data-th-palette="deut"] {
|
||||
|
||||
@each $name, $color in $palette {
|
||||
--palette-#{$name}: #{$color};
|
||||
}
|
||||
|
||||
}
|
||||
32
app/javascript/src/styles/themes/_palette_tritanomaly.scss
Normal file
32
app/javascript/src/styles/themes/_palette_tritanomaly.scss
Normal file
@ -0,0 +1,32 @@
|
||||
$palette: (
|
||||
"background-red": #76312e,
|
||||
"background-yellow": #827428,
|
||||
"background-green": #8529c9,
|
||||
"background-grey": #60686f,
|
||||
|
||||
"background-red-d5": #{darken(#76312e, 5%)},
|
||||
"background-yellow-d5": #{darken(#827428, 5%)},
|
||||
"background-green-d5": #{darken(#8529c9, 5%)},
|
||||
"background-grey-d5": #{darken(#60686f, 5%)},
|
||||
|
||||
"text-white": #ffffff,
|
||||
"text-red": #FE6A64,
|
||||
"text-yellow": #ffff00,
|
||||
"text-green": #c16dff,
|
||||
"text-grey": #aaaaaa,
|
||||
|
||||
// Just here for the post borders, nothing else
|
||||
"plain-black": #000,
|
||||
"plain-green": #0F0,
|
||||
"plain-yellow": #c4c415,
|
||||
"plain-blue": #00F,
|
||||
"plain-red": #F00,
|
||||
);
|
||||
|
||||
body[data-th-palette="trit"] {
|
||||
|
||||
@each $name, $color in $palette {
|
||||
--palette-#{$name}: #{$color};
|
||||
}
|
||||
|
||||
}
|
||||
@ -3,10 +3,12 @@
|
||||
try {
|
||||
var theme = localStorage.getItem('theme') || 'hexagon';
|
||||
var extra = localStorage.getItem('theme-extra') || 'hexagon';
|
||||
var palette = localStorage.getItem('theme-palette') || 'default';
|
||||
var nav = localStorage.getItem('theme-nav') || 'top';
|
||||
var b = document.body;
|
||||
b.setAttribute('data-th-main', theme);
|
||||
b.setAttribute('data-th-extra', extra);
|
||||
b.setAttribute('data-th-palette', palette);
|
||||
b.setAttribute('data-th-nav', nav);
|
||||
} catch(e) {
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div id="a-new">
|
||||
<h1>Change Email</h1>
|
||||
|
||||
<div class="box-section sect_red">
|
||||
<div class="box-section background-red">
|
||||
<p>Warning: Changing the email on your account will mark it as unactivated until you confirm the new email address.</p>
|
||||
|
||||
<p>You must confirm your password in order to change your email address.</p>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<p>Theme settings are saved using cookies and javascript. This means that they will not persist across private browsing
|
||||
sessions, or work inside incognito mode on mobile devices.</p>
|
||||
|
||||
<h3 class="redtext" id="no_save_warning" style="display:none;">Your device does not allow the site to save theme
|
||||
<h3 class="text-error" id="no_save_warning" style="display:none;">Your device does not allow the site to save theme
|
||||
settings.</h3>
|
||||
<noscript>
|
||||
<h3 class="redtext" id="no_save_warning">Your device does not allow the site to save theme settings.</h3>
|
||||
<h3 class="text-error" id="no_save_warning">Your device does not allow the site to save theme settings.</h3>
|
||||
</noscript>
|
||||
|
||||
<div class="simple_form">
|
||||
@ -31,6 +31,14 @@
|
||||
<option value="winter">Eternal Winter</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input">
|
||||
<label for="theme_palette">Theme</label>
|
||||
<select id="theme_palette">
|
||||
<option value="default">Default</option>
|
||||
<option value="deut">Protanopia & Deuteranopia</option>
|
||||
<option value="trit">Tritanopia</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input">
|
||||
<label for="theme_navbar">Navigation bar location</label>
|
||||
<select id="theme_navbar">
|
||||
@ -60,10 +68,12 @@
|
||||
ls.removeItem('test');
|
||||
var theme = ls.getItem('theme') || 'hexagon';
|
||||
var extra = ls.getItem('theme-extra') || 'hexagon';
|
||||
var palette = ls.getItem('theme-palette') || 'default';
|
||||
var nav = ls.getItem('theme-nav') || 'top';
|
||||
var emg = ls.getItem('emg') || 'false';
|
||||
$('#theme_name').val(theme);
|
||||
$('#theme_extra').val(extra);
|
||||
$('#theme_palette').val(palette);
|
||||
$('#theme_navbar').val(nav);
|
||||
$('#gestures_enable').val(emg);
|
||||
} catch(e) {
|
||||
@ -79,6 +89,11 @@
|
||||
$body.attr('data-th-extra', extra);
|
||||
window.localStorage.setItem('theme-extra', extra);
|
||||
});
|
||||
$("#theme_palette").on('change', function(e) {
|
||||
var palette = e.target.value;
|
||||
$body.attr('data-th-palette', palette);
|
||||
window.localStorage.setItem('theme-palette', palette);
|
||||
});
|
||||
$("#theme_navbar").on('change', function(e) {
|
||||
var pos = e.target.value;
|
||||
$body.attr('data-th-nav', pos);
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
<span class="count"><%= tag_relation.consequent_tag.post_count rescue 0 %></span>
|
||||
<% if tag_relation.is_a?(TagAlias) %>
|
||||
<% if CurrentUser.is_member? && tag_relation.status == "pending" && tag_relation.has_transitives %>
|
||||
<span class="redtext"> HAS TRANSITIVES</span>
|
||||
<span class="text-error"> HAS TRANSITIVES</span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</td>
|
||||
|
||||
@ -71,8 +71,8 @@
|
||||
<td colspan='2'><%= check_box "takedown", "reason_hidden", checked: @takedown.reason_hidden %>
|
||||
<label for="takedown_reason_hidden">Hide Reason?
|
||||
(Currently
|
||||
<% if !@takedown.reason_hidden %><span class='greentext'>not hidden</span>
|
||||
<% else %><span class='redtext'>hidden</span>
|
||||
<% if !@takedown.reason_hidden %><span class="text-green text-bold">not hidden</span>
|
||||
<% else %><span class="text-red text-bold">hidden</span>
|
||||
<% end %>)
|
||||
</label></td>
|
||||
</tr>
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
<%= link_to takedown.source, "https://#{takedown.source}", rel: "noopener noreferrer nofollow" %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<span class="redtext">(Source hidden)</span>
|
||||
<span class="text-error">(Source hidden)</span>
|
||||
<% end %>
|
||||
</td>
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<div id="c-takedowns">
|
||||
<div id="c-show">
|
||||
<% if @show_instructions && (!@takedown.completed?) %>
|
||||
<div class='box-section sect_red'>
|
||||
<div class="box-section background-red">
|
||||
<div style="font-size:2rem;margin-top:0;margin-bottom:1rem;">Wait! You're not done yet!</div>
|
||||
<p>Your verification code is <span class='takedown-vericode'><%= @takedown.vericode %></span></p>
|
||||
<p>Your takedown request has been successfully created. Using the gallery account that you specified below as the "source", <span style="font-weight:bold;">please send your verification code via PM/note to</span>:</p>
|
||||
@ -26,7 +26,7 @@
|
||||
<%= link_to @takedown.source, "https://#{@takedown.source}", rel: "noopener noreferrer nofollow" %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<span class="redtext">[Source hidden by submitter]</span>
|
||||
<span class="text-error">[Source hidden by submitter]</span>
|
||||
<% end %>
|
||||
</td>
|
||||
</tr>
|
||||
@ -35,9 +35,9 @@
|
||||
<td><label>Reason</label></td>
|
||||
<% if !@takedown.reason_hidden || CurrentUser.is_moderator? || @show_instructions %>
|
||||
<td><%= h @takedown.reason %>
|
||||
<% if @takedown.reason_hidden %><span class="redtext">(HIDDEN)</span><% end %></td>
|
||||
<% if @takedown.reason_hidden %><span class="text-error">(HIDDEN)</span><% end %></td>
|
||||
<% else %>
|
||||
<td><span class="redtext">[Reason hidden by submitter]</span></td>
|
||||
<td><span class="text-error">[Reason hidden by submitter]</span></td>
|
||||
<% end %>
|
||||
</tr>
|
||||
|
||||
@ -101,9 +101,9 @@
|
||||
<div class="box-section dtext-container">
|
||||
<% if !@takedown.reason_hidden || CurrentUser.is_moderator? %>
|
||||
<%= format_text(@takedown.notes) %>
|
||||
<% if @takedown.reason_hidden %><span class="redtext">(HIDDEN)</span><% end %>
|
||||
<% if @takedown.reason_hidden %><span class="text-error">(HIDDEN)</span><% end %>
|
||||
<% else %>
|
||||
<span class="redtext">[Admin notes hidden]</span>
|
||||
<span class="text-error">[Admin notes hidden]</span>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
@ -137,7 +137,7 @@
|
||||
</div>
|
||||
|
||||
<% elsif @takedown.status == "inactive" && !@takedown.takedown_posts.blank? %>
|
||||
<div class='box-section sect_grey'>
|
||||
<div class="box-section background-grey">
|
||||
<p style="margin-bottom:0px;">This takedown request has been marked as inactive as the submitter has not responded in a reasonable time frame. It will be handled once the submitter responds.</p>
|
||||
<br>
|
||||
<p>The following posts are up for dispute:</p>
|
||||
@ -147,7 +147,7 @@
|
||||
</div>
|
||||
|
||||
<% elsif @takedown.status == "denied" %>
|
||||
<div class='box-section sect_red'>
|
||||
<div class="box-section background-red">
|
||||
<p>The request has been denied. The following posts were not removed:</p>
|
||||
<% @takedown.actual_kept_posts.each do |post| %>
|
||||
<%= link_to("post ##{post.id}", post_path(post)) %><br>
|
||||
@ -155,14 +155,14 @@
|
||||
</div>
|
||||
|
||||
<% elsif @takedown.status == "partial" %>
|
||||
<div class='box-section sect_green'>
|
||||
<div class="box-section background-green">
|
||||
<p>The request has been partially approved. The following posts were removed:</p>
|
||||
<% @takedown.actual_deleted_posts.each do |post| %>
|
||||
<%= link_to("post ##{post.id}", post_path(post), class: "takedown_post_deleted") %><br>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class='box-section sect_red'>
|
||||
<div class="box-section background-red">
|
||||
<p>The following posts were kept:</p>
|
||||
<% @takedown.actual_kept_posts.each do |post| %>
|
||||
<%= link_to("post ##{post.id}", post_path(post), class: "takedown_post_kept") %><br>
|
||||
@ -170,7 +170,7 @@
|
||||
</div>
|
||||
|
||||
<% elsif @takedown.status == "approved" %>
|
||||
<div class='box-section sect_green'>
|
||||
<div class="box-section background-green">
|
||||
<p>The request has been approved. The following posts were removed:</p>
|
||||
<% @takedown.actual_deleted_posts.each do |post| %>
|
||||
<%= link_to("post ##{post.id}", post_path(post)) %><br>
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
</td>
|
||||
<td>
|
||||
<% if ticket.claimant.nil? %>
|
||||
<span class="redtext">Unclaimed</span>
|
||||
<span class="text-error">Unclaimed</span>
|
||||
<% else %>
|
||||
<%= link_to_user ticket.claimant %>
|
||||
<% end %>
|
||||
@ -42,7 +42,7 @@
|
||||
<td><%= link_to ticket.type_title, ticket_path(ticket) %></td>
|
||||
|
||||
<% if !ticket.can_see_details?(CurrentUser.user) %>
|
||||
<td><span style="cursor:help;" class="redtext" title="Due to privacy concerns, this information is confidential">Confidential</span></td>
|
||||
<td><span style="cursor:help;" class="text-error" title="Due to privacy concerns, this information is confidential">Confidential</span></td>
|
||||
<% else %>
|
||||
<%= tag.td class: "ticket-subject full-width-link", title: truncate(strip_tags(format_text(ticket.reason)), length: 200) do %>
|
||||
<%= link_to truncate(strip_tags(format_text(ticket.subject)), length: 200), ticket_path(ticket.id) %>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<% if @ticket.content %>
|
||||
<tr>
|
||||
<td><span class='title'>Reported Blip</span></td>
|
||||
<td><span class="title">Reported Blip</span></td>
|
||||
<td>
|
||||
<%= link_to "Blip by #{@ticket.content.creator_name}", blip_path(@ticket.content) %>
|
||||
</td>
|
||||
</tr>
|
||||
<% else %>
|
||||
<tr>
|
||||
<td><span class='title'>Reported Blip</span></td>
|
||||
<td><span class='redtext'>Blip has been deleted</span></td>
|
||||
<td><span class="title">Reported Blip</span></td>
|
||||
<td><span class="text-error">Blip has been deleted</span></td>
|
||||
</tr>
|
||||
<% end %>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<% if @ticket.content %>
|
||||
<tr>
|
||||
<td><span class='title'>Reported Comment</span></td>
|
||||
<td><span class="title">Reported Comment</span></td>
|
||||
<td>
|
||||
<%= link_to("Comment by #{@ticket.content.creator_name}", comment_path(@ticket.content)) %> on
|
||||
<%= link_to("post ##{@ticket.content.post_id}", post_path(@ticket.content.post_id)) %>
|
||||
@ -8,7 +8,7 @@
|
||||
</tr>
|
||||
<% else %>
|
||||
<tr>
|
||||
<td><span class='title'>Reported Comment</span></td>
|
||||
<td><span class='redtext'>Comment has been deleted</span></td>
|
||||
<td><span class="title">Reported Comment</span></td>
|
||||
<td><span class="text-error">Comment has been deleted</span></td>
|
||||
</tr>
|
||||
<% end %>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<% if @ticket.content %>
|
||||
<tr>
|
||||
<td><span class='title'>Reported Forum Post</span></td>
|
||||
<td><span class="title">Reported Forum Post</span></td>
|
||||
<td>
|
||||
<%= link_to("Post by #{@ticket.content.creator.name} in '#{@ticket.content.topic.title}'", forum_post_path(@ticket.content)) %>
|
||||
</td>
|
||||
</tr>
|
||||
<% else %>
|
||||
<tr>
|
||||
<td><span class='title'>Reported Forum Post</span></td>
|
||||
<td><span class='redtext'>Forum post has been deleted</span></td>
|
||||
<td><span class="title">Reported Forum Post</span></td>
|
||||
<td><span class="text-error">Forum post has been deleted</span></td>
|
||||
</tr>
|
||||
<% end %>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<div id="uploader"></div>
|
||||
<% if CurrentUser.upload_limit <= 5 || CurrentUser.post_upload_throttle <= 5 %>
|
||||
<% @limit_pieces = CurrentUser.upload_limit_pieces %>
|
||||
<div id="post-uploads-remaining" class="box-section section<% if [CurrentUser.upload_limit, CurrentUser.post_upload_throttle].min <= 0 %> sect_red<% end %>" style="width:640px;">
|
||||
<div id="post-uploads-remaining" class="box-section section<% if [CurrentUser.upload_limit, CurrentUser.post_upload_throttle].min <= 0 %> background-red<% end %>" style="width:640px;">
|
||||
<p>
|
||||
You currently have <span class="post-uploads-remaining-count"><%= CurrentUser.upload_limit %></span> upload<%= CurrentUser.upload_limit!=1?"s":"" %> remaining.
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
See <%= link_to "here", upload_limit_users_path %> for more details.
|
||||
</div>
|
||||
<% elsif CurrentUser.post_upload_throttle <= 5 %>
|
||||
<div id="post-uploads-remaining" class="section<% if CurrentUser.post_upload_throttle <= 0 %> sect_red<% end %>" style="width:640px;">
|
||||
<div id="post-uploads-remaining" class="section<% if CurrentUser.post_upload_throttle <= 0 %> background-red<% end %>" style="width:640px;">
|
||||
You have <span class="post-uploads-remaining-count"><%= CurrentUser.post_upload_throttle %></span> uploads remaining this hour.
|
||||
See <%= link_to "here", upload_limit_users_path %> for more details.
|
||||
</div>
|
||||
|
||||
@ -45,9 +45,9 @@
|
||||
<% end %>
|
||||
<td><%= time_ago_in_words_tagged(vote.user.created_at) %></td>
|
||||
<td>
|
||||
<% if vote.is_positive? %><span class='greentext'>Up</span>
|
||||
<% elsif vote.is_locked? %><span class='yellowtext'>Locked</span>
|
||||
<% else %><span class='redtext'>Down</span>
|
||||
<% if vote.is_positive? %><span class="text-green text-bold">Up</span>
|
||||
<% elsif vote.is_locked? %><span class="text-yellow text-bold">Locked</span>
|
||||
<% else %><span class="text-red text-bold">Down</span>
|
||||
<% end %>
|
||||
</td>
|
||||
<td><%= time_ago_in_words_tagged(vote.created_at) %></td>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
<p>An account is <strong>free</strong> and lets you keep favorites, upload artwork, and write comments.</p>
|
||||
|
||||
<div class="box-section sect_red">
|
||||
<div class="box-section background-red">
|
||||
<p>Make sure to read the <a href="/wiki_pages/e621:rules">site rules</a> before continuing.</p>
|
||||
<p>You must confirm your email address, so use something you can receive email with.</p>
|
||||
<p>This site is open to web crawlers so whatever name you choose will be public!</p>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user