mirror of https://github.com/nextcloud/calendar
908 lines
14 KiB
SCSS
908 lines
14 KiB
SCSS
/**
|
|
* Calendar App
|
|
*
|
|
* @copyright 2019 Georg Ehrke <oc.list@georgehrke.com>
|
|
*
|
|
* @author Georg Ehrke
|
|
* @author Richard Steinmetz <richard@steinmetz.cloud>
|
|
*
|
|
* This library is free software; you can redistribute it and/or
|
|
* modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
|
|
* License as published by the Free Software Foundation; either
|
|
* version 3 of the License, or any later version.
|
|
*
|
|
* This library is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU AFFERO GENERAL PUBLIC LICENSE for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public
|
|
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|
*
|
|
*/
|
|
|
|
.app-sidebar,
|
|
.event-popover .event-popover__inner {
|
|
.editor-invitee-list-empty-message,
|
|
.editor-reminders-list-empty-message,
|
|
.editor-invitee-list-no-email-configured-message {
|
|
margin-top: 20px;
|
|
|
|
&__icon {
|
|
background-size: 50px;
|
|
height: 50px;
|
|
width: 50px;
|
|
margin: 0 auto;
|
|
opacity: .5;
|
|
}
|
|
|
|
&__caption {
|
|
margin-top: 8px;
|
|
text-align: center;
|
|
color: var(--color-text-lighter);
|
|
}
|
|
}
|
|
|
|
.editor-invitee-list-no-email-configured-message {
|
|
&__icon {
|
|
font-size: 50px;
|
|
line-height: 1em;
|
|
user-select: none;
|
|
}
|
|
}
|
|
|
|
.editor-reminders-list-new-button {
|
|
width: 100%;
|
|
background-position-x: 8px;
|
|
}
|
|
|
|
.app-sidebar-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
overflow: unset !important;
|
|
max-height: unset !important;
|
|
height: auto !important;
|
|
|
|
&__buttons {
|
|
position: fixed;
|
|
bottom: var(--body-container-margin);;
|
|
z-index: 2;
|
|
width: calc(27vw - 11px);
|
|
min-width: 300px - 11px;
|
|
max-width: 500px - 11px;
|
|
background-color: var(--color-main-background);
|
|
border-radius: 0 0 var(--body-container-radius) 0;
|
|
padding: 0 8px 6px 0;
|
|
|
|
button {
|
|
width: 100%;
|
|
height: 44px;
|
|
}
|
|
}
|
|
&__content {
|
|
margin-bottom: 120px;
|
|
}
|
|
}
|
|
|
|
.property-title-time-picker-loading-placeholder {
|
|
width: 100%;
|
|
|
|
&__icon {
|
|
margin: 0 auto;
|
|
height: 62px;
|
|
width: 62px;
|
|
background-size: 62px;
|
|
}
|
|
}
|
|
|
|
.app-sidebar__loading-indicator {
|
|
width: 100%;
|
|
margin-top: 20vh;
|
|
|
|
&__icon {
|
|
margin: 0 auto;
|
|
height: 44px;
|
|
width: 44px;
|
|
background-size: 44px;
|
|
}
|
|
}
|
|
|
|
.repeat-option-set {
|
|
.repeat-option-set-section {
|
|
&:not(:first-of-type) {
|
|
margin-top: 20px
|
|
}
|
|
|
|
&--on-the-select {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.v-select {
|
|
width: 100%;
|
|
min-width: 100px !important; // Set a lower min-width
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
list-style: none;
|
|
}
|
|
|
|
&__grid {
|
|
display: grid;
|
|
grid-gap: 0;
|
|
|
|
.repeat-option-set-section-grid-item {
|
|
padding: 8px;
|
|
border: 1px solid var(--color-border-dark);
|
|
text-align: center;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--weekly,
|
|
&--monthly {
|
|
.repeat-option-set-section {
|
|
&__grid {
|
|
grid-template-columns: repeat(7, auto);
|
|
}
|
|
}
|
|
}
|
|
|
|
&--yearly {
|
|
.repeat-option-set-section {
|
|
&__grid {
|
|
grid-template-columns: repeat(4, auto);
|
|
}
|
|
}
|
|
}
|
|
|
|
&--interval-freq {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.multiselect {
|
|
min-width: 100px;
|
|
width: 25%;
|
|
}
|
|
}
|
|
|
|
&--end {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.repeat-option-end {
|
|
&__label,
|
|
&__end-type-select {
|
|
display: block;
|
|
min-width: 160px;
|
|
width: 25%;
|
|
}
|
|
|
|
&__until {
|
|
min-width: 75px;
|
|
width: 50%
|
|
}
|
|
|
|
&__count {
|
|
min-width: 75px;
|
|
width: 25%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__label {
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
.repeat-option-warning {
|
|
text-align: center;
|
|
}
|
|
|
|
.property-title-time-picker {
|
|
width: 100%;
|
|
|
|
&--readonly {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&__icon {
|
|
width: 34px;
|
|
height: 34px;
|
|
margin-left: -5px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
&__time-pickers,
|
|
&__all-day {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&__time-pickers {
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
gap: 5px;
|
|
|
|
.mx-datepicker {
|
|
flex: 1 auto;
|
|
|
|
.mx-input-append {
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
|
|
&--readonly {
|
|
justify-content: start;
|
|
|
|
.property-title-time-picker-read-only-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 7px;
|
|
background-color: var(--color-main-background);
|
|
color: var(--color-main-text);
|
|
outline: none;
|
|
|
|
&--start-date {
|
|
padding-right: 0;
|
|
}
|
|
|
|
&--end-date {
|
|
padding-left: 0;
|
|
}
|
|
|
|
&__icon {
|
|
margin-left: 8px;
|
|
height: 16px;
|
|
width: 16px;
|
|
opacity: .3;
|
|
|
|
&--highlighted {
|
|
opacity: .7;
|
|
}
|
|
|
|
&:focus,
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__all-day {
|
|
padding-left: 3px;
|
|
margin-top: 5px;
|
|
|
|
// Reduce the height just a little bit (from 44px) to save some space
|
|
.checkbox-radio-switch__label {
|
|
min-height: 32px;
|
|
}
|
|
}
|
|
|
|
.datetime-picker-inline-icon {
|
|
margin-top: 17px;
|
|
opacity: .3;
|
|
border: none;
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
padding: 6px !important;
|
|
|
|
&--highlighted {
|
|
opacity: .7;
|
|
}
|
|
|
|
&:focus,
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.property-alarm-list {
|
|
width: 100%;
|
|
}
|
|
|
|
.property-alarm-item {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 44px;
|
|
|
|
&__icon {
|
|
align-self: flex-start;
|
|
|
|
&--hidden {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.icon {
|
|
width: 34px;
|
|
height: 44px;
|
|
margin-left: -5px;
|
|
margin-right: 5px;
|
|
// TODO: enable me again if the other icons on the details tab have an opacity too
|
|
// opacity: .7;
|
|
}
|
|
}
|
|
|
|
&__label {
|
|
padding: 0 7px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
align-self: center;
|
|
}
|
|
|
|
&__options {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&__edit {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding-right: 8px;
|
|
|
|
input[type=number] {
|
|
width: 4em;
|
|
}
|
|
|
|
.multiselect {
|
|
flex: 1 auto;
|
|
height: 34px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.mx-datepicker {
|
|
flex: 1 auto;
|
|
}
|
|
|
|
&--timed {
|
|
}
|
|
|
|
&--all-day {
|
|
flex-wrap: wrap;
|
|
margin-bottom: 5px;
|
|
gap: 0 5px;
|
|
|
|
&__distance,
|
|
&__time {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
}
|
|
|
|
&__distance {
|
|
.multiselect {
|
|
width: 6em;
|
|
}
|
|
}
|
|
|
|
&__time {
|
|
&__before-at-label {
|
|
flex: 0 0 auto;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.mx-datepicker {
|
|
width: 7em;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--absolute {
|
|
.mx-datepicker {
|
|
width: unset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.property-repeat {
|
|
width: 100%;
|
|
|
|
&__summary {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&__icon {
|
|
width: 34px;
|
|
height: 34px;
|
|
margin-left: -5px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
&__content {
|
|
flex: 1 auto;
|
|
padding: 8px 7px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
&__options {
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
.resource-list-item,
|
|
.invitees-list-item {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 44px;
|
|
|
|
&__displayname {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
&__actions {
|
|
margin-left: auto;
|
|
}
|
|
|
|
&__organizer-hint {
|
|
color: var(--color-text-maxcontrast);
|
|
font-weight: 300;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.resource-search {
|
|
&__capacity {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&__actions {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatar-participation-status {
|
|
position: relative;
|
|
height: 38px;
|
|
width: 38px;
|
|
|
|
&__indicator {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-size: 10px;
|
|
height: 15px;
|
|
width: 15px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
&__indicator.accepted {
|
|
background-color: #2fb130;
|
|
}
|
|
|
|
&__indicator.declined {
|
|
background-color: #ff0000;
|
|
}
|
|
|
|
&__indicator.tentative {
|
|
background-color: #ffa704;
|
|
}
|
|
|
|
&__indicator.delegated,
|
|
&__indicator.no-response {
|
|
background-color: grey;
|
|
}
|
|
}
|
|
|
|
.property-text,
|
|
.property-select,
|
|
.property-color,
|
|
.property-select-multiple,
|
|
.property-title,
|
|
.resource-capacity,
|
|
.resource-room-type {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: flex-start;
|
|
|
|
&__icon,
|
|
&__info {
|
|
height: 34px;
|
|
width: 34px;
|
|
}
|
|
|
|
&__icon {
|
|
&--hidden {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
&__info {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
opacity: .5;
|
|
}
|
|
|
|
&__info:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
&__icon {
|
|
flex-shrink: 0;
|
|
margin-left: -5px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
&__input {
|
|
flex-grow: 2;
|
|
|
|
textarea,
|
|
input,
|
|
div.v-select {
|
|
width: 100%;
|
|
}
|
|
|
|
textarea {
|
|
max-height: calc(100vh - 500px);
|
|
vertical-align: top;
|
|
margin: 0;
|
|
}
|
|
|
|
&--readonly {
|
|
div {
|
|
width: calc(100% - 8px); /* for typical (thin) scrollbar size */
|
|
white-space: pre-line;
|
|
padding: 8px 7px;
|
|
background-color: var(--color-main-background);
|
|
color: var(--color-main-text);
|
|
outline: none;
|
|
overflow-y: scroll;
|
|
word-break: break-word; /* allows breaking on long URLs */
|
|
max-height: 30vh;
|
|
}
|
|
}
|
|
|
|
&--readonly-calendar-picker {
|
|
div.calendar-picker-option {
|
|
padding: 8px 7px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.property-text,
|
|
.property-select,
|
|
.property-color,
|
|
.property-select-multiple,
|
|
.property-title,
|
|
.property-repeat,
|
|
.resource-capacity,
|
|
.resource-room-type {
|
|
margin-bottom: 5px;
|
|
|
|
&--readonly {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.property-select,
|
|
.property-select-multiple {
|
|
align-items: center;
|
|
|
|
.v-select {
|
|
min-width: unset !important;
|
|
}
|
|
|
|
&__input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.property-color {
|
|
&__input {
|
|
display: flex;
|
|
gap: 5px;
|
|
margin-bottom: 5px;
|
|
|
|
&--readonly {
|
|
// Align with other (text based) fields
|
|
margin: 3px 0 3px 7px;
|
|
}
|
|
}
|
|
|
|
&__color-preview {
|
|
$size: 44px;
|
|
width: $size !important;
|
|
height: $size !important;
|
|
border-radius: $size;
|
|
}
|
|
}
|
|
|
|
.property-text {
|
|
&__icon {
|
|
// Prevent icon misalignment on vertically growing inputs
|
|
height: unset;
|
|
align-self: flex-start;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
&--readonly {
|
|
.property-text__icon {
|
|
padding-top: 10px;
|
|
}
|
|
}
|
|
|
|
&__input {
|
|
&--readonly {
|
|
// Reduce line height but still keep first row aligned to the icon
|
|
line-height: 1;
|
|
padding-top: calc(var(--default-line-height) / 2 - 0.5lh);
|
|
}
|
|
|
|
textarea {
|
|
resize: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.property-select-multiple {
|
|
.property-select-multiple__input.property-select-multiple__input--readonly {
|
|
width: 100%;
|
|
|
|
.property-select-multiple-colored-tag-wrapper {
|
|
align-items: center;
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
position: relative;
|
|
padding: 3px 5px;
|
|
|
|
.multiselect__tag {
|
|
line-height: 20px;
|
|
padding: 1px 5px;
|
|
background-image: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border-radius: 3px;
|
|
max-width: fit-content;
|
|
margin: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.property-title {
|
|
&__input, input {
|
|
font-weight: bold;
|
|
}
|
|
|
|
&__input--readonly {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
// Normalize gaps between all properties. We use outer margins between each row so a padding
|
|
// around inputs (from core) is not required.
|
|
.property-title,
|
|
.property-title-time-picker {
|
|
input {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.resource-room-type {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
}
|
|
|
|
.event-popover .event-popover__inner {
|
|
.event-popover__response-buttons {
|
|
margin-top: 8px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.property-text,
|
|
.property-title-time-picker {
|
|
&__icon {
|
|
margin: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.timezone-popover-wrapper {
|
|
.popover__inner {
|
|
padding: 20px;
|
|
}
|
|
|
|
&__title {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
&__timezone-select {
|
|
min-width: 200px;
|
|
}
|
|
}
|
|
|
|
.event-popover {
|
|
// Don't cut popovers above popovers (e.g. date time picker)
|
|
.v-popper__inner {
|
|
overflow: unset !important;
|
|
}
|
|
|
|
.event-popover__inner {
|
|
text-align: left;
|
|
max-width: 480px;
|
|
width: 480px;
|
|
padding: 5px 10px 10px 10px;
|
|
|
|
.empty-content {
|
|
margin-top: 0 !important;
|
|
padding: 50px 0;
|
|
}
|
|
|
|
.property-title-time-picker:not(.property-title-time-picker--readonly) {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.event-popover__invitees {
|
|
.avatar-participation-status__text {
|
|
bottom: 22px;
|
|
}
|
|
}
|
|
|
|
.event-popover__buttons {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.event-popover__top-right-actions {
|
|
display: flex;
|
|
gap: var(--default-grid-baseline);
|
|
position: absolute !important;
|
|
top: var(--default-grid-baseline) !important;
|
|
right: var(--default-grid-baseline) !important;
|
|
z-index: 100 !important;
|
|
opacity: .7 !important;
|
|
border-radius: 22px !important;
|
|
|
|
.action-item.action-item--single {
|
|
width: 44px !important;
|
|
height: 44px !important;
|
|
}
|
|
}
|
|
|
|
.popover-loading-indicator {
|
|
width: 100%;
|
|
|
|
&__icon {
|
|
margin: 0 auto;
|
|
height: 62px;
|
|
width: 62px;
|
|
background-size: 62px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[x-out-of-boundaries] {
|
|
margin-top: 75px;
|
|
}
|
|
}
|
|
|
|
.event-popover[x-placement^='bottom'] {
|
|
.popover__arrow {
|
|
border-bottom-color: var(--color-background-dark);
|
|
}
|
|
}
|
|
|
|
.calendar-picker-option {
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
|
|
&__color-indicator {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
margin-right: 8px;
|
|
flex-basis: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__label {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
&__avatar {
|
|
flex-basis: 18px;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
.property-select-multiple-colored-tag {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&__color-indicator {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
margin-right: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.icon {
|
|
margin-left: 4px;
|
|
scale: 0.8;
|
|
}
|
|
}
|
|
|
|
.resource-list-button-group,
|
|
.invitees-list-button-group {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
// Only apply the margin if at least one button is being rendered
|
|
&:not(:empty) {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
|
|
.vs__dropdown-option span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.resource-search-list-item,
|
|
.invitees-search-list-item {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
|
|
// Account for avatar width (because it is position: relative)
|
|
padding-right: 32px;
|
|
|
|
&__label {
|
|
width: 100%;
|
|
padding: 0 8px;
|
|
|
|
&__availability {
|
|
color: var(--color-text-maxcontrast);
|
|
}
|
|
|
|
div {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
div:nth-child(1) {
|
|
color: var(--color-main-text)
|
|
}
|
|
|
|
div:nth-child(2) {
|
|
color: var(--color-text-lighter);
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.resource-search__multiselect,
|
|
.invitees-search__multiselect {
|
|
width: 100%;
|
|
}
|