diff --git a/apps/dashboard/src/DashboardApp.vue b/apps/dashboard/src/DashboardApp.vue
index 78a7bb1deb3..727edbb8a93 100644
--- a/apps/dashboard/src/DashboardApp.vue
+++ b/apps/dashboard/src/DashboardApp.vue
@@ -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);
diff --git a/apps/dashboard/src/components/ApiDashboardWidget.vue b/apps/dashboard/src/components/ApiDashboardWidget.vue
index c956a2e1023..e82b977b041 100644
--- a/apps/dashboard/src/components/ApiDashboardWidget.vue
+++ b/apps/dashboard/src/components/ApiDashboardWidget.vue
@@ -117,6 +117,3 @@ export default {
},
}
</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/apps/dav/src/components/AbsenceForm.vue b/apps/dav/src/components/AbsenceForm.vue
index cb3fabe49df..2f78ac3ab79 100644
--- a/apps/dav/src/components/AbsenceForm.vue
+++ b/apps/dav/src/components/AbsenceForm.vue
@@ -261,7 +261,7 @@ export default {
&__picker {
flex: 1 auto;
- ::v-deep .native-datetime-picker--input {
+ :deep(.native-datetime-picker--input) {
margin-bottom: 0;
}
}
diff --git a/apps/dav/src/components/AvailabilityForm.vue b/apps/dav/src/components/AvailabilityForm.vue
index f3a7570325f..b71ae8ff70c 100644
--- a/apps/dav/src/components/AvailabilityForm.vue
+++ b/apps/dav/src/components/AvailabilityForm.vue
@@ -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;
diff --git a/apps/dav/src/views/CalDavSettings.vue b/apps/dav/src/views/CalDavSettings.vue
index b93986a9137..5fec0672d9e 100644
--- a/apps/dav/src/views/CalDavSettings.vue
+++ b/apps/dav/src/views/CalDavSettings.vue
@@ -156,6 +156,7 @@ export default {
* :deep(a) {
text-decoration: underline;
}
+
.settings-hint {
margin-top: -.2em;
margin-bottom: 1em;
diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 95bd0f6c571..d4c3d9495b7 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -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);
diff --git a/apps/files/src/components/LegacyView.vue b/apps/files/src/components/LegacyView.vue
index b3ec4095fc2..d9baeeb1b07 100644
--- a/apps/files/src/components/LegacyView.vue
+++ b/apps/files/src/components/LegacyView.vue
@@ -38,5 +38,3 @@ export default {
},
}
</script>
-<style>
-</style>
diff --git a/apps/files/src/components/TemplatePreview.vue b/apps/files/src/components/TemplatePreview.vue
index 57af0bf9b64..46e141c6b3b 100644
--- a/apps/files/src/components/TemplatePreview.vue
+++ b/apps/files/src/components/TemplatePreview.vue
@@ -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;
diff --git a/apps/files/src/components/TransferOwnershipDialogue.vue b/apps/files/src/components/TransferOwnershipDialogue.vue
index 5496c9edc92..6b8e0eb77ba 100644
--- a/apps/files/src/components/TransferOwnershipDialogue.vue
+++ b/apps/files/src/components/TransferOwnershipDialogue.vue
@@ -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;
diff --git a/apps/files/src/views/Navigation.vue b/apps/files/src/views/Navigation.vue
index 9570cb1be66..1420e8e1d9e 100644
--- a/apps/files/src/views/Navigation.vue
+++ b/apps/files/src/views/Navigation.vue
@@ -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 {
diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue
index ca7afac7780..6bf558181d2 100644
--- a/apps/files/src/views/Sidebar.vue
+++ b/apps/files/src/views/Sidebar.vue
@@ -612,7 +612,7 @@ export default {
}
.svg-icon {
- ::v-deep svg {
+ :deep(svg) {
width: 20px;
height: 20px;
fill: currentColor;
diff --git a/apps/files/src/views/TemplatePicker.vue b/apps/files/src/views/TemplatePicker.vue
index a62b6f76c6a..f3c7aadf2e2 100644
--- a/apps/files/src/views/TemplatePicker.vue
+++ b/apps/files/src/views/TemplatePicker.vue
@@ -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;
}
diff --git a/apps/files_external/css/settings.scss b/apps/files_external/css/settings.scss
index 8ffdc769dfb..f83c74a9122 100644
--- a/apps/files_external/css/settings.scss
+++ b/apps/files_external/css/settings.scss
@@ -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;
diff --git a/apps/files_sharing/css/icons.scss b/apps/files_sharing/css/icons.scss
index a6c000126f3..3307a9fa4cb 100644
--- a/apps/files_sharing/css/icons.scss
+++ b/apps/files_sharing/css/icons.scss
@@ -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);
}
\ No newline at end of file
diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss
index 29807e43853..645aeeff357 100644
--- a/apps/files_sharing/css/public.scss
+++ b/apps/files_sharing/css/public.scss
@@ -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 {
diff --git a/apps/files_sharing/css/publicView.scss b/apps/files_sharing/css/publicView.scss
index 32def00193d..9f61141d330 100644
--- a/apps/files_sharing/css/publicView.scss
+++ b/apps/files_sharing/css/publicView.scss
@@ -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';
diff --git a/apps/files_sharing/src/components/SharingEntryLink.vue b/apps/files_sharing/src/components/SharingEntryLink.vue
index df7bf298483..c077c467545 100644
--- a/apps/files_sharing/src/components/SharingEntryLink.vue
+++ b/apps/files_sharing/src/components/SharingEntryLink.vue
@@ -917,7 +917,7 @@ export default {
}
}
- ::v-deep .avatar-link-share {
+ :deep(.avatar-link-share) {
background-color: var(--color-primary-element);
}
diff --git a/apps/files_sharing/src/views/SharingDetailsTab.vue b/apps/files_sharing/src/views/SharingDetailsTab.vue
index 0878c5d289d..4711103c80e 100644
--- a/apps/files_sharing/src/views/SharingDetailsTab.vue
+++ b/apps/files_sharing/src/views/SharingDetailsTab.vue
@@ -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);
}
}
diff --git a/apps/oauth2/src/App.vue b/apps/oauth2/src/App.vue
index 255da9a0943..a6aca19bbfa 100644
--- a/apps/oauth2/src/App.vue
+++ b/apps/oauth2/src/App.vue
@@ -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;
diff --git a/apps/oauth2/src/components/OAuthItem.vue b/apps/oauth2/src/components/OAuthItem.vue
index 567cf88b63c..e9265b48564 100644
--- a/apps/oauth2/src/components/OAuthItem.vue
+++ b/apps/oauth2/src/components/OAuthItem.vue
@@ -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;
diff --git a/apps/settings/src/components/AppStoreSidebar/AppDetailsTab.vue b/apps/settings/src/components/AppStoreSidebar/AppDetailsTab.vue
index f70696f4100..e66f712c1aa 100644
--- a/apps/settings/src/components/AppStoreSidebar/AppDetailsTab.vue
+++ b/apps/settings/src/components/AppStoreSidebar/AppDetailsTab.vue
@@ -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);
diff --git a/apps/settings/src/components/BasicSettings/BackgroundJob.vue b/apps/settings/src/components/BasicSettings/BackgroundJob.vue
index 4924014b78a..291be810944 100644
--- a/apps/settings/src/components/BasicSettings/BackgroundJob.vue
+++ b/apps/settings/src/components/BasicSettings/BackgroundJob.vue
@@ -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;
}
diff --git a/apps/settings/src/components/BasicSettings/ProfileSettings.vue b/apps/settings/src/components/BasicSettings/ProfileSettings.vue
index 86126c16b29..910a02ab454 100644
--- a/apps/settings/src/components/BasicSettings/ProfileSettings.vue
+++ b/apps/settings/src/components/BasicSettings/ProfileSettings.vue
@@ -80,6 +80,3 @@ export default {
},
}
</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/apps/settings/src/components/Markdown.vue b/apps/settings/src/components/Markdown.vue
index c22bf389585..36535e46763 100644
--- a/apps/settings/src/components/Markdown.vue
+++ b/apps/settings/src/components/Markdown.vue
@@ -100,7 +100,7 @@ export default {
</script>
<style scoped lang="scss">
-.settings-markdown::v-deep {
+.settings-markdown :deep {
a {
text-decoration: underline;
&::after {
diff --git a/apps/settings/src/components/PersonalInfo/AvatarSection.vue b/apps/settings/src/components/PersonalInfo/AvatarSection.vue
index 79eba665cd4..b75efaf6fb3 100644
--- a/apps/settings/src/components/PersonalInfo/AvatarSection.vue
+++ b/apps/settings/src/components/PersonalInfo/AvatarSection.vue
@@ -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%;
}
}
diff --git a/apps/settings/src/components/PersonalInfo/BirthdaySection.vue b/apps/settings/src/components/PersonalInfo/BirthdaySection.vue
index 633794d9d5d..f5171d388b7 100644
--- a/apps/settings/src/components/PersonalInfo/BirthdaySection.vue
+++ b/apps/settings/src/components/PersonalInfo/BirthdaySection.vue
@@ -118,7 +118,7 @@ export default {
section {
padding: 10px 10px;
- &::v-deep button:disabled {
+ :deep(button:disabled) {
cursor: default;
}
diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
index 094b3bacc04..58a3d609866 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
@@ -104,7 +104,7 @@ export default {
box-shadow: 0 0 3px var(--color-box-shadow);
& *,
- &::v-deep * {
+ &:deep(*) {
cursor: default;
}
}
diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue
index f5f71eed075..22c03f72697 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue
@@ -82,7 +82,7 @@ export default {
section {
padding: 10px 10px;
- &::v-deep button:disabled {
+ &:deep(button:disabled) {
cursor: default;
}
}
diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue
index a780883eade..8acec883842 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue
@@ -118,7 +118,7 @@ section {
pointer-events: none;
& *,
- &::v-deep * {
+ &:deep(*) {
cursor: default;
pointer-events: none;
}
diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue
index 51c0203eb7f..15a98ca528f 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue
@@ -142,7 +142,7 @@ export default {
pointer-events: none;
& *,
- &::v-deep * {
+ &:deep(*) {
cursor: default;
pointer-events: none;
}
diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue
index 228ead554e2..f6f694f1a0e 100644
--- a/apps/settings/src/components/UserList.vue
+++ b/apps/settings/src/components/UserList.vue
@@ -398,7 +398,7 @@ export default {
</script>
<style lang="scss" scoped>
-@import './Users/shared/styles.scss';
+@use './Users/shared/styles' as *;
.empty {
:deep {
diff --git a/apps/settings/src/components/Users/UserListFooter.vue b/apps/settings/src/components/Users/UserListFooter.vue
index 9095e67b764..d3667a38580 100644
--- a/apps/settings/src/components/Users/UserListFooter.vue
+++ b/apps/settings/src/components/Users/UserListFooter.vue
@@ -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;
diff --git a/apps/settings/src/components/Users/UserListHeader.vue b/apps/settings/src/components/Users/UserListHeader.vue
index 93a0582c8a4..99a4126924f 100644
--- a/apps/settings/src/components/Users/UserListHeader.vue
+++ b/apps/settings/src/components/Users/UserListHeader.vue
@@ -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>
diff --git a/apps/settings/src/components/Users/UserRow.vue b/apps/settings/src/components/Users/UserRow.vue
index af0879573c9..7dea5091f3b 100644
--- a/apps/settings/src/components/Users/UserRow.vue
+++ b/apps/settings/src/components/Users/UserRow.vue
@@ -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);
diff --git a/apps/theming/src/UserTheming.vue b/apps/theming/src/UserTheming.vue
index 4766886be90..d3c954c6051 100644
--- a/apps/theming/src/UserTheming.vue
+++ b/apps/theming/src/UserTheming.vue
@@ -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);
diff --git a/apps/theming/src/components/BackgroundSettings.vue b/apps/theming/src/components/BackgroundSettings.vue
index f5a082b3490..5a863fdf15f 100644
--- a/apps/theming/src/components/BackgroundSettings.vue
+++ b/apps/theming/src/components/BackgroundSettings.vue
@@ -339,7 +339,6 @@ export default {
background-size: cover;
&__filepicker {
- background-color: var(--color-main-text);
background-color: var(--color-background-dark);
&.background--active {
diff --git a/apps/theming/src/components/ItemPreview.vue b/apps/theming/src/components/ItemPreview.vue
index facd2960405..4d835248229 100644
--- a/apps/theming/src/components/ItemPreview.vue
+++ b/apps/theming/src/components/ItemPreview.vue
@@ -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;
diff --git a/apps/theming/src/components/admin/AppMenuSection.vue b/apps/theming/src/components/admin/AppMenuSection.vue
index fb8fdc67f98..68ac785092b 100644
--- a/apps/theming/src/components/admin/AppMenuSection.vue
+++ b/apps/theming/src/components/admin/AppMenuSection.vue
@@ -115,6 +115,7 @@ export default defineComponent({
h3, h4 {
font-weight: bold;
}
+
h4, h5 {
margin-block-start: 12px;
}
diff --git a/apps/theming/src/components/admin/CheckboxField.vue b/apps/theming/src/components/admin/CheckboxField.vue
index e214c3417e1..e7307fcb7bc 100644
--- a/apps/theming/src/components/admin/CheckboxField.vue
+++ b/apps/theming/src/components/admin/CheckboxField.vue
@@ -75,7 +75,7 @@ export default {
</script>
<style lang="scss" scoped>
-@import './shared/field.scss';
+@use './shared/field' as *;
.field {
&__description {
diff --git a/apps/theming/src/components/admin/ColorPickerField.vue b/apps/theming/src/components/admin/ColorPickerField.vue
index 8e6433064ec..a55c178d8c0 100644
--- a/apps/theming/src/components/admin/ColorPickerField.vue
+++ b/apps/theming/src/components/admin/ColorPickerField.vue
@@ -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);
}
diff --git a/apps/theming/src/components/admin/FileInputField.vue b/apps/theming/src/components/admin/FileInputField.vue
index b184779ce5c..0852676ed0b 100644
--- a/apps/theming/src/components/admin/FileInputField.vue
+++ b/apps/theming/src/components/admin/FileInputField.vue
@@ -209,7 +209,7 @@ export default {
</script>
<style lang="scss" scoped>
-@import './shared/field.scss';
+@use './shared/field' as *;
.field {
&__loading-icon {
diff --git a/apps/user_status/src/components/PreviousStatus.vue b/apps/user_status/src/components/PreviousStatus.vue
index 7c24af8c110..b362cf17d56 100644
--- a/apps/user_status/src/components/PreviousStatus.vue
+++ b/apps/user_status/src/components/PreviousStatus.vue
@@ -94,6 +94,7 @@ export default {
}
}
}
+
.backup-status {
&__reset-button {
justify-content: flex-end;
diff --git a/apps/weather_status/src/App.vue b/apps/weather_status/src/App.vue
index f1ef28427f4..5dd1d96eea3 100644
--- a/apps/weather_status/src/App.vue
+++ b/apps/weather_status/src/App.vue
@@ -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));
}
diff --git a/apps/workflowengine/src/components/Check.vue b/apps/workflowengine/src/components/Check.vue
index 4661695f4c2..6992c7ceee0 100644
--- a/apps/workflowengine/src/components/Check.vue
+++ b/apps/workflowengine/src/components/Check.vue
@@ -190,9 +190,11 @@ export default {
margin-bottom: 5px;
}
}
+
input[type=text] {
margin: 0;
}
+
.invalid {
border-color: var(--color-error) !important;
}
diff --git a/apps/workflowengine/src/components/Checks/FileSystemTag.vue b/apps/workflowengine/src/components/Checks/FileSystemTag.vue
index f932fd9c699..69d2db0b85b 100644
--- a/apps/workflowengine/src/components/Checks/FileSystemTag.vue
+++ b/apps/workflowengine/src/components/Checks/FileSystemTag.vue
@@ -49,7 +49,3 @@ export default {
},
}
</script>
-
-<style scoped>
-
-</style>
diff --git a/apps/workflowengine/src/components/Checks/RequestTime.vue b/apps/workflowengine/src/components/Checks/RequestTime.vue
index 1a09fcbfb31..f48ec8cd270 100644
--- a/apps/workflowengine/src/components/Checks/RequestTime.vue
+++ b/apps/workflowengine/src/components/Checks/RequestTime.vue
@@ -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;
}
diff --git a/apps/workflowengine/src/components/Checks/RequestURL.vue b/apps/workflowengine/src/components/Checks/RequestURL.vue
index b91fdec5872..b6a0bbd80e6 100644
--- a/apps/workflowengine/src/components/Checks/RequestURL.vue
+++ b/apps/workflowengine/src/components/Checks/RequestURL.vue
@@ -117,6 +117,7 @@ export default {
input[type='text'] {
width: 100%;
}
+
input[type='text'] {
min-height: 48px;
}
diff --git a/apps/workflowengine/src/components/Checks/RequestUserAgent.vue b/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
index 15e7dfdae72..be4075a1370 100644
--- a/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
+++ b/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
@@ -109,6 +109,7 @@ export default {
input[type='text'] {
width: 100%;
}
+
input[type='text'] {
min-height: 48px;
}
diff --git a/apps/workflowengine/src/components/Event.vue b/apps/workflowengine/src/components/Event.vue
index af00ee9df71..52a14bd08ec 100644
--- a/apps/workflowengine/src/components/Event.vue
+++ b/apps/workflowengine/src/components/Event.vue
@@ -94,6 +94,7 @@ export default {
max-width: 550px;
}
}
+
.isComplex {
img {
vertical-align: text-top;
diff --git a/apps/workflowengine/src/components/Operation.vue b/apps/workflowengine/src/components/Operation.vue
index 2936f71e131..c24471c8fd9 100644
--- a/apps/workflowengine/src/components/Operation.vue
+++ b/apps/workflowengine/src/components/Operation.vue
@@ -40,5 +40,5 @@ export default {
</script>
<style scoped lang="scss">
- @import "./../styles/operation";
+@use "./../styles/operation" as *;
</style>
diff --git a/apps/workflowengine/src/components/Rule.vue b/apps/workflowengine/src/components/Rule.vue
index 234debdde34..80745643084 100644
--- a/apps/workflowengine/src/components/Rule.vue
+++ b/apps/workflowengine/src/components/Rule.vue
@@ -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;
}
diff --git a/apps/workflowengine/src/components/Workflow.vue b/apps/workflowengine/src/components/Workflow.vue
index 8ea22690425..632be97c509 100644
--- a/apps/workflowengine/src/components/Workflow.vue
+++ b/apps/workflowengine/src/components/Workflow.vue
@@ -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);
}
diff --git a/apps/workflowengine/src/styles/operation.scss b/apps/workflowengine/src/styles/operation.scss
index e82ded827fa..b62ac16d6b4 100644
--- a/apps/workflowengine/src/styles/operation.scss
+++ b/apps/workflowengine/src/styles/operation.scss
@@ -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;
diff --git a/core/css/apps.scss b/core/css/apps.scss
index 507aa920e03..751d4820f0e 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -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;
diff --git a/core/css/guest.scss b/core/css/guest.scss
index 125f7ebf0d9..ef7d733165a 100644
--- a/core/css/guest.scss
+++ b/core/css/guest.scss
@@ -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));
diff --git a/core/css/icons.scss b/core/css/icons.scss
index 2d9327d05a9..df6edea1f15 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -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';
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index f06689ad5e7..27136b69ad4 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -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;
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index 363aa63697d..ebb175a5793 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -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 {
diff --git a/core/css/server.scss b/core/css/server.scss
index b056ed81ecf..593556a65f8 100644
--- a/core/css/server.scss
+++ b/core/css/server.scss
@@ -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';
diff --git a/core/css/styles.scss b/core/css/styles.scss
index de30a8badce..7c733004650 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -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;
diff --git a/core/css/systemtags.scss b/core/css/systemtags.scss
index 722425d6d02..fcb9c09a144 100644
--- a/core/css/systemtags.scss
+++ b/core/css/systemtags.scss
@@ -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 {
diff --git a/core/css/toast.scss b/core/css/toast.scss
index 323a26b28ff..c3af0b0a5d6 100644
--- a/core/css/toast.scss
+++ b/core/css/toast.scss
@@ -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);
}
diff --git a/core/css/variables.scss b/core/css/variables.scss
index 35b1ecab863..f750b844f0f 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -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) {
diff --git a/core/src/components/UnifiedSearch/SearchResult.vue b/core/src/components/UnifiedSearch/SearchResult.vue
index 93e104f1a20..231ac97642c 100644
--- a/core/src/components/UnifiedSearch/SearchResult.vue
+++ b/core/src/components/UnifiedSearch/SearchResult.vue
@@ -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>
diff --git a/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue b/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue
index 44d1d716375..67853490d9f 100644
--- a/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue
+++ b/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue
@@ -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);
diff --git a/core/src/jquery/css/jquery-ui-fixes.scss b/core/src/jquery/css/jquery-ui-fixes.scss
index a5fee7ea0d9..637f4bfe14b 100644
--- a/core/src/jquery/css/jquery-ui-fixes.scss
+++ b/core/src/jquery/css/jquery-ui-fixes.scss
@@ -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;
diff --git a/core/src/jquery/css/jquery.ocdialog.scss b/core/src/jquery/css/jquery.ocdialog.scss
index a1946bc648f..b950d98c381 100644
--- a/core/src/jquery/css/jquery.ocdialog.scss
+++ b/core/src/jquery/css/jquery.ocdialog.scss
@@ -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%;
}
diff --git a/core/src/views/LegacyUnifiedSearch.vue b/core/src/views/LegacyUnifiedSearch.vue
index fdf4c95a4cc..0bb55dc53e4 100644
--- a/core/src/views/LegacyUnifiedSearch.vue
+++ b/core/src/views/LegacyUnifiedSearch.vue
@@ -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;
}
}
diff --git a/core/src/views/Login.vue b/core/src/views/Login.vue
index d6c88d607ad..a13109bb766 100644
--- a/core/src/views/Login.vue
+++ b/core/src/views/Login.vue
@@ -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;
}
diff --git a/core/src/views/UnsupportedBrowser.vue b/core/src/views/UnsupportedBrowser.vue
index daeac632e3c..d8d7dc55208 100644
--- a/core/src/views/UnsupportedBrowser.vue
+++ b/core/src/views/UnsupportedBrowser.vue
@@ -164,7 +164,8 @@ $spacing: 30px;
.empty-content {
margin: 0;
- &::v-deep .empty-content__icon {
+
+ :deep(.empty-content__icon) {
opacity: 1;
}
}
diff --git a/stylelint.config.js b/stylelint.config.js
index 03e25cc5bdb..3b0f21b59f5 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -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