.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;
padding: 16px;
cursor: grab;
- &, ::v-deep * {
+ &,
+ :deep(*) {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
.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);
},
}
</script>
-
-<style lang="scss" scoped>
-</style>
&__picker {
flex: 1 auto;
- ::v-deep .native-datetime-picker--input {
+ :deep(.native-datetime-picker--input) {
margin-bottom: 0;
}
}
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;
font-weight: bold;
}
}
+
.grid-table {
display: grid;
margin-bottom: 32px;
grid-template-columns: min-content auto min-content;
max-width: 500px;
}
+
.button {
align-self: flex-end;
}
+
:deep(.label-weekday) {
position: relative;
display: inline-flex;
* :deep(a) {
text-decoration: underline;
}
+
.settings-hint {
margin-top: -.2em;
margin-bottom: 1em;
--icon-preview-size: 32px;
--fixed-block-start-position: var(--default-clickable-area);
-
overflow: auto;
height: 100%;
will-change: scroll-position;
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;
--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));
.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);
},
}
</script>
-<style>
-</style>
&__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;
.middle-align {
vertical-align: middle;
}
+
p {
margin-top: 12px;
margin-bottom: 12px;
}
+
.new-owner-row {
display: flex;
flex-wrap: wrap;
max-width: 280px;
}
}
+
.transfer-select-row {
span {
margin-inline-end: 8px;
</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::v-deep .app-navigation-entry.active .button-vue.icon-collapse:not(:hover) {
- color: var(--color-primary-element-text);
-}
+.app-navigation {
+ :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 {
}
.svg-icon {
- ::v-deep svg {
+ :deep(svg) {
width: 20px;
height: 20px;
fill: currentColor;
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;
}
// Make sure we're relative for the loading emptycontent on top
- ::v-deep .modal-container {
+ :deep(.modal-container) {
position: relative;
}
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;
-}
+ &.mountOptionsToggle,
+ &.remove,
+ &.save {
+ position: relative;
+ padding: 0 !important;
+ width: 44px;
+ [class^='icon-'],
+ [class*=' icon-'] {
+ width: 44px;
+ height: 44px;
+ margin: 3px;
+ opacity: 0.5;
+ padding: 14px;
+ vertical-align: text-bottom;
+ cursor: pointer;
+ &:hover {
+ opacity: 1;
+ }
+ }
+ }
-#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;
-}
+ &.mountPoint,
+ &.backend,
+ &.authentication,
+ &.configuration {
+ min-width: 160px;
+ width: 15%;
+ }
-#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; }
+ &.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;
+ }
+ }
-#externalStorage td {
- height: 50px;
- &.mountOptionsToggle,
- &.remove,
- &.save {
- position: relative;
- padding: 0 !important;
- width: 44px;
- [class^='icon-'],
- [class*=' icon-'] {
- width: 44px;
- height: 44px;
- margin: 3px;
+ > 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;
#externalStorage td.backend {
white-space: normal;
}
+
#externalStorage td.configuration > * {
white-space: nowrap;
}
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;
.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
margin-top: 400px;
}
-#imgframe .plyr {
- top: 0px !important;
-}
-
#imgframe .text-preview {
display: inline-block;
position: relative;
}
#imgframe .plyr {
+ top: 0px !important;
max-height: 100%;
}
-
.app-files_sharing #app-content footer {
position: sticky !important;
}
#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 {
* 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';
}
}
- ::v-deep .avatar-link-share {
+ :deep(.avatar-link-share) {
background-color: var(--color-primary-element);
}
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:
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')
+ }
}
}
},
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*/
}
/*
- 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 {
}
&__delete {
- >button:first-child {
+ > button:first-child {
color: rgb(223, 7, 7);
}
}
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;
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;
border-color: var(--color-error);
background: var(--color-main-background);
}
+
.force:hover,
.force:active {
color: var(--color-main-background);
background-color: var(--color-error);
width: initial;
}
+
.warning {
margin-top: 8px;
padding: 5px;
background-color: var(--color-warning);
width: initial;
}
+
.ajaxSwitch {
margin-top: 1rem;
}
},
}
</script>
-
-<style lang="scss" scoped>
-</style>
</script>
<style scoped lang="scss">
-.settings-markdown::v-deep {
+.settings-markdown :deep {
a {
text-decoration: underline;
&::after {
grid-row: 1/3;
padding: 10px 10px;
}
+
.avatar {
&__container {
margin: calc(var(--default-grid-baseline) * 2) auto 0 auto;
justify-content: space-between;
}
- &::v-deep .cropper-view-box {
+ :deep(.cropper-view-box) {
border-radius: 50%;
}
}
section {
padding: 10px 10px;
- &::v-deep button:disabled {
+ :deep(button:disabled) {
cursor: default;
}
box-shadow: 0 0 3px var(--color-box-shadow);
& *,
- &::v-deep * {
+ &:deep(*) {
cursor: default;
}
}
section {
padding: 10px 10px;
- &::v-deep button:disabled {
+ &:deep(button:disabled) {
cursor: default;
}
}
pointer-events: none;
& *,
- &::v-deep * {
+ &:deep(*) {
cursor: default;
pointer-events: none;
}
pointer-events: none;
& *,
- &::v-deep * {
+ &:deep(*) {
cursor: default;
pointer-events: none;
}
</script>
<style lang="scss" scoped>
-@import './Users/shared/styles.scss';
+@use './Users/shared/styles' as *;
.empty {
:deep {
</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;
</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>
</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);
}
.row {
- @include cell;
+ @include styles.cell;
&__cell {
border-bottom: 1px solid var(--color-border);
}
// Proper highlight for links and focus feedback
- &::v-deep a {
+ :deep(a) {
font-weight: bold;
&:hover,
&__preview-list {
--gap: 30px;
-
display: grid;
margin-top: var(--gap);
column-gap: var(--gap);
background-size: cover;
&__filepicker {
- background-color: var(--color-main-text);
background-color: var(--color-background-dark);
&.background--active {
.theming__preview {
// We make previews on 16/10 screens
--ratio: 16;
-
position: relative;
display: flex;
justify-content: flex-start;
h3, h4 {
font-weight: bold;
}
+
h4, h5 {
margin-block-start: 12px;
}
</script>
<style lang="scss" scoped>
-@import './shared/field.scss';
+@use './shared/field' as *;
.field {
&__description {
</script>
<style lang="scss" scoped>
-@import './shared/field.scss';
+@use './shared/field' as *;
+
.description {
color: var(--color-text-maxcontrast);
}
</script>
<style lang="scss" scoped>
-@import './shared/field.scss';
+@use './shared/field' as *;
.field {
&__loading-icon {
}
}
}
+
.backup-status {
&__reset-button {
justify-content: flex-end;
align-items: center;
justify-content: center;
}
+
.weather-image {
width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));
}
margin-bottom: 5px;
}
}
+
input[type=text] {
margin: 0;
}
+
.invalid {
border-color: var(--color-error) !important;
}
},
}
</script>
-
-<style scoped>
-
-</style>
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;
}
input[type='text'] {
width: 100%;
}
+
input[type='text'] {
min-height: 48px;
}
input[type='text'] {
width: 100%;
}
+
input[type='text'] {
min-height: 48px;
}
max-width: 550px;
}
}
+
.isComplex {
img {
vertical-align: text-top;
</script>
<style scoped lang="scss">
- @import "./../styles/operation";
+@use "./../styles/operation" as *;
</style>
margin-inline-end: 20px;
}
}
+
.trigger p, .action p {
min-height: 34px;
display: flex;
max-width: 300px;
}
}
+
.trigger p:first-child span {
padding-top: 3px;
}
+
.trigger p:last-child {
padding-top: 8px;
}
</script>
<style scoped lang="scss">
+ @use "./../styles/operation";
+
#workflowengine {
border-bottom: 1px solid var(--color-border);
}
+
.section {
max-width: 100vw;
margin-bottom: 0;
}
}
+
.actions {
display: flex;
flex-wrap: wrap;
flex-basis: 250px;
}
}
+
.actions__more {
margin-bottom: 10px;
}
padding-bottom: 0;
}
- @import "./../styles/operation";
-
.actions__item.more {
background-color: var(--color-background-dark);
}
margin-inline: -1px 20px;
margin-bottom: 20px;
}
+
.actions__item .icon {
display: block;
width: 100%;
margin-bottom: 10px;
background-repeat: no-repeat;
}
+
.actions__item__description {
text-align: center;
flex-grow: 1;
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;
#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;
background-repeat: no-repeat;
background-position: center;
border: none;
- border-radius: 0;
outline: none !important;
box-shadow: none;
content: ' ';
}
}
}
+
body[dir='rtl'] {
.app-navigation-personal,
.app-navigation-administration {
background-position: left 12px center;
}
}
+
body[dir='rtl'] #app-settings-header .settings-button {
&::before {
background-position: right 14px center;
}
}
}
+
.sub-section {
position: relative;
margin-top: 10px;
}
}
}
+
.tabsContainer {
.tab {
padding: 0 15px 15px;
body[dir='ltr'] .tabsContainer {
clear: left;
}
+
body[dir='rtl'] .tabsContainer {
clear: right;
}
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;
* 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);
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'));
margin: auto;
padding: 0;
}
+
form.install-form {
max-width: 300px;
}
form.install-form fieldset input {
width: 100%;
}
+
form.install-form .strengthify-wrapper {
bottom: 17px;
width: calc(100% - 8px);
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;
}
#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 {
}
}
-
-
#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;
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'],
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,
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;
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;
overflow: hidden;
height: 3px;
}
+
.tooltip-inner {
font-weight: bold;
padding: 3px 6px;
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;
}
width: 320px;
box-sizing: border-box;
}
+
.two-factor-provider {
display: flex;
border-radius: 3px; /* --border-radius */
font-weight: normal;
}
}
+
.two-factor-icon {
width: 100px;
display: block;
margin: 0 auto;
}
+
.two-factor-submit {
width: 100%;
padding: 10px;
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;
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;
.infogroup {
margin: 8px 0;
}
+
.infogroup:last-child {
margin-bottom: 0;
}
+
p.info {
margin: 20px auto;
-webkit-user-select: none;
body[dir='ltr'] .update img.float-spinner {
float: left;
}
+
body[dir='rtl'] .update img.float-spinner {
float: right;
}
text-align: start;
margin-bottom: 12px;
}
+
.update-show-detailed {
padding: 12px;
display: block;
.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');
}
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;
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;
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');
}
.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));
* 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';
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;
}
.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);
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);
}
}
}
+
button:not(
.button-vue,
.action-button,
}
/* 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);
}
}
- &:active,
- &:hover,
- &:focus {
- + .icon-confirm {
+ + .icon-confirm {
+ &:active,
+ &:hover,
+ &:focus {
border-color: var(--color-primary-element) !important;
- border-inline-start-color: transparent !important;
- /* above previous input */
- z-index: 2;
+ 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;
+ }
+ }
}
.button img {
cursor: pointer;
}
+
select,
.button.multiselect {
font-weight: normal;
$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);
- }
+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;
+ }
+ &: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;
- }
+ // Detail description below label of checkbox or radio button
+ & + label ~ em {
+ display: inline-block;
+ margin-inline-start: 25px;
}
- &.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');
- }
+ & + 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);
- }
+ /* 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);
}
- &.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 */
- }
+ &: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 */
}
}
}
cursor: pointer;
}
}
+
div.select2-container-multi {
.select2-choices,
&.select2-container-active .select2-choices {
}
}
}
+
div.select2-container {
margin: 3px;
margin-inline-start: 0;
transform: translate(4px);
}
}
+
.shake {
animation-name: shake;
animation-duration: .7s;
*/
@use 'variables';
-@media only screen and (width < variables.$breakpoint-mobile) {
+@media only screen and (width < #{variables.$breakpoint-mobile}) {
/* position share dropdown */
#dropdown {
* 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';
display: block;
}
-body {
- line-height: 1.5;
-}
-
table {
border-collapse: separate;
border-spacing: 0;
#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;
display: inline-block;
margin-inline-end: 6px;
}
+
#personal-show + label {
display: block;
inset-inline-end: 0;
}
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) {
}
}
-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;
}
.header-action {
+ opacity: .8;
+
&:hover, &:focus {
opacity: 1;
}
display: inline-flex;
height: 50px;
}
+
li.crumb {
display: inline-flex;
background-image: url('../img/breadcrumb.svg?v=1');
padding: 0;
width: 44px;
}
- &:not(:first-child) a {
- }
+
&:last-child {
font-weight: bold;
margin-inline-end: 10px;
.systemtags-select2-dropdown {
.select2-result-label {
+ height: 25px;
+
.checkmark {
visibility: hidden;
margin-inline: -5px 5px;
height: 25px;
width: 100%;
}
- .select2-result-label {
- height: 25px;
- }
}
.systemtags-select2-container {
}
}
}
+
.toastify.toastify-top {
inset-inline-end: 10px;
}
.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);
}
*/
// 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) {
$margin: 10px;
.result-items {
- &__item {
-
- ::v-deep a {
- border-radius: 12px;
- border: 2px solid transparent;
- border-radius: var(--border-radius-large) !important;
-
- &--focused {
- background-color: var(--color-background-hover);
- }
-
- &:active,
- &:hover,
- &:focus {
- background-color: var(--color-background-hover);
- border: 2px solid var(--color-border-maxcontrast);
- }
-
- * {
- 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;
-
- &--rounded {
- border-radius: math.div($clickable-area, 2);
- }
-
- &--no-preview {
- background-size: 32px;
- }
-
- &--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);
- }
-
- img {
- // Make sure to keep ratio
- width: 100%;
- height: 100%;
-
- object-fit: cover;
- object-position: center;
- }
- }
-
- }
+ &__item:deep {
+
+ a {
+ border: 2px solid transparent;
+ border-radius: var(--border-radius-large) !important;
+
+ &--focused {
+ background-color: var(--color-background-hover);
+ }
+
+ &:active,
+ &:hover,
+ &:focus {
+ background-color: var(--color-background-hover);
+ border: 2px solid var(--color-border-maxcontrast);
+ }
+
+ * {
+ 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;
+
+ &--rounded {
+ border-radius: math.div($clickable-area, 2);
+ }
+
+ &--no-preview {
+ background-size: 32px;
+ }
+
+ &--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);
+ }
+
+ img {
+ // Make sure to keep ratio
+ width: 100%;
+ height: 100%;
+
+ object-fit: cover;
+ object-position: center;
+ }
+ }
+
+ }
}
</style>
<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);
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);
}
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,
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 {
font-weight: bold;
color: var(--color-main-text);
}
+
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
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 {
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 {
.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;
}
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;
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;
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;
z-index: 100001;
position: fixed;
top: 0;
- left: 0;
+ inset-inline-start: 0;
width: 100%;
height: 100%;
}
}
}
- &__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%;
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 {
}
}
- &-reset, &-submit {
+ &-reset,
+ &-submit {
position: absolute;
top: 0;
inset-inline-end: 4px;
}
}
- .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;
}
}
.fade-enter-active, .fade-leave-active {
transition: opacity .3s;
}
+
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.empty-content {
margin: 0;
- &::v-deep .empty-content__icon {
+
+ :deep(.empty-content__icon) {
opacity: 1;
}
}
},
],
},
+ 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
projects / nextcloud-server.git / commitdiff