291 lines
5.6 KiB
SCSS
291 lines
5.6 KiB
SCSS
/*!
|
|
* SPDX-FileCopyrightText: 2016 F7cloud GmbH and F7cloud contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-or-later
|
|
*/
|
|
|
|
%prevent-overlap {
|
|
background-color: var(--color-main-background) !important;
|
|
border: 1px solid var(--color-background-dark) !important;
|
|
}
|
|
|
|
.app-navigation-toggle--prevent-overlap {
|
|
@extend %prevent-overlap;
|
|
}
|
|
|
|
.app-calendar {
|
|
.datepicker-button-section,
|
|
.today-button-section,
|
|
.view-button-section {
|
|
display: flex;
|
|
}
|
|
|
|
.datepicker-button-section {
|
|
&__datepicker-label {
|
|
flex-grow: 4 !important;
|
|
text-align: center;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
&__datepicker {
|
|
margin-inline-start: 26px;
|
|
margin-top: 48px;
|
|
position: absolute !important;
|
|
width: 0 !important;
|
|
|
|
.mx-input-wrapper {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
&__left,
|
|
&__right {
|
|
background-size: 10px;
|
|
flex-grow: 0 !important;
|
|
width: 34px;
|
|
padding: 0 6px !important;
|
|
}
|
|
&__left{
|
|
border-radius: var(--border-radius-element) 0 0 var(--border-radius-element) !important;
|
|
}
|
|
&__right{
|
|
border-radius: 0 var(--border-radius-element) var(--border-radius-element) 0 !important;
|
|
}
|
|
}
|
|
|
|
.app-navigation__body {
|
|
overflow-y: unset !important;
|
|
|
|
.app-navigation-header {
|
|
padding: calc(var(--default-grid-baseline, 4px) * 2);
|
|
}
|
|
}
|
|
|
|
.new-event-today-view-section {
|
|
display: flex;
|
|
gap: var(--default-grid-baseline);
|
|
margin-top: var(--default-grid-baseline);
|
|
|
|
// Fix margins from core
|
|
.button {
|
|
margin: 0 var(--default-grid-baseline) 0 0;
|
|
}
|
|
|
|
.new-event {
|
|
flex-grow: 5;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.today {
|
|
flex-grow: 1;
|
|
font-weight: normal !important;
|
|
}
|
|
}
|
|
|
|
// Add background to navigation toggle to fix overlap with calendar elements
|
|
.app-navigation-toggle {
|
|
@extend %prevent-overlap;
|
|
}
|
|
|
|
.app-navigation {
|
|
button.icon-share {
|
|
opacity: 0.3 !important;
|
|
}
|
|
|
|
button.icon-shared,
|
|
button.icon-public {
|
|
opacity: 0.7 !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;
|
|
}
|
|
|
|
#calendars-list {
|
|
display: block !important;
|
|
}
|
|
|
|
li.app-navigation-loading-placeholder-entry {
|
|
div.icon.icon-loading {
|
|
min-height: 44px;
|
|
}
|
|
}
|
|
|
|
.app-navigation-entry-wrapper.deleted {
|
|
.app-navigation-entry__name {
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
|
|
.app-navigation-entry-wrapper.open-sharing {
|
|
box-shadow: inset 4px 0 var(--color-primary-element) !important;
|
|
margin-inline-start: -6px;
|
|
padding-inline-start: 6px;
|
|
}
|
|
|
|
.app-navigation-entry-wrapper.disabled {
|
|
.app-navigation-entry__name {
|
|
color: var(--color-text-lighter) !important;
|
|
}
|
|
}
|
|
|
|
.app-navigation-entry-wrapper .app-navigation-entry__children .app-navigation-entry {
|
|
padding-inline-start: 0 !important;
|
|
|
|
.avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
background-color: var(--color-border-dark);
|
|
background-size: 16px;
|
|
}
|
|
|
|
.avatar.published {
|
|
background-color: var(--color-primary-element);
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.app-navigation-entry__multiselect {
|
|
padding: 0 8px;
|
|
|
|
.multiselect {
|
|
width: 100%;
|
|
border-radius: var(--border-radius-large);
|
|
|
|
&__content-wrapper {
|
|
z-index: 200 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-navigation-entry__utils {
|
|
.action-checkbox__label {
|
|
padding-inline-end: 0 !important;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.action-item:not(.action-item--open) {
|
|
.action-item__menutoggle:not(:hover):not(:focus):not(:active) {
|
|
opacity: .5;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
ul {
|
|
|
|
// 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;
|
|
}
|
|
|
|
.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-inline-start: 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;
|
|
}
|
|
|
|
.app-navigation-entry-link,
|
|
.app-navigation-entry-link * {
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|