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

fix: misc styling fixes

Browse source
This commit is contained in:
axolotle 2024-08-17 10:01:35 +02:00
parent 55d81708c1
commit eb0597b544
5 changed files with 16 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/src/App.vue
View file

@ -86,7 +86,7 @@ onMounted(() => {
<BNavbarNav class="ms-auto"> <BNavbarNav class="ms-auto">
<li class="nav-item"> <li class="nav-item">
<BButton :href="ssoLink" variant="primary" size="sm" block> <BButton :href="ssoLink" variant="primary" size="sm" class="d-block">
{{ $t('user_interface_link') }} <YIcon iname="user" /> {{ $t('user_interface_link') }} <YIcon iname="user" />
</BButton> </BButton>
</li> </li>

2
app/src/components/ConfigPanels.vue
View file

@ -35,7 +35,7 @@ const modelValue = defineModel<NestedMV>({ required: true })
<template> <template>
<BCard v-if="routes.length > 1" no-body class="config-panel"> <BCard v-if="routes.length > 1" no-body class="config-panel">
<BCardHeader header-tag="nav"> <BCardHeader tag="nav">
<BNav card-header fill pills> <BNav card-header fill pills>
<BNavItem <BNavItem
v-for="route in routes" v-for="route in routes"

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

@ -43,9 +43,9 @@ $black: #202020;
$blue: #60a5fa; $blue: #60a5fa;
$indigo: #6812f3; $indigo: #6812f3;
$purple: #b957ea; $purple: #cf76fc;
$pink: #e93f8e; $pink: #e93f8e;
$red: #ff5a5a; $red: #fd6666;
$orange: #fd7e17; $orange: #fd7e17;
$yellow: #ffd452; $yellow: #ffd452;
$green: #70ea8d; $green: #70ea8d;
@ -60,6 +60,8 @@ $warning: $yellow;
$danger: $red; $danger: $red;
$light: $gray-100; $light: $gray-100;
$dark: $gray-900; $dark: $gray-900;
// Custom
$best: $purple;
$theme-colors: ( $theme-colors: (
'primary': $primary, 'primary': $primary,
@ -70,7 +72,7 @@ $theme-colors: (
'danger': $danger, 'danger': $danger,
'light': $light, 'light': $light,
'dark': $dark, 'dark': $dark,
'best': $purple, 'best': $best,
); );
// $min-contrast-ratio: 7; // $min-contrast-ratio: 7;
@ -168,7 +170,7 @@ $light-text-colors: (
'info': shade-color($info, 45%), 'info': shade-color($info, 45%),
'warning': shade-color($warning, 50%), 'warning': shade-color($warning, 50%),
'danger': shade-color($danger, 20%), 'danger': shade-color($danger, 20%),
'best': shade-color($purple, 15%), 'best': shade-color($purple, 30%),
); );
// Altered text color variant for dark theme // Altered text color variant for dark theme
$dark-text-colors: ( $dark-text-colors: (

12
app/src/views/_partials/HistoryConsole.vue
View file

@ -5,8 +5,10 @@ import { computed, nextTick, ref } from 'vue'
import MessageListGroup from '@/components/MessageListGroup.vue' import MessageListGroup from '@/components/MessageListGroup.vue'
import QueryHeader from '@/components/QueryHeader.vue' import QueryHeader from '@/components/QueryHeader.vue'
import { useRequests } from '@/composables/useRequests' import { useRequests } from '@/composables/useRequests'
import { useSettings } from '@/composables/useSettings'
const { historyList, showModal } = useRequests() const { historyList, showModal } = useRequests()
const { dark } = useSettings()
const rootElem = ref<InstanceType<typeof BCard> | null>(null) const rootElem = ref<InstanceType<typeof BCard> | null>(null)
const historyElem = ref<InstanceType<typeof BAccordion> | null>(null) const historyElem = ref<InstanceType<typeof BAccordion> | null>(null)
const open = ref(false) const open = ref(false)
@ -115,16 +117,15 @@ function onHistoryBarClick(e: MouseEvent) {
tabindex="0" tabindex="0"
:aria-expanded="open ? 'true' : 'false'" :aria-expanded="open ? 'true' : 'false'"
aria-controls="console-collapse" aria-controls="console-collapse"
header-tag="header" :variant="open ? 'best' : dark ? 'dark' : 'light'"
:header-bg-variant="open ? 'best' : 'white'" tag="header"
:class="{ 'text-white': open }"
class="d-flex align-items-center" class="d-flex align-items-center"
@mousedown.left.prevent="onHistoryBarClick" @mousedown.left.prevent="onHistoryBarClick"
@keyup.space.enter.prevent="onHistoryBarKey" @keyup.space.enter.prevent="onHistoryBarKey"
> >
<h5 class="m-0"> <h5 class="m-0">
<YIcon iname="history" /> <YIcon iname="history" />
<span class="d-none d-sm-inline fw-bold"> <span class="d-none d-sm-inline fw-bold ms-1">
{{ $t('history.title') }} {{ $t('history.title') }}
</span> </span>
</h5> </h5>
@ -187,7 +188,8 @@ function onHistoryBarClick(e: MouseEvent) {
#console { #console {
position: sticky; position: sticky;
z-index: 15; // To be able to read the console while waiting modal is displayed
z-index: 1057;
bottom: 0; bottom: 0;
width: calc(100% + 3rem); width: calc(100% + 3rem);

5
app/src/views/tool/ToolFirewall.vue
View file

@ -294,15 +294,12 @@ function onFormPortToggling() {
:deep() { :deep() {
.form-switch { .form-switch {
.form-check-input { .form-check-input {
--bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgb(255, 255, 255)'/></svg>") !important;
[data-bs-theme='dark'] * & {
--bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgb(34, 38, 42)'/></svg>") !important;
}
&:checked { &:checked {
border-color: $success; border-color: $success;
background-color: $success; background-color: $success;
} }
&:not(:checked) { &:not(:checked) {
--bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23222222)'/></svg>") !important;
border-color: $danger; border-color: $danger;
background-color: $danger; background-color: $danger;
} }