From 867e358d28d50b9bbfa6aa71d4ed4602a1db2b17 Mon Sep 17 00:00:00 2001 From: flashwave Date: Tue, 13 Aug 2019 04:42:12 +0200 Subject: [PATCH] Better support for browsers without CSS variables. --- assets/less/animations.less | 1 + assets/less/avatar.less | 1 + assets/less/changelog-actions-tags.less | 2 + assets/less/changelog/change.less | 7 ++ assets/less/changelog/entry.less | 3 + assets/less/changelog/listing.less | 1 + assets/less/changelog/log.less | 4 + assets/less/comment.less | 2 + assets/less/comments.less | 3 + assets/less/container.less | 8 +- assets/less/footer.less | 5 ++ assets/less/forum/category.less | 4 + assets/less/forum/header.less | 3 + assets/less/forum/poll.less | 2 + assets/less/forum/post.less | 7 +- assets/less/forum/priority.less | 1 + assets/less/forum/status.less | 3 + assets/less/forum/topic.less | 3 + assets/less/header.less | 36 +++++++-- assets/less/input/button.less | 3 + assets/less/input/checkbox.less | 2 + assets/less/input/colour.less | 1 + assets/less/input/select.less | 1 + assets/less/input/text.less | 1 + assets/less/input/textarea.less | 1 + assets/less/input/upload.less | 1 + assets/less/landing.less | 4 + assets/less/link.less | 1 + assets/less/main.less | 99 ++++++++++++++----------- assets/less/manage/emotes.less | 1 + assets/less/manage/manage.less | 1 + assets/less/manage/role-item.less | 7 ++ assets/less/manage/statistic.less | 1 + assets/less/manage/tag.less | 4 + assets/less/manage/user-item.less | 4 + assets/less/markdown.less | 13 +++- assets/less/messagebox.less | 1 + assets/less/navigation.less | 5 ++ assets/less/news/post.less | 4 + assets/less/news/preview.less | 2 + assets/less/pagination.less | 6 ++ assets/less/profile/guidelines.less | 1 + assets/less/profile/header.less | 14 +++- assets/less/profile/warning.less | 5 ++ assets/less/search/category.less | 4 + assets/less/search/header.less | 1 + assets/less/search/input.less | 3 + assets/less/settings/account-log.less | 5 ++ assets/less/settings/description.less | 1 + assets/less/settings/login-attempt.less | 4 + assets/less/settings/role.less | 5 ++ assets/less/settings/session.less | 4 + assets/less/settings/wrapper.less | 1 + assets/less/usercard.less | 10 ++- assets/less/userlist.less | 2 + assets/less/warning.less | 7 +- 56 files changed, 270 insertions(+), 56 deletions(-) diff --git a/assets/less/animations.less b/assets/less/animations.less index 87216d9d..9039faee 100644 --- a/assets/less/animations.less +++ b/assets/less/animations.less @@ -4,6 +4,7 @@ } 100% { + background-position: 100% 100%; background-position: var(--background-width) var(--background-height); } } diff --git a/assets/less/avatar.less b/assets/less/avatar.less index c4b5d889..07ef09e0 100644 --- a/assets/less/avatar.less +++ b/assets/less/avatar.less @@ -1,5 +1,6 @@ .avatar { flex-shrink: 0; + background-color: @background-colour; background-color: var(--background-colour); background-size: cover; background-repeat: no-repeat; diff --git a/assets/less/changelog-actions-tags.less b/assets/less/changelog-actions-tags.less index 8de28591..78753d1b 100644 --- a/assets/less/changelog-actions-tags.less +++ b/assets/less/changelog-actions-tags.less @@ -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; diff --git a/assets/less/changelog/change.less b/assets/less/changelog/change.less index b8e67b83..e7ffc880 100644 --- a/assets/less/changelog/change.less +++ b/assets/less/changelog/change.less @@ -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%; diff --git a/assets/less/changelog/entry.less b/assets/less/changelog/entry.less index a9198995..13689f4f 100644 --- a/assets/less/changelog/entry.less +++ b/assets/less/changelog/entry.less @@ -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; diff --git a/assets/less/changelog/listing.less b/assets/less/changelog/listing.less index bc600647..6cda262b 100644 --- a/assets/less/changelog/listing.less +++ b/assets/less/changelog/listing.less @@ -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; diff --git a/assets/less/changelog/log.less b/assets/less/changelog/log.less index 253a804a..86490178 100644 --- a/assets/less/changelog/log.less +++ b/assets/less/changelog/log.less @@ -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; diff --git a/assets/less/comment.less b/assets/less/comment.less index c5e8fab9..3fa81058 100644 --- a/assets/less/comment.less +++ b/assets/less/comment.less @@ -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; diff --git a/assets/less/comments.less b/assets/less/comments.less index 5499f761..d4c34380 100644 --- a/assets/less/comments.less +++ b/assets/less/comments.less @@ -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; diff --git a/assets/less/container.less b/assets/less/container.less index 1d606e62..f39c3144 100644 --- a/assets/less/container.less +++ b/assets/less/container.less @@ -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; } diff --git a/assets/less/footer.less b/assets/less/footer.less index 0c119237..917e8911 100644 --- a/assets/less/footer.less +++ b/assets/less/footer.less @@ -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; } diff --git a/assets/less/forum/category.less b/assets/less/forum/category.less index 17ef7d01..73d7fd9c 100644 --- a/assets/less/forum/category.less +++ b/assets/less/forum/category.less @@ -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; diff --git a/assets/less/forum/header.less b/assets/less/forum/header.less index 7d41bf34..5ed2189e 100644 --- a/assets/less/forum/header.less +++ b/assets/less/forum/header.less @@ -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); } diff --git a/assets/less/forum/poll.less b/assets/less/forum/poll.less index 880f85ac..72811397 100644 --- a/assets/less/forum/poll.less +++ b/assets/less/forum/poll.less @@ -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; } diff --git a/assets/less/forum/post.less b/assets/less/forum/post.less index 4798cf73..70f1c681 100644 --- a/assets/less/forum/post.less +++ b/assets/less/forum/post.less @@ -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%; diff --git a/assets/less/forum/priority.less b/assets/less/forum/priority.less index 628d636a..06ee608c 100644 --- a/assets/less/forum/priority.less +++ b/assets/less/forum/priority.less @@ -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; diff --git a/assets/less/forum/status.less b/assets/less/forum/status.less index 3e175373..12d5200e 100644 --- a/assets/less/forum/status.less +++ b/assets/less/forum/status.less @@ -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; diff --git a/assets/less/forum/topic.less b/assets/less/forum/topic.less index 5fadca77..efe06914 100644 --- a/assets/less/forum/topic.less +++ b/assets/less/forum/topic.less @@ -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; diff --git a/assets/less/header.less b/assets/less/header.less index 65c25d7c..98ce05f8 100644 --- a/assets/less/header.less +++ b/assets/less/header.less @@ -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); } } diff --git a/assets/less/input/button.less b/assets/less/input/button.less index 4776e4d7..c12793c2 100644 --- a/assets/less/input/button.less +++ b/assets/less/input/button.less @@ -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); } diff --git a/assets/less/input/checkbox.less b/assets/less/input/checkbox.less index 1d094346..54b9202f 100644 --- a/assets/less/input/checkbox.less +++ b/assets/less/input/checkbox.less @@ -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); } diff --git a/assets/less/input/colour.less b/assets/less/input/colour.less index 7ae4f3a0..9b5a47ae 100644 --- a/assets/less/input/colour.less +++ b/assets/less/input/colour.less @@ -12,6 +12,7 @@ &:hover, &:focus, &:focus-within { + border-color: @accent-colour; border-color: var(--accent-colour); } diff --git a/assets/less/input/select.less b/assets/less/input/select.less index 0f04365d..3832d4b1 100644 --- a/assets/less/input/select.less +++ b/assets/less/input/select.less @@ -10,6 +10,7 @@ transition: border-color .2s; &:focus { + border-color: @accent-colour; border-color: var(--accent-colour); } } diff --git a/assets/less/input/text.less b/assets/less/input/text.less index d7f9abcb..a278e79c 100644 --- a/assets/less/input/text.less +++ b/assets/less/input/text.less @@ -9,6 +9,7 @@ transition: border-color .2s; &:focus { + border-color: @accent-colour; border-color: var(--accent-colour); } diff --git a/assets/less/input/textarea.less b/assets/less/input/textarea.less index 5019dd08..190ec4a8 100644 --- a/assets/less/input/textarea.less +++ b/assets/less/input/textarea.less @@ -11,6 +11,7 @@ transition: border-color .2s; &:focus { + border-color: @accent-colour; border-color: var(--accent-colour); } } diff --git a/assets/less/input/upload.less b/assets/less/input/upload.less index 4538ea9f..26e52851 100644 --- a/assets/less/input/upload.less +++ b/assets/less/input/upload.less @@ -26,6 +26,7 @@ &:focus-within &__selection, &__input:focus ~ &__selection, &__input:active ~ &__selection { + border-color: @accent-colour; border-color: var(--accent-colour); } } diff --git a/assets/less/landing.less b/assets/less/landing.less index 88bd35ea..87ed051a 100644 --- a/assets/less/landing.less +++ b/assets/less/landing.less @@ -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); } diff --git a/assets/less/link.less b/assets/less/link.less index 618bb790..7e6f245f 100644 --- a/assets/less/link.less +++ b/assets/less/link.less @@ -1,4 +1,5 @@ .link { + color: @accent-colour; color: var(--accent-colour); text-decoration: none; diff --git a/assets/less/main.less b/assets/less/main.less index 4b200705..ffcab3d3 100644 --- a/assets/less/main.less +++ b/assets/less/main.less @@ -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; } diff --git a/assets/less/manage/emotes.less b/assets/less/manage/emotes.less index f3f131e0..eaef8e0a 100644 --- a/assets/less/manage/emotes.less +++ b/assets/less/manage/emotes.less @@ -21,6 +21,7 @@ text-align: center; &--header { + border-bottom: 1px solid @accent-colour; border-bottom: 1px solid var(--accent-colour); padding-bottom: 2px; } diff --git a/assets/less/manage/manage.less b/assets/less/manage/manage.less index 7257eef4..91e9dd4f 100644 --- a/assets/less/manage/manage.less +++ b/assets/less/manage/manage.less @@ -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; } diff --git a/assets/less/manage/role-item.less b/assets/less/manage/role-item.less index 917ffc91..4059d7c1 100644 --- a/assets/less/manage/role-item.less +++ b/assets/less/manage/role-item.less @@ -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; diff --git a/assets/less/manage/statistic.less b/assets/less/manage/statistic.less index 19e39130..63d13f08 100644 --- a/assets/less/manage/statistic.less +++ b/assets/less/manage/statistic.less @@ -1,4 +1,5 @@ .manage__statistic { + border: 1px solid @accent-colour; border: 1px solid var(--accent-colour); border-radius: 2px; padding: 2px 5px; diff --git a/assets/less/manage/tag.less b/assets/less/manage/tag.less index 4469251c..73209b6c 100644 --- a/assets/less/manage/tag.less +++ b/assets/less/manage/tag.less @@ -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); } diff --git a/assets/less/manage/user-item.less b/assets/less/manage/user-item.less index b1ba2b5b..4abcc79c 100644 --- a/assets/less/manage/user-item.less +++ b/assets/less/manage/user-item.less @@ -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; diff --git a/assets/less/markdown.less b/assets/less/markdown.less index 44434915..bded81c0 100644 --- a/assets/less/markdown.less +++ b/assets/less/markdown.less @@ -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); } diff --git a/assets/less/messagebox.less b/assets/less/messagebox.less index 5e277b6d..c35c4b5f 100644 --- a/assets/less/messagebox.less +++ b/assets/less/messagebox.less @@ -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; diff --git a/assets/less/navigation.less b/assets/less/navigation.less index 1ecfd8d7..28a10e0b 100644 --- a/assets/less/navigation.less +++ b/assets/less/navigation.less @@ -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; diff --git a/assets/less/news/post.less b/assets/less/news/post.less index df504c5b..2f848a78 100644 --- a/assets/less/news/post.less +++ b/assets/less/news/post.less @@ -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%); } diff --git a/assets/less/news/preview.less b/assets/less/news/preview.less index ccd5b27d..eae593c6 100644 --- a/assets/less/news/preview.less +++ b/assets/less/news/preview.less @@ -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%); } diff --git a/assets/less/pagination.less b/assets/less/pagination.less index 2b541e99..c23eda6e 100644 --- a/assets/less/pagination.less +++ b/assets/less/pagination.less @@ -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); } diff --git a/assets/less/profile/guidelines.less b/assets/less/profile/guidelines.less index 79a76497..335c6fe5 100644 --- a/assets/less/profile/guidelines.less +++ b/assets/less/profile/guidelines.less @@ -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; } diff --git a/assets/less/profile/header.less b/assets/less/profile/header.less index 28f0ddc9..e52e1c0f 100644 --- a/assets/less/profile/header.less +++ b/assets/less/profile/header.less @@ -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; diff --git a/assets/less/profile/warning.less b/assets/less/profile/warning.less index 2f6b76de..f76c0427 100644 --- a/assets/less/profile/warning.less +++ b/assets/less/profile/warning.less @@ -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%; diff --git a/assets/less/search/category.less b/assets/less/search/category.less index 4825e22e..36efa2e2 100644 --- a/assets/less/search/category.less +++ b/assets/less/search/category.less @@ -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); } diff --git a/assets/less/search/header.less b/assets/less/search/header.less index 1b0aa8e8..e474e72d 100644 --- a/assets/less/search/header.less +++ b/assets/less/search/header.less @@ -3,5 +3,6 @@ position: sticky; top: 0; z-index: 50; + background-color: @background-colour; background-color: var(--background-colour); } diff --git a/assets/less/search/input.less b/assets/less/search/input.less index 3adb957d..f8674e63 100644 --- a/assets/less/search/input.less +++ b/assets/less/search/input.less @@ -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); } } diff --git a/assets/less/settings/account-log.less b/assets/less/settings/account-log.less index 4914d3ec..74bc9f87 100644 --- a/assets/less/settings/account-log.less +++ b/assets/less/settings/account-log.less @@ -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; } diff --git a/assets/less/settings/description.less b/assets/less/settings/description.less index b611a5e3..21fd1918 100644 --- a/assets/less/settings/description.less +++ b/assets/less/settings/description.less @@ -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; } diff --git a/assets/less/settings/login-attempt.less b/assets/less/settings/login-attempt.less index 2810e51d..d793d1d4 100644 --- a/assets/less/settings/login-attempt.less +++ b/assets/less/settings/login-attempt.less @@ -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; diff --git a/assets/less/settings/role.less b/assets/less/settings/role.less index 7088a078..0871a0be 100644 --- a/assets/less/settings/role.less +++ b/assets/less/settings/role.less @@ -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; } diff --git a/assets/less/settings/session.less b/assets/less/settings/session.less index 48f272af..2d0c781c 100644 --- a/assets/less/settings/session.less +++ b/assets/less/settings/session.less @@ -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; diff --git a/assets/less/settings/wrapper.less b/assets/less/settings/wrapper.less index 9170b430..b5271233 100644 --- a/assets/less/settings/wrapper.less +++ b/assets/less/settings/wrapper.less @@ -34,6 +34,7 @@ transition: background-color .2s; &:hover { + background-color: @background-colour-translucent-9; background-color: var(--background-colour-translucent-9); } diff --git a/assets/less/usercard.less b/assets/less/usercard.less index f29565d9..3d2ddfaf 100644 --- a/assets/less/usercard.less +++ b/assets/less/usercard.less @@ -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; } diff --git a/assets/less/userlist.less b/assets/less/userlist.less index b1a97b94..bdf7643e 100644 --- a/assets/less/userlist.less +++ b/assets/less/userlist.less @@ -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); diff --git a/assets/less/warning.less b/assets/less/warning.less index 12fab2f5..79bfb95e 100644 --- a/assets/less/warning.less +++ b/assets/less/warning.less @@ -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;