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.scss449
1 files changed, 273 insertions, 176 deletions
diff --git a/core/css/apps.scss b/core/css/apps.scss
index e1b6036a547..353eb43fe3f 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -1,36 +1,17 @@
-/**
- * @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';
-@import 'functions';
-
-
-:root {
- --body-container-margin: calc(var(--default-grid-baseline) * 2);
- /* - 2px is required for making it look nice */
- --body-container-radius: calc(var(--default-clickable-area) / 2 + var(--default-grid-baseline) * 2 - 2px);
- --body-height: calc(100% - env(safe-area-inset-bottom) - 50px - var(--body-container-margin));
-}
+@use 'functions';
@media screen and (max-width: variables.$breakpoint-mobile) {
+ // Make the body full width on mobile
:root {
- --body-container-margin: 0px;
- --body-container-radius: 0px;
+ --body-container-margin: 0px !important;
+ --body-container-radius: 0px !important;
}
}
@@ -39,15 +20,15 @@ html {
width: 100%;
height: 100%;
position: absolute;
- // color-background-plain should always be defined. It is the primary user colour
+ // 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. It is the primary user colour
+ // color-background-plain should always be defined.
background-color: var(--color-background-plain, var(--color-main-background));
- // color-background-plain should always be defined. It is the primary user colour
- background-image: var(--image-background, var(--image-background-default));
+ // user background, or plain color
+ background-image: var(--image-background);
background-size: cover;
background-position: center;
position: fixed;
@@ -57,28 +38,42 @@ body {
/* 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 {
@@ -89,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 {
@@ -117,9 +112,8 @@ kbd {
/* APP-NAVIGATION ------------------------------------------------------------ */
/* Navigation: folder like structure */
#app-navigation:not(.vue) {
- // We use fixed variable for the pill style as we have larger containers around nested list entries
- --border-radius-pill: calc(var(--default-clickable-area) / 2);
-
+ // 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;
@@ -137,6 +131,22 @@ kbd {
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;
@@ -145,9 +155,8 @@ kbd {
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;
}
}
@@ -179,7 +188,7 @@ kbd {
margin: 0;
margin-bottom: 3px;
width: 100%;
- border-radius: var(--border-radius-pill);
+ border-radius: var(--border-radius-element);
/* Pinned-to-bottom entries */
&.pinned {
@@ -191,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,
@@ -208,8 +217,8 @@ kbd {
}
}
a:focus-visible {
- box-shadow: var(--color-primary) inset 0 0 0 2px;
- outline: none;
+ box-shadow: 0 0 0 4px var(--color-main-background);
+ outline: 2px solid var(--color-main-text);
}
&.active,
a:active,
@@ -217,13 +226,18 @@ kbd {
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;
}
@@ -236,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;
@@ -259,7 +258,7 @@ kbd {
> li {
display: inline-flex;
flex-wrap: wrap;
- padding-left: 44px;
+ padding-inline-start: var(--default-clickable-area);
width: 100%;
margin-bottom: 3px;
@@ -267,7 +266,7 @@ kbd {
&:focus {
&,
> a {
- border-radius: var(--border-radius-pill);
+ border-radius: var(--border-radius-element);
background-color: var(--color-background-hover);
}
}
@@ -275,28 +274,31 @@ kbd {
a.selected {
&,
> a {
- border-radius: var(--border-radius-pill);
- 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;
}
}
}
@@ -317,31 +319,33 @@ 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-pill);
+ border-radius: var(--border-radius-element);
color: var(--color-main-text);
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: 0 8px 0 42px;
+ padding-block: 0;
+ padding-inline: calc(var(--default-clickable-area) - 2px) 8px;
}
}
&:first-child img {
- margin-right: 11px;
+ margin-inline-end: calc(2 * var(--default-grid-baseline)) !important;
width: 16px;
height: 16px;
// Legacy invert if bright background
@@ -351,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;
}
}
}
@@ -377,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 */
@@ -421,35 +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);
+ 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', variables.$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: ' ';
@@ -466,7 +469,7 @@ kbd {
/* 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 {
@@ -500,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%;
@@ -512,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', variables.$color-black, 1, true);
+ @include functions.icon-color('more', 'actions', variables.$color-black, 1, true);
}
&:hover button,
&:focus button {
@@ -522,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 {
@@ -533,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);
}
}
}
@@ -544,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;
@@ -560,7 +562,7 @@ kbd {
}
input {
padding: 5px;
- margin-right: 0;
+ margin-inline-end: 0;
height: 38px;
&:hover,
&:focus {
@@ -571,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']) {
@@ -583,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;
}
}
}
@@ -599,7 +601,7 @@ kbd {
*/
.app-navigation-entry-deleted {
display: inline-flex;
- padding-left: 44px;
+ padding-inline-start: var(--default-clickable-area);
transform: translateX(#{variables.$navigation-width});
.app-navigation-entry-deleted-description {
position: relative;
@@ -607,13 +609,13 @@ kbd {
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;
@@ -631,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;
}
@@ -655,19 +657,54 @@ 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: static;
margin: var(--body-container-margin);
- margin-top: 50px;
+ margin-top: var(--header-height);
padding: 0;
display: flex;
width: calc(100% - var(--body-container-margin) * 2);
height: var(--body-height);
border-radius: var(--body-container-radius);
- overflow: hidden;
+ overflow: clip;
&:not(.with-sidebar--full) {
position: fixed;
@@ -676,14 +713,14 @@ kbd {
@media only screen and (max-width: variables.$breakpoint-mobile) {
#content {
- border-top-left-radius: var(--border-radius-large);
- border-top-right-radius: var(--border-radius-large);
+ border-start-start-radius: var(--border-radius-large);
+ border-start-end-radius: var(--border-radius-large);
}
#app-navigation {
- border-top-left-radius: var(--border-radius-large);
+ border-start-start-radius: var(--border-radius-large);
}
#app-sidebar {
- border-top-right-radius: var(--border-radius-large);
+ border-start-end-radius: var(--border-radius-large);
}
}
@@ -728,6 +765,10 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
}
}
}
+
+ &::-webkit-scrollbar-button {
+ height: var(--body-container-radius);
+ }
}
/* APP-SIDEBAR ------------------------------------------------------------ */
@@ -743,14 +784,14 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
position: -webkit-sticky;
position: sticky;
top: variables.$header-height;
- right:0;
+ inset-inline-end:0;
overflow-y: auto;
overflow-x: hidden;
z-index: 1500;
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 {
@@ -776,7 +817,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
display: none;
padding: calc(var(--default-grid-baseline) * 2);
padding-top: 0;
- padding-left: calc(var(--default-grid-baseline) * 4);
+ padding-inline-start: calc(var(--default-grid-baseline) * 4);
/* restrict height of settings and make scrollable */
max-height: 300px;
overflow-y: auto;
@@ -788,7 +829,8 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
}
.info-text {
- padding: 5px 0 7px 22px;
+ padding-block: 5px 7px;
+ padding-inline: 22px 0;
color: var(--color-text-lighter);
}
input {
@@ -817,7 +859,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
.settings-button {
display: flex;
align-items: center;
- height: 44px;
+ height: var(--default-clickable-area);
width: 100%;
padding: 0;
margin: 0;
@@ -825,7 +867,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
box-shadow: none;
border: 0;
border-radius: calc(var(--default-clickable-area) / 2);
- text-align: left;
+ text-align: start;
font-weight: normal;
font-size: 100%;
opacity: 0.8;
@@ -845,23 +887,39 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
&::before {
background-image: var(--icon-settings-dark);
- background-position: 14px center;
background-repeat: no-repeat;
content: '';
- width: 44px;
- height: 44px;
+ width: var(--default-clickable-area);
+ height: var(--default-clickable-area);
top: 0;
- left: 0;
+ inset-inline-start: 0;
display: block;
}
&:focus-visible {
- box-shadow: 0 0 0 2px inset var(--color-primary) !important;
- background-position: 12px center;
+ box-shadow: 0 0 0 2px inset var(--color-primary-element) !important;
}
}
}
+/* 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;
@@ -875,14 +933,15 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-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;
}
@@ -922,10 +981,10 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-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 {
@@ -935,7 +994,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
background-size: 16px;
vertical-align: middle;
margin-top: -2px;
- margin-right: 3px;
+ margin-inline-end: 3px;
opacity: .7;
cursor: pointer;
}
@@ -958,20 +1017,30 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-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: math.div($popoveritem-height - $popovericon-size, 2);
-.contact .popovermenu ul,
-.popover__menu {
+.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);
@@ -994,7 +1063,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
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;
@@ -1005,7 +1074,7 @@ $outter-margin: math.div($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: ' ';
@@ -1019,21 +1088,19 @@ $outter-margin: math.div($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;
}
}
@@ -1097,7 +1164,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
> input,
> form {
&:not([class^='icon-']):not([class*='icon-']):first-child {
- margin-left: $popoveritem-height;
+ margin-inline-start: $popoveritem-height;
}
}
}
@@ -1114,8 +1181,8 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
box-shadow: 0 0 0 2px var(--color-primary-element);
}
&.active {
- border-radius: var(--border-radius-pill);
- 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 {
@@ -1133,11 +1200,11 @@ $outter-margin: math.div($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 */
@@ -1167,13 +1234,13 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
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 {
@@ -1183,7 +1250,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
flex: 1 1 auto;
// space between inline inputs
&:not(:first-child) {
- margin-left: 5px;
+ margin-inline-start: 5px;
}
}
}
@@ -1214,12 +1281,38 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
}
}
+.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;
+ }
+ }
+ }
+}
+
/* CONTENT LIST ------------------------------------------------------------ */
.app-content-list {
position: -webkit-sticky;
position: relative;
top: 0;
- border-right: 1px solid var(--color-border);
+ border-inline-end: 1px solid var(--color-border);
display: flex;
flex-direction: column;
transition: transform 250ms ease-in-out;
@@ -1307,7 +1400,7 @@ $outter-margin: math.div($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 {
@@ -1323,7 +1416,7 @@ $outter-margin: math.div($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;
@@ -1339,7 +1432,7 @@ $outter-margin: math.div($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;
@@ -1354,13 +1447,12 @@ $outter-margin: math.div($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;
}
@@ -1368,7 +1460,7 @@ $outter-margin: math.div($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 {
@@ -1389,7 +1481,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
margin: 0;
// action icon have -7px margin
// default popover is normally 5px
- right: -2px;
+ inset-inline-end: -2px;
}
}
}
@@ -1397,3 +1489,8 @@ $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;
+}
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-14 16:59:10 +0000