diff options
Diffstat (limited to 'core/css/styles.scss')
| -rw-r--r-- | core/css/styles.scss | 122 |
1 files changed, 73 insertions, 49 deletions
diff --git a/core/css/styles.scss b/core/css/styles.scss index 030d8a86527..7c733004650 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -1,4 +1,4 @@ -/** +/*! * SPDX-FileCopyrightText: 2016-2024 Nextcloud GmbH and Nextcloud contributors * SPDX-FileCopyrightText: 2016 ownCloud, Inc. * SPDX-License-Identifier: AGPL-3.0-or-later @@ -6,6 +6,11 @@ @use 'sass:math'; @use 'variables'; +:root { + font-size: var(--default-font-size); + line-height: var(--default-line-height); +} + 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, main { margin: 0; padding: 0; @@ -15,8 +20,7 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr font-family: inherit; vertical-align: baseline; cursor: default; - scrollbar-color: var(--color-border-dark) transparent; - scrollbar-width: thin; + scrollbar-color: var(--color-scrollbar); } .js-focus-visible :focus:not(.focus-visible) { @@ -39,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; @@ -50,7 +50,7 @@ table { } caption, th, td { - text-align: left; + text-align: start; font-weight: normal; } @@ -125,7 +125,7 @@ body { position: fixed; top: 0; bottom: 0; - left: 0; + inset-inline-start: 0; height: 100%; width: 100%; z-index: 9000; @@ -238,16 +238,23 @@ body { } /* Show password toggle */ - -#show, #dbpassword { +#show, +#dbpassword { position: absolute; - right: 1em; + inset-inline-end: 1em; top: .8em; + /* Cannot use inline-start and :dir to support Samsung Internet */ float: right; } +body[dir='rtl'] #show, +body[dir='rtl'] #dbpassword { + /* Cannot use inline-start and :dir to support Samsung Internet */ + float: left; +} + #show + label, #dbpassword + label { - right: 21px; + inset-inline-end: 21px; top: 15px !important; margin: -14px !important; padding: 14px !important; @@ -256,6 +263,7 @@ body { #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; @@ -289,19 +297,20 @@ body { } #pass2, input[name='personal-password-clone'] { - padding-right: 30px; + padding-inline-end: 30px; } .personal-show-container { position: relative; display: inline-block; - margin-right: 6px; + margin-inline-end: 6px; } + #personal-show + label { display: block; - right: 0; + inset-inline-end: 0; margin-top: -43px; - margin-right: -4px; + margin-inline-end: -4px; padding: 22px; } @@ -333,13 +342,13 @@ body { } pre { white-space: pre-wrap; - text-align: left; + text-align: start; } } .error-wide { width: 700px; - margin-left: -200px !important; + margin-inline-start: -200px !important; .button { color: black !important; } @@ -374,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) { @@ -391,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; @@ -413,6 +417,8 @@ tr { } .header-action { + opacity: .8; + &:hover, &:focus { opacity: 1; } @@ -480,11 +486,10 @@ code { .ui-icon { opacity: .5; - &.ui-icon-circle-triangle-e { - background: url("../img/actions/arrow-right.svg") center center no-repeat; - } + &.ui-icon-circle-triangle-e, &.ui-icon-circle-triangle-w { - background: url("../img/actions/arrow-left.svg") center center no-repeat; + background-position: center center; + background-repeat: no-repeat; } } .ui-state-hover .ui-icon { @@ -524,6 +529,24 @@ code { } } +body[dir='ltr'] .ui-widget.ui-datepicker .ui-widget-header .ui-icon { + &.ui-icon-circle-triangle-e { + background: url("../img/actions/arrow-right.svg"); + } + &.ui-icon-circle-triangle-w { + background: url("../img/actions/arrow-left.svg"); + } +} + +body[dir='rtl'] .ui-widget.ui-datepicker .ui-widget-header .ui-icon { + &.ui-icon-circle-triangle-e { + background: url("../img/actions/arrow-left.svg"); + } + &.ui-icon-circle-triangle-w { + background: url("../img/actions/arrow-right.svg"); + } +} + .ui-datepicker-prev, .ui-datepicker-next { border: var(--color-border-dark); background: var(--color-main-background); @@ -561,7 +584,7 @@ code { } /* AM/PM fix */ table.ui-timepicker tr .ui-timepicker-hour-cell:first-child { - margin-left: 30px; + margin-inline-start: 30px; } .ui-timepicker-table { th { @@ -592,7 +615,7 @@ code { } &.ui-timepicker-hours { - border-right: 1px solid var(--color-border); + border-inline-end: 1px solid var(--color-border); } } } @@ -637,13 +660,14 @@ code { span.ui-icon { float: left; - margin: 3px 7px 30px 0; + margin-block: 3px 30px; + margin-inline: 0 7px; } /* ---- TOOLTIPS ---- */ .extra-data { - padding-right: 5px !important; + padding-inline-end: 5px !important; } /* ---- TAGS ---- */ @@ -689,6 +713,7 @@ span.ui-icon { display: inline-flex; height: 50px; } + li.crumb { display: inline-flex; background-image: url('../img/breadcrumb.svg?v=1'); @@ -698,7 +723,7 @@ li.crumb { background-size: auto 24px; flex: 0 0 auto; order: 1; - padding-right: 7px; + padding-inline-end: 7px; &.crumbmenu { order: 2; position: relative; @@ -714,12 +739,12 @@ li.crumb { // Fix because of the display flex .popovermenu { top: 100%; - margin-right: 3px; + margin-inline-end: 3px; ul { max-height: 345px; overflow-y: auto; overflow-x: hidden; - padding-right: 5px; + padding-inline-end: 5px; li.canDrop span:first-child { background-image: url('../img/filetypes/folder-drag-accept.svg?v=1') !important; } @@ -757,14 +782,13 @@ li.crumb { padding: 0; width: 44px; } - &:not(:first-child) a { - } + &:last-child { font-weight: bold; - margin-right: 10px; + margin-inline-end: 10px; // Allow multiple span next to the main 'a' a ~ span { - padding-left: 0; + padding-inline-start: 0; } } &:hover, &:focus, a:focus, &:active { |