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] ## [Unreleased]
### Added
- Define CSS variables for color theme.
### Changed ### Changed
- Don't revoke auth token when handling timeline loading error. - 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/layout";
@import "styles/theme"; @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 { html {
background: $background-color; background: var(--background-color);
color: $text-color; color: var(--text-color);
font-family: $text-font; font-family: $text-font;
font-size: $text-font-size; font-size: $text-font-size;
min-height: 100%; min-height: 100%;
} }
a { a {
color: $link-color; color: var(--link-color);
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: $link-hover-color; color: var(--link-hover-color);
} }
} }
@ -112,11 +144,11 @@ h6 {
input, input,
textarea { textarea {
background-color: $block-background-color; background-color: var(--block-background-color);
border: 1px solid $block-background-color; border: 1px solid var(--block-background-color);
box-shadow: none; box-shadow: none;
box-sizing: border-box; box-sizing: border-box;
color: $text-color; color: var(--text-color);
font-family: $text-font; font-family: $text-font;
font-size: $text-font-size; font-size: $text-font-size;
margin: 0; margin: 0;
@ -128,7 +160,7 @@ textarea {
} }
&::placeholder { &::placeholder {
color: $secondary-text-color; color: var(--secondary-text-color);
opacity: 1; opacity: 1;
} }
} }
@ -146,14 +178,14 @@ textarea {
button { button {
background-color: transparent; background-color: transparent;
border: none; border: none;
color: $link-color; color: var(--link-color);
cursor: pointer; cursor: pointer;
font-family: $text-font; font-family: $text-font;
font-size: $text-font-size; font-size: $text-font-size;
padding: 0; padding: 0;
&:hover { &:hover {
color: $link-hover-color; color: var(--link-hover-color);
} }
&[disabled] { &[disabled] {
@ -162,11 +194,11 @@ button {
} }
.btn { .btn {
background-color: $btn-background-color; background-color: var(--btn-background-color);
border: none; border: none;
border-radius: $btn-border-radius; border-radius: $btn-border-radius;
box-shadow: $btn-shadow-size $shadow-color; box-shadow: $btn-shadow-size var(--shadow-color);
color: $btn-text-color; color: var(--btn-text-color);
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-size: $text-font-size; font-size: $text-font-size;
@ -175,24 +207,24 @@ button {
white-space: nowrap; white-space: nowrap;
&:hover { &:hover {
background-color: $btn-background-hover-color; background-color: var(--btn-background-hover-color);
color: $btn-text-hover-color; color: var(--btn-text-hover-color);
} }
&[disabled] { &[disabled] {
background-color: $btn-disabled-background-color !important; background-color: var(--btn-disabled-background-color) !important;
box-shadow: none; box-shadow: none;
color: $btn-disabled-text-color !important; color: var(--btn-disabled-text-color) !important;
} }
} }
.btn.secondary { .btn.secondary {
background-color: $btn-secondary-background-color; background-color: var(--btn-secondary-background-color);
color: $btn-secondary-text-color; color: var(--btn-secondary-text-color);
&:hover { &:hover {
background-color: $btn-background-hover-color; background-color: var(--btn-background-hover-color);
color: $btn-text-hover-color; color: var(--btn-text-hover-color);
} }
} }

4
src/components/Avatar.vue
View file

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

9
src/components/CryptoAddress.vue
View file

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

4
src/components/Loader.vue
View file

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

22
src/components/Post.vue
View file

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

1
src/components/PostAttachment.vue
View file

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

2
src/components/PostContent.vue
View file

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

14
src/components/PostEditor.vue
View file

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

8
src/components/ProfileCard.vue
View file

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

6
src/components/ProfileListItem.vue
View file

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

2
src/components/Search.vue
View file

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

12
src/components/Sidebar.vue
View file

@ -95,7 +95,7 @@ async function logout() {
$sidebar-icon-size: 20px; $sidebar-icon-size: 20px;
.sidebar { .sidebar {
background-color: $background-color; background-color: var(--background-color);
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -123,13 +123,13 @@ $sidebar-icon-size: 20px;
width: $sidebar-icon-size + 5px; width: $sidebar-icon-size + 5px;
img { img {
filter: $link-colorizer; filter: var(--link-colorizer);
height: $sidebar-icon-size; height: $sidebar-icon-size;
width: $sidebar-icon-size; width: $sidebar-icon-size;
} }
.icon-badge { .icon-badge {
background-color: $block-background-color; background-color: var(--block-background-color);
border-radius: 50%; border-radius: 50%;
font-size: 0.8rem; font-size: 0.8rem;
height: 1em; height: 1em;
@ -144,15 +144,15 @@ $sidebar-icon-size: 20px;
&:hover { &:hover {
img { img {
filter: $link-hover-colorizer; filter: var(--link-hover-colorizer);
} }
} }
&.router-link-exact-active { &.router-link-exact-active {
color: $link-hover-color; color: var(--link-hover-color);
img { 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"> <style scoped lang="scss">
@import "../styles/layout"; @import "../styles/layout";
@import "../styles/theme";
header { header {
background-color: $background-color; background-color: var(--background-color);
box-sizing: border-box; box-sizing: border-box;
height: $header-height; height: $header-height;
margin-bottom: $block-outer-padding; margin-bottom: $block-outer-padding;
@ -97,11 +96,11 @@ header {
.home-btn { .home-btn {
align-items: center; align-items: center;
background-color: $block-background-color; background-color: var(--block-background-color);
border-radius: $btn-border-radius; border-radius: $btn-border-radius;
box-shadow: $menu-shadow-size $shadow-color; box-shadow: $menu-shadow-size var(--shadow-color);
box-sizing: border-box; box-sizing: border-box;
color: $text-color; color: var(--text-color);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-shrink: 0; flex-shrink: 0;
@ -109,7 +108,7 @@ header {
padding: 7px $body-padding; padding: 7px $body-padding;
img { img {
filter: $text-colorizer; filter: var(--text-colorizer);
height: 1.2em; height: 1.2em;
margin-right: 5px; margin-right: 5px;
width: 1.2em; width: 1.2em;
@ -120,18 +119,18 @@ header {
} }
&:hover { &:hover {
background-color: $btn-background-color; background-color: var(--btn-background-color);
color: $btn-text-color; color: var(--btn-text-color);
img { img {
filter: $btn-text-colorizer; filter: var(--btn-text-colorizer);
} }
} }
} }
.search { .search {
background-color: $block-background-color; background-color: var(--block-background-color);
box-shadow: $menu-shadow-size $shadow-color; box-shadow: $menu-shadow-size var(--shadow-color);
height: 100%; height: 100%;
margin: 0 0 0 auto; margin: 0 0 0 auto;
width: 250px; width: 250px;
@ -162,7 +161,7 @@ header {
} }
#header-public { #header-public {
background-color: $background-color; background-color: var(--background-color);
margin: 0 auto; margin: 0 auto;
position: sticky; position: sticky;
top: 0; top: 0;

3
src/components/StaticPage.vue
View file

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

14
src/components/SubscriptionEthereum.vue
View file

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

3
src/components/SubscriptionSettingsMonero.vue
View file

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

28
src/styles/_mixins.scss
View file

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

2
src/views/LandingPage.vue
View file

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

6
src/views/NotificationList.vue
View file

@ -137,10 +137,10 @@ async function loadNextPage() {
.profile { .profile {
align-items: center; align-items: center;
background-color: $block-background-color; background-color: var(--block-background-color);
border-radius: $block-border-radius; border-radius: $block-border-radius;
box-sizing: border-box; box-sizing: border-box;
color: $secondary-text-color; color: var(--secondary-text-color);
display: flex; display: flex;
gap: calc($block-inner-padding / 2); gap: calc($block-inner-padding / 2);
padding: $block-inner-padding; padding: $block-inner-padding;
@ -154,7 +154,7 @@ async function loadNextPage() {
} }
.display-name { .display-name {
color: $text-color; color: var(--text-color);
font-weight: bold; font-weight: bold;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; 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; $page-width: $wide-content-width + $content-gap + $wide-sidebar-width;
.post-overlay { .post-overlay {
background-color: $block-background-color; background-color: var(--block-background-color);
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -153,7 +153,7 @@ $page-width: $wide-content-width + $content-gap + $wide-sidebar-width;
width: $page-width; width: $page-width;
img { img {
filter: $text-colorizer; filter: var(--text-colorizer);
height: 40px; height: 40px;
width: 40px; width: 40px;
} }
@ -207,7 +207,7 @@ $page-width: $wide-content-width + $content-gap + $wide-sidebar-width;
max-width: 150px; max-width: 150px;
img { img {
filter: $text-colorizer; filter: var(--text-colorizer);
height: 20px; height: 20px;
width: 20px; width: 20px;
} }

26
src/views/Profile.vue
View file

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

2
src/views/ProfileDirectory.vue
View file

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

8
src/views/ProfileForm.vue
View file

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

5
src/views/SearchResultList.vue
View file

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

2
src/views/Settings.vue
View file

@ -135,7 +135,7 @@ form {
} }
a { 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"; @import "../styles/theme";
.tag-name { .tag-name {
background-color: $block-background-color; background-color: var(--block-background-color);
border-radius: $block-border-radius; border-radius: $block-border-radius;
margin-bottom: $block-outer-padding; margin-bottom: $block-outer-padding;
padding: $block-inner-padding; padding: $block-inner-padding;