mirror of
https://github.com/philomena-dev/philomena.git
synced 2024-11-27 13:47:58 +01:00
add stylesheets and layout scaffold
This commit is contained in:
byte[]
parent
9ca134b9a9
commit
fb416c772c
50 changed files with 7018 additions and 4618 deletions
41
assets/brunch-config.js
Normal file
41
assets/brunch-config.js
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
module.exports = {
|
||||||
|
files: {
|
||||||
|
javascripts: {joinTo: 'js/app.js'},
|
||||||
|
stylesheets: {joinTo: 'css/app.css'}
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
rollup: {
|
||||||
|
buble: {
|
||||||
|
transforms: { dangerousForOf: true }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
sass: {
|
||||||
|
mode: 'native',
|
||||||
|
options: {
|
||||||
|
includePaths: ['css', 'node_modules/font-awesome/scss']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
copycat: {
|
||||||
|
fonts: ['node_modules/font-awesome/fonts'],
|
||||||
|
verbose: false,
|
||||||
|
onlyChanged: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
conventions: {
|
||||||
|
// This option sets where we should place non-css and non-js assets in.
|
||||||
|
// By default, we set this to "/assets/static". Files in this directory
|
||||||
|
// will be copied to `paths.public`, which is "priv/static" by default.
|
||||||
|
assets: /static\//
|
||||||
|
},
|
||||||
|
paths: {
|
||||||
|
watched: ['css/themes/default.scss', 'js/app.js', 'vendor', 'fonts', 'static'],
|
||||||
|
public: '../priv/static'
|
||||||
|
},
|
||||||
|
modules: {
|
||||||
|
definition: false,
|
||||||
|
wrapper: false
|
||||||
|
},
|
||||||
|
npm: {
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
/* This file is for your main application css. */
|
|
||||||
|
|
||||||
@import "./phoenix.css";
|
|
||||||
13
assets/css/common/barline.scss
Normal file
13
assets/css/common/barline.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
.sparkline {
|
||||||
|
display: flex;
|
||||||
|
height: 20px;
|
||||||
|
border-bottom: 1px solid $sparkline_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.barline__bar {
|
||||||
|
fill: $sparkline_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.barline__bar:hover {
|
||||||
|
fill: red;
|
||||||
|
}
|
||||||
401
assets/css/common/base.scss
Normal file
401
assets/css/common/base.scss
Normal file
|
|
@ -0,0 +1,401 @@
|
||||||
|
/*
|
||||||
|
* 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 @import at the bottom of the file.
|
||||||
|
*
|
||||||
|
* NOTE: do not enable require_self and require_tree because it imports things the wrong way around!
|
||||||
|
* = require_self
|
||||||
|
* = require_tree .
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import "global";
|
||||||
|
|
||||||
|
@import "../../node_modules/font-awesome/scss/font-awesome.scss";
|
||||||
|
@import "../../node_modules/normalize-scss/sass/_normalize.scss";
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: $background_color;
|
||||||
|
color: $foreground_color;
|
||||||
|
font-family: $font_family_base;
|
||||||
|
font-size: 13px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5 {
|
||||||
|
font-weight: normal;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
margin-bottom: 0.62em;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 tho
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 4px;
|
||||||
|
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: $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/search";
|
||||||
|
@import "views/tags";
|
||||||
|
|
||||||
|
.no-overflow {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-overflow-x {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
216
assets/css/common/blocks.scss
Normal file
216
assets/css/common/blocks.scss
Normal file
|
|
@ -0,0 +1,216 @@
|
||||||
|
.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__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 {
|
||||||
|
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 {
|
||||||
|
background: $block_header_light_color;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
38
assets/css/common/burger.scss
Normal file
38
assets/css/common/burger.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
@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); }
|
||||||
|
}
|
||||||
91
assets/css/common/buttons.scss
Normal file
91
assets/css/common/buttons.scss
Normal file
|
|
@ -0,0 +1,91 @@
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
33
assets/css/common/dropdown.scss
Normal file
33
assets/css/common/dropdown.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
.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;
|
||||||
|
}
|
||||||
148
assets/css/common/forms.scss
Normal file
148
assets/css/common/forms.scss
Normal file
|
|
@ -0,0 +1,148 @@
|
||||||
|
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[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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
276
assets/css/common/global.scss
Normal file
276
assets/css/common/global.scss
Normal file
|
|
@ -0,0 +1,276 @@
|
||||||
|
/*
|
||||||
|
* This file defines:
|
||||||
|
* 1) main colors, 2) main colors variations, 3) dimensions and other shared properties, 4) mixins
|
||||||
|
* Custom themes ('themes/default' and 'themes/dark') may override some or all of these settings.
|
||||||
|
*
|
||||||
|
* Note that individual stylesheets ('common/buttons') may have local properties.
|
||||||
|
* Those can be overridden in themes as well (see 'themes/dark' for an example of that).
|
||||||
|
*/
|
||||||
|
|
||||||
|
// ///////////////////////////////////
|
||||||
|
// ///// SECTION 1 - MAIN COLORS /////
|
||||||
|
// ///////////////////////////////////
|
||||||
|
|
||||||
|
$background_color: #ffffff !default;
|
||||||
|
$page_background_color: #f8fafc !default;
|
||||||
|
$foreground_color: #333333 !default;
|
||||||
|
|
||||||
|
$base_color: #62a7d9 !default;
|
||||||
|
|
||||||
|
$primary_color: #c1e4f9 !default;
|
||||||
|
$success_color: #bde9a3 !default; /* tag added, currently banned, view post history--added */
|
||||||
|
$danger_color: #ebc0bb !default; /* tag removed, currently not banned, view post history--deleted */
|
||||||
|
$warning_color: #eee9bc !default; /* NSFW streams, image spoilered, things like that */
|
||||||
|
|
||||||
|
$link_color: #419cd9 !default;
|
||||||
|
$link_hover_color: #9273d0 !default;
|
||||||
|
|
||||||
|
$fave_color: #c4b246 !default;
|
||||||
|
$vote_up_color: #67af2b !default;
|
||||||
|
$vote_down_color: #cf0001 !default;
|
||||||
|
$hide_color: #cf0001 !default;
|
||||||
|
|
||||||
|
$assistant_color: #eeceed !default;
|
||||||
|
|
||||||
|
$tag_normal_color: #6f8f0e !default;
|
||||||
|
$tag_category_rating_color: #267ead !default;
|
||||||
|
$tag_category_spoiler_color: #c24523 !default;
|
||||||
|
$tag_category_origin_color: #393f85 !default;
|
||||||
|
$tag_category_oc_color: #9852a3 !default;
|
||||||
|
$tag_category_error_color: #ad263f !default;
|
||||||
|
$tag_category_character_color: #2d8677 !default;
|
||||||
|
$tag_category_content_official_color: #998e1a !default;
|
||||||
|
$tag_category_content_fanmade_color: #bb5496 !default;
|
||||||
|
|
||||||
|
$commission_category_color: #986f3d !default;
|
||||||
|
|
||||||
|
$image_overlay_color: #ffffff !default;
|
||||||
|
$image_overlay_background_color: #000000 !default;
|
||||||
|
|
||||||
|
// //////////////////////////////////////
|
||||||
|
// ///// SECTION 2 - DERIVED COLORS /////
|
||||||
|
// //////////////////////////////////////
|
||||||
|
|
||||||
|
$text_light_color: $background_color !default;
|
||||||
|
|
||||||
|
$meta_color: mix($foreground_color, $background_color, 5%) !default;
|
||||||
|
$meta_border_color: mix($foreground_color, $meta_color, 30%) !default;
|
||||||
|
|
||||||
|
$header_color: darken($base_color, 9%) !default;
|
||||||
|
$header_hover_color: darken($base_color, 16%) !default;
|
||||||
|
$header_field_color: $base_color !default;
|
||||||
|
$header_field_hover_color: darken($base_color, 7%) !default;
|
||||||
|
$header_secondary_color: desaturate(lighten($base_color, 30%), 25%) !default;
|
||||||
|
$header_secondary_hover_color: darken($header_secondary_color, 7%) !default;
|
||||||
|
|
||||||
|
$header_admin_color: mix($vote_down_color, $background_color, 16%) !default;
|
||||||
|
$header_admin_hover_color: mix($vote_down_color, $background_color, 30%) !default;
|
||||||
|
|
||||||
|
$block_header_color: lighten($base_color, 28%) !default;
|
||||||
|
$block_header_hover_color: desaturate(lighten($base_color, 20%), 5%) !default;
|
||||||
|
$block_header_link_text_color: saturate(darken($header_color, 5%), 6%) !default;
|
||||||
|
$block_header_link_text_hover_color: darken($header_color, 15%) !default;
|
||||||
|
|
||||||
|
$block_header_light_color: desaturate(lighten($base_color, 31%), 16%) !default;
|
||||||
|
$block_header_light_hover_color: lighten($header_secondary_hover_color, 2%) !default;
|
||||||
|
$block_header_light_link_text_color: darken($block_header_light_color, 42%) !default;
|
||||||
|
$block_header_light_link_text_hover_color: darken($block_header_light_color, 52%) !default;
|
||||||
|
|
||||||
|
$border_color: darken($block_header_light_color, 3%) !default;
|
||||||
|
|
||||||
|
$media_box_color: desaturate($block_header_light_color, 10%) !default;
|
||||||
|
$media_box_hover_color: saturate(darken($media_box_color, 6%), 6%) !default;
|
||||||
|
$media_box_header_link_text_color: $link_color !default;
|
||||||
|
$media_box_header_link_text_hover_color: darken($media_box_header_link_text_color, 10%) !default;
|
||||||
|
|
||||||
|
$primary_light_color: lighten($primary_color, 5%) !default;
|
||||||
|
$success_light_color: lighten($success_color, 7%) !default;
|
||||||
|
$danger_light_color: lighten($danger_color, 4%) !default;
|
||||||
|
$warning_light_color: lighten($warning_color, 6%) !default;
|
||||||
|
|
||||||
|
$link_dark_color: darken($link_color, 20%) !default; //used in the tag table, amongst other things
|
||||||
|
$link_hover_dark_color: darken($link_hover_color, 20%) !default;
|
||||||
|
|
||||||
|
$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%) !default; //also used as 'alt background color' in various places
|
||||||
|
$background_even_color: $background_color !default;
|
||||||
|
/* Depending on the theme, you may want to swap even and odd colors */
|
||||||
|
$success_odd_color: saturate(darken($success_light_color, 3%), 8%) !default;
|
||||||
|
$success_even_color: lighten($success_color, 13%) !default;
|
||||||
|
$warning_odd_color: saturate(darken($warning_light_color, 7%), 10%) !default;
|
||||||
|
$warning_even_color: lighten($warning_color, 5%) !default;
|
||||||
|
$danger_odd_color: saturate(darken($danger_light_color, 1%), 12%) !default;
|
||||||
|
$danger_even_color: desaturate(lighten($danger_color, 7%), 10%) !default;
|
||||||
|
|
||||||
|
$foreground_half_color: mix($foreground_color, $background_color) !default; //used for weird h's (on image pages like Metadata Editing and Information) and also footer text color
|
||||||
|
|
||||||
|
$sparkline_color: lighten($base_color, 5%) !default;
|
||||||
|
|
||||||
|
$assistant_border_color: darken($assistant_color, 8%) !default;
|
||||||
|
|
||||||
|
$admin_links_color: mix($vote_down_color, $background_color, 17%) !default;
|
||||||
|
$admin_links_hover_color: mix($vote_down_color, $background_color, 48%) !default;
|
||||||
|
|
||||||
|
$input_text_color: $foreground_color !default;
|
||||||
|
$input_color: $meta_color !default;
|
||||||
|
$input_border: $meta_border_color !default;
|
||||||
|
$input_color_active: desaturate(lighten($base_color, 30%), 16%) !default;
|
||||||
|
$input_border_active: lighten($base_color, 10%) !default;
|
||||||
|
|
||||||
|
$tag_normal_background: desaturate(lighten($tag_normal_color, 44%), 28%) !default;
|
||||||
|
$tag_normal_border: darken($tag_normal_background, 16%) !default;
|
||||||
|
$tag_category_rating_background: desaturate(lighten($tag_category_rating_color, 41%), 25%) !default;
|
||||||
|
$tag_category_rating_border: darken($tag_category_rating_background, 10%) !default;
|
||||||
|
$tag_category_spoiler_background: lighten($tag_category_spoiler_color, 41%) !default;
|
||||||
|
$tag_category_spoiler_border: darken($tag_category_spoiler_background, 8%) !default;
|
||||||
|
$tag_category_origin_background: lighten($tag_category_origin_color, 43%) !default;
|
||||||
|
$tag_category_origin_border: darken($tag_category_origin_background, 10%) !default;
|
||||||
|
$tag_category_oc_background: lighten($tag_category_oc_color, 35%) !default;
|
||||||
|
$tag_category_oc_border: darken($tag_category_oc_background, 9%) !default;
|
||||||
|
$tag_category_error_background: lighten($tag_category_error_color, 40%) !default;
|
||||||
|
$tag_category_error_border: darken($tag_category_error_background, 8%) !default;
|
||||||
|
$tag_category_character_background: desaturate(lighten($tag_category_character_color, 44%), 10%) !default;
|
||||||
|
$tag_category_character_border: lighten($tag_category_character_color, 22%) !default;
|
||||||
|
$tag_category_content_official_background: lighten($tag_category_content_official_color, 41%) !default;
|
||||||
|
$tag_category_content_official_border: lighten($tag_category_content_official_color, 18%) !default;
|
||||||
|
$tag_category_content_fanmade_background: lighten($tag_category_content_fanmade_color, 36%) !default;
|
||||||
|
$tag_category_content_fanmade_border: lighten($tag_category_content_fanmade_color, 18%) !default;
|
||||||
|
|
||||||
|
$commission_category_background: saturate(lighten($commission_category_color, 40%), 12%) !default;
|
||||||
|
$commission_category_border: lighten($commission_category_color, 20%) !default;
|
||||||
|
|
||||||
|
$site_notice_color: darken($base_color, 32%) !default;
|
||||||
|
$site_notice_link_color: $block_header_light_color !default;
|
||||||
|
$site_notice_link_hover_color: $block_header_hover_color !default;
|
||||||
|
|
||||||
|
// /////////////////////////////////////////
|
||||||
|
// ///// SECTION 3 - SHARED PROPERTIES /////
|
||||||
|
// /////////////////////////////////////////
|
||||||
|
|
||||||
|
$border: 1px solid $border_color !default;
|
||||||
|
|
||||||
|
$font_family_base: verdana, arial, helvetica, sans-serif !default;
|
||||||
|
$font_family_monospace: "Droid Sans Mono", monospace !default;
|
||||||
|
|
||||||
|
$max_px_width_for_limited_desktop_layout: 1150px !default;
|
||||||
|
$min_px_width_for_desktop_layout: 800px !default;
|
||||||
|
$min_px_width_for_desktop_thumb: 700px !default;
|
||||||
|
|
||||||
|
$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;
|
||||||
|
|
||||||
|
$button_text_color: $foreground_color !default;
|
||||||
|
$button_background_color: rgba($meta_color, 0.2) !default;
|
||||||
|
$button_hover_background_color: $input_color_active !default;
|
||||||
|
$button_hover_border_color: $input_border_active !default;
|
||||||
|
$button_border_color: $meta_border_color !default;
|
||||||
|
|
||||||
|
$button_primary_background_color: $primary_light_color !default;
|
||||||
|
$button_success_background_color: $success_light_color !default;
|
||||||
|
$button_warning_background_color: $warning_light_color !default;
|
||||||
|
$button_danger_background_color: $danger_light_color !default;
|
||||||
|
|
||||||
|
$button_primary_border_color: darken($primary_color, 8%) !default;
|
||||||
|
$button_success_border_color: darken($success_color, 10%) !default;
|
||||||
|
$button_warning_border_color: darken($warning_color, 11%) !default;
|
||||||
|
$button_danger_border_color: darken($danger_color, 8%) !default;
|
||||||
|
|
||||||
|
$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%);
|
||||||
|
|
||||||
|
|
||||||
|
// //////////////////////////////
|
||||||
|
// ///// SECTION 4 - MIXINS /////
|
||||||
|
// //////////////////////////////
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
289
assets/css/common/header.scss
Normal file
289
assets/css/common/header.scss
Normal file
|
|
@ -0,0 +1,289 @@
|
||||||
|
.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;
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
386
assets/css/common/layout.scss
Normal file
386
assets/css/common/layout.scss
Normal file
|
|
@ -0,0 +1,386 @@
|
||||||
|
@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;
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
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;
|
||||||
|
}
|
||||||
114
assets/css/common/media.scss
Normal file
114
assets/css/common/media.scss
Normal file
|
|
@ -0,0 +1,114 @@
|
||||||
|
$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;
|
||||||
|
}
|
||||||
6
assets/css/common/shame.scss
Normal file
6
assets/css/common/shame.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
7
assets/css/common/text.scss
Normal file
7
assets/css/common/text.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
.line-spacing {
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa--important{
|
||||||
|
color: #fc7f1c;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
146
assets/css/themes/dark.scss
Normal file
146
assets/css/themes/dark.scss
Normal file
|
|
@ -0,0 +1,146 @@
|
||||||
|
/*
|
||||||
|
* Darker theme
|
||||||
|
*/
|
||||||
|
|
||||||
|
// ///////////////////////////////////
|
||||||
|
// ///// SECTION 1 - MAIN COLORS /////
|
||||||
|
// ///////////////////////////////////
|
||||||
|
|
||||||
|
$background_color: #1d242f !default;
|
||||||
|
$page_background_color: #141a24 !default;
|
||||||
|
$foreground_color: #e0e0e0 !default;
|
||||||
|
|
||||||
|
$base_color: #546c99 !default;
|
||||||
|
|
||||||
|
$primary_light_color: #1a4c6b !default;
|
||||||
|
$success_light_color: #144714 !default;
|
||||||
|
$danger_light_color: #66211f !default;
|
||||||
|
$warning_light_color: #7d4825 !default;
|
||||||
|
|
||||||
|
$meta_color: #191f2a !default;
|
||||||
|
|
||||||
|
$header_color: #284371 !default;
|
||||||
|
$header_field_color: #1c3252 !default;
|
||||||
|
$header_secondary_color: #1d2b44 !default;
|
||||||
|
$header_admin_color: #3b1d1d !default;
|
||||||
|
|
||||||
|
$block_header_color: #2e3a52 !default;
|
||||||
|
$block_header_link_text_color: #4f95db !default;
|
||||||
|
|
||||||
|
$block_header_light_color: #252d3c !default;
|
||||||
|
$block_header_light_link_text_color: #6198c2 !default;
|
||||||
|
|
||||||
|
$border_color: #2d3649 !default;
|
||||||
|
|
||||||
|
$media_box_color: #3d4657 !default;
|
||||||
|
|
||||||
|
$link_color: #478acc !default;
|
||||||
|
$link_hover_color: #b099dd !default;
|
||||||
|
|
||||||
|
$fave_color: #a18e27 !default;
|
||||||
|
$vote_up_color: #5b9b26 !default;
|
||||||
|
$vote_down_color: #da3412 !default;
|
||||||
|
$hide_color: #da3412 !default;
|
||||||
|
|
||||||
|
$assistant_color: #511b4e !default;
|
||||||
|
|
||||||
|
$tag_normal_color: #4aa158 !default;
|
||||||
|
$tag_category_rating_color: #418dd9 !default;
|
||||||
|
$tag_category_spoiler_color: #d49b39 !default;
|
||||||
|
$tag_category_origin_color: #6f66d6 !default;
|
||||||
|
$tag_category_oc_color: #b157b7 !default;
|
||||||
|
$tag_category_error_color: #d45460 !default;
|
||||||
|
$tag_category_character_color: #4aaabf !default;
|
||||||
|
$tag_category_content_official_color: #b9b541 !default;
|
||||||
|
$tag_category_content_fanmade_color: #cc8eb5 !default;
|
||||||
|
|
||||||
|
$commission_category_color: #e07b27 !default;
|
||||||
|
|
||||||
|
$site_notice_color: #07070a !default;
|
||||||
|
|
||||||
|
// //////////////////////////////////////
|
||||||
|
// ///// SECTION 2 - DERIVED COLORS /////
|
||||||
|
// //////////////////////////////////////
|
||||||
|
|
||||||
|
$text_light_color: $foreground_color !default;
|
||||||
|
|
||||||
|
$primary_color: saturate(lighten($primary_light_color, 5%), 4%) !default;
|
||||||
|
$success_color: lighten($success_light_color, 4%) !default;
|
||||||
|
$danger_color: lighten($danger_light_color, 5%) !default;
|
||||||
|
$warning_color: lighten($warning_light_color, 6%) !default;
|
||||||
|
|
||||||
|
$header_hover_color: darken($header_color, 8%) !default;
|
||||||
|
$header_field_hover_color: darken($header_hover_color, 4%) !default;
|
||||||
|
$header_secondary_hover_color: darken($header_secondary_color, 4%) !default;
|
||||||
|
|
||||||
|
$header_admin_hover_color: darken($header_admin_color, 5%) !default;
|
||||||
|
|
||||||
|
$block_header_hover_color: adjust_hue(saturate(darken($block_header_color, 4%), 4%), -3deg) !default;
|
||||||
|
$block_header_link_text_hover_color: adjust_hue(desaturate(darken($block_header_link_text_color, 3%), 20%), 6deg) !default;
|
||||||
|
|
||||||
|
$block_header_light_hover_color: adjust_hue(saturate(darken($block_header_light_color, 4%), 10%), -4deg) !default;
|
||||||
|
$block_header_light_link_text_hover_color: adjust_hue(desaturate(darken($block_header_light_link_text_color, 2%), 10%), 8deg) !default;
|
||||||
|
|
||||||
|
$media_box_hover_color: darken($media_box_color, 4%) !default;
|
||||||
|
$media_box_header_link_text_hover_color: desaturate(darken($link_color, 3%), 18%) !default;
|
||||||
|
|
||||||
|
$link_dark_color: mix($link_color, $foreground_color, 70%) !default;
|
||||||
|
$link_dark_hover_color: mix($link_hover_color, $foreground_color, 70%) !default;
|
||||||
|
|
||||||
|
$image_show_link_color: $link_dark_color;
|
||||||
|
$image_show_link_hover_color: $link_dark_hover_color;
|
||||||
|
|
||||||
|
$image_overlay_color: $foreground_color !default;
|
||||||
|
$image_overlay_background: darken($background_color, 30%) !default;
|
||||||
|
|
||||||
|
$assistant_border_color: lighten($assistant_color, 8%) !default;
|
||||||
|
|
||||||
|
$background_odd_color: darken($background_color, 3%) !default;
|
||||||
|
$background_even_color: $background_color !default;
|
||||||
|
|
||||||
|
$success_odd_color: desaturate(darken($success_color, 9%), 2%) !default;
|
||||||
|
$success_even_color: saturate(darken($success_light_color, 2%), 2%) !default;
|
||||||
|
$warning_odd_color: saturate(darken($warning_color, 19%), 10%) !default;
|
||||||
|
$warning_even_color: saturate(darken($warning_light_color, 7%), 7%) !default;
|
||||||
|
$danger_odd_color: desaturate(darken($danger_color, 16%), 2%) !default;
|
||||||
|
$danger_even_color: darken($danger_light_color, 6%) !default;
|
||||||
|
|
||||||
|
$input_color_active: lighten($meta_color, 5%) !default;
|
||||||
|
$input_border_active: desaturate(lighten($base_color, 2%), 10%) !default;
|
||||||
|
|
||||||
|
$tag_normal_background: darken($tag_normal_color, 29%) !default;
|
||||||
|
$tag_normal_border: darken($tag_normal_color, 18%) !default;
|
||||||
|
$tag_category_rating_background: darken($tag_category_rating_color, 35%) !default;
|
||||||
|
$tag_category_rating_border: desaturate(darken($tag_category_rating_color, 20%), 10%) !default;
|
||||||
|
$tag_category_spoiler_background: darken($tag_category_spoiler_color, 34%) !default;
|
||||||
|
$tag_category_spoiler_border: darken($tag_category_spoiler_color, 23%) !default;
|
||||||
|
$tag_category_origin_background: darken($tag_category_origin_color, 40%) !default;
|
||||||
|
$tag_category_origin_border: desaturate(darken($tag_category_origin_color, 22%), 28%) !default;
|
||||||
|
$tag_category_oc_background: darken($tag_category_oc_color, 33%) !default;
|
||||||
|
$tag_category_oc_border: darken($tag_category_oc_color, 15%) !default;
|
||||||
|
$tag_category_error_background: desaturate(darken($tag_category_error_color, 38%), 6%) !default;
|
||||||
|
$tag_category_error_border: darken($tag_category_error_color, 22%) !default;
|
||||||
|
$tag_category_character_background: darken($tag_category_character_color, 33%) !default;
|
||||||
|
$tag_category_character_border: darken($tag_category_character_color, 20%) !default;
|
||||||
|
$tag_category_content_official_background: desaturate(darken($tag_category_content_official_color, 29%), 2%) !default;
|
||||||
|
$tag_category_content_official_border: darken($tag_category_content_official_color, 20%) !default;
|
||||||
|
$tag_category_content_fanmade_background: darken($tag_category_content_fanmade_color, 40%) !default;
|
||||||
|
$tag_category_content_fanmade_border: desaturate(darken($tag_category_content_fanmade_color, 20%), 10%) !default;
|
||||||
|
|
||||||
|
$commission_category_background: darken($commission_category_color, 36%) !default;
|
||||||
|
$commission_category_border: darken($commission_category_color, 25%) !default;
|
||||||
|
|
||||||
|
$site_notice_link_color: desaturate(lighten($block_header_link_text_color, 8%), 20%) !default;
|
||||||
|
$site_notice_link_hover_color: darken($site_notice_link_color, 8%) !default;
|
||||||
|
|
||||||
|
/* Import 'common/global' to initialize the remaining properties.
|
||||||
|
* Override the ones that do not satisfy the theme below the declaration. */
|
||||||
|
|
||||||
|
@import "common/global";
|
||||||
|
|
||||||
|
$button_primary_border_color: saturate(lighten($primary_light_color, 14%), 22%) !default;
|
||||||
|
$button_success_border_color: saturate(lighten($success_light_color, 9%), 10%) !default;
|
||||||
|
$button_warning_border_color: saturate(lighten($warning_light_color, 12%), 10%) !default;
|
||||||
|
$button_danger_border_color: saturate(lighten($danger_light_color, 18%), 6%) !default;
|
||||||
|
|
||||||
|
@import "common/base";
|
||||||
8
assets/css/themes/default.scss
Normal file
8
assets/css/themes/default.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
@import "common/global";
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Default theme - the same colors they've been for years
|
||||||
|
* Represents the properties from 'common/global'; does not override any of them.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import "common/base";
|
||||||
149
assets/css/themes/red.scss
Normal file
149
assets/css/themes/red.scss
Normal file
|
|
@ -0,0 +1,149 @@
|
||||||
|
/*
|
||||||
|
* Darker theme
|
||||||
|
*/
|
||||||
|
|
||||||
|
// ///////////////////////////////////
|
||||||
|
// ///// SECTION 1 - MAIN COLORS /////
|
||||||
|
// ///////////////////////////////////
|
||||||
|
|
||||||
|
$text_color: #eeeeee;
|
||||||
|
$link_color: #dbdb00 !default;
|
||||||
|
$link_hover_color: #fff3bd !default;
|
||||||
|
$grey: #3b3b3b;
|
||||||
|
|
||||||
|
$background_color: #412121 !default;
|
||||||
|
$page_background_color: $background_color !default;
|
||||||
|
$foreground_color: #e0e0e0 !default;
|
||||||
|
|
||||||
|
$base_color: #995454 !default;
|
||||||
|
|
||||||
|
$primary_light_color: #641f1f !default;
|
||||||
|
$success_light_color: #2e4e2e !default;
|
||||||
|
$danger_light_color: #7b3b00 !default;
|
||||||
|
$warning_light_color: #5b5b00 !default;
|
||||||
|
|
||||||
|
$meta_color: #411d1d !default;
|
||||||
|
|
||||||
|
$header_color: #923131 !default;
|
||||||
|
$header_field_color: #5e2727 !default;
|
||||||
|
$header_secondary_color: #7a2d2d !default;
|
||||||
|
$header_admin_color: $grey !default;
|
||||||
|
|
||||||
|
$block_header_color: #812d2d !default;
|
||||||
|
$block_header_link_text_color: $link_color !default;
|
||||||
|
|
||||||
|
$block_header_light_color: #7a3030 !default;
|
||||||
|
$block_header_light_link_text_color: $link_color !default;
|
||||||
|
|
||||||
|
$border_color: #7c2424 !default;
|
||||||
|
|
||||||
|
$media_box_color: #7c2424 !default;
|
||||||
|
|
||||||
|
|
||||||
|
$fave_color: #a18e27 !default;
|
||||||
|
$vote_up_color: #5b9b26 !default;
|
||||||
|
$vote_down_color: #da3412 !default;
|
||||||
|
$hide_color: #da3412 !default;
|
||||||
|
|
||||||
|
$assistant_color: #511b4e !default;
|
||||||
|
|
||||||
|
$tag_normal_color: #d16767 !default;
|
||||||
|
$tag_category_rating_color: #9dc3e9 !default;
|
||||||
|
$tag_category_spoiler_color: #ddcf53 !default;
|
||||||
|
$tag_category_origin_color: #bbb6eb !default;
|
||||||
|
$tag_category_oc_color: #dd7ee4 !default;
|
||||||
|
$tag_category_error_color: #ff5566 !default;
|
||||||
|
$tag_category_character_color: #82d0e2 !default;
|
||||||
|
$tag_category_content_official_color: #d1cf84 !default;
|
||||||
|
$tag_category_content_fanmade_color: #ebb1d6 !default;
|
||||||
|
|
||||||
|
$commission_category_color: #e02727 !default;
|
||||||
|
|
||||||
|
$site_notice_color: $grey !default;
|
||||||
|
|
||||||
|
// //////////////////////////////////////
|
||||||
|
// ///// SECTION 2 - DERIVED COLORS /////
|
||||||
|
// //////////////////////////////////////
|
||||||
|
|
||||||
|
$text_light_color: $foreground_color !default;
|
||||||
|
|
||||||
|
$primary_color: saturate(lighten($primary_light_color, 5%), 4%) !default;
|
||||||
|
$success_color: lighten($success_light_color, 4%) !default;
|
||||||
|
$danger_color: lighten($danger_light_color, 5%) !default;
|
||||||
|
$warning_color: lighten($warning_light_color, 6%) !default;
|
||||||
|
|
||||||
|
$header_hover_color: darken($header_color, 8%) !default;
|
||||||
|
$header_field_hover_color: darken($header_hover_color, 4%) !default;
|
||||||
|
$header_secondary_hover_color: darken($header_secondary_color, 4%) !default;
|
||||||
|
|
||||||
|
$header_admin_hover_color: darken($header_admin_color, 5%) !default;
|
||||||
|
|
||||||
|
$block_header_hover_color: adjust_hue(saturate(darken($block_header_color, 4%), 4%), -3deg) !default;
|
||||||
|
$block_header_link_text_hover_color: adjust_hue(desaturate(darken($block_header_link_text_color, 3%), 20%), 6deg) !default;
|
||||||
|
|
||||||
|
$block_header_light_hover_color: adjust_hue(saturate(darken($block_header_light_color, 4%), 10%), -4deg) !default;
|
||||||
|
$block_header_light_link_text_hover_color: adjust_hue(desaturate(darken($block_header_light_link_text_color, 2%), 10%), 8deg) !default;
|
||||||
|
|
||||||
|
$media_box_hover_color: darken($media_box_color, 4%) !default;
|
||||||
|
$media_box_header_link_text_hover_color: desaturate(darken($link_color, 3%), 18%) !default;
|
||||||
|
|
||||||
|
$link_dark_color: mix($link_color, $foreground_color, 70%) !default;
|
||||||
|
$link_dark_hover_color: mix($link_hover_color, $foreground_color, 70%) !default;
|
||||||
|
|
||||||
|
$image_show_link_color: $link_dark_color;
|
||||||
|
$image_show_link_hover_color: $link_dark_hover_color;
|
||||||
|
|
||||||
|
$image_overlay_color: $foreground_color !default;
|
||||||
|
$image_overlay_background: darken($background_color, 30%) !default;
|
||||||
|
|
||||||
|
$assistant_border_color: lighten($assistant_color, 8%) !default;
|
||||||
|
|
||||||
|
$background_odd_color: darken($background_color, 3%) !default;
|
||||||
|
$background_even_color: $background_color !default;
|
||||||
|
|
||||||
|
$success_odd_color: desaturate(darken($success_color, 9%), 2%) !default;
|
||||||
|
$success_even_color: saturate(darken($success_light_color, 2%), 2%) !default;
|
||||||
|
$warning_odd_color: saturate(darken($warning_color, 19%), 10%) !default;
|
||||||
|
$warning_even_color: saturate(darken($warning_light_color, 7%), 7%) !default;
|
||||||
|
$danger_odd_color: desaturate(darken($danger_color, 16%), 2%) !default;
|
||||||
|
$danger_even_color: darken($danger_light_color, 6%) !default;
|
||||||
|
|
||||||
|
$input_color_active: lighten($meta_color, 5%) !default;
|
||||||
|
$input_border_active: desaturate(lighten($base_color, 2%), 10%) !default;
|
||||||
|
|
||||||
|
$tag_normal_background: darken($tag_normal_color, 29%) !default;
|
||||||
|
$tag_normal_border: darken($tag_normal_color, 18%) !default;
|
||||||
|
$tag_category_rating_background: darken($tag_category_rating_color, 35%) !default;
|
||||||
|
$tag_category_rating_border: desaturate(darken($tag_category_rating_color, 20%), 10%) !default;
|
||||||
|
$tag_category_spoiler_background: darken($tag_category_spoiler_color, 34%) !default;
|
||||||
|
$tag_category_spoiler_border: darken($tag_category_spoiler_color, 23%) !default;
|
||||||
|
$tag_category_origin_background: darken($tag_category_origin_color, 30%) !default;
|
||||||
|
$tag_category_origin_border: desaturate(darken($tag_category_origin_color, 22%), 28%) !default;
|
||||||
|
$tag_category_oc_background: darken($tag_category_oc_color, 33%) !default;
|
||||||
|
$tag_category_oc_border: darken($tag_category_oc_color, 15%) !default;
|
||||||
|
$tag_category_error_background: desaturate(darken($tag_category_error_color, 38%), 6%) !default;
|
||||||
|
$tag_category_error_border: darken($tag_category_error_color, 22%) !default;
|
||||||
|
$tag_category_character_background: darken($tag_category_character_color, 33%) !default;
|
||||||
|
$tag_category_character_border: darken($tag_category_character_color, 20%) !default;
|
||||||
|
$tag_category_content_official_background: desaturate(darken($tag_category_content_official_color, 29%), 2%) !default;
|
||||||
|
$tag_category_content_official_border: darken($tag_category_content_official_color, 20%) !default;
|
||||||
|
$tag_category_content_fanmade_background: darken($tag_category_content_fanmade_color, 40%) !default;
|
||||||
|
$tag_category_content_fanmade_border: desaturate(darken($tag_category_content_fanmade_color, 20%), 10%) !default;
|
||||||
|
|
||||||
|
$commission_category_background: darken($commission_category_color, 36%) !default;
|
||||||
|
$commission_category_border: darken($commission_category_color, 25%) !default;
|
||||||
|
|
||||||
|
$site_notice_link_color: desaturate(lighten($block_header_link_text_color, 8%), 20%) !default;
|
||||||
|
$site_notice_link_hover_color: darken($site_notice_link_color, 8%) !default;
|
||||||
|
|
||||||
|
/* Import 'common/global' to initialize the remaining properties.
|
||||||
|
* Override the ones that do not satisfy the theme below the declaration. */
|
||||||
|
|
||||||
|
@import "common/global";
|
||||||
|
|
||||||
|
$button_primary_border_color: saturate(lighten($primary_light_color, 14%), 22%) !default;
|
||||||
|
$button_success_border_color: saturate(lighten($success_light_color, 9%), 10%) !default;
|
||||||
|
$button_warning_border_color: saturate(lighten($warning_light_color, 12%), 10%) !default;
|
||||||
|
$button_danger_border_color: saturate(lighten($danger_light_color, 18%), 6%) !default;
|
||||||
|
|
||||||
|
@import "common/base";
|
||||||
26
assets/css/views/adverts.scss
Normal file
26
assets/css/views/adverts.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
|
||||||
|
#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: 729px;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table--adverts__image {
|
||||||
|
width: 730px;
|
||||||
|
}
|
||||||
11
assets/css/views/badges.scss
Normal file
11
assets/css/views/badges.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 16px;
|
||||||
|
margin: 0 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badges {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
21
assets/css/views/channels.scss
Normal file
21
assets/css/views/channels.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
.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;
|
||||||
|
}
|
||||||
17
assets/css/views/comments.scss
Normal file
17
assets/css/views/comments.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
38
assets/css/views/commissions.scss
Normal file
38
assets/css/views/commissions.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
99
assets/css/views/communications.scss
Normal file
99
assets/css/views/communications.scss
Normal file
|
|
@ -0,0 +1,99 @@
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
53
assets/css/views/duplicate_reports.scss
Normal file
53
assets/css/views/duplicate_reports.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
27
assets/css/views/filters.scss
Normal file
27
assets/css/views/filters.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
67
assets/css/views/galleries.scss
Normal file
67
assets/css/views/galleries.scss
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
296
assets/css/views/images.scss
Normal file
296
assets/css/views/images.scss
Normal file
|
|
@ -0,0 +1,296 @@
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .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: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
10
assets/css/views/pages.scss
Normal file
10
assets/css/views/pages.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
.kiwiirc-frame {
|
||||||
|
border: 0;
|
||||||
|
width: 900px;
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.static-page__diff {
|
||||||
|
font-family: $font_family_monospace;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
129
assets/css/views/polls.scss
Normal file
129
assets/css/views/polls.scss
Normal file
|
|
@ -0,0 +1,129 @@
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
15
assets/css/views/posts.scss
Normal file
15
assets/css/views/posts.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
139
assets/css/views/profiles.scss
Normal file
139
assets/css/views/profiles.scss
Normal file
|
|
@ -0,0 +1,139 @@
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
3
assets/css/views/search.scss
Normal file
3
assets/css/views/search.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
.flex-wrap {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
165
assets/css/views/tags.scss
Normal file
165
assets/css/views/tags.scss
Normal file
|
|
@ -0,0 +1,165 @@
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagsinput .tag {
|
||||||
|
font-family: $font_family_base;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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-block;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-right: 5px;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag__count {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
&[data-tag-category="spoiler"] {
|
||||||
|
background: $tag_category_spoiler_background;
|
||||||
|
border-color: $tag_category_spoiler_border;
|
||||||
|
color: $tag_category_spoiler_color;
|
||||||
|
}
|
||||||
|
&[data-tag-category="origin"] {
|
||||||
|
background: $tag_category_origin_background;
|
||||||
|
border-color: $tag_category_origin_border;
|
||||||
|
color: $tag_category_origin_color;
|
||||||
|
}
|
||||||
|
&[data-tag-category="oc"] {
|
||||||
|
background: $tag_category_oc_background;
|
||||||
|
border-color: $tag_category_oc_border;
|
||||||
|
color: $tag_category_oc_color;
|
||||||
|
}
|
||||||
|
&[data-tag-category="error"] {
|
||||||
|
background: $tag_category_error_background;
|
||||||
|
border-color: $tag_category_error_border;
|
||||||
|
color: $tag_category_error_color;
|
||||||
|
}
|
||||||
|
&[data-tag-category="character"] {
|
||||||
|
background: $tag_category_character_background;
|
||||||
|
border-color: $tag_category_character_border;
|
||||||
|
color: $tag_category_character_color;
|
||||||
|
}
|
||||||
|
&[data-tag-category="content-official"] {
|
||||||
|
background: $tag_category_content_official_background;
|
||||||
|
border-color: $tag_category_content_official_border;
|
||||||
|
color: $tag_category_content_official_color;
|
||||||
|
}
|
||||||
|
&[data-tag-category="content-fanmade"] {
|
||||||
|
background: $tag_category_content_fanmade_background;
|
||||||
|
border-color: $tag_category_content_fanmade_border;
|
||||||
|
color: $tag_category_content_fanmade_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
// We need to import the CSS so that webpack will load it.
|
// We need to import the CSS so that webpack will load it.
|
||||||
// The MiniCssExtractPlugin is used to separate it out into
|
// The MiniCssExtractPlugin is used to separate it out into
|
||||||
// its own CSS file.
|
// its own CSS file.
|
||||||
import css from "../css/app.css"
|
|
||||||
|
|
||||||
// webpack automatically bundles all modules in your
|
// webpack automatically bundles all modules in your
|
||||||
// entry points. Those entry points can be configured
|
// entry points. Those entry points can be configured
|
||||||
|
|
@ -9,7 +8,6 @@ import css from "../css/app.css"
|
||||||
//
|
//
|
||||||
// Import dependencies
|
// Import dependencies
|
||||||
//
|
//
|
||||||
import "phoenix_html"
|
|
||||||
|
|
||||||
// Import local files
|
// Import local files
|
||||||
//
|
//
|
||||||
|
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
// NOTE: The contents of this file will only be executed if
|
|
||||||
// you uncomment its entry in "assets/js/app.js".
|
|
||||||
|
|
||||||
// To use Phoenix channels, the first step is to import Socket,
|
|
||||||
// and connect at the socket path in "lib/web/endpoint.ex".
|
|
||||||
//
|
|
||||||
// Pass the token on params as below. Or remove it
|
|
||||||
// from the params if you are not using authentication.
|
|
||||||
import {Socket} from "phoenix"
|
|
||||||
|
|
||||||
let socket = new Socket("/socket", {params: {token: window.userToken}})
|
|
||||||
|
|
||||||
// When you connect, you'll often need to authenticate the client.
|
|
||||||
// For example, imagine you have an authentication plug, `MyAuth`,
|
|
||||||
// which authenticates the session and assigns a `:current_user`.
|
|
||||||
// If the current user exists you can assign the user's token in
|
|
||||||
// the connection for use in the layout.
|
|
||||||
//
|
|
||||||
// In your "lib/web/router.ex":
|
|
||||||
//
|
|
||||||
// pipeline :browser do
|
|
||||||
// ...
|
|
||||||
// plug MyAuth
|
|
||||||
// plug :put_user_token
|
|
||||||
// end
|
|
||||||
//
|
|
||||||
// defp put_user_token(conn, _) do
|
|
||||||
// if current_user = conn.assigns[:current_user] do
|
|
||||||
// token = Phoenix.Token.sign(conn, "user socket", current_user.id)
|
|
||||||
// assign(conn, :user_token, token)
|
|
||||||
// else
|
|
||||||
// conn
|
|
||||||
// end
|
|
||||||
// end
|
|
||||||
//
|
|
||||||
// Now you need to pass this token to JavaScript. You can do so
|
|
||||||
// inside a script tag in "lib/web/templates/layout/app.html.eex":
|
|
||||||
//
|
|
||||||
// <script>window.userToken = "<%= assigns[:user_token] %>";</script>
|
|
||||||
//
|
|
||||||
// You will need to verify the user token in the "connect/3" function
|
|
||||||
// in "lib/web/channels/user_socket.ex":
|
|
||||||
//
|
|
||||||
// def connect(%{"token" => token}, socket, _connect_info) do
|
|
||||||
// # max_age: 1209600 is equivalent to two weeks in seconds
|
|
||||||
// case Phoenix.Token.verify(socket, "user socket", token, max_age: 1209600) do
|
|
||||||
// {:ok, user_id} ->
|
|
||||||
// {:ok, assign(socket, :user, user_id)}
|
|
||||||
// {:error, reason} ->
|
|
||||||
// :error
|
|
||||||
// end
|
|
||||||
// end
|
|
||||||
//
|
|
||||||
// Finally, connect to the socket:
|
|
||||||
socket.connect()
|
|
||||||
|
|
||||||
// Now that you are connected, you can join channels with a topic:
|
|
||||||
let channel = socket.channel("topic:subtopic", {})
|
|
||||||
channel.join()
|
|
||||||
.receive("ok", resp => { console.log("Joined successfully", resp) })
|
|
||||||
.receive("error", resp => { console.log("Unable to join", resp) })
|
|
||||||
|
|
||||||
export default socket
|
|
||||||
7610
assets/package-lock.json
generated
7610
assets/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,24 +1,19 @@
|
||||||
{
|
{
|
||||||
"repository": {},
|
|
||||||
"license": "MIT",
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"deploy": "webpack --mode production",
|
"deploy": "brunch build --production",
|
||||||
"watch": "webpack --mode development --watch"
|
"watch": "brunch watch --stdin"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"phoenix": "file:../deps/phoenix",
|
"brunch": "^2.10.17",
|
||||||
"phoenix_html": "file:../deps/phoenix_html"
|
"copycat-brunch": "^1.1.1",
|
||||||
|
"font-awesome": "^4.7.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.0.0",
|
"acorn": "^7.0.0",
|
||||||
"@babel/preset-env": "^7.0.0",
|
"autoprefixer": "^9.5.1",
|
||||||
"babel-loader": "^8.0.0",
|
"normalize-scss": "^7.0.1",
|
||||||
"copy-webpack-plugin": "^5.0.4",
|
"rollup-brunch": "git+https://github.com/liamwhite/rollup-brunch#31967fc",
|
||||||
"css-loader": "^3.2.0",
|
"sass-brunch": "git+https://github.com/brunch/sass-brunch#e9c0bfe",
|
||||||
"mini-css-extract-plugin": "^0.8.0",
|
"uglify-js-brunch": "^2.10.0"
|
||||||
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
|
||||||
"uglifyjs-webpack-plugin": "^2.2.0",
|
|
||||||
"webpack": "4.39.2",
|
|
||||||
"webpack-cli": "^3.3.6"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.1 KiB |
2
assets/static/favicon.svg
Normal file
2
assets/static/favicon.svg
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><path d="m13.2,.6c5,9.2-.2,15.5-2.9,15.3s-3.6,-4.7-9.2,-4.5c2.6,-3.4 8.3,-.3 9.8,-1.6s3.7,-5.4 2.3,-9.2" fill="#73d6ed"></path><path d="m11,0.6-1.7,1.4-1.7,-1.2.8,2-1.7,1h1.8l-5.5,9.7.4,.2 5.5,-9.7.6,1.8 .5,-2 2.2,-.1-1.8,-1.1.6,-2" fill="#94c1dd"></path><circle cx="13.5" cy="8.5" fill="#fff" id="e" r="0.5"></circle><use x="-2" y="3" xlink:href="#e"></use><use x="-6" y="4" xlink:href="#e"></use><use x="-2.8" y="6" xlink:href="#e"></use></svg>
|
||||||
|
After Width: | Height: | Size: 605 B |
|
|
@ -1,41 +0,0 @@
|
||||||
const path = require('path');
|
|
||||||
const glob = require('glob');
|
|
||||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
|
||||||
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
|
|
||||||
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
|
||||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
|
||||||
|
|
||||||
module.exports = (env, options) => ({
|
|
||||||
optimization: {
|
|
||||||
minimizer: [
|
|
||||||
new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
|
|
||||||
new OptimizeCSSAssetsPlugin({})
|
|
||||||
]
|
|
||||||
},
|
|
||||||
entry: {
|
|
||||||
'./js/app.js': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
|
|
||||||
},
|
|
||||||
output: {
|
|
||||||
filename: 'app.js',
|
|
||||||
path: path.resolve(__dirname, '../priv/static/js')
|
|
||||||
},
|
|
||||||
module: {
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
test: /\.js$/,
|
|
||||||
exclude: /node_modules/,
|
|
||||||
use: {
|
|
||||||
loader: 'babel-loader'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.css$/,
|
|
||||||
use: [MiniCssExtractPlugin.loader, 'css-loader']
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
new MiniCssExtractPlugin({ filename: '../css/app.css' }),
|
|
||||||
new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
@ -21,13 +21,7 @@ config :philomena, PhilomenaWeb.Endpoint,
|
||||||
code_reloader: true,
|
code_reloader: true,
|
||||||
check_origin: false,
|
check_origin: false,
|
||||||
watchers: [
|
watchers: [
|
||||||
node: [
|
npm: ["run", "watch", cd: Path.expand("../assets", __DIR__)]
|
||||||
"node_modules/webpack/bin/webpack.js",
|
|
||||||
"--mode",
|
|
||||||
"development",
|
|
||||||
"--watch-stdin",
|
|
||||||
cd: Path.expand("../assets", __DIR__)
|
|
||||||
]
|
|
||||||
]
|
]
|
||||||
|
|
||||||
# ## SSL Support
|
# ## SSL Support
|
||||||
|
|
|
||||||
34
lib/philomena_web/templates/layout/_burger.html.slime
Normal file
34
lib/philomena_web/templates/layout/_burger.html.slime
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
nav#burger
|
||||||
|
a href="/"
|
||||||
|
i.fa-fw.favicon-home<>
|
||||||
|
' Home
|
||||||
|
a href="/images/new"
|
||||||
|
i.fa.fa-fw.fa-upload<>
|
||||||
|
' Upload
|
||||||
|
a href="/forums"
|
||||||
|
i.fas.fa-fw.fa-pen-square<>
|
||||||
|
' Forums
|
||||||
|
a href="/tags"
|
||||||
|
i.fa.fa-fw.fa-tag<>
|
||||||
|
' Tags
|
||||||
|
a href="/filters"
|
||||||
|
i.fa.fa-fw.fa-filter<>
|
||||||
|
' Filters
|
||||||
|
a href="/lists"
|
||||||
|
i.fa.fa-fw.fa-list<>
|
||||||
|
' Rankings
|
||||||
|
a href="/galleries"
|
||||||
|
i.fa.fa-fw.fa-image<>
|
||||||
|
' Galleries
|
||||||
|
a href="/lists/recent_comments"
|
||||||
|
i.fa.fa-fw.fa-comments<>
|
||||||
|
' Comments
|
||||||
|
a href="/commissions"
|
||||||
|
i.fa.fa-fw.fa-address-card<>
|
||||||
|
' Commissions
|
||||||
|
a href="/channels"
|
||||||
|
i.fa.fa-fw.fa-podcast<>
|
||||||
|
' Channels
|
||||||
|
a href="/pages/donations"
|
||||||
|
i.fa.fa-fw.fa-heart<>
|
||||||
|
' Donate
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
noscript.flash.flash--warning
|
||||||
|
strong You don't appear to have Javascript enabled
|
||||||
|
' If you're using an add-on like NoScript, please allow
|
||||||
|
' :cdn_host
|
||||||
|
' for the site to work properly.
|
||||||
|
= if get_flash(@conn, :info) do
|
||||||
|
.flash.flash--success = get_flash(@conn, :info)
|
||||||
|
= if get_flash(@conn, :alert) do
|
||||||
|
.flash.flash--warning = get_flash(@conn, :alert)
|
||||||
|
= if get_flash(@conn, :error) do
|
||||||
|
.flash.flash--warning = get_flash(@conn, :error)
|
||||||
|
= if get_flash(@conn, :warning) do
|
||||||
|
.flash.flash--warning = get_flash(@conn, :warning)
|
||||||
10
lib/philomena_web/templates/layout/_footer.html.slime
Normal file
10
lib/philomena_web/templates/layout/_footer.html.slime
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
footer#footer
|
||||||
|
#serving_info
|
||||||
|
' Powered by the
|
||||||
|
a href="https://github.com/derpibooru/philomena" philomena project
|
||||||
|
br
|
||||||
|
' Served by
|
||||||
|
=> hostname()
|
||||||
|
| (
|
||||||
|
= render_time(@conn)
|
||||||
|
| ms)
|
||||||
91
lib/philomena_web/templates/layout/_header.html.slime
Normal file
91
lib/philomena_web/templates/layout/_header.html.slime
Normal file
|
|
@ -0,0 +1,91 @@
|
||||||
|
header.header
|
||||||
|
.flex.flex--centered.flex--start-bunched.flex--maybe-wrap
|
||||||
|
.flex.flex--centered
|
||||||
|
#js-burger-toggle.hide-desktop
|
||||||
|
a.header__link href='#'
|
||||||
|
i.fa.fa-bars
|
||||||
|
a.header__link href='/'
|
||||||
|
i.fa.fw.favicon-home
|
||||||
|
span.fa__text.hide-limited-desktop.hide-mobile
|
||||||
|
' Philomena
|
||||||
|
a.header__link.hide-mobile href="/images/new" title="Upload"
|
||||||
|
i.fa.fa-upload
|
||||||
|
|
||||||
|
form.header__search.flex.flex--no-wrap.flex--centered action="/search" method="get"
|
||||||
|
input.input.header__input.header__input--search#q name="q" title="For terms all required, separate with ',' or 'AND'; also supports 'OR' for optional terms and '-' or 'NOT' for negation. Search with a blank query for more options or click the ? for syntax help." value=assigns[:search_query] placeholder="Search" autocapitalize="none"
|
||||||
|
|
||||||
|
button.header__search__button type="submit" title='Search'
|
||||||
|
i.fa-embedded--search
|
||||||
|
a.header__search__button href="/search/reverse" title="Search using an image"
|
||||||
|
i.fa-embedded--camera
|
||||||
|
a.header__search__button href="/search/syntax" title="Search syntax help"
|
||||||
|
i.fa-embedded--help
|
||||||
|
|
||||||
|
.flex.flex--centered.flex--no-wrap.header__force-right
|
||||||
|
= if @current_user do
|
||||||
|
- notification_count = 0
|
||||||
|
a.header__link href="/notifications" title="Notifications"
|
||||||
|
i.fa-embedded--notification>
|
||||||
|
span.js-notification-ticker.fa__text.header__counter data-notification-count=notification_count = notification_count
|
||||||
|
|
||||||
|
a.header__link href="/conversations" title="Conversations"
|
||||||
|
i.fa-embedded--message>
|
||||||
|
span.fa-embedded__text.header__counter.hidden = "0"
|
||||||
|
|
||||||
|
a.header__link.hide-mobile href="/filters" title="Filters"
|
||||||
|
i.fa.fa-filter
|
||||||
|
span.hide-limited-desktop< Filters
|
||||||
|
.dropdown.header__dropdown
|
||||||
|
a.header__link.header__link-user href="/"
|
||||||
|
/= user_avatar(@current_user, 'avatar--28px'.freeze, @current_user.name)
|
||||||
|
span.header__link-user__dropdown-arrow.hide-mobile data-click-preventdefault="true"
|
||||||
|
nav.dropdown__content.dropdown__content-right.hide-mobile.js-burger-links
|
||||||
|
a.header__link href="/profiles"
|
||||||
|
= @current_user.name
|
||||||
|
a.header__link href='/search?q=my:watched'
|
||||||
|
i.fa.fa-fw.fa-eye>
|
||||||
|
| Watched
|
||||||
|
a.header__link href='/search?q=my:faves'
|
||||||
|
i.fa.fa-fw.fa-star>
|
||||||
|
| Faves
|
||||||
|
a.header__link href='/search?q=my:upvotes'
|
||||||
|
i.fa.fa-fw.fa-arrow-up>
|
||||||
|
| Upvotes
|
||||||
|
a.header__link href='/search?q=my:uploads'
|
||||||
|
i.fa.fa-fw.fa-upload>
|
||||||
|
| Uploads
|
||||||
|
a.header__link href='/lists/my_comments'
|
||||||
|
i.fa.fa-fw.fa-comments>
|
||||||
|
| Comments
|
||||||
|
a.header__link href="/posts/posted"
|
||||||
|
i.fas.fa-fw.fa-pen-square>
|
||||||
|
| Posts
|
||||||
|
a.header__link href='/user_links'
|
||||||
|
i.fa.fa-fw.fa-link>
|
||||||
|
| Links
|
||||||
|
a.header__link href='/settings/edit'
|
||||||
|
i.fa.fa-fw.fa-cogs>
|
||||||
|
| Settings
|
||||||
|
a.header__link href="/conversations"
|
||||||
|
i.fa.fa-fw.fa-envelope>
|
||||||
|
| Messages
|
||||||
|
a.header__link href="/session" data-method='delete'
|
||||||
|
i.fas.fa-fw.fa-sign-out-alt>
|
||||||
|
| Logout
|
||||||
|
- else
|
||||||
|
a.header__link.hide-mobile href="/filters"
|
||||||
|
| Filters
|
||||||
|
span.js-burger-links.hide-mobile
|
||||||
|
a.header__link href='/settings/edit'
|
||||||
|
i.fa.fa-fw.fa-cogs.hide-desktop>
|
||||||
|
| Settings
|
||||||
|
a.header__link href="/registration/new"
|
||||||
|
| Register
|
||||||
|
a.header__link href="/session/new"
|
||||||
|
| Login
|
||||||
|
|
||||||
|
nav.header.header--secondary
|
||||||
|
.flex.flex--centered.flex--spaced-out.flex--wrap
|
||||||
|
= render PhilomenaWeb.LayoutView, "_header_navigation.html", assigns
|
||||||
|
/- if current_user.try(:staff?)
|
||||||
|
include _header_staff_links.html
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
.hide-mobile
|
||||||
|
.dropdown.header__dropdown
|
||||||
|
a.header__link href="/images"
|
||||||
|
| Images
|
||||||
|
span data-click-preventdefault="true"
|
||||||
|
i.fa.fa-caret-down<
|
||||||
|
.dropdown__content
|
||||||
|
a.header__link href="/"
|
||||||
|
| Random
|
||||||
|
.dropdown.header__dropdown
|
||||||
|
a.header__link href="/activity"
|
||||||
|
| Activity
|
||||||
|
span data-click-preventdefault="true"
|
||||||
|
i.fa.fa-caret-down<
|
||||||
|
.dropdown__content
|
||||||
|
a.header__link href="/lists"
|
||||||
|
| Rankings
|
||||||
|
a.header__link href="/lists/recent_comments"
|
||||||
|
| Comments
|
||||||
|
.dropdown.header__dropdown
|
||||||
|
a.header__link href="/forums"
|
||||||
|
| Forums
|
||||||
|
span data-click-preventdefault="true"
|
||||||
|
i.fa.fa-caret-down<
|
||||||
|
.dropdown__content
|
||||||
|
a.header__link href='/posts'
|
||||||
|
i.fa.fa-fw.fa-search>
|
||||||
|
| Post Search
|
||||||
|
.dropdown.header__dropdown
|
||||||
|
a.header__link href="/tags"
|
||||||
|
| Tags
|
||||||
|
span data-click-preventdefault="true"
|
||||||
|
i.fa.fa-caret-down<
|
||||||
|
.dropdown__content
|
||||||
|
a.header__link href="/tags/ratings"
|
||||||
|
| Ratings
|
||||||
|
a.header__link href="/pages/tags"
|
||||||
|
| Guidelines
|
||||||
|
a.header__link href="/tags/aliases"
|
||||||
|
| Aliased
|
||||||
|
a.header__link href='/galleries'
|
||||||
|
| Galleries
|
||||||
|
a.header__link href='/commissions'
|
||||||
|
| Commissions
|
||||||
|
|
@ -3,7 +3,7 @@ html lang="en"
|
||||||
head
|
head
|
||||||
meta charset="utf-8"
|
meta charset="utf-8"
|
||||||
meta http-equiv="X-UA-Compatible" content="IE=edge"
|
meta http-equiv="X-UA-Compatible" content="IE=edge"
|
||||||
meta name="viewport" content="width=device-width, initial-scale=1.0"
|
meta name="viewport" content="width=device-width, initial-scale=1"
|
||||||
title
|
title
|
||||||
= if assigns[:title] do
|
= if assigns[:title] do
|
||||||
=> assigns[:title]
|
=> assigns[:title]
|
||||||
|
|
@ -11,14 +11,18 @@ html lang="en"
|
||||||
- else
|
- else
|
||||||
' Philomena
|
' Philomena
|
||||||
link rel="stylesheet" href=Routes.static_path(@conn, "/css/app.css")
|
link rel="stylesheet" href=Routes.static_path(@conn, "/css/app.css")
|
||||||
body
|
link rel="icon" href="/favicon.ico" type="image/x-icon"
|
||||||
= if @current_user do
|
link rel="icon" href="/favicon.svg" type="image/svg+xml"
|
||||||
p
|
meta name="generator" content="philomena"
|
||||||
' Welcome
|
meta name="theme-color" content="#618fc3"
|
||||||
= @current_user.name
|
meta name="format-detection" content="telephone=no"
|
||||||
|
meta name="robots" content="noindex, nofollow"
|
||||||
|
script type="text/javascript" src=Routes.static_path(@conn, "/js/app.js") async="async"
|
||||||
|
body data-theme="default"
|
||||||
|
= render PhilomenaWeb.LayoutView, "_burger.html", assigns
|
||||||
|
#container
|
||||||
|
= render PhilomenaWeb.LayoutView, "_header.html", assigns
|
||||||
|
= render PhilomenaWeb.LayoutView, "_flash_warnings.html", assigns
|
||||||
|
main#content class="layout--narrow"
|
||||||
= render @view_module, @view_template, assigns
|
= render @view_module, @view_template, assigns
|
||||||
p
|
= render PhilomenaWeb.LayoutView, "_footer.html", assigns
|
||||||
' Rendered in
|
|
||||||
=> render_time(@conn)
|
|
||||||
' ms
|
|
||||||
script type="text/javascript" src=Routes.static_path(@conn, "/js/app.js")
|
|
||||||
|
|
@ -6,4 +6,10 @@ defmodule PhilomenaWeb.LayoutView do
|
||||||
|> Float.round(3)
|
|> Float.round(3)
|
||||||
|> Float.to_string()
|
|> Float.to_string()
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def hostname() do
|
||||||
|
{:ok, host} = :inet.gethostname()
|
||||||
|
|
||||||
|
host |> to_string
|
||||||
|
end
|
||||||
end
|
end
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue