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

Define SCSS variables for all colors

Browse source
This commit is contained in:
silverpill 2023-03-29 19:59:18 +00:00
parent 4215c11a70
commit 441bd2d307
16 changed files with 55 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App.vue
View file

@ -165,7 +165,7 @@ button {
background-color: $btn-background-color; background-color: $btn-background-color;
border: none; border: none;
border-radius: $btn-border-radius; border-radius: $btn-border-radius;
box-shadow: $btn-shadow; box-shadow: $btn-shadow-size $shadow-color;
color: $btn-text-color; color: $btn-text-color;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;

2
src/components/CryptoAddress.vue
View file

@ -23,7 +23,7 @@ function copyAddress() {
@import "../styles/theme"; @import "../styles/theme";
.crypto-address { .crypto-address {
background-color: #eee; background-color: $widget-background-color;
border-radius: 10px; border-radius: 10px;
display: flex; display: flex;

1
src/components/Loader.vue
View file

@ -10,7 +10,6 @@
/* https://github.com/loadingio/css-spinner/blob/master/dist/ripple.html */ /* https://github.com/loadingio/css-spinner/blob/master/dist/ripple.html */
$loader-color: #999;
$loader-size: 80px; $loader-size: 80px;
$loader-width: 4px; $loader-width: 4px;

6
src/components/Post.vue
View file

@ -584,7 +584,7 @@ async function onMintToken() {
text-align: left; text-align: left;
&.highlighted { &.highlighted {
outline: 1px solid #FFA500; outline: 1px solid $highlight-color;
} }
} }
@ -707,7 +707,7 @@ async function onMintToken() {
.icon { .icon {
&.tokenized img { &.tokenized img {
filter: invert(51%) sepia(48%) saturate(437%) hue-rotate(222deg) brightness(92%) contrast(84%); filter: $gem-colorizer;
} }
&.tokenize-progress img { &.tokenize-progress img {
@ -744,7 +744,7 @@ async function onMintToken() {
} }
.post-form { .post-form {
border-top: 1px solid #f3f2ed; border-top: 1px solid $separator-color;
} }
@media screen and (max-width: $screen-breakpoint-small) { @media screen and (max-width: $screen-breakpoint-small) {

2
src/components/ProfileCard.vue
View file

@ -53,7 +53,7 @@ $profile-padding: calc($block-inner-padding / 2);
border-radius: $block-border-radius; border-radius: $block-border-radius;
.profile-header { .profile-header {
background-color: $text-color; background-color: $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;

1
src/components/Search.vue
View file

@ -27,6 +27,7 @@ function search() {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "../styles/layout";
@import "../styles/theme"; @import "../styles/theme";
.search { .search {

4
src/components/SidebarLayout.vue
View file

@ -99,7 +99,7 @@ header {
align-items: center; align-items: center;
background-color: $block-background-color; background-color: $block-background-color;
border-radius: $btn-border-radius; border-radius: $btn-border-radius;
box-shadow: $shadow; box-shadow: $menu-shadow-size $shadow-color;
box-sizing: border-box; box-sizing: border-box;
color: $text-color; color: $text-color;
display: flex; display: flex;
@ -131,7 +131,7 @@ header {
.search { .search {
background-color: $block-background-color; background-color: $block-background-color;
box-shadow: $shadow; box-shadow: $menu-shadow-size $shadow-color;
height: 100%; height: 100%;
margin: 0 0 0 auto; margin: 0 0 0 auto;
width: 250px; width: 250px;

1
src/components/SubscriptionEthereum.vue
View file

@ -390,6 +390,7 @@ async function onCancelSubscription() {
} }
.separator img { .separator img {
filter: $text-colorizer;
height: $icon-size; height: $icon-size;
min-width: $icon-size; min-width: $icon-size;
object-fit: contain; object-fit: contain;

1
src/components/SubscriptionMonero.vue
View file

@ -331,6 +331,7 @@ function getPaymentMinutesLeft(invoice: Invoice): number {
} }
.separator img { .separator img {
filter: $text-colorizer;
height: $icon-size; height: $icon-size;
min-width: $icon-size; min-width: $icon-size;
object-fit: contain; object-fit: contain;

5
src/styles/_layout.scss
View file

@ -9,7 +9,12 @@ $content-gap: 50px;
$block-outer-padding: 20px; $block-outer-padding: 20px;
$block-inner-padding: 20px; $block-inner-padding: 20px;
$block-border-radius: 15px;
$input-padding: 10px; $input-padding: 10px;
$btn-border-radius: 8px;
$btn-shadow-size: 2px 5px 10px -5px;
$menu-shadow-size: 0 2px 16px -9px;
$wide-content-width: 650px; $wide-content-width: 650px;
$wide-sidebar-width: 400px; $wide-sidebar-width: 400px;

2
src/styles/_mixins.scss
View file

@ -101,7 +101,7 @@
background-color: $block-background-color; background-color: $block-background-color;
border: 1px solid $separator-color; border: 1px solid $separator-color;
border-radius: $btn-border-radius; border-radius: $btn-border-radius;
box-shadow: $shadow; box-shadow: $menu-shadow-size $shadow-color;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: calc($block-inner-padding / 2); gap: calc($block-inner-padding / 2);

15
src/styles/_theme.scss
View file

@ -1,7 +1,10 @@
/* color-to-filter converter https://codepen.io/sosuke/pen/Pjoqqp */ /* color-to-filter converter https://codepen.io/sosuke/pen/Pjoqqp */
$background-color: #f3f2ed;
$text-font: Helvetica, Arial, sans-serif; $text-font: Helvetica, Arial, sans-serif;
$text-font-size: 15px; $text-font-size: 15px;
$text-color: #333; $text-color: #333;
$text-colorizer: invert(17%) sepia(0%) saturate(0%) hue-rotate(356deg) brightness(101%) contrast(91%); $text-colorizer: invert(17%) sepia(0%) saturate(0%) hue-rotate(356deg) brightness(101%) contrast(91%);
$secondary-text-color: #999; $secondary-text-color: #999;
@ -15,23 +18,25 @@ $link-hover-colorizer: invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brig
$error-color: #FF4D4D; $error-color: #FF4D4D;
$greentext-color: #789922; $greentext-color: #789922;
$background-color: #f3f2ed;
$btn-background-color: $text-color; $btn-background-color: $text-color;
$btn-background-hover-color: #fff; $btn-background-hover-color: #fff;
$btn-text-color: #fff; $btn-text-color: #fff;
$btn-text-colorizer: invert(99%) sepia(74%) saturate(252%) hue-rotate(137deg) brightness(116%) contrast(100%); $btn-text-colorizer: invert(99%) sepia(74%) saturate(252%) hue-rotate(137deg) brightness(116%) contrast(100%);
$btn-text-hover-color: $text-color; $btn-text-hover-color: $text-color;
$btn-text-hover-colorizer: $text-colorizer; $btn-text-hover-colorizer: $text-colorizer;
$btn-border-radius: 8px;
$btn-shadow: 2px 5px 10px -5px #B7B5B5;
$btn-secondary-background-color: #CCCBC6; $btn-secondary-background-color: #CCCBC6;
$btn-secondary-text-color: $text-color; $btn-secondary-text-color: $text-color;
$btn-disabled-background-color: #ddd; $btn-disabled-background-color: #ddd;
$btn-disabled-text-color: #999; $btn-disabled-text-color: #999;
$block-border-radius: 15px;
$block-background-color: #fff; $block-background-color: #fff;
$block-link-color: #6c491c; $block-link-color: #6c491c;
$block-link-hover-color: #1A0000; $block-link-hover-color: #1A0000;
$separator-color: $background-color; $separator-color: $background-color;
$shadow: 0 2px 16px -9px #C3C4C7; $widget-background-color: #eee;
$highlight-color: #FFA500;
$loader-color: #999;
$shadow-color: #B7B5B5;
$gem-color: #9678c3;
$gem-colorizer: invert(51%) sepia(48%) saturate(437%) hue-rotate(222deg) brightness(92%) contrast(84%);

16
src/views/LandingPage.vue
View file

@ -273,7 +273,7 @@ async function login() {
@import "../styles/layout"; @import "../styles/layout";
@import "../styles/theme"; @import "../styles/theme";
$text-color: #fff; $landing-text-color: #fff;
.landing-page { .landing-page {
background-color: #000; background-color: #000;
@ -281,7 +281,7 @@ $text-color: #fff;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
box-sizing: border-box; box-sizing: border-box;
color: $text-color; color: $landing-text-color;
min-height: 100vh; min-height: 100vh;
padding-top: 20vh; padding-top: 20vh;
} }
@ -314,14 +314,14 @@ $text-color: #fff;
line-height: 1.75; line-height: 1.75;
a { a {
color: $text-color; color: $landing-text-color;
} }
.arrow { .arrow {
color: #7DFF54; color: #7DFF54;
&:hover { &:hover {
color: $text-color; color: $landing-text-color;
} }
} }
} }
@ -381,7 +381,7 @@ $text-color: #fff;
input { input {
border-radius: 10px; border-radius: 10px;
color: $text-color; color: $landing-text-color;
min-width: 100px; min-width: 100px;
&::placeholder { &::placeholder {
@ -427,7 +427,7 @@ $text-color: #fff;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 2px 16px -5px #BB5CC7; box-shadow: 0 2px 16px -5px #BB5CC7;
color: $text-color; color: $landing-text-color;
cursor: pointer; cursor: pointer;
display: block; display: block;
font-size: 20px; font-size: 20px;
@ -460,7 +460,7 @@ $text-color: #fff;
} }
a { a {
color: $text-color; color: $landing-text-color;
text-decoration: underline; text-decoration: underline;
} }
} }
@ -484,7 +484,7 @@ $text-color: #fff;
text-align: center; text-align: center;
button { button {
color: $text-color; color: $landing-text-color;
text-decoration: underline; text-decoration: underline;
} }
} }

2
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: #fff; background-color: $block-background-color;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

8
src/views/Profile.vue
View file

@ -647,7 +647,7 @@ $avatar-size: 170px;
margin-bottom: $block-outer-padding; margin-bottom: $block-outer-padding;
.profile-header { .profile-header {
background-color: $text-color; background-color: $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;
@ -710,10 +710,16 @@ $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;
height: 32px; height: 32px;
min-width: 20px; min-width: 20px;
object-fit: none; object-fit: none;
width: 20px; width: 20px;
/* stylelint-disable-next-line selector-max-compound-selectors */
&:hover {
filter: $link-hover-colorizer;
}
} }
.dropdown-menu { .dropdown-menu {

19
src/views/ProfileForm.vue
View file

@ -60,7 +60,9 @@
title="Remove item" title="Remove item"
@click="removeExtraField(index)" @click="removeExtraField(index)"
> >
<img src="@/assets/feather/x-circle.svg"> <div class="remove-icon">
<img src="@/assets/feather/x-circle.svg">
</div>
</a> </a>
</div> </div>
<button <button
@ -256,27 +258,30 @@ async function save() {
.remove-extra-field { .remove-extra-field {
$icon-size: 15px; $icon-size: 15px;
align-items: center;
display: none; display: none;
height: $icon-size * 2; height: $icon-size * 2;
line-height: $icon-size * 2; justify-content: center;
position: absolute; position: absolute;
right: -$icon-size; right: -$icon-size;
text-align: center;
top: -$icon-size; top: -$icon-size;
width: $icon-size * 2; width: $icon-size * 2;
img { .remove-icon {
background-color: $block-background-color; background-color: $block-background-color;
border-radius: 50%; border-radius: 50%;
filter: $link-hover-colorizer;
height: $icon-size; height: $icon-size;
vertical-align: middle;
width: $icon-size; width: $icon-size;
/* stylelint-disable-next-line selector-max-compound-selectors */
img {
filter: $link-hover-colorizer;
}
} }
} }
&:hover .remove-extra-field { &:hover .remove-extra-field {
display: block; display: flex;
} }
&.error input { &.error input {