Lenaisten/advent22
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

dark mode + style tweaks

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-09-14 03:36:42 +00:00
parent f7e98ed6f7
commit 73f80ae36d
6 changed files with 58 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ui/package.json
View file

@ -32,6 +32,7 @@
"@vue/test-utils": "^2.4.1",
"axios": "^1.5.0",
"bulma": "^0.9.4",
"bulma-prefers-dark": "^0.1.0-beta.1",
"chai": "^4.2.0",
"eslint": "^8.48.0",
"eslint-plugin-vue": "^9.17.0",

4
ui/src/components/Calendar.vue
View file

@ -19,7 +19,9 @@
/>
</ThouCanvas>
</div>
<figcaption>{{ figure_caption }}</figcaption>
<figcaption class="has-text-primary-dark">
{{ figure_caption }}
</figcaption>
</figure>
</template>

2
ui/src/components/MultiModal.vue
View file

@ -11,7 +11,7 @@
<div class="image is-square">
<img :src="image_src" alt="Kalender-Bild" />
</div>
<figcaption class="has-text-grey-lighter">
<figcaption class="tag is-primary">
{{ figure_caption }}
</figcaption>
</figure>

2
ui/src/components/bulma/Drawer.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="card">
<header class="card-header has-background-grey-lighter is-unselectable">
<header class="card-header is-unselectable">
<p class="card-header-title" @click="toggle">{{ header }}</p>
<p v-if="refreshable" class="card-header-icon px-0">

48
ui/src/main.scss
View file

@ -1,3 +1,49 @@
@charset "utf-8";
@import "~bulma/bulma.sass";
//=====================
// custom color scheme
//=====================
$primary: #945DE1;
$link: #64B4BD;
$info: #8C4E80;
$success: #7E8E2B;
$warning: #F6CA6B;
$danger: #C5443B;
// Sass variables (bulma)
@import "~bulma/sass/utilities/initial-variables";
@import "~bulma/sass/utilities/derived-variables";
// Sass variables (bulma-prefers-dark)
@import "~bulma-prefers-dark/sass/utilities/initial-variables";
@import "~bulma-prefers-dark/sass/utilities/derived-variables";
//=================
// variable tweaks
//=================
$modal-card-body-background-color-dark: $body-background-dark;
$card-background-color-dark: $background-dark;
// main imports
@import "~bulma/bulma";
@import "~bulma-prefers-dark/bulma-prefers-dark";
//==============
// style tweaks
//==============
.card-header {
background-color: $background;
@include prefers-scheme(dark) {
background-color: $card-header-background-color;
}
}
.card-content {
@include prefers-scheme(dark) {
background-color: $body-background-dark;
}
}

5
ui/yarn.lock
View file

@ -2545,6 +2545,11 @@ buffer@^5.5.0:
base64-js "^1.3.1"
ieee754 "^1.1.13"
bulma-prefers-dark@^0.1.0-beta.1:
version "0.1.0-beta.1"
resolved "https://registry.yarnpkg.com/bulma-prefers-dark/-/bulma-prefers-dark-0.1.0-beta.1.tgz#074aa71899f389a0137dd3753f0d89e96ab1e59b"
integrity sha512-ti4sKxIIrTAvGtsYc9Rk66SUZSH/j63EU1hApQijQVlKFF0qBLGSb8E16HhI83KJaIeYP4aAHQv2tj0ara831A==
bulma@^0.9.4:
version "0.9.4"
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.4.tgz#0ca8aeb1847a34264768dba26a064c8be72674a1"