mirror of
https://github.com/jareika/ttrpg-tools-time.git
synced 2026-07-22 07:01:42 +00:00
2802 lines
No EOL
58 KiB
CSS
2802 lines
No EOL
58 KiB
CSS
/* ==========================================================================
|
|
Scoped theme variables
|
|
========================================================================== */
|
|
|
|
.workspace-leaf-content[data-type="time-calendar-view"],
|
|
.workspace-leaf-content[data-type="time-day-view"],
|
|
.workspace-leaf-content[data-type="time-control-view"],
|
|
.workspace-leaf-content[data-type="time-event-editor-view"],
|
|
.modal-container .modal.time-flex-modal {
|
|
--time-accent: #cf655f;
|
|
--time-accent-strong: #a63831;
|
|
--time-accent-soft: color-mix(in srgb, var(--time-accent) 12%, transparent);
|
|
--time-accent-faint: color-mix(in srgb, var(--time-accent) 8%, transparent);
|
|
|
|
--time-app-bg: var(--background-primary);
|
|
--time-panel-bg: var(--background-primary);
|
|
--time-card-bg: var(--background-primary-alt, var(--background-secondary));
|
|
--time-soft-bg: var(--background-secondary);
|
|
--time-button-bg: var(--background-secondary);
|
|
--time-weather-bg: var(--background-secondary);
|
|
--time-event-bg: color-mix(in srgb, var(--background-secondary) 88%, var(--time-accent) 12%);
|
|
|
|
--time-border: var(--background-modifier-border);
|
|
--time-shadow: rgba(0, 0, 0, 0.12);
|
|
|
|
--time-heading: var(--time-accent-strong);
|
|
--time-heading-soft: var(--text-muted);
|
|
--time-strong-text: var(--text-normal);
|
|
--time-muted-text: var(--text-muted);
|
|
--time-rail-text: var(--time-accent);
|
|
|
|
--time-today-bg: var(--background-modifier-hover);
|
|
--time-cursor-bg: color-mix(in srgb, var(--background-secondary) 76%, #e6bd74 24%);
|
|
--time-cursor-outline: #e6bd74;
|
|
|
|
--time-weather-pop-bg: var(--background-primary-alt, var(--background-secondary));
|
|
--time-weather-pop-text: var(--text-normal);
|
|
}
|
|
|
|
.theme-light .workspace-leaf-content[data-type="time-calendar-view"],
|
|
.theme-light .workspace-leaf-content[data-type="time-day-view"],
|
|
.theme-light .workspace-leaf-content[data-type="time-control-view"],
|
|
.theme-light .workspace-leaf-content[data-type="time-event-editor-view"],
|
|
.theme-light .modal-container .modal.time-flex-modal {
|
|
--time-app-bg: var(--background-primary);
|
|
--time-panel-bg: var(--background-primary);
|
|
--time-card-bg: var(--background-modifier-form-field);
|
|
--time-soft-bg: var(--background-secondary);
|
|
--time-button-bg: color-mix(in srgb, var(--background-primary) 72%, var(--background-secondary) 28%);
|
|
--time-weather-bg: color-mix(in srgb, var(--background-primary) 72%, var(--background-secondary) 28%);
|
|
--time-event-bg: color-mix(in srgb, var(--background-primary) 84%, var(--time-accent) 16%);
|
|
|
|
--time-shadow: rgba(0, 0, 0, 0.08);
|
|
--time-heading: var(--time-accent-strong);
|
|
--time-heading-soft: var(--text-muted);
|
|
--time-strong-text: var(--text-normal);
|
|
--time-muted-text: var(--text-muted);
|
|
--time-rail-text: var(--time-accent);
|
|
|
|
--time-today-bg: var(--background-modifier-hover);
|
|
--time-cursor-bg: color-mix(in srgb, var(--background-primary) 78%, #e6bd74 22%);
|
|
--time-cursor-outline: #d7b36b;
|
|
|
|
--time-weather-pop-bg: var(--background-primary);
|
|
--time-weather-pop-text: var(--text-normal);
|
|
}
|
|
|
|
.theme-dark .workspace-leaf-content[data-type="time-calendar-view"],
|
|
.theme-dark .workspace-leaf-content[data-type="time-day-view"],
|
|
.theme-dark .workspace-leaf-content[data-type="time-control-view"],
|
|
.theme-dark .workspace-leaf-content[data-type="time-event-editor-view"],
|
|
.theme-dark .modal-container .modal.time-flex-modal {
|
|
--time-accent: #df8f88;
|
|
--time-accent-strong: #f0b6b0;
|
|
--time-accent-soft: rgba(223, 143, 136, 0.16);
|
|
--time-accent-faint: rgba(223, 143, 136, 0.1);
|
|
|
|
--time-app-bg: var(--background-primary);
|
|
--time-panel-bg: var(--background-primary);
|
|
--time-card-bg: var(--background-primary-alt, var(--background-secondary));
|
|
--time-soft-bg: var(--background-secondary);
|
|
--time-button-bg: var(--background-primary-alt, var(--background-secondary));
|
|
--time-weather-bg: var(--background-primary-alt, var(--background-secondary));
|
|
--time-event-bg: rgba(255, 255, 255, 0.04);
|
|
|
|
--time-shadow: rgba(0, 0, 0, 0.28);
|
|
--time-heading: var(--time-accent-strong);
|
|
--time-heading-soft: var(--text-muted);
|
|
--time-strong-text: var(--text-normal);
|
|
--time-muted-text: var(--text-muted);
|
|
--time-rail-text: var(--time-accent-strong);
|
|
|
|
--time-weather-pop-bg: var(--background-secondary);
|
|
--time-weather-pop-text: var(--text-normal);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
View roots
|
|
========================================================================== */
|
|
|
|
.workspace-leaf-content[data-type="time-calendar-view"] .view-content,
|
|
.workspace-leaf-content[data-type="time-day-view"] .view-content,
|
|
.workspace-leaf-content[data-type="time-control-view"] .view-content,
|
|
.workspace-leaf-content[data-type="time-event-editor-view"] .view-content {
|
|
padding: 0;
|
|
}
|
|
|
|
.time-calendar-view,
|
|
.time-day-view,
|
|
.time-control-view,
|
|
.time-event-editor-view {
|
|
height: 100%;
|
|
container-type: inline-size;
|
|
}
|
|
|
|
.time-calendar,
|
|
.time-day,
|
|
.time-control,
|
|
.time-event-editor {
|
|
min-height: 100%;
|
|
height: 100%;
|
|
color: var(--time-strong-text);
|
|
background: var(--time-app-bg);
|
|
}
|
|
|
|
.time-calendar {
|
|
padding: 14px;
|
|
}
|
|
|
|
.time-day {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.time-control {
|
|
padding: 10px;
|
|
}
|
|
|
|
.time-event-editor {
|
|
padding: 14px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Shared panels / empty states
|
|
========================================================================== */
|
|
|
|
.time-calendar__panel,
|
|
.time-day__panel,
|
|
.time-control__panel,
|
|
.time-event-editor__panel,
|
|
.time-calendar__empty {
|
|
background: var(--time-panel-bg);
|
|
box-shadow: 0 6px 18px var(--time-shadow);
|
|
border: 1px solid rgba(207, 101, 95, 0.12);
|
|
}
|
|
|
|
.time-calendar__empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
width: 100%;
|
|
min-height: 260px;
|
|
padding: 24px;
|
|
border-radius: 18px;
|
|
}
|
|
|
|
.time-calendar__empty h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Shared buttons / form controls
|
|
========================================================================== */
|
|
|
|
.time-icon-button,
|
|
.time-calendar__mode-button,
|
|
.time-calendar__today-button,
|
|
.time-manager__button,
|
|
.time-tag-editor__delete,
|
|
.time-season-editor__delete,
|
|
.time-collection-editor__delete,
|
|
.time-manager__toggle,
|
|
.time-control__button,
|
|
.time-control-insert__calendar-button {
|
|
transition:
|
|
background-color 120ms ease,
|
|
border-color 120ms ease,
|
|
color 120ms ease,
|
|
transform 120ms ease,
|
|
box-shadow 120ms ease,
|
|
opacity 120ms ease;
|
|
}
|
|
|
|
.time-icon-button,
|
|
.time-calendar__mode-button,
|
|
.time-calendar__today-button {
|
|
width: 34px;
|
|
min-width: 34px;
|
|
height: 34px;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 0;
|
|
border-radius: 10px;
|
|
background: var(--time-button-bg);
|
|
color: var(--time-strong-text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.time-icon-button:hover,
|
|
.time-calendar__mode-button:hover,
|
|
.time-calendar__today-button:hover {
|
|
background: var(--time-accent-faint);
|
|
}
|
|
|
|
.time-calendar__mode-button.is-active {
|
|
background: var(--time-accent);
|
|
color: #fff8ef;
|
|
}
|
|
|
|
.time-icon-button svg,
|
|
.time-calendar__mode-button svg,
|
|
.time-calendar__today-button svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.time-manager__button,
|
|
.time-tag-editor__delete,
|
|
.time-season-editor__delete {
|
|
border: 1px solid rgba(207, 101, 95, 0.2);
|
|
border-radius: 10px;
|
|
background: var(--time-button-bg);
|
|
color: var(--time-strong-text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.time-manager__button {
|
|
padding: 8px 14px;
|
|
}
|
|
|
|
.time-manager__button:hover:not(:disabled),
|
|
.time-tag-editor__delete:hover,
|
|
.time-season-editor__delete:hover,
|
|
.time-collection-editor__delete:hover:not(:disabled) {
|
|
background: var(--time-accent-faint);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.time-manager__button:disabled,
|
|
.time-manager__toggle:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.time-manager__toggle {
|
|
width: 26px;
|
|
height: 26px;
|
|
border: 1px solid rgba(207, 101, 95, 0.7);
|
|
border-radius: 6px;
|
|
background: var(--time-button-bg);
|
|
color: var(--time-accent-strong);
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.time-manager__toggle.is-selected {
|
|
background: var(--time-accent);
|
|
color: #fff8ef;
|
|
}
|
|
|
|
.time-inline-field__input,
|
|
.time-collection-editor__input,
|
|
.time-season-editor__input,
|
|
.time-tag-editor__name,
|
|
.time-event-editor__input,
|
|
.time-event-editor__textarea,
|
|
.time-weather-pack-months__input {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.time-inline-field__input,
|
|
.time-collection-editor__input,
|
|
.time-season-editor__input,
|
|
.time-tag-editor__name,
|
|
.time-event-editor__input,
|
|
.time-weather-pack-months__input {
|
|
height: 40px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.time-event-editor__textarea {
|
|
min-height: 140px;
|
|
padding: 10px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.time-collection-editor__delete {
|
|
width: 38px;
|
|
min-width: 38px;
|
|
height: 38px;
|
|
padding: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
background: var(--time-button-bg);
|
|
color: var(--time-strong-text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.time-tag-editor__color,
|
|
.time-season-editor__color,
|
|
.time-event-editor__color {
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
.time-tag-editor__color {
|
|
width: 54px;
|
|
min-width: 54px;
|
|
height: 40px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.time-season-editor__color {
|
|
width: 54px;
|
|
min-width: 54px;
|
|
height: 38px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.time-event-editor__color {
|
|
width: 56px;
|
|
min-width: 56px;
|
|
height: 40px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.time-plugin-settings select,
|
|
.time-plugin-settings .dropdown,
|
|
.workspace-leaf-content[data-type="time-calendar-view"] select,
|
|
.workspace-leaf-content[data-type="time-day-view"] select,
|
|
.workspace-leaf-content[data-type="time-control-view"] select,
|
|
.workspace-leaf-content[data-type="time-event-editor-view"] select,
|
|
.modal-container .modal.time-flex-modal select {
|
|
min-height: 36px;
|
|
height: 36px;
|
|
max-width: 100%;
|
|
padding: 0 30px 0 10px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
line-height: 1.2;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Control view
|
|
========================================================================== */
|
|
|
|
.time-control__panel {
|
|
height: 100%;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
overflow-y: auto;
|
|
border-radius: 16px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.time-control__header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.time-control__title {
|
|
margin: 0;
|
|
font-size: 1.4rem;
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
color: var(--time-heading);
|
|
}
|
|
|
|
.time-control__meta,
|
|
.time-control__clock-note {
|
|
color: var(--time-muted-text);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.time-control__buttons {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.time-control__quick-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.time-control__time-grid {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.time-control__button,
|
|
.time-control-insert__calendar-button {
|
|
border: 1px solid rgba(207, 101, 95, 0.2);
|
|
border-radius: 10px;
|
|
background: var(--time-button-bg);
|
|
color: var(--time-strong-text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.time-control__button {
|
|
width: 100%;
|
|
min-height: 42px;
|
|
display: grid;
|
|
grid-template-columns: 18px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
.time-control__button--icon-only {
|
|
min-height: 0;
|
|
aspect-ratio: 1 / 1;
|
|
padding: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.time-control__button--icon-only .time-control__button-label {
|
|
display: none;
|
|
}
|
|
|
|
.time-control__button--icon-only .time-control__button-icon,
|
|
.time-control__button--icon-only .time-control__button-icon svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.time-control__button--time {
|
|
width: auto;
|
|
min-width: 0;
|
|
min-height: 42px;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.time-control__button--label-only {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.time-control__button--label-only .time-control__button-label {
|
|
text-align: center;
|
|
}
|
|
|
|
.time-control__button:hover:not(:disabled),
|
|
.time-control-insert__calendar-button:hover {
|
|
background: var(--time-accent-faint);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.time-control__button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.time-control__button-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.time-control__button-icon:empty {
|
|
display: none;
|
|
}
|
|
|
|
.time-control__button-icon svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.time-control__button-label {
|
|
min-width: 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.time-control__divider {
|
|
height: 1px;
|
|
margin: 2px 0;
|
|
background: var(--time-border);
|
|
}
|
|
|
|
.time-control__section-title {
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--time-heading-soft);
|
|
}
|
|
|
|
.time-control__clock {
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--time-border);
|
|
border-radius: 12px;
|
|
background: var(--time-card-bg);
|
|
}
|
|
|
|
.time-control__clock-date {
|
|
color: var(--time-muted-text);
|
|
}
|
|
|
|
.time-control__clock-time {
|
|
margin-top: 2px;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
color: var(--time-heading);
|
|
}
|
|
|
|
.time-control-insert__calendar-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.time-control-insert__calendar-button {
|
|
min-height: 34px;
|
|
padding: 6px 12px;
|
|
}
|
|
|
|
.time-control-insert__calendar-button.is-selected {
|
|
background: var(--time-accent);
|
|
border-color: var(--time-accent);
|
|
color: #fff8ef;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Settings: time buttons
|
|
========================================================================== */
|
|
|
|
.time-settings-button-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.time-settings-button-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(160px, 1.3fr) 120px 90px 90px 38px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.time-settings-button-toolbar {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Calendar view
|
|
========================================================================== */
|
|
|
|
.time-calendar__shell {
|
|
display: flex;
|
|
gap: 16px;
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.time-calendar__rail {
|
|
width: clamp(56px, 18cqi, 82px);
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6px;
|
|
box-sizing: border-box;
|
|
padding: 18px 10px;
|
|
border-left: 10px solid var(--time-accent);
|
|
border-radius: 12px;
|
|
background: linear-gradient(180deg, var(--time-accent-soft), transparent);
|
|
box-shadow: inset 0 0 0 1px rgba(207, 101, 95, 0.08);
|
|
}
|
|
|
|
.time-calendar__rail-day {
|
|
width: 100%;
|
|
font-size: clamp(2rem, 10cqi, 3rem);
|
|
line-height: 0.95;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
color: var(--time-rail-text);
|
|
}
|
|
|
|
.time-calendar__rail-era {
|
|
width: 100%;
|
|
font-size: clamp(0.9rem, 4cqi, 1rem);
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-align: center;
|
|
color: var(--time-rail-text);
|
|
}
|
|
|
|
.time-calendar__rail-divider {
|
|
width: 100%;
|
|
height: 1px;
|
|
margin: 8px 0;
|
|
background: rgba(207, 101, 95, 0.25);
|
|
}
|
|
|
|
.time-calendar__rail-month {
|
|
flex: 1;
|
|
writing-mode: vertical-rl;
|
|
transform: rotate(180deg);
|
|
font-size: 0.82rem;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
color: var(--time-muted-text);
|
|
}
|
|
|
|
.time-calendar__rail-year {
|
|
width: 100%;
|
|
font-size: clamp(0.95rem, 4.2cqi, 1.1rem);
|
|
line-height: 1.05;
|
|
overflow-wrap: anywhere;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
color: var(--time-heading-soft);
|
|
}
|
|
|
|
.time-calendar__panel {
|
|
flex: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
border-radius: 18px;
|
|
}
|
|
|
|
.time-calendar__header {
|
|
padding: 14px 16px 12px;
|
|
border-bottom: 1px solid var(--time-border);
|
|
}
|
|
|
|
.time-calendar__brand {
|
|
margin-bottom: 12px;
|
|
font-size: clamp(1.1rem, 6cqi, 1.75rem);
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
text-transform: uppercase;
|
|
color: var(--time-heading);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.time-calendar__toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.time-calendar__toolbar-spacer {
|
|
flex: 1;
|
|
min-width: 4px;
|
|
}
|
|
|
|
.time-calendar__mode-switch {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.time-calendar__scroller {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: 18px 22px 20px;
|
|
}
|
|
|
|
.time-view-frame--intro {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.time-view-title {
|
|
margin-bottom: 4px;
|
|
font-size: clamp(1.3rem, 6cqi, 1.75rem);
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
color: var(--time-heading);
|
|
}
|
|
|
|
.time-view-meta {
|
|
font-size: 0.95rem;
|
|
color: var(--time-muted-text);
|
|
}
|
|
|
|
.time-month-section {
|
|
margin-bottom: 32px;
|
|
content-visibility: auto;
|
|
contain-intrinsic-size: 520px;
|
|
}
|
|
|
|
.time-month-section__heading {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.time-month-section__title {
|
|
font-size: clamp(1.15rem, 5.4cqi, 1.55rem);
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
color: var(--time-heading);
|
|
}
|
|
|
|
.time-month-section__meta {
|
|
font-size: 0.9rem;
|
|
color: var(--time-muted-text);
|
|
}
|
|
|
|
.time-weekday-row,
|
|
.time-month-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--time-columns, 5), minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.time-weekday-row {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.time-weekday-cell {
|
|
min-width: 0;
|
|
text-align: center;
|
|
font-size: clamp(0.78rem, 4.2cqi, 0.95rem);
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: clip;
|
|
color: var(--time-muted-text);
|
|
}
|
|
|
|
.time-weekday-cell--week-number,
|
|
.time-week-number-cell {
|
|
text-align: center;
|
|
}
|
|
|
|
.time-weekday-cell--week-number {
|
|
font-weight: 700;
|
|
color: var(--time-heading-soft);
|
|
}
|
|
|
|
.time-week-number-cell {
|
|
min-height: 58px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 12px;
|
|
background: var(--time-accent-faint);
|
|
color: var(--time-heading-soft);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.time-month-grid--week {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.time-day-cell {
|
|
min-height: 58px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 8px;
|
|
padding: 8px 8px 6px;
|
|
border-top: 2px solid var(--time-season-color, #a7d36d);
|
|
border-radius: 12px;
|
|
background: var(--time-card-bg);
|
|
color: var(--time-strong-text);
|
|
cursor: pointer;
|
|
transition:
|
|
background-color 120ms ease,
|
|
transform 120ms ease,
|
|
box-shadow 120ms ease;
|
|
}
|
|
|
|
.time-day-cell:hover {
|
|
background: color-mix(in srgb, var(--time-card-bg) 90%, var(--time-accent) 10%);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.time-day-cell.is-empty {
|
|
min-height: 42px;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
border-top: 0;
|
|
background: transparent;
|
|
cursor: default;
|
|
}
|
|
|
|
.time-day-cell.is-empty:hover {
|
|
transform: none;
|
|
}
|
|
|
|
.time-day-cell.is-today {
|
|
background: var(--time-today-bg);
|
|
}
|
|
|
|
.time-day-cell.is-cursor {
|
|
background: var(--time-cursor-bg);
|
|
box-shadow: inset 0 0 0 2px var(--time-cursor-outline);
|
|
}
|
|
|
|
.time-day-cell__number {
|
|
font-size: clamp(1rem, 5.8cqi, 1.55rem);
|
|
line-height: 1;
|
|
color: var(--time-strong-text);
|
|
}
|
|
|
|
.time-day-cell__markers {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-height: 10px;
|
|
}
|
|
|
|
.time-day-marker {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.time-day-marker.is-dark {
|
|
background: #4e3e3e;
|
|
}
|
|
|
|
.time-day-marker.is-pink {
|
|
background: #d61d78;
|
|
}
|
|
|
|
.time-day-marker.is-gold {
|
|
background: #e2b35d;
|
|
}
|
|
|
|
.time-day-marker--event {
|
|
box-shadow: inset 0 0 0 1px rgba(74, 64, 60, 0.16);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Day view
|
|
========================================================================== */
|
|
|
|
.time-day__panel {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
overflow: hidden;
|
|
border-radius: 16px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.time-day__header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.time-day__topbar {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 4px 6px;
|
|
}
|
|
|
|
.time-day__date-nav {
|
|
display: inline-grid;
|
|
grid-template-columns: 32px auto 32px;
|
|
align-items: center;
|
|
gap: clamp(2px, 0.8cqi, 6px);
|
|
width: max-content;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
justify-self: center;
|
|
}
|
|
|
|
.time-day__nav-button,
|
|
.time-day__menu-button {
|
|
width: 32px;
|
|
height: 32px;
|
|
min-width: 32px;
|
|
}
|
|
|
|
.time-day__date {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: max-content;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.time-day__date-main {
|
|
font-size: clamp(0.95rem, 6.2cqi, 1.7rem);
|
|
line-height: 0.95;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--time-heading);
|
|
}
|
|
|
|
.time-day__season-bar {
|
|
width: clamp(18px, 10cqi, 34px);
|
|
height: 3px;
|
|
margin: 4px auto 0;
|
|
border-radius: 999px;
|
|
background: var(--time-season-color, #e2b35d);
|
|
}
|
|
|
|
.time-day__actions {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-self: end;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.time-day__weather {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
flex-shrink: 0;
|
|
padding: 5px 8px;
|
|
border-radius: 9px;
|
|
white-space: nowrap;
|
|
color: var(--time-strong-text);
|
|
background: var(--time-weather-bg);
|
|
cursor: default;
|
|
}
|
|
|
|
.time-day__weather-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: clamp(0.82rem, 3.5cqi, 0.96rem);
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.time-day__weather-main svg,
|
|
.time-day__weather-line svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
min-width: 14px;
|
|
min-height: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.time-day__weather-pop {
|
|
position: absolute;
|
|
top: calc(100% + 2px);
|
|
right: 0;
|
|
z-index: 10;
|
|
display: none;
|
|
width: max-content;
|
|
min-width: 148px;
|
|
max-width: min(320px, calc(100cqi - 12px));
|
|
box-sizing: border-box;
|
|
padding: 8px 10px;
|
|
border-radius: 10px;
|
|
color: var(--time-weather-pop-text);
|
|
background: var(--time-weather-pop-bg);
|
|
box-shadow: 0 10px 30px rgba(97, 62, 36, 0.18);
|
|
}
|
|
|
|
.time-day__weather:hover .time-day__weather-pop {
|
|
display: block;
|
|
}
|
|
|
|
.time-day__weather-line {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
margin-top: 3px;
|
|
font-size: 0.74rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.time-day__weather-line:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.time-day__weather-line span:last-child {
|
|
min-width: 0;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.time-day__section {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.time-day__section-title {
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--time-heading-soft);
|
|
}
|
|
|
|
.time-day__events {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.time-day__event {
|
|
display: grid;
|
|
grid-template-columns: 8px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 8px;
|
|
border-radius: 8px;
|
|
background: var(--time-event-bg);
|
|
}
|
|
|
|
.time-day__event-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
align-self: center;
|
|
border-radius: 999px;
|
|
background: #8f4f4c;
|
|
}
|
|
|
|
.time-day__event-dot.is-dark {
|
|
background: #4e3e3e;
|
|
}
|
|
|
|
.time-day__event-dot.is-pink {
|
|
background: #d61d78;
|
|
}
|
|
|
|
.time-day__event-dot.is-gold {
|
|
background: #e2b35d;
|
|
}
|
|
|
|
.time-day__event-body {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.time-day__event-title {
|
|
font-size: clamp(0.82rem, 3.8cqi, 0.98rem);
|
|
line-height: 1.15;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--time-strong-text);
|
|
}
|
|
|
|
.time-day__event-description,
|
|
.time-day__empty {
|
|
color: var(--time-muted-text);
|
|
}
|
|
|
|
.time-day__event-description {
|
|
font-size: 0.72rem;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.time-day__empty {
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.time-day__moons {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 8px;
|
|
border-top: 1px solid var(--time-border);
|
|
}
|
|
|
|
.time-day__moon-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.time-day__moon {
|
|
width: var(--time-moon-size, 28px);
|
|
height: var(--time-moon-size, 28px);
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
background: var(--time-weather-bg);
|
|
box-shadow:
|
|
inset 0 0 0 1px rgba(207, 101, 95, 0.16),
|
|
0 4px 10px rgba(97, 62, 36, 0.08);
|
|
}
|
|
|
|
.time-day__moon-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.time-day__moon-fallback {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 999px;
|
|
font-size: clamp(0.62rem, 2.6cqi, 0.82rem);
|
|
font-weight: 700;
|
|
color: #fff8ef;
|
|
background: var(--time-accent);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Event editor
|
|
========================================================================== */
|
|
|
|
.time-event-editor__panel {
|
|
height: 100%;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
overflow-y: auto;
|
|
padding: 18px;
|
|
border-radius: 18px;
|
|
}
|
|
|
|
.time-event-editor__header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.time-event-editor__title {
|
|
margin: 0;
|
|
font-size: 1.75rem;
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
color: var(--time-heading);
|
|
}
|
|
|
|
.time-event-editor__meta {
|
|
margin: 0;
|
|
color: var(--time-muted-text);
|
|
}
|
|
|
|
.time-event-editor__form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.time-event-editor__section-title {
|
|
margin: 2px 0 -2px;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
color: var(--time-heading-soft);
|
|
}
|
|
|
|
.time-event-editor__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.time-event-editor__grid--top {
|
|
align-items: start;
|
|
}
|
|
|
|
.time-event-editor__grid--two {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.time-event-editor__field--span-3 {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.time-event-editor__field--no-label {
|
|
gap: 0;
|
|
}
|
|
|
|
.time-event-editor__date-sections {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.time-event-editor__date-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 12px;
|
|
border: 1px solid var(--time-border);
|
|
border-radius: 12px;
|
|
background: var(--time-card-bg);
|
|
}
|
|
|
|
.time-event-editor__block-title {
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--time-heading-soft);
|
|
}
|
|
|
|
.time-event-editor__time-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.time-event-editor__field--no-label .time-event-editor__input {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.time-event-editor__field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.time-event-editor__label {
|
|
font-size: 0.95rem;
|
|
color: var(--time-muted-text);
|
|
}
|
|
|
|
.time-event-editor__picker-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto auto;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.time-event-editor__toggle-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: -2px;
|
|
}
|
|
|
|
.time-event-editor__toggle-row input[type="checkbox"] {
|
|
margin: 0;
|
|
}
|
|
|
|
.time-event-editor__toggle-label {
|
|
color: var(--time-muted-text);
|
|
}
|
|
|
|
.time-event-editor__picker-display {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.time-event-editor__picker-button {
|
|
width: 36px;
|
|
min-width: 36px;
|
|
height: 36px;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
background: var(--time-button-bg);
|
|
color: var(--time-strong-text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.time-event-editor__picker-button:hover {
|
|
background: var(--time-accent-faint);
|
|
}
|
|
|
|
.time-event-editor__color-row {
|
|
display: grid;
|
|
grid-template-columns: 56px minmax(0, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.time-event-editor__tags {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.time-event-editor__tag-pack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.time-event-editor__tag-pack-title {
|
|
font-size: 0.98rem;
|
|
font-weight: 700;
|
|
color: var(--time-strong-text);
|
|
}
|
|
|
|
.time-event-editor__tag-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.time-event-editor__tag-button {
|
|
border: 1px solid rgba(207, 101, 95, 0.24);
|
|
border-radius: 999px;
|
|
padding: 6px 12px;
|
|
background: var(--time-button-bg);
|
|
color: var(--time-strong-text);
|
|
cursor: pointer;
|
|
transition:
|
|
background-color 120ms ease,
|
|
border-color 120ms ease,
|
|
transform 120ms ease,
|
|
box-shadow 120ms ease;
|
|
}
|
|
|
|
.time-event-editor__tag-button:hover {
|
|
transform: translateY(-1px);
|
|
background: var(--time-accent-faint);
|
|
}
|
|
|
|
.time-event-editor__tag-button.is-selected {
|
|
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.32) inset;
|
|
}
|
|
|
|
.time-event-editor__actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
.time-event-detail__image {
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: 320px;
|
|
margin: 0 0 14px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.time-event-detail__header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.time-event-detail__header-main {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.time-event-detail__moon-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 8px;
|
|
min-width: 180px;
|
|
}
|
|
|
|
.time-event-detail__description {
|
|
white-space: pre-wrap;
|
|
line-height: 1.55;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.time-event-detail .time-modal__footer {
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.time-event-detail__moon-transitions {
|
|
width: 100%;
|
|
font-size: 0.78rem;
|
|
line-height: 1.35;
|
|
color: var(--time-muted-text);
|
|
}
|
|
|
|
.time-event-detail__moon-transitions-title {
|
|
margin-bottom: 4px;
|
|
font-weight: 700;
|
|
color: var(--time-heading-soft);
|
|
}
|
|
|
|
.time-event-detail__moon-transition + .time-event-detail__moon-transition {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.time-file-picker__suggestion {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.time-file-picker__title {
|
|
line-height: 1.3;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.time-file-picker__path {
|
|
font-size: 0.85em;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Settings / modal shared
|
|
========================================================================== */
|
|
|
|
.time-settings-note {
|
|
margin-top: 18px;
|
|
padding: 14px 16px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 12px;
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
.time-settings-note h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.time-settings-note ul {
|
|
margin-top: 8px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.modal-container .modal.time-flex-modal {
|
|
width: auto;
|
|
max-width: min(96vw, 1400px);
|
|
display: inline-flex;
|
|
}
|
|
|
|
.modal-container .modal.time-flex-modal .time-flex-modal__content {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
width: auto;
|
|
max-width: min(92vw, 1200px);
|
|
}
|
|
|
|
.time-modal {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.time-inline-fields {
|
|
display: grid;
|
|
gap: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.time-inline-fields--triple {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.time-inline-field {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.time-inline-field__label {
|
|
font-size: 0.95rem;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.time-modal__footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.time-modal__footer .setting-item {
|
|
margin: 0;
|
|
padding: 0;
|
|
border-top: 0;
|
|
}
|
|
|
|
.time-modal__footer .setting-item-control {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.time-modal__footer button {
|
|
min-width: 110px;
|
|
height: 36px;
|
|
}
|
|
|
|
.time-modal__pack-selector h3,
|
|
.time-modal__pack-selector p {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.time-control-weather__list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.time-control-weather__row {
|
|
display: grid;
|
|
grid-template-columns:
|
|
minmax(0, 1.15fr)
|
|
minmax(0, 1.15fr)
|
|
minmax(220px, 0.9fr)
|
|
38px;
|
|
align-items: end;
|
|
gap: 10px;
|
|
padding: 12px;
|
|
border: 1px solid var(--time-border);
|
|
border-radius: 12px;
|
|
background: var(--time-card-bg);
|
|
}
|
|
|
|
.time-control-weather__date-block,
|
|
.time-control-weather__pack-field {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.time-control-weather__date-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Calendar editor modal
|
|
========================================================================== */
|
|
|
|
.time-calendar-editor__compact-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.time-calendar-editor__compact-field,
|
|
.time-calendar-editor__mini-field {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.time-calendar-editor__compact-label {
|
|
font-size: 0.95rem;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.time-calendar-editor__mini-label {
|
|
font-size: 0.82rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.time-calendar-editor__compact-input,
|
|
.time-calendar-editor__mini-input {
|
|
box-sizing: border-box;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.time-calendar-editor__compact-input {
|
|
width: 100%;
|
|
height: 38px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.time-calendar-editor__mini-input {
|
|
width: 100%;
|
|
max-width: 110px;
|
|
height: 34px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.time-calendar-editor__shortcut-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 8px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.time-calendar-editor__shortcut-grid .time-manager__button {
|
|
min-height: 38px;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.time-calendar-editor__setup-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 14px;
|
|
margin: 4px 0 14px;
|
|
}
|
|
|
|
.time-calendar-editor__setup-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 12px;
|
|
border: 1px solid var(--time-border, var(--background-modifier-border));
|
|
border-radius: 12px;
|
|
background: var(--time-card-bg, var(--background-secondary));
|
|
}
|
|
|
|
.time-calendar-editor__mini-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(72px, 110px));
|
|
gap: 8px;
|
|
align-items: end;
|
|
}
|
|
|
|
.time-calendar-editor__mini-grid--two {
|
|
grid-template-columns: repeat(2, minmax(72px, 110px));
|
|
}
|
|
|
|
.time-calendar-editor__checkbox-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.time-calendar-editor__checkbox-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.time-calendar-editor__checkbox-row input[type="checkbox"] {
|
|
margin: 0;
|
|
}
|
|
|
|
.time-frontmatter-block-note {
|
|
margin-top: -2px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.time-frontmatter-rule-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.time-frontmatter-rule-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 54px 38px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Manager / editor lists
|
|
========================================================================== */
|
|
|
|
.time-manager__list,
|
|
.time-collection-editor__list,
|
|
.time-tag-editor__list,
|
|
.time-season-editor__list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.time-manager__item {
|
|
display: grid;
|
|
grid-template-columns: 36px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 14px 0;
|
|
border-top: 1px solid rgba(207, 101, 95, 0.18);
|
|
}
|
|
|
|
.time-manager__item:first-child {
|
|
border-top: 0;
|
|
}
|
|
|
|
.time-manager__body {
|
|
min-width: 0;
|
|
}
|
|
|
|
.time-manager__title {
|
|
margin-bottom: 4px;
|
|
font-size: 1.45rem;
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
color: var(--time-strong-text);
|
|
}
|
|
|
|
.time-manager__meta,
|
|
.time-manager__empty,
|
|
.time-collection-editor__empty,
|
|
.time-season-editor__empty {
|
|
color: var(--time-muted-text);
|
|
}
|
|
|
|
.time-manager__meta {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.time-manager__empty {
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.time-manager__actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.time-manager__footer,
|
|
.time-tag-editor__toolbar,
|
|
.time-season-editor__toolbar,
|
|
.time-collection-editor__toolbar {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
gap: 10px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.time-manager__footer {
|
|
justify-content: space-between;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.time-tag-editor__row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 54px auto;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.time-collection-editor__row {
|
|
display: grid;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.time-collection-editor__row--weekday {
|
|
grid-template-columns: minmax(240px, 1fr) 38px;
|
|
}
|
|
|
|
.time-collection-editor__row--month {
|
|
grid-template-columns: minmax(240px, 1fr) 120px 38px;
|
|
}
|
|
|
|
.time-collection-editor__row--named-year {
|
|
grid-template-columns: 120px minmax(240px, 1fr) 38px;
|
|
}
|
|
|
|
.time-collection-editor__row--era {
|
|
grid-template-columns:
|
|
minmax(180px, 1.2fr)
|
|
110px
|
|
110px
|
|
140px
|
|
80px
|
|
110px
|
|
140px
|
|
80px
|
|
38px;
|
|
}
|
|
|
|
.time-collection-editor__row--moon {
|
|
grid-template-columns:
|
|
minmax(170px, 1fr)
|
|
100px
|
|
100px
|
|
130px
|
|
90px
|
|
90px
|
|
54px
|
|
140px
|
|
140px
|
|
38px;
|
|
}
|
|
|
|
.time-collection-editor__row--leap-rule {
|
|
grid-template-columns:
|
|
minmax(170px, 1.2fr)
|
|
minmax(170px, 1fr)
|
|
80px
|
|
90px
|
|
minmax(140px, 1fr)
|
|
38px;
|
|
}
|
|
|
|
.time-collection-editor__row--leap-rule-header {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.time-collection-editor__row--leap-rule-header .time-collection-editor__column-label:last-child {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.time-collection-editor__row--leap-day-rule {
|
|
grid-template-columns:
|
|
minmax(170px, 1.2fr)
|
|
150px
|
|
minmax(170px, 1fr)
|
|
80px
|
|
90px
|
|
minmax(140px, 1fr)
|
|
38px;
|
|
}
|
|
|
|
.time-collection-editor__row--moon-header {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.time-collection-editor__column-label {
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--time-heading-soft);
|
|
}
|
|
|
|
.time-collection-editor__row--moon-header .time-collection-editor__column-label:last-child {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.time-moon-phase-editor__row {
|
|
display: grid;
|
|
grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.4fr) auto auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.time-moon-phase-editor__label {
|
|
font-size: 0.95rem;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.time-season-editor__row {
|
|
display: grid;
|
|
grid-template-columns:
|
|
minmax(160px, 1.4fr)
|
|
96px
|
|
96px
|
|
54px
|
|
96px
|
|
auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.time-season-editor__delete,
|
|
.time-tag-editor__delete {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Event explorer
|
|
========================================================================== */
|
|
|
|
.time-event-explorer__search-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto auto;
|
|
gap: 12px;
|
|
margin: 8px 0 12px;
|
|
align-items: end;
|
|
}
|
|
|
|
.time-event-explorer__controls {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 180px;
|
|
gap: 12px;
|
|
margin: 8px 0 12px;
|
|
}
|
|
|
|
.time-event-explorer__field {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.time-event-explorer__label {
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--time-heading-soft);
|
|
}
|
|
|
|
.time-event-explorer__list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.time-event-explorer__item {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: start;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
border: 1px solid var(--time-border);
|
|
border-radius: 12px;
|
|
background: var(--time-card-bg);
|
|
}
|
|
|
|
.time-event-explorer__title {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: var(--time-strong-text);
|
|
}
|
|
|
|
.time-event-explorer__date {
|
|
margin-top: 4px;
|
|
font-size: 0.8rem;
|
|
color: var(--time-muted-text);
|
|
}
|
|
|
|
.time-event-explorer__actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Weather pack month table
|
|
========================================================================== */
|
|
|
|
.time-weather-pack-months__meta {
|
|
margin-bottom: 10px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.time-weather-pack-months__table {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.time-weather-pack-months__header,
|
|
.time-weather-pack-months__row {
|
|
display: grid;
|
|
grid-template-columns: minmax(140px, 1.2fr) repeat(7, 88px);
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.time-weather-pack-months__header,
|
|
.time-weather-pack-months__header-cell {
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--time-heading-soft);
|
|
}
|
|
|
|
.time-weather-pack-months__label {
|
|
font-weight: 700;
|
|
color: var(--time-strong-text);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Calendar responsive
|
|
========================================================================== */
|
|
|
|
@container (max-width: 560px) {
|
|
.time-calendar__header {
|
|
padding: 12px 14px 10px;
|
|
}
|
|
|
|
.time-calendar__scroller {
|
|
padding: 14px 16px 16px;
|
|
}
|
|
|
|
.time-weekday-row,
|
|
.time-month-grid {
|
|
gap: 10px;
|
|
}
|
|
|
|
.time-day-cell {
|
|
min-height: 50px;
|
|
padding: 6px 6px 4px;
|
|
}
|
|
|
|
.time-week-number-cell {
|
|
min-height: 50px;
|
|
}
|
|
}
|
|
|
|
@container (max-width: 430px) {
|
|
.time-calendar {
|
|
padding: 10px;
|
|
}
|
|
|
|
.time-calendar__shell {
|
|
gap: 8px;
|
|
}
|
|
|
|
.time-calendar__brand {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.time-calendar__toolbar {
|
|
gap: 5px;
|
|
}
|
|
|
|
.time-calendar__mode-switch {
|
|
gap: 4px;
|
|
}
|
|
|
|
.time-icon-button,
|
|
.time-calendar__mode-button,
|
|
.time-calendar__today-button {
|
|
width: 30px;
|
|
min-width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
.time-icon-button svg,
|
|
.time-calendar__mode-button svg,
|
|
.time-calendar__today-button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.time-weekday-row,
|
|
.time-month-grid {
|
|
gap: 8px;
|
|
}
|
|
|
|
.time-day-cell {
|
|
min-height: 44px;
|
|
}
|
|
|
|
.time-week-number-cell {
|
|
min-height: 44px;
|
|
}
|
|
}
|
|
|
|
@container (max-width: 360px) {
|
|
.time-calendar__shell {
|
|
gap: 0;
|
|
}
|
|
|
|
.time-calendar__rail {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@container (max-width: 350px) {
|
|
.time-calendar__brand {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.time-day-cell__markers {
|
|
gap: 4px;
|
|
}
|
|
|
|
.time-day-marker {
|
|
width: 7px;
|
|
height: 7px;
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Day view responsive
|
|
========================================================================== */
|
|
|
|
@container (max-width: 520px) {
|
|
.time-day {
|
|
padding: 8px;
|
|
}
|
|
|
|
.time-control {
|
|
padding: 8px;
|
|
}
|
|
|
|
.time-day__panel {
|
|
gap: 8px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.time-control__panel {
|
|
gap: 8px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.time-day__topbar {
|
|
gap: 3px 4px;
|
|
}
|
|
|
|
.time-day__nav-button,
|
|
.time-day__menu-button {
|
|
width: 30px;
|
|
height: 30px;
|
|
min-width: 30px;
|
|
}
|
|
|
|
.time-day__date-nav {
|
|
grid-template-columns: 30px auto 30px;
|
|
gap: clamp(2px, 0.7cqi, 4px);
|
|
justify-self: start;
|
|
}
|
|
|
|
.time-day__date-main {
|
|
font-size: clamp(0.88rem, 7.2cqi, 1.28rem);
|
|
}
|
|
|
|
.time-day__actions {
|
|
gap: 4px;
|
|
}
|
|
|
|
.time-day__weather {
|
|
gap: 3px;
|
|
padding: 4px 6px;
|
|
}
|
|
|
|
.time-day__weather-main {
|
|
gap: 3px;
|
|
font-size: clamp(0.76rem, 3.2cqi, 0.86rem);
|
|
}
|
|
|
|
.time-day__weather-pop {
|
|
min-width: 138px;
|
|
max-width: calc(100cqi - 10px);
|
|
padding: 7px 8px;
|
|
}
|
|
}
|
|
|
|
@container (max-width: 380px) {
|
|
.time-day__topbar {
|
|
gap: 3px;
|
|
}
|
|
|
|
.time-day__date-nav {
|
|
grid-template-columns: 26px auto 26px;
|
|
gap: 2px;
|
|
}
|
|
|
|
.time-day__date-main {
|
|
font-size: clamp(0.8rem, 7.8cqi, 1.06rem);
|
|
}
|
|
|
|
.time-day__weather-pop {
|
|
max-width: calc(100cqi - 8px);
|
|
}
|
|
}
|
|
|
|
@container (max-width: 230px) {
|
|
.time-day__topbar {
|
|
grid-template-columns: 1fr;
|
|
gap: 6px;
|
|
}
|
|
|
|
.time-day__weather {
|
|
justify-self: start;
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Global responsive
|
|
========================================================================== */
|
|
|
|
@media (max-width: 620px) {
|
|
.time-event-editor__picker-row,
|
|
.time-event-editor__grid,
|
|
.time-event-editor__grid--two,
|
|
.time-event-editor__date-sections,
|
|
.time-event-editor__time-row,
|
|
.time-inline-fields--triple,
|
|
.time-tag-editor__row,
|
|
.time-moon-phase-editor__row,
|
|
.time-settings-button-row,
|
|
.time-weather-pack-months__header,
|
|
.time-weather-pack-months__row,
|
|
.time-collection-editor__row--weekday,
|
|
.time-collection-editor__row--month,
|
|
.time-collection-editor__row--named-year,
|
|
.time-collection-editor__row--era,
|
|
.time-collection-editor__row--moon,
|
|
.time-collection-editor__row--leap-rule,
|
|
.time-collection-editor__row--moon-header,
|
|
.time-season-editor__row,
|
|
.time-control-weather__row,
|
|
.time-control-weather__date-grid,
|
|
.time-event-explorer__controls,
|
|
.time-event-explorer__search-row,
|
|
.time-event-explorer__item,
|
|
.time-settings-button-header {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.time-calendar-editor__compact-grid,
|
|
.time-calendar-editor__setup-grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.time-frontmatter-rule-row {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.time-calendar-editor__shortcut-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.time-manager__item {
|
|
grid-template-columns: 30px minmax(0, 1fr);
|
|
}
|
|
|
|
.time-manager__actions {
|
|
grid-column: 1 / -1;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.time-manager__footer {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.time-event-explorer__actions {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 420px) {
|
|
.time-calendar-editor__shortcut-grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.time-calendar-editor__mini-grid,
|
|
.time-calendar-editor__mini-grid--two {
|
|
grid-template-columns: repeat(auto-fit, minmax(72px, 110px));
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Timeline views
|
|
========================================================================== */
|
|
|
|
.workspace-leaf-content[data-type="time-timeline-view"] .view-content,
|
|
.workspace-leaf-content[data-type="time-timeline-filter-view"] .view-content {
|
|
padding: 0;
|
|
}
|
|
|
|
.time-timeline-view,
|
|
.time-tag-filter-view {
|
|
height: 100%;
|
|
container-type: inline-size;
|
|
}
|
|
|
|
.time-timeline,
|
|
.time-tag-filter {
|
|
min-height: 100%;
|
|
height: 100%;
|
|
color: var(--time-strong-text, var(--text-normal));
|
|
background: var(--time-app-bg, var(--background-primary));
|
|
}
|
|
|
|
.time-timeline {
|
|
padding: 14px;
|
|
}
|
|
|
|
.time-tag-filter {
|
|
padding: 6px;
|
|
}
|
|
|
|
.time-timeline__panel,
|
|
.time-tag-filter__panel {
|
|
height: 100%;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 18px;
|
|
background: var(--time-panel-bg, var(--background-primary));
|
|
box-shadow:
|
|
0 10px 30px var(--time-shadow, rgba(0, 0, 0, 0.12)),
|
|
inset 0 0 0 1px rgba(207, 101, 95, 0.12);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.time-timeline__header,
|
|
.time-tag-filter__header {
|
|
padding: 14px 16px 12px;
|
|
border-bottom: 1px solid var(--time-border, var(--background-modifier-border));
|
|
}
|
|
|
|
.time-tag-filter__header {
|
|
display: none;
|
|
}
|
|
|
|
.time-timeline__title,
|
|
.time-tag-filter__title {
|
|
margin: 0 0 6px;
|
|
font-size: clamp(1.2rem, 6cqi, 1.6rem);
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
color: var(--time-heading, var(--text-normal));
|
|
}
|
|
|
|
.time-timeline__meta,
|
|
.time-tag-filter__meta {
|
|
margin: 0;
|
|
color: var(--time-muted-text, var(--text-muted));
|
|
}
|
|
|
|
.time-timeline__toolbar,
|
|
.time-tag-filter__toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.time-embedded-timeline .time-timeline__toolbar {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.time-timeline__content,
|
|
.time-tag-filter__content {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.time-timeline__content {
|
|
padding: 16px 18px 18px;
|
|
}
|
|
|
|
.time-tag-filter__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.time-tag-filter__group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.time-tag-filter__group-title {
|
|
margin: 0;
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--time-heading-soft, var(--text-muted));
|
|
}
|
|
|
|
.time-tag-filter__chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.time-tag-filter__button {
|
|
min-height: 34px;
|
|
padding: 6px 12px;
|
|
border: 1px solid var(--time-tag-color, #d46b65);
|
|
border-left-width: 4px;
|
|
border-radius: 999px;
|
|
background: var(--time-button-bg, var(--background-secondary));
|
|
color: var(--time-strong-text, var(--text-normal));
|
|
cursor: pointer;
|
|
transition:
|
|
background-color 120ms ease,
|
|
border-color 120ms ease,
|
|
color 120ms ease,
|
|
transform 120ms ease,
|
|
opacity 120ms ease,
|
|
box-shadow 120ms ease;
|
|
}
|
|
|
|
.time-tag-filter__button:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.time-tag-filter__button.is-exclude {
|
|
text-decoration: line-through;
|
|
background: color-mix(in srgb, var(--background-primary) 84%, var(--time-tag-color, #d46b65) 16%);
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline {
|
|
--tl-bg: var(--background-primary);
|
|
--tl-accent: var(--background-modifier-border);
|
|
--tl-hover: var(--interactive-accent);
|
|
--tl-h-col-w: 600px;
|
|
--tl-h-gap: 0px;
|
|
--tl-h-stack-gap: 26px;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-wrapper.tl-cross-mode {
|
|
display: grid;
|
|
gap: 20px;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-row {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding-left: var(--tl-side-gap-left, 40px);
|
|
padding-right: var(--tl-side-gap-right, 40px);
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-grid {
|
|
display: grid;
|
|
align-items: center;
|
|
gap: 0;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-grid.has-media {
|
|
grid-template-columns: var(--tl-media-w, 200px) 1fr;
|
|
grid-template-areas: "media box";
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-row.tl-align-right .tl-grid.has-media {
|
|
grid-template-columns: 1fr var(--tl-media-w, 200px);
|
|
grid-template-areas: "box media";
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-grid.no-media {
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas: "box";
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-media {
|
|
grid-area: media;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
background: var(--background-modifier-border);
|
|
z-index: 2;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .time-timeline__media-frame {
|
|
position: relative;
|
|
width: var(--tl-media-w, 200px);
|
|
height: var(--time-tl-media-h, 315px);
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .time-timeline__media-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-box.callout {
|
|
grid-area: box;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 10px 12px;
|
|
margin: 0;
|
|
background: var(--tl-bg, var(--background-primary));
|
|
border: 1px solid var(--tl-accent, var(--background-modifier-border));
|
|
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 1px 0 0 rgba(0, 0, 0, 0.04);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
transition:
|
|
background-color 0.15s ease,
|
|
border-color 0.15s ease,
|
|
box-shadow 0.15s ease;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .time-timeline__box {
|
|
box-sizing: border-box;
|
|
height: var(--time-tl-box-h, 289px);
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-row:not(.tl-align-right) .tl-box.callout.has-media {
|
|
border-left: none;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-row.tl-align-right .tl-box.callout.has-media {
|
|
border-right: none;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-box.callout.no-media {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-box .tl-title,
|
|
.time-timeline-view .simple-timeline .tl-box .tl-date {
|
|
margin: 0 0 6px;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-box .tl-title.tl-title-colored,
|
|
.time-timeline-view .simple-timeline .tl-box .tl-date.tl-date-colored {
|
|
position: relative;
|
|
display: inline-block;
|
|
border: 0;
|
|
box-shadow: none;
|
|
background: none;
|
|
background-image: none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-box .tl-title.tl-title-colored::after {
|
|
content: "";
|
|
pointer-events: none;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -0.12em;
|
|
height: 0.12em;
|
|
width: 100%;
|
|
background-image: linear-gradient(
|
|
to right,
|
|
currentColor 0%,
|
|
currentColor 20%,
|
|
transparent 100%
|
|
);
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-box .tl-date.tl-date-colored::after {
|
|
content: "";
|
|
pointer-events: none;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -0.24em;
|
|
height: 0.2em;
|
|
width: 45%;
|
|
background-image: linear-gradient(
|
|
to right,
|
|
currentColor 0%,
|
|
currentColor 1%,
|
|
transparent 100%
|
|
);
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-box .tl-summary {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
line-height: var(--tl-summary-lh, 1.4);
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
word-break: break-word;
|
|
-webkit-line-clamp: var(--tl-summary-lines, 7);
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-box .tl-summary.tl-clamp {
|
|
max-height: calc(var(--tl-summary-lines, 7) * var(--tl-summary-lh, 1.4) * 1em);
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .time-timeline__summary {
|
|
--tl-summary-lh: 1.4;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-media:hover + .tl-box.callout.has-media,
|
|
.time-timeline-view .simple-timeline .tl-box.callout:hover {
|
|
background: var(--tl-hover, var(--interactive-accent));
|
|
border-color: var(--tl-accent, var(--background-modifier-border));
|
|
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 1px 0 0 rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline a.tl-hover-anchor.internal-link {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 5;
|
|
text-decoration: none;
|
|
color: transparent;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-h-scroller {
|
|
overflow-x: auto;
|
|
overflow-y: visible;
|
|
-webkit-overflow-scrolling: touch;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-h-content.tl-horizontal.tl-h-mixed {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
gap: var(--tl-h-gap, 0px);
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-h-content.tl-horizontal.tl-h-stacked {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--tl-h-stack-gap, 26px);
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-h-item {
|
|
flex: 0 0 auto;
|
|
width: var(--tl-h-col-w, 600px);
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-horizontal .tl-row {
|
|
width: auto;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-h-item .tl-grid.no-media {
|
|
grid-template-columns: var(--tl-h-col-w, 600px);
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-h-item .tl-grid.has-media {
|
|
grid-template-columns:
|
|
var(--tl-media-w, 200px)
|
|
max(160px, calc(var(--tl-h-col-w, 600px) - var(--tl-media-w, 200px)));
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-h-item.tl-align-right .tl-grid.has-media {
|
|
grid-template-columns:
|
|
max(160px, calc(var(--tl-h-col-w, 600px) - var(--tl-media-w, 200px)))
|
|
var(--tl-media-w, 200px);
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-h-item.tl-h-join-left-box .tl-box.callout {
|
|
border-left: none;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-h-item.tl-h-join-right-box .tl-box.callout {
|
|
border-right: none;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-h-timeline {
|
|
display: block;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-h-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--tl-h-cols, 1), var(--tl-h-col-w, 600px));
|
|
gap: 12px 0;
|
|
align-items: start;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-h-slot {
|
|
grid-column-start: var(--tl-h-col);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.time-timeline-view .simple-timeline {
|
|
--tl-h-col-w: 420px;
|
|
--tl-h-gap: 0px;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-wrapper.tl-cross-mode {
|
|
gap: 16px;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-wrapper.tl-cross-mode .tl-row {
|
|
--tl-side-gap-left: 16px;
|
|
--tl-side-gap-right: 16px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-wrapper.tl-cross-mode .tl-grid {
|
|
grid-template-columns: 1fr;
|
|
justify-items: stretch;
|
|
width: 100%;
|
|
max-width: 560px;
|
|
row-gap: 0;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-wrapper.tl-cross-mode .tl-grid.has-media {
|
|
grid-template-areas:
|
|
"media"
|
|
"box";
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-wrapper.tl-cross-mode .tl-grid.no-media {
|
|
grid-template-areas: "box";
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-wrapper.tl-cross-mode .tl-media {
|
|
width: 100%;
|
|
max-width: 560px;
|
|
height: auto;
|
|
border-radius: 10px 10px 0 0;
|
|
border: none;
|
|
margin-bottom: -6px;
|
|
background: transparent;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-wrapper.tl-cross-mode .tl-media img {
|
|
width: 100%;
|
|
height: auto;
|
|
object-fit: cover;
|
|
display: block;
|
|
border-radius: 10px 10px 0 0;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-wrapper.tl-cross-mode .tl-box.callout {
|
|
width: 100%;
|
|
max-width: 560px;
|
|
height: auto;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-wrapper.tl-cross-mode .tl-box.callout.has-media,
|
|
.time-timeline-view .simple-timeline .tl-wrapper.tl-cross-mode .tl-row.tl-align-right .tl-box.callout.has-media,
|
|
.time-timeline-view .simple-timeline .tl-wrapper.tl-cross-mode .tl-row:not(.tl-align-right) .tl-box.callout.has-media {
|
|
border: 1px solid var(--tl-accent, var(--background-modifier-border));
|
|
border-top: none;
|
|
border-radius: 0 0 10px 10px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.time-timeline-view .simple-timeline .tl-wrapper.tl-cross-mode .tl-box.callout.no-media {
|
|
width: 100%;
|
|
max-width: 560px;
|
|
height: auto;
|
|
border-radius: 10px;
|
|
}
|
|
} |