flashii/misuzu
flashii/misuzu
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Better support for browsers without CSS variables.

Browse source
This commit is contained in:
flash 2019-08-13 04:42:12 +02:00
parent d2f3eab015
commit 867e358d28
56 changed files with 270 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
assets/less/animations.less
View file

@ -4,6 +4,7 @@
}
100% {
background-position: 100% 100%;
background-position: var(--background-width) var(--background-height);
}
}

1
assets/less/avatar.less
View file

@ -1,5 +1,6 @@
.avatar {
flex-shrink: 0;
background-color: @background-colour;
background-color: var(--background-colour);
background-size: cover;
background-repeat: no-repeat;

2
assets/less/changelog-actions-tags.less
View file

@ -28,9 +28,11 @@
}
&__entry {
color: @user-colour;
color: var(--user-colour);
text-decoration: none;
width: 200px;
border: 1px solid @accent-colour;
border: 1px solid var(--accent-colour);
border-radius: 2px;
margin: 2px;

7
assets/less/changelog/change.less
View file

@ -31,13 +31,17 @@
left: 0;
width: 100%;
height: 100%;
mask-image: linear-gradient(270deg, transparent 10%, @background-colour 100%);
mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
-webkit-mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
background: @background-pattern;
background-color: @accent-colour;
background: var(--background-pattern);
background-color: var(--accent-colour);
background-blend-mode: multiply;
@media (max-width: @site-mobile-width) {
mask-image: linear-gradient(0deg, transparent 10%, @background-colour 100%);
mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
-webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
}
@ -137,12 +141,15 @@
}
&__tag {
border: 1px solid @accent-colour;
background-color: @accent-colour;
border: 1px solid var(--accent-colour);
background-color: var(--accent-colour);
margin: 1px;
border-radius: 2px;
&__link {
background-color: @background-colour-translucent-9;
background-color: var(--background-colour-translucent-9);
display: block;
width: 100%;

3
assets/less/changelog/entry.less
View file

@ -15,6 +15,8 @@
&__action {
--action-colour: inherit;
background-color: @accent-colour;
color: @user-colour;
background-color: var(--action-colour);
color: var(--user-colour);
flex: 0 0 auto;
@ -89,6 +91,7 @@
}
&__tag {
border: 1px solid @accent-colour;
border: 1px solid var(--accent-colour);
margin-right: 1px;
border-radius: 2px;

1
assets/less/changelog/listing.less
View file

@ -8,6 +8,7 @@
display: block;
text-decoration: none;
padding: 1px 3px;
color: @accent-colour;
color: var(--accent-colour);
font-size: 1.2em;
line-height: 1.5em;

4
assets/less/changelog/log.less
View file

@ -1,6 +1,8 @@
.changelog__log {
--action-colour: var(--accent-colour);
border: 1px solid @accent-colour;
background-color: @accent-colour;
border: 1px solid var(--action-colour);
background-color: var(--action-colour);
display: flex;
@ -11,6 +13,8 @@
&__action {
display: block;
padding: 6px 2px;
background-color: @accent-colour;
border-right: 1px solid @accent-colour;
background-color: var(--action-colour);
border-right: 1px solid var(--action-colour);
writing-mode: sideways-lr;

2
assets/less/comment.less
View file

@ -28,6 +28,7 @@
}
&__mention {
color: @user-colour;
color: var(--user-colour);
text-decoration: none;
font-weight: 700;
@ -135,6 +136,7 @@
}
&__user {
color: @user-colour;
color: var(--user-colour);
text-decoration: none;

3
assets/less/comments.less
View file

@ -8,6 +8,7 @@
&--limit {
--comments-max-height: 600px;
max-height: 600px;
max-height: var(--comments-max-height);
}
}
@ -15,6 +16,7 @@
//&__input,
&__javascript,
&__notice--staff {
border-bottom: 1px solid @accent-colour;
border-bottom: 1px solid var(--accent-colour);
padding-bottom: 1px;
margin-bottom: 1px;
@ -29,6 +31,7 @@
}
&__notice__link {
color: @accent-colour;
color: var(--accent-colour);
text-decoration: none;

8
assets/less/container.less
View file

@ -1,6 +1,7 @@
.container {
background-color: @container-colour;
background-color: var(--container-colour);
box-shadow: 0 1px 2px #000A;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 4px #000;
overflow: hidden;
word-wrap: break-word;
@ -25,6 +26,7 @@
text-decoration: none;
&:hover {
color: @accent-colour;
color: var(--accent-colour);
}
}
@ -35,9 +37,13 @@
left: 0;
width: 100%;
height: 100%;
mask-image: linear-gradient(0deg, transparent 10%, @background-colour 100%);
-webkit-mask-image: linear-gradient(0deg, transparent 10%, @background-colour 100%);
mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
-webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
background: @background-pattern;
background: var(--background-pattern);
background-color: @accent-colour;
background-color: var(--accent-colour);
background-blend-mode: multiply;
}

5
assets/less/footer.less
View file

@ -11,6 +11,7 @@
}
&__wrapper {
max-width: @site-max-width;
max-width: var(--site-max-width);
margin: 0 auto;
text-align: center;
@ -25,9 +26,13 @@
left: 0;
width: 100%;
height: 100%;
mask-image: linear-gradient(180deg, transparent 10%, @background-colour 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 10%, @background-colour 100%);
mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
background: @background-pattern;
background: var(--background-pattern);
background-color: @header-accent-colour;
background-color: var(--header-accent-colour);
background-blend-mode: multiply;
}

4
assets/less/forum/category.less
View file

@ -58,6 +58,7 @@
padding-bottom: 1px; // fixes centering
&--unread {
background-color: @accent-colour;
background-color: var(--accent-colour);
}
}
@ -91,6 +92,7 @@
&__subforum {
padding: 2px;
pointer-events: initial;
color: @accent-colour;
color: var(--accent-colour);
text-decoration: none;
@ -173,6 +175,7 @@
}
&__post {
color: @accent-colour;
color: var(--accent-colour);
text-decoration: none;
pointer-events: initial;
@ -200,6 +203,7 @@
}
&__username {
color: @user-colour;
color: var(--user-colour);
text-decoration: none;
pointer-events: initial;

3
assets/less/forum/header.less
View file

@ -40,6 +40,7 @@
}
&__breadcrumb {
color: @accent-colour;
color: var(--accent-colour);
text-decoration: none;
padding: 2px 5px;
@ -49,6 +50,7 @@
}
&__separator {
color: @accent-colour;
color: var(--accent-colour);
margin: 0 4px;
font-size: .9em;
@ -67,6 +69,7 @@
&:hover,
&:focus {
color: @accent-colour;
color: var(--accent-colour);
}

2
assets/less/forum/poll.less
View file

@ -58,6 +58,7 @@
overflow: hidden;
border-radius: 5px;
margin: 4px 0;
border: 1px solid @accent-colour;
border: 1px solid var(--accent-colour);
width: 100%;
@ -66,6 +67,7 @@
top: 0;
left: 0;
height: 100%;
background: @accent-colour;
background: var(--accent-colour);
opacity: .2;
}

7
assets/less/forum/post.less
View file

@ -97,13 +97,17 @@
left: 0;
width: 100%;
height: 100%;
mask-image: linear-gradient(270deg, transparent 10%, @background-colour 100%);
mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
-webkit-mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
background: @background-pattern;
background-color: @accent-colour;
background: var(--background-pattern);
background-color: var(--accent-colour);
background-blend-mode: multiply;
@media (max-width: @site-mobile-width) {
mask-image: linear-gradient(0deg, transparent 10%, @background-colour 100%);
mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
-webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
}
@ -215,7 +219,7 @@
cursor: pointer;
&:hover {
background-color: #fff2;
background-color: rgba(0, 0, 0, .2);
}
}
@ -231,6 +235,7 @@
}
&__badge {
background-color: @accent-colour;
background-color: var(--accent-colour);
border-radius: 12px;
width: 100%;

1
assets/less/forum/priority.less
View file

@ -21,6 +21,7 @@
margin-right: -.9em;
opacity: .6;
text-shadow: 0 1px 1px #000;
color: @user-colour;
color: var(--user-colour);
transition: text-shadow .2s;

3
assets/less/forum/status.less
View file

@ -20,8 +20,11 @@
left: 0;
width: 100%;
height: 100%;
mask-image: linear-gradient(270deg, transparent 10%, @background-colour 100%);
mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
-webkit-mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
background: @background-pattern;
background-color: @accent-colour;
background: var(--background-pattern);
background-color: var(--accent-colour);
background-blend-mode: multiply;

3
assets/less/forum/topic.less
View file

@ -78,6 +78,7 @@
}
&--unread {
background-color: @accent-colour;
background-color: var(--accent-colour);
}
@ -198,6 +199,7 @@
}
&__post {
color: @accent-colour;
color: var(--accent-colour);
text-decoration: none;
pointer-events: initial;
@ -213,6 +215,7 @@
}
&__username {
color: @user-colour;
color: var(--user-colour);
text-decoration: none;
pointer-events: initial;

36
assets/less/header.less
View file

@ -1,6 +1,11 @@
@header-image-px: 60px;
@header-link-margin: 14px;
@header-icon-px: 40px;
.header {
--header-image-px: 60px;
--header-link-margin: 14px;
--header-image-px: @header-image-px;
--header-link-margin: @header-link-margin;
--header-background-mask-image: linear-gradient(180deg, @background-colour 0, transparent 100%);
--header-background-mask-image: linear-gradient(180deg, var(--background-colour) 0, transparent 100%);
flex: 0 0 auto;
@ -11,6 +16,8 @@
left: 0;
width: 100%;
height: 100%;
background: @background-pattern;
background-color: @header-accent-colour;
background: var(--background-pattern);
background-color: var(--header-accent-colour);
background-blend-mode: multiply;
@ -23,6 +30,8 @@
display: flex;
align-items: flex-start;
padding: 4px;
max-width: @site-max-width;
height: @header-height-desktop;
max-width: var(--site-max-width);
height: var(--header-height-desktop);
@ -37,6 +46,9 @@
cursor: pointer;
display: block;
background: no-repeat center / cover;
background-image: @site-logo;
width: @header-image-px;
height: @header-image-px;
background-image: var(--site-logo);
width: var(--header-image-px);
height: var(--header-image-px);
@ -74,6 +86,7 @@
margin: 0 5px;
&__link {
margin: @header-link-margin 0;
margin: var(--header-link-margin) 0;
font-size: 1.2em;
padding: 6px 10px;
@ -89,13 +102,14 @@
transition: max-height .2s;
left: -5px;
top: 50px;
box-shadow: 0 1px 2px #000A;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
&__link {
margin: 5px;
}
&__background {
background: @header-accent-colour;
background: var(--header-accent-colour);
position: absolute;
top: 0;
@ -105,6 +119,7 @@
}
&__content {
background: @background-colour-translucent-9;
background: var(--background-colour-translucent-9);
overflow: hidden;
}
@ -124,6 +139,8 @@
margin-left: auto;
&__avatar {
width: @header-image-px;
height: @header-image-px;
width: var(--header-image-px);
height: var(--header-image-px);
margin-left: 5px;
@ -133,6 +150,7 @@
&:hover,
&:focus,
&:active {
box-shadow: inset 0 0 0 1px @user-colour, 0 0 4px #111;
box-shadow: inset 0 0 0 1px var(--user-colour), 0 0 4px #111;
}
}
@ -163,6 +181,7 @@
bottom: 1px;
right: 1px;
font-size: 10px;
background-color: @header-accent-colour;
background-color: var(--header-accent-colour);
opacity: .9;
border-radius: 4px;
@ -174,7 +193,7 @@
}
&__mobile {
--header-icon-px: 40px;
--header-icon-px: @header-icon-px;
display: block;
@media (min-width: @site-mobile-width) {
@ -184,6 +203,7 @@
&__icons {
display: flex;
justify-content: space-between;
height: @header-height-mobile;
height: var(--header-height-mobile);
padding: 5px;
z-index: 100;
@ -200,6 +220,8 @@
flex: 0 0 auto;
cursor: pointer;
font-size: 32px;
width: @header-icon-px;
height: @header-icon-px;
width: var(--header-icon-px);
height: var(--header-icon-px);
display: flex;
@ -218,6 +240,7 @@
color: inherit;
text-decoration: none;
background: no-repeat center / cover;
background-image: @site-logo;
background-image: var(--site-logo);
font-size: 0;
}
@ -237,16 +260,19 @@
left: 0;
right: 0;
z-index: 99;
background: @background-pattern;
background-color: @header-accent-colour;
background: var(--background-pattern);
background-color: var(--header-accent-colour);
background-blend-mode: multiply;
transition: max-height .2s;
box-shadow: 0 1px 2px #000A;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 4px #000;
max-height: 0;
overflow: hidden;
&__spacer {
height: @header-height-mobile;
height: var(--header-height-mobile);
}
}

3
assets/less/input/button.less
View file

@ -1,4 +1,5 @@
.input__button {
background-color: @background-colour;
background-color: var(--background-colour);
font-family: @mio-font-regular;
font-size: 1.2em;
@ -23,6 +24,8 @@
&:checked,
&--checked {
color: #111;
background-color: @accent-colour;
border-color: @accent-colour;
background-color: var(--accent-colour);
border-color: var(--accent-colour);
}

2
assets/less/input/checkbox.less
View file

@ -31,6 +31,7 @@
transition: border-color .2s;
&__icon {
background-color: @accent-colour;
background-color: var(--accent-colour);
background-size: 28px 28px;
background-image: radial-gradient(ellipse at center, fade(#fff, 20%) 0%, fade(#000, 40%) 100%);
@ -50,6 +51,7 @@
&:not(&--disabled):hover &__display,
&:not(&--disabled) &__input:focus ~ &__display {
border-color: @accent-colour;
border-color: var(--accent-colour);
}

1
assets/less/input/colour.less
View file

@ -12,6 +12,7 @@
&:hover,
&:focus,
&:focus-within {
border-color: @accent-colour;
border-color: var(--accent-colour);
}

1
assets/less/input/select.less
View file

@ -10,6 +10,7 @@
transition: border-color .2s;
&:focus {
border-color: @accent-colour;
border-color: var(--accent-colour);
}
}

1
assets/less/input/text.less
View file

@ -9,6 +9,7 @@
transition: border-color .2s;
&:focus {
border-color: @accent-colour;
border-color: var(--accent-colour);
}

1
assets/less/input/textarea.less
View file

@ -11,6 +11,7 @@
transition: border-color .2s;
&:focus {
border-color: @accent-colour;
border-color: var(--accent-colour);
}
}

1
assets/less/input/upload.less
View file

@ -26,6 +26,7 @@
&:focus-within &__selection,
&__input:focus ~ &__selection,
&__input:active ~ &__selection {
border-color: @accent-colour;
border-color: var(--accent-colour);
}
}

4
assets/less/landing.less
View file

@ -31,6 +31,7 @@
}
&__link {
color: @user-colour;
color: var(--user-colour);
text-decoration: none;
@ -47,6 +48,7 @@
margin: 6px;
&__user {
color: @user-colour;
color: var(--user-colour);
text-decoration: none;
font-size: 0;
@ -56,6 +58,7 @@
transition: box-shadow .2s;
&:hover {
box-shadow: 0 0 2px @user-colour;
box-shadow: 0 0 2px var(--user-colour);
}
}
@ -115,6 +118,7 @@
&__username {
font-size: 1.5em;
line-height: 1.4em;
color: @user-colour;
color: var(--user-colour);
}

1
assets/less/link.less
View file

@ -1,4 +1,5 @@
.link {
color: @accent-colour;
color: var(--accent-colour);
text-decoration: none;

99
assets/less/main.less
View file

@ -4,61 +4,66 @@
@font-size: 12px;
@line-height: 20px;
@site-max-width: 1200px;
@site-logo: url('/images/logos/imouto-default.png');
@header-height-desktop: 70px;
@header-height-mobile: 50px;
@background-image: initial;
@background-colour: #111;
@background-colour-translucent-1: fade(@background-colour, 10%);
@background-colour-translucent-2: fade(@background-colour, 20%);
@background-colour-translucent-3: fade(@background-colour, 30%);
@background-colour-translucent-4: fade(@background-colour, 40%);
@background-colour-translucent-5: fade(@background-colour, 50%);
@background-colour-translucent-6: fade(@background-colour, 60%);
@background-colour-translucent-7: fade(@background-colour, 70%);
@background-colour-translucent-8: fade(@background-colour, 80%);
@background-colour-translucent-9: fade(@background-colour, 90%);
@background-pattern: url('/images/clouds.png') fixed;
@container-colour: #161616;
@text-colour: #fff;
@text-colour-inverted: #000;
@user-colour: inherit;
@user-header: url('/images/pixel.png');
@accent-colour: #8559a5;
@header-accent-colour: #8559a5;
:root {
--site-max-width: 1200px;
--site-logo: url('/images/logos/imouto-default.png');
--site-max-width: @site-max-width;
--site-logo: @site-logo;
--header-height-desktop: 70px;
--header-height-mobile: 50px;
--header-height-desktop: @header-height-desktop;
--header-height-mobile: @header-height-mobile;
--background-image: initial;
@background-colour: #111;
--background-image: @background-image;
--background-colour: @background-colour;
--background-colour-translucent-1: fade(@background-colour, 10%);
--background-colour-translucent-2: fade(@background-colour, 20%);
--background-colour-translucent-3: fade(@background-colour, 30%);
--background-colour-translucent-4: fade(@background-colour, 40%);
--background-colour-translucent-5: fade(@background-colour, 50%);
--background-colour-translucent-6: fade(@background-colour, 60%);
--background-colour-translucent-7: fade(@background-colour, 70%);
--background-colour-translucent-8: fade(@background-colour, 80%);
--background-colour-translucent-9: fade(@background-colour, 90%);
--background-pattern: url('/images/clouds.png') fixed;
--background-colour-translucent-1: @background-colour-translucent-1;
--background-colour-translucent-2: @background-colour-translucent-2;
--background-colour-translucent-3: @background-colour-translucent-3;
--background-colour-translucent-4: @background-colour-translucent-4;
--background-colour-translucent-5: @background-colour-translucent-5;
--background-colour-translucent-6: @background-colour-translucent-6;
--background-colour-translucent-7: @background-colour-translucent-7;
--background-colour-translucent-8: @background-colour-translucent-8;
--background-colour-translucent-9: @background-colour-translucent-9;
--background-pattern: @background-pattern;
@container-colour: #161616;
--container-colour: @container-colour;
--text-colour: #fff;
--text-colour-inverted: #000;
--text-colour: @text-colour;
--text-colour-inverted: @text-colour-inverted;
--user-colour: inherit;
--user-header: url('/images/pixel.png');
--accent-colour: #8559a5;
--user-colour: @user-colour;
--user-header: @user-header;
--accent-colour: @accent-colour;
--header-accent-colour: var(--accent-colour);
}
.light-theme {
@background-colour-light: #eee;
--background-colour: @background-colour-light;
--background-colour-translucent-1: fade(@background-colour-light, 10%);
--background-colour-translucent-2: fade(@background-colour-light, 20%);
--background-colour-translucent-3: fade(@background-colour-light, 30%);
--background-colour-translucent-4: fade(@background-colour-light, 40%);
--background-colour-translucent-5: fade(@background-colour-light, 50%);
--background-colour-translucent-6: fade(@background-colour-light, 60%);
--background-colour-translucent-7: fade(@background-colour-light, 70%);
--background-colour-translucent-8: fade(@background-colour-light, 80%);
--background-colour-translucent-9: fade(@background-colour-light, 90%);
--background-pattern: url('/images/clouds-inverse.png') fixed;
@container-colour-light: #e9e9e9;
--container-colour: @container-colour-light;
--text-colour: #000;
--text-colour-inverted: #fff;
}
* {
margin: 0;
padding: 0;
@ -74,20 +79,25 @@ body {
}
html {
scrollbar-color: @accent-colour @background-colour;
scrollbar-color: var(--accent-colour) var(--background-colour);
}
.main {
display: flex;
flex-direction: column;
background-image: @background-image;
background-image: var(--background-image);
background-color: @background-colour;
background-color: var(--background-colour);
font: @font-size/@line-height @mio-font-regular;
color: @text-colour;
color: var(--text-colour);
background-attachment: fixed;
background-position: center center;
&__wrapper {
max-width: @site-max-width;
max-width: var(--site-max-width);
width: 100%;
margin: 0 auto;
@ -95,6 +105,7 @@ html {
}
&--bg-blend {
background-color: @accent-colour;
background-color: var(--accent-colour);
background-blend-mode: multiply;
}

1
assets/less/manage/emotes.less
View file

@ -21,6 +21,7 @@
text-align: center;
&--header {
border-bottom: 1px solid @accent-colour;
border-bottom: 1px solid var(--accent-colour);
padding-bottom: 2px;
}

1
assets/less/manage/manage.less
View file

@ -21,6 +21,7 @@
&__description {
font-size: .9em;
margin: 1px 2px;
border-bottom: 1px solid @accent-colour;
border-bottom: 1px solid var(--accent-colour);
padding: 2px 5px;
}

7
assets/less/manage/role-item.less
View file

@ -14,6 +14,7 @@
left: 0;
width: 100%;
height: 100%;
background-color: @accent-colour;
background-color: var(--accent-colour);
}
@ -21,6 +22,7 @@
display: flex;
flex-wrap: wrap;
align-items: center;
background-color: @background-colour-translucent-9;
background-color: var(--background-colour-translucent-9);
width: 100%;
height: 100%;
@ -32,6 +34,7 @@
&:hover &__container,
&:focus &__container,
&:focus-within &__container {
background-color: @background-colour-translucent-8;
background-color: var(--background-colour-translucent-8);
}
@ -45,6 +48,7 @@
overflow: hidden;
&__content {
background-color: @background-colour-translucent-6;
background-color: var(--background-colour-translucent-6);
display: inline-flex;
align-items: center;
@ -61,6 +65,7 @@
left: 0;
width: 100%;
height: 100%;
background-color: @accent-colour;
background-color: var(--accent-colour);
}
}
@ -68,6 +73,7 @@
&:hover &__icon__content,
&:focus &__icon__content,
&:focus-within &__icon__content {
background-color: @background-colour-translucent-4;
background-color: var(--background-colour-translucent-4);
}
@ -92,6 +98,7 @@
&__users {
border-radius: 10px;
background-color: @accent-colour;
background-color: var(--accent-colour);
box-shadow: 0 1px 4px #111;
padding: 2px 5px;

1
assets/less/manage/statistic.less
View file

@ -1,4 +1,5 @@
.manage__statistic {
border: 1px solid @accent-colour;
border: 1px solid var(--accent-colour);
border-radius: 2px;
padding: 2px 5px;

4
assets/less/manage/tag.less
View file

@ -1,5 +1,7 @@
.manage__tag {
border-radius: 2px;
border: 1px solid @accent-colour;
background-color: @accent-colour;
border: 1px solid var(--accent-colour);
background-color: var(--accent-colour);
display: inline-block;
@ -10,6 +12,7 @@
left: 0;
width: 100%;
height: 100%;
background-color: @background-colour-translucent-9;
background-color: var(--background-colour-translucent-9);
transition: background-color .2s;
}
@ -17,6 +20,7 @@
&:hover &__background,
&:focus &__background,
&:focus-within &__background {
background-color: @background-colour-translucent-8;
background-color: var(--background-colour-translucent-8);
}

4
assets/less/manage/user-item.less
View file

@ -25,6 +25,7 @@
left: 0;
width: 100%;
height: 100%;
background-color: @accent-colour;
background-color: var(--accent-colour);
}
@ -32,6 +33,7 @@
display: flex;
flex-wrap: wrap;
align-items: center;
background-color: @background-colour-translucent-9;
background-color: var(--background-colour-translucent-9);
width: 100%;
height: 100%;
@ -43,6 +45,7 @@
&:hover &__container,
&:focus &__container,
&:focus-within &__container {
background-color: @background-colour-translucent-8;
background-color: var(--background-colour-translucent-8);
}
@ -74,6 +77,7 @@
&__detail {
border-radius: 10px;
background-color: @accent-colour;
background-color: var(--accent-colour);
box-shadow: 0 1px 4px #111;
padding: 3px 8px;

13
assets/less/markdown.less
View file

@ -25,6 +25,7 @@
height: 2px;
padding: 0;
margin: @font-size 0;
background-color: @accent-colour;
background-color: var(--accent-colour);
border: 0;
}
@ -32,6 +33,7 @@
blockquote {
padding: 0 1em;
color: var(--accent-colour);
border-left: 0.25em solid @accent-colour;
border-left: 0.25em solid var(--accent-colour);
> :first-child {
@ -108,12 +110,14 @@
h1 {
padding-bottom: 0.3em;
font-size: 2em;
border-bottom: 1px solid @accent-colour;
border-bottom: 1px solid var(--accent-colour);
}
h2 {
padding-bottom: 0.3em;
font-size: 1.5em;
border-bottom: 1px solid @accent-colour;
border-bottom: 1px solid var(--accent-colour);
}
@ -131,12 +135,14 @@
h6 {
font-size: 0.85em;
color: @accent-colour;
color: var(--accent-colour);
}
img {
box-sizing: content-box;
background-color: var(--background-color);
background-color: @background-colour;
background-color: var(--background-colour);
max-width: 100%;
max-height: 100%;
@ -203,14 +209,19 @@
th,
td {
padding: 6px 13px;
border: 1px solid @accent-colour;
border: 1px solid var(--accent-colour);
}
tr {
background-color: @background-colour;
border-top: 1px solid @accent-colour;
background-color: var(--background-colour);
border-top: 1px solid var(--accent-colour);
&:nth-child(2n) {
background-image: linear-gradient(0deg, @background-colour-translucent-9, @background-colour-translucent-9);
background-color: @accent-colour;
background-image: linear-gradient(0deg, var(--background-colour-translucent-9), var(--background-colour-translucent-9));
background-color: var(--accent-colour);
}

1
assets/less/messagebox.less
View file

@ -7,6 +7,7 @@
display: flex;
justify-content: center;
align-items: center;
background-color: @background-colour-translucent-8;
background-color: var(--background-colour-translucent-8);
z-index: 9000;

5
assets/less/navigation.less
View file

@ -5,6 +5,7 @@
width: 100%;
display: flex;
border-width: 0;
border-color: @text-colour;
border-color: var(--text-colour);
border-style: solid;
border-top-width: 1px;
@ -49,11 +50,13 @@
&__option {
list-style: none;
background-color: #c9bbcc;
border: 1px solid @text-colour;
border: 1px solid var(--text-colour);
border-top-width: 0;
flex-grow: 0;
@media (max-width: @mio-navigation-mobile) {
background-color: @accent-colour;
background-color: var(--accent-colour);
width: 100%;
border: none;
@ -66,6 +69,7 @@
}
&--selected {
background-color: @accent-colour;
background-color: var(--accent-colour);
top: -1px;
@ -90,6 +94,7 @@
&__link {
display: block;
padding: 2px 1em;
color: @text-colour;
color: var(--text-colour);
text-decoration: none;

4
assets/less/news/post.less
View file

@ -31,13 +31,17 @@
left: 0;
width: 100%;
height: 100%;
mask-image: linear-gradient(90deg, transparent 10%, @background-colour 100%);
mask-image: linear-gradient(90deg, transparent 10%, var(--background-colour) 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 10%, var(--background-colour) 100%);
background: @background-pattern;
background-color: @accent-colour;
background: var(--background-pattern);
background-color: var(--accent-colour);
background-blend-mode: multiply;
@media (max-width: @site-mobile-width) {
mask-image: linear-gradient(180deg, transparent 10%, @background-colour 100%);
mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
}

2
assets/less/news/preview.less
View file

@ -33,6 +33,7 @@
left: 0;
width: 100%;
height: 100%;
mask-image: linear-gradient(90deg, transparent 10%, @background-colour 100%);
mask-image: linear-gradient(90deg, transparent 10%, var(--background-colour) 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 10%, var(--background-colour) 100%);
background: var(--background-pattern);
@ -40,6 +41,7 @@
background-blend-mode: multiply;
@media (max-width: @site-mobile-width) {
mask-image: linear-gradient(180deg, transparent 10%, @background-colour 100%);
mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
}

6
assets/less/pagination.less
View file

@ -10,6 +10,7 @@
overflow: auto;
flex: 0 0 auto;
scrollbar-width: thin;
scrollbar-color: @accent-colour @background-colour;
scrollbar-color: var(--accent-colour) var(--background-colour);
&--pages {
@ -33,6 +34,9 @@
padding: 3px 10px 4px;
text-align: center;
text-decoration: none;
background-color: @background-colour;
color: @accent-colour;
border: 1px solid @accent-colour;
background-color: var(--background-colour);
color: var(--accent-colour);
border: 1px solid var(--accent-colour);
@ -62,6 +66,8 @@
&:not(&--disabled):hover,
&:not(&--disabled):active,
&:not(&--disabled):focus {
background-color: @accent-colour;
color: @accent-colour;
background-color: var(--accent-colour);
color: var(--background-colour);
}

1
assets/less/profile/guidelines.less
View file

@ -21,6 +21,7 @@
line-height: 1.5em;
font-weight: 700;
margin-bottom: 2px;
border-bottom: 1px solid @accent-colour;
border-bottom: 1px solid var(--accent-colour);
padding-bottom: 2px;
}

14
assets/less/profile/header.less
View file

@ -3,9 +3,12 @@
flex-direction: column;
margin-bottom: 2px;
color: #fff;
background-color: @background-colour;
background-color: var(--background-colour);
--profile-header-overlay-start: transparent;
@profile-header-overlay-start: transparent;
--profile-header-overlay-start: @profile-header-overlay-start;
@profile-header-overlay-stop: @background-colour-translucent-9;
--profile-header-overlay-stop: var(--background-colour-translucent-9);
@media (max-width: @site-mobile-width) {
@ -20,6 +23,7 @@
left: 0;
width: 100%;
height: 100%;
background: @accent-colour @background-pattern;
background: var(--accent-colour) var(--background-pattern);
background-blend-mode: multiply;
}
@ -29,6 +33,7 @@
}
&--has-header &__background {
background: @user-header center / cover no-repeat;
background: var(--user-header) center / cover no-repeat;
background-blend-mode: unset;
}
@ -57,6 +62,8 @@
&__check:checked ~ &__option {
color: #111;
background-color: @accent-colour;
border-color: @accent-colour;
background-color: var(--accent-colour);
border-color: var(--accent-colour);
}
@ -84,6 +91,7 @@
display: flex;
align-items: flex-end;
padding: 20px;
background-image: linear-gradient(0deg, @profile-header-overlay-stop, @profile-header-overlay-start);
background-image: linear-gradient(0deg, var(--profile-header-overlay-stop), var(--profile-header-overlay-start));
&__content {
@ -97,6 +105,7 @@
&__relation {
font-variant: all-small-caps;
background: @profile-header-overlay-stop;
background: var(--profile-header-overlay-stop);
border-radius: 2px;
line-height: 1.2em;
@ -112,6 +121,7 @@
&__options {
min-height: 62px;
background-color: @profile-header-overlay-stop;
background-color: var(--profile-header-overlay-stop);
padding: 0 20px;
display: flex;
@ -192,11 +202,13 @@
&--link:focus,
&--link:active,
&--active {
border-bottom: 2px solid @accent-colour;
border-bottom: 2px solid var(--accent-colour);
}
}
&__username {
color: @user-colour;
color: var(--user-colour);
font-size: 2em;
line-height: 1.5em;

5
assets/less/profile/warning.less
View file

@ -1,6 +1,7 @@
.profile__warning {
margin: 2px;
border-radius: 2px;
border: 1px solid @accent-colour;
border: 1px solid var(--accent-colour);
&__container {
@ -24,6 +25,7 @@
}
&__background {
background-color: @accent-colour;
background-color: var(--accent-colour);
position: absolute;
top: 0;
@ -33,6 +35,7 @@
}
&__content {
background-color: @background-colour-translucent-9;
background-color: var(--background-colour-translucent-9);
display: flex;
padding: 1px;
@ -52,6 +55,7 @@
&__type {
min-width: 80px;
background-color: @accent-colour;
background-color: var(--accent-colour);
border-radius: 1px;
padding: 0 4px;
@ -69,6 +73,7 @@
}
&__private {
border-top: 1px solid @accent-colour;
border-top: 1px solid var(--accent-colour);
margin-top: 1px;
width: 100%;

4
assets/less/search/category.less
View file

@ -2,6 +2,7 @@
display: block;
color: inherit;
text-decoration: none;
background-color: @accent-colour;
background-color: var(--accent-colour);
box-shadow: 0 1px 2px #000A;
text-shadow: 0 1px 4px #000;
@ -12,6 +13,7 @@
margin: 1px 1px 1px 0;
&__background {
background-color: @background-colour-translucent-9;
background-color: var(--background-colour-translucent-9);
position: absolute;
top: 0;
@ -23,10 +25,12 @@
&:hover &__background,
&:focus &__background {
background-color: @background-colour-translucent-8;
background-color: var(--background-colour-translucent-8);
}
&:active &__background {
background-color: @background-colour-translucent-7;
background-color: var(--background-colour-translucent-7);
}

1
assets/less/search/header.less
View file

@ -3,5 +3,6 @@
position: sticky;
top: 0;
z-index: 50;
background-color: @background-colour;
background-color: var(--background-colour);
}

3
assets/less/search/input.less
View file

@ -1,4 +1,5 @@
.search__input {
background-color: @accent-colour;
background-color: var(--accent-colour);
box-shadow: 0 1px 2px #000A;
text-shadow: 0 1px 4px #000;
@ -8,6 +9,7 @@
font-size: 1.5em;
&__background {
background-color: @background-colour-translucent-9;
background-color: var(--background-colour-translucent-9);
position: absolute;
top: 0;
@ -45,6 +47,7 @@
&:hover,
&:active,
&:focus {
background-color: @accent-colour;
background-color: var(--accent-colour);
}
}

5
assets/less/settings/account-log.less
View file

@ -1,4 +1,5 @@
.settings__account-log {
border: 1px solid @accent-colour;
border: 1px solid var(--accent-colour);
border-radius: 2px;
overflow: hidden;
@ -44,6 +45,7 @@
transition: color .2s;
&:hover {
color: @accent-colour;
color: var(--accent-colour);
}
}
@ -62,6 +64,7 @@
min-width: 120px;
&__title {
border-bottom: 1px solid @accent-colour;
border-bottom: 1px solid var(--accent-colour);
font-weight: 700;
padding: 1px 5px;
@ -77,6 +80,7 @@
text-decoration: none;
display: flex;
padding: 4px;
border-bottom: 1px solid @accent-colour;
border-bottom: 1px solid var(--accent-colour);
margin-bottom: -2px;
@ -86,6 +90,7 @@
}
&__name {
color: @user-colour;
color: var(--user-colour);
padding-left: 4px;
}

1
assets/less/settings/description.less
View file

@ -1,6 +1,7 @@
.settings__description {
font-size: .9em;
padding: 2px 5px;
border-bottom: 1px solid @accent-colour;
border-bottom: 1px solid var(--accent-colour);
margin: 1px 1px 2px;
}

4
assets/less/settings/login-attempt.less
View file

@ -1,4 +1,5 @@
.settings__login-attempt {
border: 1px solid @accent-colour;
border: 1px solid var(--accent-colour);
border-radius: 2px;
overflow: hidden;
@ -6,6 +7,7 @@
&--failed {
--accent-colour: #a00;
background-color: @accent-colour;
background-color: var(--accent-colour);
}
@ -53,6 +55,7 @@
transition: color .2s;
&:hover {
color: @accent-colour;
color: var(--accent-colour);
}
}
@ -71,6 +74,7 @@
min-width: 120px;
&__title {
border-bottom: 1px solid @accent-colour;
border-bottom: 1px solid var(--accent-colour);
font-weight: 700;
padding: 1px 5px;

5
assets/less/settings/role.less
View file

@ -1,4 +1,6 @@
.settings__role {
border: 1px solid @accent-colour;
background-color: @accent-colour;
border: 1px solid var(--accent-colour);
background-color: var(--accent-colour);
border-radius: 2px;
@ -14,6 +16,7 @@
}
&__content {
background-color: @background-colour-translucent-9;
background-color: var(--background-colour-translucent-9);
width: 100%;
height: 100%;
@ -24,6 +27,7 @@
&__name {
font-size: 1.2em;
line-height: 1.7em;
border-bottom: 1px solid @accent-colour;
border-bottom: 1px solid var(--accent-colour);
padding: 0 5px;
}
@ -55,6 +59,7 @@
height: 40px;
&:not(&--disabled):hover {
color: @accent-colour;
color: var(--accent-colour);
cursor: pointer;
}

4
assets/less/settings/session.less
View file

@ -1,10 +1,12 @@
.settings__session {
border: 1px solid @accent-colour;
border: 1px solid var(--accent-colour);
border-radius: 2px;
overflow: hidden;
margin: 4px;
&--current {
background-color: @accent-colour;
background-color: var(--accent-colour);
}
@ -52,6 +54,7 @@
transition: color .2s;
&:hover {
color: @accent-colour;
color: var(--accent-colour);
}
}
@ -70,6 +73,7 @@
min-width: 120px;
&__title {
border-bottom: 1px solid @accent-colour;
border-bottom: 1px solid var(--accent-colour);
font-weight: 700;
padding: 1px 5px;

1
assets/less/settings/wrapper.less
View file

@ -34,6 +34,7 @@
transition: background-color .2s;
&:hover {
background-color: @background-colour-translucent-9;
background-color: var(--background-colour-translucent-9);
}

10
assets/less/usercard.less
View file

@ -4,13 +4,16 @@
transition: box-shadow .5s;
z-index: 1;
color: #fff;
background-color: @background-colour;
background-color: var(--background-colour);
box-shadow: 0 1px 2px #000A;
text-shadow: 0 1px 4px #000;
overflow: hidden;
flex: 1 1 auto;
--usercard-header-overlay-start: transparent;
@usercard-header-overlay-start: transparent;
--usercard-header-overlay-start: @usercard-header-overlay-start;
@usercard-header-overlay-stop: @background-colour-translucent-9;
--usercard-header-overlay-stop: var(--background-colour-translucent-9);
&:hover {
@ -24,6 +27,7 @@
left: 0;
width: 100%;
height: 100%;
background: @accent-colour @background-pattern;
background: var(--accent-colour) var(--background-pattern);
background-blend-mode: multiply;
}
@ -49,6 +53,7 @@
display: flex;
align-items: center;
padding: 10px;
background-image: linear-gradient(0deg, @usercard-header-overlay-stop, @usercard-header-overlay-start);
background-image: linear-gradient(0deg, var(--usercard-header-overlay-stop), var(--usercard-header-overlay-start));
pointer-events: none;
}
@ -64,6 +69,7 @@
&__relation {
font-variant: all-small-caps;
background: @usercard-header-overlay-stop;
background: var(--usercard-header-overlay-stop);
border-radius: 2px;
line-height: 1.2em;
@ -95,6 +101,7 @@
&__container {
flex: 1 1 auto;
background-color: @usercard-header-overlay-stop;
background-color: var(--usercard-header-overlay-stop);
display: flex;
flex-direction: column;
@ -150,6 +157,7 @@
&[href]:hover,
&[href]:focus {
border-bottom: 2px solid @accent-colour;
border-bottom: 2px solid var(--accent-colour);
padding-bottom: 3px;
}

2
assets/less/userlist.less
View file

@ -57,6 +57,8 @@
box-shadow: initial;
border-width: 0;
border-radius: 0;
background: @background-colour-translucent-9;
color: @text-colour;
background: var(--background-colour-translucent-9);
color: var(--text-colour);

7
assets/less/warning.less
View file

@ -1,7 +1,10 @@
.warning {
--start-colour: yellow;
--end-colour: black;
@start-colour: yellow;
@end-colour: black;
--start-colour: @start-colour;
--end-colour: @end-colour;
background-image: repeating-linear-gradient(-45deg, @start-colour, @start-colour 10px, @end-colour 10px, @end-colour 20px);
background-image: repeating-linear-gradient(-45deg, var(--start-colour), var(--start-colour) 10px, var(--end-colour) 10px, var(--end-colour) 20px);
box-shadow: 0 1px 4px #111;
margin: 2px 0;