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;
border: none;
border-radius: $btn-border-radius;
box-shadow: $btn-shadow;
box-shadow: $btn-shadow-size $shadow-color;
color: $btn-text-color;
cursor: pointer;
display: inline-block;

2
src/components/CryptoAddress.vue
View file

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

1
src/components/Loader.vue
View file

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

6
src/components/Post.vue
View file

@ -584,7 +584,7 @@ async function onMintToken() {
text-align: left;
&.highlighted {
outline: 1px solid #FFA500;
outline: 1px solid $highlight-color;
}
}
@ -707,7 +707,7 @@ async function onMintToken() {
.icon {
&.tokenized img {
filter: invert(51%) sepia(48%) saturate(437%) hue-rotate(222deg) brightness(92%) contrast(84%);
filter: $gem-colorizer;
}
&.tokenize-progress img {
@ -744,7 +744,7 @@ async function onMintToken() {
}
.post-form {
border-top: 1px solid #f3f2ed;
border-top: 1px solid $separator-color;
}
@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;
.profile-header {
background-color: $text-color;
background-color: $btn-background-color;
border-radius: $block-border-radius $block-border-radius 0 0;
height: 100px;

1
src/components/Search.vue
View file

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

4
src/components/SidebarLayout.vue
View file

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

1
src/components/SubscriptionEthereum.vue
View file

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

1
src/components/SubscriptionMonero.vue
View file

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

5
src/styles/_layout.scss
View file

@ -9,7 +9,12 @@ $content-gap: 50px;
$block-outer-padding: 20px;
$block-inner-padding: 20px;
$block-border-radius: 15px;
$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-sidebar-width: 400px;

2
src/styles/_mixins.scss
View file

@ -101,7 +101,7 @@
background-color: $block-background-color;
border: 1px solid $separator-color;
border-radius: $btn-border-radius;
box-shadow: $shadow;
box-shadow: $menu-shadow-size $shadow-color;
display: flex;
flex-direction: column;
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 */
$background-color: #f3f2ed;
$text-font: Helvetica, Arial, sans-serif;
$text-font-size: 15px;
$text-color: #333;
$text-colorizer: invert(17%) sepia(0%) saturate(0%) hue-rotate(356deg) brightness(101%) contrast(91%);
$secondary-text-color: #999;
@ -15,23 +18,25 @@ $link-hover-colorizer: invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brig
$error-color: #FF4D4D;
$greentext-color: #789922;
$background-color: #f3f2ed;
$btn-background-color: $text-color;
$btn-background-hover-color: #fff;
$btn-text-color: #fff;
$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-colorizer: $text-colorizer;
$btn-border-radius: 8px;
$btn-shadow: 2px 5px 10px -5px #B7B5B5;
$btn-secondary-background-color: #CCCBC6;
$btn-secondary-text-color: $text-color;
$btn-disabled-background-color: #ddd;
$btn-disabled-text-color: #999;
$block-border-radius: 15px;
$block-background-color: #fff;
$block-link-color: #6c491c;
$block-link-hover-color: #1A0000;
$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/theme";
$text-color: #fff;
$landing-text-color: #fff;
.landing-page {
background-color: #000;
@ -281,7 +281,7 @@ $text-color: #fff;
background-repeat: no-repeat;
background-size: cover;
box-sizing: border-box;
color: $text-color;
color: $landing-text-color;
min-height: 100vh;
padding-top: 20vh;
}
@ -314,14 +314,14 @@ $text-color: #fff;
line-height: 1.75;
a {
color: $text-color;
color: $landing-text-color;
}
.arrow {
color: #7DFF54;
&:hover {
color: $text-color;
color: $landing-text-color;
}
}
}
@ -381,7 +381,7 @@ $text-color: #fff;
input {
border-radius: 10px;
color: $text-color;
color: $landing-text-color;
min-width: 100px;
&::placeholder {
@ -427,7 +427,7 @@ $text-color: #fff;
border: none;
border-radius: 10px;
box-shadow: 0 2px 16px -5px #BB5CC7;
color: $text-color;
color: $landing-text-color;
cursor: pointer;
display: block;
font-size: 20px;
@ -460,7 +460,7 @@ $text-color: #fff;
}
a {
color: $text-color;
color: $landing-text-color;
text-decoration: underline;
}
}
@ -484,7 +484,7 @@ $text-color: #fff;
text-align: center;
button {
color: $text-color;
color: $landing-text-color;
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;
.post-overlay {
background-color: #fff;
background-color: $block-background-color;
box-sizing: border-box;
display: flex;
flex-direction: column;

8
src/views/Profile.vue
View file

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

19
src/views/ProfileForm.vue
View file

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