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.scss1496
1 files changed, 1496 insertions, 0 deletions
diff --git a/core/css/apps.scss b/core/css/apps.scss
new file mode 100644
index 00000000000..353eb43fe3f
--- /dev/null
+++ b/core/css/apps.scss
@@ -0,0 +1,1496 @@
+/*!
+ * 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,
+h3,
+h4,
+h5,
+h6 {
+ font-weight: 600;
+ line-height: 1.5;
+ margin-top: 24px;
+ margin-bottom: 12px;
+ color: var(--color-main-text);
+}
+
+h2 {
+ font-size: 1.8em;
+}
+
+h3 {
+ font-size: 1.6em;
+}
+
+h4 {
+ 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-maxcontrast);
+}
+
+dl {
+ padding: 12px 0;
+}
+
+dt,
+dd {
+ display: inline-block;
+ padding: 12px;
+ padding-inline-start: 0;
+}
+
+dt {
+ width: 130px;
+ white-space: nowrap;
+ text-align: end;
+}
+
+kbd {
+ padding: 4px 10px;
+ border: 1px solid #ccc;
+ box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
+ border-radius: var(--border-radius);
+ display: inline-block;
+ white-space: nowrap;
+}
+
+
+/* APP STYLING ------------------------------------------------------------ */
+
+#content[class*='app-'] * {
+ box-sizing: border-box;
+}
+
+/* APP-NAVIGATION ------------------------------------------------------------ */
+/* Navigation: folder like structure */
+#app-navigation:not(.vue) {
+ // 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;
+ 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;
+ 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: calc(var(--default-grid-baseline) * 2);
+ button {
+ display: inline-block;
+ width: 100%;
+ padding: 10px;
+ padding-inline-start: 34px;
+ text-align: start;
+ margin: 0;
+ }
+ }
+
+ li {
+ position: relative;
+ }
+ > ul {
+ position: relative;
+ height: 100%;
+ 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 {
+ order: 2;
+ &.first-pinned {
+ margin-top: auto !important;
+ }
+ }
+
+ > .app-navigation-entry-deleted {
+ /* Ugly hack for overriding the main entry link */
+ 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-inline-start: calc(var(--default-clickable-area) - 6px) !important;
+ }
+
+ a:hover,
+ a:focus {
+ &,
+ > a {
+ 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-element);
+ color: var(--color-primary-element-text);
+
+ &:first-child > img {
+ filter: var(--primary-invert-if-dark);
+ }
+ }
+ }
+
+ /* align loader */
+ &.icon-loading-small:after {
+ inset-inline-start: 22px;
+ top: 22px;
+ }
+
+ /* hide deletion/collapse of subitems */
+ &.deleted,
+ &.collapsible:not(.open) {
+ > ul {
+ // NO ANIMATE because if not really hidden, we can still tab through it
+ display: none;
+ }
+ }
+
+ /* Second level nesting for lists */
+ > ul {
+ flex: 0 1 auto;
+ width: 100%;
+ position: relative;
+ > li {
+ display: inline-flex;
+ flex-wrap: wrap;
+ 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);
+ }
+ }
+ &.active,
+ a.selected {
+ &,
+ > a {
+ 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 {
+ inset-inline-start: calc(var(--default-clickable-area) / 2);
+ }
+
+ > .app-navigation-entry-deleted {
+ /* margin to keep active indicator visible */
+ margin-inline-start: 4px;
+ padding-inline-start: 84px;
+ }
+
+ > .app-navigation-entry-edit {
+ /* margin to keep active indicator visible */
+ margin-inline-start: 4px;
+ /* align the input correctly with the link text
+ 44px+44px-4px-6px padding for the input */
+ padding-inline-start: calc(2 * var(--default-clickable-area) - 10px) !important;
+ }
+ }
+ }
+ }
+ /* Menu and submenu */
+ > li,
+ > li > ul > li {
+ position: relative;
+ box-sizing: border-box;
+ /* hide icons if loading */
+ &.icon-loading-small {
+ > a,
+ > .app-navigation-entry-bullet {
+ /* hide icon or bullet if loading state*/
+ background: transparent !important;
+ }
+ }
+ /* Main entry link */
+ > a {
+ background-size: 16px 16px;
+ background-repeat: no-repeat;
+ display: block;
+ justify-content: space-between;
+ 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);
+ flex: 1 1 0px;
+ z-index: 100; /* above the bullet to allow click*/
+ /* TODO: forbid using img as icon in menu? */
+
+ &.svg {
+ 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-inline-end: calc(2 * var(--default-grid-baseline)) !important;
+ width: 16px;
+ height: 16px;
+ // Legacy invert if bright background
+ filter: var(--background-invert-if-dark);
+ }
+
+ /* counter can also be inside the link */
+ > .app-navigation-entry-utils {
+ display: inline-block;
+ /* Check Floating fix below */
+ .app-navigation-entry-utils-counter {
+ padding-inline-end: 0 !important;
+ }
+ }
+ }
+ /* Bullet icon */
+ > .app-navigation-entry-bullet {
+ position: absolute;
+ display: block;
+ margin: 16px;
+ width: 12px;
+ height: 12px;
+ border: none;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: background 100ms ease-in-out;
+
+ + a {
+ /* hide icon if bullet, can't have both */
+ background: transparent !important;
+ }
+ }
+
+ /* popover fix the flex positionning of the li parent */
+ > .app-navigation-entry-menu {
+ top: var(--default-clickable-area);
+ }
+
+ /* show edit/undo field if editing/deleted */
+ &.editing .app-navigation-entry-edit {
+ opacity: 1;
+ z-index: 250;
+ }
+ &.deleted .app-navigation-entry-deleted {
+ transform: translateX(0);
+ z-index: 250;
+ }
+ }
+ }
+ &.hidden {
+ display: none;
+ }
+
+ /**
+ * Button styling for menu, edit and undo
+ */
+ .app-navigation-entry-utils .app-navigation-entry-utils-menu-button > button,
+ .app-navigation-entry-deleted .app-navigation-entry-deleted-button {
+ border: 0;
+ opacity: 0.5;
+ background-color: transparent;
+ background-repeat: no-repeat;
+ background-position: center;
+ &:hover,
+ &:focus {
+ background-color: transparent;
+ opacity: 1;
+ }
+ }
+
+ /**
+ * Collapsible menus
+ */
+ .collapsible {
+ /* Fallback for old collapse button.
+ TODO: to be removed. Leaved here for retro compatibility */
+ .collapse {
+ opacity: 0;
+ position: absolute;
+ 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. */
+ 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: var(--default-clickable-area);
+ width: var(--default-clickable-area);
+ margin: 0;
+ padding: 0;
+ background: none;
+ @include functions.icon-color('triangle-s', 'actions', variables.$color-black, 1, true);
+ background-size: 16px;
+ background-repeat: no-repeat;
+ background-position: center;
+ border: none;
+ outline: none !important;
+ box-shadow: none;
+ content: ' ';
+ opacity: 0;
+ -webkit-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ z-index: 105; // above a, under button
+ border-radius: 50%;
+ transition: opacity variables.$animation-quick ease-in-out;
+
+
+ }
+
+ /* force padding on link no matter if 'a' has an icon class */
+ > a:first-child {
+ padding-inline-start: var(--default-clickable-area);
+ }
+ &:hover,
+ &:focus {
+ &:before {
+ opacity: 1;
+ }
+ > a {
+ background-image: none;
+ }
+ > .app-navigation-entry-bullet {
+ background: transparent !important;
+ }
+ }
+ &.open {
+ &:before {
+ -webkit-transform: rotate(0);
+ -ms-transform: rotate(0);
+ transform: rotate(0);
+ }
+ }
+ }
+
+ /**
+ * App navigation utils, buttons and counters for drop down menu
+ */
+ .app-navigation-entry-utils {
+ flex: 0 1 auto;
+ ul {
+ display: flex !important;
+ align-items: center;
+ justify-content: flex-end;
+ }
+ li {
+ width: var(--default-clickable-area) !important;
+ height: var(--default-clickable-area);
+ }
+ button {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ box-shadow: none;
+ }
+ .app-navigation-entry-utils-menu-button {
+ /* Prevent bg img override if an icon class is set */
+ button:not([class^='icon-']):not([class*=' icon-']) {
+ @include functions.icon-color('more', 'actions', variables.$color-black, 1, true);
+ }
+ &:hover button,
+ &:focus button {
+ background-color: transparent;
+ opacity: 1;
+ }
+ }
+ .app-navigation-entry-utils-counter {
+ overflow: hidden;
+ text-align: end;
+ font-size: 9pt;
+ line-height: var(--default-clickable-area);
+ padding: 0 12px; /* Same padding as all li > a in the app-navigation */
+
+ &.highlighted {
+ padding: 0;
+ text-align: center;
+ span {
+ padding: 2px 5px;
+ border-radius: 10px;
+ background-color: var(--color-primary-element);
+ color: var(--color-primary-element-text);
+ }
+ }
+ }
+ }
+
+ /**
+ * Editable entries
+ */
+ .app-navigation-entry-edit {
+ padding-inline: 5px;
+ display: block;
+ width: calc(100% - 1px); /* Avoid border overlapping */
+ transition: opacity 250ms ease-in-out;
+ opacity: 0;
+ position: absolute;
+ background-color: var(--color-main-background);
+ z-index: -1;
+ form,
+ div {
+ display: inline-flex;
+ width: 100%;
+ }
+ input {
+ padding: 5px;
+ margin-inline-end: 0;
+ height: 38px;
+ &:hover,
+ &:focus {
+ /* overlapp borders */
+ z-index: 1;
+ }
+ }
+ input[type='text'] {
+ width: 100%;
+ min-width: 0; /* firefox hack: override auto */
+ border-end-end-radius: 0;
+ border-start-end-radius: 0;
+ }
+ button,
+ input:not([type='text']) {
+ width: 36px;
+ height: 38px;
+ flex: 0 0 36px;
+ &:not(:last-child) {
+ border-radius: 0 !important;
+ }
+ &:not(:first-child) {
+ margin-inline-start: -1px;
+ }
+ &:last-child {
+ border-end-end-radius: var(--border-radius);
+ border-start-end-radius: var(--border-radius);
+ border-end-start-radius: 0;
+ border-start-start-radius: 0;
+ }
+ }
+ }
+
+ /**
+ * Deleted entries with undo button
+ */
+ .app-navigation-entry-deleted {
+ display: inline-flex;
+ 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: var(--default-clickable-area);
+ }
+ .app-navigation-entry-deleted-button {
+ margin: 0;
+ height: var(--default-clickable-area);
+ width: var(--default-clickable-area);
+ line-height: var(--default-clickable-area);
+ &:hover,
+ &:focus {
+ opacity: 1;
+ }
+ }
+ }
+
+ /**
+ * Common rules for animation of undo and edit entries
+ */
+ .app-navigation-entry-edit,
+ .app-navigation-entry-deleted {
+ width: calc(100% - 1px); /* Avoid border overlapping */
+ transition: transform 250ms ease-in-out,
+ opacity 250ms ease-in-out,
+ z-index 250ms ease-in-out;
+ position: absolute;
+ inset-inline-start: 0;
+ background-color: var(--color-main-background);
+ box-sizing: border-box;
+ }
+
+ /**
+ * drag and drop
+ */
+ .drag-and-drop {
+ -webkit-transition: padding-bottom 500ms ease 0s;
+ transition: padding-bottom 500ms ease 0s;
+ padding-bottom: 40px;
+ }
+
+ .error {
+ color: var(--color-error);
+ }
+
+ .app-navigation-entry-utils ul,
+ .app-navigation-entry-menu ul {
+ list-style-type: none;
+ }
+}
+
+/* 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: 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: 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 ------------------------------------------ */
+/* Part where the content will be loaded into */
+
+/**
+ * !Important. We are defining the minimum requirement we want for flex
+ * 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: variables.$breakpoint-mobile - variables.$navigation-width - variables.$list-min-width;
+
+#app-content {
+ z-index: 1000;
+ background-color: var(--color-main-background);
+ flex-basis: 100vw;
+ overflow: auto;
+ position: initial;
+ height: 100%;
+ /* margin if navigation element is here */
+ /* no top border for first settings item */
+ > .section:first-child {
+ border-top: none;
+ }
+
+ /* if app-content-list is present */
+ #app-content-wrapper {
+ display: flex;
+ position: relative;
+ align-items: stretch;
+ /* make sure we have at least full height for loaders or such
+ no need for list/details since we have a flex stretch */
+ min-height: 100%;
+
+ /* CONTENT DETAILS AFTER LIST*/
+ .app-content-details {
+ /* grow full width */
+ flex: 1 1 $min-content-width;
+ #app-navigation-toggle-back {
+ display: none;
+ }
+ }
+ }
+
+ &::-webkit-scrollbar-button {
+ height: var(--body-container-radius);
+ }
+}
+
+/* APP-SIDEBAR ------------------------------------------------------------ */
+/*
+ Sidebar: a sidebar to be used within #content
+ #app-content will be shrinked properly
+*/
+#app-sidebar {
+ width: 27vw;
+ min-width: variables.$sidebar-min-width;
+ max-width: variables.$sidebar-max-width;
+ display: block;
+ position: -webkit-sticky;
+ position: sticky;
+ top: variables.$header-height;
+ 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-inline-start: 1px solid var(--color-border);
+ flex-shrink: 0;
+ // no animations possible, use OC.Apps.showAppSidebar
+ &.disappear {
+ display: none;
+ }
+}
+
+
+/* APP-SETTINGS ------------------------------------------------------------ */
+/* settings area */
+#app-settings {
+ // To the bottom w/ flex
+ margin-top: auto;
+ &.open,
+ &.opened {
+ #app-settings-content {
+ display: block;
+ }
+ }
+}
+
+#app-settings-content {
+ display: none;
+ 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;
+ box-sizing: border-box;
+
+ /* display input fields at full width */
+ input[type='text'] {
+ width: 93%;
+ }
+
+ .info-text {
+ padding-block: 5px 7px;
+ padding-inline: 22px 0;
+ color: var(--color-text-lighter);
+ }
+ input {
+ &[type='checkbox'],
+ &[type='radio'] {
+ &.radio,
+ &.checkbox {
+ + label {
+ display: inline-block;
+ width: 100%;
+ padding: 5px 0;
+ }
+ }
+ }
+ }
+}
+
+#app-settings-header {
+ box-sizing: border-box;
+ 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);
+ }
+
+ &::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;
+ }
+
+ &:focus-visible {
+ 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;
+ padding: 30px;
+ margin-bottom: 24px;
+ &.hidden {
+ display: none !important;
+ }
+ /* slight position correction of checkboxes and radio buttons */
+ input {
+ &[type='checkbox'],
+ &[type='radio'] {
+ vertical-align: -2px;
+ margin-inline-end: 4px;
+ }
+ }
+}
+
+.sub-section {
+ position: relative;
+ margin-top: 10px;
+ margin-inline-start: 27px;
+ margin-bottom: 10px;
+}
+
+.appear {
+ opacity: 1;
+ -webkit-transition: opacity 500ms ease 0s;
+ -moz-transition: opacity 500ms ease 0s;
+ -ms-transition: opacity 500ms ease 0s;
+ -o-transition: opacity 500ms ease 0s;
+ transition: opacity 500ms ease 0s;
+ &.transparent {
+ opacity: 0;
+ }
+}
+
+/* TABS ------------------------------------------------------------ */
+.tabHeaders {
+ display: flex;
+ margin-bottom: 16px;
+
+ .tabHeader {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ text-align: center;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ cursor: pointer;
+ color: var(--color-text-lighter);
+ margin-bottom: 1px;
+ padding: 5px;
+
+ &.hidden {
+ display: none;
+ }
+
+ /* Use same amount as sidebar padding */
+ &:first-child {
+ padding-inline-start: 15px;
+ }
+ &:last-child {
+ padding-inline-end: 15px;
+ }
+
+ .icon {
+ display: inline-block;
+ width: 100%;
+ height: 16px;
+ background-size: 16px;
+ vertical-align: middle;
+ margin-top: -2px;
+ margin-inline-end: 3px;
+ opacity: .7;
+ cursor: pointer;
+ }
+
+ a {
+ color: var(--color-text-lighter);
+ margin-bottom: 1px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ &.selected {
+ font-weight: bold;
+ }
+ &.selected,
+ &:hover,
+ &:focus {
+ margin-bottom: 0px;
+ color: var(--color-main-text);
+ border-bottom: 1px solid var(--color-text-lighter);
+ }
+ }
+}
+
+.tabsContainer {
+ .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: 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);
+
+ // 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;
+ }
+ }
+}
+
+.bubble,
+.app-navigation-entry-menu,
+.popovermenu {
+ position: absolute;
+ background-color: var(--color-main-background);
+ color: var(--color-main-text);
+ border-radius: var(--border-radius-large);
+ padding: 3px;
+ z-index: 110;
+ margin: 5px;
+ margin-top: -5px;
+ inset-inline-end: 0;
+ filter: drop-shadow(0 1px 3px var(--color-box-shadow));
+ display: none;
+ will-change: filter;
+
+ &:after {
+ bottom: 100%;
+ // Required right-distance is half menu icon size + right padding
+ // = 16px/2 + 14px = 22px
+ // popover right margin is 5px, arrow width is 9px to center and border is 1px
+ // 22px - 9px - 5px - 1px = 7px
+ inset-inline-end: 7px;
+ /* change this to adjust the arrow position */
+ border: solid transparent;
+ content: ' ';
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-bottom-color: var(--color-main-background);
+ border-width: 9px;
+ }
+ /* Center the popover */
+ &.menu-center {
+ transform: translateX(50%);
+ inset-inline-end: 50%;
+ margin-inline-end: 0;
+ &:after {
+ inset-inline-end: 50%;
+ transform: translateX(50%);
+ }
+ }
+ /* Align the popover to the left */
+ &.menu-left {
+ inset-inline: 0 auto;
+ margin-inline-end: 0;
+ &:after {
+ inset-inline: 6px auto;
+ }
+ }
+
+ &.open {
+ display: block;
+ }
+
+ &.contactsmenu-popover {
+ margin: 0;
+ }
+
+ ul {
+ /* Overwrite #app-navigation > ul ul */
+ display: flex !important;
+ flex-direction: column;
+ }
+ li {
+ display: flex;
+ flex: 0 0 auto;
+
+ &.hidden {
+ display: none;
+ }
+
+ > button,
+ > a,
+ > .menuitem {
+ cursor: pointer;
+ line-height: $popoveritem-height;
+ border: 0;
+ border-radius: var(--border-radius-large);
+ background-color: transparent;
+ display: flex;
+ align-items: flex-start;
+ height: auto;
+ margin: 0;
+ font-weight: normal;
+ box-shadow: none;
+ width: 100%;
+ color: var(--color-main-text);
+ white-space: nowrap;
+
+ span[class^='icon-'],
+ span[class*=' icon-'],
+ &[class^='icon-'],
+ &[class*=' icon-'] {
+ min-width: 0; /* Overwrite icons*/
+ min-height: 0;
+ 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: #{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-']) {
+ > span,
+ > input,
+ > form {
+ &:not([class^='icon-']):not([class*='icon-']):first-child {
+ margin-inline-start: $popoveritem-height;
+ }
+ }
+ }
+ &[class^='icon-'],
+ &[class*=' icon-'] {
+ 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 {
+ border-radius: var(--border-radius-element);
+ background-color: var(--color-primary-element-light);
+ }
+ /* prevent .action class to break the design */
+ &.action {
+ padding: inherit !important;
+ }
+ > span {
+ cursor: pointer;
+ white-space: nowrap;
+ }
+ > p {
+ width: 150px;
+ line-height: 1.6em;
+ padding: 8px 0;
+ white-space: normal;
+ }
+ > select {
+ margin: 0;
+ margin-inline-start: 6px;
+ }
+ /* Add padding if contains icon+text */
+ &:not(:empty) {
+ padding-inline-end: $outter-margin !important;
+ }
+ /* DEPRECATED! old img in popover fallback
+ * TODO: to remove */
+ > img {
+ width: $popovericon-size;
+ padding: #{math.div($popoveritem-height - $popovericon-size, 2)};
+ }
+ /* checkbox/radio fixes */
+ > input.radio + label,
+ > input.checkbox + label {
+ padding: 0 !important;
+ width: 100%;
+ }
+ > input.checkbox + label::before {
+ margin: -2px 13px 0;
+ }
+ > input.radio + label::before {
+ margin: -2px 12px 0;
+ }
+ > input:not([type=radio]):not([type=checkbox]):not([type=image]) {
+ width: 150px;
+ }
+ form {
+ display: flex;
+ 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-inline-start: 5px;
+ }
+ }
+ /* no margin if hidden span before */
+ > span.hidden + form,
+ > span[style*='display:none'] + form {
+ margin-inline-start: 0;
+ }
+ /* Inputs inside popover supports text, submit & reset */
+ input {
+ min-width: $popoveritem-height;
+ max-height: #{$popoveritem-height - 4px}; /* twice the element margin-y */
+ margin: 2px 0;
+ flex: 1 1 auto;
+ // space between inline inputs
+ &:not(:first-child) {
+ margin-inline-start: 5px;
+ }
+ }
+ }
+ /* css hack, only first not hidden */
+ &:not(.hidden):not([style*='display:none']) {
+ &:first-of-type {
+ > button, > a, > .menuitem {
+ > form, > input {
+ margin-top: $outter-margin - 2px; // minus the input margin
+ }
+ }
+ }
+ &:last-of-type {
+ > button, > a, > .menuitem {
+ > form, > input {
+ margin-bottom: 0px;
+ }
+ }
+ }
+ }
+ > button {
+ padding: 0;
+ span {
+ opacity: 1;
+ }
+ }
+
+ }
+}
+
+.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-inline-end: 1px solid var(--color-border);
+ display: flex;
+ flex-direction: column;
+ transition: transform 250ms ease-in-out;
+ min-height: 100%;
+ max-height: 100%;
+ overflow-y: auto;
+ overflow-x: hidden;
+ 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 {
+ position: relative;
+ height: 68px;
+ cursor: pointer;
+ padding: 10px 7px;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ flex: 0 0 auto;
+
+ /* Icon fixes */
+ &,
+ > .app-content-list-item-menu {
+ > [class^='icon-'],
+ > [class*=' icon-'] {
+ order: 4;
+ width: 24px;
+ height: 24px;
+ margin: -7px; // right padding of item
+ padding: 22px;
+ opacity: .3;
+ cursor: pointer;
+ &:hover,
+ &:focus {
+ opacity: .7;
+ }
+ &[class^='icon-star'],
+ &[class*=' icon-star'] {
+ opacity: .7;
+ &:hover,
+ &:focus {
+ opacity: 1 ;
+ }
+
+ }
+ &.icon-starred {
+ opacity: 1 ;
+ }
+ }
+ }
+
+ &:hover,
+ &:focus,
+ &.active {
+ background-color: var(--color-background-dark);
+ // display checkbox on hover/focus/active
+ .app-content-list-item-checkbox.checkbox + label {
+ display: flex;
+ }
+ }
+
+ .app-content-list-item-checkbox.checkbox + label,
+ .app-content-list-item-star {
+ position: absolute;
+ height: 40px;
+ width: 40px;
+ z-index: 50;
+ }
+
+ .app-content-list-item-checkbox.checkbox {
+ &:checked,
+ &:hover,
+ &:focus,
+ &.active {
+ + label {
+ // display checkbox if checked
+ display: flex;
+ // if checked, lower the opacity of the avatar
+ + .app-content-list-item-icon {
+ opacity: .7;
+ }
+ }
+ }
+ + label {
+ top: 14px;
+ inset-inline-start: 7px;
+ // hidden by default, only chown on hover-focus or if checked
+ display: none;
+ &::before {
+ margin: 0;
+ }
+ /* Hide the star, priority to the checkbox */
+ ~ .app-content-list-item-star {
+ display: none;
+ }
+ }
+ }
+
+ .app-content-list-item-star {
+ display: flex;
+ top: 10px;
+ inset-inline-start: 32px;
+ background-size: 16px;
+ height: 20px;
+ width: 20px;
+ margin: 0;
+ padding: 0;
+ }
+
+ .app-content-list-item-icon {
+ position: absolute;
+ display: inline-block;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ border-radius: 50%;
+ vertical-align: middle;
+ margin-inline-end: 10px;
+ color: #fff;
+ text-align: center;
+ font-size: 1.5em;
+ text-transform: capitalize;
+ object-fit: cover;
+ user-select: none;
+ cursor: pointer;
+ top: 50%;
+ margin-top: -20px;
+ }
+
+ .app-content-list-item-line-one,
+ .app-content-list-item-line-two {
+ display: block;
+ padding-inline: 50px 10px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ order: 1;
+ flex: 1 1 0px;
+ cursor: pointer;
+ }
+
+ .app-content-list-item-line-two {
+ opacity: .5;
+ order: 3;
+ flex: 1 0;
+ flex-basis: calc(100% - var(--default-clickable-area));
+ }
+
+ .app-content-list-item-details {
+ order: 2;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 100px;
+ opacity: .5;
+ font-size: 80%;
+ user-select: none;
+ }
+
+ .app-content-list-item-menu {
+ order: 4;
+ position: relative;
+ .popovermenu {
+ margin: 0;
+ // action icon have -7px margin
+ // default popover is normally 5px
+ inset-inline-end: -2px;
+ }
+ }
+ }
+ &.selection .app-content-list-item-checkbox.checkbox + label {
+ 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-16 05:04:32 +0000