Chapril/mobilizon.chapril.org-mobilizon
Chapril
/
mobilizon.chapril.org-mobilizon
24
0
Fork 0
Code Issues Pull Requests Releases Activity

up vars

This commit is contained in:
Tykayn 2022-09-20 10:27:49 +02:00 committed by tykayn
parent 0ea9cc416f
commit a89aaf9d09
5 changed files with 74 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/.yarnrc.yml
View File

@ -1,3 +1,3 @@
nodeLinker: node-modules nodeLinker: node-modules
yarnPath: .yarn/releases/yarn-3.1.1.cjs #yarnPath: .yarn/releases/yarn-3.1.1.cjs

4
js/src/components/Editor.vue
View File

@ -566,7 +566,7 @@ $color-white: #eee;
} }
&.is-selected, &.is-selected,
&:hover { &:hover {
background-color: rgba($color-white, 0.2); background-color: rgba(#eee, 0.2);
} }
&.is-empty { &.is-empty {
opacity: 0.5; opacity: 0.5;
@ -583,7 +583,7 @@ $color-white: #eee;
padding: 0; padding: 0;
font-size: 1rem; font-size: 1rem;
text-align: inherit; text-align: inherit;
color: $color-white; color: #eee;
border-radius: 5px; border-radius: 5px;
} }

2
js/src/components/Event/DateCalendarIcon.vue
View File

@ -54,7 +54,7 @@ export default class DateCalendarIcon extends Vue {
<style lang="scss" scoped> <style lang="scss" scoped>
div.datetime-container { div.datetime-container {
background: $chapril_blue_light; background: #fff;
border: 1px solid $borders; border: 1px solid $borders;
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;

122
js/src/variables.scss
View File

@ -2,6 +2,13 @@
@import "~bulma/sass/utilities/initial-variables.sass"; @import "~bulma/sass/utilities/initial-variables.sass";
@import "~bulma/sass/utilities/derived-variables.sass"; @import "~bulma/sass/utilities/derived-variables.sass";
// chapril colors
$chapril_blue: #2e5281;
$chapril_blue_light: #bcd0e5;
$chapril_orange: #ff5e00;
$chapril_grey: #5f5f5f;
// other
$bleuvert: #1e7d97; $bleuvert: #1e7d97;
$jaune: #ffd599; $jaune: #ffd599;
$violet: #424056; $violet: #424056;
@ -20,78 +27,79 @@ $violet-3: #3c376e;
/** /**
* Borders * Borders
*/ */
$borders: #d7d6de; $borders: mix($chapril_blue, #d7d6de);
$backgrounds: #ecebf2; $backgrounds: mix($chapril_blue, #ecebf2);
/** /**
* Text * Text
*/ */
$purple-1: #757199; $purple-1: mix($chapril_blue, #757199);
/** /**
* Background * Background
*/ */
$purple-2: #cdcaea; $purple-2: mix($chapril_blue, #cdcaea);
$purple-3: #e6e4f4; $purple-3: mix($chapril_blue, #e6e4f4);
$orange-2: #ed8d07; $orange-2: mix($chapril_blue, #ed8d07);
$orange-3: #d35204; $orange-3: mix($chapril_blue, #d35204);
$yellow-1: #ffd599; $yellow-1: mix($chapril_blue, #fff1e8);
$yellow-2: #fff1de; $yellow-2: mix($chapril_blue, #fff1de);
$yellow-3: #fbd5cb; $yellow-3: mix($chapril_blue, #fff8f6);
$yellow-4: #f7ba30; $yellow-4: mix($chapril_blue, #b4f0ff);
$primary: $bleuvert; $primary: $chapril_blue;
$primary-invert: findColorInvert($primary); $primary-invert: findColorInvert($primary);
$secondary: $jaune; $secondary: lighten($chapril_blue, 20%);
$secondary-invert: findColorInvert($secondary); $secondary-invert: findColorInvert($secondary);
$background-color: $violet-2; $background-color: mix($chapril_blue, $violet-2);
$background-color-darker: darken($background-color,10%);
$success: #0d8758; $success: mix($chapril_blue, #0d8758);
$success-invert: findColorInvert($success); $success-invert: findColorInvert($success);
$info: #36bcd4; $info: mix($chapril_blue, #36bcd4);
$info-invert: findColorInvert($info); $info-invert: findColorInvert($info);
$danger: #cd2026; $danger: mix($chapril_blue, #ff2e54);
$danger-invert: findColorInvert($danger); $danger-invert: findColorInvert($danger);
$link: $primary; $link: $primary;
$link-invert: $primary-invert; $link-invert: $primary-invert;
$text: $violet-1; $text: mix($chapril_blue, $violet-1);
$grey: #757575;
$colors: map-merge( $colors: map-merge(
$colors, $colors,
( (
"primary": ( "primary": (
$primary, $primary,
$primary-invert, $primary-invert,
), ),
"secondary": ( "secondary": (
$secondary, $secondary,
$secondary-invert, $secondary-invert,
), ),
"success": ( "success": (
$success, $success,
$success-invert, $success-invert,
), ),
"info": ( "info": (
$info, $info,
$info-invert, $info-invert,
), ),
"danger": ( "danger": (
$danger, $danger,
$danger-invert, $danger-invert,
), ),
"link": ( "link": (
$link, $link,
$link-invert, $link-invert,
), ),
"grey": (
$grey, "grey": (
findColorInvert($grey), $grey,
), findColorInvert($grey),
) ),
)
); );
// Navbar // Navbar
@ -103,7 +111,7 @@ $navbar-height: 4rem;
$footer-padding: 3rem 1.5rem 1rem; $footer-padding: 3rem 1.5rem 1rem;
$footer-background-color: $background-color; $footer-background-color: $background-color;
$body-background-color: #efeef4; $body-background-color: mix( $chapril_blue, #efeef4);
$fullhd-enabled: false; $fullhd-enabled: false;
$hero-body-padding-medium: 6rem 1.5rem; $hero-body-padding-medium: 6rem 1.5rem;
@ -112,22 +120,26 @@ main > .container {
min-height: 70vh; min-height: 70vh;
} }
$title-color: #3c376e; $title-color: $chapril_blue;
$title-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, $title-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
serif; serif;
$title-weight: 700; $title-weight: 700;
$title-size: 40px; $title-size: 40px;
$title-sub-size: 45px; $title-sub-size: 45px;
$title-sup-size: 30px; $title-sup-size: 30px;
$subtitle-color: #3a384c; $subtitle-color: $chapril_grey;
$subtitle-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, $subtitle-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
serif; serif;
$subtitle-weight: 400; $subtitle-weight: 400;
$subtitle-size: 32px; $subtitle-size: 32px;
$subtitle-sub-size: 30px; $subtitle-sub-size: 30px;
$subtitle-sup-size: 15px; $subtitle-sup-size: 15px;
.title {
margin: 30px auto 45px;
}
.subtitle { .subtitle {
background: $secondary; background: $secondary;
display: inline; display: inline;

6
js/src/views/Home.vue
View File

@ -621,12 +621,12 @@ export default class Home extends Vue {
@import "~bulma/sass/utilities/mixins.sass"; @import "~bulma/sass/utilities/mixins.sass";
main > div > .container { main > div > .container {
background: $whitest; background: #eee;
padding: 1rem 0.5rem 3rem; padding: 1rem 0.5rem 3rem;
} }
.search-autocomplete { .search-autocomplete {
border: 1px solid #dbdbdb; border: 1px solid $borders;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
} }
@ -752,7 +752,7 @@ section.hero {
} }
#homepage { #homepage {
background: $white; background: #eee;
} }
.home-separator { .home-separator {