aboutsummaryrefslogtreecommitdiffstats
path: root/core/css/styles.scss
diff options
context:
space:
mode:
Diffstat (limited to 'core/css/styles.scss')
-rw-r--r--core/css/styles.scss664
1 files changed, 121 insertions, 543 deletions
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 27e5675b53a..7c733004650 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -1,45 +1,48 @@
-/**
- * @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
- * @copyright Copyright (c) 2016, Lukas Reschke <lukas@statuscode.ch>
- * @copyright Copyright (c) 2016, Robin Appelman <robin@icewind.nl>
- * @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net>
- * @copyright Copyright (c) 2016, Joas Schilling <coding@schilljs.com>
- * @copyright Copyright (c) 2016, Morris Jobke <hey@morrisjobke.de>
- * @copyright Copyright (c) 2016, Christoph Wurst <christoph@winzerhof-wurst.at>
- * @copyright Copyright (c) 2016, Raghu Nayyar <hey@raghunayyar.com>
- * @copyright Copyright (c) 2011-2017, Jan-Christoph Borchardt <hey@jancborchardt.net>
- * @copyright Copyright (c) 2019-2020, Gary Kim <gary@garykim.dev>
- *
- * @license GNU AGPL version 3 or any later version
- *
+/*!
+ * SPDX-FileCopyrightText: 2016-2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-FileCopyrightText: 2016 ownCloud, Inc.
+ * SPDX-License-Identifier: AGPL-3.0-or-later
*/
+@use 'sass:math';
+@use 'variables';
-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 {
+: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;
border: 0;
- outline: 0;
font-weight: inherit;
font-size: 100%;
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) {
+ outline: none;
+}
+
+/** Let vue apps handle the focus themselves */
+.content:not(#content-vue) :focus-visible {
+ box-shadow: inset 0 0 0 2px var(--color-primary-element);
+ outline: none;
}
html, body {
height: 100%;
+ // disable pull-down-to-refresh on chromium mobile
+ overscroll-behavior-y: contain;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
display: block;
}
-body {
- line-height: 1.5;
-}
-
table {
border-collapse: separate;
border-spacing: 0;
@@ -47,7 +50,7 @@ table {
}
caption, th, td {
- text-align: left;
+ text-align: start;
font-weight: normal;
}
@@ -86,7 +89,6 @@ ul {
}
body {
- background-color: var(--color-main-background);
font-weight: normal;
/* bring the default font size up to 15px */
font-size: var(--default-font-size);
@@ -101,7 +103,7 @@ body {
.two-factor-provider {
text-align: center;
- width: 258px !important;
+ width: 100% !important;
display: inline-block;
margin-bottom: 0 !important;
background-color: var(--color-background-darker) !important;
@@ -123,13 +125,13 @@ body {
position: fixed;
top: 0;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
height: 100%;
width: 100%;
z-index: 9000;
text-align: center;
background-color: var(--color-background-darker);
- color: var(--color-primary-text);
+ color: var(--color-primary-element-text);
line-height: 125%;
font-size: 24px;
div {
@@ -140,10 +142,10 @@ body {
margin: 0px auto;
}
a {
- color: var(--color-primary-text);
+ color: var(--color-primary-element-text);
border-bottom: 2px dotted var(--color-main-background);
&:hover, &:focus {
- color: var(--color-primary-text-dark);
+ color: var(--color-primary-element-text-dark);
}
}
}
@@ -155,12 +157,16 @@ body {
height: 12px
}
+::-webkit-scrollbar-corner {
+ background-color: transparent;
+}
+
::-webkit-scrollbar-track-piece {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
- background: var(--color-border-dark);
+ background: var(--color-scrollbar);
border-radius: var(--border-radius-large);
border: 2px solid transparent;
background-clip: content-box;
@@ -171,57 +177,16 @@ body {
::selection {
background-color: var(--color-primary-element);
- color: var(--color-primary-text);
+ color: var(--color-primary-element-text);
}
/* CONTENT ------------------------------------------------------------------ */
-#controls {
- box-sizing: border-box;
- @include position('sticky');
- height: 44px;
- padding: 0;
- margin: 0;
- background-color: var(--color-main-background-translucent);
- z-index: 62; /* must be above the filelist sticky header and texteditor menubar */
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- display: flex;
- top: $header-height;
-}
-
-/* position controls for apps with app-navigation */
-
-.viewer-mode #app-navigation + #app-content #controls {
- left: 0;
-}
-
#app-navigation * {
box-sizing: border-box;
}
-#controls .actions {
- > div,
- & {
- > .button, button {
- box-sizing: border-box;
- display: inline-block;
- display: flex;
- height: 36px;
- width: 36px;
- padding: 9px; // width - border - icon width = 18px
- align-items: center;
- justify-content: center;
- }
- .button.hidden {
- display: none;
- }
- }
-}
-
/* EMPTY CONTENT DISPLAY ------------------------------------------------------------ */
#emptycontent,
@@ -273,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;
@@ -292,11 +264,17 @@ body {
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;
+ border-radius: 9999px;
+}
+
#show + label, #dbpassword + label, #personal-show + label {
position: absolute !important;
height: 20px;
width: 24px;
- background-image: var(--icon-toggle-000);
+ background-image: var(--icon-toggle-dark);
background-repeat: no-repeat;
background-position: center;
opacity: .3;
@@ -319,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;
}
@@ -341,13 +320,12 @@ body {
margin-top: 8px;
padding: 5px;
border-radius: var(--border-radius);
- color: var(--color-primary-text);
- background-color: var(--color-warning);
+ color: var(--color-main-text);
+ background-color: rgba(var(--color-warning-rgb), 0.2);
}
.warning {
legend, a {
- color: var(--color-primary-text) !important;
font-weight: bold !important;
}
}
@@ -364,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;
}
@@ -400,56 +378,21 @@ td.avatar {
border-radius: 0;
}
-#notification-container {
- left: 50%;
- max-width: 60%;
- position: fixed;
- top: 0;
- text-align: center;
- transform: translateX(-50%);
- z-index: 8000;
-}
-
-#notification {
- margin: 0 auto;
- z-index: 8000;
- background-color: var(--color-main-background);
- border: 0;
- padding: 1px 8px;
- display: none;
- position: relative;
- top: 0;
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
- opacity: .9;
- span {
- cursor: pointer;
- margin-left: 1em;
- }
- overflow-x: hidden;
- overflow-y: auto;
- max-height: 100px;
- .row {
- position: relative;
- .close {
- display: inline-block;
- vertical-align: middle;
- position: absolute;
- right: 0;
- top: 0;
- margin-top: 2px;
- }
- &.closeable {
- padding-right: 20px;
- }
- }
-}
-
tr .action:not(.permanent), .selectedActions > a {
opacity: 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) {
@@ -467,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;
@@ -489,12 +417,14 @@ tr {
}
.header-action {
+ opacity: .8;
+
&:hover, &:focus {
opacity: 1;
}
}
-tbody tr {
+tbody tr:not(.group-header) {
&:hover, &:focus, &:active {
background-color: var(--color-background-dark);
}
@@ -556,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 {
@@ -586,8 +515,8 @@ code {
&.ui-datepicker-current-day a.ui-state-active,
.ui-state-hover,
.ui-state-focus {
- background-color: var(--color-primary);
- color: var(--color-primary-text);
+ background-color: var(--color-primary-element);
+ color: var(--color-primary-element-text);
font-weight: bold;
}
@@ -600,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);
@@ -637,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 {
@@ -658,8 +605,8 @@ code {
&.ui-timepicker-minute-cell a.ui-state-active,
.ui-state-hover,
.ui-state-focus {
- background-color: var(--color-primary);
- color: var(--color-primary-text);
+ background-color: var(--color-primary-element);
+ color: var(--color-primary-element-text);
font-weight: bold;
}
@@ -668,7 +615,7 @@ code {
}
&.ui-timepicker-hours {
- border-right: 1px solid var(--color-border);
+ border-inline-end: 1px solid var(--color-border);
}
}
}
@@ -707,391 +654,20 @@ code {
}
/* ---- DIALOGS ---- */
-#oc-dialog-filepicker-content {
- position: relative;
- display: flex;
- flex-direction:column;
-
- .dirtree {
- flex-wrap: wrap;
- box-sizing: border-box;
- padding-right: 140px;
-
- div:first-child a {
- background-image: var(--icon-home-000);
- background-repeat: no-repeat;
- background-position: left center;
- }
- span {
- &:not(:last-child) {
- cursor: pointer;
- }
- &:last-child {
- font-weight: bold;
- }
- &:not(:last-child)::after {
- content: '>';
- padding: 3px;
- }
- }
- }
-
- /* Grid view toggle */
- #picker-view-toggle {
- position: absolute;
- background-color: transparent;
- border: none;
- margin: 0;
- padding: 22px;
- opacity: .5;
- right: 0;
- top: 0;
-
- &:hover,
- &:focus {
- opacity: 1;
- }
- }
-
- // keyboard focus
- #picker-showgridview:focus + #picker-view-toggle {
- opacity: 1;
- }
-
- .actions.creatable {
- flex-wrap: wrap;
- padding: 0px;
- box-sizing: border-box;
- display: inline-flex;
- float: none;
- max-height: 36px;
- max-width: 36px;
- background-color: var(--color-background-dark);
- border: 1px solid var(--color-border-dark);
- border-radius: var(--border-radius-pill);
- position: relative;
- left: 15px;
- top:3px;
- order:1;
-
- .icon.icon-add{
- background-image: var(--icon-add-000);
- background-size: 16px 16px;
- width: 34px;
- height: 34px;
- margin: 0px;
- opacity: 0.5;
- }
-
- a {
- width: 36px;
- padding: 0px;
- position: static;
- }
-
- .menu {
- top: 100%;
- margin-top: 10px;
- form {
- display: flex;
- margin: 10px;
- }
- }
-
- }
-
- .filelist-container {
- box-sizing: border-box;
- display: inline-block;
- overflow-y: auto;
- flex: 1;
- /*height: 100%;*/
- /* overflow under the button row */
- width: 100%;
- overflow-x: hidden;
- }
- .emptycontent {
- color: var(--color-text-maxcontrast);
- text-align: center;
- margin-top: 80px;
- width: 100%;
- display: none;
- }
- .filelist {
- background-color: var(--color-main-background);
- width: 100%;
- }
- #picker-filestable.filelist {
- /* prevent the filepicker to overflow */
- min-width: initial;
- margin-bottom: 50px;
- thead {
- tr {
- border-bottom: 1px solid var(--color-border);
- background-color: var(--color-main-background);
- th {
- width: 80%;
- border: none;
- }
- }
- }
- th .columntitle {
- display: block;
- padding: 15px;
- height: 50px;
- box-sizing: border-box;
- -moz-box-sizing: border-box;
- vertical-align: middle;
- }
- th .columntitle.name {
- padding-left: 5px;
- margin-left: 50px;
- }
-
- th .sort-indicator {
- width: 10px;
- height: 8px;
- margin-left: 5px;
- display: inline-block;
- vertical-align: text-bottom;
- opacity: .3;
- }
- .sort-indicator.hidden,
- th:hover .sort-indicator.hidden,
- th:focus .sort-indicator.hidden {
- visibility: hidden;
- }
- th:hover .sort-indicator.hidden,
- th:focus .sort-indicator.hidden {
- visibility: visible;
- }
-
- td {
- padding: 14px;
- border-bottom: 1px solid var(--color-border);
- }
- tr:last-child td {
- border-bottom: none;
- }
- .filename {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- background-size: 32px;
- background-repeat: no-repeat;
- padding-left: 51px;
- background-position: 7px 7px;
- cursor: pointer;
- // avoid taking full width
- max-width: 0;
- .filename-parts {
- display: flex;
- &__first {
- overflow: hidden;
- white-space: pre;
- text-overflow: ellipsis;
- }
- &__last {
- white-space: pre;
- }
- }
- }
- .filesize, .date {
- width: 80px;
- }
- .filesize {
- text-align: right;
- }
- &.view-grid {
- $grid-size: 120px;
- $grid-pad: 10px;
- $name-height: 30px;
- display: flex;
- flex-direction: column;
-
- tbody {
- display: grid;
- grid-template-columns: repeat(auto-fill, $grid-size);
- justify-content: space-around;
- row-gap: 15px;
- margin: 15px 0;
-
- tr {
- display: block;
- position: relative;
- border-radius: var(--border-radius);
- padding: $grid-pad;
- display: flex;
- flex-direction: column;
- width: $grid-size - 2 * $grid-pad;
-
-
- td {
- border: none;
- padding: 0;
- text-align: center;
- border-radius: var(--border-radius);
-
- &.filename {
- padding: #{$grid-size - 2 * $grid-pad} 0 0 0;
- background-position: center top;
- background-size: contain;
- line-height: $name-height;
- max-width: none;
- .filename-parts {
- justify-content: center;
- }
- }
- &.filesize {
- line-height: $name-height / 3;
- width: 100%;
- }
- &.date {
- display: none;
- }
- }
- }
- }
- }
- }
- .filepicker_element_selected {
- background-color: var(--color-background-darker);
- }
-}
-
.ui-dialog {
position: fixed !important;
}
span.ui-icon {
float: left;
- margin: 3px 7px 30px 0;
-}
-
-/* ---- CONTACTS MENU ---- */
-
-#contactsmenu {
- .menutoggle {
- background-size: 20px 20px;
- padding: 14px;
- cursor: pointer;
- filter: var(--primary-invert-if-bright);
-
- &:hover,
- &:focus,
- &:active {
- opacity: 1 !important;
- }
- }
-}
-
-#header .header-right > div#contactsmenu > .menu {
- /* show 2.5 to 4.5 entries depending on the screen height */
- height: calc(100vh - 50px * 3);
- max-height: calc(50px * 4.5 + 50px);
- min-height: calc(50px * 3.5);
- width: 350px;
-
- .emptycontent {
- margin-top: 5vh !important;
- margin-bottom: 2vh;
- .icon-loading,
- .icon-search {
- display: inline-block;
- }
- }
-
- .content {
- /* fixed max height of the parent container without the search input */
- height: calc(100vh - 50px * 3 - 50px);
- max-height: calc(50px * 4.5);
- min-height: calc(50px * 3.5 - 50px);
- overflow-y: auto;
-
- .footer {
- text-align: center;
-
- a {
- display: block;
- width: 100%;
- padding: 12px 0;
- opacity: .5;
- }
- }
- }
-
- .contact {
- display: flex;
- position: relative;
- align-items: center;
- padding: 3px 3px 3px 10px;
- border-bottom: 1px solid var(--color-border);
-
- :last-of-type {
- border-bottom: none;
- }
-
- .avatar {
- height: 32px;
- width: 32px;
- display: inline-block;
- }
-
- .body {
- flex-grow: 1;
- padding-left: 8px;
-
- div {
- position: relative;
- width: 100%;
- }
-
- .full-name, .last-message {
- /* TODO: don't use fixed width */
- max-width: 204px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .last-message {
- opacity: .5;
- }
- }
-
- .top-action, .second-action, .other-actions {
- width: 16px;
- height: 16px;
- padding: 14px;
- opacity: .5;
- cursor: pointer;
-
- :hover {
- opacity: 1;
- }
- }
-
- /* actions menu */
- .menu {
- top: 47px;
- margin-right: 13px;
- }
- .popovermenu::after {
- right: 2px;
- }
- }
-}
-
-
-#contactsmenu-search {
- width: calc(100% - 16px);
- margin: 8px;
- height: 34px;
+ margin-block: 3px 30px;
+ margin-inline: 0 7px;
}
/* ---- TOOLTIPS ---- */
.extra-data {
- padding-right: 5px !important;
+ padding-inline-end: 5px !important;
}
/* ---- TAGS ---- */
@@ -1135,8 +711,10 @@ span.ui-icon {
/* ---- BREADCRUMB ---- */
.breadcrumb {
display: inline-flex;
+ height: 50px;
}
-div.crumb {
+
+li.crumb {
display: inline-flex;
background-image: url('../img/breadcrumb.svg?v=1');
background-repeat: no-repeat;
@@ -1145,7 +723,7 @@ div.crumb {
background-size: auto 24px;
flex: 0 0 auto;
order: 1;
- padding-right: 7px;
+ padding-inline-end: 7px;
&.crumbmenu {
order: 2;
position: relative;
@@ -1161,12 +739,12 @@ div.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;
}
@@ -1182,13 +760,6 @@ div.crumb {
order: 3;
}
}
- &.active {
- font-weight: bold;
- // Allow multiple span next to the main 'a'
- a ~ span {
- padding-left: 0;
- }
- }
> a,
> span {
position: relative;
@@ -1211,7 +782,14 @@ div.crumb {
padding: 0;
width: 44px;
}
- &:not(:first-child) a {
+
+ &:last-child {
+ font-weight: bold;
+ margin-inline-end: 10px;
+ // Allow multiple span next to the main 'a'
+ a ~ span {
+ padding-inline-start: 0;
+ }
}
&:hover, &:focus, a:focus, &:active {
opacity: 1;
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-14 18:20:58 +0000