FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Define CSS variables for color theme

Browse source
This commit is contained in:
silverpill 2023-03-28 09:15:57 +00:00
parent 441bd2d307
commit a5562e7fa4
30 changed files with 165 additions and 140 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
CHANGELOG.md
View file

@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
## [Unreleased]
### Added
- Define CSS variables for color theme.
### Changed
- Don't revoke auth token when handling timeline loading error.

74
src/App.vue
View file

@ -27,21 +27,53 @@ watch($$(currentUser), () => {
@import "styles/layout";
@import "styles/theme";
:root {
--background-color: #{$background-color};
--text-color: #{$text-color};
--text-colorizer: #{$text-colorizer};
--secondary-text-color: #{$secondary-text-color};
--secondary-text-colorizer: #{$secondary-text-colorizer};
--secondary-text-hover-color: #{$secondary-text-hover-color};
--secondary-text-hover-colorizer: #{$secondary-text-hover-colorizer};
--link-color: #{$link-color};
--link-colorizer: #{$link-colorizer};
--link-hover-color: #{$link-hover-color};
--link-hover-colorizer: #{$link-hover-colorizer};
--btn-background-color: #{$btn-background-color};
--btn-background-hover-color: #{$btn-background-hover-color};
--btn-text-color: #{$btn-text-color};
--btn-text-colorizer: #{$btn-text-colorizer};
--btn-text-hover-color: #{$btn-text-hover-color};
--btn-text-hover-colorizer: #{$btn-text-hover-colorizer};
--btn-secondary-background-color: #{$btn-secondary-background-color};
--btn-secondary-text-color: #{$btn-secondary-text-color};
--btn-disabled-background-color: #{$btn-disabled-background-color};
--btn-disabled-text-color: #{$btn-disabled-text-color};
--block-background-color: #{$block-background-color};
--block-link-color: #{$block-link-color};
--block-link-hover-color: #{$block-link-hover-color};
--separator-color: #{$separator-color};
--widget-background-color: #{$widget-background-color};
--highlight-color: #{$highlight-color};
--loader-color: #{$loader-color};
--shadow-color: #{$shadow-color};
}
html {
background: $background-color;
color: $text-color;
background: var(--background-color);
color: var(--text-color);
font-family: $text-font;
font-size: $text-font-size;
min-height: 100%;
}
a {
color: $link-color;
color: var(--link-color);
cursor: pointer;
text-decoration: none;
&:hover {
color: $link-hover-color;
color: var(--link-hover-color);
}
}
@ -112,11 +144,11 @@ h6 {
input,
textarea {
background-color: $block-background-color;
border: 1px solid $block-background-color;
background-color: var(--block-background-color);
border: 1px solid var(--block-background-color);
box-shadow: none;
box-sizing: border-box;
color: $text-color;
color: var(--text-color);
font-family: $text-font;
font-size: $text-font-size;
margin: 0;
@ -128,7 +160,7 @@ textarea {
}
&::placeholder {
color: $secondary-text-color;
color: var(--secondary-text-color);
opacity: 1;
}
}
@ -146,14 +178,14 @@ textarea {
button {
background-color: transparent;
border: none;
color: $link-color;
color: var(--link-color);
cursor: pointer;
font-family: $text-font;
font-size: $text-font-size;
padding: 0;
&:hover {
color: $link-hover-color;
color: var(--link-hover-color);
}
&[disabled] {
@ -162,11 +194,11 @@ button {
}
.btn {
background-color: $btn-background-color;
background-color: var(--btn-background-color);
border: none;
border-radius: $btn-border-radius;
box-shadow: $btn-shadow-size $shadow-color;
color: $btn-text-color;
box-shadow: $btn-shadow-size var(--shadow-color);
color: var(--btn-text-color);
cursor: pointer;
display: inline-block;
font-size: $text-font-size;
@ -175,24 +207,24 @@ button {
white-space: nowrap;
&:hover {
background-color: $btn-background-hover-color;
color: $btn-text-hover-color;
background-color: var(--btn-background-hover-color);
color: var(--btn-text-hover-color);
}
&[disabled] {
background-color: $btn-disabled-background-color !important;
background-color: var(--btn-disabled-background-color) !important;
box-shadow: none;
color: $btn-disabled-text-color !important;
color: var(--btn-disabled-text-color) !important;
}
}
.btn.secondary {
background-color: $btn-secondary-background-color;
color: $btn-secondary-text-color;
background-color: var(--btn-secondary-background-color);
color: var(--btn-secondary-text-color);
&:hover {
background-color: $btn-background-hover-color;
color: $btn-text-hover-color;
background-color: var(--btn-background-hover-color);
color: var(--btn-text-hover-color);
}
}

4
src/components/Avatar.vue
View file

@ -30,10 +30,8 @@ const avatarUrl = computed<string>(() => {
</script>
<style scoped lang="scss">
@import "../styles/theme";
.avatar {
background-color: $block-background-color;
background-color: var(--block-background-color);
border-radius: 50%;
box-sizing: border-box;

9
src/components/CryptoAddress.vue
View file

@ -20,10 +20,9 @@ function copyAddress() {
<style scoped lang="scss">
@import "../styles/layout";
@import "../styles/theme";
.crypto-address {
background-color: $widget-background-color;
background-color: var(--widget-background-color);
border-radius: 10px;
display: flex;
@ -31,7 +30,7 @@ function copyAddress() {
background-color: inherit;
border: none;
border-radius: 10px 0 0 10px;
color: $text-color;
color: var(--text-color);
font-family: monospace;
font-size: 12px;
line-height: 20px;
@ -48,14 +47,14 @@ function copyAddress() {
width: $icon-size;
img {
filter: $link-colorizer;
filter: var(--link-colorizer);
height: 100%;
object-fit: contain;
width: 100%;
}
&:hover img {
filter: $link-hover-colorizer;
filter: var(--link-hover-colorizer);
}
}
}

3
src/components/InstanceInfo.vue
View file

@ -17,12 +17,11 @@ const { instance } = $(useInstanceInfo())
<style scoped lang="scss">
@import "../styles/layout";
@import "../styles/mixins";
@import "../styles/theme";
.instance-info {
@include block-btn;
background-color: $block-background-color;
background-color: var(--block-background-color);
border-radius: $block-border-radius;
box-sizing: border-box;
display: flex;

4
src/components/Loader.vue
View file

@ -6,8 +6,6 @@
</template>
<style scoped lang="scss">
@import "../styles/theme";
/* https://github.com/loadingio/css-spinner/blob/master/dist/ripple.html */
$loader-size: 80px;
@ -21,7 +19,7 @@ $loader-width: 4px;
.loader div {
animation: loader 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
border: $loader-width solid $loader-color;
border: $loader-width solid var(--loader-color);
border-radius: 50%;
opacity: 1;
position: absolute;

22
src/components/Post.vue
View file

@ -579,12 +579,12 @@ async function onMintToken() {
@import "../styles/mixins";
.post {
background-color: $block-background-color;
background-color: var(--block-background-color);
border-radius: $block-border-radius;
text-align: left;
&.highlighted {
outline: 1px solid $highlight-color;
outline: 1px solid var(--highlight-color);
}
}
@ -592,7 +592,7 @@ async function onMintToken() {
@include post-icon;
align-items: center;
color: $secondary-text-color;
color: var(--secondary-text-color);
display: flex;
flex-direction: row;
gap: calc($block-inner-padding / 2);
@ -612,7 +612,7 @@ async function onMintToken() {
white-space: nowrap;
.display-name {
color: $text-color;
color: var(--text-color);
font-weight: bold;
}
}
@ -626,18 +626,18 @@ async function onMintToken() {
}
.timestamp {
color: $secondary-text-color;
color: var(--secondary-text-color);
text-align: right;
white-space: nowrap;
&:hover {
color: $secondary-text-hover-color;
color: var(--secondary-text-hover-color);
}
}
}
.post-subheader {
color: $secondary-text-color;
color: var(--secondary-text-color);
display: flex;
flex-direction: row;
flex-wrap: wrap;
@ -658,7 +658,7 @@ async function onMintToken() {
}
.post-quote {
border: 1px solid $separator-color;
border: 1px solid var(--separator-color);
border-radius: $block-border-radius;
color: inherit;
display: block;
@ -671,7 +671,7 @@ async function onMintToken() {
.quote-header {
align-items: center;
color: $secondary-text-color;
color: var(--secondary-text-color);
display: flex;
flex-direction: row;
gap: calc($block-inner-padding / 2);
@ -683,7 +683,7 @@ async function onMintToken() {
}
.display-name {
color: $text-color;
color: var(--text-color);
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
@ -744,7 +744,7 @@ async function onMintToken() {
}
.post-form {
border-top: 1px solid $separator-color;
border-top: 1px solid var(--separator-color);
}
@media screen and (max-width: $screen-breakpoint-small) {

1
src/components/PostAttachment.vue
View file

@ -18,7 +18,6 @@ defineProps<{
<style scoped lang="scss">
@import "../styles/mixins";
@import "../styles/theme";
a {
@include block-link;

2
src/components/PostContent.vue
View file

@ -84,7 +84,7 @@ function getContent(): string {
@import "../styles/mixins";
.post-content {
color: $text-color;
color: var(--text-color);
line-height: 1.5;
padding: $block-inner-padding;
word-wrap: break-word;

14
src/components/PostEditor.vue
View file

@ -387,7 +387,7 @@ $line-height: 1.5;
}
.textarea-group {
background-color: $block-background-color;
background-color: var(--block-background-color);
border-radius: $block-border-radius;
}
@ -408,14 +408,14 @@ $line-height: 1.5;
position: relative;
.remove-attachment {
background-color: $btn-background-color;
background-color: var(--btn-background-color);
display: flex;
position: absolute;
right: 0;
top: 0;
img {
filter: $btn-text-colorizer;
filter: var(--btn-text-colorizer);
height: $icon-size;
width: $icon-size;
}
@ -426,7 +426,7 @@ $line-height: 1.5;
}
.placeholder {
background-color: $background-color;
background-color: var(--background-color);
box-sizing: border-box;
padding: $block-inner-padding;
text-align: center;
@ -440,8 +440,8 @@ $line-height: 1.5;
align-items: center;
border-radius: 0 0 $block-border-radius $block-border-radius;
border-top: 1px solid $separator-color;
color: $secondary-text-color;
border-top: 1px solid var(--separator-color);
color: var(--secondary-text-color);
display: flex;
flex-direction: row;
gap: calc($block-inner-padding / 2);
@ -460,7 +460,7 @@ $line-height: 1.5;
margin-left: $block-inner-padding;
&[disabled] {
color: $btn-disabled-text-color;
color: var(--btn-disabled-text-color);
cursor: initial;
}
}

8
src/components/ProfileCard.vue
View file

@ -49,11 +49,11 @@ $avatar-size: 90px;
$profile-padding: calc($block-inner-padding / 2);
.profile {
background-color: $block-background-color;
background-color: var(--block-background-color);
border-radius: $block-border-radius;
.profile-header {
background-color: $btn-background-color;
background-color: var(--btn-background-color);
border-radius: $block-border-radius $block-border-radius 0 0;
height: 100px;
@ -94,7 +94,7 @@ $profile-padding: calc($block-inner-padding / 2);
}
.actor-address {
color: $secondary-text-color;
color: var(--secondary-text-color);
overflow-x: hidden;
text-overflow: ellipsis;
}
@ -127,7 +127,7 @@ $profile-padding: calc($block-inner-padding / 2);
}
.name {
color: $secondary-text-color;
color: var(--secondary-text-color);
margin-left: 0.3em;
}
}

6
src/components/ProfileListItem.vue
View file

@ -32,7 +32,7 @@ const profile = $computed(() => new ProfileWrapper(props.profile))
.profile {
align-items: center;
background-color: $block-background-color;
background-color: var(--block-background-color);
border-radius: $block-border-radius;
display: flex;
flex-direction: row;
@ -51,13 +51,13 @@ const profile = $computed(() => new ProfileWrapper(props.profile))
}
.display-name {
color: $text-color;
color: var(--text-color);
overflow: hidden;
text-overflow: ellipsis;
}
.actor-address {
color: $secondary-text-color;
color: var(--secondary-text-color);
overflow: hidden;
text-overflow: ellipsis;
}

2
src/components/Search.vue
View file

@ -60,7 +60,7 @@ button {
height: 100%;
img {
filter: $text-colorizer;
filter: var(--text-colorizer);
height: 1.2em;
min-width: 1.2em;
object-fit: contain;

12
src/components/Sidebar.vue
View file

@ -95,7 +95,7 @@ async function logout() {
$sidebar-icon-size: 20px;
.sidebar {
background-color: $background-color;
background-color: var(--background-color);
box-sizing: border-box;
display: flex;
flex-direction: column;
@ -123,13 +123,13 @@ $sidebar-icon-size: 20px;
width: $sidebar-icon-size + 5px;
img {
filter: $link-colorizer;
filter: var(--link-colorizer);
height: $sidebar-icon-size;
width: $sidebar-icon-size;
}
.icon-badge {
background-color: $block-background-color;
background-color: var(--block-background-color);
border-radius: 50%;
font-size: 0.8rem;
height: 1em;
@ -144,15 +144,15 @@ $sidebar-icon-size: 20px;
&:hover {
img {
filter: $link-hover-colorizer;
filter: var(--link-hover-colorizer);
}
}
&.router-link-exact-active {
color: $link-hover-color;
color: var(--link-hover-color);
img {
filter: $link-hover-colorizer;
filter: var(--link-hover-colorizer);
}
}
}

23
src/components/SidebarLayout.vue
View file

@ -65,10 +65,9 @@ function showHomeTimeline() {
<style scoped lang="scss">
@import "../styles/layout";
@import "../styles/theme";
header {
background-color: $background-color;
background-color: var(--background-color);
box-sizing: border-box;
height: $header-height;
margin-bottom: $block-outer-padding;
@ -97,11 +96,11 @@ header {
.home-btn {
align-items: center;
background-color: $block-background-color;
background-color: var(--block-background-color);
border-radius: $btn-border-radius;
box-shadow: $menu-shadow-size $shadow-color;
box-shadow: $menu-shadow-size var(--shadow-color);
box-sizing: border-box;
color: $text-color;
color: var(--text-color);
display: flex;
flex-direction: row;
flex-shrink: 0;
@ -109,7 +108,7 @@ header {
padding: 7px $body-padding;
img {
filter: $text-colorizer;
filter: var(--text-colorizer);
height: 1.2em;
margin-right: 5px;
width: 1.2em;
@ -120,18 +119,18 @@ header {
}
&:hover {
background-color: $btn-background-color;
color: $btn-text-color;
background-color: var(--btn-background-color);
color: var(--btn-text-color);
img {
filter: $btn-text-colorizer;
filter: var(--btn-text-colorizer);
}
}
}
.search {
background-color: $block-background-color;
box-shadow: $menu-shadow-size $shadow-color;
background-color: var(--block-background-color);
box-shadow: $menu-shadow-size var(--shadow-color);
height: 100%;
margin: 0 0 0 auto;
width: 250px;
@ -162,7 +161,7 @@ header {
}
#header-public {
background-color: $background-color;
background-color: var(--background-color);
margin: 0 auto;
position: sticky;
top: 0;

3
src/components/StaticPage.vue
View file

@ -12,7 +12,6 @@
<style scoped lang="scss">
@import "../styles/layout";
@import "../styles/theme";
.page {
align-items: flex-start;
@ -34,7 +33,7 @@
top: $body-padding;
img {
filter: $text-colorizer;
filter: var(--text-colorizer);
height: 40px;
width: 40px;
}

14
src/components/SubscriptionEthereum.vue
View file

@ -379,7 +379,7 @@ async function onCancelSubscription() {
gap: $block-inner-padding;
.profile-card {
background-color: $block-background-color;
background-color: var(--block-background-color);
border-radius: $block-border-radius;
display: flex;
flex-basis: 50%;
@ -390,7 +390,7 @@ async function onCancelSubscription() {
}
.separator img {
filter: $text-colorizer;
filter: var(--text-colorizer);
height: $icon-size;
min-width: $icon-size;
object-fit: contain;
@ -420,7 +420,7 @@ async function onCancelSubscription() {
}
.info {
background-color: $block-background-color;
background-color: var(--block-background-color);
border-radius: $block-border-radius;
display: flex;
flex-direction: column;
@ -437,7 +437,7 @@ async function onCancelSubscription() {
}
.status {
color: $secondary-text-color;
color: var(--secondary-text-color);
}
}
@ -475,20 +475,20 @@ async function onCancelSubscription() {
}
.token-balance {
color: $secondary-text-color;
color: var(--secondary-text-color);
output.loading {
opacity: 0.5;
}
img {
filter: $secondary-text-colorizer;
filter: var(--secondary-text-colorizer);
height: 1em;
min-width: 1em;
}
&.error {
color: $text-color;
color: var(--text-color);
}
}

8
src/components/SubscriptionMonero.vue
View file

@ -320,7 +320,7 @@ function getPaymentMinutesLeft(invoice: Invoice): number {
gap: $block-inner-padding;
.profile-card {
background-color: $block-background-color;
background-color: var(--block-background-color);
border-radius: $block-border-radius;
display: flex;
flex-basis: 50%;
@ -331,7 +331,7 @@ function getPaymentMinutesLeft(invoice: Invoice): number {
}
.separator img {
filter: $text-colorizer;
filter: var(--text-colorizer);
height: $icon-size;
min-width: $icon-size;
object-fit: contain;
@ -364,7 +364,7 @@ function getPaymentMinutesLeft(invoice: Invoice): number {
}
.info {
background-color: $block-background-color;
background-color: var(--block-background-color);
border-radius: $block-border-radius;
display: flex;
flex-direction: column;
@ -381,7 +381,7 @@ function getPaymentMinutesLeft(invoice: Invoice): number {
}
.status {
color: $secondary-text-color;
color: var(--secondary-text-color);
}
}

2
src/components/SubscriptionSettingsEthereum.vue
View file

@ -330,7 +330,7 @@ async function onWithdrawReceived() {
}
.info {
background-color: $block-background-color;
background-color: var(--block-background-color);
border-radius: $block-border-radius;
display: flex;
flex-direction: column;

3
src/components/SubscriptionSettingsMonero.vue
View file

@ -150,10 +150,9 @@ async function saveSubscriptionSettings() {
<style scoped lang="scss">
@import "../styles/layout";
@import "../styles/theme";
.info {
background-color: $block-background-color;
background-color: var(--block-background-color);
border-radius: $block-border-radius;
display: flex;
flex-direction: column;

28
src/styles/_mixins.scss
View file

@ -24,10 +24,10 @@
}
@mixin block-link {
color: $block-link-color;
color: var(--block-link-color);
&:hover {
color: $block-link-hover-color;
color: var(--block-link-hover-color);
}
}
@ -38,7 +38,7 @@
margin: 0 $block-outer-padding calc($block-outer-padding / 2);
img {
filter: $text-colorizer;
filter: var(--text-colorizer);
height: $icon-size;
margin-right: calc($icon-size / 2);
min-width: $icon-size;
@ -55,12 +55,12 @@
@mixin post-icon {
.icon {
align-items: center;
color: $secondary-text-color;
color: var(--secondary-text-color);
display: flex;
gap: $whitespace;
img {
filter: $secondary-text-colorizer;
filter: var(--secondary-text-colorizer);
height: $icon-size;
min-width: $icon-size;
object-fit: contain;
@ -72,16 +72,16 @@
a.icon:hover,
button.icon:hover,
.icon.highlighted {
color: $secondary-text-hover-color;
color: var(--secondary-text-hover-color);
img {
filter: $secondary-text-hover-colorizer;
filter: var(--secondary-text-hover-colorizer);
}
}
button.icon[disabled] {
img {
filter: $secondary-text-colorizer;
filter: var(--secondary-text-colorizer);
}
}
@ -98,10 +98,10 @@
position: relative;
menu.dropdown-menu {
background-color: $block-background-color;
border: 1px solid $separator-color;
background-color: var(--block-background-color);
border: 1px solid var(--separator-color);
border-radius: $btn-border-radius;
box-shadow: $menu-shadow-size $shadow-color;
box-shadow: $menu-shadow-size var(--shadow-color);
display: flex;
flex-direction: column;
gap: calc($block-inner-padding / 2);
@ -114,13 +114,13 @@
@mixin block-btn {
.btn {
background-color: $btn-background-color;
background-color: var(--btn-background-color);
border: 1px solid transparent;
box-shadow: none;
&:hover {
background-color: transparent;
border: 1px solid $btn-background-color;
border: 1px solid var(--btn-background-color);
}
}
}
@ -141,7 +141,7 @@
}
.sub-label {
color: $secondary-text-color;
color: var(--secondary-text-color);
font-size: 12px;
font-weight: normal;
margin-top: 3px;

2
src/views/LandingPage.vue
View file

@ -454,7 +454,7 @@ $landing-text-color: #fff;
justify-content: center;
img {
filter: $btn-text-colorizer;
filter: var(--btn-text-colorizer);
height: 1em;
width: 1em;
}

6
src/views/NotificationList.vue
View file

@ -137,10 +137,10 @@ async function loadNextPage() {
.profile {
align-items: center;
background-color: $block-background-color;
background-color: var(--block-background-color);
border-radius: $block-border-radius;
box-sizing: border-box;
color: $secondary-text-color;
color: var(--secondary-text-color);
display: flex;
gap: calc($block-inner-padding / 2);
padding: $block-inner-padding;
@ -154,7 +154,7 @@ async function loadNextPage() {
}
.display-name {
color: $text-color;
color: var(--text-color);
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;

6
src/views/PostOverlay.vue
View file

@ -130,7 +130,7 @@ const imageUrl = $computed<string | null>(() => {
$page-width: $wide-content-width + $content-gap + $wide-sidebar-width;
.post-overlay {
background-color: $block-background-color;
background-color: var(--block-background-color);
box-sizing: border-box;
display: flex;
flex-direction: column;
@ -153,7 +153,7 @@ $page-width: $wide-content-width + $content-gap + $wide-sidebar-width;
width: $page-width;
img {
filter: $text-colorizer;
filter: var(--text-colorizer);
height: 40px;
width: 40px;
}
@ -207,7 +207,7 @@ $page-width: $wide-content-width + $content-gap + $wide-sidebar-width;
max-width: 150px;
img {
filter: $text-colorizer;
filter: var(--text-colorizer);
height: 20px;
width: 20px;
}

26
src/views/Profile.vue
View file

@ -642,12 +642,12 @@ $avatar-size: 170px;
.profile-block {
@include block-btn;
background-color: $block-background-color;
background-color: var(--block-background-color);
border-radius: $block-border-radius;
margin-bottom: $block-outer-padding;
.profile-header {
background-color: $btn-background-color;
background-color: var(--btn-background-color);
border-radius: $block-border-radius $block-border-radius 0 0;
height: 200px;
@ -697,7 +697,7 @@ $avatar-size: 170px;
}
.badge {
border: 1px solid $btn-background-color;
border: 1px solid var(--btn-background-color);
border-radius: $btn-border-radius;
font-size: 14px;
line-height: 30px;
@ -710,7 +710,7 @@ $avatar-size: 170px;
/* stylelint-disable-next-line selector-max-compound-selectors */
button img {
filter: $link-colorizer;
filter: var(--link-colorizer);
height: 32px;
min-width: 20px;
object-fit: none;
@ -718,7 +718,7 @@ $avatar-size: 170px;
/* stylelint-disable-next-line selector-max-compound-selectors */
&:hover {
filter: $link-hover-colorizer;
filter: var(--link-hover-colorizer);
}
}
@ -745,7 +745,7 @@ $avatar-size: 170px;
}
.actor-address {
color: $secondary-text-color;
color: var(--secondary-text-color);
overflow-x: hidden;
text-overflow: ellipsis;
user-select: all;
@ -766,7 +766,7 @@ $avatar-size: 170px;
img {
$icon-size: 1em;
filter: $btn-text-colorizer;
filter: var(--btn-text-colorizer);
height: $icon-size;
min-width: $icon-size;
width: $icon-size;
@ -774,7 +774,7 @@ $avatar-size: 170px;
&:hover {
img {
filter: $text-colorizer;
filter: var(--text-colorizer);
}
}
}
@ -789,10 +789,10 @@ $avatar-size: 170px;
}
.extra-fields {
border-bottom: 1px solid $separator-color;
border-bottom: 1px solid var(--separator-color);
.field {
border-top: 1px solid $separator-color;
border-top: 1px solid var(--separator-color);
display: flex;
gap: calc($block-inner-padding / 2);
padding: calc($block-inner-padding / 2) 0;
@ -817,7 +817,7 @@ $avatar-size: 170px;
/* stylelint-disable-next-line selector-max-compound-selectors */
.verified-icon img {
filter: $text-colorizer;
filter: var(--text-colorizer);
height: 1em;
min-width: 1em;
width: 1em;
@ -847,7 +847,7 @@ $avatar-size: 170px;
.label {
align-self: flex-end;
color: $secondary-text-color;
color: var(--secondary-text-color);
}
}
}
@ -865,7 +865,7 @@ $avatar-size: 170px;
width: 100%;
&.active {
background-color: $block-background-color;
background-color: var(--block-background-color);
font-weight: bold;
}
}

2
src/views/ProfileDirectory.vue
View file

@ -69,7 +69,7 @@ async function loadNextPage() {
}
.profile-list-item {
color: $text-color;
color: var(--text-color);
}
.next-btn {

8
src/views/ProfileForm.vue
View file

@ -268,14 +268,14 @@ async function save() {
width: $icon-size * 2;
.remove-icon {
background-color: $block-background-color;
background-color: var(--block-background-color);
border-radius: 50%;
height: $icon-size;
width: $icon-size;
/* stylelint-disable-next-line selector-max-compound-selectors */
img {
filter: $link-hover-colorizer;
filter: var(--link-hover-colorizer);
}
}
}
@ -294,7 +294,7 @@ async function save() {
display: flex;
img {
filter: $link-colorizer;
filter: var(--link-colorizer);
height: $icon-size;
margin-right: 5px;
vertical-align: middle;
@ -302,7 +302,7 @@ async function save() {
}
&:hover img {
filter: $link-hover-colorizer;
filter: var(--link-hover-colorizer);
}
}
</style>

5
src/views/SearchResultList.vue
View file

@ -86,11 +86,10 @@ onMounted(async () => {
<style scoped lang="scss">
@import "../styles/layout";
@import "../styles/theme";
.search-message,
.search-result-list {
background-color: $block-background-color;
background-color: var(--block-background-color);
border-radius: $block-border-radius;
box-sizing: border-box;
}
@ -108,7 +107,7 @@ onMounted(async () => {
}
.search-result {
border-bottom: 1px solid $separator-color;
border-bottom: 1px solid var(--separator-color);
display: block;
&:last-child {

2
src/views/Settings.vue
View file

@ -135,7 +135,7 @@ form {
}
a {
color: $block-link-color;
color: var(--block-link-color);
}
}

2
src/views/TagTimeline.vue
View file

@ -48,7 +48,7 @@ async function loadNextPage(maxId: string) {
@import "../styles/theme";
.tag-name {
background-color: $block-background-color;
background-color: var(--block-background-color);
border-radius: $block-border-radius;
margin-bottom: $block-outer-padding;
padding: $block-inner-padding;