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.scss308
1 files changed, 178 insertions, 130 deletions
diff --git a/core/css/apps.scss b/core/css/apps.scss
index 7aea97ce920..353eb43fe3f 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -1,26 +1,17 @@
-/**
+/*!
* 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 {
- /* - 2px is required for making it look nice */
- --border-radius-rounded: calc(var(--default-clickable-area) / 2 + var(--default-grid-baseline) * 2 - 2px);
-
- --body-container-radius: calc(var(--default-grid-baseline) * 3);
- --body-container-margin: calc(var(--default-grid-baseline) * 2);
- --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;
}
}
@@ -60,23 +51,23 @@ h6 {
}
h2 {
- font-size: 30px;
+ font-size: 1.8em;
}
h3 {
- font-size: 26px;
+ font-size: 1.6em;
}
h4 {
- font-size: 23px;
+ font-size: 1.4em;
}
h5 {
- font-size: 20px;
+ font-size: 1.25em;
}
h6 {
- font-size: 17px;
+ font-size: 1.1em;
}
/* do not use italic typeface style, instead lighter color */
@@ -93,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 {
@@ -121,11 +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;
@@ -145,14 +133,14 @@ kbd {
.app-navigation-caption {
font-weight: bold;
- line-height: 44px;
- padding: 10px 44px 0 44px;
+ 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-left: 10px;
+ margin-inline-start: 10px;
}
}
@@ -167,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;
}
}
@@ -201,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 {
@@ -213,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,
@@ -250,7 +237,7 @@ kbd {
/* align loader */
&.icon-loading-small:after {
- left: 22px;
+ inset-inline-start: 22px;
top: 22px;
}
@@ -271,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;
@@ -279,7 +266,7 @@ kbd {
&:focus {
&,
> a {
- border-radius: var(--border-radius-pill);
+ border-radius: var(--border-radius-element);
background-color: var(--color-background-hover);
}
}
@@ -287,7 +274,7 @@ kbd {
a.selected {
&,
> a {
- border-radius: var(--border-radius-pill);
+ border-radius: var(--border-radius-element);
background-color: var(--color-primary-element-light);
&:first-child > img {
filter: var(--primary-invert-if-dark);
@@ -297,21 +284,21 @@ kbd {
/* 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;
}
}
}
@@ -332,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!important;
+ margin-inline-end: calc(2 * var(--default-grid-baseline)) !important;
width: 16px;
height: 16px;
// Legacy invert if bright background
@@ -366,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;
}
}
}
@@ -392,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 */
@@ -436,14 +425,14 @@ 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;
@@ -454,17 +443,16 @@ kbd {
}
&: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: ' ';
@@ -481,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 {
@@ -515,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%;
@@ -527,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 {
@@ -537,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 {
@@ -559,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;
@@ -575,7 +562,7 @@ kbd {
}
input {
padding: 5px;
- margin-right: 0;
+ margin-inline-end: 0;
height: 38px;
&:hover,
&:focus {
@@ -586,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']) {
@@ -598,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;
}
}
}
@@ -614,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;
@@ -622,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;
@@ -646,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;
}
@@ -670,13 +657,48 @@ 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);
@@ -691,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);
}
}
@@ -762,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 {
@@ -795,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;
@@ -807,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 {
@@ -836,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;
@@ -844,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;
@@ -864,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-element) !important;
- background-position: 12px center;
}
}
}
+/* 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;
@@ -894,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;
}
@@ -941,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 {
@@ -954,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;
}
@@ -977,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);
.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);
@@ -1013,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;
@@ -1024,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: ' ';
@@ -1038,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;
}
}
@@ -1116,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;
}
}
}
@@ -1133,7 +1181,7 @@ $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);
+ border-radius: var(--border-radius-element);
background-color: var(--color-primary-element-light);
}
/* prevent .action class to break the design */
@@ -1152,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 */
@@ -1186,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 {
@@ -1202,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;
}
}
}
@@ -1264,7 +1312,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
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;
@@ -1352,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 {
@@ -1368,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;
@@ -1384,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;
@@ -1399,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;
}
@@ -1413,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 {
@@ -1434,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;
}
}
}
@@ -1442,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;
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-14 15:08:30 +0000