@import 'ui-variables'; body.platform-win32 { .calendar-source-list { .colored-checkbox { border-radius: 0; .bg-color { border-radius: 0; } } } } .mailspring-calendar { height: 100%; display: flex; .calendar-source-list { display: flex; background-color: @source-list-bg; border-right: 1px solid @border-color-divider; color: @text-color-subtle; .calendar-source-list-wrap { padding: 12px; padding-top: 0; } .colored-checkbox { position: relative; top: 1px; margin-left: 1px; display: inline-block; border-radius: 3px; width: 12px; height: 12px; box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(0, 0, 0, 0.13); background: white; .bg-color { width: 100%; height: 100%; border-radius: 3px; } } label { padding-left: 0.4em; } .toggle-wrap, .account-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 2px; } .account-calendars-wrap { &:first-child { margin-top: 0; } } .account-label { cursor: default; color: @text-color-very-subtle; font-weight: @font-weight-semi-bold; font-size: @font-size-small * 0.9; margin-top: @padding-large-vertical; letter-spacing: -0.2px; } } background: @background-off-primary; .calendar-view { height: 100%; flex: 1; position: relative; } .calendar-event { @interval-height: 21px; position: absolute; font-size: 11px; line-height: 11px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; min-height: @interval-height; border-top: 0; border-bottom: 2px solid @background-primary; border-left: 0; display: flex; cursor: default; .default-header { overflow: hidden; text-overflow: ellipsis; margin: 4px 1px 3px 4px; cursor: default; opacity: 0.7; flex: 1; } &:before { content: ''; position: absolute; width: 2px; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.1); } &.horizontal { white-space: nowrap; } &.selected { background-color: @accent-primary !important; } } .calendar-mouse-handler { height: 100%; display: flex; flex-direction: column; } .week-view { height: 100%; @legend-width: 75px; .calendar-body-wrap { display: flex; flex-direction: row; position: relative; height: 100%; .calendar-area-wrap { &::-webkit-scrollbar { display: none; } flex: 1; display: flex; flex-direction: column; overflow-x: auto; overflow-y: hidden; position: relative; scroll-snap-type: x mandatory; } .calendar-legend { width: @legend-width; box-shadow: 1px 0 0 rgba(177, 177, 177, 0.15); z-index: 2; } } .week-header { position: relative; padding-top: 75px; border-bottom: 1px solid @border-color-divider; flex-shrink: 0; } .date-labels { position: absolute; width: 100%; top: 0; left: 0; height: 100%; display: flex; } .all-day-events { position: relative; width: auto; z-index: 2; overflow: hidden; } .all-day-legend { width: @legend-width; position: relative; } .legend-text { font-size: 11px; position: absolute; color: @text-color-very-subtle; right: 10px; } .date-label-legend { width: @legend-width; position: relative; border-bottom: 1px solid @border-color-divider; box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.15); z-index: 3; .legend-text { bottom: 7px; } } .day-label-wrap { padding: 15px; text-align: center; flex: 1; box-shadow: inset 1px 0 0 rgba(177, 177, 177, 0.15); scroll-snap-align: start; &.is-hard-stop { scroll-snap-stop: always; } &.is-today { .date-label { color: @accent-primary; } .weekday-label { color: @accent-primary; } } } .date-label { display: block; font-size: 16px; font-weight: 300; color: @text-color-subtle; } .weekday-label { display: block; font-weight: 500; text-transform: uppercase; margin-top: 3px; font-size: 12px; color: @text-color-subtle; } .event-grid-wrap { flex: 1; overflow: auto; background: @background-primary; box-shadow: inset 0 1px 2.5px rgba(0, 0, 0, 0.15); height: 100%; } .event-grid { display: flex; position: relative; } .event-grid-legend-wrap { overflow: hidden; box-shadow: 1px 0 0 rgba(177, 177, 177, 0.15); } .event-grid-legend { position: relative; background: @background-primary; z-index: 2; } .event-grid-bg-wrap { .event-grid-bg { position: absolute; top: 0; left: 0; } .cursor { background: rgba(0, 0, 0, 0.04); position: absolute; } position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } .event-column { flex: 1; position: relative; height: 100%; z-index: 1; overflow: hidden; box-shadow: 1px 0 0 rgba(177, 177, 177, 0.15); &.weekend { background: rgba(0, 0, 0, 0.02); } } } .month-view { color: #000; } .current-time-indicator { position: absolute; width: 100%; height: 1px; opacity: 0; border-top: 1px solid rgb(255, 100, 100); z-index: 2; transition: opacity ease-in-out 300ms; &.visible { opacity: 1; } div { position: absolute; width: 11px; height: 11px; border-radius: 6px; background-color: rgb(255, 100, 100); transform: translate3d(-75%, -50%, 0); border: 1px solid @background-primary; } } .top-banner { color: rgba(33, 99, 146, 0.6); background: @gray-lighter; font-size: 12px; line-height: 25px; text-align: center; box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.07); } .header-controls { padding: 10px; display: flex; color: @text-color-subtle; border-bottom: 1px solid @border-color-divider; box-shadow: inset 0 -1px 1px rgba(191, 191, 191, 0.12); flex-shrink: 0; .title { display: inline-block; width: 275px; } .title, .btn-icon { font-size: 15px; line-height: 25px; } .btn-icon { margin: 0; height: auto; img { vertical-align: baseline; } } } .center-controls { text-align: center; flex: 1; order: 0; } }