diff options
Diffstat (limited to 'core/css')
| -rw-r--r-- | core/css/apps.scss | 8 | ||||
| -rw-r--r-- | core/css/guest.scss | 109 | ||||
| -rw-r--r-- | core/css/icons.scss | 4 | ||||
| -rw-r--r-- | core/css/inputs.scss | 322 | ||||
| -rw-r--r-- | core/css/mobile.scss | 2 | ||||
| -rw-r--r-- | core/css/server.scss | 20 | ||||
| -rw-r--r-- | core/css/styles.scss | 37 | ||||
| -rw-r--r-- | core/css/systemtags.scss | 5 | ||||
| -rw-r--r-- | core/css/toast.scss | 4 | ||||
| -rw-r--r-- | core/css/variables.scss | 2 |
10 files changed, 282 insertions, 231 deletions
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,60 +357,58 @@ 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); } } - &: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; + } + } } @@ -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); - } +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 */ } } } @@ -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) { |