aboutsummaryrefslogtreecommitdiffstats
path: root/core/css/apps.scss
diff options
context:
space:
mode:
Diffstat (limited to 'core/css/apps.scss')
-rw-r--r--core/css/apps.scss673
1 files changed, 435 insertions, 238 deletions
diff --git a/core/css/apps.scss b/core/css/apps.scss
index 8d753eb8d23..353eb43fe3f 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -1,45 +1,79 @@
-/**
- * @copyright Copyright (c) 2016-2017, John Molakvoæ <skjnldsv@protonmail.com>
- * @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net>
- * @copyright Copyright (c) 2016, Morris Jobke <hey@morrisjobke.de>
- * @copyright Copyright (c) 2016, pgys <info@pexlab.space>
- * @copyright Copyright (c) 2016, Lukas Reschke <lukas@statuscode.ch>
- * @copyright Copyright (c) 2016, Stefan Weil <sw@weilnetz.de>
- * @copyright Copyright (c) 2016, Roeland Jago Douma <rullzer@owncloud.com>
- * @copyright Copyright (c) 2016, jowi <sjw@gmx.ch>
- * @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de>
- * @copyright Copyright (c) 2015, Thomas Müller <thomas.mueller@tmit.eu>
- * @copyright Copyright (c) 2015, Vincent Petry <pvince81@owncloud.com>
- * @copyright Copyright (c) 2014-2017, Jan-Christoph Borchardt <hey@jancborchardt.net>
- *
- * @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 'variables';
+@use 'sass:math';
+@use 'functions';
+
+@media screen and (max-width: variables.$breakpoint-mobile) {
+ // Make the body full width on mobile
+ :root {
+ --body-container-margin: 0px !important;
+ --body-container-radius: 0px !important;
+ }
+}
+
+
+html {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ // color-background-plain should always be defined.
+ background-color: var(--color-background-plain, var(--color-main-background));
+}
+
+body {
+ // color-background-plain should always be defined.
+ background-color: var(--color-background-plain, var(--color-main-background));
+ // user background, or plain color
+ background-image: var(--image-background);
+ background-size: cover;
+ background-position: center;
+ position: fixed;
+ width: 100%;
+ height: calc(100vh - env(safe-area-inset-bottom));
+}
/* BASE STYLING ------------------------------------------------------------ */
// no h1 allowed since h1 = logo
-h2 {
- font-weight: bold;
- font-size: 20px;
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-weight: 600;
+ line-height: 1.5;
+ margin-top: 24px;
margin-bottom: 12px;
- line-height: 30px;
- color: var(--color-text-light);
+ color: var(--color-main-text);
+}
+
+h2 {
+ font-size: 1.8em;
}
h3 {
- font-size: 16px;
- margin: 12px 0;
- color: var(--color-text-light);
+ font-size: 1.6em;
}
h4 {
- font-size: 14px;
+ font-size: 1.4em;
+}
+
+h5 {
+ font-size: 1.25em;
+}
+
+h6 {
+ font-size: 1.1em;
}
/* do not use italic typeface style, instead lighter color */
em {
font-style: normal;
- color: var(--color-text-lighter);
+ color: var(--color-text-maxcontrast);
}
dl {
@@ -50,13 +84,13 @@ dt,
dd {
display: inline-block;
padding: 12px;
- padding-left: 0;
+ padding-inline-start: 0;
}
dt {
width: 130px;
white-space: nowrap;
- text-align: right;
+ text-align: end;
}
kbd {
@@ -78,39 +112,51 @@ kbd {
/* APP-NAVIGATION ------------------------------------------------------------ */
/* Navigation: folder like structure */
#app-navigation:not(.vue) {
- width: $navigation-width;
- position: fixed;
- top: $header-height;
- left: 0;
+ // 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;
overflow-x: hidden;
- // Do not use vh because of mobile headers
- // are included in the calculation
- height: calc(100% - #{$header-height});
- box-sizing: border-box;
- background-color: var(--color-main-background);
- -webkit-user-select: none;
+ background-color: var(--color-main-background-blur);
+ backdrop-filter: var(--filter-background-blur);
+ -webkit-backdrop-filter: var(--filter-background-blur); -webkit-user-select: none;
+ position: sticky;
+ height: 100%;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
- border-right: 1px solid var(--color-border);
display: flex;
flex-direction: column;
flex-grow: 0;
flex-shrink: 0;
+ .app-navigation-caption {
+ font-weight: bold;
+ line-height: var(--default-clickable-area);
+ padding: 10px var(--default-clickable-area) 0 var(--default-clickable-area);
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ box-shadow: none !important;
+ user-select: none;
+ pointer-events:none;
+ margin-inline-start: 10px;
+ }
+}
+
+.app-navigation-personal,
+.app-navigation-administration {
+
/* 'New' button */
.app-navigation-new {
display: block;
- padding: 10px;
+ padding: calc(var(--default-grid-baseline) * 2);
button {
display: inline-block;
width: 100%;
padding: 10px;
- padding-left: 34px;
- background-position: 10px center;
- text-align: left;
+ padding-inline-start: 34px;
+ text-align: start;
margin: 0;
}
}
@@ -121,17 +167,28 @@ kbd {
> ul {
position: relative;
height: 100%;
- width: inherit;
+ width: 100%;
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
display: flex;
flex-direction: column;
+ padding: calc(var(--default-grid-baseline) * 2);
+ padding-bottom: 0;
+
+ &:last-child {
+ padding-bottom: calc(var(--default-grid-baseline) * 2);
+ }
+
> li {
display: inline-flex;
flex-wrap: wrap;
order: 1;
flex-shrink: 0;
+ margin: 0;
+ margin-bottom: 3px;
+ width: 100%;
+ border-radius: var(--border-radius-element);
/* Pinned-to-bottom entries */
&.pinned {
@@ -143,13 +200,13 @@ kbd {
> .app-navigation-entry-deleted {
/* Ugly hack for overriding the main entry link */
- padding-left: 44px !important;
+ padding-inline-start: var(--default-clickable-area) !important;
}
> .app-navigation-entry-edit {
/* Ugly hack for overriding the main entry link */
/* align the input correctly with the link text
44px-6px padding for the input */
- padding-left: 38px !important;
+ padding-inline-start: calc(var(--default-clickable-area) - 6px) !important;
}
a:hover,
@@ -159,19 +216,28 @@ kbd {
background-color: var(--color-background-hover);
}
}
+ a:focus-visible {
+ box-shadow: 0 0 0 4px var(--color-main-background);
+ outline: 2px solid var(--color-main-text);
+ }
&.active,
a:active,
a.selected ,
a.active {
&,
> a {
- background-color: var(--color-primary-light);
+ background-color: var(--color-primary-element);
+ color: var(--color-primary-element-text);
+
+ &:first-child > img {
+ filter: var(--primary-invert-if-dark);
+ }
}
}
/* align loader */
&.icon-loading-small:after {
- left: 22px;
+ inset-inline-start: 22px;
top: 22px;
}
@@ -184,21 +250,6 @@ kbd {
}
}
- &.app-navigation-caption {
- font-weight: bold;
- line-height: 44px;
- padding: 0 44px;
- white-space: nowrap;
- text-overflow: ellipsis;
- box-shadow: none !important;
- user-select: none;
- pointer-events:none;
-
- &:not(:first-child) {
- margin-top: 22px;
- }
- }
-
/* Second level nesting for lists */
> ul {
flex: 0 1 auto;
@@ -207,11 +258,15 @@ kbd {
> li {
display: inline-flex;
flex-wrap: wrap;
- padding-left: 44px;
+ padding-inline-start: var(--default-clickable-area);
+ width: 100%;
+ margin-bottom: 3px;
+
&:hover,
&:focus {
&,
> a {
+ border-radius: var(--border-radius-element);
background-color: var(--color-background-hover);
}
}
@@ -219,27 +274,31 @@ kbd {
a.selected {
&,
> a {
- background-color: var(--color-primary-light);
+ border-radius: var(--border-radius-element);
+ background-color: var(--color-primary-element-light);
+ &:first-child > img {
+ filter: var(--primary-invert-if-dark);
+ }
}
}
/* align loader */
&.icon-loading-small:after {
- left: 22px; /* 44px / 2 */
+ inset-inline-start: calc(var(--default-clickable-area) / 2);
}
> .app-navigation-entry-deleted {
/* margin to keep active indicator visible */
- margin-left: 4px;
- padding-left: 84px;
+ margin-inline-start: 4px;
+ padding-inline-start: 84px;
}
> .app-navigation-entry-edit {
/* margin to keep active indicator visible */
- margin-left: 4px;
+ margin-inline-start: 4px;
/* align the input correctly with the link text
44px+44px-4px-6px padding for the input */
- padding-left: 78px !important;
+ padding-inline-start: calc(2 * var(--default-clickable-area) - 10px) !important;
}
}
}
@@ -248,7 +307,6 @@ kbd {
> li,
> li > ul > li {
position: relative;
- width: 100%;
box-sizing: border-box;
/* hide icons if loading */
&.icon-loading-small {
@@ -261,30 +319,35 @@ kbd {
/* Main entry link */
> a {
background-size: 16px 16px;
- background-position: 14px center;
background-repeat: no-repeat;
display: block;
justify-content: space-between;
- line-height: 44px;
- min-height: 44px;
- padding: 0 12px 0 14px;
+ line-height: var(--default-clickable-area);
+ min-height: var(--default-clickable-area);
+ padding-block: 0;
+ padding-inline: calc(2 * var(--default-grid-baseline));
overflow: hidden;
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
+ border-radius: var(--border-radius-element);
color: var(--color-main-text);
- opacity: .8;
flex: 1 1 0px;
z-index: 100; /* above the bullet to allow click*/
/* TODO: forbid using img as icon in menu? */
&.svg {
- padding: 0 12px 0 44px;
+ padding-block: 0;
+ padding-inline: var(--default-clickable-area) 12px;
+ :focus-visible {
+ padding-block: 0;
+ padding-inline: calc(var(--default-clickable-area) - 2px) 8px;
+ }
}
&:first-child img {
- margin-right: 11px;
- width: 16px;
- height: 16px;
+ margin-inline-end: calc(2 * var(--default-grid-baseline)) !important;
+ width: 16px;
+ height: 16px;
// Legacy invert if bright background
filter: var(--background-invert-if-dark);
}
@@ -292,9 +355,9 @@ kbd {
/* counter can also be inside the link */
> .app-navigation-entry-utils {
display: inline-block;
- float: right;
+ /* Check Floating fix below */
.app-navigation-entry-utils-counter {
- padding-right: 0 !important;
+ padding-inline-end: 0 !important;
}
}
}
@@ -318,7 +381,7 @@ kbd {
/* popover fix the flex positionning of the li parent */
> .app-navigation-entry-menu {
- top: 44px;
+ top: var(--default-clickable-area);
}
/* show edit/undo field if editing/deleted */
@@ -362,28 +425,34 @@ kbd {
.collapse {
opacity: 0;
position: absolute;
- width: 44px;
- height: 44px;
+ width: var(--default-clickable-area);
+ height: var(--default-clickable-area);
margin: 0;
z-index: 110;
/* Needed for IE11; otherwise the button appears to the right of the
* link. */
- left: 0;
+ inset-inline-start: 0;
+
+ &:focus-visible {
+ opacity: 1;
+ border-width: 0;
+ box-shadow: inset 0 0 0 2px var(--color-primary-element);
+ background: none;
+ }
}
&:before {
position: absolute;
- height: 44px;
- width: 44px;
+ height: var(--default-clickable-area);
+ width: var(--default-clickable-area);
margin: 0;
padding: 0;
background: none;
- @include icon-color('triangle-s', 'actions', $color-black, 1, true);
+ @include functions.icon-color('triangle-s', 'actions', variables.$color-black, 1, true);
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
border: none;
- border-radius: 0;
outline: none !important;
box-shadow: none;
content: ' ';
@@ -392,20 +461,24 @@ kbd {
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
z-index: 105; // above a, under button
- background-color: var(--color-background-hover);
border-radius: 50%;
- transition: opacity $animation-quick ease-in-out;
+ transition: opacity variables.$animation-quick ease-in-out;
+
+
}
/* force padding on link no matter if 'a' has an icon class */
> a:first-child {
- padding-left: 44px;
+ padding-inline-start: var(--default-clickable-area);
}
&:hover,
&:focus {
&:before {
opacity: 1;
}
+ > a {
+ background-image: none;
+ }
> .app-navigation-entry-bullet {
background: transparent !important;
}
@@ -430,8 +503,8 @@ kbd {
justify-content: flex-end;
}
li {
- width: 44px !important;
- height: 44px;
+ width: var(--default-clickable-area) !important;
+ height: var(--default-clickable-area);
}
button {
height: 100%;
@@ -442,7 +515,7 @@ kbd {
.app-navigation-entry-utils-menu-button {
/* Prevent bg img override if an icon class is set */
button:not([class^='icon-']):not([class*=' icon-']) {
- @include icon-color('more', 'actions', $color-black, 1, true);
+ @include functions.icon-color('more', 'actions', variables.$color-black, 1, true);
}
&:hover button,
&:focus button {
@@ -452,9 +525,9 @@ kbd {
}
.app-navigation-entry-utils-counter {
overflow: hidden;
- text-align: right;
+ text-align: end;
font-size: 9pt;
- line-height: 44px;
+ line-height: var(--default-clickable-area);
padding: 0 12px; /* Same padding as all li > a in the app-navigation */
&.highlighted {
@@ -463,8 +536,8 @@ kbd {
span {
padding: 2px 5px;
border-radius: 10px;
- background-color: var(--color-primary);
- color: var(--color-primary-text);
+ background-color: var(--color-primary-element);
+ color: var(--color-primary-element-text);
}
}
}
@@ -474,8 +547,7 @@ kbd {
* Editable entries
*/
.app-navigation-entry-edit {
- padding-left: 5px;
- padding-right: 5px;
+ padding-inline: 5px;
display: block;
width: calc(100% - 1px); /* Avoid border overlapping */
transition: opacity 250ms ease-in-out;
@@ -490,7 +562,7 @@ kbd {
}
input {
padding: 5px;
- margin-right: 0;
+ margin-inline-end: 0;
height: 38px;
&:hover,
&:focus {
@@ -501,8 +573,8 @@ kbd {
input[type='text'] {
width: 100%;
min-width: 0; /* firefox hack: override auto */
- border-bottom-right-radius: 0;
- border-top-right-radius: 0;
+ border-end-end-radius: 0;
+ border-start-end-radius: 0;
}
button,
input:not([type='text']) {
@@ -513,13 +585,13 @@ kbd {
border-radius: 0 !important;
}
&:not(:first-child) {
- margin-left: -1px;
+ margin-inline-start: -1px;
}
&:last-child {
- border-bottom-right-radius: var(--border-radius);
- border-top-right-radius: var(--border-radius);
- border-bottom-left-radius: 0;
- border-top-left-radius: 0;
+ border-end-end-radius: var(--border-radius);
+ border-start-end-radius: var(--border-radius);
+ border-end-start-radius: 0;
+ border-start-start-radius: 0;
}
}
}
@@ -529,21 +601,21 @@ kbd {
*/
.app-navigation-entry-deleted {
display: inline-flex;
- padding-left: 44px;
- transform: translateX(#{$navigation-width});
+ padding-inline-start: var(--default-clickable-area);
+ transform: translateX(#{variables.$navigation-width});
.app-navigation-entry-deleted-description {
position: relative;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
flex: 1 1 0px;
- line-height: 44px;
+ line-height: var(--default-clickable-area);
}
.app-navigation-entry-deleted-button {
margin: 0;
- height: 44px;
- width: 44px;
- line-height: 44px;
+ height: var(--default-clickable-area);
+ width: var(--default-clickable-area);
+ line-height: var(--default-clickable-area);
&:hover,
&:focus {
opacity: 1;
@@ -561,7 +633,7 @@ kbd {
opacity 250ms ease-in-out,
z-index 250ms ease-in-out;
position: absolute;
- left: 0;
+ inset-inline-start: 0;
background-color: var(--color-main-background);
box-sizing: border-box;
}
@@ -585,15 +657,71 @@ kbd {
}
}
+/* Floating and background-position fix */
+/* Cannot use inline-start and :dir to support Samsung Internet */
+body[dir='ltr'] {
+ .app-navigation-personal,
+ .app-navigation-administration {
+ .app-navigation-new button {
+ background-position: left 10px center;
+ }
+
+ > ul > li > ul > li > a {
+ background-position: left 14px center;
+
+ > .app-navigation-entry-utils {
+ float: right;
+ }
+ }
+ }
+}
+
+body[dir='rtl'] {
+ .app-navigation-personal,
+ .app-navigation-administration {
+ .app-navigation-new button {
+ background-position: right 10px center;
+ }
+
+ > ul > li > ul > li > a {
+ background-position: right 14px center;
+
+ > .app-navigation-entry-utils {
+ float: left;
+ }
+ }
+ }
+}
/* CONTENT --------------------------------------------------------- */
#content {
box-sizing: border-box;
- position: relative;
+ position: static;
+ margin: var(--body-container-margin);
+ margin-top: var(--header-height);
+ padding: 0;
display: flex;
- // padding is included in height
- padding-top: $header-height;
- min-height: 100%;
+ width: calc(100% - var(--body-container-margin) * 2);
+ height: var(--body-height);
+ border-radius: var(--body-container-radius);
+ overflow: clip;
+
+ &:not(.with-sidebar--full) {
+ position: fixed;
+ }
+}
+
+@media only screen and (max-width: variables.$breakpoint-mobile) {
+ #content {
+ border-start-start-radius: var(--border-radius-large);
+ border-start-end-radius: var(--border-radius-large);
+ }
+ #app-navigation {
+ border-start-start-radius: var(--border-radius-large);
+ }
+ #app-sidebar {
+ border-start-end-radius: var(--border-radius-large);
+ }
}
/* APP-CONTENT AND WRAPPER ------------------------------------------ */
@@ -601,21 +729,19 @@ kbd {
/**
* !Important. We are defining the minimum requirement we want for flex
- * Just before the mobile breakpoint we have $breakpoint-mobile (1024px) - $navigation-width
+ * Just before the mobile breakpoint we have variables.$breakpoint-mobile (1024px) - variables.$navigation-width
* -> 468px. In that case we want 200px for the list and 268px for the content
*/
-$min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
+$min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - variables.$list-min-width;
#app-content {
z-index: 1000;
background-color: var(--color-main-background);
- position: relative;
flex-basis: 100vw;
- min-height: 100%;
+ overflow: auto;
+ position: initial;
+ height: 100%;
/* margin if navigation element is here */
- #app-navigation:not(.hidden) + & {
- margin-left: $navigation-width;
- }
/* no top border for first settings item */
> .section:first-child {
border-top: none;
@@ -639,6 +765,10 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
}
}
}
+
+ &::-webkit-scrollbar-button {
+ height: var(--body-container-radius);
+ }
}
/* APP-SIDEBAR ------------------------------------------------------------ */
@@ -648,18 +778,20 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
*/
#app-sidebar {
width: 27vw;
- min-width: $sidebar-min-width;
- max-width: $sidebar-max-width;
+ min-width: variables.$sidebar-min-width;
+ max-width: variables.$sidebar-max-width;
display: block;
- @include position('sticky');
- top: $header-height;
- right:0;
+ position: -webkit-sticky;
+ position: sticky;
+ top: variables.$header-height;
+ inset-inline-end:0;
overflow-y: auto;
overflow-x: hidden;
z-index: 1500;
- height: calc(100vh - #{$header-height});
+ opacity: 0.7px;
+ height: calc(100vh - #{variables.$header-height});
background: var(--color-main-background);
- border-left: 1px solid var(--color-border);
+ border-inline-start: 1px solid var(--color-border);
flex-shrink: 0;
// no animations possible, use OC.Apps.showAppSidebar
&.disappear {
@@ -683,8 +815,9 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
#app-settings-content {
display: none;
- padding: 10px;
- background-color: var(--color-main-background);
+ padding: calc(var(--default-grid-baseline) * 2);
+ padding-top: 0;
+ padding-inline-start: calc(var(--default-grid-baseline) * 4);
/* restrict height of settings and make scrollable */
max-height: 300px;
overflow-y: auto;
@@ -696,7 +829,8 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
}
.info-text {
- padding: 5px 0 7px 22px;
+ padding-block: 5px 7px;
+ padding-inline: 22px 0;
color: var(--color-text-lighter);
}
input {
@@ -716,42 +850,76 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
#app-settings-header {
box-sizing: border-box;
- background-color: var(--color-main-background);
-}
+ background-color: transparent;
+ overflow: hidden;
+ border-radius: calc(var(--default-clickable-area) / 2);
+ padding: calc(var(--default-grid-baseline) * 2);
+ padding-top: 0;
+ .settings-button {
+ display: flex;
+ align-items: center;
+ height: var(--default-clickable-area);
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ background-color: transparent;
+ box-shadow: none;
+ border: 0;
+ border-radius: calc(var(--default-clickable-area) / 2);
+ text-align: start;
+ font-weight: normal;
+ font-size: 100%;
+ opacity: 0.8;
+
+ /* like app-navigation a */
+ color: var(--color-main-text);
+
+ &.opened {
+ border-top: solid 1px var(--color-border);
+ background-color: var(--color-main-background);
+ margin-top: 8px;
+ }
+ &:hover,
+ &:focus {
+ background-color: var(--color-background-hover);
+ }
-#app-settings-header .settings-button {
- display: block;
- height: 44px;
- width: 100%;
- padding: 0;
- margin: 0;
- background-color: var(--color-main-background);
- @include icon-color('settings-dark', 'actions', $color-black, 1, true);
- background-position: 14px center;
- background-repeat: no-repeat;
- box-shadow: none;
- border: 0;
- border-radius: 0;
- text-align: left;
- padding-left: 44px;
- font-weight: normal;
- font-size: 100%;
- opacity: 0.8;
-
- /* like app-navigation a */
- color: var(--color-main-text);
+ &::before {
+ background-image: var(--icon-settings-dark);
+ background-repeat: no-repeat;
+ content: '';
+ width: var(--default-clickable-area);
+ height: var(--default-clickable-area);
+ top: 0;
+ inset-inline-start: 0;
+ display: block;
+ }
- &.opened {
- border-top: solid 1px var(--color-border);
- background-color: var(--color-main-background);
+ &:focus-visible {
+ box-shadow: 0 0 0 2px inset var(--color-primary-element) !important;
+ }
}
- &:hover,
- &:focus {
- background-color: var(--color-background-hover);
+}
+
+/* Background-position fix */
+body[dir='ltr'] #app-settings-header .settings-button {
+ &::before {
+ background-position: left 14px center;
+ }
+ &:focus-visible {
+ background-position: left 12px center;
}
}
+body[dir='rtl'] #app-settings-header .settings-button {
+ &::before {
+ background-position: right 14px center;
+ }
+ &:focus-visible {
+ background-position: right 12px center;
+ }
+}
/* GENERAL SECTION ------------------------------------------------------------ */
.section {
display: block;
@@ -765,14 +933,15 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
&[type='checkbox'],
&[type='radio'] {
vertical-align: -2px;
- margin-right: 4px;
+ margin-inline-end: 4px;
}
}
}
+
.sub-section {
position: relative;
margin-top: 10px;
- margin-left: 27px;
+ margin-inline-start: 27px;
margin-bottom: 10px;
}
@@ -812,10 +981,10 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
/* Use same amount as sidebar padding */
&:first-child {
- padding-left: 15px;
+ padding-inline-start: 15px;
}
&:last-child {
- padding-right: 15px;
+ padding-inline-end: 15px;
}
.icon {
@@ -825,7 +994,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
background-size: 16px;
vertical-align: middle;
margin-top: -2px;
- margin-right: 3px;
+ margin-inline-end: 3px;
opacity: .7;
cursor: pointer;
}
@@ -848,25 +1017,38 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
}
}
}
+
.tabsContainer {
- clear: left;
.tab {
padding: 0 15px 15px;
}
}
+/* Cannot use inline-start to support Samsung Internet*/
+body[dir='ltr'] .tabsContainer {
+ clear: left;
+}
+
+body[dir='rtl'] .tabsContainer {
+ clear: right;
+}
+
/* POPOVER MENU ------------------------------------------------------------ */
-$popoveritem-height: 44px;
+$popoveritem-height: 34px;
$popovericon-size: 16px;
-$outter-margin: ($popoveritem-height - $popovericon-size) / 2;
-
-.ie,
-.edge {
- .bubble, .bubble:after,
- .popovermenu, .popovermenu:after,
- #app-navigation .app-navigation-entry-menu,
- #app-navigation .app-navigation-entry-menu:after {
- border: 1px solid var(--color-border);
+$outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
+
+.v-popper__inner div.open > ul {
+ > li > a > span.action-link__icon,
+ > li > a > span.action-router__icon,
+ > li > a > img {
+ filter: var(--background-invert-if-dark);
+
+ // We do not want to invert the color of the user_status emoji:
+ // https://github.com/nextcloud/nextcloud-vue/blob/8899087f8f8d45e0ed744bde9faa00b625a21905/src/components/NcAvatar/NcAvatar.vue#L495
+ &[src^="data"] {
+ filter: none;
+ }
}
}
@@ -876,11 +1058,12 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
position: absolute;
background-color: var(--color-main-background);
color: var(--color-main-text);
- border-radius: var(--border-radius);
+ border-radius: var(--border-radius-large);
+ padding: 3px;
z-index: 110;
margin: 5px;
margin-top: -5px;
- right: 0;
+ inset-inline-end: 0;
filter: drop-shadow(0 1px 3px var(--color-box-shadow));
display: none;
will-change: filter;
@@ -891,7 +1074,7 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
// = 16px/2 + 14px = 22px
// popover right margin is 5px, arrow width is 9px to center and border is 1px
// 22px - 9px - 5px - 1px = 7px
- right: 7px;
+ inset-inline-end: 7px;
/* change this to adjust the arrow position */
border: solid transparent;
content: ' ';
@@ -905,21 +1088,19 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
/* Center the popover */
&.menu-center {
transform: translateX(50%);
- right: 50%;
- margin-right: 0;
+ inset-inline-end: 50%;
+ margin-inline-end: 0;
&:after {
- right: 50%;
+ inset-inline-end: 50%;
transform: translateX(50%);
}
}
/* Align the popover to the left */
&.menu-left {
- right: auto;
- left: 0;
- margin-right: 0;
+ inset-inline: 0 auto;
+ margin-inline-end: 0;
&:after {
- left: 6px;
- right: auto;
+ inset-inline: 6px auto;
}
}
@@ -950,7 +1131,7 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
cursor: pointer;
line-height: $popoveritem-height;
border: 0;
- border-radius: 0; // otherwise Safari will cut the border-radius area
+ border-radius: var(--border-radius-large);
background-color: transparent;
display: flex;
align-items: flex-start;
@@ -968,14 +1149,14 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
&[class*=' icon-'] {
min-width: 0; /* Overwrite icons*/
min-height: 0;
- background-position: #{($popoveritem-height - $popovericon-size) / 2} center;
+ background-position: #{math.div($popoveritem-height - $popovericon-size, 2)} center;
background-size: $popovericon-size;
}
span[class^='icon-'],
span[class*=' icon-'] {
/* Keep padding to define the width to
assure correct position of a possible text */
- padding: #{$popoveritem-height / 2} 0 #{$popoveritem-height / 2} $popoveritem-height;
+ padding: #{math.div($popoveritem-height, 2)} 0 #{math.div($popoveritem-height, 2)} $popoveritem-height;
}
// If no icons set, force left margin to align
&:not([class^='icon-']):not([class*='icon-']) {
@@ -983,20 +1164,25 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
> input,
> form {
&:not([class^='icon-']):not([class*='icon-']):first-child {
- margin-left: $popoveritem-height;
+ margin-inline-start: $popoveritem-height;
}
}
}
&[class^='icon-'],
&[class*=' icon-'] {
- padding: 0 #{($popoveritem-height - $popovericon-size) / 2} 0 $popoveritem-height !important;
+ padding: 0 #{math.div($popoveritem-height - $popovericon-size, 2)} 0 $popoveritem-height !important;
}
&:hover,
&:focus {
background-color: var(--color-background-hover);
}
+ &:focus,
+ &:focus-visible {
+ box-shadow: 0 0 0 2px var(--color-primary-element);
+ }
&.active {
- background-color: var(--color-primary-light);
+ border-radius: var(--border-radius-element);
+ background-color: var(--color-primary-element-light);
}
/* prevent .action class to break the design */
&.action {
@@ -1014,17 +1200,17 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
}
> select {
margin: 0;
- margin-left: 6px;
+ margin-inline-start: 6px;
}
/* Add padding if contains icon+text */
&:not(:empty) {
- padding-right: $outter-margin !important;
+ padding-inline-end: $outter-margin !important;
}
/* DEPRECATED! old img in popover fallback
* TODO: to remove */
> img {
width: $popovericon-size;
- padding: #{($popoveritem-height - $popovericon-size) / 2};
+ padding: #{math.div($popoveritem-height - $popovericon-size, 2)};
}
/* checkbox/radio fixes */
> input.radio + label,
@@ -1046,14 +1232,15 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
flex: 1 1 auto;
/* put a small space between text and form
if there is an element before */
+ align-items: center;
&:not(:first-child) {
- margin-left: 5px;
+ margin-inline-start: 5px;
}
}
/* no margin if hidden span before */
> span.hidden + form,
> span[style*='display:none'] + form {
- margin-left: 0;
+ margin-inline-start: 0;
}
/* Inputs inside popover supports text, submit & reset */
input {
@@ -1063,7 +1250,7 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
flex: 1 1 auto;
// space between inline inputs
&:not(:first-child) {
- margin-left: 5px;
+ margin-inline-start: 5px;
}
}
}
@@ -1079,7 +1266,7 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
&:last-of-type {
> button, > a, > .menuitem {
> form, > input {
- margin-bottom: $outter-margin - 2px; // minus the input margin
+ margin-bottom: 0px;
}
}
}
@@ -1094,22 +1281,27 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
}
}
-/* "app-*" descendants use border-box sizing, so the height of the icon must be
- * set to the height of the item (as well as its width to make it squared). */
-#content[class*='app-'] {
- .bubble,
- .app-navigation-entry-menu,
- .popovermenu {
- li {
- > button,
- > a,
- > .menuitem {
- /* DEPRECATED! old img in popover fallback
- * TODO: to remove */
- > img {
- width: $popoveritem-height;
- height: $popoveritem-height;
- }
+.popovermenu {
+ li {
+ > button,
+ > a,
+ > .menuitem {
+ /* DEPRECATED! old img in popover fallback
+ * TODO: to remove */
+ > img {
+ width: $popoveritem-height;
+ height: $popoveritem-height;
+ }
+ }
+ }
+}
+
+#contactsmenu .contact .popovermenu {
+ li {
+ > a {
+ > img {
+ width: 16px;
+ height: 16px;
}
}
}
@@ -1117,19 +1309,20 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
/* CONTENT LIST ------------------------------------------------------------ */
.app-content-list {
- @include position('sticky');
- top: $header-height;
- border-right: 1px solid var(--color-border);
+ position: -webkit-sticky;
+ position: relative;
+ top: 0;
+ border-inline-end: 1px solid var(--color-border);
display: flex;
flex-direction: column;
transition: transform 250ms ease-in-out;
- min-height: calc(100vh - #{$header-height});
- max-height: calc(100vh - #{$header-height});
+ min-height: 100%;
+ max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
- flex: 1 1 $list-min-width;
- min-width: $list-min-width;
- max-width: $list-max-width;
+ flex: 1 1 variables.$list-min-width;
+ min-width: variables.$list-min-width;
+ max-width: variables.$list-max-width;
/* Default item */
.app-content-list-item {
@@ -1207,7 +1400,7 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
}
+ label {
top: 14px;
- left: 7px;
+ inset-inline-start: 7px;
// hidden by default, only chown on hover-focus or if checked
display: none;
&::before {
@@ -1223,7 +1416,7 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
.app-content-list-item-star {
display: flex;
top: 10px;
- left: 32px;
+ inset-inline-start: 32px;
background-size: 16px;
height: 20px;
width: 20px;
@@ -1239,7 +1432,7 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
line-height: 40px;
border-radius: 50%;
vertical-align: middle;
- margin-right: 10px;
+ margin-inline-end: 10px;
color: #fff;
text-align: center;
font-size: 1.5em;
@@ -1254,13 +1447,12 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
.app-content-list-item-line-one,
.app-content-list-item-line-two {
display: block;
- padding-left: 50px;
+ padding-inline: 50px 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
order: 1;
flex: 1 1 0px;
- padding-right: 10px;
cursor: pointer;
}
@@ -1268,7 +1460,7 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
opacity: .5;
order: 3;
flex: 1 0;
- flex-basis: calc(100% - 44px);
+ flex-basis: calc(100% - var(--default-clickable-area));
}
.app-content-list-item-details {
@@ -1289,7 +1481,7 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2;
margin: 0;
// action icon have -7px margin
// default popover is normally 5px
- right: -2px;
+ inset-inline-end: -2px;
}
}
}
@@ -1297,3 +1489,8 @@ $outter-margin: ($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;
+}
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-15 13:01:28 +0000