mirror of
https://github.com/philomena-dev/philomena.git
synced 2024-11-27 05:37:59 +01:00
redesign 2021 changes
This commit is contained in:
Luna D
parent
ae3411b7a2
commit
4bcc130baa
162 changed files with 2633 additions and 4389 deletions
50
assets/css/application.scss
Normal file
50
assets/css/application.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
/*
|
||||||
|
* Main stylesheet file.
|
||||||
|
*
|
||||||
|
* This generates the base file for the stylesheets used throughout the project.
|
||||||
|
* Themes should be contained within the "themes" folder, and only contain
|
||||||
|
* color variations, and optional CSS changes.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
|
||||||
|
|
||||||
|
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
|
||||||
|
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
|
||||||
|
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
|
||||||
|
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
|
||||||
|
@import "~normalize-scss/sass/normalize/import-now";
|
||||||
|
|
||||||
|
// Import the default theme to act as a fallback.
|
||||||
|
@import "~themes/dark-blue";
|
||||||
|
|
||||||
|
// Files containing common properties, such as variable definitions.
|
||||||
|
@import "~common/measurements";
|
||||||
|
@import "~common/mixins";
|
||||||
|
|
||||||
|
// General style elements that are used throughout the project.
|
||||||
|
@import "~elements/avatar";
|
||||||
|
@import "~elements/base";
|
||||||
|
@import "~elements/block";
|
||||||
|
@import "~elements/button";
|
||||||
|
@import "~elements/dropdown";
|
||||||
|
@import "~elements/flash";
|
||||||
|
@import "~elements/flex";
|
||||||
|
@import "~elements/heading";
|
||||||
|
@import "~elements/input";
|
||||||
|
@import "~elements/interaction";
|
||||||
|
@import "~elements/layout";
|
||||||
|
@import "~elements/media";
|
||||||
|
@import "~elements/mobile";
|
||||||
|
@import "~elements/separator";
|
||||||
|
@import "~elements/table";
|
||||||
|
|
||||||
|
// Style elements specific to certain pages.
|
||||||
|
@import "~views/burger";
|
||||||
|
@import "~views/communication";
|
||||||
|
@import "~views/header";
|
||||||
|
@import "~views/metabar";
|
||||||
|
@import "~views/pagination";
|
||||||
|
@import "~views/statistics";
|
||||||
|
@import "~views/tag";
|
||||||
|
@import "~views/textile";
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
.sparkline {
|
|
||||||
display: flex;
|
|
||||||
height: 20px;
|
|
||||||
border-bottom: 1px solid $sparkline_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.barline__bar {
|
|
||||||
fill: $sparkline_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.barline__bar:hover {
|
|
||||||
fill: red;
|
|
||||||
}
|
|
||||||
|
|
@ -1,412 +0,0 @@
|
||||||
/*
|
|
||||||
* This file contains base styles that are overridden by custom stylesheets. These stylesheets need
|
|
||||||
* to be placed in this directory, and they are imported at the bottom of the file.
|
|
||||||
*
|
|
||||||
* Define rules that are not supposed to be overridden after the @imports at the bottom of the file.
|
|
||||||
*/
|
|
||||||
|
|
||||||
@import "dimensions";
|
|
||||||
@import "global";
|
|
||||||
|
|
||||||
// Because FA is a SPECIAL SNOWFLAKE.
|
|
||||||
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
|
|
||||||
|
|
||||||
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
|
|
||||||
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
|
|
||||||
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
|
|
||||||
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
|
|
||||||
@import "~normalize-scss/sass/normalize/import-now";
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: $background_color;
|
|
||||||
color: $foreground_color;
|
|
||||||
font-family: $font_family_base;
|
|
||||||
font-size: 13px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
line-height: 1.15;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5 {
|
|
||||||
font-weight: normal;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
margin-bottom: 0.62em;
|
|
||||||
line-height: 1.15em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 { font-size: 24px; }
|
|
||||||
|
|
||||||
h2 { font-size: 22px; }
|
|
||||||
|
|
||||||
h3 { font-size: 19px; }
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
font-size: 17px;
|
|
||||||
margin-top: 1em;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Slightly dirty, no clean way to strip top margins off headers though
|
|
||||||
.remove-top-margin {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
margin-top: 0.5em;
|
|
||||||
margin-bottom: 0.3em;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6 {
|
|
||||||
font-size: 10px;
|
|
||||||
margin: 2px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
hyphens: none;
|
|
||||||
margin-top: 4px;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
margin-left: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
background-color: $meta_color;
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 11px;
|
|
||||||
font-family: $font_family_monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
a, a:active, a:visited {
|
|
||||||
color: $link_color;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: $link_hover_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clearfix {
|
|
||||||
clear: both;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Child selectors, as opposed to flat BEM classes, are justified in this case.
|
|
||||||
* HTML tables are bulky to begin with; adding .table__row and .table__cell to every
|
|
||||||
* item will hinder the development speed and decrease readability. */
|
|
||||||
.table {
|
|
||||||
padding-left: 10px;
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
border: $border;
|
|
||||||
|
|
||||||
th {
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: left;
|
|
||||||
padding: 5px;
|
|
||||||
&.center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> thead > tr {
|
|
||||||
background: $background_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
> tbody {
|
|
||||||
border: $border;
|
|
||||||
> tr {
|
|
||||||
@include even-odd;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table__tiny-column {
|
|
||||||
width: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-vertical {
|
|
||||||
border-top: 2px solid $border_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-success {
|
|
||||||
background-color: $success_light_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-warning {
|
|
||||||
background-color: $warning_light_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.background-danger {
|
|
||||||
background-color: $danger_light_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
border: 0;
|
|
||||||
height: 1px;
|
|
||||||
background: $border_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
#error_explanation {
|
|
||||||
margin: 1em 0;
|
|
||||||
background: $warning_light_color;
|
|
||||||
border: 1px solid $warning_color;
|
|
||||||
padding: 0.62em;
|
|
||||||
li {
|
|
||||||
margin: 3px;
|
|
||||||
margin-left: 15px;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
font-size: 19px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//rules page. API page also borrows stuff from here
|
|
||||||
.rule {
|
|
||||||
padding: 5px;
|
|
||||||
h2 {
|
|
||||||
background: $background_odd_color;
|
|
||||||
border: $border;
|
|
||||||
padding: 5px;
|
|
||||||
padding-bottom: 7px;
|
|
||||||
}
|
|
||||||
h2.important {
|
|
||||||
background: $danger_light_color;
|
|
||||||
border-color: $danger_color;
|
|
||||||
}
|
|
||||||
// Make HTML lists with multi-line text readable
|
|
||||||
ul {
|
|
||||||
margin: 0;
|
|
||||||
padding: 5px 20px;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
padding: 5px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.walloftext {
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
width: 95%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//textile
|
|
||||||
blockquote {
|
|
||||||
margin: 1em 2em;
|
|
||||||
border: 1px dotted $foreground_color;
|
|
||||||
padding: 1em;
|
|
||||||
background-color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spoiler {
|
|
||||||
background-color: $admin_links_hover_color;
|
|
||||||
color: $admin_links_hover_color;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $admin_links_hover_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:hover) > .image-show-container {
|
|
||||||
background: $admin_links_hover_color;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spoiler:hover, .spoiler-revealed {
|
|
||||||
background-color: $admin_links_color;
|
|
||||||
color: $foreground_color;
|
|
||||||
a {
|
|
||||||
color: $link_color;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: $link_dark_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spoiler, .spoiler-revealed {
|
|
||||||
.imgspoiler {
|
|
||||||
background-color: $admin_links_hover_color;
|
|
||||||
img {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.imgspoiler:hover, .imgspoiler-revealed {
|
|
||||||
background-color: $admin_links_color;
|
|
||||||
img {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.imgspoiler, .imgspoiler-revealed {
|
|
||||||
display: inline-block;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.literal {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.textile-syntax-reference {
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
//donations
|
|
||||||
.donate-button {
|
|
||||||
background: 0;
|
|
||||||
border: 0;
|
|
||||||
margin-left: 170px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button_to {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* User titles (admin/mod/assistant) and channel states (live/off air) */
|
|
||||||
.label {
|
|
||||||
padding: 6px;
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label--small {
|
|
||||||
font-size: 9px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label--block {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 2px 6px 6px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label--narrow {
|
|
||||||
padding: 0 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label--success {
|
|
||||||
background: $success_light_color;
|
|
||||||
border: 1px solid $success_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label--danger {
|
|
||||||
background: $danger_light_color;
|
|
||||||
border: 1px solid $danger_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label--warning {
|
|
||||||
background: $warning_light_color;
|
|
||||||
border: 1px solid $warning_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label--purple {
|
|
||||||
background: $assistant_color;
|
|
||||||
border: 1px solid $assistant_border_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label--primary {
|
|
||||||
background: $primary_light_color;
|
|
||||||
border: 1px solid $primary_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.large-text {
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-text {
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-current {
|
|
||||||
padding: 0 $header_spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
i.favicon-home {
|
|
||||||
background-image: url("/favicon.svg");
|
|
||||||
background-size: contain;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
min-width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
// changelog
|
|
||||||
.commit-sha {
|
|
||||||
@extend .label--purple;
|
|
||||||
padding: 2px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-family: $font_family_monospace;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commit-message {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.stat {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.seamless-frame {
|
|
||||||
border: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@import "barline";
|
|
||||||
@import "blocks";
|
|
||||||
@import "burger";
|
|
||||||
@import "buttons";
|
|
||||||
@import "dropdown";
|
|
||||||
@import "forms";
|
|
||||||
@import "header";
|
|
||||||
@import "layout";
|
|
||||||
@import "media";
|
|
||||||
@import "shame";
|
|
||||||
@import "text";
|
|
||||||
|
|
||||||
@import "~views/adverts";
|
|
||||||
@import "~views/badges";
|
|
||||||
@import "~views/channels";
|
|
||||||
@import "~views/comments";
|
|
||||||
@import "~views/commissions";
|
|
||||||
@import "~views/communications";
|
|
||||||
@import "~views/duplicate_reports";
|
|
||||||
@import "~views/filters";
|
|
||||||
@import "~views/galleries";
|
|
||||||
@import "~views/images";
|
|
||||||
@import "~views/pages";
|
|
||||||
@import "~views/polls";
|
|
||||||
@import "~views/posts";
|
|
||||||
@import "~views/profiles";
|
|
||||||
@import "~views/pagination";
|
|
||||||
@import "~views/search";
|
|
||||||
@import "~views/stats";
|
|
||||||
@import "~views/tags";
|
|
||||||
|
|
||||||
.no-overflow {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-overflow-x {
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
@ -1,224 +0,0 @@
|
||||||
.block {
|
|
||||||
margin-bottom: $block_spacing;
|
|
||||||
.success {
|
|
||||||
background-color: $success_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.warning {
|
|
||||||
background-color: $warning_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.danger {
|
|
||||||
background-color: $danger_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.block__content, .block__tab {
|
|
||||||
border-left: 1px solid $border_color;
|
|
||||||
border-right: 1px solid $border_color;
|
|
||||||
background: $background_color;
|
|
||||||
padding: $block_spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block__content img, .block__tab img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block__content:first-child {
|
|
||||||
border-top: 1px solid $border_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block__content:last-child, .block__tab:not(.hidden) {
|
|
||||||
border-bottom: 1px solid $border_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block__content--destroyed {
|
|
||||||
background-color: $destroyed_content_color !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block__header {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: $block_header_height;
|
|
||||||
background: $block_header_color;
|
|
||||||
color: $foreground_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
//FIXME This whole area has problems with structure, things are too coupled
|
|
||||||
.block__header--sub {
|
|
||||||
@extend .block__header;
|
|
||||||
line-height: $block_header_sub_height;
|
|
||||||
a {
|
|
||||||
padding-left: $header_spacing/2;
|
|
||||||
padding-right: $header_spacing/2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.block__header--user-credit {
|
|
||||||
box-sizing: border-box;
|
|
||||||
line-height: 20px;
|
|
||||||
padding-left: 12px;
|
|
||||||
padding-right: 12px;
|
|
||||||
padding-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block__header--single-item {
|
|
||||||
@extend .block__header;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block__header--single-item, .block__header__item, .block__header a {
|
|
||||||
padding-left: $header_spacing;
|
|
||||||
padding-right: $header_spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.block__header--single-item, .block__header a {
|
|
||||||
color: $block_header_link_text_color;
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: bold;
|
|
||||||
&:hover {
|
|
||||||
background: $block_header_hover_color;
|
|
||||||
color: $block_header_link_text_hover_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.block__header a, .header__span {
|
|
||||||
background: $block_header_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block__header__title {
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0 ($header_spacing / 2) 0 $header_spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block__header--light {
|
|
||||||
background: $block_header_light_color;
|
|
||||||
a, .header__span {
|
|
||||||
background: $block_header_light_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $block_header_light_link_text_color;
|
|
||||||
&:hover {
|
|
||||||
background: $block_header_light_hover_color;
|
|
||||||
color: $block_header_light_link_text_hover_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.block__header--js-tabbed {
|
|
||||||
@extend .block__header--light;
|
|
||||||
background: transparent;
|
|
||||||
|
|
||||||
border-bottom: $border;
|
|
||||||
a {
|
|
||||||
border-top: $border;
|
|
||||||
/* hide the bottom border for tab links */
|
|
||||||
margin-bottom: -1px;
|
|
||||||
border-bottom: 1px solid $block_header_light_color;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
border-color: $block_header_light_hover_color;
|
|
||||||
}
|
|
||||||
a:first-child { border-left: $border; }
|
|
||||||
a:last-child { border-right: $border; }
|
|
||||||
|
|
||||||
a.selected, a.selected:hover {
|
|
||||||
cursor: default;
|
|
||||||
color: $foreground_color;
|
|
||||||
background: $background_color;
|
|
||||||
border-color: $block_header_light_color;
|
|
||||||
border-bottom: 1px solid $background_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fixed blocks do not have header and content */
|
|
||||||
.block--fixed {
|
|
||||||
padding: 6px $header_spacing;
|
|
||||||
background: $background_color;
|
|
||||||
border: $border;
|
|
||||||
line-height: 1.35;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block--fixed--sub {
|
|
||||||
padding: 3px $header_spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block--no-margin {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block--success {
|
|
||||||
background: $success_light_color;
|
|
||||||
border-color: $success_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block--warning {
|
|
||||||
background: $warning_light_color;
|
|
||||||
border-color: $warning_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block--danger {
|
|
||||||
background: $danger_light_color;
|
|
||||||
border-color: $danger_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block--primary {
|
|
||||||
background: $primary_light_color;
|
|
||||||
border-color: $primary_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Somewhat dirty workaround for <h*> margins */
|
|
||||||
|
|
||||||
.block__content, .block__tab, .block--fixed {
|
|
||||||
> h1, > h2, > h3, > h4, > h5, > h6 {
|
|
||||||
margin-top: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.block__header__dropdown-tab:hover > a {
|
|
||||||
background-color: $block_header_hover_color;
|
|
||||||
color: $block_header_link_text_hover_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Table-like lists */
|
|
||||||
.block__list {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border-bottom: $border;
|
|
||||||
|
|
||||||
&:not(:last-child) { margin-bottom: 6px; }
|
|
||||||
|
|
||||||
a.block__list__link {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: $border;
|
|
||||||
margin-bottom: -1px; /* collapse borders */
|
|
||||||
|
|
||||||
background: $background_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.block__list__link.primary {
|
|
||||||
background: $primary_light_color;
|
|
||||||
border-color: $primary_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.block__list__link:hover, a.block__list__link.active {
|
|
||||||
background: $success_light_color;
|
|
||||||
border-color: $success_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.block__list__link.active:hover {
|
|
||||||
background: $danger_light_color;
|
|
||||||
border-color: $danger_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.block__list__link.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
@mixin transform-n-animation($type, $dur, $delta) {
|
|
||||||
transform: $delta;
|
|
||||||
animation: $type $dur ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
#burger.open {
|
|
||||||
display: block !important;
|
|
||||||
@include transform-n-animation(slidein, 0.4s, translate(0, 0));
|
|
||||||
}
|
|
||||||
|
|
||||||
#burger.close {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// content sliding open
|
|
||||||
#container.open {
|
|
||||||
@include transform-n-animation(open, 0.4s, translate(210px, 0));
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes open {
|
|
||||||
0.00% { transform: translate(0, 0); }
|
|
||||||
100% { transform: translate(210px, 0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
// content closing
|
|
||||||
#container.close {
|
|
||||||
animation: close 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes close {
|
|
||||||
0.00% { transform: translate(210px, 0); }
|
|
||||||
100% { transform: translate(0, 0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slidein {
|
|
||||||
0.00% { transform: translate(-200px, 0); }
|
|
||||||
100% { transform: translate(0, 0); }
|
|
||||||
}
|
|
||||||
|
|
@ -1,91 +0,0 @@
|
||||||
.button {
|
|
||||||
background-color: $button_background_color;
|
|
||||||
border: 1px solid $button_border_color;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: $button_text_color;
|
|
||||||
display: inline-block;
|
|
||||||
line-height: normal;
|
|
||||||
font-family: $font_family_base;
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 3px 5px;
|
|
||||||
border-radius: 0; /* reset rounded borders on iOS/Safari */
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
background-color: $button_hover_background_color;
|
|
||||||
border-color: $button_hover_border_color;
|
|
||||||
}
|
|
||||||
&:active, &:hover, &:visited {
|
|
||||||
color: $button_text_color;
|
|
||||||
}
|
|
||||||
&:disabled {
|
|
||||||
opacity: 0.7;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.button--bold {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button--full-width {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button--link {
|
|
||||||
color: $link_color;
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
color: $link_hover_color;
|
|
||||||
}
|
|
||||||
&:visited {
|
|
||||||
color: $link_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.button--separate-left {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button--separate-right {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button--small {
|
|
||||||
padding: 0 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button--state-primary {
|
|
||||||
background-color: $button_primary_background_color;
|
|
||||||
border-color: $button_primary_border_color;
|
|
||||||
&:hover {
|
|
||||||
background-color: $button_primary_hover_background;
|
|
||||||
border-color: $button_primary_hover_border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.button--state-success {
|
|
||||||
background-color: $button_success_background_color;
|
|
||||||
border-color: $button_success_border_color;
|
|
||||||
&:hover {
|
|
||||||
background-color: $button_success_hover_background;
|
|
||||||
border-color: $button_success_hover_border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.button--state-warning {
|
|
||||||
background-color: $button_warning_background_color;
|
|
||||||
border-color: $button_warning_border_color;
|
|
||||||
&:hover {
|
|
||||||
background-color: $button_warning_hover_background;
|
|
||||||
border-color: $button_warning_hover_border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.button--state-danger {
|
|
||||||
background-color: $button_danger_background_color;
|
|
||||||
border-color: $button_danger_border_color;
|
|
||||||
&:hover {
|
|
||||||
background-color: $button_danger_hover_background;
|
|
||||||
border-color: $button_danger_hover_border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
/*
|
|
||||||
* Shared layout properties, not unique to any theme
|
|
||||||
*/
|
|
||||||
|
|
||||||
$border: 1px solid $border_color;
|
|
||||||
|
|
||||||
$font_family_base: verdana, arial, helvetica, sans-serif;
|
|
||||||
$font_family_monospace: "Droid Sans Mono", monospace;
|
|
||||||
|
|
||||||
$max_px_width_for_limited_desktop_layout: 1150px;
|
|
||||||
$min_px_width_for_desktop_layout: 800px;
|
|
||||||
$min_px_width_for_desktop_thumb: 700px;
|
|
||||||
|
|
||||||
$limited_layout_width: 980px;
|
|
||||||
$medium_layout_width: 1330px;
|
|
||||||
$centered_layout_side_margin: 24px;
|
|
||||||
$layout_side_margin: 12px;
|
|
||||||
|
|
||||||
$header_height: 36px;
|
|
||||||
$header_field_height: 28px;
|
|
||||||
$header_sub_height: 32px;
|
|
||||||
$header_font_size: 16px;
|
|
||||||
$header_spacing: 12px;
|
|
||||||
$header_field_spacing: 8px;
|
|
||||||
$header_field_vertical_spacing: ($header_height - $header_field_height) / 2;
|
|
||||||
$block_header_height: 32px;
|
|
||||||
$block_header_sub_height: 26px;
|
|
||||||
$block_spacing: 6px;
|
|
||||||
$media_box_header_height: 22px;
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
.dropdown {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown .dropdown__content {
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
/* align at top left (e.g., tag margins) */
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown__content.dropdown__content-right {
|
|
||||||
left: inherit;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Our child should be a block element */
|
|
||||||
.dropdown .dropdown__content > *:not(.hidden) {
|
|
||||||
display: block;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown:hover .dropdown__content {
|
|
||||||
/* show it */
|
|
||||||
display: block;
|
|
||||||
/* dropdowns should be at least as big as the button */
|
|
||||||
min-width: 100%;
|
|
||||||
/* and shouldn't sit below content */
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
|
|
@ -1,170 +0,0 @@
|
||||||
form p {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field--block {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field--inline {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-error-js {
|
|
||||||
background: $warning_light_color;
|
|
||||||
padding: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 6px;
|
|
||||||
border: 1px solid $input_border;
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: $font_family_monospace;
|
|
||||||
color: $input_text_color;
|
|
||||||
background: $input_color;
|
|
||||||
max-width: 100%; /* prevent resizable inputs from overflowing the container */
|
|
||||||
}
|
|
||||||
|
|
||||||
.input::placeholder {
|
|
||||||
opacity: 0.54;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input[required]:invalid {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input:focus {
|
|
||||||
outline: none;
|
|
||||||
border: 1px solid $input_border_active;
|
|
||||||
background: $input_color_active;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input--wide {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input--short {
|
|
||||||
max-width: 30em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input--small {
|
|
||||||
padding: 0 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input--text {
|
|
||||||
height: 8.6em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input--separate-left {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input--separate-top {
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input--decoy {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox {
|
|
||||||
margin: 0.2em 0 0 0.4em;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
height: 4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field, .actions {
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field_with_errors {
|
|
||||||
background: $danger_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.help-block {
|
|
||||||
background: $danger_color;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* hform is used for 30em inline 2-element textinput/button forms */
|
|
||||||
.hform .field {
|
|
||||||
display: flex;
|
|
||||||
max-width: 30em;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
/* text input - grow to container size */
|
|
||||||
.hform__text {
|
|
||||||
flex: 1 0 auto;
|
|
||||||
}
|
|
||||||
/* button - don't shrink or grow at all */
|
|
||||||
.hform__button {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Click-toggleable */
|
|
||||||
|
|
||||||
.toggle-box {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-box + label {
|
|
||||||
@extend .button;
|
|
||||||
position: relative;
|
|
||||||
> * { display: inline; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-box + label::before {
|
|
||||||
content: "";
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-style: solid;
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-box + label::before {
|
|
||||||
border-width: 0.5em 0 0.5em 0.9em;
|
|
||||||
border-color: transparent transparent transparent $foreground_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-box:checked + label::before {
|
|
||||||
border-width: 0.9em 0.5em 0;
|
|
||||||
border-color: $foreground_color transparent transparent transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-box-container {
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-box:checked + label + .toggle-box-container {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-box:checked + label + .toggle-box-container > .toggle-box-container__content {
|
|
||||||
margin-top: $block_spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
select.input, select.input:focus {
|
|
||||||
-moz-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
background: linear-gradient(45deg, transparent 50%, $foreground_color 50%) calc(100% - 15px) 12px/5px 5px no-repeat,linear-gradient(135deg, $foreground_color 50%, transparent 50%) calc(100% - 10px) 12px/5px 5px no-repeat;
|
|
||||||
padding-right: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
select.input:hover, select.input:focus:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: $input_color_active;
|
|
||||||
}
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
@mixin even-odd {
|
|
||||||
&:nth-child(odd) {
|
|
||||||
background: $background_odd_color;
|
|
||||||
}
|
|
||||||
&:nth-child(even) {
|
|
||||||
background: $background_even_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Used in tag changes, among other things. See the definition of
|
|
||||||
* _odd_color and _even_color for more information on cross-theme customization */
|
|
||||||
|
|
||||||
//success bgs
|
|
||||||
&:nth-child(odd).success,
|
|
||||||
&:nth-child(odd) .success {
|
|
||||||
background: $success_odd_color;
|
|
||||||
}
|
|
||||||
&:nth-child(even).success,
|
|
||||||
&:nth-child(even) .success {
|
|
||||||
background: $success_even_color;
|
|
||||||
}
|
|
||||||
&:nth-child(even) &:nth-child(odd).success,
|
|
||||||
&:nth-child(even) &:nth-child(odd) .success {
|
|
||||||
background: $success_odd_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
//warning bgs
|
|
||||||
&:nth-child(odd).warning,
|
|
||||||
&:nth-child(odd) .warning {
|
|
||||||
background: $warning_odd_color;
|
|
||||||
}
|
|
||||||
&:nth-child(even).warning,
|
|
||||||
&:nth-child(even) .warning {
|
|
||||||
background: $warning_even_color;
|
|
||||||
}
|
|
||||||
&:nth-child(even) &:nth-child(odd).warning,
|
|
||||||
&:nth-child(even) &:nth-child(odd) .warning {
|
|
||||||
background: $warning_odd_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
//danger bg
|
|
||||||
&:nth-child(odd).danger,
|
|
||||||
&:nth-child(odd) .danger {
|
|
||||||
background: $danger_odd_color;
|
|
||||||
}
|
|
||||||
&:nth-child(even).danger,
|
|
||||||
&:nth-child(even) .danger {
|
|
||||||
background: $danger_even_color;
|
|
||||||
}
|
|
||||||
&:nth-child(even) &:nth-child(odd).danger,
|
|
||||||
&:nth-child(even) &:nth-child(odd) .danger {
|
|
||||||
background: $danger_odd_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin number-wrap($color) {
|
|
||||||
display: inline-flex;
|
|
||||||
padding: 0 6px;
|
|
||||||
margin-left: 6px;
|
|
||||||
line-height: inherit;
|
|
||||||
font-size: 16px;
|
|
||||||
text-align: center;
|
|
||||||
background: $color;
|
|
||||||
}
|
|
||||||
|
|
@ -1,299 +0,0 @@
|
||||||
.header {
|
|
||||||
background: $header_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header__force-right {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
$search_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMjE2IDgzMnEwLTE4NS0xMzEuNS0zMTYuNXQtMzE2LjUtMTMxLjUtMzE2LjUgMTMxLjUtMTMxLjUgMzE2LjUgMTMxLjUgMzE2LjUgMzE2LjUgMTMxLjUgMzE2LjUtMTMxLjUgMTMxLjUtMzE2LjV6bTUxMiA4MzJxMCA1Mi0zOCA5MHQtOTAgMzhxLTU0IDAtOTAtMzhsLTM0My0zNDJxLTE3OSAxMjQtMzk5IDEyNC0xNDMgMC0yNzMuNS01NS41dC0yMjUtMTUwLTE1MC0yMjUtNTUuNS0yNzMuNSA1NS41LTI3My41IDE1MC0yMjUgMjI1LTE1MCAyNzMuNS01NS41IDI3My41IDU1LjUgMjI1IDE1MCAxNTAgMjI1IDU1LjUgMjczLjVxMCAyMjAtMTI0IDM5OWwzNDMgMzQzcTM3IDM3IDM3IDkweiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
|
|
||||||
$camera_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik04OTYgNjcycTExOSAwIDIwMy41IDg0LjV0ODQuNSAyMDMuNS04NC41IDIwMy41LTIwMy41IDg0LjUtMjAzLjUtODQuNS04NC41LTIwMy41IDg0LjUtMjAzLjUgMjAzLjUtODQuNXptNzA0LTQxNnExMDYgMCAxODEgNzV0NzUgMTgxdjg5NnEwIDEwNi03NSAxODF0LTE4MSA3NWgtMTQwOHEtMTA2IDAtMTgxLTc1dC03NS0xODF2LTg5NnEwLTEwNiA3NS0xODF0MTgxLTc1aDIyNGw1MS0xMzZxMTktNDkgNjkuNS04NC41dDEwMy41LTM1LjVoNTEycTUzIDAgMTAzLjUgMzUuNXQ2OS41IDg0LjVsNTEgMTM2aDIyNHptLTcwNCAxMTUycTE4NSAwIDMxNi41LTEzMS41dDEzMS41LTMxNi41LTEzMS41LTMxNi41LTMxNi41LTEzMS41LTMxNi41IDEzMS41LTEzMS41IDMxNi41IDEzMS41IDMxNi41IDMxNi41IDEzMS41eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
|
|
||||||
$help_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMDg4IDEyNTZ2MjQwcTAgMTYtMTIgMjh0LTI4IDEyaC0yNDBxLTE2IDAtMjgtMTJ0LTEyLTI4di0yNDBxMC0xNiAxMi0yOHQyOC0xMmgyNDBxMTYgMCAyOCAxMnQxMiAyOHptMzE2LTYwMHEwIDU0LTE1LjUgMTAxdC0zNSA3Ni41LTU1IDU5LjUtNTcuNSA0My41LTYxIDM1LjVxLTQxIDIzLTY4LjUgNjV0LTI3LjUgNjdxMCAxNy0xMiAzMi41dC0yOCAxNS41aC0yNDBxLTE1IDAtMjUuNS0xOC41dC0xMC41LTM3LjV2LTQ1cTAtODMgNjUtMTU2LjV0MTQzLTEwOC41cTU5LTI3IDg0LTU2dDI1LTc2cTAtNDItNDYuNS03NHQtMTA3LjUtMzJxLTY1IDAtMTA4IDI5LTM1IDI1LTEwNyAxMTUtMTMgMTYtMzEgMTYtMTIgMC0yNS04bC0xNjQtMTI1cS0xMy0xMC0xNS41LTI1dDUuNS0yOHExNjAtMjY2IDQ2NC0yNjYgODAgMCAxNjEgMzF0MTQ2IDgzIDEwNiAxMjcuNSA0MSAxNTguNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");
|
|
||||||
$notification_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik05MTIgMTY5NnEwLTE2LTE2LTE2LTU5IDAtMTAxLjUtNDIuNXQtNDIuNS0xMDEuNXEwLTE2LTE2LTE2dC0xNiAxNnEwIDczIDUxLjUgMTI0LjV0MTI0LjUgNTEuNXExNiAwIDE2LTE2em04MTYtMjg4cTAgNTItMzggOTB0LTkwIDM4aC00NDhxMCAxMDYtNzUgMTgxdC0xODEgNzUtMTgxLTc1LTc1LTE4MWgtNDQ4cS01MiAwLTkwLTM4dC0zOC05MHE1MC00MiA5MS04OHQ4NS0xMTkuNSA3NC41LTE1OC41IDUwLTIwNiAxOS41LTI2MHEwLTE1MiAxMTctMjgyLjV0MzA3LTE1OC41cS04LTE5LTgtMzkgMC00MCAyOC02OHQ2OC0yOCA2OCAyOCAyOCA2OHEwIDIwLTggMzkgMTkwIDI4IDMwNyAxNTguNXQxMTcgMjgyLjVxMCAxMzkgMTkuNSAyNjB0NTAgMjA2IDc0LjUgMTU4LjUgODUgMTE5LjUgOTEgODh6IiBmaWxsPSIjZmZmIi8+PC9zdmc+");
|
|
||||||
$message_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNzkyIDcxMHY3OTRxMCA2Ni00NyAxMTN0LTExMyA0N2gtMTQ3MnEtNjYgMC0xMTMtNDd0LTQ3LTExM3YtNzk0cTQ0IDQ5IDEwMSA4NyAzNjIgMjQ2IDQ5NyAzNDUgNTcgNDIgOTIuNSA2NS41dDk0LjUgNDggMTEwIDI0LjVoMnE1MSAwIDExMC0yNC41dDk0LjUtNDggOTIuNS02NS41cTE3MC0xMjMgNDk4LTM0NSA1Ny0zOSAxMDAtODd6bTAtMjk0cTAgNzktNDkgMTUxdC0xMjIgMTIzcS0zNzYgMjYxLTQ2OCAzMjUtMTAgNy00Mi41IDMwLjV0LTU0IDM4LTUyIDMyLjUtNTcuNSAyNy01MCA5aC0ycS0yMyAwLTUwLTl0LTU3LjUtMjctNTItMzIuNS01NC0zOC00Mi41LTMwLjVxLTkxLTY0LTI2Mi0xODIuNXQtMjA1LTE0Mi41cS02Mi00Mi0xMTctMTE1LjV0LTU1LTEzNi41cTAtNzggNDEuNS0xMzB0MTE4LjUtNTJoMTQ3MnE2NSAwIDExMi41IDQ3dDQ3LjUgMTEzeiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
|
|
||||||
$message_unread_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNzkyIDcxMHY3OTRxMCA2Ni00NyAxMTN0LTExMyA0N2gtMTQ3MnEtNjYgMC0xMTMtNDd0LTQ3LTExM3YtNzk0cTQ0IDQ5IDEwMSA4NyAzNjIgMjQ2IDQ5NyAzNDUgNTcgNDIgOTIuNSA2NS41dDk0LjUgNDggMTEwIDI0LjVoMnE1MSAwIDExMC0yNC41dDk0LjUtNDggOTIuNS02NS41cTE3MC0xMjMgNDk4LTM0NSA1Ny0zOSAxMDAtODd6bTAtMjk0cTAgNzktNDkgMTUxdC0xMjIgMTIzcS0zNzYgMjYxLTQ2OCAzMjUtMTAgNy00Mi41IDMwLjV0LTU0IDM4LTUyIDMyLjUtNTcuNSAyNy01MCA5aC0ycS0yMyAwLTUwLTl0LTU3LjUtMjctNTItMzIuNS01NC0zOC00Mi41LTMwLjVxLTkxLTY0LTI2Mi0xODIuNXQtMjA1LTE0Mi41cS02Mi00Mi0xMTctMTE1LjV0LTU1LTEzNi41cTAtNzggNDEuNS0xMzB0MTE4LjUtNTJoMTQ3MnE2NSAwIDExMi41IDQ3dDQ3LjUgMTEzeiIgZmlsbD0iI2Y4MCIvPjwvc3ZnPgo=");
|
|
||||||
|
|
||||||
i.fa-embedded--search {
|
|
||||||
background: $search_icon center 0px / 16px 16px no-repeat;
|
|
||||||
padding-left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
i.fa-embedded--camera {
|
|
||||||
background: $camera_icon center 1px / 16px 16px no-repeat;
|
|
||||||
padding-left: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
i.fa-embedded--help {
|
|
||||||
background: $help_icon 4px -1px / 19px 19px no-repeat;
|
|
||||||
padding-left: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
i.fa-embedded--notification {
|
|
||||||
background: $notification_icon center / 15px 15px no-repeat;
|
|
||||||
padding-left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-notification-count="0"] {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
i.fa-embedded--message {
|
|
||||||
background: $message_icon center / 16px 16px no-repeat;
|
|
||||||
padding-left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
i.fa-embedded--unread-message {
|
|
||||||
background: $message_unread_icon center / 16px 16px no-repeat;
|
|
||||||
padding-left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// For text preceded by an icon
|
|
||||||
.fa__text {
|
|
||||||
padding-left: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.header__link {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0 $header_spacing;
|
|
||||||
line-height: $header_height;
|
|
||||||
font-size: $header_font_size;
|
|
||||||
color: $text_light_color;
|
|
||||||
background: $header_color;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.header__link:hover, .header__dropdown:hover > a {
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: $header_hover_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header__input, .header__input:focus {
|
|
||||||
padding: 0 $header_field_spacing;
|
|
||||||
border: none;
|
|
||||||
height: $header_field_height;
|
|
||||||
|
|
||||||
background: $header_field_color;
|
|
||||||
color: $text_light_color;
|
|
||||||
-webkit-text-fill-color: $text_light_color;
|
|
||||||
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
/* reset rounded borders on iOS/Safari */
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.header__counter {
|
|
||||||
@include number-wrap($header_hover_color);
|
|
||||||
}
|
|
||||||
|
|
||||||
select.header__input, select.header__input:focus {
|
|
||||||
/* in case of <select>, a mere border-radius: 0; rule is not sufficient */
|
|
||||||
appearance: none;
|
|
||||||
/* setting "appearance: none;" removes dropdown arrow; the solution is to create a custom one:
|
|
||||||
* (based on http://stackoverflow.com/a/28274325) the first two items create left and right triangles
|
|
||||||
* that match up to create an arrow, the third one specifies dropdown background */
|
|
||||||
background: linear-gradient(45deg, transparent 50%, $text_light_color 50%) calc(100% - 15px) 12px / 5px 5px no-repeat,
|
|
||||||
linear-gradient(135deg, $text_light_color 50%, transparent 50%) calc(100% - 10px) 12px / 5px 5px no-repeat;
|
|
||||||
background-color: $header_field_color;
|
|
||||||
/* prevent the custom arrow from overlapping the content */
|
|
||||||
padding-right: 25px;
|
|
||||||
&:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: $header_field_hover_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Remove dropdown arrow in IE11 - not needed in Edge */
|
|
||||||
&::-ms-expand {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header__input--search {
|
|
||||||
width: 18vw;
|
|
||||||
max-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* fix webkit's invisible coloring of the search bar */
|
|
||||||
.header__input--search:-webkit-autofill,
|
|
||||||
.header__input--search:-webkit-autofill:hover,
|
|
||||||
.header__input--search:-webkit-autofill:focus {
|
|
||||||
-webkit-text-fill-color: $text_light_color;
|
|
||||||
box-shadow: 0 0 0 1000px $header_field_color inset;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header__search__button {
|
|
||||||
border: none;
|
|
||||||
// Chrome loves extra padding for some reason
|
|
||||||
padding-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
line-height: $header_field_height;
|
|
||||||
|
|
||||||
background: $header_field_color;
|
|
||||||
color: $text_light_color;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
background: $header_field_hover_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header__filter-form {
|
|
||||||
max-width: 15em; /* prevent long filter names from causing overflow */
|
|
||||||
margin: $header_field_vertical_spacing $header_field_spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.header__link-user {
|
|
||||||
display: flex;
|
|
||||||
padding: $header_field_vertical_spacing $header_field_spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.header__link-user__dropdown-arrow {
|
|
||||||
padding: 0 9px;
|
|
||||||
background: linear-gradient(45deg, transparent 50%, $text_light_color 50%) calc(100% - 5px) 12px / 5px 5px no-repeat,
|
|
||||||
linear-gradient(135deg, $text_light_color 50%, transparent 50%) calc(100%) 12px / 5px 5px no-repeat;
|
|
||||||
background-color: $header_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.header__link-user__dropdown-arrow:hover,
|
|
||||||
.header__dropdown:hover span.header__link-user__dropdown-arrow {
|
|
||||||
background-color: $header_hover_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header--secondary {
|
|
||||||
background: $header_secondary_color;
|
|
||||||
line-height: $header_sub_height;
|
|
||||||
|
|
||||||
a {
|
|
||||||
line-height: $header_sub_height;
|
|
||||||
color: $foreground_color;
|
|
||||||
background: $header_secondary_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover, .header__dropdown:hover > a {
|
|
||||||
background-color: $header_secondary_hover_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
div {
|
|
||||||
height: $header_sub_height;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.header__counter {
|
|
||||||
@include number-wrap($header_secondary_hover_color);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
span.header__counter__admin {
|
|
||||||
@include number-wrap($header_admin_hover_color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header--secondary__admin-links {
|
|
||||||
margin-right: $header_spacing;
|
|
||||||
background: $header_admin_color;
|
|
||||||
|
|
||||||
a {
|
|
||||||
background: $header_admin_color;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
background: $header_admin_hover_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Flash notices */
|
|
||||||
|
|
||||||
.flash {
|
|
||||||
line-height: $header_field_height;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flash--site-notice {
|
|
||||||
background: $site_notice_color;
|
|
||||||
color: $text_light_color;
|
|
||||||
a, a:active, a:visited {
|
|
||||||
text-decoration: underline;
|
|
||||||
color: $site_notice_link_color;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: $site_notice_link_hover_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.flash--warning {
|
|
||||||
color: $foreground_color;
|
|
||||||
background: $warning_light_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flash--success {
|
|
||||||
color: $foreground_color;
|
|
||||||
background: $success_light_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile layout */
|
|
||||||
|
|
||||||
@media (max-width: $min_px_width_for_desktop_layout) {
|
|
||||||
.header > div {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header__search {
|
|
||||||
width: 100%;
|
|
||||||
order: 1; /* sets the item to be displayed after .header__row__right, i.e. on a new line */
|
|
||||||
}
|
|
||||||
|
|
||||||
.header__input--search {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
select.header__input, select.header__input:focus {
|
|
||||||
/* Using an absolute max-width resolves an issue with
|
|
||||||
* Chrome on small viewports, where a long filter
|
|
||||||
* name would cause a new row to be added. */
|
|
||||||
max-width: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header--secondary__admin-links {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flash {
|
|
||||||
padding: 0 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.header__counter__admin {
|
|
||||||
margin-left: 1vw;
|
|
||||||
padding: 0 1vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Desktop layout */
|
|
||||||
|
|
||||||
@media (min-width: $min_px_width_for_desktop_layout) {
|
|
||||||
.header > div, .flash {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flash {
|
|
||||||
width: 100%;
|
|
||||||
padding-left: $layout_side_margin;
|
|
||||||
padding-right: $layout_side_margin;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout--center-aligned {
|
|
||||||
.header > div {
|
|
||||||
padding-left: $centered_layout_side_margin;
|
|
||||||
padding-right: $centered_layout_side_margin;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flash {
|
|
||||||
padding-left: $centered_layout_side_margin + $header_spacing;
|
|
||||||
padding-right: $centered_layout_side_margin + $header_spacing;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $max_px_width_for_limited_desktop_layout) and (min-width: $min_px_width_for_desktop_layout) {
|
|
||||||
.header > div {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,420 +0,0 @@
|
||||||
@media (max-width: $min_px_width_for_desktop_layout) {
|
|
||||||
.hide-mobile {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $min_px_width_for_desktop_thumb) {
|
|
||||||
.hide-mobile-t {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $max_px_width_for_limited_desktop_layout) and (min-width: $min_px_width_for_desktop_layout) {
|
|
||||||
.hide-limited-desktop {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $min_px_width_for_desktop_layout) {
|
|
||||||
.hide-desktop {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $min_px_width_for_desktop_thumb) {
|
|
||||||
.hide-desktop-t {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#burger {
|
|
||||||
font-size: 18px;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 200px;
|
|
||||||
height: 100%;
|
|
||||||
display: none;
|
|
||||||
overflow: auto;
|
|
||||||
background: $meta_color;
|
|
||||||
padding: 5px;
|
|
||||||
a {
|
|
||||||
background: $meta_color;
|
|
||||||
color: $foreground_color;
|
|
||||||
display: block;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
background: $base_color;
|
|
||||||
color: $text_light_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#container {
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-height: 100vh;
|
|
||||||
height: 100%;
|
|
||||||
margin: auto;
|
|
||||||
width: 100%;
|
|
||||||
background: $page_background_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
margin-top: $header_spacing;
|
|
||||||
margin-bottom: $header_spacing;
|
|
||||||
flex: 1 0 auto;
|
|
||||||
clear: both;
|
|
||||||
|
|
||||||
> h1 {
|
|
||||||
margin: 0 0 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $min_px_width_for_desktop_layout) {
|
|
||||||
padding: 0 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: $min_px_width_for_desktop_layout) {
|
|
||||||
.layout--wide, .layout--medium, .layout--narrow {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout--narrow {
|
|
||||||
width: 96vw;
|
|
||||||
max-width: $limited_layout_width;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout--medium {
|
|
||||||
width: 96vw;
|
|
||||||
max-width: $medium_layout_width;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout--wide {
|
|
||||||
width: 100%;
|
|
||||||
padding-left: $layout_side_margin;
|
|
||||||
padding-right: $layout_side_margin;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout--center-aligned {
|
|
||||||
.layout--medium, .layout--narrow {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout--wide {
|
|
||||||
padding-left: $centered_layout_side_margin;
|
|
||||||
padding-right: $centered_layout_side_margin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#container:not(.layout--center-aligned) #content {
|
|
||||||
padding-left: $layout_side_margin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Use the following two classes to center content when user has layout centering enabled: */
|
|
||||||
// TODO replace this bullshit naming, this is not actually BEM at all and makes no sense
|
|
||||||
#container.layout--center-aligned .center--layout {
|
|
||||||
justify-content: center;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container.layout--center-aligned .center--layout--flex {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding-top: 6px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: $foreground_half_color;
|
|
||||||
background: $background_color;
|
|
||||||
line-height: 14px;
|
|
||||||
|
|
||||||
#footer_content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footercol {
|
|
||||||
flex: 1 0 auto;
|
|
||||||
width: auto;
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
margin: 3px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.footercol + .footercol {
|
|
||||||
margin-left: 15px;
|
|
||||||
}
|
|
||||||
#serving_info {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex--centered {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex--center-distributed {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Mostly for the header
|
|
||||||
.flex--start-bunched {
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex--end-bunched {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $min_px_width_for_desktop_layout) {
|
|
||||||
.flex--maybe-wrap {
|
|
||||||
flex-wrap: wrap !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer {
|
|
||||||
align-items: normal !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer_content {
|
|
||||||
flex-direction: column !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footercol {
|
|
||||||
margin-left: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex--maybe-wrap {
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex--no-wrap {
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex--wrap {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex__right {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex__grow {
|
|
||||||
flex: 1 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex__shrink {
|
|
||||||
flex: 0 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex__fixed {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex--column {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex--spaced-out {
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid {
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $min_px_width_for_desktop_layout) {
|
|
||||||
.stretched-mobile-links {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
/* Do not use a descendant selector here as it affects dropdowns */
|
|
||||||
> a, span {
|
|
||||||
text-align: center;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
padding: 0 1vw; /* Having smaller padding makes it harder to click the right link on small mobile screens */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.alternating-color {
|
|
||||||
@include even-odd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spacing-right {
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spacing-left {
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-layout {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
@media (max-width: $min_px_width_for_desktop_layout) {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-layout__left {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
width: 326px;
|
|
||||||
margin-right: $header_spacing;
|
|
||||||
word-wrap: break-word;
|
|
||||||
|
|
||||||
@media (max-width: $min_px_width_for_desktop_layout) {
|
|
||||||
margin-right: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-layout__main {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
word-wrap: break-word;
|
|
||||||
/* prevent really long words from overflowing things */
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
figure {
|
|
||||||
display: table;
|
|
||||||
text-align: center;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
max-width: 400px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
figcaption {
|
|
||||||
display: block;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-preview-trixie {
|
|
||||||
align-self: flex-end; /* place the image next to the theme switch (align it to the bottom of the container) */
|
|
||||||
min-width: 0; /* allow the image to be downsized */
|
|
||||||
padding-left: $block_spacing; /* on narrow screens, the image would sit uncomfortably close to the text */
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-list__label {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
.table-list__label__text,
|
|
||||||
.table-list__label__input {
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-list__label__text {
|
|
||||||
flex: 1 0 30%;
|
|
||||||
|
|
||||||
@media (min-width: $min_px_width_for_desktop_layout) {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-list__label__input {
|
|
||||||
flex: 1 1 60%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.permission-choices {
|
|
||||||
display: flex;
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.permission-choice__label {
|
|
||||||
input {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
&:checked + {
|
|
||||||
.permission-option--yes {
|
|
||||||
border-color: $success_color;
|
|
||||||
background-color: $success_light_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.permission-option--no {
|
|
||||||
border-color: $danger_color;
|
|
||||||
background-color: $danger_light_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover + {
|
|
||||||
.permission-option--yes {
|
|
||||||
background-color: $success_light_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.permission-option--no {
|
|
||||||
background-color: $danger_light_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.permission-option {
|
|
||||||
text-align: center;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.choice-text {
|
|
||||||
display: flex;
|
|
||||||
text-align: center;
|
|
||||||
padding: 4px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.minimal {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.minimal__message {
|
|
||||||
padding: 30px;
|
|
||||||
max-width: 560px;
|
|
||||||
width: 100%;
|
|
||||||
margin: auto;
|
|
||||||
text-align: left;
|
|
||||||
background-color: $header_secondary_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.minimal__message__header {
|
|
||||||
margin: 0 0 10px 0;
|
|
||||||
}
|
|
||||||
60
assets/css/common/_measurements.scss
Normal file
60
assets/css/common/_measurements.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
$min-desktop-width: 1280px;
|
||||||
|
$max-phone-width: 700px;
|
||||||
|
$narrow-layout-width: 960px;
|
||||||
|
$medium-layout-width: $min-desktop-width;
|
||||||
|
|
||||||
|
$font-family-base: verdana, arial, helvetica, sans-serif;
|
||||||
|
$font-family-monospace: "Droid Sans Mono", monospace;
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--padding-tiny: 4px;
|
||||||
|
--padding-small: 0.5em;
|
||||||
|
--padding-normal: 1em;
|
||||||
|
--padding-large: 2em;
|
||||||
|
|
||||||
|
--block-header-height: 2.2em;
|
||||||
|
|
||||||
|
--navbar-size: 40px;
|
||||||
|
--navbar-secondary-size: 36px;
|
||||||
|
--navbar-avatar-size: 36px;
|
||||||
|
--navbar-input-size: 32px;
|
||||||
|
|
||||||
|
--button-group-height: 2em;
|
||||||
|
--button-group-tall-height: 2.5em;
|
||||||
|
--button-group-small-height: 1.5em;
|
||||||
|
|
||||||
|
--column-left-width: 360px;
|
||||||
|
|
||||||
|
--border-radius: 4px;
|
||||||
|
|
||||||
|
--media-container-width: 225px;
|
||||||
|
--media-tiny-container-width: 50px;
|
||||||
|
--media-small-container-width: 125px;
|
||||||
|
--media-medium-container-width: 250px;
|
||||||
|
--media-large-container-width: 500px;
|
||||||
|
--media-full-container-width: 100%;
|
||||||
|
--media-featured-width: 358px;
|
||||||
|
--media-header-height: 22px;
|
||||||
|
|
||||||
|
--font-family: #{$font-family-base};
|
||||||
|
--font-family-monospace: #{$font-family-monospace};
|
||||||
|
|
||||||
|
--font-size: 14px;
|
||||||
|
--font-tiny-size: 12px;
|
||||||
|
--font-header-size: 16px;
|
||||||
|
--font-h1-size: 1.5em;
|
||||||
|
--font-h2-size: 1.35em;
|
||||||
|
--font-h3-size: 1.2em;
|
||||||
|
--font-h4-size: 1.1em;
|
||||||
|
--font-h5-size: 1em;
|
||||||
|
--font-h6-size: 1em;
|
||||||
|
|
||||||
|
--input-text-height: 9em;
|
||||||
|
|
||||||
|
--min-desktop-width: #{$min-desktop-width};
|
||||||
|
--max-phone-width: #{$max-phone-width};
|
||||||
|
--medium-layout-width: #{$medium-layout-width};
|
||||||
|
--narrow-layout-width: #{$narrow-layout-width};
|
||||||
|
|
||||||
|
--transition-animation-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
@ -1,114 +0,0 @@
|
||||||
$media_border: 1px solid $media_box_color !default;
|
|
||||||
$media_over_border: 1px dotted $vote_down_color;
|
|
||||||
|
|
||||||
.media-box {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
border: $media_border;
|
|
||||||
margin: 0 6px 6px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-box.over {
|
|
||||||
border: $media_over_border;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-box__header {
|
|
||||||
min-width: 100%;
|
|
||||||
background: $media_box_color;
|
|
||||||
color: $foreground_color;
|
|
||||||
line-height: $media_box_header_height;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Links that take up the whole width of .media-box (title links) should use this class along with .media-box__header (without containers) */
|
|
||||||
a.media-box__header--link {
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
font-weight: bold;
|
|
||||||
color: $media_box_header_link_text_color;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $media_box_header_link_text_hover_color;
|
|
||||||
background-color: $media_box_hover_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Containers with a row of links (e.g. image thumbnail header) should use this class. */
|
|
||||||
.media-box__header--link-row > a {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-box__header--link-row > a, .media-box__overlay {
|
|
||||||
line-height: $media_box_header_height;
|
|
||||||
padding: 0 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-box__header--small {
|
|
||||||
width: 150px;
|
|
||||||
font-size: 11px;
|
|
||||||
a {
|
|
||||||
padding: 0 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-box__header--unselected {
|
|
||||||
background-color: $danger_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-box__header--selected {
|
|
||||||
background-color: $success_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: properly fix this
|
|
||||||
.media-box__content {
|
|
||||||
.image-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-box__content--featured {
|
|
||||||
width: 326px;
|
|
||||||
height: 326px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-box__content--large {
|
|
||||||
width: 254px;
|
|
||||||
height: 254px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-box__content--small {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-box__overlay {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 4;
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
font-weight: bold;
|
|
||||||
word-wrap: break-word;
|
|
||||||
color: $image_overlay_color;
|
|
||||||
background: $image_overlay_background_color;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumb_small .media-box__overlay {
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumb_tiny .media-box__overlay {
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TODO: replace absolute positioning with a more flexible solution */
|
|
||||||
.media-box__overlay:nth-child(2) {
|
|
||||||
top: $media_box_header_height;
|
|
||||||
}
|
|
||||||
58
assets/css/common/_mixins.scss
Normal file
58
assets/css/common/_mixins.scss
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
@mixin if-desktop {
|
||||||
|
@media (min-width: $min-desktop-width + 1) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin if-tablet {
|
||||||
|
@media (max-width: $min-desktop-width) and (min-width: $max-phone-width + 1) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin if-phone {
|
||||||
|
@media (max-width: $max-phone-width) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin if-mobile {
|
||||||
|
@media (max-width: $min-desktop-width) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin even-odd-type($type) {
|
||||||
|
&:nth-child(odd).#{$type},
|
||||||
|
&:nth-child(odd) .#{$type} {
|
||||||
|
background: var(--#{$type}-color);
|
||||||
|
}
|
||||||
|
&:nth-child(even).#{$type},
|
||||||
|
&:nth-child(even) .#{$type} {
|
||||||
|
background: var(--#{$type}-dark-color);
|
||||||
|
}
|
||||||
|
&:nth-child(even) &:nth-child(odd).#{$type},
|
||||||
|
&:nth-child(even) &:nth-child(odd) .#{$type} {
|
||||||
|
background: var(--#{$type}-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin even-odd {
|
||||||
|
&:nth-child(odd) {
|
||||||
|
background: var(--secondary-dark-color);
|
||||||
|
}
|
||||||
|
&:nth-child(even) {
|
||||||
|
background: var(--secondary-muted-color);;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include even-odd-type(primary);
|
||||||
|
@include even-odd-type(success);
|
||||||
|
@include even-odd-type(warning);
|
||||||
|
@include even-odd-type(danger);
|
||||||
|
@include even-odd-type(information);
|
||||||
|
@include even-odd-type(purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin animated-transition {
|
||||||
|
transition: color var(--transition-animation-duration) ease, background var(--transition-animation-duration) ease;
|
||||||
|
}
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
// For more shame related to this, see the <style> element inside app/views/adverts/index.html.slim
|
|
||||||
// Until HTML/CSS includes a native way to resize iframes based on their content, we do this approximation with viewport units.
|
|
||||||
.ad-sandbox {
|
|
||||||
height: 18vw;
|
|
||||||
max-height: 113px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
.line-spacing {
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa--important{
|
|
||||||
color: #fc7f1c;
|
|
||||||
}
|
|
||||||
4
assets/css/elements/_avatar.scss
Normal file
4
assets/css/elements/_avatar.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
.avatar--navbar {
|
||||||
|
width: var(--navbar-avatar-size);
|
||||||
|
height: var(--navbar-avatar-size);
|
||||||
|
}
|
||||||
34
assets/css/elements/_base.scss
Normal file
34
assets/css/elements/_base.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
html {
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-size: var(--font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
background: var(--background-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
padding: var(--padding-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include if-mobile {
|
||||||
|
main {
|
||||||
|
padding: var(--padding-small);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:active, a:visited {
|
||||||
|
color: var(--link-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--link-hover-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
132
assets/css/elements/_block.scss
Normal file
132
assets/css/elements/_block.scss
Normal file
|
|
@ -0,0 +1,132 @@
|
||||||
|
@mixin block-type($type) {
|
||||||
|
.block--#{$type} {
|
||||||
|
border-color: var(--#{$type}-border-color);
|
||||||
|
|
||||||
|
.block__header {
|
||||||
|
background: var(--#{$type}-color);
|
||||||
|
box-shadow: 0 -1px var(--#{$type}-dark-color) inset;
|
||||||
|
border-bottom: 1px solid var(--#{$type}-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block__footer {
|
||||||
|
background: var(--#{$type}-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.block--muted {
|
||||||
|
border-color: var(--#{$type}-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.block--fixed {
|
||||||
|
background: var(--#{$type}-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
& a {
|
||||||
|
color: var(--#{$type}-link-color);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--link-hover-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block {
|
||||||
|
border: 1px solid var(--primary-border-color);
|
||||||
|
margin-bottom: var(--padding-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block--muted {
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block--borderless {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block__content {
|
||||||
|
padding: var(--padding-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block__content--small {
|
||||||
|
padding: var(--padding-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block__footer {
|
||||||
|
@extend .flex__row;
|
||||||
|
background: var(--primary-muted-color);
|
||||||
|
padding: var(--padding-normal);
|
||||||
|
margin: var(--padding-normal);
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block__footer--small {
|
||||||
|
@extend .block__footer;
|
||||||
|
margin: var(--padding-small);
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include if-phone {
|
||||||
|
.block__content {
|
||||||
|
padding: var(--padding-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block__footer {
|
||||||
|
margin: var(--padding-small);
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block__header {
|
||||||
|
line-height: var(--block-header-height);
|
||||||
|
padding: 0 var(--padding-normal);
|
||||||
|
background: var(--primary-muted-color);
|
||||||
|
box-shadow: 0 -1px var(--primary-dark-color) inset;
|
||||||
|
border-bottom: 1px solid var(--primary-border-color);
|
||||||
|
|
||||||
|
& > .fa {
|
||||||
|
margin-right: var(--padding-normal);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block__header--single-item {
|
||||||
|
@extend .block__header;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--link-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block--fixed {
|
||||||
|
padding: var(--padding-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block__tab {
|
||||||
|
padding: var(--padding-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block__header--js-tabbed {
|
||||||
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
& a {
|
||||||
|
display: block;
|
||||||
|
color: var(--text-color);
|
||||||
|
padding: 0 var(--padding-normal);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--background-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
background: var(--background-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include block-type(secondary);
|
||||||
|
@include block-type(success);
|
||||||
|
@include block-type(warning);
|
||||||
|
@include block-type(danger);
|
||||||
|
@include block-type(information);
|
||||||
|
@include block-type(purple);
|
||||||
117
assets/css/elements/_button.scss
Normal file
117
assets/css/elements/_button.scss
Normal file
|
|
@ -0,0 +1,117 @@
|
||||||
|
@mixin button-type($type) {
|
||||||
|
.button--#{$type} {
|
||||||
|
border-color: var(--#{$type}-border-color);
|
||||||
|
|
||||||
|
&.button--important {
|
||||||
|
background: var(--#{$type}-color) !important;
|
||||||
|
box-shadow: 0 -1px var(--#{$type}-dark-color) inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.button:hover {
|
||||||
|
background: var(--#{$type}-dark-color) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button__group--#{$type} {
|
||||||
|
border-color: var(--#{$type}-color);
|
||||||
|
background: var(--#{$type}-dark-color);
|
||||||
|
|
||||||
|
& a {
|
||||||
|
color: var(--#{$type}-border-color);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@include animated-transition;
|
||||||
|
color: var(--text-color);
|
||||||
|
background: var(--#{$type}-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
@include animated-transition;
|
||||||
|
display: block;
|
||||||
|
width: fit-content;
|
||||||
|
font-weight: bold;
|
||||||
|
background: var(--background-color);
|
||||||
|
color: var(--text-color) !important;
|
||||||
|
font-size: var(--padding-normal);
|
||||||
|
padding: var(--padding-small);
|
||||||
|
border: 1px solid var(--primary-border-color);
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@include animated-transition;
|
||||||
|
background: var(--primary-dark-color);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--important {
|
||||||
|
background: var(--primary-color);
|
||||||
|
box-shadow: 0 -1px var(--primary-dark-color) inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button__row {
|
||||||
|
@extend .flex__row;
|
||||||
|
|
||||||
|
& > button {
|
||||||
|
margin-right: var(--padding-small);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button__group {
|
||||||
|
@extend .flex__row;
|
||||||
|
border: 1px solid var(--secondary-color);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
margin-right: var(--padding-normal);
|
||||||
|
background: var(--secondary-dark-color);
|
||||||
|
line-height: var(--button-group-height);
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button__group--tall {
|
||||||
|
line-height: var(--button-group-tall-height)
|
||||||
|
}
|
||||||
|
|
||||||
|
.button__group--small {
|
||||||
|
line-height: var(--button-group-small-height)
|
||||||
|
}
|
||||||
|
|
||||||
|
.button__group .button {
|
||||||
|
border: 0;
|
||||||
|
border-right: var(--secondary-color);
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button__group--single {
|
||||||
|
@extend .button__group;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button__group--standalone {
|
||||||
|
@extend .button__group;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button__group--standalone a {
|
||||||
|
@include animated-transition;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0 var(--padding-small);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@include animated-transition;
|
||||||
|
background: var(--secondary-muted-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include button-type(success);
|
||||||
|
@include button-type(warning);
|
||||||
|
@include button-type(danger);
|
||||||
|
@include button-type(information);
|
||||||
|
@include button-type(purple);
|
||||||
69
assets/css/elements/_dropdown.scss
Normal file
69
assets/css/elements/_dropdown.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
.dropdown {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.dropdown__content {
|
||||||
|
display: block;
|
||||||
|
min-width: 100%;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown__content {
|
||||||
|
background: var(--primary-muted-color);
|
||||||
|
border: 1px solid var(--primary-border-color);
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
& > :not(.hidden) {
|
||||||
|
display: block;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown__content--right {
|
||||||
|
left: inherit;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown__item {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
color: var(--text-color);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.dropdown__text {
|
||||||
|
background: var(--primary-dark-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown__icon {
|
||||||
|
padding: 0 var(--padding-small);
|
||||||
|
background: var(--primary-dark-color);
|
||||||
|
border-right: 1px solid var(--primary-muted-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown__text {
|
||||||
|
padding: 0 var(--padding-small);
|
||||||
|
background: var(--primary-muted-color);
|
||||||
|
border-left: 1px solid var(--primary-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown__separator {
|
||||||
|
margin: 0;
|
||||||
|
border-color: var(--primary-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown__link {
|
||||||
|
padding: 0 var(--padding-small);
|
||||||
|
color: var(--text-color) !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--primary-dark-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
52
assets/css/elements/_flash.scss
Normal file
52
assets/css/elements/_flash.scss
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
@mixin flash-type($type) {
|
||||||
|
.flash--#{$type} {
|
||||||
|
border: 1px solid var(--#{$type}-border-color);
|
||||||
|
box-shadow: 0 -1px var(--#{$type}-dark-color) inset;
|
||||||
|
background: var(--#{$type}-color);
|
||||||
|
|
||||||
|
.flash__icon {
|
||||||
|
border-right: 1px solid var(--#{$type}-dark-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flash__message {
|
||||||
|
border-left: 1px solid var(--#{$type}-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
& a {
|
||||||
|
color: var(--#{$type}-link-color);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--link-hover-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.flash {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
margin: var(--padding-normal);
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include if-phone {
|
||||||
|
.flash {
|
||||||
|
margin: var(--padding-small);
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.flash__icon {
|
||||||
|
@extend .flex__column--centered;
|
||||||
|
padding: var(--padding-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flash__message {
|
||||||
|
padding: var(--padding-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include flash-type(success);
|
||||||
|
@include flash-type(warning);
|
||||||
|
@include flash-type(danger);
|
||||||
|
@include flash-type(information);
|
||||||
|
@include flash-type(purple);
|
||||||
86
assets/css/elements/_flex.scss
Normal file
86
assets/css/elements/_flex.scss
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex__row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex__column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex__row--centered {
|
||||||
|
@extend .flex__row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex__column--centered {
|
||||||
|
@extend .flex__column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex--centered {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex--center-distributed {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex--no-wrap {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex--wrap {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex__right {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex__grow {
|
||||||
|
flex: 1 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex__shrink {
|
||||||
|
flex: 0 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex__fixed {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex--column {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex--spaced-out {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex--start-bunched {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex--end-bunched {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include if-desktop {
|
||||||
|
.flex--maybe-wrap {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include if-mobile {
|
||||||
|
.flex--maybe-wrap {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
32
assets/css/elements/_heading.scss
Normal file
32
assets/css/elements/_heading.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
@mixin heading($el) {
|
||||||
|
#{$el} {
|
||||||
|
font-size: var(--font-#{$el}-size);
|
||||||
|
font-weight: bold;
|
||||||
|
padding: var(--padding-small) 0;
|
||||||
|
border-bottom: 1px solid var(--primary-border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin heading-type($type) {
|
||||||
|
.heading--#{$type} {
|
||||||
|
border-bottom-color: var(--#{$type}-border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include heading(h1);
|
||||||
|
@include heading(h2);
|
||||||
|
@include heading(h3);
|
||||||
|
@include heading(h4);
|
||||||
|
@include heading(h5);
|
||||||
|
@include heading(h6);
|
||||||
|
|
||||||
|
/* To differentiate between h5 and h6, simply make h6 not bold */
|
||||||
|
h6 {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include heading-type(success);
|
||||||
|
@include heading-type(warning);
|
||||||
|
@include heading-type(danger);
|
||||||
|
@include heading-type(information);
|
||||||
|
@include heading-type(purple);
|
||||||
26
assets/css/elements/_input.scss
Normal file
26
assets/css/elements/_input.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
.input {
|
||||||
|
border: 1px solid var(--secondary-border-color);
|
||||||
|
box-shadow: 0 -1px var(--secondary-dark-color) inset;
|
||||||
|
background: var(--secondary-dark-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: var(--font-family-monospace);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: var(--secondary-border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input--wide {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input--text {
|
||||||
|
height: var(--input-text-height);
|
||||||
|
padding: var(--padding-normal) var(--padding-small);
|
||||||
|
cursor: text;
|
||||||
|
}
|
||||||
17
assets/css/elements/_interaction.scss
Normal file
17
assets/css/elements/_interaction.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
@mixin interaction-type($type) {
|
||||||
|
.interaction--#{$type} {
|
||||||
|
color: var(--#{$type}-color) !important;
|
||||||
|
padding: 0 var(--padding-tiny);
|
||||||
|
|
||||||
|
&.active, &:hover {
|
||||||
|
color: var(--text-color) !important;
|
||||||
|
background-color: var(--#{$type}-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include interaction-type(fave);
|
||||||
|
@include interaction-type(upvote);
|
||||||
|
@include interaction-type(downvote);
|
||||||
|
@include interaction-type(comment);
|
||||||
|
@include interaction-type(hide);
|
||||||
89
assets/css/elements/_layout.scss
Normal file
89
assets/css/elements/_layout.scss
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
.column-layout {
|
||||||
|
@extend .flex__row;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-layout__left {
|
||||||
|
margin-right: var(--padding-normal);
|
||||||
|
width: var(--column-left-width);
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-layout__main {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include if-mobile {
|
||||||
|
.column-layout {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-layout__left {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
@extend .flex__column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
margin: auto;
|
||||||
|
min-height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout--narrow {
|
||||||
|
width: 96vw;
|
||||||
|
max-width: var(--narrow-layout-width);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout--medium {
|
||||||
|
width: 96vw;
|
||||||
|
max-width: var(--medium-layout-width);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include if-desktop {
|
||||||
|
.centered-layout {
|
||||||
|
.layout--medium, .layout--narrow {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#container.centered-layout .layout--centered {
|
||||||
|
justify-content: center;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container.centered-layout .layout--centered-flex {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacing {
|
||||||
|
margin: var(--padding-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacing--right {
|
||||||
|
margin-right: var(--padding-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacing--left {
|
||||||
|
margin-left: var(--padding-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacing--top {
|
||||||
|
margin-top: var(--padding-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacing--bottom {
|
||||||
|
margin-bottom: var(--padding-normal);
|
||||||
|
}
|
||||||
112
assets/css/elements/_media.scss
Normal file
112
assets/css/elements/_media.scss
Normal file
|
|
@ -0,0 +1,112 @@
|
||||||
|
.image-constrained {
|
||||||
|
@extend .flex__row--centered;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(var(--media-container-width), 1fr));
|
||||||
|
grid-auto-rows: 1fr;
|
||||||
|
grid-gap: var(--padding-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-list::before {
|
||||||
|
content: '';
|
||||||
|
width: 0;
|
||||||
|
padding-bottom: calc(100% + var(--media-header-height));
|
||||||
|
grid-row: 1 / 1;
|
||||||
|
grid-column: 1 / 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include if-phone {
|
||||||
|
.media-list {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(var(--media-small-container-width), 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-box {
|
||||||
|
background: var(--background-color);
|
||||||
|
border: 1px solid var(--secondary-muted-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-box:first-child {
|
||||||
|
grid-row: 1 / 1;
|
||||||
|
grid-column: 1 / 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-box__header {
|
||||||
|
display: flex;
|
||||||
|
background: var(--secondary-color);
|
||||||
|
line-height: var(--media-header-height);
|
||||||
|
padding: 0 var(--padding-small);
|
||||||
|
justify-content: center;
|
||||||
|
font-size: var(--font-tiny-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-box__header--link-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.5fr 1fr 1.5fr 1fr 1fr;
|
||||||
|
text-align: center;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-box__content {
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 100%;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.image-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-box__content--featured {
|
||||||
|
.media-box__image {
|
||||||
|
max-height: var(--media-featured-width);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container {
|
||||||
|
@extend .flex__column--centered;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container a {
|
||||||
|
display: flex;
|
||||||
|
max-height: 100%;
|
||||||
|
|
||||||
|
// For some reason tall images don't center properly within the container
|
||||||
|
// without this hack. I blame CSS.
|
||||||
|
& > img {
|
||||||
|
max-height: 100%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-box__image {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
grid-gap: var(--padding-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-scaled {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-tiny-container {
|
||||||
|
width: var(--media-tiny-container-width);
|
||||||
|
height: var(--media-tiny-container-width);
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumb_tiny {
|
||||||
|
max-width: var(--media-tiny-container-width);
|
||||||
|
max-height: var(--media-tiny-container-width);
|
||||||
|
}
|
||||||
27
assets/css/elements/_mobile.scss
Normal file
27
assets/css/elements/_mobile.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
// Phones.
|
||||||
|
@include if-phone {
|
||||||
|
.hidden--phone {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tablets.
|
||||||
|
@include if-tablet {
|
||||||
|
.hidden--tablet {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Phones and tablets.
|
||||||
|
@include if-mobile {
|
||||||
|
.hidden--mobile {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Anything larger than 1280px (Desktops).
|
||||||
|
@include if-desktop {
|
||||||
|
.hidden--desktop {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
32
assets/css/elements/_separator.scss
Normal file
32
assets/css/elements/_separator.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
@mixin separator-type($type) {
|
||||||
|
.separator--#{$type} {
|
||||||
|
border-color: var(--#{$type}-border-color);
|
||||||
|
|
||||||
|
&.separator--vertical {
|
||||||
|
background: var(--#{$type}-border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.separator {
|
||||||
|
margin: var(--padding-normal) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.separator--thin {
|
||||||
|
margin: var(--padding-small) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.separator--vertical {
|
||||||
|
width: 1px;
|
||||||
|
height: inherit;
|
||||||
|
margin: 0 var(--padding-small);
|
||||||
|
background: var(--primary-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include separator-type(primary);
|
||||||
|
@include separator-type(secondary);
|
||||||
|
@include separator-type(success);
|
||||||
|
@include separator-type(warning);
|
||||||
|
@include separator-type(danger);
|
||||||
|
@include separator-type(information);
|
||||||
|
@include separator-type(purple);
|
||||||
14
assets/css/elements/_table.scss
Normal file
14
assets/css/elements/_table.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
.table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table td, th {
|
||||||
|
padding: var(--padding-small);
|
||||||
|
border: 1px solid var(--secondary-muted-color);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table th {
|
||||||
|
background: var(--secondary-color);
|
||||||
|
}
|
||||||
92
assets/css/themes/dark-blue.scss
Normal file
92
assets/css/themes/dark-blue.scss
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
$background-color: #131a22;
|
||||||
|
$text-color: #e0e0e0;
|
||||||
|
|
||||||
|
$primary-color: #2e4c80;
|
||||||
|
$secondary-color: #434f69;
|
||||||
|
$danger-color: #57261f;
|
||||||
|
$warning-color: #5c472a;
|
||||||
|
$success-color: #255339;
|
||||||
|
$information-color: #1f5057;
|
||||||
|
$purple-color: #501f57;
|
||||||
|
|
||||||
|
$upvote-color: #5b9b26;
|
||||||
|
$downvote-color: #da3412;
|
||||||
|
$fave-color: #a18e27;
|
||||||
|
$comment-color: #b099dd;
|
||||||
|
$hide-color: #da3412;
|
||||||
|
|
||||||
|
$tag-default-color: #1b3c21;
|
||||||
|
$tag-error-color: #4f181d;
|
||||||
|
$tag-rating-color: #113456;
|
||||||
|
$tag-origin-color: #1d1858;
|
||||||
|
$tag-character-color: #193f47;
|
||||||
|
$tag-oc-color: #451f47;
|
||||||
|
$tag-species-color: #362118;
|
||||||
|
$tag-body-type-color: #393939;
|
||||||
|
$tag-content-fanmade-color: #622c4e;
|
||||||
|
$tag-content-official-color: #4b491c;
|
||||||
|
$tag-spoiler-color: #4f3811;
|
||||||
|
|
||||||
|
$spoiler-color: #0f0f0f;
|
||||||
|
|
||||||
|
@mixin tag-color($tagname, $color, $text-percentage: 35%, $border-percentage: 15%) {
|
||||||
|
--tag-#{$tagname}-color: #{$color};
|
||||||
|
--tag-#{$tagname}-border-color: #{lighten($color, $border-percentage)};
|
||||||
|
--tag-#{$tagname}-text-color: #{lighten($color, $text-percentage)};
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin type-color($type, $color) {
|
||||||
|
--#{$type}-color: #{$color};
|
||||||
|
--#{$type}-border-color: #{lighten(desaturate($color, 5%), 25%)};
|
||||||
|
--#{$type}-dark-color: #{darken($color, 15%)};
|
||||||
|
--#{$type}-link-color: #{lighten(saturate($color, 10%), 45%)};
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background-color: #{$background-color};
|
||||||
|
--text-color: #{$text-color};
|
||||||
|
|
||||||
|
--link-color: #{lighten(saturate($primary-color, 7%), 35%)};
|
||||||
|
--link-hover-color: #{$text-color};
|
||||||
|
|
||||||
|
--primary-color: #{$primary-color};
|
||||||
|
--primary-border-color: #{lighten(desaturate($primary-color, 20%), 17%)};
|
||||||
|
--primary-muted-color: #{darken(desaturate($primary-color, 10%), 10%)};
|
||||||
|
--primary-dark-color: #{darken(desaturate($primary-color, 5%), 15%)};
|
||||||
|
|
||||||
|
--secondary-color: #{$secondary-color};
|
||||||
|
--secondary-border-color: #{lighten($secondary-color, 20%)};
|
||||||
|
--secondary-muted-color: #{darken(desaturate($secondary-color, 5%), 10%)};
|
||||||
|
--secondary-dark-color: #{darken($secondary-color, 15%)};
|
||||||
|
--secondary-link-color: #{lighten($secondary-color, 55%)};
|
||||||
|
|
||||||
|
--upvote-color: #{$upvote-color};
|
||||||
|
--downvote-color: #{$downvote-color};
|
||||||
|
--fave-color: #{$fave-color};
|
||||||
|
--comment-color: #{$comment-color};
|
||||||
|
--hide-color: #{$hide-color};
|
||||||
|
|
||||||
|
--spoiler-color: #{$spoiler-color};
|
||||||
|
--spoiler-revealed-color: #{lighten($spoiler-color, 20%)};
|
||||||
|
|
||||||
|
@include type-color(success, $success-color);
|
||||||
|
@include type-color(warning, $warning-color);
|
||||||
|
@include type-color(danger, $danger-color);
|
||||||
|
@include type-color(information, $information-color);
|
||||||
|
@include type-color(purple, $purple-color);
|
||||||
|
|
||||||
|
@include tag-color(default, $tag-default-color);
|
||||||
|
@include tag-color(error, $tag-error-color, 37%);
|
||||||
|
@include tag-color(rating, $tag-rating-color, 37%);
|
||||||
|
@include tag-color(origin, $tag-origin-color, 42%);
|
||||||
|
@include tag-color(character, $tag-character-color);
|
||||||
|
@include tag-color(oc, $tag-oc-color, 40%);
|
||||||
|
@include tag-color(species, $tag-species-color, 37%);
|
||||||
|
@include tag-color(body-type, $tag-body-type-color, 45%, 12%);
|
||||||
|
@include tag-color(content-fanmade, $tag-content-fanmade-color, 40%);
|
||||||
|
@include tag-color(content-official, $tag-content-official-color);
|
||||||
|
@include tag-color(spoiler, $tag-spoiler-color);
|
||||||
|
|
||||||
|
/* Exceptions to mixin colors */
|
||||||
|
--tag-origin-border-color: #{lighten(desaturate($tag-origin-color, 10%), 22%)};
|
||||||
|
}
|
||||||
92
assets/css/themes/dark-purple.scss
Normal file
92
assets/css/themes/dark-purple.scss
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
$background-color: #1d1924;
|
||||||
|
$text-color: #dadada;
|
||||||
|
|
||||||
|
$primary-color: #3e2d5c;
|
||||||
|
$secondary-color: #4f4066;
|
||||||
|
$danger-color: #57261f;
|
||||||
|
$warning-color: #5c472a;
|
||||||
|
$success-color: #255339;
|
||||||
|
$information-color: #1f5057;
|
||||||
|
$purple-color: #501f57;
|
||||||
|
|
||||||
|
$upvote-color: #5b9b26;
|
||||||
|
$downvote-color: #da3412;
|
||||||
|
$fave-color: #a18e27;
|
||||||
|
$comment-color: #b099dd;
|
||||||
|
$hide-color: #da3412;
|
||||||
|
|
||||||
|
$tag-default-color: #1b3c21;
|
||||||
|
$tag-error-color: #4f181d;
|
||||||
|
$tag-rating-color: #113456;
|
||||||
|
$tag-origin-color: #1d1858;
|
||||||
|
$tag-character-color: #193f47;
|
||||||
|
$tag-oc-color: #451f47;
|
||||||
|
$tag-species-color: #362118;
|
||||||
|
$tag-body-type-color: #393939;
|
||||||
|
$tag-content-fanmade-color: #622c4e;
|
||||||
|
$tag-content-official-color: #4b491c;
|
||||||
|
$tag-spoiler-color: #4f3811;
|
||||||
|
|
||||||
|
$spoiler-color: #0f0f0f;
|
||||||
|
|
||||||
|
@mixin tag-color($tagname, $color, $text-percentage: 35%, $border-percentage: 15%) {
|
||||||
|
--tag-#{$tagname}-color: #{$color};
|
||||||
|
--tag-#{$tagname}-border-color: #{lighten($color, $border-percentage)};
|
||||||
|
--tag-#{$tagname}-text-color: #{lighten($color, $text-percentage)};
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin type-color($type, $color) {
|
||||||
|
--#{$type}-color: #{$color};
|
||||||
|
--#{$type}-border-color: #{lighten(desaturate($color, 5%), 30%)};
|
||||||
|
--#{$type}-dark-color: #{darken($color, 15%)};
|
||||||
|
--#{$type}-link-color: #{lighten($color, 45%)};
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background-color: #{$background-color};
|
||||||
|
--text-color: #{$text-color};
|
||||||
|
|
||||||
|
--link-color: #{lighten(saturate($primary-color, 7%), 30%)};
|
||||||
|
--link-hover-color: #{$text-color};
|
||||||
|
|
||||||
|
--primary-color: #{$primary-color};
|
||||||
|
--primary-border-color: #{lighten($primary-color, 20%)};
|
||||||
|
--primary-muted-color: #{darken(desaturate($primary-color, 10%), 10%)};
|
||||||
|
--primary-dark-color: #{darken(desaturate($primary-color, 5%), 15%)};
|
||||||
|
|
||||||
|
--secondary-color: #{$secondary-color};
|
||||||
|
--secondary-border-color: #{lighten($secondary-color, 20%)};
|
||||||
|
--secondary-muted-color: #{darken(desaturate($secondary-color, 5%), 10%)};
|
||||||
|
--secondary-dark-color: #{darken($secondary-color, 15%)};
|
||||||
|
--secondary-link-color: #{lighten($secondary-color, 55%)};
|
||||||
|
|
||||||
|
--upvote-color: #{$upvote-color};
|
||||||
|
--downvote-color: #{$downvote-color};
|
||||||
|
--fave-color: #{$fave-color};
|
||||||
|
--comment-color: #{$comment-color};
|
||||||
|
--hide-color: #{$hide-color};
|
||||||
|
|
||||||
|
--spoiler-color: #{$spoiler-color};
|
||||||
|
--spoiler-revealed-color: #{lighten($spoiler-color, 20%)};
|
||||||
|
|
||||||
|
@include type-color(success, $success-color);
|
||||||
|
@include type-color(warning, $warning-color);
|
||||||
|
@include type-color(danger, $danger-color);
|
||||||
|
@include type-color(information, $information-color);
|
||||||
|
@include type-color(purple, $purple-color);
|
||||||
|
|
||||||
|
@include tag-color(default, $tag-default-color);
|
||||||
|
@include tag-color(error, $tag-error-color, 37%);
|
||||||
|
@include tag-color(rating, $tag-rating-color, 37%);
|
||||||
|
@include tag-color(origin, $tag-origin-color, 42%);
|
||||||
|
@include tag-color(character, $tag-character-color);
|
||||||
|
@include tag-color(oc, $tag-oc-color, 40%);
|
||||||
|
@include tag-color(species, $tag-species-color, 37%);
|
||||||
|
@include tag-color(body-type, $tag-body-type-color, 45%, 12%);
|
||||||
|
@include tag-color(content-fanmade, $tag-content-fanmade-color, 40%);
|
||||||
|
@include tag-color(content-official, $tag-content-official-color);
|
||||||
|
@include tag-color(spoiler, $tag-spoiler-color);
|
||||||
|
|
||||||
|
/* Exceptions to mixin colors */
|
||||||
|
--tag-origin-border-color: #{lighten(desaturate($tag-origin-color, 10%), 22%)};
|
||||||
|
}
|
||||||
|
|
@ -1,192 +0,0 @@
|
||||||
/*
|
|
||||||
* Darker theme
|
|
||||||
*/
|
|
||||||
|
|
||||||
// ///////////////////////////////////
|
|
||||||
// ///// SECTION 1 - MAIN COLORS /////
|
|
||||||
// ///////////////////////////////////
|
|
||||||
|
|
||||||
$background_color: #1d242f;
|
|
||||||
$page_background_color: #141a24;
|
|
||||||
$foreground_color: #e0e0e0;
|
|
||||||
|
|
||||||
$base_color: #546c99;
|
|
||||||
|
|
||||||
$primary_light_color: #1a4c6b;
|
|
||||||
$success_light_color: #144714;
|
|
||||||
$danger_light_color: #66211f;
|
|
||||||
$warning_light_color: #7d4825;
|
|
||||||
|
|
||||||
$destroyed_content_color: #382c2f;
|
|
||||||
|
|
||||||
$meta_color: #191f2a;
|
|
||||||
|
|
||||||
$header_color: #284371;
|
|
||||||
$header_field_color: #1c3252;
|
|
||||||
$header_secondary_color: #1d2b44;
|
|
||||||
$header_admin_color: #3b1d1d;
|
|
||||||
|
|
||||||
$block_header_color: #2e3a52;
|
|
||||||
$block_header_link_text_color: #4f95db;
|
|
||||||
|
|
||||||
$block_header_light_color: #252d3c;
|
|
||||||
$block_header_light_link_text_color: #6198c2;
|
|
||||||
|
|
||||||
$border_color: #2d3649;
|
|
||||||
|
|
||||||
$media_box_color: #3d4657;
|
|
||||||
|
|
||||||
$link_color: #478acc;
|
|
||||||
$link_hover_color: #b099dd;
|
|
||||||
|
|
||||||
$fave_color: #a18e27;
|
|
||||||
$vote_up_color: #5b9b26;
|
|
||||||
$vote_down_color: #da3412;
|
|
||||||
$hide_color: #da3412;
|
|
||||||
|
|
||||||
$assistant_color: #511b4e;
|
|
||||||
|
|
||||||
$tag_normal_color: #4aa158;
|
|
||||||
$tag_category_rating_color: #418dd9;
|
|
||||||
$tag_category_spoiler_color: #d49b39;
|
|
||||||
$tag_category_origin_color: #6f66d6;
|
|
||||||
$tag_category_oc_color: #b157b7;
|
|
||||||
$tag_category_error_color: #d45460;
|
|
||||||
$tag_category_character_color: #4aaabf;
|
|
||||||
$tag_category_content_official_color: #b9b541;
|
|
||||||
$tag_category_content_fanmade_color: #cc8eb5;
|
|
||||||
$tag_category_species_color: #b16b50;
|
|
||||||
$tag_category_body_type_color: #b8b8b8;
|
|
||||||
|
|
||||||
$commission_category_color: #e07b27;
|
|
||||||
|
|
||||||
$site_notice_color: #07070a;
|
|
||||||
|
|
||||||
$image_overlay_color: #ffffff;
|
|
||||||
$image_overlay_background_color: #000000;
|
|
||||||
|
|
||||||
// //////////////////////////////////////
|
|
||||||
// ///// SECTION 2 - DERIVED COLORS /////
|
|
||||||
// //////////////////////////////////////
|
|
||||||
|
|
||||||
$text_light_color: $foreground_color;
|
|
||||||
|
|
||||||
$meta_color: mix($foreground_color, $background_color, 5%);
|
|
||||||
$meta_border_color: mix($foreground_color, $meta_color, 30%);
|
|
||||||
|
|
||||||
$primary_color: saturate(lighten($primary_light_color, 5%), 4%);
|
|
||||||
$success_color: lighten($success_light_color, 4%);
|
|
||||||
$danger_color: lighten($danger_light_color, 5%);
|
|
||||||
$warning_color: lighten($warning_light_color, 6%);
|
|
||||||
|
|
||||||
$header_hover_color: darken($header_color, 8%);
|
|
||||||
$header_field_hover_color: darken($header_hover_color, 4%);
|
|
||||||
$header_secondary_hover_color: darken($header_secondary_color, 4%);
|
|
||||||
|
|
||||||
$header_admin_hover_color: darken($header_admin_color, 5%);
|
|
||||||
|
|
||||||
$block_header_hover_color: adjust_hue(saturate(darken($block_header_color, 4%), 4%), -3deg);
|
|
||||||
$block_header_link_text_hover_color: adjust_hue(desaturate(darken($block_header_link_text_color, 3%), 20%), 6deg);
|
|
||||||
|
|
||||||
$block_header_light_hover_color: adjust_hue(saturate(darken($block_header_light_color, 4%), 10%), -4deg);
|
|
||||||
$block_header_light_link_text_hover_color: adjust_hue(desaturate(darken($block_header_light_link_text_color, 2%), 10%), 8deg);
|
|
||||||
|
|
||||||
$media_box_hover_color: darken($media_box_color, 4%);
|
|
||||||
$media_box_header_link_text_hover_color: desaturate(darken($link_color, 3%), 18%);
|
|
||||||
$media_box_header_link_text_color: $link_color;
|
|
||||||
$media_box_header_link_text_hover_color: darken($media_box_header_link_text_color, 10%);
|
|
||||||
|
|
||||||
$link_dark_color: mix($link_color, $foreground_color, 70%);
|
|
||||||
$link_dark_hover_color: mix($link_hover_color, $foreground_color, 70%);
|
|
||||||
|
|
||||||
$image_show_link_color: $link_dark_color;
|
|
||||||
$image_show_link_hover_color: $link_dark_hover_color;
|
|
||||||
|
|
||||||
$image_overlay_color: $foreground_color;
|
|
||||||
$image_overlay_background: darken($background_color, 30%);
|
|
||||||
|
|
||||||
$assistant_border_color: lighten($assistant_color, 8%);
|
|
||||||
|
|
||||||
$admin_links_color: mix($vote_down_color, $background_color, 17%);
|
|
||||||
$admin_links_hover_color: mix($vote_down_color, $background_color, 48%);
|
|
||||||
|
|
||||||
$background_odd_color: darken($background_color, 3%);
|
|
||||||
$background_even_color: $background_color;
|
|
||||||
|
|
||||||
$success_odd_color: desaturate(darken($success_color, 9%), 2%);
|
|
||||||
$success_even_color: saturate(darken($success_light_color, 2%), 2%);
|
|
||||||
$warning_odd_color: saturate(darken($warning_color, 19%), 10%);
|
|
||||||
$warning_even_color: saturate(darken($warning_light_color, 7%), 7%);
|
|
||||||
$danger_odd_color: desaturate(darken($danger_color, 16%), 2%);
|
|
||||||
$danger_even_color: darken($danger_light_color, 6%);
|
|
||||||
|
|
||||||
$foreground_half_color: mix($foreground_color, $background_color);
|
|
||||||
|
|
||||||
$sparkline_color: lighten($base_color, 5%);
|
|
||||||
|
|
||||||
$input_text_color: $foreground_color;
|
|
||||||
$input_color: $meta_color;
|
|
||||||
$input_border: $meta_border_color;
|
|
||||||
$input_color_active: lighten($meta_color, 5%);
|
|
||||||
$input_border_active: desaturate(lighten($base_color, 2%), 10%);
|
|
||||||
|
|
||||||
$tag_normal_background: darken($tag_normal_color, 29%);
|
|
||||||
$tag_normal_border: darken($tag_normal_color, 18%);
|
|
||||||
$tag_category_rating_background: darken($tag_category_rating_color, 35%);
|
|
||||||
$tag_category_rating_border: desaturate(darken($tag_category_rating_color, 20%), 10%);
|
|
||||||
$tag_category_spoiler_background: darken($tag_category_spoiler_color, 34%);
|
|
||||||
$tag_category_spoiler_border: darken($tag_category_spoiler_color, 23%);
|
|
||||||
$tag_category_origin_background: darken($tag_category_origin_color, 40%);
|
|
||||||
$tag_category_origin_border: desaturate(darken($tag_category_origin_color, 22%), 28%);
|
|
||||||
$tag_category_oc_background: darken($tag_category_oc_color, 33%);
|
|
||||||
$tag_category_oc_border: darken($tag_category_oc_color, 15%);
|
|
||||||
$tag_category_error_background: desaturate(darken($tag_category_error_color, 38%), 6%);
|
|
||||||
$tag_category_error_border: darken($tag_category_error_color, 22%);
|
|
||||||
$tag_category_character_background: darken($tag_category_character_color, 33%);
|
|
||||||
$tag_category_character_border: darken($tag_category_character_color, 20%);
|
|
||||||
$tag_category_content_official_background: desaturate(darken($tag_category_content_official_color, 29%), 2%);
|
|
||||||
$tag_category_content_official_border: darken($tag_category_content_official_color, 20%);
|
|
||||||
$tag_category_content_fanmade_background: darken($tag_category_content_fanmade_color, 40%);
|
|
||||||
$tag_category_content_fanmade_border: desaturate(darken($tag_category_content_fanmade_color, 20%), 10%);
|
|
||||||
$tag_category_species_background: darken($tag_category_species_color, 35%);
|
|
||||||
$tag_category_species_border: desaturate(darken($tag_category_species_color, 20%), 10%);
|
|
||||||
$tag_category_body_type_background: darken($tag_category_body_type_color, 50%);
|
|
||||||
$tag_category_body_type_border: desaturate(darken($tag_category_body_type_color, 37%), 10%);
|
|
||||||
|
|
||||||
$commission_category_background: darken($commission_category_color, 36%);
|
|
||||||
$commission_category_border: darken($commission_category_color, 25%);
|
|
||||||
|
|
||||||
$site_notice_link_color: desaturate(lighten($block_header_link_text_color, 8%), 20%);
|
|
||||||
$site_notice_link_hover_color: darken($site_notice_link_color, 8%);
|
|
||||||
|
|
||||||
$button_text_color: $foreground_color;
|
|
||||||
$button_background_color: rgba($meta_color, 0.2);
|
|
||||||
$button_hover_background_color: $input_color_active;
|
|
||||||
$button_hover_border_color: $input_border_active;
|
|
||||||
$button_border_color: $meta_border_color;
|
|
||||||
|
|
||||||
$button_primary_background_color: $primary_light_color;
|
|
||||||
$button_success_background_color: $success_light_color;
|
|
||||||
$button_warning_background_color: $warning_light_color;
|
|
||||||
$button_danger_background_color: $danger_light_color;
|
|
||||||
|
|
||||||
$button_primary_border_color: saturate(lighten($primary_light_color, 14%), 22%);
|
|
||||||
$button_success_border_color: saturate(lighten($success_light_color, 9%), 10%);
|
|
||||||
$button_warning_border_color: saturate(lighten($warning_light_color, 12%), 10%);
|
|
||||||
$button_danger_border_color: saturate(lighten($danger_light_color, 18%), 6%);
|
|
||||||
|
|
||||||
$button_primary_hover_background: darken($button_primary_background_color, 5%);
|
|
||||||
$button_primary_hover_border: darken($button_primary_border_color, 5%);
|
|
||||||
$button_success_hover_background: darken($button_success_background_color, 5%);
|
|
||||||
$button_success_hover_border: darken($button_success_border_color, 5%);
|
|
||||||
$button_warning_hover_background: darken($button_warning_background_color, 6%);
|
|
||||||
$button_warning_hover_border: darken($button_warning_border_color, 6%);
|
|
||||||
$button_danger_hover_background: darken($button_danger_background_color, 5%);
|
|
||||||
$button_danger_hover_border: darken($button_danger_border_color, 5%);
|
|
||||||
|
|
||||||
$downvote_disabled_color: mix($vote_down_color, $block_header_light_color, 30%);
|
|
||||||
$dnp_warning_hover_color: lighten($vote_down_color, 10%);
|
|
||||||
$poll_form_label_background: lighten($border_color, 8);
|
|
||||||
$tag_dropdown_hover_background: darken($meta_color, 4%);
|
|
||||||
|
|
||||||
@import "~common/base";
|
|
||||||
|
|
@ -1,182 +0,0 @@
|
||||||
/*
|
|
||||||
* Default theme - the same colors they've been for years
|
|
||||||
*/
|
|
||||||
|
|
||||||
// ///////////////////////////////////
|
|
||||||
// ///// SECTION 1 - MAIN COLORS /////
|
|
||||||
// ///////////////////////////////////
|
|
||||||
|
|
||||||
$background_color: #ffffff;
|
|
||||||
$page_background_color: #f8fafc;
|
|
||||||
$foreground_color: #333333;
|
|
||||||
|
|
||||||
$base_color: #62a7d9;
|
|
||||||
|
|
||||||
$primary_color: #c1e4f9;
|
|
||||||
$success_color: #bde9a3; /* tag added, currently banned, view post history--added */
|
|
||||||
$danger_color: #ebc0bb; /* tag removed, currently not banned, view post history--deleted */
|
|
||||||
$warning_color: #eee9bc; /* NSFW streams, image spoilered, things like that */
|
|
||||||
|
|
||||||
$link_color: #419cd9;
|
|
||||||
$link_hover_color: #9273d0;
|
|
||||||
|
|
||||||
$fave_color: #c4b246;
|
|
||||||
$vote_up_color: #67af2b;
|
|
||||||
$vote_down_color: #cf0001;
|
|
||||||
$hide_color: #cf0001;
|
|
||||||
|
|
||||||
$destroyed_content_color: #ffdcdc;
|
|
||||||
|
|
||||||
$assistant_color: #eeceed;
|
|
||||||
|
|
||||||
$tag_normal_color: #6f8f0e;
|
|
||||||
$tag_category_rating_color: #267ead;
|
|
||||||
$tag_category_spoiler_color: #c24523;
|
|
||||||
$tag_category_origin_color: #393f85;
|
|
||||||
$tag_category_oc_color: #9852a3;
|
|
||||||
$tag_category_error_color: #ad263f;
|
|
||||||
$tag_category_character_color: #2d8677;
|
|
||||||
$tag_category_content_official_color: #998e1a;
|
|
||||||
$tag_category_content_fanmade_color: #bb5496;
|
|
||||||
$tag_category_species_color: #8b552f;
|
|
||||||
$tag_category_body_type_color: #4e4e4e;
|
|
||||||
|
|
||||||
$commission_category_color: #986f3d;
|
|
||||||
|
|
||||||
$image_overlay_color: #ffffff;
|
|
||||||
$image_overlay_background_color: #000000;
|
|
||||||
|
|
||||||
// //////////////////////////////////////
|
|
||||||
// ///// SECTION 2 - DERIVED COLORS /////
|
|
||||||
// //////////////////////////////////////
|
|
||||||
|
|
||||||
$text_light_color: $background_color;
|
|
||||||
|
|
||||||
$meta_color: mix($foreground_color, $background_color, 5%);
|
|
||||||
$meta_border_color: mix($foreground_color, $meta_color, 30%);
|
|
||||||
|
|
||||||
$header_color: darken($base_color, 9%);
|
|
||||||
$header_hover_color: darken($base_color, 16%);
|
|
||||||
$header_field_color: $base_color;
|
|
||||||
$header_field_hover_color: darken($base_color, 7%);
|
|
||||||
$header_secondary_color: desaturate(lighten($base_color, 30%), 25%);
|
|
||||||
$header_secondary_hover_color: darken($header_secondary_color, 7%);
|
|
||||||
|
|
||||||
$header_admin_color: mix($vote_down_color, $background_color, 16%);
|
|
||||||
$header_admin_hover_color: mix($vote_down_color, $background_color, 30%);
|
|
||||||
|
|
||||||
$block_header_color: lighten($base_color, 28%);
|
|
||||||
$block_header_hover_color: desaturate(lighten($base_color, 20%), 5%);
|
|
||||||
$block_header_link_text_color: saturate(darken($header_color, 5%), 6%);
|
|
||||||
$block_header_link_text_hover_color: darken($header_color, 15%);
|
|
||||||
|
|
||||||
$block_header_light_color: desaturate(lighten($base_color, 31%), 16%);
|
|
||||||
$block_header_light_hover_color: lighten($header_secondary_hover_color, 2%);
|
|
||||||
$block_header_light_link_text_color: darken($block_header_light_color, 42%);
|
|
||||||
$block_header_light_link_text_hover_color: darken($block_header_light_color, 52%);
|
|
||||||
|
|
||||||
$border_color: darken($block_header_light_color, 3%);
|
|
||||||
|
|
||||||
$media_box_color: desaturate($block_header_light_color, 10%);
|
|
||||||
$media_box_hover_color: saturate(darken($media_box_color, 6%), 6%);
|
|
||||||
$media_box_header_link_text_color: $link_color;
|
|
||||||
$media_box_header_link_text_hover_color: darken($media_box_header_link_text_color, 10%);
|
|
||||||
|
|
||||||
$primary_light_color: lighten($primary_color, 5%);
|
|
||||||
$success_light_color: lighten($success_color, 7%);
|
|
||||||
$danger_light_color: lighten($danger_color, 4%);
|
|
||||||
$warning_light_color: lighten($warning_color, 6%);
|
|
||||||
|
|
||||||
$link_dark_color: darken($link_color, 20%); //used in the tag table, amongst other things
|
|
||||||
$link_hover_dark_color: darken($link_hover_color, 20%);
|
|
||||||
|
|
||||||
$image_show_link_color: $link_color;
|
|
||||||
$image_show_link_hover_color: $link_hover_color;
|
|
||||||
|
|
||||||
/* In default theme, except odd color to be darker! */
|
|
||||||
$background_odd_color: lighten($base_color, 35%); //also used as 'alt background color' in various places
|
|
||||||
$background_even_color: $background_color;
|
|
||||||
/* Depending on the theme, you may want to swap even and odd colors */
|
|
||||||
$success_odd_color: saturate(darken($success_light_color, 3%), 8%);
|
|
||||||
$success_even_color: lighten($success_color, 13%);
|
|
||||||
$warning_odd_color: saturate(darken($warning_light_color, 7%), 10%);
|
|
||||||
$warning_even_color: lighten($warning_color, 5%);
|
|
||||||
$danger_odd_color: saturate(darken($danger_light_color, 1%), 12%);
|
|
||||||
$danger_even_color: desaturate(lighten($danger_color, 7%), 10%);
|
|
||||||
|
|
||||||
$foreground_half_color: mix($foreground_color, $background_color); //used for weird h's (on image pages like Metadata Editing and Information) and also footer text color
|
|
||||||
|
|
||||||
$sparkline_color: lighten($base_color, 5%);
|
|
||||||
|
|
||||||
$assistant_border_color: darken($assistant_color, 8%);
|
|
||||||
|
|
||||||
$admin_links_color: mix($vote_down_color, $background_color, 17%);
|
|
||||||
$admin_links_hover_color: mix($vote_down_color, $background_color, 48%);
|
|
||||||
|
|
||||||
$input_text_color: $foreground_color;
|
|
||||||
$input_color: $meta_color;
|
|
||||||
$input_border: $meta_border_color;
|
|
||||||
$input_color_active: desaturate(lighten($base_color, 30%), 16%);
|
|
||||||
$input_border_active: lighten($base_color, 10%);
|
|
||||||
|
|
||||||
$tag_normal_background: desaturate(lighten($tag_normal_color, 44%), 28%);
|
|
||||||
$tag_normal_border: darken($tag_normal_background, 16%);
|
|
||||||
$tag_category_rating_background: desaturate(lighten($tag_category_rating_color, 41%), 25%);
|
|
||||||
$tag_category_rating_border: darken($tag_category_rating_background, 10%);
|
|
||||||
$tag_category_spoiler_background: lighten($tag_category_spoiler_color, 41%);
|
|
||||||
$tag_category_spoiler_border: darken($tag_category_spoiler_background, 8%);
|
|
||||||
$tag_category_origin_background: lighten($tag_category_origin_color, 43%);
|
|
||||||
$tag_category_origin_border: darken($tag_category_origin_background, 10%);
|
|
||||||
$tag_category_oc_background: lighten($tag_category_oc_color, 35%);
|
|
||||||
$tag_category_oc_border: darken($tag_category_oc_background, 9%);
|
|
||||||
$tag_category_error_background: lighten($tag_category_error_color, 40%);
|
|
||||||
$tag_category_error_border: darken($tag_category_error_background, 8%);
|
|
||||||
$tag_category_character_background: desaturate(lighten($tag_category_character_color, 44%), 10%);
|
|
||||||
$tag_category_character_border: lighten($tag_category_character_color, 22%);
|
|
||||||
$tag_category_content_official_background: lighten($tag_category_content_official_color, 41%);
|
|
||||||
$tag_category_content_official_border: lighten($tag_category_content_official_color, 18%);
|
|
||||||
$tag_category_content_fanmade_background: lighten($tag_category_content_fanmade_color, 36%);
|
|
||||||
$tag_category_content_fanmade_border: lighten($tag_category_content_fanmade_color, 18%);
|
|
||||||
$tag_category_species_background: lighten($tag_category_species_color, 44%);
|
|
||||||
$tag_category_species_border: lighten($tag_category_species_color, 25%);
|
|
||||||
$tag_category_body_type_background: lighten($tag_category_body_type_color, 45%);
|
|
||||||
$tag_category_body_type_border: lighten($tag_category_body_type_color, 35%);
|
|
||||||
|
|
||||||
$commission_category_background: saturate(lighten($commission_category_color, 40%), 12%);
|
|
||||||
$commission_category_border: lighten($commission_category_color, 20%);
|
|
||||||
|
|
||||||
$site_notice_color: darken($base_color, 32%);
|
|
||||||
$site_notice_link_color: $block_header_light_color;
|
|
||||||
$site_notice_link_hover_color: $block_header_hover_color;
|
|
||||||
|
|
||||||
$button_text_color: $foreground_color;
|
|
||||||
$button_background_color: rgba($meta_color, 0.2);
|
|
||||||
$button_hover_background_color: $input_color_active;
|
|
||||||
$button_hover_border_color: $input_border_active;
|
|
||||||
$button_border_color: $meta_border_color;
|
|
||||||
|
|
||||||
$button_primary_background_color: $primary_light_color;
|
|
||||||
$button_success_background_color: $success_light_color;
|
|
||||||
$button_warning_background_color: $warning_light_color;
|
|
||||||
$button_danger_background_color: $danger_light_color;
|
|
||||||
|
|
||||||
$button_primary_border_color: darken($primary_color, 8%);
|
|
||||||
$button_success_border_color: darken($success_color, 10%);
|
|
||||||
$button_warning_border_color: darken($warning_color, 11%);
|
|
||||||
$button_danger_border_color: darken($danger_color, 8%);
|
|
||||||
|
|
||||||
$button_primary_hover_background: darken($button_primary_background_color, 5%);
|
|
||||||
$button_primary_hover_border: darken($button_primary_border_color, 5%);
|
|
||||||
$button_success_hover_background: darken($button_success_background_color, 5%);
|
|
||||||
$button_success_hover_border: darken($button_success_border_color, 5%);
|
|
||||||
$button_warning_hover_background: darken($button_warning_background_color, 6%);
|
|
||||||
$button_warning_hover_border: darken($button_warning_border_color, 6%);
|
|
||||||
$button_danger_hover_background: darken($button_danger_background_color, 5%);
|
|
||||||
$button_danger_hover_border: darken($button_danger_border_color, 5%);
|
|
||||||
|
|
||||||
$downvote_disabled_color: mix($vote_down_color, $block_header_light_color, 30%);
|
|
||||||
$dnp_warning_hover_color: lighten($vote_down_color, 10%);
|
|
||||||
$poll_form_label_background: lighten($border_color, 8);
|
|
||||||
$tag_dropdown_hover_background: darken($meta_color, 4%);
|
|
||||||
|
|
||||||
@import "~common/base";
|
|
||||||
|
|
@ -1,195 +0,0 @@
|
||||||
/*
|
|
||||||
* Red-yellow theme
|
|
||||||
*/
|
|
||||||
|
|
||||||
// ///////////////////////////////////
|
|
||||||
// ///// SECTION 1 - MAIN COLORS /////
|
|
||||||
// ///////////////////////////////////
|
|
||||||
|
|
||||||
$text_color: #eeeeee;
|
|
||||||
$link_color: #dbdb00;
|
|
||||||
$link_hover_color: #fff3bd;
|
|
||||||
$grey: #3b3b3b;
|
|
||||||
|
|
||||||
$background_color: #412121;
|
|
||||||
$page_background_color: $background_color;
|
|
||||||
$foreground_color: #e0e0e0;
|
|
||||||
|
|
||||||
$base_color: #995454;
|
|
||||||
|
|
||||||
$primary_light_color: #641f1f;
|
|
||||||
$success_light_color: #2e4e2e;
|
|
||||||
$danger_light_color: #7b3b00;
|
|
||||||
$warning_light_color: #5b5b00;
|
|
||||||
|
|
||||||
$destroyed_content_color: #412f2f;
|
|
||||||
|
|
||||||
$meta_color: #411d1d;
|
|
||||||
|
|
||||||
$header_color: #923131;
|
|
||||||
$header_field_color: #5e2727;
|
|
||||||
$header_secondary_color: #7a2d2d;
|
|
||||||
$header_admin_color: $grey;
|
|
||||||
|
|
||||||
$block_header_color: #812d2d;
|
|
||||||
$block_header_link_text_color: $link_color;
|
|
||||||
|
|
||||||
$block_header_light_color: #7a3030;
|
|
||||||
$block_header_light_link_text_color: $link_color;
|
|
||||||
|
|
||||||
$border_color: #7c2424;
|
|
||||||
|
|
||||||
$media_box_color: #7c2424;
|
|
||||||
|
|
||||||
|
|
||||||
$fave_color: #a18e27;
|
|
||||||
$vote_up_color: #5b9b26;
|
|
||||||
$vote_down_color: #da3412;
|
|
||||||
$hide_color: #da3412;
|
|
||||||
|
|
||||||
$assistant_color: #511b4e;
|
|
||||||
|
|
||||||
$tag_normal_color: #d16767;
|
|
||||||
$tag_category_rating_color: #9dc3e9;
|
|
||||||
$tag_category_spoiler_color: #ddcf53;
|
|
||||||
$tag_category_origin_color: #bbb6eb;
|
|
||||||
$tag_category_oc_color: #dd7ee4;
|
|
||||||
$tag_category_error_color: #ff5566;
|
|
||||||
$tag_category_character_color: #82d0e2;
|
|
||||||
$tag_category_content_official_color: #d1cf84;
|
|
||||||
$tag_category_content_fanmade_color: #ebb1d6;
|
|
||||||
$tag_category_species_color: #d2b48c;
|
|
||||||
$tag_category_body_type_color: #b8b8b8;
|
|
||||||
|
|
||||||
$commission_category_color: #e02727;
|
|
||||||
|
|
||||||
$site_notice_color: $grey;
|
|
||||||
|
|
||||||
$image_overlay_color: #ffffff;
|
|
||||||
$image_overlay_background_color: #000000;
|
|
||||||
|
|
||||||
// //////////////////////////////////////
|
|
||||||
// ///// SECTION 2 - DERIVED COLORS /////
|
|
||||||
// //////////////////////////////////////
|
|
||||||
|
|
||||||
$text_light_color: $foreground_color;
|
|
||||||
|
|
||||||
$meta_color: mix($foreground_color, $background_color, 5%);
|
|
||||||
$meta_border_color: mix($foreground_color, $meta_color, 30%);
|
|
||||||
|
|
||||||
$primary_color: saturate(lighten($primary_light_color, 5%), 4%);
|
|
||||||
$success_color: lighten($success_light_color, 4%);
|
|
||||||
$danger_color: lighten($danger_light_color, 5%);
|
|
||||||
$warning_color: lighten($warning_light_color, 6%);
|
|
||||||
|
|
||||||
$header_hover_color: darken($header_color, 8%);
|
|
||||||
$header_field_hover_color: darken($header_hover_color, 4%);
|
|
||||||
$header_secondary_hover_color: darken($header_secondary_color, 4%);
|
|
||||||
|
|
||||||
$header_admin_hover_color: darken($header_admin_color, 5%);
|
|
||||||
|
|
||||||
$block_header_hover_color: adjust_hue(saturate(darken($block_header_color, 4%), 4%), -3deg);
|
|
||||||
$block_header_link_text_hover_color: adjust_hue(desaturate(darken($block_header_link_text_color, 3%), 20%), 6deg);
|
|
||||||
|
|
||||||
$block_header_light_hover_color: adjust_hue(saturate(darken($block_header_light_color, 4%), 10%), -4deg);
|
|
||||||
$block_header_light_link_text_hover_color: adjust_hue(desaturate(darken($block_header_light_link_text_color, 2%), 10%), 8deg);
|
|
||||||
|
|
||||||
$media_box_hover_color: darken($media_box_color, 4%);
|
|
||||||
$media_box_header_link_text_hover_color: desaturate(darken($link_color, 3%), 18%);
|
|
||||||
$media_box_header_link_text_color: $link_color;
|
|
||||||
$media_box_header_link_text_hover_color: darken($media_box_header_link_text_color, 10%);
|
|
||||||
|
|
||||||
$link_dark_color: mix($link_color, $foreground_color, 70%);
|
|
||||||
$link_dark_hover_color: mix($link_hover_color, $foreground_color, 70%);
|
|
||||||
|
|
||||||
$image_show_link_color: $link_dark_color;
|
|
||||||
$image_show_link_hover_color: $link_dark_hover_color;
|
|
||||||
|
|
||||||
$image_overlay_color: $foreground_color;
|
|
||||||
$image_overlay_background: darken($background_color, 30%);
|
|
||||||
|
|
||||||
$assistant_border_color: lighten($assistant_color, 8%);
|
|
||||||
|
|
||||||
$admin_links_color: mix($vote_down_color, $background_color, 17%);
|
|
||||||
$admin_links_hover_color: mix($vote_down_color, $background_color, 48%);
|
|
||||||
|
|
||||||
$background_odd_color: darken($background_color, 3%);
|
|
||||||
$background_even_color: $background_color;
|
|
||||||
|
|
||||||
$success_odd_color: desaturate(darken($success_color, 9%), 2%);
|
|
||||||
$success_even_color: saturate(darken($success_light_color, 2%), 2%);
|
|
||||||
$warning_odd_color: saturate(darken($warning_color, 19%), 10%);
|
|
||||||
$warning_even_color: saturate(darken($warning_light_color, 7%), 7%);
|
|
||||||
$danger_odd_color: desaturate(darken($danger_color, 16%), 2%);
|
|
||||||
$danger_even_color: darken($danger_light_color, 6%);
|
|
||||||
|
|
||||||
$foreground_half_color: mix($foreground_color, $background_color);
|
|
||||||
|
|
||||||
$sparkline_color: lighten($base_color, 5%);
|
|
||||||
|
|
||||||
$input_text_color: $foreground_color;
|
|
||||||
$input_color: $meta_color;
|
|
||||||
$input_border: $meta_border_color;
|
|
||||||
$input_color_active: lighten($meta_color, 5%);
|
|
||||||
$input_border_active: desaturate(lighten($base_color, 2%), 10%);
|
|
||||||
|
|
||||||
$tag_normal_background: darken($tag_normal_color, 29%);
|
|
||||||
$tag_normal_border: darken($tag_normal_color, 18%);
|
|
||||||
$tag_category_rating_background: darken($tag_category_rating_color, 35%);
|
|
||||||
$tag_category_rating_border: desaturate(darken($tag_category_rating_color, 20%), 10%);
|
|
||||||
$tag_category_spoiler_background: darken($tag_category_spoiler_color, 34%);
|
|
||||||
$tag_category_spoiler_border: darken($tag_category_spoiler_color, 23%);
|
|
||||||
$tag_category_origin_background: darken($tag_category_origin_color, 30%);
|
|
||||||
$tag_category_origin_border: desaturate(darken($tag_category_origin_color, 22%), 28%);
|
|
||||||
$tag_category_oc_background: darken($tag_category_oc_color, 33%);
|
|
||||||
$tag_category_oc_border: darken($tag_category_oc_color, 15%);
|
|
||||||
$tag_category_error_background: desaturate(darken($tag_category_error_color, 38%), 6%);
|
|
||||||
$tag_category_error_border: darken($tag_category_error_color, 22%);
|
|
||||||
$tag_category_character_background: darken($tag_category_character_color, 33%);
|
|
||||||
$tag_category_character_border: darken($tag_category_character_color, 20%);
|
|
||||||
$tag_category_content_official_background: desaturate(darken($tag_category_content_official_color, 29%), 2%);
|
|
||||||
$tag_category_content_official_border: darken($tag_category_content_official_color, 20%);
|
|
||||||
$tag_category_content_fanmade_background: darken($tag_category_content_fanmade_color, 40%);
|
|
||||||
$tag_category_content_fanmade_border: desaturate(darken($tag_category_content_fanmade_color, 20%), 10%);
|
|
||||||
$tag_category_species_background: darken($tag_category_species_color, 40%);
|
|
||||||
$tag_category_species_border: desaturate(darken($tag_category_species_color, 20%), 10%);
|
|
||||||
$tag_category_body_type_background: darken($tag_category_body_type_color, 50%);
|
|
||||||
$tag_category_body_type_border: desaturate(darken($tag_category_body_type_color, 37%), 10%);
|
|
||||||
|
|
||||||
$commission_category_background: darken($commission_category_color, 36%);
|
|
||||||
$commission_category_border: darken($commission_category_color, 25%);
|
|
||||||
|
|
||||||
$site_notice_link_color: desaturate(lighten($block_header_link_text_color, 8%), 20%);
|
|
||||||
$site_notice_link_hover_color: darken($site_notice_link_color, 8%);
|
|
||||||
|
|
||||||
$button_text_color: $foreground_color;
|
|
||||||
$button_background_color: rgba($meta_color, 0.2);
|
|
||||||
$button_hover_background_color: $input_color_active;
|
|
||||||
$button_hover_border_color: $input_border_active;
|
|
||||||
$button_border_color: $meta_border_color;
|
|
||||||
|
|
||||||
$button_primary_background_color: $primary_light_color;
|
|
||||||
$button_success_background_color: $success_light_color;
|
|
||||||
$button_warning_background_color: $warning_light_color;
|
|
||||||
$button_danger_background_color: $danger_light_color;
|
|
||||||
|
|
||||||
$button_primary_border_color: saturate(lighten($primary_light_color, 14%), 22%);
|
|
||||||
$button_success_border_color: saturate(lighten($success_light_color, 9%), 10%);
|
|
||||||
$button_warning_border_color: saturate(lighten($warning_light_color, 12%), 10%);
|
|
||||||
$button_danger_border_color: saturate(lighten($danger_light_color, 18%), 6%);
|
|
||||||
|
|
||||||
$button_primary_hover_background: darken($button_primary_background_color, 5%);
|
|
||||||
$button_primary_hover_border: darken($button_primary_border_color, 5%);
|
|
||||||
$button_success_hover_background: darken($button_success_background_color, 5%);
|
|
||||||
$button_success_hover_border: darken($button_success_border_color, 5%);
|
|
||||||
$button_warning_hover_background: darken($button_warning_background_color, 6%);
|
|
||||||
$button_warning_hover_border: darken($button_warning_border_color, 6%);
|
|
||||||
$button_danger_hover_background: darken($button_danger_background_color, 5%);
|
|
||||||
$button_danger_hover_border: darken($button_danger_border_color, 5%);
|
|
||||||
|
|
||||||
$downvote_disabled_color: mix($vote_down_color, $block_header_light_color, 30%);
|
|
||||||
$dnp_warning_hover_color: lighten($vote_down_color, 10%);
|
|
||||||
$poll_form_label_background: lighten($border_color, 8);
|
|
||||||
$tag_dropdown_hover_background: darken($meta_color, 4%);
|
|
||||||
|
|
||||||
@import "~common/base";
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
|
|
||||||
#imagespns {
|
|
||||||
border: $border;
|
|
||||||
padding: 2px 10px;
|
|
||||||
background: $background_odd_color;
|
|
||||||
text-align: center;
|
|
||||||
.subtext {
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
.spnstxt {
|
|
||||||
font-size: 10px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: $foreground_half_color;
|
|
||||||
margin: 2px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#imagespns__link {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table--adverts__image {
|
|
||||||
width: 730px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
|
|
||||||
.badge {
|
|
||||||
display: inline-block;
|
|
||||||
line-height: 16px;
|
|
||||||
margin: 0 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badges {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badges > .badge > img {
|
|
||||||
max-width: unset;
|
|
||||||
}
|
|
||||||
4
assets/css/views/_burger.scss
Normal file
4
assets/css/views/_burger.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
// Temporary; todo: make it work
|
||||||
|
#burger {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
.channel-strip__image {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-strip__state {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-box__header--channel {
|
|
||||||
width: 240px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-box__header--channel .label {
|
|
||||||
vertical-align: middle;
|
|
||||||
line-height: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-box__content--channel {
|
|
||||||
width: 240px;
|
|
||||||
height: 180px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
|
|
||||||
.fetched-comment {
|
|
||||||
margin-bottom: -1px; /* collapse block borders */
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment_deleted {
|
|
||||||
color: $vote_down_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment_under_review {
|
|
||||||
color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-image-container {
|
|
||||||
width: 60px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
|
|
||||||
// Category Tag
|
|
||||||
.commission__category {
|
|
||||||
border: 1px solid;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
padding: 5px;
|
|
||||||
background: $commission_category_background;
|
|
||||||
border-color: $commission_category_border;
|
|
||||||
color: $commission_category_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commission__block_body {
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commission__category a {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commission__listing_body {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commission__listing_artist {
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commission__listing__body_text {
|
|
||||||
img { max-width: 100%; }
|
|
||||||
word-wrap: break-word;
|
|
||||||
margin-top: 3px;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
45
assets/css/views/_communication.scss
Normal file
45
assets/css/views/_communication.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
.communication__toolbar {
|
||||||
|
font-size: var(--font-size);
|
||||||
|
background: var(--secondary-color);
|
||||||
|
padding: 0 var(--padding-small);
|
||||||
|
line-height: var(--block-header-height);
|
||||||
|
border: 1px solid var(--secondary-border-color);
|
||||||
|
border-bottom: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.communication__toolbar__button {
|
||||||
|
color: var(--text-color);
|
||||||
|
background: 0;
|
||||||
|
border: 0;
|
||||||
|
padding: var(--padding-small);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--secondary-muted-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.communication-edit__actions {
|
||||||
|
@extend .flex__row;
|
||||||
|
line-height: var(--block-header-height);
|
||||||
|
border: 0;
|
||||||
|
margin: var(--padding-normal);
|
||||||
|
margin-top: 0;
|
||||||
|
gap: var(--padding-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.communication__anonymous {
|
||||||
|
@extend .flex__row;
|
||||||
|
line-height: ar(--block-header-height);
|
||||||
|
background: var(--secondary-color);
|
||||||
|
border: 1px solid var(--secondary-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.communication__anonymous--checkbox {
|
||||||
|
padding: 0 var(--padding-small);
|
||||||
|
border-right: 1px solid var(--secondary-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.communication__anonymous--label {
|
||||||
|
padding: 0 var(--padding-small);
|
||||||
|
}
|
||||||
|
|
@ -1,103 +0,0 @@
|
||||||
|
|
||||||
td.table--communication-list__name {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
td.table--communication-list__stats {
|
|
||||||
width: 6%;
|
|
||||||
}
|
|
||||||
|
|
||||||
td.table--communication-list__last-post,
|
|
||||||
td.table--communication-list__options {
|
|
||||||
width: 35%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.communication:target {
|
|
||||||
border: 1px solid $input_border_active;
|
|
||||||
}
|
|
||||||
|
|
||||||
.communication__body {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.communication__body__sender-name {
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.communication__body__text {
|
|
||||||
img { max-width: 100%; }
|
|
||||||
word-wrap: break-word;
|
|
||||||
margin-top: 3px;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.communication__sender__stats,
|
|
||||||
.communication__options {
|
|
||||||
font-size: 0.86em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.communication__options {
|
|
||||||
background: $background_odd_color;
|
|
||||||
border-top: $border;
|
|
||||||
}
|
|
||||||
|
|
||||||
.communication__interaction {
|
|
||||||
margin-left: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.communication__info {
|
|
||||||
display: unset;
|
|
||||||
margin-left: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.communication-edit__tab {
|
|
||||||
padding-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.communication-edit__actions {
|
|
||||||
margin-top: -4px; /* Dirty! 1px to override the border, 3px to negate input margin */
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-svg {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.communication__toolbar {
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.communication__toolbar__button {
|
|
||||||
background-color: $meta_color;
|
|
||||||
border: 1px solid $meta_border_color;
|
|
||||||
color: $foreground_color;
|
|
||||||
margin: 1px;
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
min-width: 30px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $input_color_active;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus, &:hover, &:active, &:visited {
|
|
||||||
border-color: $input_border_active;
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hyphenate-breaks{
|
|
||||||
hyphens: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-label-of-doom {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.communication--destroyed {
|
|
||||||
background-color: $destroyed_content_color;
|
|
||||||
}
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
// 16x16 checkerboard
|
|
||||||
@mixin img-checkerboard-background {
|
|
||||||
img {
|
|
||||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAGUlEQVR42mP474AKGdDhCFGALoChYWQoAACpW7+B5lv5BwAAAABJRU5ErkJggg==");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid--dupe-report-list {
|
|
||||||
grid-template-rows: auto;
|
|
||||||
grid-template-columns: 200px [image-cell-1] 200px [image-cell-2] auto [diff] auto [status-options];
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid--dupe-report-list__cell {
|
|
||||||
padding: .5em .25em .5em .25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dr__image-cell {
|
|
||||||
.image-container {
|
|
||||||
@include img-checkerboard-background;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dr__diff {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dr__status-options {
|
|
||||||
padding: .5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-duplicate {
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.difference, .swipe, .onion-skin {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.onion-skin__slider {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 10px;
|
|
||||||
max-width: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swipe__image {
|
|
||||||
cursor: ew-resize;
|
|
||||||
}
|
|
||||||
|
|
||||||
.difference__image, .swipe__image, .onion-skin__image {
|
|
||||||
max-height: 900px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
// Place all the styles related to the filters controller here.
|
|
||||||
// They will automatically be included in application.css.
|
|
||||||
// You can use Sass (SCSS) here: http://sass-lang.com/
|
|
||||||
|
|
||||||
|
|
||||||
/* TODO: -> block */
|
|
||||||
/* FIXME: ugly selectors (.filter .filter-options ul li a:hover) */
|
|
||||||
.filter {
|
|
||||||
background: $background_odd_color;
|
|
||||||
border: $border;
|
|
||||||
padding-left: $header_spacing;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
h3 {
|
|
||||||
margin: 0;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
.filter-options {
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
padding-left: 2px;
|
|
||||||
li {
|
|
||||||
display: inline;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spoiler-filter-code {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
|
|
||||||
.media-box--js-sortable-chosen .media-box__header {
|
|
||||||
background: $primary_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The server renders additional thumb(s) for extra images in a gallery,
|
|
||||||
* if the user is allowed to edit it and it has multiple pages; hide these
|
|
||||||
* until the user explicitly requests to edit it (if at all). */
|
|
||||||
.js-sortable-has-next:not(.editing) .media-box:last-child,
|
|
||||||
.js-sortable-has-prev:not(.editing) .media-box:first-child {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Make it clear that the extra images are not truly part of the page. */
|
|
||||||
.js-sortable-has-next .media-box:last-child,
|
|
||||||
.js-sortable-has-prev .media-box:first-child {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input--search-gallery-list {
|
|
||||||
border: $border;
|
|
||||||
width: 250px;
|
|
||||||
padding: 0 4px;
|
|
||||||
line-height: 28px;
|
|
||||||
font-family: $font_family_base;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input--search-gallery-list, .add-to-gallery-list ul a.block__list__link {
|
|
||||||
overflow: hidden;
|
|
||||||
text-align: center;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-to-gallery-list {
|
|
||||||
::-webkit-scrollbar-track
|
|
||||||
{
|
|
||||||
-webkit-box-shadow: inset 0 0 6px #ccc;
|
|
||||||
background-color: $background_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar
|
|
||||||
{
|
|
||||||
width: 6px;
|
|
||||||
background-color: $background_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb
|
|
||||||
{
|
|
||||||
background-color: $primary_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
max-height: 132px;
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden; /* Scrollbar customization is only available in WebKit; Gecko and IE have wider bars that cause horizontal overflow */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Limit the width of ul items inside gallery list (.add-to-gallery-list includes .block__list__link elements
|
|
||||||
* that are not part of the list, hence nested selector) */
|
|
||||||
.add-to-gallery-list li a.block__list__link {
|
|
||||||
width: 244px; /* input--search-gallery-list width - 6px scrollbar */
|
|
||||||
}
|
|
||||||
|
|
||||||
.dragging {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
94
assets/css/views/_header.scss
Normal file
94
assets/css/views/_header.scss
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
.header {
|
||||||
|
background: var(--primary-color);
|
||||||
|
line-height: var(--navbar-size);
|
||||||
|
padding: 0 var(--padding-normal);
|
||||||
|
border-bottom: 1px solid var(--primary-border-color);
|
||||||
|
box-shadow: 0 1px var(--primary-muted-color) inset, 0 -1px var(--primary-dark-color) inset;
|
||||||
|
font-size: var(--font-header-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header--secondary {
|
||||||
|
background: var(--secondary-dark-color);
|
||||||
|
border-color: var(--secondary-color);
|
||||||
|
line-height: var(--navbar-secondary-size);
|
||||||
|
|
||||||
|
.header__link {
|
||||||
|
border-right-color: var(--secondary-color);
|
||||||
|
border-left-color: var(--secondary-dark-color);
|
||||||
|
|
||||||
|
& > .fa {
|
||||||
|
margin-right: var(--padding-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--secondary-muted-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__spacer {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
height: var(--navbar-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__link {
|
||||||
|
color: var(--text-color) !important;
|
||||||
|
display: block;
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding: 0 var(--padding-small);
|
||||||
|
border-right: 1px solid var(--primary-border-color);
|
||||||
|
border-left: 1px solid var(--primary-dark-color);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--primary-dark-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__link--no-hover:hover {
|
||||||
|
background: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__input {
|
||||||
|
@include animated-transition;
|
||||||
|
height: var(--navbar-input-size);
|
||||||
|
background: var(--primary-muted-color);
|
||||||
|
font-size: var(--font-size);
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
select.header__input {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
select.header__input:hover {
|
||||||
|
@include animated-transition;
|
||||||
|
background: var(--primary-dark-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__search {
|
||||||
|
@extend .flex__row;
|
||||||
|
height: var(--navbar-size);
|
||||||
|
padding: 0 var(--padding-small);
|
||||||
|
border-right: 1px solid var(--primary-border-color);
|
||||||
|
border-left: 1px solid var(--primary-dark-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__buttons {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
border-left: 1px solid var(--primary-dark-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__search__button {
|
||||||
|
height: var(--navbar-input-size);
|
||||||
|
background: var(--primary-muted-color);
|
||||||
|
box-shadow: 0 -1px var(--secondary-dark-color) inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__search__button:hover {
|
||||||
|
background: var(--primary-dark-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__filter-form {
|
||||||
|
padding: 0 var(--padding-small);
|
||||||
|
}
|
||||||
|
|
@ -1,324 +0,0 @@
|
||||||
.image-flex-grid {
|
|
||||||
padding-right: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-box__header {
|
|
||||||
span.favorites,
|
|
||||||
span.comments_count {
|
|
||||||
padding-left: 4px;
|
|
||||||
}
|
|
||||||
span.score {
|
|
||||||
padding: 0 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-box__header--small {
|
|
||||||
span.favorites,
|
|
||||||
span.comments_count {
|
|
||||||
padding-left: 2px;
|
|
||||||
}
|
|
||||||
span.score {
|
|
||||||
padding: 0 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a.interaction--fave {
|
|
||||||
color: $fave_color;
|
|
||||||
&.active,
|
|
||||||
&:hover {
|
|
||||||
background: $fave_color;
|
|
||||||
color: $text_light_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a.interaction--upvote {
|
|
||||||
color: $vote_up_color;
|
|
||||||
&.active,
|
|
||||||
&:hover {
|
|
||||||
background: $vote_up_color;
|
|
||||||
color: $text_light_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a.interaction--downvote {
|
|
||||||
color: $vote_down_color;
|
|
||||||
&.active,
|
|
||||||
&:hover {
|
|
||||||
background: $vote_down_color;
|
|
||||||
color: $text_light_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a.interaction--hide {
|
|
||||||
color: $hide_color;
|
|
||||||
&.active,
|
|
||||||
&:hover {
|
|
||||||
background: $hide_color;
|
|
||||||
color: $text_light_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a.interaction--comments {
|
|
||||||
color: $link_hover_color;
|
|
||||||
&:hover {
|
|
||||||
background: $link_hover_color;
|
|
||||||
color: $background_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Disable spoilered image downvoting (see the interactions script) */
|
|
||||||
|
|
||||||
.interaction--downvote.disabled,
|
|
||||||
.interaction--downvote.disabled:hover {
|
|
||||||
cursor: default;
|
|
||||||
color: $downvote_disabled_color;
|
|
||||||
background: $media_box_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-info__image {
|
|
||||||
border: $border;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Images rendered using the 'images/image_container' partial (image lists, comment list previews, gallery thumbs) */
|
|
||||||
|
|
||||||
div.image-container {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
overflow: hidden;
|
|
||||||
/* prevent .media-box__overlay from overflowing the container */
|
|
||||||
text-align: center;
|
|
||||||
a::before {
|
|
||||||
content: "";
|
|
||||||
display: inline-block;
|
|
||||||
height: 100%;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
img,
|
|
||||||
video {
|
|
||||||
vertical-align: middle;
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
/* Make the link cover the whole container if the image is oblong */
|
|
||||||
a {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* spoilered images inside communications */
|
|
||||||
|
|
||||||
span.spoiler div.image-container {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* .image-container sizes, set by the partial. */
|
|
||||||
|
|
||||||
.thumb {
|
|
||||||
max-width: 250px;
|
|
||||||
max-height: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumb_small {
|
|
||||||
max-width: 150px;
|
|
||||||
max-height: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumb_tiny {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Used for elements that wrap .image-container */
|
|
||||||
|
|
||||||
.thumb-tiny-container {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
//embedded images. kinda like image-container, but this one also shows a text, link to filter page, etc
|
|
||||||
.image-show-container {
|
|
||||||
color: $foreground_color;
|
|
||||||
display: inline-block;
|
|
||||||
max-width: 100%;
|
|
||||||
padding-bottom: 6px;
|
|
||||||
span.spoileredtag,
|
|
||||||
span.hiddentag {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: $image_show_link_color;
|
|
||||||
}
|
|
||||||
&:hover a:hover {
|
|
||||||
color: $image_show_link_hover_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* This and the one above needed for older browsers for some reason, appears to be a bug */
|
|
||||||
|
|
||||||
#image_target {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Resizes large images to fit in a smaller container; width and height are defined inline */
|
|
||||||
|
|
||||||
.image-constrained {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-scaled {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
/* Due to the address bar hiding/reappearing in mobile browsers, viewport
|
|
||||||
* units are only reliable in desktop browsers. */
|
|
||||||
@media (min-width: $min_px_width_for_desktop_layout) {
|
|
||||||
max-height: 80vh;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-partscaled {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-description {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
overflow: auto;
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
background: $background_odd_color;
|
|
||||||
border: $border;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-description__text {
|
|
||||||
padding: 0 6px;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-size {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-source-link {
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
#image-source > p {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.interaction-user-list-item {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 2px;
|
|
||||||
padding-right: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image_menu {
|
|
||||||
padding-left: 0;
|
|
||||||
margin: 1em 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.horizontal-list {
|
|
||||||
margin: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
list-style: none;
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
li+li {
|
|
||||||
margin-left: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dnp-warning {
|
|
||||||
padding: 0.5em;
|
|
||||||
border: 3px solid $vote_down_color;
|
|
||||||
background: $admin_links_color;
|
|
||||||
a {
|
|
||||||
color: $vote_down_color;
|
|
||||||
font-weight: bold;
|
|
||||||
&:hover {
|
|
||||||
color: $dnp_warning_hover_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h4 {
|
|
||||||
margin-top: 0.3em;
|
|
||||||
margin-bottom: 0.2em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.derpy__2fa {
|
|
||||||
width: 25%;
|
|
||||||
min-width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.derpy__login {
|
|
||||||
margin-left: 8px;
|
|
||||||
align-self: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
#js-image-upload-previews {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
&:empty {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
max-height: 200px;
|
|
||||||
max-width: 200px;
|
|
||||||
}
|
|
||||||
.scraper-preview--label {
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 0 8px 8px 0;
|
|
||||||
.scraper-preview--image-wrapper {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 9px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
opacity: .6;
|
|
||||||
}
|
|
||||||
.scraper-preview--image {
|
|
||||||
background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxyZWN0IGZpbGw9IiNGRkZGRkYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIvPjxyZWN0IGZpbGw9IiNFRkVGRUYiIHdpZHRoPSI4IiBoZWlnaHQ9IjgiLz48cmVjdCBmaWxsPSIjRUZFRkVGIiB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB4PSI4IiB5PSI4Ii8+PC9zdmc+Cg==) repeat top left;
|
|
||||||
background-size: 16px;
|
|
||||||
}
|
|
||||||
.scraper-preview--input {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
&.checked>.scraper-preview--image-wrapper,
|
|
||||||
.scraper-preview--input:checked+.scraper-preview--image-wrapper {
|
|
||||||
opacity: 1;
|
|
||||||
border-color: $input_border_active;
|
|
||||||
background-color: $input_color_active;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-link {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.full-height {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
66
assets/css/views/_metabar.scss
Normal file
66
assets/css/views/_metabar.scss
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
@mixin fix-interaction($type) {
|
||||||
|
.interaction--#{$type} {
|
||||||
|
padding: var(--padding-tiny) var(--padding-small);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include if-phone {
|
||||||
|
.metabar__interactions {
|
||||||
|
display: grid;
|
||||||
|
width: 100%;
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
|
||||||
|
@include fix-interaction(fave);
|
||||||
|
@include fix-interaction(upvote);
|
||||||
|
@include fix-interaction(downvote);
|
||||||
|
@include fix-interaction(hide);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metabar__interactions * {
|
||||||
|
align-self: center;
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metabar__mobile-separator {
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: var(--padding-small);
|
||||||
|
margin-bottom: var(--padding-normal);
|
||||||
|
background: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metabar__navigation {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
padding: var(--padding-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metabar__navigation a {
|
||||||
|
align-self: center;
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.metabar {
|
||||||
|
@extend .flex__row--centered;
|
||||||
|
line-height: var(--block-header-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metabar a,
|
||||||
|
.metabar .score {
|
||||||
|
padding: var(--padding-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metabar__user-credit {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metabar__mobile-info {
|
||||||
|
& td {
|
||||||
|
padding: var(--padding-small);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.badges {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
.kiwiirc-frame {
|
|
||||||
border: 0;
|
|
||||||
width: 900px;
|
|
||||||
height: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.static-page__diff {
|
|
||||||
font-family: $font_family_monospace;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
@ -1,44 +1,14 @@
|
||||||
.page__header {
|
.pagination {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-direction: row;
|
||||||
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__title {
|
.pagination span {
|
||||||
overflow: hidden;
|
padding: 0 var(--padding-small);
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__title, .page__pagination {
|
.pagination a {
|
||||||
flex-shrink: 0;
|
padding: 0 var(--padding-small);
|
||||||
|
font-weight: bold;
|
||||||
display: block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination__dropdown {
|
|
||||||
min-width: 4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $min_px_width_for_desktop_thumb) {
|
|
||||||
.page__title, .page__options {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page__header, .page__pagination, .page__info {
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page__pagination nav {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
a, span {
|
|
||||||
text-align: center;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
padding: 0 1vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,129 +0,0 @@
|
||||||
|
|
||||||
.poll {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-area {
|
|
||||||
border: 1px solid $border_color;
|
|
||||||
background: $background_color;
|
|
||||||
color: $foreground_color;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-area--in-tab {
|
|
||||||
border: 0;
|
|
||||||
background: transparent;
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll__header {
|
|
||||||
margin: 0 0 5px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-vote-form, .poll-results {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column nowrap;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-form__options {
|
|
||||||
max-width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-form__options__label {
|
|
||||||
padding: 5px;
|
|
||||||
margin: 5px;
|
|
||||||
border: 1px solid $border_color;
|
|
||||||
background: $poll_form_label_background;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row nowrap;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-option__label,
|
|
||||||
.poll-form__options__label span {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-form__status, .poll-results__concluded-at {
|
|
||||||
margin-top: 5px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-form__actions {
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-option-list {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-option {
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-option__text {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row nowrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-option--top__text {
|
|
||||||
color: $header_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-option--top,
|
|
||||||
.poll-option--user-vote {
|
|
||||||
cursor: help;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-option--user-vote {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-option__label {
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-option__counts {
|
|
||||||
padding-left: 5px;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row nowrap;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-bar {
|
|
||||||
flex: 1 0 100%;
|
|
||||||
height: 4px;
|
|
||||||
border: 1px solid $border_color;
|
|
||||||
background: $background_color;
|
|
||||||
margin-top: 5px;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-bar__image {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-bar__fill {
|
|
||||||
fill: $header_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll-bar__fill--top {
|
|
||||||
fill: $foreground_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
#add-poll {
|
|
||||||
margin-top:.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#delete-poll-form {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
// Place all the styles related to the Post controller here.
|
|
||||||
// They will automatically be included in application.css.
|
|
||||||
// You can use Sass (SCSS) here: http://sass-lang.com/
|
|
||||||
|
|
||||||
|
|
||||||
// Post diffs
|
|
||||||
del.differ {
|
|
||||||
width: 670px;
|
|
||||||
background: $danger_light_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
ins.differ {
|
|
||||||
width: 670px;
|
|
||||||
background: $success_light_color;
|
|
||||||
}
|
|
||||||
|
|
@ -1,139 +0,0 @@
|
||||||
|
|
||||||
.profile-top {
|
|
||||||
display: flex;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-top__avatar {
|
|
||||||
margin: 10px 10px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-top__name-and-links {
|
|
||||||
// Allow options extra space on high width even when name is short
|
|
||||||
flex: 1 1 0%;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Lessen h1's margins because it's not butting up against text
|
|
||||||
h1.profile-top__name-header {
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table--stats {
|
|
||||||
min-width: 220px;
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
td.table--stats__parameter {
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
td.table--stats__value {
|
|
||||||
width: 15%;
|
|
||||||
}
|
|
||||||
|
|
||||||
td.table--stats__sparkline {
|
|
||||||
width: 65%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-top__options {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-top__options__column {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
// Override terrible browser styling
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0.5em 2em 0.5em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-admin__options__column {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
list-style: none;
|
|
||||||
padding: 4px;
|
|
||||||
min-width: 200px;
|
|
||||||
margin: 0.5em 2em 0.5em 0;
|
|
||||||
|
|
||||||
li {
|
|
||||||
padding: 6px;
|
|
||||||
background: $header_secondary_color;
|
|
||||||
margin: 4px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li:hover {
|
|
||||||
background: $header_secondary_hover_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
color: $foreground_color !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.admin__button {
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $min_px_width_for_desktop_layout) {
|
|
||||||
.profile-admin__options__column {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-block {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 5px;
|
|
||||||
max-width: 125px;
|
|
||||||
vertical-align: top;
|
|
||||||
b { display: block; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-about {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner__2fa {
|
|
||||||
margin-left: 8px;
|
|
||||||
padding: 2px;
|
|
||||||
|
|
||||||
.success {
|
|
||||||
background: $success_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.danger {
|
|
||||||
background: $danger_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.enable-2fa {
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.break-word {
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar--28px {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar--50px {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar--100px {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar--125px {
|
|
||||||
width: 125px;
|
|
||||||
height: 125px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
.flex-wrap {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
31
assets/css/views/_statistics.scss
Normal file
31
assets/css/views/_statistics.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
.statistics {
|
||||||
|
@extend .flex__column;
|
||||||
|
border: 1px solid var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.statistics__statistic {
|
||||||
|
@include even-odd;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 15% 15% auto;
|
||||||
|
background: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.statistics__column {
|
||||||
|
text-align: center;
|
||||||
|
padding: var(--padding-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkline {
|
||||||
|
border-bottom: 1px solid var(--primary-border-color);
|
||||||
|
display: flex;
|
||||||
|
height: var(--padding-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.barline__bar {
|
||||||
|
fill: var(--primary-border-color);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
fill: var(--danger-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
.upload-stats rect {
|
|
||||||
fill: $sparkline_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-stats rect:hover {
|
|
||||||
fill: red;
|
|
||||||
}
|
|
||||||
88
assets/css/views/_tag.scss
Normal file
88
assets/css/views/_tag.scss
Normal file
|
|
@ -0,0 +1,88 @@
|
||||||
|
@mixin tag-color($tag_type) {
|
||||||
|
&[data-tag-category=#{$tag_type}] {
|
||||||
|
color: var(--tag-#{$tag_type}-text-color);
|
||||||
|
background: var(--tag-#{$tag_type}-color);
|
||||||
|
border-color: var(--tag-#{$tag_type}-border-color);
|
||||||
|
|
||||||
|
.tag__state {
|
||||||
|
color: var(--tag-#{$tag_type}-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag__name {
|
||||||
|
color: var(--tag-#{$tag_type}-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag__count {
|
||||||
|
background: var(--tag-#{$tag_type}-border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-list {
|
||||||
|
@extend .flex__row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: var(--padding-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
display: inline-table;
|
||||||
|
width: fit-content;
|
||||||
|
line-height: var(--padding-large);
|
||||||
|
margin-right: var(--padding-small);
|
||||||
|
margin-bottom: var(--padding-small);
|
||||||
|
color: var(--tag-default-text-color);
|
||||||
|
background: var(--tag-default-color);
|
||||||
|
border: 1px solid var(--tag-default-border-color);
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include tag-color(error);
|
||||||
|
@include tag-color(rating);
|
||||||
|
@include tag-color(origin);
|
||||||
|
@include tag-color(character);
|
||||||
|
@include tag-color(oc);
|
||||||
|
@include tag-color(species);
|
||||||
|
@include tag-color(body-type);
|
||||||
|
@include tag-color(content-fanmade);
|
||||||
|
@include tag-color(content-official);
|
||||||
|
@include tag-color(spoiler);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag > span {
|
||||||
|
display: table-cell;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag__state {
|
||||||
|
color: var(--tag-default-text-color);
|
||||||
|
padding-left: var(--padding-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag__name {
|
||||||
|
color: var(--tag-default-text-color);
|
||||||
|
padding-right: var(--padding-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag__count {
|
||||||
|
background: var(--tag-default-border-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
padding: 0 var(--padding-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag__dropdown__link {
|
||||||
|
background-color: var(--primary-muted-color);
|
||||||
|
padding: 0 var(--padding-small);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--primary-dark-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-info__image {
|
||||||
|
border: 1px solid var(--secondary-color);
|
||||||
|
font-size: var(--font-tiny-size);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
@ -1,217 +0,0 @@
|
||||||
|
|
||||||
// Tagsinput
|
|
||||||
.tagsinput {
|
|
||||||
display: block;
|
|
||||||
background: $background_color;
|
|
||||||
border: 1px solid $meta_border_color;
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: 10.6em;
|
|
||||||
overflow: auto;
|
|
||||||
padding: 5px;
|
|
||||||
resize: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-page .tag, .tagsinput .tag {
|
|
||||||
font-family: $font_family_base;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tagsinput .tag a {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tagsinput.js-taginput {
|
|
||||||
height: auto;
|
|
||||||
min-height: 7.33em;
|
|
||||||
max-height: 50vh;
|
|
||||||
padding-bottom: 0;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tagsinput.js-taginput .input {
|
|
||||||
padding: 5px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Autocomplete
|
|
||||||
.autocomplete__list {
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
position: absolute;
|
|
||||||
user-select: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.autocomplete__item {
|
|
||||||
background: $base_color;
|
|
||||||
color: $text_light_color;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.autocomplete__item--selected {
|
|
||||||
background: $text_light_color;
|
|
||||||
color: $base_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tags
|
|
||||||
.tag {
|
|
||||||
border: 1px solid;
|
|
||||||
display: inline-table;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag > span {
|
|
||||||
padding: 5px;
|
|
||||||
display: table-cell;
|
|
||||||
white-space: pre;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag a {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag__count {
|
|
||||||
background-color: $tag_normal_border;
|
|
||||||
color: $foreground-color;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag__dropdown__link {
|
|
||||||
background-color: $meta_color;
|
|
||||||
padding: 5px;
|
|
||||||
&:hover {
|
|
||||||
background-color: $tag_dropdown_hover_background;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag {
|
|
||||||
background: $tag_normal_background;
|
|
||||||
border-color: $tag_normal_border;
|
|
||||||
color: $tag_normal_color;
|
|
||||||
&[data-tag-category="rating"] {
|
|
||||||
background: $tag_category_rating_background;
|
|
||||||
border-color: $tag_category_rating_border;
|
|
||||||
color: $tag_category_rating_color;
|
|
||||||
.tag__count {
|
|
||||||
background: $tag_category_rating_border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[data-tag-category="spoiler"] {
|
|
||||||
background: $tag_category_spoiler_background;
|
|
||||||
border-color: $tag_category_spoiler_border;
|
|
||||||
color: $tag_category_spoiler_color;
|
|
||||||
.tag__count {
|
|
||||||
background: $tag_category_spoiler_border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[data-tag-category="origin"] {
|
|
||||||
background: $tag_category_origin_background;
|
|
||||||
border-color: $tag_category_origin_border;
|
|
||||||
color: $tag_category_origin_color;
|
|
||||||
.tag__count {
|
|
||||||
background: $tag_category_origin_border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[data-tag-category="oc"] {
|
|
||||||
background: $tag_category_oc_background;
|
|
||||||
border-color: $tag_category_oc_border;
|
|
||||||
color: $tag_category_oc_color;
|
|
||||||
.tag__count {
|
|
||||||
background: $tag_category_oc_border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[data-tag-category="error"] {
|
|
||||||
background: $tag_category_error_background;
|
|
||||||
border-color: $tag_category_error_border;
|
|
||||||
color: $tag_category_error_color;
|
|
||||||
.tag__count {
|
|
||||||
background: $tag_category_error_border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[data-tag-category="character"] {
|
|
||||||
background: $tag_category_character_background;
|
|
||||||
border-color: $tag_category_character_border;
|
|
||||||
color: $tag_category_character_color;
|
|
||||||
.tag__count {
|
|
||||||
background: $tag_category_character_border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[data-tag-category="content-official"] {
|
|
||||||
background: $tag_category_content_official_background;
|
|
||||||
border-color: $tag_category_content_official_border;
|
|
||||||
color: $tag_category_content_official_color;
|
|
||||||
.tag__count {
|
|
||||||
background: $tag_category_content_official_border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[data-tag-category="content-fanmade"] {
|
|
||||||
background: $tag_category_content_fanmade_background;
|
|
||||||
border-color: $tag_category_content_fanmade_border;
|
|
||||||
color: $tag_category_content_fanmade_color;
|
|
||||||
.tag__count {
|
|
||||||
background: $tag_category_content_fanmade_border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[data-tag-category="species"] {
|
|
||||||
background: $tag_category_species_background;
|
|
||||||
border-color: $tag_category_species_border;
|
|
||||||
color: $tag_category_species_color;
|
|
||||||
.tag__count {
|
|
||||||
background: $tag_category_species_border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[data-tag-category="body-type"] {
|
|
||||||
background: $tag_category_body_type_background;
|
|
||||||
border-color: $tag_category_body_type_border;
|
|
||||||
color: $tag_category_body_type_color;
|
|
||||||
.tag__count {
|
|
||||||
background: $tag_category_body_type_border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Quick Tag Table
|
|
||||||
.quick-tag-table__tab {
|
|
||||||
> div {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0 6px;
|
|
||||||
vertical-align: top;
|
|
||||||
border-right: $border;
|
|
||||||
border-left: $border;
|
|
||||||
}
|
|
||||||
> div:last-child {
|
|
||||||
border-right: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span.quick-tag-table__tab-separator {
|
|
||||||
background: $background_color;
|
|
||||||
border: $border;
|
|
||||||
border-bottom: 0;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-image--constrained {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-info__category {
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-info__heading {
|
|
||||||
margin: 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-info__list {
|
|
||||||
margin: 0;
|
|
||||||
padding-left: 30px;
|
|
||||||
}
|
|
||||||
31
assets/css/views/_textile.scss
Normal file
31
assets/css/views/_textile.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
.textile-syntax-reference {
|
||||||
|
@extend .flex__row;
|
||||||
|
line-height: var(--block-header-height);
|
||||||
|
vertical-align: center;
|
||||||
|
margin-bottom: var(--padding-small);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textile-syntax-reference > span,
|
||||||
|
.textile-syntax-reference > button {
|
||||||
|
margin-left: var(--padding-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.textile_help {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: var(--padding-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.spoiler, .spoiler a {
|
||||||
|
color: var(--spoiler-color);
|
||||||
|
background: var(--spoiler-color)
|
||||||
|
}
|
||||||
|
|
||||||
|
.spoiler-revealed, .spoiler:hover {
|
||||||
|
color: var(--text-color);
|
||||||
|
background: var(--spoiler-revealed-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.spoiler-revealed a, .spoiler:hover a {
|
||||||
|
color: var(--link-color);
|
||||||
|
}
|
||||||
|
|
@ -17,6 +17,9 @@ import './vendor/values-entries.polyfill';
|
||||||
import './ujs';
|
import './ujs';
|
||||||
import './when-ready';
|
import './when-ready';
|
||||||
|
|
||||||
import '../css/themes/default.scss';
|
// Base stylesheet.
|
||||||
import '../css/themes/dark.scss';
|
import '../css/application.scss';
|
||||||
import '../css/themes/red.scss';
|
|
||||||
|
// Themes.
|
||||||
|
import '../css/themes/dark-blue.scss';
|
||||||
|
import '../css/themes/dark-purple.scss';
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ export function setupGalleryEditing() {
|
||||||
|
|
||||||
const [ rearrangeEl, saveEl ] = $$('.rearrange-button');
|
const [ rearrangeEl, saveEl ] = $$('.rearrange-button');
|
||||||
const sortableEl = $('#sortable');
|
const sortableEl = $('#sortable');
|
||||||
const containerEl = $('.js-resizable-media-container');
|
const containerEl = $('.media-list');
|
||||||
|
|
||||||
// Copy array
|
// Copy array
|
||||||
let oldImages = window.booru.galleryImages.slice();
|
let oldImages = window.booru.galleryImages.slice();
|
||||||
|
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
let mediaContainers;
|
|
||||||
|
|
||||||
/* Hardcoded dimensions of thumb boxes; at mediaLargeMinSize, large box becomes a small one (font size gets diminished).
|
|
||||||
* At minimum width, the large box still has four digit fave/score numbers and five digit comment number fitting in a single row
|
|
||||||
* (small box may lose the number of comments in a hidden overflow) */
|
|
||||||
const mediaLargeMaxSize = 250, mediaLargeMinSize = 190, mediaSmallMaxSize = 156, mediaSmallMinSize = 140;
|
|
||||||
/* Margin between thumbs (6) + borders (2) + 1 extra px to correct rounding errors */
|
|
||||||
const mediaBoxOffset = 9;
|
|
||||||
|
|
||||||
export function processResizableMedia() {
|
|
||||||
[].slice.call(mediaContainers).forEach(container => {
|
|
||||||
const containerHasLargeBoxes = container.querySelector('.media-box__content--large') !== null,
|
|
||||||
containerWidth = container.offsetWidth - 14; /* subtract container padding */
|
|
||||||
|
|
||||||
/* If at least three large boxes fit in a single row, we do not downsize them to small ones.
|
|
||||||
* This ensures that desktop users get less boxes in a row, but with bigger images inside. */
|
|
||||||
const largeBoxesFitting = Math.floor(containerWidth / (mediaLargeMinSize + mediaBoxOffset));
|
|
||||||
if (largeBoxesFitting >= 3) {
|
|
||||||
/* At the same time, we don't want small boxes to be upscaled. */
|
|
||||||
if (containerHasLargeBoxes) {
|
|
||||||
/* Larger boxes are preferred to more items in a row */
|
|
||||||
setMediaSize(container, containerWidth, mediaLargeMinSize, mediaLargeMaxSize);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Mobile users, on the other hand, should get as many boxes in a row as possible */
|
|
||||||
else {
|
|
||||||
setMediaSize(container, containerWidth, mediaSmallMinSize, mediaSmallMaxSize);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function applyMediaSize(container, size) {
|
|
||||||
const mediaItems = container.querySelectorAll('.media-box__content');
|
|
||||||
|
|
||||||
[].slice.call(mediaItems).forEach(item => {
|
|
||||||
item.style.width = `${size}px`;
|
|
||||||
item.style.height = `${size}px`;
|
|
||||||
|
|
||||||
const header = item.parentNode.firstElementChild;
|
|
||||||
// TODO: Make this proper and/or rethink this entire croc of bullshit
|
|
||||||
item.parentNode.style.width = `${size}px`;
|
|
||||||
/* When the large box has width less than mediaLargeMinSize, the header gets wrapped and occupies more than one line.
|
|
||||||
* To prevent that, we add a class that diminishes its padding and font size. */
|
|
||||||
if (size < mediaLargeMinSize) {
|
|
||||||
header.classList.add('media-box__header--small');
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
header.classList.remove('media-box__header--small');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function setMediaSize(container, containerWidth, minMediaSize, maxMediaSize) {
|
|
||||||
const maxThumbsFitting = Math.floor(containerWidth / (minMediaSize + mediaBoxOffset)),
|
|
||||||
minThumbsFitting = Math.floor(containerWidth / (maxMediaSize + mediaBoxOffset)),
|
|
||||||
fitThumbs = Math.round((maxThumbsFitting + minThumbsFitting) / 2),
|
|
||||||
thumbSize = Math.max(Math.floor(containerWidth / fitThumbs) - 9, minMediaSize);
|
|
||||||
|
|
||||||
applyMediaSize(container, thumbSize);
|
|
||||||
}
|
|
||||||
|
|
||||||
function initializeListener() {
|
|
||||||
mediaContainers = document.querySelectorAll('.js-resizable-media-container');
|
|
||||||
|
|
||||||
if (mediaContainers.length > 0) {
|
|
||||||
window.addEventListener('resize', processResizableMedia);
|
|
||||||
processResizableMedia();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export { initializeListener };
|
|
||||||
|
|
@ -22,7 +22,6 @@ import { setupEvents } from './misc';
|
||||||
import { setupNotifications } from './notifications';
|
import { setupNotifications } from './notifications';
|
||||||
import { setupPreviews } from './preview';
|
import { setupPreviews } from './preview';
|
||||||
import { setupQuickTag } from './quick-tag';
|
import { setupQuickTag } from './quick-tag';
|
||||||
import { initializeListener } from './resizablemedia';
|
|
||||||
import { setupSettings } from './settings';
|
import { setupSettings } from './settings';
|
||||||
import { listenForKeys } from './shortcuts';
|
import { listenForKeys } from './shortcuts';
|
||||||
import { initTagDropdown } from './tags';
|
import { initTagDropdown } from './tags';
|
||||||
|
|
@ -54,7 +53,6 @@ whenReady(() => {
|
||||||
setupNotifications();
|
setupNotifications();
|
||||||
setupPreviews();
|
setupPreviews();
|
||||||
setupQuickTag();
|
setupQuickTag();
|
||||||
initializeListener();
|
|
||||||
setupSettings();
|
setupSettings();
|
||||||
listenForKeys();
|
listenForKeys();
|
||||||
initTagDropdown();
|
initTagDropdown();
|
||||||
|
|
|
||||||
|
|
@ -46,6 +46,8 @@ module.exports = {
|
||||||
performance: { hints: false },
|
performance: { hints: false },
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
|
elements: path.resolve(__dirname, 'css/elements/'),
|
||||||
|
themes: path.resolve(__dirname, 'css/themes/'),
|
||||||
common: path.resolve(__dirname, 'css/common/'),
|
common: path.resolve(__dirname, 'css/common/'),
|
||||||
views: path.resolve(__dirname, 'css/views/')
|
views: path.resolve(__dirname, 'css/views/')
|
||||||
}
|
}
|
||||||
|
|
@ -77,7 +79,7 @@ module.exports = {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /themes\/[a-z]+\.scss$/,
|
test: /(themes\/[a-z\-]+\.scss|application.scss)$/,
|
||||||
use: [
|
use: [
|
||||||
{
|
{
|
||||||
loader: 'file-loader',
|
loader: 'file-loader',
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ defmodule PhilomenaWeb.Admin.Report.ClaimController do
|
||||||
|
|
||||||
{:error, _changeset} ->
|
{:error, _changeset} ->
|
||||||
conn
|
conn
|
||||||
|> put_flash(:error, "Couldn't claim that report!")
|
|> put_flash(:warning, "Couldn't claim that report!")
|
||||||
|> redirect(to: Routes.admin_report_path(conn, :show, conn.assigns.report))
|
|> redirect(to: Routes.admin_report_path(conn, :show, conn.assigns.report))
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ defmodule PhilomenaWeb.Admin.User.ApiKeyController do
|
||||||
{:ok, user} = Users.reset_api_key(conn.assigns.user)
|
{:ok, user} = Users.reset_api_key(conn.assigns.user)
|
||||||
|
|
||||||
conn
|
conn
|
||||||
|> put_flash(:info, "API token successfully reset.")
|
|> put_flash(:info, "API token was successfully reset.")
|
||||||
|> redirect(to: Routes.profile_path(conn, :show, user))
|
|> redirect(to: Routes.profile_path(conn, :show, user))
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ defmodule PhilomenaWeb.Admin.User.DownvoteController do
|
||||||
Exq.enqueue(Exq, "indexing", UserUnvoteWorker, [conn.assigns.user.id, false])
|
Exq.enqueue(Exq, "indexing", UserUnvoteWorker, [conn.assigns.user.id, false])
|
||||||
|
|
||||||
conn
|
conn
|
||||||
|> put_flash(:info, "Downvote wipe started.")
|
|> put_flash(:alert, "Downvote wipe started.")
|
||||||
|> redirect(to: Routes.profile_path(conn, :show, conn.assigns.user))
|
|> redirect(to: Routes.profile_path(conn, :show, conn.assigns.user))
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ defmodule PhilomenaWeb.Admin.User.VoteController do
|
||||||
Exq.enqueue(Exq, "indexing", UserUnvoteWorker, [conn.assigns.user.id, true])
|
Exq.enqueue(Exq, "indexing", UserUnvoteWorker, [conn.assigns.user.id, true])
|
||||||
|
|
||||||
conn
|
conn
|
||||||
|> put_flash(:info, "Vote and fave wipe started.")
|
|> put_flash(:alert, "Vote and fave wipe started.")
|
||||||
|> redirect(to: Routes.profile_path(conn, :show, conn.assigns.user))
|
|> redirect(to: Routes.profile_path(conn, :show, conn.assigns.user))
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ defmodule PhilomenaWeb.Admin.User.WipeController do
|
||||||
|
|
||||||
conn
|
conn
|
||||||
|> put_flash(
|
|> put_flash(
|
||||||
:info,
|
:alert,
|
||||||
"PII wipe queued, please verify and then deactivate the account as necessary."
|
"PII wipe queued, please verify and then deactivate the account as necessary."
|
||||||
)
|
)
|
||||||
|> redirect(to: Routes.profile_path(conn, :show, conn.assigns.user))
|
|> redirect(to: Routes.profile_path(conn, :show, conn.assigns.user))
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@ defmodule PhilomenaWeb.ConfirmationController do
|
||||||
# Regardless of the outcome, show an impartial success/error message.
|
# Regardless of the outcome, show an impartial success/error message.
|
||||||
conn
|
conn
|
||||||
|> put_flash(
|
|> put_flash(
|
||||||
:info,
|
:alert,
|
||||||
"If your email is in our system and it has not been confirmed yet, " <>
|
"If your email is in our system and it has not been confirmed yet, " <>
|
||||||
"you will receive an email with instructions shortly."
|
"you will receive an email with instructions shortly."
|
||||||
)
|
)
|
||||||
|
|
@ -39,7 +39,7 @@ defmodule PhilomenaWeb.ConfirmationController do
|
||||||
|
|
||||||
:error ->
|
:error ->
|
||||||
conn
|
conn
|
||||||
|> put_flash(:error, "Confirmation link is invalid or it has expired.")
|
|> put_flash(:warning, "Confirmation link is invalid or it has expired.")
|
||||||
|> redirect(to: "/")
|
|> redirect(to: "/")
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ defmodule PhilomenaWeb.DuplicateReport.AcceptController do
|
||||||
|
|
||||||
_error ->
|
_error ->
|
||||||
conn
|
conn
|
||||||
|> put_flash(:error, "Failed to accept report! Maybe someone else already accepted it.")
|
|> put_flash(:warning, "Failed to accept report! Maybe someone else already accepted it.")
|
||||||
|> redirect(to: Routes.duplicate_report_path(conn, :index))
|
|> redirect(to: Routes.duplicate_report_path(conn, :index))
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ defmodule PhilomenaWeb.DuplicateReport.AcceptReverseController do
|
||||||
|
|
||||||
_error ->
|
_error ->
|
||||||
conn
|
conn
|
||||||
|> put_flash(:error, "Failed to accept report! Maybe someone else already accepted it.")
|
|> put_flash(:warning, "Failed to accept report! Maybe someone else already accepted it.")
|
||||||
|> redirect(to: Routes.duplicate_report_path(conn, :index))
|
|> redirect(to: Routes.duplicate_report_path(conn, :index))
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@ defmodule PhilomenaWeb.Filter.CurrentController do
|
||||||
|
|
||||||
conn
|
conn
|
||||||
|> update_filter(user, filter)
|
|> update_filter(user, filter)
|
||||||
|> put_flash(:info, "Switched to filter #{filter.name}")
|
|> put_flash(:alert, "Switched to filter #{filter.name}")
|
||||||
|> redirect(external: conn.assigns.referrer)
|
|> redirect(external: conn.assigns.referrer)
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -189,7 +189,7 @@ defmodule PhilomenaWeb.FilterController do
|
||||||
|
|
||||||
_error ->
|
_error ->
|
||||||
conn
|
conn
|
||||||
|> put_flash(:error, "Filter is still in use, not deleted.")
|
|> put_flash(:warning, "Filter is still in use, not deleted.")
|
||||||
|> redirect(to: Routes.filter_path(conn, :show, filter))
|
|> redirect(to: Routes.filter_path(conn, :show, filter))
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ defmodule PhilomenaWeb.Image.FeatureController do
|
||||||
case conn.assigns.image.hidden_from_users do
|
case conn.assigns.image.hidden_from_users do
|
||||||
true ->
|
true ->
|
||||||
conn
|
conn
|
||||||
|> put_flash(:error, "Cannot feature a hidden image.")
|
|> put_flash(:warning, "Cannot feature a hidden image.")
|
||||||
|> redirect(to: Routes.image_path(conn, :show, conn.assigns.image))
|
|> redirect(to: Routes.image_path(conn, :show, conn.assigns.image))
|
||||||
|> halt()
|
|> halt()
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@ defmodule PhilomenaWeb.Image.FileController do
|
||||||
case conn.assigns.image.hidden_from_users do
|
case conn.assigns.image.hidden_from_users do
|
||||||
true ->
|
true ->
|
||||||
conn
|
conn
|
||||||
|> put_flash(:error, "Cannot replace a hidden image.")
|
|> put_flash(:warning, "Cannot replace a hidden image.")
|
||||||
|> redirect(to: Routes.image_path(conn, :show, conn.assigns.image))
|
|> redirect(to: Routes.image_path(conn, :show, conn.assigns.image))
|
||||||
|> halt()
|
|> halt()
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -200,7 +200,7 @@ defmodule PhilomenaWeb.ImageController do
|
||||||
not Canada.Can.can?(conn.assigns.current_user, :show, image) ->
|
not Canada.Can.can?(conn.assigns.current_user, :show, image) ->
|
||||||
conn
|
conn
|
||||||
|> put_flash(
|
|> put_flash(
|
||||||
:info,
|
:alert,
|
||||||
"The image you were looking for has been marked a duplicate of the image below"
|
"The image you were looking for has been marked a duplicate of the image below"
|
||||||
)
|
)
|
||||||
|> redirect(to: Routes.image_path(conn, :show, image.duplicate_id))
|
|> redirect(to: Routes.image_path(conn, :show, image.duplicate_id))
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ defmodule PhilomenaWeb.PasswordController do
|
||||||
# Regardless of the outcome, show an impartial success/error message.
|
# Regardless of the outcome, show an impartial success/error message.
|
||||||
conn
|
conn
|
||||||
|> put_flash(
|
|> put_flash(
|
||||||
:info,
|
:alert,
|
||||||
"If your email is in our system, you will receive instructions to reset your password shortly."
|
"If your email is in our system, you will receive instructions to reset your password shortly."
|
||||||
)
|
)
|
||||||
|> redirect(to: "/")
|
|> redirect(to: "/")
|
||||||
|
|
@ -54,7 +54,7 @@ defmodule PhilomenaWeb.PasswordController do
|
||||||
conn |> assign(:user, user) |> assign(:token, token)
|
conn |> assign(:user, user) |> assign(:token, token)
|
||||||
else
|
else
|
||||||
conn
|
conn
|
||||||
|> put_flash(:error, "Reset password link is invalid or it has expired.")
|
|> put_flash(:warning, "Reset password link is invalid or it has expired.")
|
||||||
|> redirect(to: "/")
|
|> redirect(to: "/")
|
||||||
|> halt()
|
|> halt()
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -49,7 +49,7 @@ defmodule PhilomenaWeb.Profile.ArtistLinkController do
|
||||||
{:ok, artist_link} ->
|
{:ok, artist_link} ->
|
||||||
conn
|
conn
|
||||||
|> put_flash(
|
|> put_flash(
|
||||||
:info,
|
:alert,
|
||||||
"Link submitted! Please put '#{artist_link.verification_code}' on your linked webpage now."
|
"Link submitted! Please put '#{artist_link.verification_code}' on your linked webpage now."
|
||||||
)
|
)
|
||||||
|> redirect(
|
|> redirect(
|
||||||
|
|
|
||||||
|
|
@ -99,7 +99,7 @@ defmodule PhilomenaWeb.Profile.Commission.ItemController do
|
||||||
{:ok, _multi} = Commissions.delete_item(item)
|
{:ok, _multi} = Commissions.delete_item(item)
|
||||||
|
|
||||||
conn
|
conn
|
||||||
|> put_flash(:info, "Item deleted successfully.")
|
|> put_flash(:info, "Item successfully deleted.")
|
||||||
|> redirect(to: Routes.profile_commission_path(conn, :show, conn.assigns.user))
|
|> redirect(to: Routes.profile_commission_path(conn, :show, conn.assigns.user))
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -153,7 +153,7 @@ defmodule PhilomenaWeb.Profile.CommissionController do
|
||||||
false ->
|
false ->
|
||||||
conn
|
conn
|
||||||
|> put_flash(
|
|> put_flash(
|
||||||
:error,
|
:warning,
|
||||||
"You must have a verified artist link to create a commission listing."
|
"You must have a verified artist link to create a commission listing."
|
||||||
)
|
)
|
||||||
|> redirect(to: Routes.commission_path(conn, :index))
|
|> redirect(to: Routes.commission_path(conn, :index))
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ defmodule PhilomenaWeb.Registration.EmailController do
|
||||||
|
|
||||||
conn
|
conn
|
||||||
|> put_flash(
|
|> put_flash(
|
||||||
:info,
|
:alert,
|
||||||
"A link to confirm your email change has been sent to the new address."
|
"A link to confirm your email change has been sent to the new address."
|
||||||
)
|
)
|
||||||
|> redirect(to: Routes.registration_path(conn, :edit))
|
|> redirect(to: Routes.registration_path(conn, :edit))
|
||||||
|
|
@ -37,7 +37,7 @@ defmodule PhilomenaWeb.Registration.EmailController do
|
||||||
|
|
||||||
:error ->
|
:error ->
|
||||||
conn
|
conn
|
||||||
|> put_flash(:error, "Email change link is invalid or it has expired.")
|
|> put_flash(:warning, "Email change link is invalid or it has expired.")
|
||||||
|> redirect(to: Routes.registration_path(conn, :edit))
|
|> redirect(to: Routes.registration_path(conn, :edit))
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,7 @@ defmodule PhilomenaWeb.ReportController do
|
||||||
true ->
|
true ->
|
||||||
conn
|
conn
|
||||||
|> put_flash(
|
|> put_flash(
|
||||||
:error,
|
:warning,
|
||||||
"You may not have more than #{max_reports()} open reports at a time. Did you read the reporting tips?"
|
"You may not have more than #{max_reports()} open reports at a time. Did you read the reporting tips?"
|
||||||
)
|
)
|
||||||
|> redirect(to: "/")
|
|> redirect(to: "/")
|
||||||
|
|
@ -50,7 +50,7 @@ defmodule PhilomenaWeb.ReportController do
|
||||||
{:ok, _report} ->
|
{:ok, _report} ->
|
||||||
conn
|
conn
|
||||||
|> put_flash(
|
|> put_flash(
|
||||||
:info,
|
:alert,
|
||||||
"Your report has been received and will be checked by staff shortly."
|
"Your report has been received and will be checked by staff shortly."
|
||||||
)
|
)
|
||||||
|> redirect(to: redirect_path(conn, conn.assigns.current_user))
|
|> redirect(to: redirect_path(conn, conn.assigns.current_user))
|
||||||
|
|
|
||||||
|
|
@ -162,7 +162,7 @@ defmodule PhilomenaWeb.TagController do
|
||||||
%{aliased_tag: tag} ->
|
%{aliased_tag: tag} ->
|
||||||
conn
|
conn
|
||||||
|> put_flash(
|
|> put_flash(
|
||||||
:info,
|
:alert,
|
||||||
"This tag (\"#{conn.assigns.tag.name}\") has been aliased into the tag \"#{tag.name}\"."
|
"This tag (\"#{conn.assigns.tag.name}\") has been aliased into the tag \"#{tag.name}\"."
|
||||||
)
|
)
|
||||||
|> redirect(to: Routes.tag_path(conn, :show, tag))
|
|> redirect(to: Routes.tag_path(conn, :show, tag))
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@ defmodule PhilomenaWeb.Topic.Poll.VoteController do
|
||||||
|
|
||||||
_error ->
|
_error ->
|
||||||
conn
|
conn
|
||||||
|> put_flash(:error, "Your vote was not recorded.")
|
|> put_flash(:warning, "Your vote was not recorded.")
|
||||||
|> redirect(to: Routes.forum_topic_path(conn, :show, topic.forum, topic))
|
|> redirect(to: Routes.forum_topic_path(conn, :show, topic.forum, topic))
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -60,7 +60,7 @@ defmodule PhilomenaWeb.Topic.PostController do
|
||||||
|
|
||||||
_error ->
|
_error ->
|
||||||
conn
|
conn
|
||||||
|> put_flash(:error, "There was an error creating the post")
|
|> put_flash(:warning, "There was an error creating the post")
|
||||||
|> redirect(to: Routes.forum_topic_path(conn, :show, forum, topic))
|
|> redirect(to: Routes.forum_topic_path(conn, :show, forum, topic))
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@ defmodule PhilomenaWeb.UnlockController do
|
||||||
# Regardless of the outcome, show an impartial success/error message.
|
# Regardless of the outcome, show an impartial success/error message.
|
||||||
conn
|
conn
|
||||||
|> put_flash(
|
|> put_flash(
|
||||||
:info,
|
:alert,
|
||||||
"If your email is in our system and your account has been locked, " <>
|
"If your email is in our system and your account has been locked, " <>
|
||||||
"you will receive an email with instructions shortly."
|
"you will receive an email with instructions shortly."
|
||||||
)
|
)
|
||||||
|
|
@ -39,7 +39,7 @@ defmodule PhilomenaWeb.UnlockController do
|
||||||
|
|
||||||
:error ->
|
:error ->
|
||||||
conn
|
conn
|
||||||
|> put_flash(:error, "Unlock link is invalid or it has expired.")
|
|> put_flash(:warning, "Unlock link is invalid or it has expired.")
|
||||||
|> redirect(to: "/")
|
|> redirect(to: "/")
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ defmodule PhilomenaWeb.CheckCaptchaPlug do
|
||||||
false ->
|
false ->
|
||||||
conn
|
conn
|
||||||
|> put_flash(
|
|> put_flash(
|
||||||
:error,
|
:warning,
|
||||||
"There was an error verifying you're not a robot. Please try again."
|
"There was an error verifying you're not a robot. Please try again."
|
||||||
)
|
)
|
||||||
|> do_failure_response(conn.assigns.ajax?)
|
|> do_failure_response(conn.assigns.ajax?)
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ defmodule PhilomenaWeb.CompromisedPasswordCheckPlug do
|
||||||
true ->
|
true ->
|
||||||
conn
|
conn
|
||||||
|> put_flash(
|
|> put_flash(
|
||||||
:error,
|
:warning,
|
||||||
"We've detected that the password you entered has been compromised during a data breach of another website. Please choose a different password."
|
"We've detected that the password you entered has been compromised during a data breach of another website. Please choose a different password."
|
||||||
)
|
)
|
||||||
|> redirect(external: conn.assigns.referrer)
|
|> redirect(external: conn.assigns.referrer)
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@ defmodule PhilomenaWeb.EnsureUserEnabledPlug do
|
||||||
|
|
||||||
defp maybe_halt(true, conn) do
|
defp maybe_halt(true, conn) do
|
||||||
conn
|
conn
|
||||||
|> Controller.put_flash(:error, "Your account is not currently active.")
|
|> Controller.put_flash(:alert, "Your account is not currently active.")
|
||||||
|> UserAuth.log_out_user()
|
|> UserAuth.log_out_user()
|
||||||
|> Conn.halt()
|
|> Conn.halt()
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ defmodule PhilomenaWeb.NotAuthorizedPlug do
|
||||||
_false ->
|
_false ->
|
||||||
conn
|
conn
|
||||||
|> Controller.fetch_flash()
|
|> Controller.fetch_flash()
|
||||||
|> Controller.put_flash(:error, "You can't access that page.")
|
|> Controller.put_flash(:warning, "You can't access that page.")
|
||||||
|> Controller.redirect(to: "/")
|
|> Controller.redirect(to: "/")
|
||||||
|> Conn.halt()
|
|> Conn.halt()
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ defmodule PhilomenaWeb.NotFoundPlug do
|
||||||
false ->
|
false ->
|
||||||
conn
|
conn
|
||||||
|> Controller.fetch_flash()
|
|> Controller.fetch_flash()
|
||||||
|> Controller.put_flash(:error, "Couldn't find what you were looking for!")
|
|> Controller.put_flash(:warning, "Couldn't find what you were looking for!")
|
||||||
|> Controller.redirect(to: "/")
|
|> Controller.redirect(to: "/")
|
||||||
|> Conn.halt()
|
|> Conn.halt()
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ defmodule PhilomenaWeb.RequireUserPlug do
|
||||||
conn
|
conn
|
||||||
else
|
else
|
||||||
conn
|
conn
|
||||||
|> put_flash(:error, "You must be signed in to see this page.")
|
|> put_flash(:alert, "You must be signed in to see this page.")
|
||||||
|> redirect(to: "/")
|
|> redirect(to: "/")
|
||||||
|> halt()
|
|> halt()
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
.block__content.flex.alternating-color
|
.block__content.flex.alternating-color
|
||||||
.flex__shrink.spacing-right
|
.flex__shrink.spacing--right
|
||||||
= render PhilomenaWeb.ImageView, "_image_container.html", image: @comment.image, size: :thumb_tiny, conn: @conn
|
= render PhilomenaWeb.ImageView, "_image_container.html", image: @comment.image, size: :thumb_tiny, conn: @conn
|
||||||
.flex__grow
|
.flex__grow
|
||||||
a href="/#{@comment.image.id}#comment_#{@comment.id}"
|
a href="/#{@comment.image.id}#comment_#{@comment.id}"
|
||||||
|
|
|
||||||
|
|
@ -3,39 +3,39 @@
|
||||||
aside.column-layout__left#activity-side
|
aside.column-layout__left#activity-side
|
||||||
= if not is_nil(@featured_image) and not PhilomenaWeb.ImageView.filter_or_spoiler_hits?(@conn, @featured_image) do
|
= if not is_nil(@featured_image) and not PhilomenaWeb.ImageView.filter_or_spoiler_hits?(@conn, @featured_image) do
|
||||||
.center
|
.center
|
||||||
h4.remove-top-margin Featured Image
|
h3 Featured Image
|
||||||
= render PhilomenaWeb.ImageView, "_image_box.html", image: @featured_image, size: :medium, conn: @conn
|
= render PhilomenaWeb.ImageView, "_image_box.html", image: @featured_image, size: :medium, conn: @conn
|
||||||
.block.block--fixed.block--fixed--sub.block--success.center.hide-mobile
|
.block.block--fixed.block--fixed--sub.block--success.center.hidden--mobile
|
||||||
' Enjoy the site?
|
' Enjoy the site?
|
||||||
a href="/pages/donations"
|
a href="/pages/donations"
|
||||||
' Become a patron or donate!
|
' Become a patron or donate!
|
||||||
.block.block--fixed.block--fixed--sub.center.hide-mobile
|
.block.block--fixed.block--fixed--sub.center.hidden--mobile
|
||||||
' Issues? Want to chat?
|
' Issues? Want to chat?
|
||||||
a href="/pages/contact" Contact us!
|
a href="/pages/contact" Contact us!
|
||||||
.block.hide-mobile
|
.block.hidden--mobile
|
||||||
a.block__header--single-item.center href="/search?q=first_seen_at.gt:3 days ago&sf=wilson_score&sd=desc"
|
a.block__header--single-item.center href="/search?q=first_seen_at.gt:3 days ago&sf=wilson_score&sd=desc"
|
||||||
' Trending Images
|
' Trending Images
|
||||||
.block__content.flex.flex--centered.flex--wrap.image-flex-grid
|
.block__content--small.media-grid
|
||||||
= for image <- @top_scoring do
|
= for image <- @top_scoring do
|
||||||
= render PhilomenaWeb.ImageView, "_image_box.html", image: image, size: :thumb_small, conn: @conn
|
= render PhilomenaWeb.ImageView, "_image_box.html", image: image, size: :thumb, conn: @conn
|
||||||
a.block__header--single-item.center href="/search?q=*&sf=score&sd=desc"
|
a.block__footer--small.center href="/search?q=*&sf=score&sd=desc"
|
||||||
' All Time Top Scoring
|
' All Time Top Scoring
|
||||||
.block.hide-mobile
|
.block.hidden--mobile
|
||||||
a.block__header--single-item.center href="/channels"
|
a.block__header--single-item.center href="/channels"
|
||||||
' Streams
|
' Streams
|
||||||
= for channel <- @streams do
|
= for channel <- @streams do
|
||||||
= render PhilomenaWeb.ActivityView, "_channel_strip.html", channel: channel, conn: @conn
|
= render PhilomenaWeb.ActivityView, "_channel_strip.html", channel: channel, conn: @conn
|
||||||
.block.hide-mobile
|
.block.hidden--mobile
|
||||||
a.block__header--single-item.center href="/forums"
|
a.block__header--single-item.center href="/forums"
|
||||||
' Forum Activity
|
' Forum Activity
|
||||||
= for topic <- @topics do
|
= for topic <- @topics do
|
||||||
= render PhilomenaWeb.ActivityView, "_topic_strip.html", topic: topic, conn: @conn
|
= render PhilomenaWeb.ActivityView, "_topic_strip.html", topic: topic, conn: @conn
|
||||||
.block.hide-mobile
|
.block.hidden--mobile
|
||||||
a.block__header--single-item.center href="/comments"
|
a.block__header--single-item.center href="/comments"
|
||||||
' Recent Comments
|
' Recent Comments
|
||||||
= for comment <- @comments do
|
= for comment <- @comments do
|
||||||
= render PhilomenaWeb.ActivityView, "_comment_strip.html", comment: comment, conn: @conn
|
= render PhilomenaWeb.ActivityView, "_comment_strip.html", comment: comment, conn: @conn
|
||||||
a.block__header--single-item.center href="/search?q=first_seen_at.gt:3 days ago&sf=comment_count&sd=desc"
|
a.block__footer.center href="/search?q=first_seen_at.gt:3 days ago&sf=comment_count&sd=desc"
|
||||||
' Most Commented-on Images
|
' Most Commented-on Images
|
||||||
|
|
||||||
.column-layout__main
|
.column-layout__main
|
||||||
|
|
@ -47,8 +47,8 @@
|
||||||
' Watched Images
|
' Watched Images
|
||||||
a href="/search?q=my:watched" title="Browse Watched Images"
|
a href="/search?q=my:watched" title="Browse Watched Images"
|
||||||
i.fa.fa-eye>
|
i.fa.fa-eye>
|
||||||
span.hide-mobile
|
span.hidden--mobile
|
||||||
' Browse Watched Images
|
' Browse Watched Images
|
||||||
.block__content.js-resizable-media-container
|
.block__content.media-list
|
||||||
= for image <- @watched do
|
= for image <- @watched do
|
||||||
= render PhilomenaWeb.ImageView, "_image_box.html", image: image, link: Routes.image_path(@conn, :show, image, q: "my:watched"), size: :thumb_small, conn: @conn
|
= render PhilomenaWeb.ImageView, "_image_box.html", image: image, link: Routes.image_path(@conn, :show, image, q: "my:watched"), size: :thumb_small, conn: @conn
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ table.table
|
||||||
th Thing
|
th Thing
|
||||||
th Reason
|
th Reason
|
||||||
th User
|
th User
|
||||||
th.hide-mobile Opened
|
th.hidden--mobile Opened
|
||||||
th State
|
th State
|
||||||
th Options
|
th Options
|
||||||
tbody
|
tbody
|
||||||
|
|
@ -27,7 +27,7 @@ table.table
|
||||||
= if not is_nil(report.user) and Enum.any?(report.user.linked_tags) do
|
= if not is_nil(report.user) and Enum.any?(report.user.linked_tags) do
|
||||||
= render PhilomenaWeb.TagView, "_tag_list.html", tags: ordered_tags(report.user.linked_tags), conn: @conn
|
= render PhilomenaWeb.TagView, "_tag_list.html", tags: ordered_tags(report.user.linked_tags), conn: @conn
|
||||||
|
|
||||||
td.hide-mobile
|
td.hidden--mobile
|
||||||
= pretty_time report.created_at
|
= pretty_time report.created_at
|
||||||
|
|
||||||
td class=report_row_class(report)
|
td class=report_row_class(report)
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ p
|
||||||
|
|
||||||
article.block.communication
|
article.block.communication
|
||||||
.block__content.flex.flex--no-wrap
|
.block__content.flex.flex--no-wrap
|
||||||
.flex__fixed.spacing-right
|
.flex__fixed.spacing--right
|
||||||
= render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @report, conn: @conn
|
= render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @report, conn: @conn
|
||||||
.flex__grow.communication__body
|
.flex__grow.communication__body
|
||||||
span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @report, awards: true, conn: @conn
|
span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @report, awards: true, conn: @conn
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue