Initialize GovOPlaN calendar module
This commit is contained in:
445
webui/src/styles/calendar.css
Normal file
445
webui/src/styles/calendar.css
Normal file
@@ -0,0 +1,445 @@
|
||||
.calendar-page {
|
||||
min-height: 100%;
|
||||
padding: 24px;
|
||||
color: #172026;
|
||||
background: #f5f7f8;
|
||||
}
|
||||
|
||||
.calendar-toolbar {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.calendar-title-block {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.calendar-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.calendar-title-row h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calendar-title-block span {
|
||||
color: #5b6770;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.calendar-toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.calendar-icon-group,
|
||||
.calendar-mode-switch {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px;
|
||||
border: 1px solid #d6dde1;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.calendar-mode-switch button,
|
||||
.calendar-text-button,
|
||||
.calendar-primary-button,
|
||||
.calendar-icon-button,
|
||||
.calendar-select {
|
||||
border: 1px solid #cfd8dc;
|
||||
background: #ffffff;
|
||||
color: #172026;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.calendar-mode-switch button {
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.calendar-mode-switch button.is-active {
|
||||
background: #0f766e;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.calendar-icon-button {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.calendar-text-button,
|
||||
.calendar-primary-button {
|
||||
min-height: 34px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.calendar-primary-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
border-color: #0f766e;
|
||||
background: #0f766e;
|
||||
color: #ffffff;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.calendar-primary-button:disabled {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.calendar-select {
|
||||
min-height: 36px;
|
||||
max-width: 240px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.calendar-workspace {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
|
||||
gap: 18px;
|
||||
min-height: calc(100vh - 150px);
|
||||
}
|
||||
|
||||
.calendar-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
border-right: 1px solid #dbe2e6;
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
.calendar-sidebar h2 {
|
||||
margin: 4px 0 0;
|
||||
font-size: 13px;
|
||||
color: #4d5a61;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.calendar-list,
|
||||
.calendar-agenda {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.calendar-list button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 34px;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.calendar-list button.is-selected {
|
||||
border-color: #b8c8cc;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.calendar-list button span {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.calendar-agenda article {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #e1e6e8;
|
||||
}
|
||||
|
||||
.calendar-agenda strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.calendar-agenda span,
|
||||
.calendar-agenda p {
|
||||
margin: 0;
|
||||
color: #5f6f78;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.calendar-view-shell {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #d7e0e4;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.calendar-loading {
|
||||
position: absolute;
|
||||
inset: 0 auto auto 0;
|
||||
z-index: 2;
|
||||
padding: 10px;
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
|
||||
.calendar-week-rows {
|
||||
min-width: 760px;
|
||||
}
|
||||
|
||||
.calendar-weekday-header,
|
||||
.calendar-week-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(104px, 1fr));
|
||||
}
|
||||
|
||||
.calendar-weekday-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
border-bottom: 1px solid #d7e0e4;
|
||||
background: #edf3f3;
|
||||
}
|
||||
|
||||
.calendar-weekday-header span {
|
||||
min-height: 34px;
|
||||
padding: 9px 10px;
|
||||
color: #506169;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.calendar-week-row {
|
||||
min-height: 132px;
|
||||
border-bottom: 1px solid #d7e0e4;
|
||||
}
|
||||
|
||||
.calendar-day-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-height: 132px;
|
||||
padding: 8px;
|
||||
border-right: 1px solid #e1e7ea;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.calendar-day-cell.is-muted {
|
||||
background: #f7f9fa;
|
||||
color: #738089;
|
||||
}
|
||||
|
||||
.calendar-day-cell.is-today {
|
||||
box-shadow: inset 0 0 0 2px #0f766e;
|
||||
}
|
||||
|
||||
.calendar-day-cell header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.calendar-day-cell header span {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calendar-day-cell header small {
|
||||
color: #63747d;
|
||||
}
|
||||
|
||||
.calendar-event-stack {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.calendar-event-chip {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
min-height: 34px;
|
||||
padding: 5px 7px;
|
||||
border-left: 3px solid #0f766e;
|
||||
background: #e7f4f1;
|
||||
color: #16332f;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.calendar-event-chip.is-compact {
|
||||
min-height: 28px;
|
||||
margin: 3px 4px;
|
||||
background: #e7f4f1;
|
||||
}
|
||||
|
||||
.calendar-event-chip strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-event-chip span {
|
||||
color: #4d6764;
|
||||
}
|
||||
|
||||
.calendar-more-events {
|
||||
color: #596970;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.calendar-continuous {
|
||||
max-height: calc(100vh - 172px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.calendar-week-rows.is-continuous .calendar-week-row {
|
||||
min-height: 82px;
|
||||
}
|
||||
|
||||
.calendar-week-rows.is-continuous .calendar-day-cell {
|
||||
min-height: 82px;
|
||||
}
|
||||
|
||||
.calendar-time-grid {
|
||||
display: grid;
|
||||
min-width: 720px;
|
||||
}
|
||||
|
||||
.calendar-time-grid > header,
|
||||
.calendar-time-corner {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
min-height: 54px;
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid #d7e0e4;
|
||||
border-right: 1px solid #d7e0e4;
|
||||
background: #edf3f3;
|
||||
}
|
||||
|
||||
.calendar-time-grid > header.is-today {
|
||||
background: #dbeeea;
|
||||
}
|
||||
|
||||
.calendar-time-grid > header span {
|
||||
color: #52646d;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.calendar-hour-label,
|
||||
.calendar-hour-cell {
|
||||
min-height: 64px;
|
||||
border-bottom: 1px solid #e3e9ec;
|
||||
border-right: 1px solid #e3e9ec;
|
||||
}
|
||||
|
||||
.calendar-hour-label {
|
||||
padding: 8px;
|
||||
color: #62737c;
|
||||
font-size: 12px;
|
||||
background: #f7f9fa;
|
||||
}
|
||||
|
||||
.calendar-hour-cell {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.calendar-dialog-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 20;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 20px;
|
||||
background: rgba(15, 23, 32, 0.38);
|
||||
}
|
||||
|
||||
.calendar-dialog {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
width: min(460px, 100%);
|
||||
padding: 18px;
|
||||
border: 1px solid #cbd5d9;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 18px 50px rgba(21, 33, 42, 0.22);
|
||||
}
|
||||
|
||||
.calendar-dialog header,
|
||||
.calendar-dialog footer,
|
||||
.calendar-dialog-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.calendar-dialog h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.calendar-dialog label {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
font-size: 13px;
|
||||
color: #4b5b63;
|
||||
}
|
||||
|
||||
.calendar-dialog input {
|
||||
min-height: 36px;
|
||||
border: 1px solid #c9d3d8;
|
||||
padding: 0 9px;
|
||||
color: #172026;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.calendar-dialog-row label {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.calendar-checkbox {
|
||||
display: flex !important;
|
||||
grid-template-columns: none !important;
|
||||
align-items: center;
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
.calendar-checkbox input {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.calendar-page {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.calendar-toolbar {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.calendar-toolbar-actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.calendar-workspace {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.calendar-sidebar {
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid #dbe2e6;
|
||||
padding: 0 0 14px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user