YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #481 from YunoHost/fix-darkmode

Browse source 
Fix darkmode checkbox icons, code and warning modals
This commit is contained in:
Alexandre Aubin 2022-10-28 18:04:32 +02:00 • committed by GitHub
commit 63630162da
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/src/main.js
View file

@ -17,12 +17,7 @@ Vue.config.productionTip = false
Vue.use(BootstrapVue, { Vue.use(BootstrapVue, {
BSkeleton: { animation: 'none' }, BSkeleton: { animation: 'none' },
BAlert: { show: true }, BAlert: { show: true },
BBadge: { pill: true }, BBadge: { pill: true }
BModal: {
bodyBgVariant: 'warning',
centered: true,
bodyClass: ['font-weight-bold', 'rounded-top']
}
}) })
Vue.use(VueShowdown, { Vue.use(VueShowdown, {
@ -37,6 +32,9 @@ Vue.prototype.$askConfirmation = function (message, props) {
return this.$bvModal.msgBoxConfirm(message, { return this.$bvModal.msgBoxConfirm(message, {
okTitle: this.$i18n.t('ok'), okTitle: this.$i18n.t('ok'),
cancelTitle: this.$i18n.t('cancel'), cancelTitle: this.$i18n.t('cancel'),
bodyBgVariant: 'warning',
centered: true,
bodyClass: ['font-weight-bold', 'rounded-top', store.state.theme ? 'text-white' : 'text-black'],
...props ...props
}) })
} }

2
app/src/scss/_variables.scss
View file

@ -66,7 +66,7 @@ $alert-color-level: 5;
$list-group-item-bg-level: -11; $list-group-item-bg-level: -11;
$list-group-item-color-level: 6; $list-group-item-color-level: 6;
$code-color: var(--code-color); $code-color: $black;
// Replace font-weight 300 with 200 // Replace font-weight 300 with 200
$font-weight-light: 200; $font-weight-light: 200;

16
app/src/scss/main.scss
View file

@ -85,8 +85,6 @@
@include hsl-color('gray-800', 210, 10%, 23%); @include hsl-color('gray-800', 210, 10%, 23%);
@include hsl-color('gray-900', 210, 11%, 15%); @include hsl-color('gray-900', 210, 11%, 15%);
--code-color: var(--pink);
// Overwrite list-group-item variants to lighter ones (used in diagnosis for example) // Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
@include list-group-item-variant($color, theme-color-level($color, $list-group-item-bg-level), theme-color-level($color, $list-group-item-color-level)); @include list-group-item-variant($color, theme-color-level($color, $list-group-item-bg-level), theme-color-level($color, $list-group-item-color-level));
@ -98,6 +96,11 @@
} }
} }
} }
// FIX svg fill not working with CSS variables
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='white' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>"));
}
} }
[dark-theme="true"] { [dark-theme="true"] {
@ -123,8 +126,6 @@
@include hsl-color('gray-200', 256, 0%, 23%); @include hsl-color('gray-200', 256, 0%, 23%);
@include hsl-color('gray-100', 256, 0%, 15%); @include hsl-color('gray-100', 256, 0%, 15%);
--code-color: var(--gray-800);
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
@include list-group-item-variant($color, theme-color-level($color, -6), theme-color-level($color, 2)); @include list-group-item-variant($color, theme-color-level($color, -6), theme-color-level($color, 2));
@ -132,6 +133,11 @@
@include alert-variant(theme-color-level($color, -6), theme-color-level($color, -5), theme-color-level($color, 2)); @include alert-variant(theme-color-level($color, -6), theme-color-level($color, -5), theme-color-level($color, 2));
} }
} }
// FIX svg fill not working with CSS variables
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#202020' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>"));
}
} }
// Style overrides happens after dependencies imports // Style overrides happens after dependencies imports
@ -294,7 +300,7 @@ h3.card-title {
} }
code { code {
background: $light; background: $gray-300;
padding: .15rem .25rem; padding: .15rem .25rem;
border-radius: $border-radius; border-radius: $border-radius;
} }