mirror of
https://github.com/YunoHost/yunohost-admin.git
synced 2024-09-03 20:06:15 +02:00
fix: css misc fixes
This commit is contained in:
axolotle
parent
e87d76eea6
commit
183e281d04
13 changed files with 105 additions and 70 deletions
|
|
@ -114,7 +114,11 @@ export default {
|
|||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: shade-color($gray-100, 3%);
|
||||
background-color: shade-color($body-tertiary-bg, 3%);
|
||||
|
||||
[data-bs-theme='dark'] & {
|
||||
background-color: tint-color($body-tertiary-bg-dark, 3%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,18 +58,30 @@ export default {
|
|||
|
||||
.btn {
|
||||
padding: 0;
|
||||
margin-left: 0.1rem;
|
||||
margin-left: 0.25rem;
|
||||
border-radius: 50rem;
|
||||
line-height: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
&-popover {
|
||||
background-color: $white;
|
||||
border-width: 2px;
|
||||
:deep() {
|
||||
.popover {
|
||||
background-color: $gray-800;
|
||||
color: $black;
|
||||
border-width: 2px;
|
||||
|
||||
:deep(.popover-body) {
|
||||
color: $dark;
|
||||
[data-bs-theme='dark'] & {
|
||||
background-color: $white;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
color: $white;
|
||||
|
||||
[data-bs-theme='dark'] & {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ export default {
|
|||
|
||||
&-status {
|
||||
width: 2rem;
|
||||
min-width: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -194,7 +194,14 @@ export default {
|
|||
padding-top: 0.5rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// FIXME bvn fix (should be fixed in lib)
|
||||
:deep(.btn-group) {
|
||||
display: block;
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -132,8 +132,6 @@ $list-group-item-padding-y: $spacer * 0.75;
|
|||
@import '~bootstrap/scss/mixins';
|
||||
@import '~bootstrap/scss/utilities';
|
||||
|
||||
$hr-border-color: $gray-200;
|
||||
|
||||
$list-group-action-color: $gray-800;
|
||||
|
||||
// ╭──────────────────────────────────────╮
|
||||
|
|
|
|||
|
|
@ -117,6 +117,29 @@ body {
|
|||
.tooltip {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// BVN fixes
|
||||
// FIXME move to CardForm ?
|
||||
form {
|
||||
.row {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
fieldset {
|
||||
margin-bottom: $spacer;
|
||||
width: 100%;
|
||||
.row {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.form-text {
|
||||
display: block;
|
||||
|
||||
.alert {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Descriptive list (<b-row /> elems with <b-col> inside)
|
||||
// FIXME REMOVE when every infos switch to `DescriptionRow`
|
||||
.row-line {
|
||||
|
|
@ -247,6 +270,10 @@ code {
|
|||
background: $gray-300;
|
||||
padding: 0.15rem 0.25rem;
|
||||
border-radius: $border-radius;
|
||||
|
||||
[data-bs-theme='dark'] & {
|
||||
background-color: $gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
pre code {
|
||||
|
|
@ -258,6 +285,10 @@ pre code {
|
|||
padding: 1rem;
|
||||
background-color: $light;
|
||||
overflow: auto;
|
||||
|
||||
[data-bs-theme='dark'] & {
|
||||
background-color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.unselectable {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<BOverlay
|
||||
variant="white"
|
||||
:variant="dark ? 'dark' : 'light'"
|
||||
opacity="0.75"
|
||||
no-center
|
||||
:show="waiting || reconnecting || error !== null"
|
||||
|
|
@ -41,7 +41,13 @@ export default {
|
|||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters(['waiting', 'reconnecting', 'error', 'currentRequest']),
|
||||
...mapGetters([
|
||||
'waiting',
|
||||
'reconnecting',
|
||||
'error',
|
||||
'currentRequest',
|
||||
'dark',
|
||||
]),
|
||||
|
||||
component() {
|
||||
const { error, reconnecting, currentRequest: request } = this
|
||||
|
|
|
|||
|
|
@ -466,19 +466,20 @@ export default {
|
|||
.card-deck {
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
> * {
|
||||
margin-bottom: 2rem;
|
||||
flex-basis: 100%;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
flex-basis: 50%;
|
||||
max-width: calc(50% - 30px);
|
||||
max-width: calc(50% - 0.75rem);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
flex-basis: 33%;
|
||||
max-width: calc(33.3% - 30px);
|
||||
max-width: calc(33.3% - 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -489,8 +490,9 @@ export default {
|
|||
border-color: $dark;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
:deep(.card-link) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
|
|
|
|||
|
|
@ -45,11 +45,11 @@
|
|||
|
||||
<BCol>
|
||||
<template v-if="group.isSpecial">
|
||||
<p class="text-primary">
|
||||
<p class="text-primary-emphasis">
|
||||
<YIcon iname="info-circle" />
|
||||
{{ $t('group_explain_' + groupName) }}
|
||||
</p>
|
||||
<p class="text-primary" v-if="groupName === 'visitors'">
|
||||
<p class="text-primary-emphasis" v-if="groupName === 'visitors'">
|
||||
<em>{{
|
||||
$t('group_explain_visitors_needed_for_external_client')
|
||||
}}</em>
|
||||
|
|
|
|||
|
|
@ -33,9 +33,7 @@
|
|||
"
|
||||
>
|
||||
<span
|
||||
:class="
|
||||
'btn btn-sm py-0 btn-' + (data.value ? 'danger' : 'success')
|
||||
"
|
||||
:class="'btn btn-xs btn-' + (data.value ? 'danger' : 'success')"
|
||||
>
|
||||
{{ $t(data.value ? 'close' : 'open') }}
|
||||
</span>
|
||||
|
|
@ -59,13 +57,13 @@
|
|||
:server-error="serverError"
|
||||
@submit.prevent="onFormPortToggling"
|
||||
inline
|
||||
form-classes="d-flex justify-content-between align-items-start"
|
||||
form-classes="d-flex flex-column flex-lg-row gap-3 justify-content-between align-items-start"
|
||||
>
|
||||
<BInputGroup :prepend="$t('action')">
|
||||
<BFormSelect v-model="form.action" :options="actionChoices" />
|
||||
</BInputGroup>
|
||||
|
||||
<FormField :validation="v$.form.port">
|
||||
<FormField :validation="v$.form.port" class="mb-0">
|
||||
<BInputGroup :prepend="$t('port')">
|
||||
<InputItem
|
||||
id="input-port"
|
||||
|
|
@ -290,47 +288,34 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.on-off-switch) {
|
||||
.custom-control-input {
|
||||
&:checked ~ .custom-control-label::before {
|
||||
border-color: $success;
|
||||
background-color: $success;
|
||||
}
|
||||
&:not(:checked) ~ .custom-control-label {
|
||||
&::before {
|
||||
:deep() {
|
||||
.form-switch {
|
||||
.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 {
|
||||
border-color: $success;
|
||||
background-color: $success;
|
||||
}
|
||||
&:not(:checked) {
|
||||
border-color: $danger;
|
||||
background-color: $danger;
|
||||
}
|
||||
&::after {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
input:focus ~ .custom-control-label,
|
||||
&:hover {
|
||||
span {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input:focus ~ .custom-control-label,
|
||||
&:hover {
|
||||
span {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
span {
|
||||
visibility: hidden;
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(form) {
|
||||
margin-bottom: -1rem;
|
||||
|
||||
& > * {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
fieldset {
|
||||
width: 100%;
|
||||
visibility: hidden;
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -199,9 +199,3 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-select {
|
||||
flex-basis: 40%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -361,11 +361,6 @@ export default {
|
|||
display: flex;
|
||||
justify-items: stretch;
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
align-self: flex-start;
|
||||
margin-left: 0.5rem;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<BCol>
|
||||
<strong>{{ $t('user_email') }}</strong>
|
||||
</BCol>
|
||||
<BCol class="font-italic">
|
||||
<BCol class="fst-italic">
|
||||
{{ user.mail }}
|
||||
</BCol>
|
||||
</BRow>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue