diff --git a/css/app-navigation.scss b/css/app-navigation.scss index 95475913a..56e4b891f 100644 --- a/css/app-navigation.scss +++ b/css/app-navigation.scss @@ -3,294 +3,296 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ -.datepicker-button-section, -.today-button-section, -.view-button-section { - display: flex; - - .button { - // this border-radius affects the button in the middle of the group - // for the rounded corner buttons on the sides, see further below - border-radius: 0; - font-weight: normal; - margin: 0 0 var(--default-grid-baseline) 0; - flex-grow: 1; - } - - .button:first-child:not(:only-of-type) { - border-radius: var(--border-radius-element) 0 0 var(--border-radius-element); - } - - .button:last-child:not(:only-of-type) { - border-radius: 0 var(--border-radius-element) var(--border-radius-element) 0; - } - - .button:not(:only-of-type):not(:first-child):not(:last-child) { - border-radius: 0; - } +.app-calendar { + .datepicker-button-section, + .today-button-section, + .view-button-section { + display: flex; + + .button { + // this border-radius affects the button in the middle of the group + // for the rounded corner buttons on the sides, see further below + border-radius: 0; + font-weight: normal; + margin: 0 0 var(--default-grid-baseline) 0; + flex-grow: 1; + } - .button:only-child { - border-radius: var(--border-radius-pill); - } + .button:first-child:not(:only-of-type) { + border-radius: var(--border-radius-element) 0 0 var(--border-radius-element); + } - .button:hover, - .button:focus, - .button.active { - z-index: 50; - } -} + .button:last-child:not(:only-of-type) { + border-radius: 0 var(--border-radius-element) var(--border-radius-element) 0; + } -.datepicker-button-section { - &__datepicker-label { - flex-grow: 4 !important; - text-align: center; - } + .button:not(:only-of-type):not(:first-child):not(:last-child) { + border-radius: 0; + } - &__datepicker { - margin-left: 26px; - margin-top: 48px; - position: absolute !important; - width: 0 !important; + .button:only-child { + border-radius: var(--border-radius-pill); + } - .mx-input-wrapper { - display: none !important; + .button:hover, + .button:focus, + .button.active { + z-index: 50; } } - &__previous, - &__next { - background-size: 10px; - flex-grow: 0 !important; - width: 34px; - padding: 0 6px !important; - } -} + .datepicker-button-section { + &__datepicker-label { + flex-grow: 4 !important; + text-align: center; + } -.app-navigation-header { - padding: calc(var(--default-grid-baseline, 4px) * 2); -} + &__datepicker { + margin-left: 26px; + margin-top: 48px; + position: absolute !important; + width: 0 !important; -.new-event-today-view-section { - display: flex; + .mx-input-wrapper { + display: none !important; + } + } - // Fix margins from core - .button { - margin: 0 var(--default-grid-baseline) 0 0; + &__previous, + &__next { + background-size: 10px; + flex-grow: 0 !important; + width: 34px; + padding: 0 6px !important; + } } - .new-event { - flex-grow: 5; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; + .app-navigation-header { + padding: calc(var(--default-grid-baseline, 4px) * 2); } - .today { - flex-grow: 1; - font-weight: normal !important; - } -} + .new-event-today-view-section { + display: flex; -// Add background to navigation toggle to fix overlap with calendar elements -.app-navigation-toggle { - background-color: var(--color-main-background) !important; -} + // Fix margins from core + .button { + margin: 0 var(--default-grid-baseline) 0 0; + } -.app-navigation { - button.icon-share { - opacity: 0.3 !important; - } + .new-event { + flex-grow: 5; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } - button.icon-shared, - button.icon-public { - opacity: 0.7 !important; + .today { + flex-grow: 1; + font-weight: normal !important; + } } - button.icon-share:active, - button.icon-share:focus, - button.icon-share:hover, - button.icon-shared:active, - button.icon-shared:focus, - button.icon-shared:hover, - button.icon-public:active, - button.icon-public:focus, - button.icon-public:hover { - opacity: 1 !important; + // Add background to navigation toggle to fix overlap with calendar elements + .app-navigation-toggle { + background-color: var(--color-main-background) !important; } - #calendars-list { - display: block !important; - } + .app-navigation { + button.icon-share { + opacity: 0.3 !important; + } - li.app-navigation-loading-placeholder-entry { - div.icon.icon-loading { - min-height: 44px; + button.icon-shared, + button.icon-public { + opacity: 0.7 !important; } - } - .app-navigation-entry-wrapper.deleted { - .app-navigation-entry__name { - text-decoration: line-through; + button.icon-share:active, + button.icon-share:focus, + button.icon-share:hover, + button.icon-shared:active, + button.icon-shared:focus, + button.icon-shared:hover, + button.icon-public:active, + button.icon-public:focus, + button.icon-public:hover { + opacity: 1 !important; } - } - .app-navigation-entry-wrapper.open-sharing { - box-shadow: inset 4px 0 var(--color-primary-element) !important; - margin-left: -6px; - padding-left: 6px; - } + #calendars-list { + display: block !important; + } - .app-navigation-entry-wrapper.disabled { - .app-navigation-entry__name { - color: var(--color-text-lighter) !important; + li.app-navigation-loading-placeholder-entry { + div.icon.icon-loading { + min-height: 44px; + } } - } - .app-navigation-entry-wrapper .app-navigation-entry__children .app-navigation-entry { - padding-left: 0 !important; + .app-navigation-entry-wrapper.deleted { + .app-navigation-entry__name { + text-decoration: line-through; + } + } - .avatar { - width: 32px; - height: 32px; - background-color: var(--color-border-dark); - background-size: 16px; + .app-navigation-entry-wrapper.open-sharing { + box-shadow: inset 4px 0 var(--color-primary-element) !important; + margin-left: -6px; + padding-left: 6px; } - .avatar.published { - background-color: var(--color-primary-element); - color: white; + .app-navigation-entry-wrapper.disabled { + .app-navigation-entry__name { + color: var(--color-text-lighter) !important; + } } - } - .app-navigation-entry__multiselect { - padding: 0 8px; + .app-navigation-entry-wrapper .app-navigation-entry__children .app-navigation-entry { + padding-left: 0 !important; - .multiselect { - width: 100%; - border-radius: var(--border-radius-large); + .avatar { + width: 32px; + height: 32px; + background-color: var(--color-border-dark); + background-size: 16px; + } - &__content-wrapper { - z-index: 200 !important; + .avatar.published { + background-color: var(--color-primary-element); + color: white; } } - } - .app-navigation-entry__utils { - .action-checkbox__label { - padding-right: 0 !important; - } + .app-navigation-entry__multiselect { + padding: 0 8px; - .action-checkbox__label::before { - margin: 0 4px 0 !important; - } - } + .multiselect { + width: 100%; + border-radius: var(--border-radius-large); - .app-navigation-entry-new-calendar { - .app-navigation-entry__name { - color: var(--color-text-maxcontrast) !important; + &__content-wrapper { + z-index: 200 !important; + } + } } - &:hover, - &--open { - .app-navigation-entry__name{ - color: var(--color-text-light) !important; + .app-navigation-entry__utils { + .action-checkbox__label { + padding-right: 0 !important; } - } - .action-item:not(.action-item--open) { - .action-item__menutoggle:not(:hover):not(:focus):not(:active) { - opacity: .5; + .action-checkbox__label::before { + margin: 0 4px 0 !important; } } - } + .app-navigation-entry-new-calendar { + .app-navigation-entry__name { + color: var(--color-text-maxcontrast) !important; + } + &:hover, + &--open { + .app-navigation-entry__name{ + color: var(--color-text-light) !important; + } + } - ul { + .action-item:not(.action-item--open) { + .action-item__menutoggle:not(:hover):not(:focus):not(:active) { + opacity: .5; + } + } - // Calendar list items / Subscription list items - > li.app-navigation-entry-wrapper { + } - div.sharing-section { - //box-shadow: inset 4px 0 var(--color-primary-element); - //padding-left: 12px; - //padding-right: 12px; - //width: 100%; - div.multiselect { - width: calc(100% - 14px); - max-width: none; - z-index: 105; - } + ul { - .oneline { - white-space: nowrap; - position: relative; - } + // Calendar list items / Subscription list items + > li.app-navigation-entry-wrapper { + + div.sharing-section { + //box-shadow: inset 4px 0 var(--color-primary-element); + //padding-left: 12px; + //padding-right: 12px; + //width: 100%; - .shareWithList { - list-style-type: none; - display: flex; - flex-direction: column; + div.multiselect { + width: calc(100% - 14px); + max-width: none; + z-index: 105; + } - > li { - height: 44px; - white-space: normal; - display: inline-flex; - align-items: center; + .oneline { + white-space: nowrap; position: relative; + } + .shareWithList { + list-style-type: none; + display: flex; + flex-direction: column; + > li { + height: 44px; + white-space: normal; + display: inline-flex; + align-items: center; + position: relative; - .username { - padding: 0 8px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - > .sharingOptionsGroup { - margin-left: auto; - display: flex; - align-items: center; - white-space: nowrap; - - > a:hover, - > a:focus, - > .share-menu > a:hover, - > .share-menu > a:focus { - box-shadow: none !important; - opacity: 1 !important; - } - > .icon:not(.hidden), - > .share-menu .icon:not(.hidden){ - padding: 14px; - height: 44px; - width: 44px; - opacity: 0.5; - display: block; - cursor: pointer; + .username { + padding: 0 8px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } - > .share-menu { - position: relative; - display: block; + > .sharingOptionsGroup { + margin-left: auto; + display: flex; + align-items: center; + white-space: nowrap; + + > a:hover, + > a:focus, + > .share-menu > a:hover, + > .share-menu > a:focus { + box-shadow: none !important; + opacity: 1 !important; + } + + > .icon:not(.hidden), + > .share-menu .icon:not(.hidden){ + padding: 14px; + height: 44px; + width: 44px; + opacity: 0.5; + display: block; + cursor: pointer; + } + + > .share-menu { + position: relative; + display: block; + } } } } } } - } - .appointment-config-list { - .app-navigation-caption { - margin-top: 22px; - } + .appointment-config-list { + .app-navigation-caption { + margin-top: 22px; + } - .app-navigation-entry-link, - .app-navigation-entry-link * { - cursor: default; + .app-navigation-entry-link, + .app-navigation-entry-link * { + cursor: default; + } } } }