mirror of
https://github.com/nextcloud/server.git
synced 2025-04-13 21:09:42 +00:00
refactor(styles): Adjust code style in SCSS sources to match our stylelint config
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen
skjnldsv
parent
212cac9469
commit
f6e6ba4851
71 changed files with 582 additions and 458 deletions
apps
dashboard/src
dav/src
files/src
components
views
files_external/css
files_sharing
oauth2/src
settings/src/components
AppStoreSidebar
BasicSettings
Markdown.vuePersonalInfo
UserList.vueUsers
theming/src
UserTheming.vue
components
user_status/src/components
weather_status/src
workflowengine/src
core
css
apps.scssguest.scssicons.scssinputs.scssmobile.scssserver.scssstyles.scsssystemtags.scsstoast.scssvariables.scss
src
components/UnifiedSearch
jquery/css
views
|
|
@ -507,7 +507,6 @@ export default {
|
|||
.panel, .panels > div {
|
||||
// Ensure the maxcontrast color is set for the background
|
||||
--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
|
||||
|
||||
width: 320px;
|
||||
max-width: 100%;
|
||||
margin: 16px;
|
||||
|
|
@ -532,7 +531,8 @@ export default {
|
|||
padding: 16px;
|
||||
cursor: grab;
|
||||
|
||||
&, ::v-deep * {
|
||||
&,
|
||||
:deep(*) {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
|
|
@ -618,11 +618,10 @@ export default {
|
|||
.button,
|
||||
.button-vue,
|
||||
.edit-panels,
|
||||
.statuses ::v-deep .action-item .action-item__menutoggle,
|
||||
.statuses ::v-deep .action-item.action-item--open .action-item__menutoggle {
|
||||
.statuses :deep(.action-item .action-item__menutoggle),
|
||||
.statuses :deep(.action-item.action-item--open .action-item__menutoggle) {
|
||||
// Ensure the maxcontrast color is set for the background
|
||||
--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
|
||||
|
||||
background-color: var(--color-main-background-blur);
|
||||
-webkit-backdrop-filter: var(--filter-background-blur);
|
||||
backdrop-filter: var(--filter-background-blur);
|
||||
|
|
|
|||
|
|
@ -117,6 +117,3 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -261,7 +261,7 @@ export default {
|
|||
&__picker {
|
||||
flex: 1 auto;
|
||||
|
||||
::v-deep .native-datetime-picker--input {
|
||||
:deep(.native-datetime-picker--input) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -139,30 +139,37 @@ export default {
|
|||
padding: 0 10px 0 10px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
:deep(.availability-slots) {
|
||||
display: flex;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
:deep(.availability-slot) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
:deep(.availability-slot-group) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.mx-input-wrapper) {
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
:deep(.mx-datepicker) {
|
||||
width: 97px;
|
||||
}
|
||||
|
||||
:deep(.multiselect) {
|
||||
border: 1px solid var(--color-border-dark);
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.time-zone {
|
||||
padding-block: 32px 12px;
|
||||
padding-inline: 0 12px;
|
||||
|
|
@ -175,6 +182,7 @@ export default {
|
|||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-table {
|
||||
display: grid;
|
||||
margin-bottom: 32px;
|
||||
|
|
@ -183,9 +191,11 @@ export default {
|
|||
grid-template-columns: min-content auto min-content;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.button {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
:deep(.label-weekday) {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
|
|
|
|||
|
|
@ -156,6 +156,7 @@ export default {
|
|||
* :deep(a) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.settings-hint {
|
||||
margin-top: -.2em;
|
||||
margin-bottom: 1em;
|
||||
|
|
|
|||
|
|
@ -350,7 +350,6 @@ export default defineComponent({
|
|||
--icon-preview-size: 32px;
|
||||
|
||||
--fixed-block-start-position: var(--default-clickable-area);
|
||||
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
will-change: scroll-position;
|
||||
|
|
@ -453,7 +452,6 @@ export default defineComponent({
|
|||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
border-block-end: 1px solid var(--color-border);
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
|
|
@ -764,7 +762,6 @@ tbody.files-list__tbody.files-list__tbody--grid {
|
|||
--row-width: calc(var(--icon-preview-size) + var(--item-padding) * 2);
|
||||
--row-height: calc(var(--icon-preview-size) + var(--name-height) + var(--mtime-height) + var(--item-padding) * 2);
|
||||
--checkbox-padding: 0px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, var(--row-width));
|
||||
|
||||
|
|
@ -787,8 +784,8 @@ tbody.files-list__tbody.files-list__tbody--grid {
|
|||
.files-list__row-checkbox {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
top: calc(var(--item-padding)/2);
|
||||
inset-inline-start: calc(var(--item-padding)/2);
|
||||
top: calc(var(--item-padding) / 2);
|
||||
inset-inline-start: calc(var(--item-padding) / 2);
|
||||
overflow: hidden;
|
||||
--checkbox-container-size: 44px;
|
||||
width: var(--checkbox-container-size);
|
||||
|
|
|
|||
|
|
@ -38,5 +38,3 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -198,7 +198,7 @@ export default {
|
|||
&__title {
|
||||
overflow: hidden;
|
||||
// also count preview border
|
||||
max-width: calc(var(--width) + 2*2px);
|
||||
max-width: calc(var(--width) + 2 * 2px);
|
||||
padding: var(--margin);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -206,10 +206,12 @@ export default {
|
|||
.middle-align {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.new-owner-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -229,6 +231,7 @@ p {
|
|||
max-width: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
.transfer-select-row {
|
||||
span {
|
||||
margin-inline-end: 8px;
|
||||
|
|
|
|||
|
|
@ -201,19 +201,15 @@ export default defineComponent({
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// TODO: remove when https://github.com/nextcloud/nextcloud-vue/pull/3539 is in
|
||||
.app-navigation::v-deep .app-navigation-entry-icon {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
.app-navigation {
|
||||
:deep(.app-navigation-entry.active .button-vue.icon-collapse:not(:hover)) {
|
||||
color: var(--color-primary-element-text);
|
||||
}
|
||||
|
||||
.app-navigation::v-deep .app-navigation-entry.active .button-vue.icon-collapse:not(:hover) {
|
||||
color: var(--color-primary-element-text);
|
||||
}
|
||||
|
||||
.app-navigation > ul.app-navigation__list {
|
||||
// Use flex gap value for more elegant spacing
|
||||
padding-bottom: var(--default-grid-baseline, 4px);
|
||||
> ul.app-navigation__list {
|
||||
// Use flex gap value for more elegant spacing
|
||||
padding-bottom: var(--default-grid-baseline, 4px);
|
||||
}
|
||||
}
|
||||
|
||||
.app-navigation-entry__settings {
|
||||
|
|
|
|||
|
|
@ -612,7 +612,7 @@ export default {
|
|||
}
|
||||
|
||||
.svg-icon {
|
||||
::v-deep svg {
|
||||
:deep(svg) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: currentColor;
|
||||
|
|
|
|||
|
|
@ -313,7 +313,7 @@ export default defineComponent({
|
|||
padding: calc(var(--margin) * 2) var(--margin);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background-image: linear-gradient(0, var(--gradient-main-background));
|
||||
background-image: linear-gradient(0deg, var(--gradient-main-background));
|
||||
|
||||
button, input[type='submit'] {
|
||||
height: 44px;
|
||||
|
|
@ -321,7 +321,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
// Make sure we're relative for the loading emptycontent on top
|
||||
::v-deep .modal-container {
|
||||
:deep(.modal-container) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,70 +12,82 @@
|
|||
tr.externalStorageLoading > td {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#externalStorage td {
|
||||
& > input:not(.applicableToAllUsers), & > select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
td {
|
||||
height: 50px;
|
||||
|
||||
#externalStorage .popovermenu li > .menuitem {
|
||||
width: fit-content !important;
|
||||
}
|
||||
|
||||
#externalStorage td.status {
|
||||
/* overwrite conflicting core styles */
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
/* ensure width does not change even if internal span is not displayed */
|
||||
width: 43px;
|
||||
}
|
||||
|
||||
#externalStorage td.status > span {
|
||||
display: inline-block;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
vertical-align: text-bottom;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
#externalStorage {
|
||||
td.mountPoint, td.backend, td.authentication, td.configuration {
|
||||
min-width: 160px;
|
||||
width: 15%;
|
||||
}
|
||||
}
|
||||
#externalStorage td>img { padding-top:7px; opacity: 0.5; }
|
||||
#externalStorage td>img:hover { padding-top:7px; cursor:pointer; opacity: 1; }
|
||||
#addMountPoint>td { border:none; }
|
||||
#addMountPoint>td.applicable { visibility:hidden; }
|
||||
#addMountPoint>td.hidden { visibility:hidden; }
|
||||
|
||||
#externalStorage td {
|
||||
height: 50px;
|
||||
&.mountOptionsToggle,
|
||||
&.remove,
|
||||
&.save {
|
||||
position: relative;
|
||||
padding: 0 !important;
|
||||
width: 44px;
|
||||
[class^='icon-'],
|
||||
[class*=' icon-'] {
|
||||
&.mountOptionsToggle,
|
||||
&.remove,
|
||||
&.save {
|
||||
position: relative;
|
||||
padding: 0 !important;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin: 3px;
|
||||
[class^='icon-'],
|
||||
[class*=' icon-'] {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin: 3px;
|
||||
opacity: 0.5;
|
||||
padding: 14px;
|
||||
vertical-align: text-bottom;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mountPoint,
|
||||
&.backend,
|
||||
&.authentication,
|
||||
&.configuration {
|
||||
min-width: 160px;
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
&.status {
|
||||
/* overwrite conflicting core styles */
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
/* ensure width does not change even if internal span is not displayed */
|
||||
width: 43px;
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
vertical-align: text-bottom;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
> input:not(.applicableToAllUsers), & > select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> img {
|
||||
padding-top: 7px;
|
||||
opacity: 0.5;
|
||||
padding: 14px;
|
||||
vertical-align: text-bottom;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
cursor:pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popovermenu li > .menuitem {
|
||||
width: fit-content !important;
|
||||
}
|
||||
}
|
||||
|
||||
#addMountPoint>td { border:none; }
|
||||
|
||||
#addMountPoint>td.applicable { visibility:hidden; }
|
||||
|
||||
#addMountPoint>td.hidden { visibility:hidden; }
|
||||
|
||||
#selectBackend {
|
||||
margin-inline-start: -10px;
|
||||
width: 150px;
|
||||
|
|
@ -85,6 +97,7 @@
|
|||
#externalStorage td.backend {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
#externalStorage td.configuration > * {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -129,18 +142,22 @@
|
|||
height: 32px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.files-external-select2 .select2-results .select2-result-label > span {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.files-external-select2 .select2-results .select2-result-label .avatardiv {
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.files-external-select2 .select2-results .select2-result-label .avatardiv + span {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
margin-inline-start: 10px;
|
||||
}
|
||||
|
||||
.files-external-select2 .select2-results .select2-result-label .avatardiv[data-type="group"] + span {
|
||||
vertical-align: top;
|
||||
top: 6px;
|
||||
|
|
|
|||
|
|
@ -9,9 +9,11 @@
|
|||
.icon-room {
|
||||
background-image: var(--icon-talk-dark);
|
||||
}
|
||||
|
||||
.icon-circle {
|
||||
background-image: var(--icon-circles-dark);
|
||||
}
|
||||
|
||||
.icon-guests {
|
||||
background-image: var(--icon-user-dark);
|
||||
}
|
||||
|
|
@ -63,10 +63,6 @@ $download-button-section-height: 200px;
|
|||
margin-top: 400px;
|
||||
}
|
||||
|
||||
#imgframe .plyr {
|
||||
top: 0px !important;
|
||||
}
|
||||
|
||||
#imgframe .text-preview {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -88,10 +84,10 @@ $download-button-section-height: 200px;
|
|||
}
|
||||
|
||||
#imgframe .plyr {
|
||||
top: 0px !important;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.app-files_sharing #app-content footer {
|
||||
position: sticky !important;
|
||||
}
|
||||
|
|
@ -131,12 +127,14 @@ thead {
|
|||
#details {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#details button,
|
||||
#details input,
|
||||
#details .button {
|
||||
margin: 0 5px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
#details button:hover,
|
||||
#details input:hover,
|
||||
#details .button:hover {
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@
|
|||
* SPDX-FileCopyrightText: 2017 Nextcloud GmbH and Nextcloud contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
*/
|
||||
@use 'public.scss';
|
||||
@use 'mobile.scss';
|
||||
@use 'public';
|
||||
@use 'mobile';
|
||||
|
|
|
|||
|
|
@ -917,7 +917,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
::v-deep .avatar-link-share {
|
||||
:deep(.avatar-link-share) {
|
||||
background-color: var(--color-primary-element);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -350,7 +350,7 @@ export default {
|
|||
case this.SHARE_TYPES.SHARE_TYPE_USER:
|
||||
return t('files_sharing', 'Share with {userName}', { userName: this.share.shareWithDisplayName })
|
||||
case this.SHARE_TYPES.SHARE_TYPE_EMAIL:
|
||||
return t('files_sharing', 'Share with email {email}', { email: this.share.shareWith })
|
||||
return t('files_sharing', 'Share with email {email}', { email: this.share.shareWith })
|
||||
case this.SHARE_TYPES.SHARE_TYPE_LINK:
|
||||
return t('files_sharing', 'Share link')
|
||||
case this.SHARE_TYPES.SHARE_TYPE_GROUP:
|
||||
|
|
@ -366,12 +366,12 @@ export default {
|
|||
case this.SHARE_TYPES.SHARE_TYPE_GUEST:
|
||||
return t('files_sharing', 'Share with guest')
|
||||
default: {
|
||||
if (this.share.id) {
|
||||
// Share already exists
|
||||
return t('files_sharing', 'Update share')
|
||||
} else {
|
||||
return t('files_sharing', 'Create share')
|
||||
}
|
||||
if (this.share.id) {
|
||||
// Share already exists
|
||||
return t('files_sharing', 'Update share')
|
||||
} else {
|
||||
return t('files_sharing', 'Create share')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -1104,12 +1104,9 @@ export default {
|
|||
padding: 0.1em;
|
||||
}
|
||||
|
||||
::v-deep label {
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
:deep(label span) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Target component based style in NcCheckboxRadioSwitch slot content*/
|
||||
|
|
@ -1154,20 +1151,18 @@ export default {
|
|||
}
|
||||
|
||||
/*
|
||||
The following style is applied out of the component's scope
|
||||
to remove padding from the label.checkbox-radio-switch__label,
|
||||
which is used to group radio checkbox items. The use of ::v-deep
|
||||
ensures that the padding is modified without being affected by
|
||||
the component's scoping.
|
||||
Without this achieving left alignment for the checkboxes would not
|
||||
be possible.
|
||||
*/
|
||||
span {
|
||||
::v-deep label {
|
||||
padding-inline-start: 0 !important;
|
||||
background-color: initial !important;
|
||||
border: none !important;
|
||||
}
|
||||
The following style is applied out of the component's scope
|
||||
to remove padding from the label.checkbox-radio-switch__label,
|
||||
which is used to group radio checkbox items. The use of ::v-deep
|
||||
ensures that the padding is modified without being affected by
|
||||
the component's scoping.
|
||||
Without this achieving left alignment for the checkboxes would not
|
||||
be possible.
|
||||
*/
|
||||
span :deep(label) {
|
||||
padding-inline-start: 0 !important;
|
||||
background-color: initial !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
section.custom-permissions-group {
|
||||
|
|
@ -1177,7 +1172,7 @@ export default {
|
|||
}
|
||||
|
||||
&__delete {
|
||||
>button:first-child {
|
||||
> button:first-child {
|
||||
color: rgb(223, 7, 7);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -148,10 +148,12 @@ export default {
|
|||
min-height: 34px !important;
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
.oauth2-form {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.oauth2-form--input {
|
||||
max-width: 200px;
|
||||
margin-inline-end: 10px;
|
||||
|
|
|
|||
|
|
@ -90,13 +90,16 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-secret code {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
td code {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
table.inline td {
|
||||
border: none;
|
||||
padding: 5px;
|
||||
|
|
|
|||
|
|
@ -427,6 +427,7 @@ export default {
|
|||
border-color: var(--color-error);
|
||||
background: var(--color-main-background);
|
||||
}
|
||||
|
||||
.force:hover,
|
||||
.force:active {
|
||||
color: var(--color-main-background);
|
||||
|
|
|
|||
|
|
@ -185,6 +185,7 @@ export default {
|
|||
background-color: var(--color-error);
|
||||
width: initial;
|
||||
}
|
||||
|
||||
.warning {
|
||||
margin-top: 8px;
|
||||
padding: 5px;
|
||||
|
|
@ -193,6 +194,7 @@ export default {
|
|||
background-color: var(--color-warning);
|
||||
width: initial;
|
||||
}
|
||||
|
||||
.ajaxSwitch {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -80,6 +80,3 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.settings-markdown::v-deep {
|
||||
.settings-markdown :deep {
|
||||
a {
|
||||
text-decoration: underline;
|
||||
&::after {
|
||||
|
|
|
|||
|
|
@ -257,6 +257,7 @@ section {
|
|||
grid-row: 1/3;
|
||||
padding: 10px 10px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
&__container {
|
||||
margin: calc(var(--default-grid-baseline) * 2) auto 0 auto;
|
||||
|
|
@ -296,7 +297,7 @@ section {
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&::v-deep .cropper-view-box {
|
||||
:deep(.cropper-view-box) {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ export default {
|
|||
section {
|
||||
padding: 10px 10px;
|
||||
|
||||
&::v-deep button:disabled {
|
||||
:deep(button:disabled) {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ export default {
|
|||
box-shadow: 0 0 3px var(--color-box-shadow);
|
||||
|
||||
& *,
|
||||
&::v-deep * {
|
||||
&:deep(*) {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ export default {
|
|||
section {
|
||||
padding: 10px 10px;
|
||||
|
||||
&::v-deep button:disabled {
|
||||
&:deep(button:disabled) {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ section {
|
|||
pointer-events: none;
|
||||
|
||||
& *,
|
||||
&::v-deep * {
|
||||
&:deep(*) {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@ export default {
|
|||
pointer-events: none;
|
||||
|
||||
& *,
|
||||
&::v-deep * {
|
||||
&:deep(*) {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -398,7 +398,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './Users/shared/styles.scss';
|
||||
@use './Users/shared/styles' as *;
|
||||
|
||||
.empty {
|
||||
:deep {
|
||||
|
|
|
|||
|
|
@ -84,11 +84,11 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './shared/styles.scss';
|
||||
@use './shared/styles';
|
||||
|
||||
.footer {
|
||||
@include row;
|
||||
@include cell;
|
||||
@include styles.row;
|
||||
@include styles.cell;
|
||||
|
||||
&__cell {
|
||||
position: sticky;
|
||||
|
|
|
|||
|
|
@ -140,12 +140,12 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './shared/styles.scss';
|
||||
@use './shared/styles';
|
||||
|
||||
.header {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
|
||||
@include row;
|
||||
@include cell;
|
||||
@include styles.row;
|
||||
@include styles.cell;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -907,10 +907,10 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './shared/styles.scss';
|
||||
@use './shared/styles';
|
||||
|
||||
.user-list__row {
|
||||
@include row;
|
||||
@include styles.row;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-background-hover);
|
||||
|
|
@ -927,7 +927,7 @@ export default {
|
|||
}
|
||||
|
||||
.row {
|
||||
@include cell;
|
||||
@include styles.cell;
|
||||
|
||||
&__cell {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
|
|
|
|||
|
|
@ -301,7 +301,7 @@ export default {
|
|||
}
|
||||
|
||||
// Proper highlight for links and focus feedback
|
||||
&::v-deep a {
|
||||
:deep(a) {
|
||||
font-weight: bold;
|
||||
|
||||
&:hover,
|
||||
|
|
@ -312,7 +312,6 @@ export default {
|
|||
|
||||
&__preview-list {
|
||||
--gap: 30px;
|
||||
|
||||
display: grid;
|
||||
margin-top: var(--gap);
|
||||
column-gap: var(--gap);
|
||||
|
|
|
|||
|
|
@ -339,7 +339,6 @@ export default {
|
|||
background-size: cover;
|
||||
|
||||
&__filepicker {
|
||||
background-color: var(--color-main-text);
|
||||
background-color: var(--color-background-dark);
|
||||
|
||||
&.background--active {
|
||||
|
|
|
|||
|
|
@ -117,7 +117,6 @@ export default {
|
|||
.theming__preview {
|
||||
// We make previews on 16/10 screens
|
||||
--ratio: 16;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
|
|
|||
|
|
@ -115,6 +115,7 @@ export default defineComponent({
|
|||
h3, h4 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h4, h5 {
|
||||
margin-block-start: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './shared/field.scss';
|
||||
@use './shared/field' as *;
|
||||
|
||||
.field {
|
||||
&__description {
|
||||
|
|
|
|||
|
|
@ -136,7 +136,8 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './shared/field.scss';
|
||||
@use './shared/field' as *;
|
||||
|
||||
.description {
|
||||
color: var(--color-text-maxcontrast);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -209,7 +209,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './shared/field.scss';
|
||||
@use './shared/field' as *;
|
||||
|
||||
.field {
|
||||
&__loading-icon {
|
||||
|
|
|
|||
|
|
@ -94,6 +94,7 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.backup-status {
|
||||
&__reset-button {
|
||||
justify-content: flex-end;
|
||||
|
|
|
|||
|
|
@ -570,6 +570,7 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.weather-image {
|
||||
width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -190,9 +190,11 @@ export default {
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.invalid {
|
||||
border-color: var(--color-error) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,3 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ export default {
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.multiselect::v-deep .multiselect__tags:not(:hover):not(:focus):not(:active) {
|
||||
.multiselect:deep(.multiselect__tags:not(:hover):not(:focus):not(:active)) {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -117,6 +117,7 @@ export default {
|
|||
input[type='text'] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type='text'] {
|
||||
min-height: 48px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -109,6 +109,7 @@ export default {
|
|||
input[type='text'] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type='text'] {
|
||||
min-height: 48px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -94,6 +94,7 @@ export default {
|
|||
max-width: 550px;
|
||||
}
|
||||
}
|
||||
|
||||
.isComplex {
|
||||
img {
|
||||
vertical-align: text-top;
|
||||
|
|
|
|||
|
|
@ -40,5 +40,5 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./../styles/operation";
|
||||
@use "./../styles/operation" as *;
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -233,6 +233,7 @@ export default {
|
|||
margin-inline-end: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.trigger p, .action p {
|
||||
min-height: 34px;
|
||||
display: flex;
|
||||
|
|
@ -249,9 +250,11 @@ export default {
|
|||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.trigger p:first-child span {
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
.trigger p:last-child {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -140,9 +140,12 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "./../styles/operation";
|
||||
|
||||
#workflowengine {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.section {
|
||||
max-width: 100vw;
|
||||
|
||||
|
|
@ -151,6 +154,7 @@ export default {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -160,6 +164,7 @@ export default {
|
|||
flex-basis: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.actions__more {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -198,8 +203,6 @@ export default {
|
|||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@import "./../styles/operation";
|
||||
|
||||
.actions__item.more {
|
||||
background-color: var(--color-background-dark);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
margin-inline: -1px 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.actions__item .icon {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -22,6 +23,7 @@
|
|||
margin-bottom: 10px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.actions__item__description {
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
|
|
@ -29,20 +31,24 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.actions__item_options {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
padding-inline-start: 60px;
|
||||
}
|
||||
|
||||
h3, small {
|
||||
padding: 6px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 10pt;
|
||||
flex-grow: 1;
|
||||
|
|
|
|||
|
|
@ -114,7 +114,6 @@ kbd {
|
|||
#app-navigation:not(.vue) {
|
||||
// Ensure the maxcontrast color is set for the background
|
||||
--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
|
||||
|
||||
width: variables.$navigation-width;
|
||||
z-index: 500;
|
||||
overflow-y: auto;
|
||||
|
|
@ -454,7 +453,6 @@ kbd {
|
|||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
outline: none !important;
|
||||
box-shadow: none;
|
||||
content: ' ';
|
||||
|
|
@ -677,6 +675,7 @@ body[dir='ltr'] {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
body[dir='rtl'] {
|
||||
.app-navigation-personal,
|
||||
.app-navigation-administration {
|
||||
|
|
@ -912,6 +911,7 @@ body[dir='ltr'] #app-settings-header .settings-button {
|
|||
background-position: left 12px center;
|
||||
}
|
||||
}
|
||||
|
||||
body[dir='rtl'] #app-settings-header .settings-button {
|
||||
&::before {
|
||||
background-position: right 14px center;
|
||||
|
|
@ -937,6 +937,7 @@ body[dir='rtl'] #app-settings-header .settings-button {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-section {
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
|
|
@ -1016,6 +1017,7 @@ body[dir='rtl'] #app-settings-header .settings-button {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabsContainer {
|
||||
.tab {
|
||||
padding: 0 15px 15px;
|
||||
|
|
@ -1026,6 +1028,7 @@ body[dir='rtl'] #app-settings-header .settings-button {
|
|||
body[dir='ltr'] .tabsContainer {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
body[dir='rtl'] .tabsContainer {
|
||||
clear: right;
|
||||
}
|
||||
|
|
@ -1486,6 +1489,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
|
|||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.button.primary.skip-navigation:focus-visible {
|
||||
box-shadow: 0 0 0 4px var(--color-main-background) !important;
|
||||
outline: 2px solid var(--color-main-text) !important;
|
||||
|
|
|
|||
|
|
@ -3,24 +3,36 @@
|
|||
* SPDX-FileCopyrightText: 2016 ownCloud, Inc.
|
||||
* SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
*/
|
||||
@use 'animations.scss';
|
||||
@use 'animations';
|
||||
|
||||
/* Default and reset */
|
||||
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; cursor:default; }
|
||||
|
||||
html { height:100%; }
|
||||
|
||||
article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }
|
||||
body { line-height:1.5; }
|
||||
|
||||
table { border-collapse:separate; border-spacing:0; white-space:nowrap; }
|
||||
caption, th, td { text-align:left; font-weight:normal; }
|
||||
|
||||
caption, th, td { text-align:start; font-weight:normal; }
|
||||
|
||||
table, td, th { vertical-align:middle; }
|
||||
|
||||
a { border:0; color: var(--color-main-text); text-decoration:none;}
|
||||
|
||||
a, a *, input, input *, select, .button span, label { cursor:pointer; }
|
||||
|
||||
ul { list-style:none; }
|
||||
|
||||
body {
|
||||
font-weight: normal;
|
||||
/* Guest content uses flexbox */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* bring the default font size up to 14px */
|
||||
font-size: .875em;
|
||||
font-weight: normal;
|
||||
line-height: 1.6em;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
color: var(--color-background-plain-text, #ffffff);
|
||||
|
|
@ -73,19 +85,13 @@ h2 {
|
|||
margin-bottom: 12px;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 15px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
/* Global content */
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#header {
|
||||
.logo {
|
||||
background-image: var(--image-logo, url('../../core/img/logo/logo.svg'));
|
||||
|
|
@ -112,6 +118,7 @@ form {
|
|||
margin: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
form.install-form {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
|
@ -120,6 +127,7 @@ form.install-form fieldset,
|
|||
form.install-form fieldset input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form.install-form .strengthify-wrapper {
|
||||
bottom: 17px;
|
||||
width: calc(100% - 8px);
|
||||
|
|
@ -135,24 +143,30 @@ form #sqliteInformation {
|
|||
margin-top: 0.5rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
form #adminaccount, form #use_other_db {
|
||||
margin-bottom: 15px;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
form #adminaccount > legend,
|
||||
form #adminlogin {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
form #advancedHeader {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form fieldset legend, #datadirContent label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#datadirContent label {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
form #datadirField legend {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
|
@ -161,19 +175,12 @@ form #datadirField legend {
|
|||
#showAdvanced {
|
||||
padding: 13px; /* increase clickable area of Advanced dropdown */
|
||||
}
|
||||
|
||||
#showAdvanced img {
|
||||
vertical-align: middle; /* adjust position of Advanced dropdown arrow */
|
||||
}
|
||||
|
||||
/* Buttons and input */
|
||||
#submit-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 5px;
|
||||
position: relative; /* Make the wrapper the containing block of its
|
||||
absolutely positioned descendant icons */
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.wrapper {
|
||||
|
|
@ -181,10 +188,14 @@ form #datadirField legend {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#submit-wrapper {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 5px;
|
||||
position: relative; /* Make the wrapper the containing block of its
|
||||
absolutely positioned descendant icons */
|
||||
|
||||
.submit-icon {
|
||||
position: absolute;
|
||||
|
|
@ -245,6 +256,7 @@ select {
|
|||
input[type='submit']:focus {
|
||||
box-shadow: 0 0 0 2px inset var(--color-main-text) !important;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='tel'],
|
||||
input[type='password'],
|
||||
|
|
@ -257,15 +269,18 @@ input[type='email'] {
|
|||
font-weight: normal;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
input[type='password'].password-with-toggle, input[type='text'].password-with-toggle {
|
||||
width: 238px;
|
||||
padding-inline-end: 40px !important;
|
||||
}
|
||||
|
||||
input.login {
|
||||
width: 260px;
|
||||
height: 50px;
|
||||
background-position: right 16px center;
|
||||
}
|
||||
|
||||
input[type='submit'],
|
||||
input[type='submit'].icon-confirm,
|
||||
input.updateButton,
|
||||
|
|
@ -307,13 +322,16 @@ input[type='checkbox'].checkbox {
|
|||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbox + label {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbox:disabled + label,
|
||||
input[type='checkbox'].checkbox:disabled + label:before {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbox + label:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
|
|
@ -326,25 +344,26 @@ input[type='checkbox'].checkbox + label:before {
|
|||
width: 10px;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbox--white + label:before {
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbox--white:not(:disabled):not(:checked) + label:hover:before,
|
||||
input[type='checkbox'].checkbox--white:focus + label:before {
|
||||
border-color: #fff;
|
||||
}
|
||||
input[type='checkbox'].checkbox--white:checked + label:before {
|
||||
background-color: #eee;
|
||||
border-color: #eee;
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbox--white:disabled + label:before {
|
||||
background-color: #666 !important;
|
||||
border-color: #999 !important;
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbox--white:checked:disabled + label:before {
|
||||
border-color: #666;
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbox--white:checked + label:before {
|
||||
background-color: transparent !important;
|
||||
border-color: #fff !important;
|
||||
|
|
@ -364,6 +383,7 @@ input[type='checkbox'].checkbox--white:checked + label:before {
|
|||
overflow: hidden;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
font-weight: bold;
|
||||
padding: 3px 6px;
|
||||
|
|
@ -386,12 +406,14 @@ input[type='checkbox'].checkbox--white:checked + label:before {
|
|||
padding: .6em 2.5em .4em .4em;
|
||||
width: 8em;
|
||||
}
|
||||
|
||||
#personal-show + label {
|
||||
height: 14px;
|
||||
margin-top: -25px;
|
||||
inset-inline-start: 295px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#passwordbutton {
|
||||
margin-inline-start: .5em;
|
||||
}
|
||||
|
|
@ -416,6 +438,7 @@ form .warning input[type='checkbox']+label {
|
|||
width: 320px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.two-factor-provider {
|
||||
display: flex;
|
||||
border-radius: 3px; /* --border-radius */
|
||||
|
|
@ -445,11 +468,13 @@ form .warning input[type='checkbox']+label {
|
|||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.two-factor-icon {
|
||||
width: 100px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.two-factor-submit {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
|
|
@ -457,11 +482,13 @@ form .warning input[type='checkbox']+label {
|
|||
border-radius: 100px; /* --border-radius-pill */
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.two-factor-primary {
|
||||
/* Fix for 'Use backup codes' button not taking correct styles */
|
||||
padding: 14px !important;
|
||||
width: 226px;
|
||||
}
|
||||
|
||||
.two-factor-secondary {
|
||||
display: inline-block;
|
||||
padding: 12px;
|
||||
|
|
@ -519,15 +546,19 @@ form #selectDbType {
|
|||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.grouptop, .groupmiddle {
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.groupbottom {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.groupbottom input[type=submit] {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.grouptop.groupbottom input {
|
||||
border-radius: 3px !important;
|
||||
margin: 5px 0 !important;
|
||||
|
|
@ -567,9 +598,11 @@ form #selectDbType {
|
|||
.infogroup {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.infogroup:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p.info {
|
||||
margin: 20px auto;
|
||||
-webkit-user-select: none;
|
||||
|
|
@ -598,6 +631,7 @@ p.info {
|
|||
body[dir='ltr'] .update img.float-spinner {
|
||||
float: left;
|
||||
}
|
||||
|
||||
body[dir='rtl'] .update img.float-spinner {
|
||||
float: right;
|
||||
}
|
||||
|
|
@ -606,6 +640,7 @@ body[dir='rtl'] .update img.float-spinner {
|
|||
text-align: start;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.update-show-detailed {
|
||||
padding: 12px;
|
||||
display: block;
|
||||
|
|
@ -628,18 +663,23 @@ body[dir='rtl'] .update img.float-spinner {
|
|||
.icon-info-white {
|
||||
background-image: url('../img/actions/info-white.svg?v=2');
|
||||
}
|
||||
|
||||
.icon-error-white {
|
||||
background-image: url('../img/actions/error-white.svg?v=1');
|
||||
}
|
||||
|
||||
.icon-caret-white {
|
||||
background-image: url('../img/actions/caret-white.svg?v=1');
|
||||
}
|
||||
|
||||
.icon-confirm {
|
||||
background-image: url('../img/actions/confirm.svg?v=2');
|
||||
}
|
||||
|
||||
.icon-confirm-white {
|
||||
background-image: url('../img/actions/confirm-white.svg?v=2');
|
||||
}
|
||||
|
||||
.icon-checkmark-white {
|
||||
background-image: url('../img/actions/checkmark-white.svg?v=1');
|
||||
}
|
||||
|
|
@ -652,17 +692,24 @@ body[dir='rtl'] .update img.float-spinner {
|
|||
height: 32px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
[class^='icon-'], [class*=' icon-'] {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
}
|
||||
|
||||
.loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark {
|
||||
position: relative;
|
||||
filter: var(--background-invert-if-dark)
|
||||
}
|
||||
|
||||
.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after {
|
||||
border: 2px solid rgba(150, 150, 150, 0.5);
|
||||
border-radius: 100%;
|
||||
border-top-color: #646464;
|
||||
|
||||
z-index: 2;
|
||||
content: '';
|
||||
height: 32px;
|
||||
|
|
@ -671,24 +718,22 @@ body[dir='rtl'] .update img.float-spinner {
|
|||
position: absolute;
|
||||
top: 50%;
|
||||
inset-inline-start: 50%;
|
||||
border-radius: 100%;
|
||||
-webkit-animation: rotate .8s infinite linear;
|
||||
animation: rotate .8s infinite linear;
|
||||
-webkit-transform-origin: center;
|
||||
-ms-transform-origin: center;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.primary .loading,.primary+.loading,.primary .loading-small,.primary+.loading-small,.primary .icon-loading,.primary+.icon-loading,.primary .icon-loading-dark,.primary+.icon-loading-dark,.primary .icon-loading-small,.primary+.icon-loading-small,.primary .icon-loading-small-dark,.primary+.icon-loading-small-dark {
|
||||
filter: var(--primary-invert-if-bright)
|
||||
}
|
||||
.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after {
|
||||
border: 2px solid rgba(150, 150, 150, 0.5);
|
||||
border-top-color: #646464;
|
||||
}
|
||||
|
||||
.icon-loading-dark:after, .icon-loading-small-dark:after {
|
||||
border: 2px solid rgba(187, 187, 187, 0.5);
|
||||
border-top-color: #bbb;
|
||||
}
|
||||
|
||||
.icon-loading-small:after, .icon-loading-small-dark:after {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
|
@ -698,12 +743,15 @@ body[dir='rtl'] .update img.float-spinner {
|
|||
img.icon-loading, object.icon-loading, video.icon-loading, button.icon-loading, textarea.icon-loading, input.icon-loading, select.icon-loading, div[contenteditable=true].icon-loading {
|
||||
background-image: url('../img/loading.gif');
|
||||
}
|
||||
|
||||
img.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark, button.icon-loading-dark, textarea.icon-loading-dark, input.icon-loading-dark, select.icon-loading-dark, div[contenteditable=true].icon-loading-dark {
|
||||
background-image: url('../img/loading-dark.gif');
|
||||
}
|
||||
|
||||
img.icon-loading-small, object.icon-loading-small, video.icon-loading-small, button.icon-loading-small, textarea.icon-loading-small, input.icon-loading-small, select.icon-loading-small, div[contenteditable=true].icon-loading-small {
|
||||
background-image: url('../img/loading-small.gif');
|
||||
}
|
||||
|
||||
img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-small-dark, button.icon-loading-small-dark, textarea.icon-loading-small-dark, input.icon-loading-small-dark, select.icon-loading-small-dark, div[contenteditable=true].icon-loading-small-dark {
|
||||
background-image: url('../img/loading-small-dark.gif');
|
||||
}
|
||||
|
|
@ -798,7 +846,6 @@ a.legal {
|
|||
.guest-box, .body-login-container {
|
||||
// Ensure the maxcontrast color is set for the background
|
||||
--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
|
||||
|
||||
color: var(--color-main-text);
|
||||
background-color: var(--color-main-background-blur);
|
||||
padding: calc(3 * var(--default-grid-baseline));
|
||||
|
|
|
|||
|
|
@ -116,4 +116,6 @@ audio, canvas, embed, iframe, img, input, object, video {
|
|||
* or have some additional styling like drop shadows
|
||||
*/
|
||||
|
||||
@import url('../../dist/icons.css');
|
||||
// plain CSS import and not SCSS so disable the `@import` rule
|
||||
/* stylelint-disable-next-line no-invalid-position-at-import-rule */
|
||||
@import '../../dist/icons.css';
|
||||
|
|
|
|||
|
|
@ -11,9 +11,11 @@
|
|||
input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
|
||||
font-family: var(--font-face);
|
||||
}
|
||||
|
||||
.select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget {
|
||||
font-family: var(--font-face) !important;
|
||||
}
|
||||
|
||||
.select2-container.select2-drop-above .select2-choice {
|
||||
background-image: unset !important;
|
||||
}
|
||||
|
|
@ -69,7 +71,6 @@ button:not(
|
|||
.button,
|
||||
.pager li a {
|
||||
padding: 7px 14px;
|
||||
font-size: 13px;
|
||||
background-color: var(--color-main-background);
|
||||
color: var(--color-main-text);
|
||||
border: 1px solid var(--color-border-dark);
|
||||
|
|
@ -158,8 +159,6 @@ div[contenteditable=false] {
|
|||
margin-inline-start: 0;
|
||||
padding: 7px 6px;
|
||||
font-size: 13px;
|
||||
background-color: var(--color-main-background);
|
||||
color: var(--color-text-maxcontrast);
|
||||
border: 1px solid var(--color-background-darker);
|
||||
outline: none;
|
||||
border-radius: var(--border-radius);
|
||||
|
|
@ -339,6 +338,7 @@ input[type='reset'] {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
button:not(
|
||||
.button-vue,
|
||||
.action-button,
|
||||
|
|
@ -357,58 +357,56 @@ button:not(
|
|||
}
|
||||
|
||||
/* Confirm inputs */
|
||||
input {
|
||||
&[type='text'],
|
||||
&[type='password'],
|
||||
&[type='email'] {
|
||||
+ .icon-confirm {
|
||||
margin-inline-start: -13px !important;
|
||||
border-inline-start-color: transparent !important;
|
||||
border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0 !important;
|
||||
border-width: 2px;
|
||||
background-clip: padding-box;
|
||||
/* Avoid background under border */
|
||||
background-color: var(--color-main-background) !important;
|
||||
opacity: 1;
|
||||
height: var(--default-clickable-area);
|
||||
width: var(--default-clickable-area);
|
||||
padding: 7px 6px;
|
||||
cursor: pointer;
|
||||
margin-inline-end: 0;
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
@include functions.icon-color('confirm-fade', 'actions', variables.$color-black, 2, true);
|
||||
}
|
||||
input[type='text'],
|
||||
input[type='password'],
|
||||
input[type='email'] {
|
||||
+ .icon-confirm {
|
||||
margin-inline-start: -13px !important;
|
||||
border-inline-start-color: transparent !important;
|
||||
border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0 !important;
|
||||
border-width: 2px;
|
||||
background-clip: padding-box;
|
||||
/* Avoid background under border */
|
||||
background-color: var(--color-main-background) !important;
|
||||
opacity: 1;
|
||||
height: var(--default-clickable-area);
|
||||
width: var(--default-clickable-area);
|
||||
padding: 7px 6px;
|
||||
cursor: pointer;
|
||||
margin-inline-end: 0;
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
@include functions.icon-color('confirm-fade', 'actions', variables.$color-black, 2, true);
|
||||
}
|
||||
}
|
||||
|
||||
/* only show confirm borders if input is not focused */
|
||||
&:not(:active):not(:hover):not(:focus){
|
||||
&:invalid {
|
||||
+ .icon-confirm {
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
}
|
||||
/* only show confirm borders if input is not focused */
|
||||
&:not(:active):not(:hover):not(:focus){
|
||||
&:invalid {
|
||||
+ .icon-confirm {
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: var(--color-primary-element) !important;
|
||||
border-radius: var(--border-radius) !important;
|
||||
&:disabled {
|
||||
border-color: var(--color-background-darker) !important;
|
||||
}
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
}
|
||||
+ .icon-confirm {
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: var(--color-primary-element) !important;
|
||||
border-radius: var(--border-radius) !important;
|
||||
&:disabled {
|
||||
border-color: var(--color-background-darker) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
+ .icon-confirm {
|
||||
border-color: var(--color-primary-element) !important;
|
||||
border-inline-start-color: transparent !important;
|
||||
/* above previous input */
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
+ .icon-confirm {
|
||||
border-color: var(--color-primary-element) !important;
|
||||
border-inline-start-color: transparent !important;
|
||||
/* above previous input */
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -419,6 +417,7 @@ button img,
|
|||
.button img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select,
|
||||
.button.multiselect {
|
||||
font-weight: normal;
|
||||
|
|
@ -428,124 +427,122 @@ select,
|
|||
$checkbox-radio-size: 14px;
|
||||
$color-checkbox-radio-white: #fff;
|
||||
|
||||
input {
|
||||
&[type='checkbox'],
|
||||
&[type='radio'] {
|
||||
&.radio,
|
||||
&.checkbox {
|
||||
position: absolute;
|
||||
inset-inline-start: -10000px;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
+ label {
|
||||
user-select: none;
|
||||
}
|
||||
&:disabled + label,
|
||||
&:disabled + label:before {
|
||||
cursor: default;
|
||||
}
|
||||
+ label:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: $checkbox-radio-size;
|
||||
width: $checkbox-radio-size;
|
||||
vertical-align: middle;
|
||||
border-radius: 50%;
|
||||
margin: 0 3px;
|
||||
margin-inline: 3px 6px;
|
||||
border: 1px solid var(--color-text-maxcontrast);
|
||||
}
|
||||
&:not(:disabled):not(:checked) + label:hover:before,
|
||||
&:focus + label:before {
|
||||
border-color: var(--color-primary-element);
|
||||
}
|
||||
&:focus-visible + label {
|
||||
outline-style: solid;
|
||||
outline-color: var(--color-main-text);
|
||||
outline-width: 1px;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
&:checked + label:before,
|
||||
&.checkbox:indeterminate + label:before {
|
||||
/* ^ :indeterminate have a strange behavior on radio,
|
||||
so we respecified the checkbox class again to be safe */
|
||||
box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
|
||||
background-color: var(--color-primary-element);
|
||||
border-color: var(--color-primary-element);
|
||||
}
|
||||
&:disabled + label:before {
|
||||
border: 1px solid var(--color-text-maxcontrast);
|
||||
background-color: var(--color-text-maxcontrast) !important; /* override other status */
|
||||
}
|
||||
&:checked:disabled + label:before {
|
||||
background-color: var(--color-text-maxcontrast);
|
||||
}
|
||||
|
||||
// Detail description below label of checkbox or radio button
|
||||
& + label ~ em {
|
||||
display: inline-block;
|
||||
margin-inline-start: 25px;
|
||||
}
|
||||
& + label ~ em:last-of-type {
|
||||
margin-bottom: $checkbox-radio-size;
|
||||
}
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
&.radio,
|
||||
&.checkbox {
|
||||
position: absolute;
|
||||
inset-inline-start: -10000px;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
+ label {
|
||||
user-select: none;
|
||||
}
|
||||
&.checkbox {
|
||||
+ label:before {
|
||||
border-radius: 1px;
|
||||
height: $checkbox-radio-size;
|
||||
width: $checkbox-radio-size;
|
||||
box-shadow: none !important;
|
||||
background-position: center;
|
||||
}
|
||||
&:checked + label:before {
|
||||
background-image: url('../img/actions/checkbox-mark.svg');
|
||||
}
|
||||
&:indeterminate + label:before {
|
||||
background-image: url('../img/actions/checkbox-mixed.svg');
|
||||
}
|
||||
&:disabled + label,
|
||||
&:disabled + label:before {
|
||||
cursor: default;
|
||||
}
|
||||
+ label:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: $checkbox-radio-size;
|
||||
width: $checkbox-radio-size;
|
||||
vertical-align: middle;
|
||||
border-radius: 50%;
|
||||
margin: 0 3px;
|
||||
margin-inline: 3px 6px;
|
||||
border: 1px solid var(--color-text-maxcontrast);
|
||||
}
|
||||
&:not(:disabled):not(:checked) + label:hover:before,
|
||||
&:focus + label:before {
|
||||
border-color: var(--color-primary-element);
|
||||
}
|
||||
&:focus-visible + label {
|
||||
outline-style: solid;
|
||||
outline-color: var(--color-main-text);
|
||||
outline-width: 1px;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
&:checked + label:before,
|
||||
&.checkbox:indeterminate + label:before {
|
||||
/* ^ :indeterminate have a strange behavior on radio,
|
||||
so we respecified the checkbox class again to be safe */
|
||||
box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
|
||||
background-color: var(--color-primary-element);
|
||||
border-color: var(--color-primary-element);
|
||||
}
|
||||
&:disabled + label:before {
|
||||
border: 1px solid var(--color-text-maxcontrast);
|
||||
background-color: var(--color-text-maxcontrast) !important; /* override other status */
|
||||
}
|
||||
&:checked:disabled + label:before {
|
||||
background-color: var(--color-text-maxcontrast);
|
||||
}
|
||||
|
||||
/* We do not use the variables as we keep the colours as white for this variant */
|
||||
&.radio--white,
|
||||
&.checkbox--white {
|
||||
+ label:before,
|
||||
&:focus + label:before {
|
||||
border-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl);
|
||||
}
|
||||
&:not(:disabled):not(:checked) + label:hover:before {
|
||||
border-color: $color-checkbox-radio-white;
|
||||
}
|
||||
&:checked + label:before {
|
||||
box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
|
||||
background-color: color.adjust($color-checkbox-radio-white, $lightness: -14%, $space: hsl);
|
||||
border-color: color.adjust($color-checkbox-radio-white, $lightness: -14%, $space: hsl);
|
||||
}
|
||||
&:disabled + label:before {
|
||||
background-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl) !important; /* override other status */
|
||||
border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
|
||||
}
|
||||
&:checked:disabled + label:before {
|
||||
box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
|
||||
border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
|
||||
background-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl);
|
||||
}
|
||||
// Detail description below label of checkbox or radio button
|
||||
& + label ~ em {
|
||||
display: inline-block;
|
||||
margin-inline-start: 25px;
|
||||
}
|
||||
&.checkbox--white {
|
||||
&:checked + label:before,
|
||||
&:indeterminate + label:before {
|
||||
background-color: transparent !important; /* Override default checked */
|
||||
border-color: $color-checkbox-radio-white !important; /* Override default checked */
|
||||
background-image: url('../img/actions/checkbox-mark-white.svg');
|
||||
}
|
||||
&:indeterminate + label:before {
|
||||
background-image: url('../img/actions/checkbox-mixed-white.svg');
|
||||
}
|
||||
&:disabled + label:before {
|
||||
opacity: 0.7; /* No other choice for white background image */
|
||||
}
|
||||
& + label ~ em:last-of-type {
|
||||
margin-bottom: $checkbox-radio-size;
|
||||
}
|
||||
}
|
||||
&.checkbox {
|
||||
+ label:before {
|
||||
border-radius: 1px;
|
||||
height: $checkbox-radio-size;
|
||||
width: $checkbox-radio-size;
|
||||
box-shadow: none !important;
|
||||
background-position: center;
|
||||
}
|
||||
&:checked + label:before {
|
||||
background-image: url('../img/actions/checkbox-mark.svg');
|
||||
}
|
||||
&:indeterminate + label:before {
|
||||
background-image: url('../img/actions/checkbox-mixed.svg');
|
||||
}
|
||||
}
|
||||
|
||||
/* We do not use the variables as we keep the colours as white for this variant */
|
||||
&.radio--white,
|
||||
&.checkbox--white {
|
||||
+ label:before,
|
||||
&:focus + label:before {
|
||||
border-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl);
|
||||
}
|
||||
&:not(:disabled):not(:checked) + label:hover:before {
|
||||
border-color: $color-checkbox-radio-white;
|
||||
}
|
||||
&:checked + label:before {
|
||||
box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
|
||||
background-color: color.adjust($color-checkbox-radio-white, $lightness: -14%, $space: hsl);
|
||||
border-color: color.adjust($color-checkbox-radio-white, $lightness: -14%, $space: hsl);
|
||||
}
|
||||
&:disabled + label:before {
|
||||
background-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl) !important; /* override other status */
|
||||
border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
|
||||
}
|
||||
&:checked:disabled + label:before {
|
||||
box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
|
||||
border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
|
||||
background-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl);
|
||||
}
|
||||
}
|
||||
&.checkbox--white {
|
||||
&:checked + label:before,
|
||||
&:indeterminate + label:before {
|
||||
background-color: transparent !important; /* Override default checked */
|
||||
border-color: $color-checkbox-radio-white !important; /* Override default checked */
|
||||
background-image: url('../img/actions/checkbox-mark-white.svg');
|
||||
}
|
||||
&:indeterminate + label:before {
|
||||
background-image: url('../img/actions/checkbox-mixed-white.svg');
|
||||
}
|
||||
&:disabled + label:before {
|
||||
opacity: 0.7; /* No other choice for white background image */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -623,6 +620,7 @@ body[dir='rtl'] div.select2-drop .select2-search input {
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
div.select2-container-multi {
|
||||
.select2-choices,
|
||||
&.select2-container-active .select2-choices {
|
||||
|
|
@ -667,6 +665,7 @@ div.select2-container-multi {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.select2-container {
|
||||
margin: 3px;
|
||||
margin-inline-start: 0;
|
||||
|
|
@ -858,6 +857,7 @@ progress:not(.vue) {
|
|||
transform: translate(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.shake {
|
||||
animation-name: shake;
|
||||
animation-duration: .7s;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*/
|
||||
@use 'variables';
|
||||
|
||||
@media only screen and (width < variables.$breakpoint-mobile) {
|
||||
@media only screen and (width < #{variables.$breakpoint-mobile}) {
|
||||
|
||||
/* position share dropdown */
|
||||
#dropdown {
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@
|
|||
* SPDX-FileCopyrightText: 2017 Nextcloud GmbH and Nextcloud contributors
|
||||
* SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
*/
|
||||
@use 'styles.scss';
|
||||
@use 'inputs.scss';
|
||||
@use 'header.scss';
|
||||
@use 'icons.scss';
|
||||
@use 'apps.scss';
|
||||
@use 'global.scss';
|
||||
@use 'fixes.scss';
|
||||
@use 'mobile.scss';
|
||||
@use 'tooltip.scss';
|
||||
@use 'styles';
|
||||
@use 'inputs';
|
||||
@use 'header';
|
||||
@use 'icons';
|
||||
@use 'apps';
|
||||
@use 'global';
|
||||
@use 'fixes';
|
||||
@use 'mobile';
|
||||
@use 'tooltip';
|
||||
// If you include .css, it will be imported as url
|
||||
@use '../../node_modules/@nextcloud/dialogs/dist/style';
|
||||
@use 'public.scss';
|
||||
@use 'public';
|
||||
|
|
|
|||
|
|
@ -43,10 +43,6 @@ article, aside, dialog, figure, footer, header, hgroup, nav, section {
|
|||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
|
|
@ -267,6 +263,7 @@ body[dir='rtl'] #dbpassword {
|
|||
#show:checked + label, #dbpassword:checked + label, #personal-show:checked + label {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
#show:focus-visible + label, #dbpassword-toggle:focus-visible + label, #personal-show:focus-visible + label {
|
||||
box-shadow: var(--color-primary-element) 0 0 0 2px;
|
||||
opacity: 1;
|
||||
|
|
@ -308,6 +305,7 @@ body[dir='rtl'] #dbpassword {
|
|||
display: inline-block;
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
|
||||
#personal-show + label {
|
||||
display: block;
|
||||
inset-inline-end: 0;
|
||||
|
|
@ -385,6 +383,16 @@ tr .action:not(.permanent), .selectedActions > a {
|
|||
}
|
||||
|
||||
tr {
|
||||
.action {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&:hover .action:hover,
|
||||
&:focus .action:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover .action:not(.menuitem),
|
||||
&:focus .action:not(.menuitem),
|
||||
.action.permanent:not(.menuitem) {
|
||||
|
|
@ -402,21 +410,6 @@ tr {
|
|||
}
|
||||
}
|
||||
|
||||
tr .action {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.header-action {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:hover .action:hover, &:focus .action:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.selectedActions a {
|
||||
&:hover, &:focus {
|
||||
opacity: 1;
|
||||
|
|
@ -424,6 +417,8 @@ tr {
|
|||
}
|
||||
|
||||
.header-action {
|
||||
opacity: .8;
|
||||
|
||||
&:hover, &:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -718,6 +713,7 @@ span.ui-icon {
|
|||
display: inline-flex;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
li.crumb {
|
||||
display: inline-flex;
|
||||
background-image: url('../img/breadcrumb.svg?v=1');
|
||||
|
|
@ -786,8 +782,7 @@ li.crumb {
|
|||
padding: 0;
|
||||
width: 44px;
|
||||
}
|
||||
&:not(:first-child) a {
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
font-weight: bold;
|
||||
margin-inline-end: 10px;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
|
||||
.systemtags-select2-dropdown {
|
||||
.select2-result-label {
|
||||
height: 25px;
|
||||
|
||||
.checkmark {
|
||||
visibility: hidden;
|
||||
margin-inline: -5px 5px;
|
||||
|
|
@ -57,9 +59,6 @@
|
|||
height: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
.select2-result-label {
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.systemtags-select2-container {
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toastify.toastify-top {
|
||||
inset-inline-end: 10px;
|
||||
}
|
||||
|
|
@ -45,12 +46,15 @@
|
|||
.toast-error {
|
||||
border-inline-start: 3px solid var(--color-error);
|
||||
}
|
||||
|
||||
.toast-info {
|
||||
border-inline-start: 3px solid var(--color-primary-element);
|
||||
}
|
||||
|
||||
.toast-warning {
|
||||
border-inline-start: 3px solid var(--color-warning);
|
||||
}
|
||||
|
||||
.toast-success {
|
||||
border-inline-start: 3px solid var(--color-success);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
// SCSS darken/lighten function override
|
||||
@function nc-darken($color, $value) {
|
||||
@return color.adjust($color, $lightness: -$value, $space: hsl);
|
||||
@return color.adjust($color, $lightness: - $value, $space: hsl);
|
||||
}
|
||||
|
||||
@function nc-lighten($color, $value) {
|
||||
|
|
|
|||
|
|
@ -106,68 +106,67 @@ $clickable-area: 44px;
|
|||
$margin: 10px;
|
||||
|
||||
.result-items {
|
||||
&__item {
|
||||
&__item:deep {
|
||||
|
||||
::v-deep a {
|
||||
border-radius: 12px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: var(--border-radius-large) !important;
|
||||
a {
|
||||
border: 2px solid transparent;
|
||||
border-radius: var(--border-radius-large) !important;
|
||||
|
||||
&--focused {
|
||||
background-color: var(--color-background-hover);
|
||||
}
|
||||
&--focused {
|
||||
background-color: var(--color-background-hover);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--color-background-hover);
|
||||
border: 2px solid var(--color-border-maxcontrast);
|
||||
}
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--color-background-hover);
|
||||
border: 2px solid var(--color-border-maxcontrast);
|
||||
}
|
||||
|
||||
* {
|
||||
cursor: pointer;
|
||||
}
|
||||
* {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
overflow: hidden;
|
||||
width: $clickable-area;
|
||||
height: $clickable-area;
|
||||
border-radius: var(--border-radius);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 32px;
|
||||
&-icon {
|
||||
overflow: hidden;
|
||||
width: $clickable-area;
|
||||
height: $clickable-area;
|
||||
border-radius: var(--border-radius);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 32px;
|
||||
|
||||
&--rounded {
|
||||
border-radius: math.div($clickable-area, 2);
|
||||
}
|
||||
&--rounded {
|
||||
border-radius: math.div($clickable-area, 2);
|
||||
}
|
||||
|
||||
&--no-preview {
|
||||
background-size: 32px;
|
||||
}
|
||||
&--no-preview {
|
||||
background-size: 32px;
|
||||
}
|
||||
|
||||
&--with-thumbnail {
|
||||
background-size: cover;
|
||||
}
|
||||
&--with-thumbnail {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&--with-thumbnail:not(&--rounded) {
|
||||
// compensate for border
|
||||
max-width: $clickable-area - 2px;
|
||||
max-height: $clickable-area - 2px;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
&--with-thumbnail:not(&--rounded) {
|
||||
// compensate for border
|
||||
max-width: $clickable-area - 2px;
|
||||
max-height: $clickable-area - 2px;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
img {
|
||||
// Make sure to keep ratio
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img {
|
||||
// Make sure to keep ratio
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
}
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -93,7 +93,6 @@ function clearAndCloseSearch() {
|
|||
<style scoped lang="scss">
|
||||
.local-unified-search {
|
||||
--local-search-width: min(calc(250px + v-bind('searchGlobalButtonCSSWidth')), 95vw);
|
||||
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: var(--header-height);
|
||||
|
|
|
|||
|
|
@ -9,14 +9,17 @@
|
|||
background: var(--color-main-background) none;
|
||||
color: var(--color-main-text);
|
||||
}
|
||||
|
||||
.ui-widget-content a {
|
||||
color: var(--color-main-text);
|
||||
}
|
||||
|
||||
.ui-widget-header {
|
||||
border: none;
|
||||
color: var(--color-main-text);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.ui-widget-header a {
|
||||
color: var(--color-main-text);
|
||||
}
|
||||
|
|
@ -31,11 +34,13 @@
|
|||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.ui-state-default a,
|
||||
.ui-state-default a:link,
|
||||
.ui-state-default a:visited {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.ui-state-hover,
|
||||
.ui-widget-content .ui-state-hover,
|
||||
.ui-widget-header .ui-state-hover,
|
||||
|
|
@ -47,12 +52,14 @@
|
|||
font-weight: bold;
|
||||
color: var(--color-main-text);
|
||||
}
|
||||
|
||||
.ui-state-hover a,
|
||||
.ui-state-hover a:hover,
|
||||
.ui-state-hover a:link,
|
||||
.ui-state-hover a:visited {
|
||||
color: var(--color-main-text);
|
||||
}
|
||||
|
||||
.ui-state-active,
|
||||
.ui-widget-content .ui-state-active,
|
||||
.ui-widget-header .ui-state-active {
|
||||
|
|
@ -61,6 +68,7 @@
|
|||
font-weight: bold;
|
||||
color: var(--color-main-text);
|
||||
}
|
||||
|
||||
.ui-state-active a,
|
||||
.ui-state-active a:link,
|
||||
.ui-state-active a:visited {
|
||||
|
|
@ -77,11 +85,13 @@
|
|||
color: var(--color-text-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ui-state-highlight a,
|
||||
.ui-widget-content .ui-state-highlight a,
|
||||
.ui-widget-header .ui-state-highlight a {
|
||||
color: var(--color-text-lighter);
|
||||
}
|
||||
|
||||
.ui-state-error,
|
||||
.ui-widget-content .ui-state-error,
|
||||
.ui-widget-header .ui-state-error {
|
||||
|
|
@ -89,11 +99,13 @@
|
|||
background: var(--color-error) none;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.ui-state-error a,
|
||||
.ui-widget-content .ui-state-error a,
|
||||
.ui-widget-header .ui-state-error a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.ui-state-error-text,
|
||||
.ui-widget-content .ui-state-error-text,
|
||||
.ui-widget-header .ui-state-error-text {
|
||||
|
|
@ -105,20 +117,25 @@
|
|||
.ui-state-default .ui-icon {
|
||||
background-image: url('images/ui-icons_1d2d44_256x240.png');
|
||||
}
|
||||
|
||||
.ui-state-hover .ui-icon,
|
||||
.ui-state-focus .ui-icon {
|
||||
background-image: url('images/ui-icons_1d2d44_256x240.png');
|
||||
}
|
||||
|
||||
.ui-state-active .ui-icon {
|
||||
background-image: url('images/ui-icons_1d2d44_256x240.png');
|
||||
}
|
||||
|
||||
.ui-state-highlight .ui-icon {
|
||||
background-image: url('images/ui-icons_ffffff_256x240.png');
|
||||
}
|
||||
|
||||
.ui-state-error .ui-icon,
|
||||
.ui-state-error-text .ui-icon {
|
||||
background-image: url('images/ui-icons_ffd27a_256x240.png');
|
||||
}
|
||||
|
||||
.ui-icon.ui-icon-none {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -130,6 +147,7 @@
|
|||
background: #666666 url('images/ui-bg_diagonals-thick_20_666666_40x40.png') 50% 50% repeat;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.ui-widget-shadow {
|
||||
margin: -5px 0 0 -5px;
|
||||
padding: 5px;
|
||||
|
|
|
|||
|
|
@ -19,14 +19,16 @@
|
|||
max-width: calc(100% - 20px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.oc-dialog-title {
|
||||
background: var(--color-main-background);
|
||||
}
|
||||
|
||||
.oc-dialog-buttonrow {
|
||||
position: relative;
|
||||
display: flex;
|
||||
background: transparent;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
padding-top: 10px;
|
||||
|
|
@ -57,7 +59,7 @@
|
|||
width: 44px !important;
|
||||
height: 44px !important;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
inset-inline-end: 4px;
|
||||
padding: 25px;
|
||||
background: var(--icon-close-dark) no-repeat center;
|
||||
opacity: .5;
|
||||
|
|
@ -76,7 +78,7 @@
|
|||
z-index: 100001;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -728,16 +728,6 @@ $input-padding: 10px;
|
|||
}
|
||||
}
|
||||
|
||||
&__form-input {
|
||||
margin: 0 !important;
|
||||
&:focus,
|
||||
&:focus-visible,
|
||||
&:active {
|
||||
border-color: 2px solid var(--color-main-text) !important;
|
||||
box-shadow: 0 0 0 2px var(--color-main-background) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__input-row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
@ -774,6 +764,13 @@ $input-padding: 10px;
|
|||
height: $input-height;
|
||||
padding: $input-padding;
|
||||
|
||||
&:focus,
|
||||
&:focus-visible,
|
||||
&:active {
|
||||
border-color: 2px solid var(--color-main-text) !important;
|
||||
box-shadow: 0 0 0 2px var(--color-main-background) !important;
|
||||
}
|
||||
|
||||
&,
|
||||
&[placeholder],
|
||||
&::placeholder {
|
||||
|
|
@ -791,7 +788,8 @@ $input-padding: 10px;
|
|||
}
|
||||
}
|
||||
|
||||
&-reset, &-submit {
|
||||
&-reset,
|
||||
&-submit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-end: 4px;
|
||||
|
|
@ -832,16 +830,16 @@ $input-padding: 10px;
|
|||
}
|
||||
}
|
||||
|
||||
.unified-search__result-more::v-deep {
|
||||
:deep(.unified-search__result-more) {
|
||||
color: var(--color-text-maxcontrast);
|
||||
}
|
||||
|
||||
.empty-content {
|
||||
margin: 10vh 0;
|
||||
|
||||
::v-deep .empty-content__title {
|
||||
:deep(.empty-content__title) {
|
||||
font-weight: normal;
|
||||
font-size: var(--default-font-size);
|
||||
font-size: var(--default-font-size);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -196,6 +196,7 @@ body {
|
|||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity .3s;
|
||||
}
|
||||
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -164,7 +164,8 @@ $spacing: 30px;
|
|||
|
||||
.empty-content {
|
||||
margin: 0;
|
||||
&::v-deep .empty-content__icon {
|
||||
|
||||
:deep(.empty-content__icon) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,28 @@ const config = {
|
|||
},
|
||||
],
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: ['**/*.vue'],
|
||||
// Override the nextcloud rules to also allow :global (we should put this into the config...)
|
||||
rules: {
|
||||
'selector-pseudo-element-no-unknown': [
|
||||
true,
|
||||
{
|
||||
// Vue deep and global pseudo-element
|
||||
ignorePseudoElements: ['deep', 'global'],
|
||||
},
|
||||
],
|
||||
'selector-pseudo-class-no-unknown': [
|
||||
true,
|
||||
{
|
||||
// vue deep and global pseudo-class
|
||||
ignorePseudoClasses: ['deep', 'global'],
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
],
|
||||
}
|
||||
|
||||
module.exports = config
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue