mirror of
https://github.com/philomena-dev/philomena.git
synced 2024-11-24 04:27:59 +01:00
unnest, add light theme, fixes
This commit is contained in:
Luna D.
parent
aa299de329
commit
bac364f221
23 changed files with 317 additions and 283 deletions
|
|
@ -22,35 +22,35 @@
|
|||
}
|
||||
}
|
||||
|
||||
@define-mixin even-odd-type $type {
|
||||
&:nth-child(odd).$(type),
|
||||
&:nth-child(odd) .$(type) {
|
||||
@define-mixin even-odd-type $classname, $type {
|
||||
.$(classname):nth-child(odd).$(type),
|
||||
.$(classname):nth-child(odd) .$(type) {
|
||||
background: var(--$(type)-color);
|
||||
}
|
||||
&:nth-child(even).$(type),
|
||||
&:nth-child(even) .$(type) {
|
||||
.$(classname):nth-child(even).$(type),
|
||||
.$(classname):nth-child(even) .$(type) {
|
||||
background: var(--$(type)-dark-color);
|
||||
}
|
||||
&:nth-child(even) &:nth-child(odd).$(type),
|
||||
&:nth-child(even) &:nth-child(odd) .$(type) {
|
||||
.$(classname):nth-child(even) .$(classname):nth-child(odd).$(type),
|
||||
.$(classname):nth-child(even) .$(classname):nth-child(odd) .$(type) {
|
||||
background: var(--$(type)-color);
|
||||
}
|
||||
}
|
||||
|
||||
@define-mixin even-odd {
|
||||
&:nth-child(odd) {
|
||||
@define-mixin even-odd $classname {
|
||||
.$(classname):nth-child(odd) {
|
||||
background: var(--secondary-dark-color);
|
||||
}
|
||||
&:nth-child(even) {
|
||||
.$(classname):nth-child(even) {
|
||||
background: var(--secondary-muted-color);;
|
||||
}
|
||||
|
||||
@mixin even-odd-type primary;
|
||||
@mixin even-odd-type success;
|
||||
@mixin even-odd-type warning;
|
||||
@mixin even-odd-type danger;
|
||||
@mixin even-odd-type information;
|
||||
@mixin even-odd-type special;
|
||||
@mixin even-odd-type $classname, primary;
|
||||
@mixin even-odd-type $classname, success;
|
||||
@mixin even-odd-type $classname, warning;
|
||||
@mixin even-odd-type $classname, danger;
|
||||
@mixin even-odd-type $classname, information;
|
||||
@mixin even-odd-type $classname, special;
|
||||
}
|
||||
|
||||
@define-mixin animated-transition {
|
||||
|
|
|
|||
|
|
@ -1,29 +1,27 @@
|
|||
@define-mixin block-type $type {
|
||||
.block--$(type) {
|
||||
.block__content {
|
||||
border-color: var(--$(type)-border-color);
|
||||
background: var(--$(type)-dark-color);
|
||||
}
|
||||
.block--$(type) .block__content {
|
||||
border-color: var(--$(type)-border-color);
|
||||
background: var(--$(type)-dark-color);
|
||||
}
|
||||
|
||||
.block__footer {
|
||||
background: var(--$(type)-color);
|
||||
}
|
||||
.block--$(type) .block__footer {
|
||||
background: var(--$(type)-color);
|
||||
}
|
||||
|
||||
&.block--muted {
|
||||
border-color: var(--$(type)-color);
|
||||
}
|
||||
.block--$(type).block--muted {
|
||||
border-color: var(--$(type)-color);
|
||||
}
|
||||
|
||||
&.block--fixed {
|
||||
background: var(--$(type)-color);
|
||||
}
|
||||
.block--$(type).block--fixed {
|
||||
background: var(--$(type)-color);
|
||||
}
|
||||
|
||||
& a {
|
||||
color: var(--$(type)-link-color);
|
||||
.block--$(type) a {
|
||||
color: var(--$(type)-link-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--link-hover-color);
|
||||
}
|
||||
}
|
||||
.block--$(type) a:hover {
|
||||
color: var(--link-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -86,10 +84,10 @@
|
|||
padding: 0 var(--padding-normal);
|
||||
font-size: var(--font-header-size);
|
||||
margin-bottom: var(--padding-small);
|
||||
}
|
||||
|
||||
& > .fa {
|
||||
margin-right: var(--padding-normal);
|
||||
}
|
||||
.block__header > .fa, .block__header--single-item > .fa {
|
||||
margin-right: var(--padding-normal);
|
||||
}
|
||||
|
||||
.block__header--single-item {
|
||||
|
|
@ -129,20 +127,20 @@
|
|||
.block__header--js-tabbed {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& a {
|
||||
display: block;
|
||||
color: var(--text-color);
|
||||
padding: 0 var(--padding-normal);
|
||||
.block__header--js-tabbed a {
|
||||
display: block;
|
||||
color: var(--text-color);
|
||||
padding: 0 var(--padding-normal);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--background-color);
|
||||
}
|
||||
}
|
||||
.block__header--js-tabbed a:hover {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.selected {
|
||||
background: var(--background-color);
|
||||
}
|
||||
.block__header--js-tabbed .selected {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.block--spaced-top {
|
||||
|
|
|
|||
|
|
@ -3,31 +3,31 @@
|
|||
color: var(--$(type)-link-color) !important;
|
||||
border-color: var(--$(type)-border-color);
|
||||
background: var(--$(type)-dark-color);
|
||||
}
|
||||
|
||||
&.button--important {
|
||||
color: var(--text-color) !important;
|
||||
background: var(--$(type)-color);
|
||||
box-shadow: 0 -1px var(--$(type)-dark-color) inset;
|
||||
}
|
||||
.button--$(type).button--important {
|
||||
color: var(--text-color) !important;
|
||||
background: var(--$(type)-color);
|
||||
box-shadow: 0 -1px var(--$(type)-dark-color) inset;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--$(type)-muted-color) !important;
|
||||
}
|
||||
.button--$(type):hover {
|
||||
background: var(--$(type)-muted-color) !important;
|
||||
}
|
||||
|
||||
.button__group--$(type) {
|
||||
border-color: var(--$(type)-color);
|
||||
background: var(--$(type)-dark-color);
|
||||
}
|
||||
|
||||
& a {
|
||||
color: var(--$(type)-link-color);
|
||||
.button__group--$(type) a {
|
||||
color: var(--$(type)-link-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@mixin animated-transition;
|
||||
color: var(--text-color);
|
||||
background: var(--$(type)-color);
|
||||
}
|
||||
}
|
||||
.button__group--$(type) a:hover {
|
||||
@mixin animated-transition;
|
||||
color: var(--text-color);
|
||||
background: var(--$(type)-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -46,12 +46,12 @@
|
|||
overflow: hidden;
|
||||
line-height: var(--button-height);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@mixin animated-transition;
|
||||
background: var(--primary-muted-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
.button:hover {
|
||||
@mixin animated-transition;
|
||||
background: var(--primary-muted-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button > i {
|
||||
|
|
@ -66,10 +66,10 @@
|
|||
.button__row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
& > button {
|
||||
margin-right: var(--padding-small);
|
||||
}
|
||||
.button__row > button {
|
||||
margin-right: var(--padding-small);
|
||||
}
|
||||
|
||||
.button__group, .button__group--single, .button__group--standalone {
|
||||
|
|
@ -80,10 +80,10 @@
|
|||
margin-right: var(--padding-normal);
|
||||
background: var(--secondary-dark-color);
|
||||
line-height: var(--button-group-height);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
.button__group:last-child, .button__group--single:last-child, .button__group--standalone:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.button__group--tall {
|
||||
|
|
@ -97,10 +97,10 @@
|
|||
.button__group .button {
|
||||
border: 0;
|
||||
border-right: var(--secondary-color);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.button__group .button:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.button__group--single {
|
||||
|
|
@ -111,11 +111,11 @@
|
|||
@mixin animated-transition;
|
||||
font-weight: bold;
|
||||
padding: 0 var(--padding-small);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@mixin animated-transition;
|
||||
background: var(--secondary-muted-color);
|
||||
}
|
||||
.button__group--standalone a:hover {
|
||||
@mixin animated-transition;
|
||||
background: var(--secondary-muted-color);
|
||||
}
|
||||
|
||||
.button--borderless {
|
||||
|
|
@ -126,10 +126,10 @@
|
|||
color: var(--link-color);
|
||||
border-width: 0 !important;
|
||||
background: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-muted-color);
|
||||
}
|
||||
.block__header__buttons .button:hover {
|
||||
background: var(--primary-muted-color);
|
||||
}
|
||||
|
||||
@mixin button-type success;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.dropdown__content {
|
||||
display: block;
|
||||
min-width: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
.dropdown:hover .dropdown__content {
|
||||
display: block;
|
||||
min-width: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.dropdown__content {
|
||||
|
|
@ -18,11 +16,11 @@
|
|||
display: none;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
& > :not(.hidden) {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dropdown__content > :not(.hidden) {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dropdown__content--right {
|
||||
|
|
@ -34,12 +32,10 @@
|
|||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.dropdown__text {
|
||||
background: var(--primary-dark-color);
|
||||
}
|
||||
}
|
||||
.dropdown__item:hover .dropdown__text {
|
||||
background: var(--primary-dark-color);
|
||||
}
|
||||
|
||||
.dropdown__icon {
|
||||
|
|
@ -62,8 +58,8 @@
|
|||
.dropdown__link {
|
||||
padding: 0 var(--padding-small);
|
||||
color: var(--text-color) !important;
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-dark-color);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown__link:hover {
|
||||
background: var(--primary-dark-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,18 +2,18 @@
|
|||
.flash--$(type) {
|
||||
border: 1px solid var(--$(type)-border-color);
|
||||
background: var(--$(type)-color);
|
||||
}
|
||||
|
||||
.flash__message {
|
||||
border-left: 1px solid var(--$(type)-border-color);
|
||||
}
|
||||
.flash--$(type) .flash__message {
|
||||
border-left: 1px solid var(--$(type)-border-color);
|
||||
}
|
||||
|
||||
& a {
|
||||
color: var(--$(type)-link-color);
|
||||
.flash--$(type) a {
|
||||
color: var(--$(type)-link-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--link-hover-color);
|
||||
}
|
||||
}
|
||||
.flash--$(type) a:hover {
|
||||
color: var(--link-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,10 +14,13 @@
|
|||
border-bottom-color: var(--$(type)-border-color);
|
||||
}
|
||||
|
||||
.block--$(type) {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
border-bottom-color: var(--$(type)-border-color);
|
||||
}
|
||||
.block--$(type) h1,
|
||||
.block--$(type) h2,
|
||||
.block--$(type) h3,
|
||||
.block--$(type) h4,
|
||||
.block--$(type) h5,
|
||||
.block--$(type) h6 {
|
||||
border-bottom-color: var(--$(type)-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@
|
|||
color: var(--text-color);
|
||||
box-sizing: border-box;
|
||||
font-family: var(--font-family-monospace);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
.input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--secondary-border-color);
|
||||
}
|
||||
.input::placeholder {
|
||||
color: var(--secondary-border-color);
|
||||
}
|
||||
|
||||
.input--wide {
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
color: var(--$(type)-color) !important;
|
||||
padding: 0 var(--padding-tiny);
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
&.active, &:hover {
|
||||
color: var(--text-color) !important;
|
||||
background-color: var(--$(type)-color);
|
||||
}
|
||||
.interaction--$(type).active, .interaction--$(type):hover {
|
||||
color: var(--text-color) !important;
|
||||
background-color: var(--$(type)-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -44,11 +44,9 @@
|
|||
}
|
||||
|
||||
@mixin if-desktop {
|
||||
.centered-layout {
|
||||
.layout--medium, .layout--narrow {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.centered-layout .layout--medium, .centered-layout .layout--narrow {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -59,20 +59,18 @@
|
|||
position: relative;
|
||||
border-radius: 0 0 var(--border-radius-inner) var(--border-radius-inner);
|
||||
overflow: hidden;
|
||||
|
||||
.image-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.media-box__content--featured {
|
||||
.media-box__image {
|
||||
max-height: var(--media-featured-width);
|
||||
}
|
||||
.media-box__content .image-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.media-box__content--featured .media-box__image {
|
||||
max-height: var(--media-featured-width);
|
||||
}
|
||||
|
||||
.media-box__overlay {
|
||||
|
|
@ -105,13 +103,13 @@
|
|||
.image-container a {
|
||||
display: flex;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
/* For some reason tall images don't center properly within the container
|
||||
without this hack. I blame CSS. */
|
||||
& > img {
|
||||
max-height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
/* For some reason tall images don't center properly within the container
|
||||
without this hack. I blame CSS. */
|
||||
.image-container a > img {
|
||||
max-height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.media-box__image {
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
@define-mixin separator-type $type {
|
||||
.separator--$(type) {
|
||||
border-color: var(--$(type)-border-color);
|
||||
|
||||
&.separator--vertical {
|
||||
background: var(--$(type)-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.button__group--standalone .separator--$(type),
|
||||
.button__group .separator--$(type) {
|
||||
&.separator--vertical {
|
||||
background: var(--$(type)-color) !important;
|
||||
}
|
||||
.separator--$(type).separator--vertical {
|
||||
background: var(--$(type)-border-color);
|
||||
}
|
||||
|
||||
.button__group--standalone .separator--$(type).separator--vertical,
|
||||
.button__group .separator--$(type).separator--vertical {
|
||||
background: var(--$(type)-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
5
assets/css/options/extra-rounding.css
Normal file
5
assets/css/options/extra-rounding.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
:root {
|
||||
--border-radius-outer: 0.6rem;
|
||||
--border-radius-inner: 0.4rem;
|
||||
--border-radius-tag: 0.25rem;
|
||||
}
|
||||
5
assets/css/options/no-rounding.css
Normal file
5
assets/css/options/no-rounding.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
:root {
|
||||
--border-radius-outer: 0;
|
||||
--border-radius-inner: 0;
|
||||
--border-radius-tag: 0;
|
||||
}
|
||||
3
assets/css/options/tag-border.css
Normal file
3
assets/css/options/tag-border.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
:root {
|
||||
--tag-border-width: 1px;
|
||||
}
|
||||
89
assets/css/themes/light-blue.css
Normal file
89
assets/css/themes/light-blue.css
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
$background-color: #f7f7f7;
|
||||
$text-color: #171717;
|
||||
|
||||
$primary-color: #62a7d9;
|
||||
$secondary-color: #c1e4f9;
|
||||
$danger-color: #e78f82;
|
||||
$warning-color: #f0c180;
|
||||
$success-color: #8de3b1;
|
||||
$information-color: #90dce7;
|
||||
$special-color: #dc77e9;
|
||||
|
||||
$upvote-color: #5b9b26;
|
||||
$downvote-color: #da3412;
|
||||
$fave-color: #a18e27;
|
||||
$comment-color: #b099dd;
|
||||
$hide-color: #da3412;
|
||||
|
||||
$tag-default-color: #84dd96;
|
||||
$tag-error-color: #eb848c;
|
||||
$tag-rating-color: #9cc6f0;
|
||||
$tag-origin-color: #b5b0ed;
|
||||
$tag-character-color: #b6e4ed;
|
||||
$tag-oc-color: #efaaf2;
|
||||
$tag-species-color: #e1997a;
|
||||
$tag-body-type-color: #bcbcbc;
|
||||
$tag-content-fanmade-color: #e388c2;
|
||||
$tag-content-official-color: #ebe9b3;
|
||||
$tag-spoiler-color: #dcb879;
|
||||
|
||||
$spoiler-color: #0f0f0f;
|
||||
|
||||
@define-mixin tag-color $tagname, $color, $text-percentage: 40, $border-percentage: 15 {
|
||||
--tag-$(tagname)-color: $(color);
|
||||
--tag-$(tagname)-border-color: hsl(from $color h s calc(l - $border-percentage));
|
||||
--tag-$(tagname)-text-color: hsl(from $color h s calc(l - $text-percentage));
|
||||
}
|
||||
|
||||
@define-mixin type-color $type, $color {
|
||||
--$(type)-color: $color;
|
||||
--$(type)-border-color: hsl(from $color h calc(s - 20) calc(l - 10));
|
||||
--$(type)-dark-color: hsl(from $color h calc(s - 25) calc(l + 12));
|
||||
--$(type)-link-color: hsl(from $color h calc(s + 50) calc(l - 47));
|
||||
}
|
||||
|
||||
:root {
|
||||
--background-color: $background-color;
|
||||
--text-color: $text-color;
|
||||
|
||||
--link-color: hsl(from $primary-color h calc(s + 25) calc(l - 25));
|
||||
--link-hover-color: $text-color;
|
||||
|
||||
--primary-color: $primary-color;
|
||||
--primary-border-color: hsl(from $primary-color h calc(s + 20) calc(l - 30));
|
||||
--primary-muted-color: hsl(from $primary-color h calc(s + 7) calc(l + 10));
|
||||
--primary-dark-color: hsl(from $primary-color h calc(s - 10) calc(l + 30));
|
||||
|
||||
--secondary-color: $secondary-color;
|
||||
--secondary-border-color: hsl(from $secondary-color h s calc(l - 45));
|
||||
--secondary-muted-color: hsl(from $secondary-color h calc(s + 5) calc(l - 15));
|
||||
--secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l + 5));
|
||||
--secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
|
||||
|
||||
--upvote-color: $upvote-color;
|
||||
--downvote-color: $downvote-color;
|
||||
--fave-color: $fave-color;
|
||||
--comment-color: $comment-color;
|
||||
--hide-color: $hide-color;
|
||||
|
||||
--spoiler-color: $spoiler-color;
|
||||
--spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
|
||||
|
||||
@mixin type-color success, $success-color;
|
||||
@mixin type-color warning, $warning-color;
|
||||
@mixin type-color danger, $danger-color;
|
||||
@mixin type-color information, $information-color;
|
||||
@mixin type-color special, $special-color;
|
||||
|
||||
@mixin tag-color default, $tag-default-color;
|
||||
@mixin tag-color error, $tag-error-color, 37;
|
||||
@mixin tag-color rating, $tag-rating-color, 37;
|
||||
@mixin tag-color origin, $tag-origin-color, 42;
|
||||
@mixin tag-color character, $tag-character-color;
|
||||
@mixin tag-color oc, $tag-oc-color, 40;
|
||||
@mixin tag-color species, $tag-species-color, 37;
|
||||
@mixin tag-color body-type, $tag-body-type-color, 45, 12;
|
||||
@mixin tag-color content-fanmade, $tag-content-fanmade-color, 40;
|
||||
@mixin tag-color content-official, $tag-content-official-color;
|
||||
@mixin tag-color spoiler, $tag-spoiler-color;
|
||||
}
|
||||
|
|
@ -13,10 +13,10 @@
|
|||
background: 0;
|
||||
border: 0;
|
||||
padding: var(--padding-small);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--secondary-muted-color);
|
||||
}
|
||||
.communication__toolbar__button:hover {
|
||||
background: var(--secondary-muted-color);
|
||||
}
|
||||
|
||||
.communication-edit__actions {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@define-mixin fix-interaction $type {
|
||||
.interaction--$(type) {
|
||||
.metabar__interactions .interaction--$(type) {
|
||||
padding: var(--padding-tiny) var(--padding-small);
|
||||
}
|
||||
}
|
||||
|
|
@ -9,13 +9,13 @@
|
|||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
|
||||
@mixin fix-interaction fave;
|
||||
@mixin fix-interaction upvote;
|
||||
@mixin fix-interaction downvote;
|
||||
@mixin fix-interaction hide;
|
||||
}
|
||||
|
||||
@mixin fix-interaction fave;
|
||||
@mixin fix-interaction upvote;
|
||||
@mixin fix-interaction downvote;
|
||||
@mixin fix-interaction hide;
|
||||
|
||||
.metabar__interactions * {
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
|
|
@ -58,10 +58,8 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.metabar__mobile-info {
|
||||
& td {
|
||||
padding: var(--padding-small);
|
||||
}
|
||||
.metabar__mobile-info td {
|
||||
padding: var(--padding-small);
|
||||
}
|
||||
|
||||
.badges {
|
||||
|
|
|
|||
|
|
@ -7,13 +7,13 @@
|
|||
}
|
||||
|
||||
.statistics__statistic {
|
||||
@mixin even-odd;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 15% 15% auto;
|
||||
background: var(--secondary-color);
|
||||
}
|
||||
|
||||
@mixin even-odd statistics__statistic;
|
||||
|
||||
.statistics__column {
|
||||
text-align: center;
|
||||
padding: var(--padding-small);
|
||||
|
|
@ -27,8 +27,8 @@
|
|||
|
||||
.barline__bar {
|
||||
fill: var(--primary-border-color);
|
||||
|
||||
&:hover {
|
||||
fill: var(--danger-color);
|
||||
}
|
||||
}
|
||||
|
||||
.barline__bar:hover {
|
||||
fill: var(--danger-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
@define-mixin tag-color $tagtype {
|
||||
&[data-tag-category=$(tagtype)] {
|
||||
.tag[data-tag-category=$(tagtype)] {
|
||||
color: var(--tag-$(tagtype)-text-color);
|
||||
background: var(--tag-$(tagtype)-color);
|
||||
border-color: var(--tag-$(tagtype)-border-color);
|
||||
}
|
||||
|
||||
.tag__state {
|
||||
color: var(--tag-$(tagtype)-text-color);
|
||||
}
|
||||
.tag[data-tag-category=$(tagtype)] .tag__state {
|
||||
color: var(--tag-$(tagtype)-text-color);
|
||||
}
|
||||
|
||||
.tag__name {
|
||||
color: var(--tag-$(tagtype)-text-color);
|
||||
}
|
||||
.tag[data-tag-category=$(tagtype)] .tag__name {
|
||||
color: var(--tag-$(tagtype)-text-color);
|
||||
}
|
||||
|
||||
.tag__count {
|
||||
background: var(--tag-$(tagtype)-border-color);
|
||||
}
|
||||
.tag[data-tag-category=$(tagtype)] .tag__count {
|
||||
background: var(--tag-$(tagtype)-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -35,23 +35,23 @@
|
|||
border-radius: var(--border-radius-tag);
|
||||
border: var(--tag-border-width) solid var(--tag-default-border-color);
|
||||
font-weight: bold;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@mixin tag-color error;
|
||||
@mixin tag-color rating;
|
||||
@mixin tag-color origin;
|
||||
@mixin tag-color character;
|
||||
@mixin tag-color oc;
|
||||
@mixin tag-color species;
|
||||
@mixin tag-color body-type;
|
||||
@mixin tag-color content-fanmade;
|
||||
@mixin tag-color content-official;
|
||||
@mixin tag-color spoiler;
|
||||
}
|
||||
|
||||
.tag a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@mixin tag-color error;
|
||||
@mixin tag-color rating;
|
||||
@mixin tag-color origin;
|
||||
@mixin tag-color character;
|
||||
@mixin tag-color oc;
|
||||
@mixin tag-color species;
|
||||
@mixin tag-color body-type;
|
||||
@mixin tag-color content-fanmade;
|
||||
@mixin tag-color content-official;
|
||||
@mixin tag-color spoiler;
|
||||
|
||||
.tag > span {
|
||||
display: table-cell;
|
||||
white-space: pre;
|
||||
|
|
@ -79,10 +79,10 @@
|
|||
.tag__dropdown__link {
|
||||
background-color: var(--primary-muted-color);
|
||||
padding: 0 var(--padding-small);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-dark-color);
|
||||
}
|
||||
.tag__dropdown__link:hover {
|
||||
background-color: var(--primary-dark-color);
|
||||
}
|
||||
|
||||
.tag-info__image {
|
||||
|
|
|
|||
53
assets/package-lock.json
generated
53
assets/package-lock.json
generated
|
|
@ -17,7 +17,6 @@
|
|||
"jest-environment-jsdom": "^29.7.0",
|
||||
"normalize.css": "^8.0.1",
|
||||
"postcss-mixins": "^10.0.1",
|
||||
"postcss-nested": "^6.0.1",
|
||||
"postcss-simple-vars": "^7.0.1",
|
||||
"typescript": "^5.4",
|
||||
"vite": "^5.2"
|
||||
|
|
@ -3073,17 +3072,6 @@
|
|||
"integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/cssesc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
|
||||
"bin": {
|
||||
"cssesc": "bin/cssesc"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/cssom": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
|
||||
|
|
@ -3243,9 +3231,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.4.751",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.751.tgz",
|
||||
"integrity": "sha512-2DEPi++qa89SMGRhufWTiLmzqyuGmNF3SK4+PQetW1JKiZdEpF4XQonJXJCzyuYSA6mauiMhbyVhqYAP45Hvfw=="
|
||||
"version": "1.4.752",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.752.tgz",
|
||||
"integrity": "sha512-P3QJreYI/AUTcfBVrC4zy9KvnZWekViThgQMX/VpJ+IsOBbcX5JFpORM4qWapwWQ+agb2nYAOyn/4PMXOk0m2Q=="
|
||||
},
|
||||
"node_modules/emittery": {
|
||||
"version": "0.13.1",
|
||||
|
|
@ -5962,36 +5950,6 @@
|
|||
"postcss": "^8.2.14"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-nested": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
|
||||
"integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
|
||||
"dependencies": {
|
||||
"postcss-selector-parser": "^6.0.11"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/postcss/"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.2.14"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-selector-parser": {
|
||||
"version": "6.0.16",
|
||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
|
||||
"integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
|
||||
"dependencies": {
|
||||
"cssesc": "^3.0.0",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-simple-vars": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz",
|
||||
|
|
@ -6806,11 +6764,6 @@
|
|||
"requires-port": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
|
||||
},
|
||||
"node_modules/v8-to-istanbul": {
|
||||
"version": "9.2.0",
|
||||
"resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz",
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
"jest-environment-jsdom": "^29.7.0",
|
||||
"normalize.css": "^8.0.1",
|
||||
"postcss-mixins": "^10.0.1",
|
||||
"postcss-nested": "^6.0.1",
|
||||
"postcss-simple-vars": "^7.0.1",
|
||||
"typescript": "^5.4",
|
||||
"vite": "^5.2"
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
"DOM.Iterable"
|
||||
],
|
||||
|
||||
"moduleResolution": "Node",
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
|
|
|
|||
|
|
@ -2,36 +2,27 @@ import fs from 'fs';
|
|||
import path from 'path';
|
||||
import autoprefixer from 'autoprefixer';
|
||||
import postcssMixins from 'postcss-mixins';
|
||||
import postcssNested from 'postcss-nested';
|
||||
import postcssSimpleVars from 'postcss-simple-vars';
|
||||
import postcssRelativeColor from '@csstools/postcss-relative-color-syntax';
|
||||
import { defineConfig, UserConfig, ConfigEnv } from 'vite';
|
||||
|
||||
export default defineConfig(({ command }: ConfigEnv): UserConfig => {
|
||||
const isDev = command !== 'build';
|
||||
const targets = new Map();
|
||||
|
||||
if (isDev) {
|
||||
process.stdin.on('close', () => {
|
||||
// eslint-disable-next-line no-process-exit
|
||||
process.exit(0);
|
||||
});
|
||||
fs.readdirSync(path.resolve(__dirname, 'css/themes/')).forEach(name => {
|
||||
const m = name.match(/([-a-z]+).css/);
|
||||
|
||||
process.stdin.resume();
|
||||
}
|
||||
if (m)
|
||||
targets.set(`css/${m[1]}`, `./css/themes/${m[1]}.css`);
|
||||
});
|
||||
|
||||
const themeNames =
|
||||
fs.readdirSync(path.resolve(__dirname, 'css/themes/')).map(name => {
|
||||
const m = name.match(/([-a-z]+).css/);
|
||||
fs.readdirSync(path.resolve(__dirname, 'css/options/')).forEach(name => {
|
||||
const m = name.match(/([-a-z]+).css/);
|
||||
|
||||
if (m) { return m[1]; }
|
||||
return null;
|
||||
});
|
||||
|
||||
const themes = new Map();
|
||||
|
||||
for (const name of themeNames) {
|
||||
themes.set(`css/${name}`, `./css/themes/${name}.css`);
|
||||
}
|
||||
if (m)
|
||||
targets.set(`css/options/${m[1]}`, `./css/options/${m[1]}.css`);
|
||||
});
|
||||
|
||||
return {
|
||||
publicDir: 'static',
|
||||
|
|
@ -55,7 +46,7 @@ export default defineConfig(({ command }: ConfigEnv): UserConfig => {
|
|||
input: {
|
||||
'js/app': './js/app.js',
|
||||
'css/application': './css/application.css',
|
||||
...Object.fromEntries(themes)
|
||||
...Object.fromEntries(targets)
|
||||
},
|
||||
output: {
|
||||
entryFileNames: '[name].js',
|
||||
|
|
@ -66,7 +57,7 @@ export default defineConfig(({ command }: ConfigEnv): UserConfig => {
|
|||
},
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [postcssMixins(), postcssNested(), postcssSimpleVars, postcssRelativeColor(), autoprefixer]
|
||||
plugins: [postcssMixins(), postcssSimpleVars(), postcssRelativeColor(), autoprefixer]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue