%PDF-
%PDF-
Mini Shell
Mini Shell
/**
* 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,
input[type=number] {
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%;
}
Zerion Mini Shell 1.0