196 lines
7.3 KiB
CSS
196 lines
7.3 KiB
CSS
/* Grundgerüst */
|
|
.desktop-root { spacing: 24px; }
|
|
.desktop-right { spacing: 24px; }
|
|
|
|
.desktop-panel {
|
|
background-color: rgba(18, 18, 18, 0.78);
|
|
border-radius: 14px;
|
|
padding: 14px;
|
|
color: #e6e6e6;
|
|
font-size: 10.5pt;
|
|
spacing: 10px;
|
|
}
|
|
.notes { spacing: 12px; }
|
|
.calendar { height: 540px; }
|
|
|
|
.panel-header { spacing: 6px; }
|
|
.panel-title { font-weight: bold; font-size: 12pt; }
|
|
.empty-hint { color: #888; font-style: italic; }
|
|
|
|
/* Buttons */
|
|
.desktop-button {
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
border-radius: 6px;
|
|
padding: 4px 10px;
|
|
color: #e6e6e6;
|
|
}
|
|
.desktop-button:hover, .desktop-button:focus { background-color: rgba(255, 255, 255, 0.18); }
|
|
.desktop-button:checked, .desktop-button.primary { background-color: #e9672e; color: white; }
|
|
.desktop-button.primary:hover, .desktop-button.primary:focus { background-color: #f07a45; }
|
|
.nav-button { padding: 4px 8px; font-weight: bold; }
|
|
.add-button { font-weight: bold; padding: 4px 12px; }
|
|
|
|
/* Monat */
|
|
.weekday-row { spacing: 2px; }
|
|
.weekday { color: #999; font-size: 9pt; text-align: center; padding: 2px 0; }
|
|
.month-day { background-color: rgba(255, 255, 255, 0.04); border-radius: 6px; padding: 4px; }
|
|
.month-day:hover, .month-day:focus { background-color: rgba(255, 255, 255, 0.12); }
|
|
.month-day.other-month { color: #777; }
|
|
.month-day.today { border: 1px solid #e9672e; }
|
|
.month-day-number { font-weight: bold; }
|
|
.month-entry {
|
|
font-size: 8pt;
|
|
background-color: rgba(233, 103, 46, 0.4);
|
|
border-radius: 3px;
|
|
padding: 0 3px;
|
|
margin-top: 2px;
|
|
}
|
|
.month-entry.todo { background-color: rgba(138, 180, 248, 0.3); }
|
|
.month-entry:hover { background-color: rgba(233, 103, 46, 0.9); }
|
|
.month-more { font-size: 8pt; color: #aaa; }
|
|
|
|
/* Woche */
|
|
.week-row { spacing: 2px; margin-bottom: 2px; }
|
|
.week-row.head { margin-bottom: 4px; }
|
|
.week-days { spacing: 2px; }
|
|
.week-hour { width: 40px; color: #999; font-size: 8.5pt; }
|
|
.week-day-head { color: #ccc; font-size: 9pt; text-align: center; }
|
|
.week-day-head.today { color: #e9672e; font-weight: bold; }
|
|
.week-slot { background-color: rgba(255, 255, 255, 0.04); border-radius: 4px; padding: 2px 0; min-height: 40px; }
|
|
.week-row.allday .week-slot { min-height: 18px; }
|
|
.week-slot:hover, .week-slot:focus { background-color: rgba(255, 255, 255, 0.12); }
|
|
.week-slot.selecting { background-color: rgba(233, 103, 46, 0.35); }
|
|
.week-entry {
|
|
font-size: 8pt;
|
|
background-color: rgba(233, 103, 46, 0.55);
|
|
border-radius: 3px;
|
|
padding: 1px 3px;
|
|
margin-bottom: 1px;
|
|
}
|
|
.week-entry.todo { background-color: rgba(138, 180, 248, 0.45); }
|
|
.week-entry:hover { background-color: rgba(233, 103, 46, 1); }
|
|
.week-allday-block {
|
|
background-color: rgba(233, 103, 46, 0.75);
|
|
border-radius: 3px;
|
|
padding: 0 4px;
|
|
font-size: 8pt;
|
|
color: white;
|
|
}
|
|
.week-allday-block:hover, .week-allday-block:focus { background-color: rgba(233, 103, 46, 1); }
|
|
.week-block {
|
|
background-color: rgba(233, 103, 46, 0.75);
|
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
border-radius: 4px;
|
|
padding: 2px 4px;
|
|
}
|
|
.week-block:hover, .week-block:focus { background-color: rgba(233, 103, 46, 1); }
|
|
.week-block-time { font-size: 7.5pt; color: rgba(255, 255, 255, 0.85); }
|
|
.week-now-line { background-color: #ff3b30; }
|
|
.week-block-title { font-size: 8.5pt; font-weight: bold; color: white; }
|
|
|
|
/* Tag */
|
|
.section-title { color: #999; font-size: 9pt; font-weight: bold; margin-top: 6px; margin-bottom: 4px; }
|
|
.day-entry { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; padding: 6px 10px; margin-bottom: 4px; }
|
|
.day-entry:hover, .day-entry:focus { background-color: rgba(255, 255, 255, 0.14); }
|
|
.day-entry-box { spacing: 10px; }
|
|
.day-entry-time { color: #e9672e; width: 100px; }
|
|
.day-entry-title { font-weight: bold; }
|
|
|
|
/* Todos */
|
|
.todo-row { spacing: 6px; }
|
|
.todo-check { padding: 4px; border-radius: 4px; }
|
|
.todo-check:hover, .todo-check:focus { background-color: rgba(255, 255, 255, 0.14); }
|
|
.todo-title { padding: 4px 6px; border-radius: 4px; }
|
|
.todo-title:hover, .todo-title:focus { background-color: rgba(255, 255, 255, 0.1); }
|
|
.todo-title.done { color: #888; }
|
|
.todo-when { color: #aaa; font-size: 9pt; padding-right: 4px; }
|
|
.todo-when.overdue { color: #ff6b6b; }
|
|
|
|
/* Notizen */
|
|
.notes-tree-column { width: 230px; spacing: 8px; }
|
|
.tree-row { padding: 4px 8px; border-radius: 4px; }
|
|
.tree-row:hover, .tree-row:focus { background-color: rgba(255, 255, 255, 0.1); }
|
|
.tree-row.selected { background-color: rgba(233, 103, 46, 0.5); }
|
|
.tree-row.folder { font-weight: bold; }
|
|
.icon-row { spacing: 6px; }
|
|
.tree-row StIcon { color: #aaa; }
|
|
.notes-content-column { spacing: 8px; padding-left: 12px; }
|
|
.note-content { font-size: 10.5pt; }
|
|
/* Der Scrollbereich ist der sichtbare Rahmen, das Feld darin bleibt unsichtbar. */
|
|
.note-editor-scroll {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 6px;
|
|
padding: 8px;
|
|
}
|
|
.note-editor {
|
|
font-family: monospace;
|
|
background-color: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
color: #e6e6e6;
|
|
caret-color: #e6e6e6;
|
|
selection-background-color: #e9672e;
|
|
selected-color: white;
|
|
}
|
|
|
|
/* Popover */
|
|
.desktop-popover {
|
|
background-color: rgba(28, 28, 28, 0.97);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
spacing: 6px;
|
|
color: #e6e6e6;
|
|
font-size: 10.5pt;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
|
|
}
|
|
.desktop-popover.form { width: 320px; }
|
|
.desktop-popover.menu { padding: 4px; spacing: 0; }
|
|
.popover-title { font-weight: bold; font-size: 11pt; }
|
|
.popover-subtitle { color: #aaa; font-size: 9pt; }
|
|
.popover-label { font-weight: bold; }
|
|
.popover-entry {
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
border-radius: 6px;
|
|
padding: 6px 8px;
|
|
color: #e6e6e6;
|
|
caret-color: #e6e6e6;
|
|
selection-background-color: #e9672e;
|
|
selected-color: white;
|
|
}
|
|
.popover-entry:focus { border-color: #e9672e; }
|
|
.popover-entry.multiline { background-color: transparent; border: none; padding: 0; }
|
|
.popover-scroll {
|
|
height: 90px;
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
border-radius: 6px;
|
|
padding: 6px 8px;
|
|
}
|
|
.popover-row { spacing: 6px; }
|
|
.popover-row-label { color: #aaa; font-size: 9pt; width: 28px; }
|
|
.popover-error { color: #ff6b6b; }
|
|
.menu-item { padding: 6px 14px; border-radius: 6px; min-width: 120px; }
|
|
.menu-item:hover, .menu-item:focus { background-color: rgba(255, 255, 255, 0.12); }
|
|
.menu-item.selected { color: #e9672e; font-weight: bold; }
|
|
.menu-item.insensitive { color: #777; }
|
|
.desktop-dropdown {
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
border-radius: 6px;
|
|
padding: 4px 10px;
|
|
color: #e6e6e6;
|
|
}
|
|
.desktop-dropdown:hover, .desktop-dropdown:focus { background-color: rgba(255, 255, 255, 0.18); }
|
|
.datepicker { padding: 10px; spacing: 4px; }
|
|
.datepicker-row { spacing: 2px; }
|
|
.datepicker-weekday { width: 32px; color: #999; font-size: 8.5pt; text-align: center; }
|
|
.datepicker-day { width: 32px; height: 26px; border-radius: 4px; font-size: 9pt; }
|
|
.datepicker-day:hover, .datepicker-day:focus { background-color: rgba(255, 255, 255, 0.15); }
|
|
.datepicker-day.other-month { color: #666; }
|
|
.datepicker-day.today { border: 1px solid #e9672e; }
|
|
.datepicker-day.selected { background-color: #e9672e; color: white; }
|
|
.timepicker-scroll { height: 240px; }
|