/* (C) Copyright 1Timetable 2025 */ /* #region Root Styles */ :root { --style-background-primary-dark: rgb(20, 20, 21); --style-background-secondary-dark: rgb(23, 23, 24); --style-background-tertiary-dark: rgb(28, 28, 29); --style-background-quarternary-dark: rgb(32, 32, 33); --style-background-quinary-dark: rgb(39, 39, 39); --style-background-timeline-alternate-dark: rgb(25, 25, 26); --style-background-primary-light: rgb(216, 216, 218); --style-background-secondary-light: rgb(224, 223, 225); --style-background-tertiary-light: rgb(231, 231, 233); --style-background-quarternary-light: rgb(242,242, 244); --style-background-quinary-light: rgb(253,253,255); --style-background-timeline-alternate-light: rgb(231, 231, 232); --style-background-accent-ultrathin-dark: rgba(120, 120, 120, 0.06); --style-background-accent-thin-dark: rgba(120, 120, 120, 0.12); --style-background-accent-regular-dark: rgba(120, 120, 120, 0.26); --style-background-accent-selected-dark: rgba(132, 132, 132, 0.26); --style-background-accent-thick-dark: rgba(150, 150, 150, 0.45); --style-background-accent-ultrathick-dark: rgba(220, 220, 220, 0.45); --style-background-alternate-dark: rgba(120, 120, 120, 0.12); --style-background-accent-ultrathin-light: rgba(173, 173, 173, 0.06); --style-background-accent-thin-light: rgba(135, 135, 135, 0.12); --style-background-accent-regular-light: rgba(135, 135, 135, 0.18); --style-background-accent-selected-light: rgba(123, 123, 123, 0.24); --style-background-accent-thick-light: rgba(105, 105, 105, 0.36); --style-background-accent-ultrathick-light: rgba(35, 35, 35, 0.44); --style-background-alternate-light: rgba(135, 135, 135, 0.12); --style-background-accent-control-dark: rgba(50, 50, 50, 0.7); --style-background-accent-control-light: rgba(205, 205, 205, 0.7); --style-text-ultra-dark: rgb(255,255,255); --style-text-ultra-light: rgb(255, 255, 255); --style-text-primary-dark: rgb(229, 229, 238); --style-text-primary-light: rgb(39, 39, 40); --style-text-secondary-dark: rgb(185, 185, 189); --style-text-secondary-light: rgb(69, 69, 70); --style-text-tertiary-dark: rgb(134, 134, 138); --style-text-tertiary-light: rgb(98, 98, 100); --style-text-quarternary-dark: rgb(108, 108, 112); --style-text-quarternary-light: rgb(108, 108, 112); --color-accent-dark: rgb(57, 111, 161); --color-accent-light: rgb(57, 111, 161); --color-accent-hover-dark: rgb(89, 154, 215); --color-accent-hover-light: rgb(69, 119, 167); --color-accent-selection-dark: rgb(59, 112, 161); --color-accent-selection-light: rgb(59, 112, 161); --color-accent-thin-dark: rgba(89, 154, 215, 0.3); --color-accent-thin-light: rgba(77, 120, 160, 0.3); --color-accent-text-dark: #fff; --color-accent-text-light: #ebebeb; --color-timeline-selection-dark: rgba(59, 112, 161, 0.322); --color-timeline-selection-light: rgba(196, 143, 94, 0.322); --alert-warning-primary-dark: rgb(179, 135, 33); --alert-warning-primary-light: rgb(211, 134, 0); --alert-warning-secondary-dark: rgb(63, 50, 20); --alert-warning-secondary-light: rgb(209, 160, 96); --color-safe-orange: #E69F00; --color-safe-skyblue: #56B4E9; --color-safe-bluegreen: #009E73; --color-safe-yellow: #F0E442; --color-safe-blue: #0072B2; --color-safe-vermillion: #D55E00; --color-safe-purple: #9f2b5b; --alert-error-primary-dark: rgb(179, 33, 33); --alert-error-secondary-dark: rgb(63, 20, 20); --alert-error-primary-light: rgb(179, 33, 33); --alert-error-secondary-light: rgb(63, 20, 20); --alert-info-border-color-dark: rgb(50, 122, 177); --alert-info-border-color-light: rgb(50, 122, 177); --alert-info-background-color-dark: rgb(26, 58, 84); --alert-info-background-color-light: rgb(107, 179, 234); --alert-success-border-color-dark: rgb(33, 179, 74); --alert-success-border-color-light: rgb(53, 123, 70); --alert-success-background-color-dark: rgb(47, 97, 61); --alert-success-background-color-light: rgb(33, 179, 74); --style-dialog-backdrop-light: rgba(129, 129, 129, 0.5); --style-dialog-backdrop-dark: rgba(19, 19, 19, 0.8); --style-role-destructive-background-dark: rgb(163, 37, 51); --style-role-destructive-background-dark-hover: rgb(207, 53, 71); --style-role-destructive-background-light: rgb(163, 37, 51); --style-role-destructive-background-light-hover: rgb(207, 53, 71); --style-role-destructive-accent-dark: #fff; --color-nationalRail-red: rgb(230,0,0); --color-nationalRail-white: #fff; --date-picker-month-cell: 38px; --color-delay-high-border-dark: rgba(193, 13, 22); --color-delay-high-background-dark: rgb(106, 25, 29); --color-delay-medium-border-dark: rgb(223, 87, 29); --color-delay-medium-background-dark: rgb(113, 54, 17); --color-delay-low-border-dark: rgb(199, 145, 19); --color-delay-low-background-dark: rgb(126, 87, 18); --color-delay-tiny-border-dark: rgba(199, 175, 19, 0.5); --color-delay-tiny-background-dark: rgba(126, 104, 18, 0.5); --color-delay-high-border-light: rgb(130, 5, 11); --color-delay-high-background-light: rgb(232, 80, 87); --color-delay-medium-border-light: rgb(130, 48, 13); --color-delay-medium-background-light: rgb(224, 139, 86); --color-delay-low-border-light: rgb(137, 100, 12); --color-delay-low-background-light: rgb(223, 169, 75); --color-delay-tiny-border-light: rgba(117, 104, 20, 0.5); --color-delay-tiny-background-light: rgba(190, 159, 32, 0.5); --platform-label-background-dark: #CFA314; --platform-label-background-light: #FCD043; --platform-graph-lines: #767676; --platform-graph-hump: #4c4c4c; --platform-graph-empty-occ: rgb(168, 168, 168); --platform-graph-passenger-occ: rgb(61, 91, 124); --platform-graph-freight-occ: rgb(116, 79, 52); --platform-graph-maintenance-occ: rgb(183, 143, 32); --platform-graph-unknown-occ: rgb(112, 112, 112); --platform-graph-hover-stroke: rgb(255, 255, 255); --platform-graph-selected-stroke: rgb(255, 255, 255); --linecode-label-background-dark: #3b8cc2; --linecode-label-background-light: #4194cb; } body.dark-mode { --style-background-primary: var(--style-background-primary-dark); --style-background-secondary: var(--style-background-secondary-dark); --style-background-tertiary: var(--style-background-tertiary-dark); --style-background-quarternary: var(--style-background-quarternary-dark); --style-background-quinary: var(--style-background-quinary-dark); --style-background-timeline-alternate: var(--style-background-timeline-alternate-dark); --style-background-accent-ultrathin: var(--style-background-accent-ultrathin-dark); --style-background-accent-thin: var(--style-background-accent-thin-dark); --style-background-accent-regular: var(--style-background-accent-regular-dark); --style-background-accent-selected: var(--style-background-accent-selected-dark); --style-background-accent-thick: var(--style-background-accent-thick-dark); --style-background-accent-ultrathick: var(--style-background-accent-ultrathick-dark); --style-background-accent-control: var(--style-background-accent-control-dark); --style-background-alternate: var(--style-background-alternate-dark); --style-text-ultra: var(--style-text-ultra-dark); --style-text-primary: var(--style-text-primary-dark); --style-text-secondary: var(--style-text-secondary-dark); --style-text-tertiary: var(--style-text-tertiary-dark); --style-text-quarternary: var(--style-text-quarternary-dark); --color-accent: var(--color-accent-dark); --color-accent-hover: var(--color-accent-hover-dark); --color-accent-selection: var(--color-accent-selection-dark); --color-accent-thin: var(--color-accent-thin-dark); --color-accent-text: var(--color-accent-text-dark); --color-timeline-selection: var(--color-timeline-selection-dark); --alert-warning-primary: var(--alert-warning-primary-dark); --alert-warning-secondary: var(--alert-warning-secondary-dark); --alert-error-primary: var(--alert-error-primary-dark); --alert-error-secondary: var(--alert-error-secondary-dark); --alert-info-border-color: var(--alert-info-border-color-dark); --alert-info-background-color: var(--alert-info-background-color-dark); --alert-success-border-color: var(--alert-success-border-color-dark); --alert-success-background-color: var(--alert-success-background-color-dark); --style-dialog-backdrop: var(--style-dialog-backdrop-dark); --style-role-destructive-background: var(--style-role-destructive-background-dark); --style-role-destructive-background-hover: var(--style-role-destructive-background-dark-hover); --color-delay-high-border: var(--color-delay-high-border-dark); --color-delay-high-background: var(--color-delay-high-background-dark); --color-delay-medium-border: var(--color-delay-medium-border-dark); --color-delay-medium-background: var(--color-delay-medium-background-dark); --color-delay-low-border: var(--color-delay-low-border-dark); --color-delay-low-background: var(--color-delay-low-background-dark); --color-delay-tiny-border: var(--color-delay-tiny-border-dark); --color-delay-tiny-background: var(--color-delay-tiny-background-dark); --inactive-filter: brightness(0.5); --active-filter: brightness(1.2) saturate(1.5); --map-line-dim: rgb(51, 51, 51); --map-line: rgb(88, 164, 232); --map-line-outer: rgb(60, 117, 167); /* #region Dark Map Colours */ --map-background: #0D0D0D; --location-outline-fill: #59477A; --primary-location-text-fill: #FFFFFF; --primary-location-text-stroke: #17181B; --secondary-location-text-fill: #AAAAAA; --secondary-location-text-stroke: #17181B; --tertiary-location-text-fill: #AAAAAA; --tertiary-location-text-stroke: #17181B; --track-stroke-upper: #6685A9; --track-stroke-lower: #273F5B; --line-code-text-fill: #c1cfdf; --line-code-text-stroke: #192128; --direction-arrow-fill: #192128; --direction-arrow-stroke: #1A3049; --direction-text-fill: #9EB4CD; --direction-text-stroke: #1A2128; --through-line-label-fill: #969696; --through-line-label-stroke: #252525; --through-line-track-stroke-upper: #969696; --through-line-track-stroke-lower: #181818; --siding-label-fill: #9D7859; --siding-label-stroke: #251F1B; --siding-track-stroke-upper: #9D7859; --siding-track-stroke-lower: #40362E; --platform-fill: #2E415A; --platform-stroke: #5C779C; --platform-label-background: var(--platform-label-background-dark); --platform-label-text-fill: #252010; --linecode-label-background: var(--linecode-label-background-dark); --linecode-label-text-fill: #ffffff; /* Dark Muted Theme */ --muted-map-background: #0D0D0D; --muted-location-outline-fill: #2B213E; --muted-primary-location-text-fill: #1C1C1C; --muted-primary-location-text-stroke: #090909; --muted-secondary-location-text-fill: #1C1C1C; --muted-secondary-location-text-stroke: #090909; --muted-tertiary-location-text-fill: #1C1C1C; --muted-tertiary-location-text-stroke: #090909; --muted-track-stroke-upper: #1C2126; --muted-track-stroke-lower: #121517; --muted-line-code-text-fill: #343b41; --muted-line-code-text-stroke: #0f151a; --muted-direction-arrow-fill: #263744; --muted-direction-arrow-stroke: #0A1218; --muted-direction-text-fill: #263744; --muted-direction-text-stroke: #0A1218; --muted-through-line-label-fill: #263744; --muted-through-line-label-stroke: #0A1218; --muted-through-line-track-stroke-upper: #263744; --muted-through-line-track-stroke-lower: #0A1218; --muted-siding-label-fill: #22282D; --muted-siding-label-stroke: #0A1218; --muted-siding-track-stroke-upper: #263744; --muted-siding-track-stroke-lower: #0A1218; --muted-platform-fill: #1E2023; --muted-platform-stroke: #272B32; --muted-platform-label-background: #272B32; --muted-platform-label-text-fill: #6B6A66; /* #endregion */ } body.light-mode { --style-background-primary: var(--style-background-primary-light); --style-background-secondary: var(--style-background-secondary-light); --style-background-tertiary: var(--style-background-tertiary-light); --style-background-quarternary: var(--style-background-quarternary-light); --style-background-quinary: var(--style-background-quinary-light); --style-background-timeline-alternate: var(--style-background-timeline-alternate-light); --style-background-accent-ultrathin: var(--style-background-accent-ultrathin-light); --style-background-accent-thin: var(--style-background-accent-thin-light); --style-background-accent-regular: var(--style-background-accent-regular-light); --style-background-accent-selected: var(--style-background-accent-selected-light); --style-background-accent-thick: var(--style-background-accent-thick-light); --style-background-accent-ultrathick: var(--style-background-accent-ultrathick-light); --style-background-accent-control: var(--style-background-accent-control-light); --style-background-alternate: var(--style-background-alternate-light); --style-text-ultra: var(--style-text-ultra-light); --style-text-primary: var(--style-text-primary-light); --style-text-secondary: var(--style-text-secondary-light); --style-text-tertiary: var(--style-text-tertiary-light); --style-text-quarternary: var(--style-text-quarternary-light); --color-accent: var(--color-accent-light); --color-accent-hover: var(--color-accent-hover-light); --color-accent-selection: var(--color-accent-selection-light); --color-accent-thin: var(--color-accent-thin-light); --color-accent-text: var(--color-accent-text-light); --color-timeline-selection: var(--color-timeline-selection-light); --alert-warning-primary: var(--alert-warning-primary-light); --alert-warning-secondary: var(--alert-warning-secondary-light); --alert-error-primary: var(--alert-error-primary-light); --alert-error-secondary: var(--alert-error-secondary-light); --alert-info-border-color: var(--alert-info-border-color-light); --alert-info-background-color: var(--alert-info-background-color-light); --alert-success-border-color: var(--alert-success-border-color-light); --alert-success-background-color: var(--alert-success-background-color-light); --style-dialog-backdrop: var(--style-dialog-backdrop-light); --style-role-destructive-background: var(--style-role-destructive-background-light); --style-role-destructive-background-hover: var(--style-role-destructive-background-light-hover); --color-delay-high-border: var(--color-delay-high-border-light); --color-delay-high-background: var(--color-delay-high-background-light); --color-delay-medium-border: var(--color-delay-medium-border-light); --color-delay-medium-background: var(--color-delay-medium-background-light); --color-delay-low-border: var(--color-delay-low-border-light); --color-delay-low-background: var(--color-delay-low-background-light); --color-delay-tiny-border: var(--color-delay-tiny-border-light); --color-delay-tiny-background: var(--color-delay-tiny-background-light); --inactive-filter: brightness(1.5); --active-filter: brightness(0.8) saturate(1.5); --map-line-dim: rgb(204, 204, 204); --map-line: rgb(117, 191, 255); --map-line-outer: rgb(99, 159, 212); /* #region Light Map Colours */ /* --map-background: #eaece1; */ --map-background: #dbdbdb; --location-outline-fill: #A179A9; --primary-location-text-fill: #41424d; --primary-location-text-stroke: #FFFFFF; --secondary-location-text-fill: #5A5C6B; --secondary-location-text-stroke: #FFFFFF; --tertiary-location-text-fill: #5A5C6B; --tertiary-location-text-stroke: #FFFFFF; --track-stroke-upper: #416B9C; --track-stroke-lower: #a7c7ed; --line-code-text-fill: #254D71; --line-code-text-stroke: #CEDEF0; --direction-arrow-fill: #CEDEF0; --direction-arrow-stroke: #254D71; --direction-text-fill: #CEDEF0; --direction-text-stroke: #254D71; --through-line-label-fill: #707070; --through-line-label-stroke: #cdcdcd; --through-line-track-stroke-upper: #cdcdcd; --through-line-track-stroke-lower: #808080; --siding-label-fill: #CAA586; --siding-label-stroke: #674D38; --siding-track-stroke-upper: #C79E7E; --siding-track-stroke-lower: #5a402b; --platform-fill: #7a98bf; --platform-stroke: #7a98bf; --platform-label-background: var(--platform-label-background-light); --platform-label-text-fill: #252010; --linecode-label-background: var(--linecode-label-background-light); --linecode-label-text-fill: #ffffff; /* muted light */ --muted-map-background: #F4F4F0; --muted-location-outline-fill: #948897; --muted-primary-location-text-fill: #ABABAB; --muted-primary-location-text-stroke: #F5F6F2; --muted-secondary-location-text-fill: #ABABAB; --muted-secondary-location-text-stroke: #F5F6F2; --muted-tertiary-location-text-fill: #ABABAB; --muted-tertiary-location-text-stroke: #F5F6F2; --muted-track-stroke-upper: #ABABAB; --muted-track-stroke-lower: #CECECE; --muted-line-code-text-fill: #909090; --muted-line-code-text-stroke: #C8C8C8; --muted-direction-arrow-fill: #909090; --muted-direction-arrow-stroke: #C8C8C8; --muted-direction-text-fill: #909090; --muted-direction-text-stroke: #C8C8C8; --muted-through-line-label-fill: #909090; --muted-through-line-label-stroke: #C8C8C8; --muted-through-line-track-stroke-upper: #909090; --muted-through-line-track-stroke-lower: #C8C8C8; --muted-siding-label-fill: #909090; --muted-siding-label-stroke: #C8C8C8; --muted-siding-track-stroke-upper: #909090; --muted-siding-track-stroke-lower: #C8C8C8; --muted-platform-fill: #ABABAB; --muted-platform-stroke: #CECECE; --muted-platform-label-background: #CECECE; --muted-platform-label-text-fill: #777671; /* #endregion */ } :root, * { --color-loading-medium: rgba(172, 116, 11); --color-loading-medium-border: rgba(172, 116, 11, 0.5); --color-loading-medium-background: rgba(145, 97, 9, 0.5); --color-loading-high: rgba(193, 13, 22); --color-loading-high-border: rgba(193, 13, 22, 0.5); --color-loading-high-background: rgba(180, 18, 26, 0.5); --style-border-radius: 4px; --style-border-radius-tiny: calc(4px + var(--style-padding-tiny)); --style-border-radius-small: calc(4px + var(--style-padding-small)); --style-padding-tiny: 4px; --style-padding-table: 6px; --style-padding-small: 8px; --style-padding-medium: 12px; --style-padding-large: 18px; --style-padding-xlarge: 24px; --style-padding-xxlarge: 36px; --style-padding-xxxlarge: 48px; --style-label-height: 24px; --style-input-height: 32px; --style-toolbar-height: 40px; --icon-size-tiny: 16px; --icon-size-small: 20px; --icon-size-regular: 24px; --icon-size-large: 30px; --icon-size-xlarge: 36px; --icon-size-xxlarge: 54px; --icon-size-xxxlarge: 72px; --icon-overlap: -0.35; --font-size-title-large: 48px; --font-size-title: 32px; --font-size-title2: 24px; --font-size-title3: 18px; --font-size-subtitle: 15px; --font-size-subheading: 14px; --font-size-heading: 12px; --font-size-body: 12px; --font-size-paragraph: 12px; --font-size-small: 11px; --font-size-tiny: 9px; --font-default: 'InterDisplay', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", system-ui; --font-emoji: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Segoe UI", "Android Emoji","Twemoji Mozilla","Noto Color Emoji",; --anim-duration-ultrashort: 80ms; --anim-duration-short: 120ms; --anim-duration-medium: 240ms; --anim-duration-long: 480ms; --popover-shadow: rgba(0, 0, 0, 0.12) 0px 3px 32px, rgba(0, 0, 0, 0.1) 0px 4px 24px, rgba(0, 0, 0, 0.08) 0px 3px 10px, rgba(0, 0, 0, 0.06) 0px 2px 6px, rgba(0, 0, 0, 0.1) 0px 1px 2px; --date-picker-size: 28px; --anim-bounce: cubic-bezier(0.5, 0.05, 1, 0.5); --border-regular: 1px solid var(--style-background-accent-regular); --mud-palette-text-secondary: var(--style-text-secondary); --mud-palette-text-primary: var(--style-text-primary); --mud-palette-surface: var(--style-background-primary); --mud-palette-action-default-hover: rgba(255, 255, 255, 0.058823529411764705); --mud-palette-primary: var(--style-background-accent-regular); --mud-palette-action-disabled: rgba(255, 255, 255, 0.25882352941176473); --mud-palette-action-default: rgba(255, 255, 255, 0.5372549019607843); --schedule-list-row-height: 40px; --train-graph-y-axis-width: 160px; --font-largeTitle: 400 var(--font-size-title2) var(--font-default); --font-title: 400 var(--font-size-title3) var(--font-default); --font-subtitle: 400 var(--font-size-subtitle) var(--font-default); --font-headline: 400 var(--font-size-heading) var(--font-default); --map-select: rgb(174, 15, 31); --map-select-outer: rgb(216, 21, 21); --timeline-capsule-border-width: 1px; } /* #endregion */ /* #region Global */ * { box-sizing: border-box; -webkit-user-select: none; user-select: none; scroll-behavior: smooth; cursor: default; scrollbar-width: thin; scrollbar-color: rgb(86,86,86) transparent; } ::-moz-selection { /* Code for Firefox */ color: var(--color-accent-text); background: var(--color-accent-selection); } ::selection { color: var(--color-accent-text); background: var(--color-accent-selection); } dispose-element { position: fixed; display: block!; top: -1px; left: -1px; width: 1px; height: 1px; } html { height: 100%; } body { background-color: var(--style-background-primary); background-color: var(--color-back-1); color: var(--style-text-secondary); font-size: var(--font-size-paragraph); margin: 0; padding: 0; height: 100%; min-height: 100%; overflow: hidden; max-width: 100%; width: 100%; } body.light-mode { background-color: var(--style-background-primary); } table { border-collapse: collapse; } /* #endregion */ /* #region Reconnect */ #components-reconnect-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--style-background-accent-thin) !important; backdrop-filter: saturate(0.6) brightness(0.6) blur(12px); z-index: 9999; display: none; flex-direction: row; justify-content: center; align-items: center; } #components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected { display: flex; } #components-reconnect-failed { display: none; } /* #endregion */ /* #region Master Error */ #blazor-error-ui { position: relative !important; display: none; flex-shrink: 0; min-height: 0; padding: var(--style-padding-medium); border-top: 1px solid var(--style-background-accent-regular); background-color: var(--style-background-secondary); color: var(--style-text-primary); bottom: initial; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2); left: initial; padding: .6rem 1.75rem .7rem 1.25rem; position: relative; width: 100%; z-index: 9999; padding: var(--style-padding-large); } #blazor-error-ui .ott-error { display: flex; justify-content: center; } #blazor-error-ui .ott-error .alert-section { max-width: 720px; } #blazor-error-ui .dismiss { color: inherit; cursor: pointer; position: relative; right: initial; top: initial; text-decoration: underline; } /* #endregion */ /* #region Generic SVGs */ svg { -webkit-user-select: none; user-select: none; } svg.icon-anim, svg.icon-anim * { transition-duration: var(--anim-duration-short); } svg .icon-stroke { stroke: currentColor; } svg .icon-fill { fill: currentColor; } .svg-warning svg .icon-stroke { stroke: var(--alert-warning-primary); } .svg-warning svg .icon-fill { fill: var(--alert-warning-primary); } .svg-error svg .icon-stroke { stroke: var(--alert-error-primary); } .svg-error svg .icon-fill { fill: var(--alert-error-primary); } svg .icon-stroke.primary { stroke: var(--style-text-primary); } svg .icon-fill.primary { fill: var(--style-text-primary); } svg .icon-stroke.secondary { stroke: var(--style-text-secondary); } svg .icon-fill.secondary { fill: var(--style-text-secondary); } .light-mode svg .icon-stroke { stroke: currentColor; } .light-mode svg .icon-fill { fill: currentColor; } .event-icon { line-height: 0; display: flex; align-items: center; justify-content: center; border-radius: 25%; width: 16px; height: 16px; } .icon-wrap { display: contents; line-height: 0; } .icon-wrap > * { align-self: center; } .glyph-size { position: relative; overflow: clip; border-radius: 2.5px; } .glyph-size > svg { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; } /* #endregion */ svg.expand-anim path { transition: var(--anim-duration-short); } svg.expand-anim.open path.upr { d: path("M3 3.5L7.4855 6.1913C7.80219 6.38131 8.19781 6.38131 8.5145 6.1913L13 3.5"); } svg.expand-anim.open path.lwr { d: path("M3 12.5L7.4855 9.8087C7.80219 9.61869 8.19781 9.61869 8.5145 9.8087L13 12.5"); } .spacer { display: flex; width: 100%; height: 0; } .spacer.small { height: var(--style-padding-small); } .brdr-btm { border-bottom: var(--border-regular); } .brdr-top { border-top: var(--border-regular); } .brdr-lead, .brdr-left { border-left: var(--border-regular); } .brdr-trail, .brdr-right { border-right: var(--border-regular); } .sqr-icon { width: var(--icon-size-small); height: var(--icon-size-small); border-radius: var(--style-border-radius); overflow: hidden; } .sqr-icon > svg { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; } .hstack { display: flex; flex-direction: row; flex-grow: 1; flex-wrap: nowrap; align-items: center; gap: 0; align-items: center; } .hstack.leading { justify-content: start; } .hstack.trailing { justify-content: end; } .hstack.between { justify-content: space-between; } .hstack.even > * { flex: 1 1 0; width: 0; } .hstack.tiny { gap: var(--style-padding-tiny); } .hstack.small { gap: var(--style-padding-small); } .hstack.medium, .hstack.med { gap: var(--style-padding-medium); } .hstack.center, .hstack.centre { justify-content: center; } .hstack.label { justify-content: space-between; gap: var(--style-padding-small); } .hstack.label .leading, .hstack.label .lead, .hstack.label .trailing, .hstack.label .trail { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: start; } .hstack.label .trailing, .hstack.label .trail { justify-content: end; } .vstack { display: flex; flex-direction: column; justify-content: center; align-items: center; } .vstack.leading { justify-content: start; } .vstack.trailing { justify-content: end; } .pad-top-small { padding-top: var(--style-padding-small); } .trn-graph-flex { display: flex; width: 100%; height: 100%; padding: var(--style-padding-large); padding-right: 0; } .trn-graph-flex .graph-container { width: 100%; height: 100%; } /* #region Page Not Found */ .ott-pnf { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; background-color: var(--color-back-2); } .ott-pnf-red { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; max-width: 480px; align-items: center; gap: var(--style-padding-xxlarge); border-bottom: 1px solid var(--color-text-6); } .ott-pnf-red .lead, .ott-pnf-red .trail { display: flex; flex-direction: column; align-items: start; gap: var(--style-padding-medium); } .ott-pnf-red p { font-size: 14px; text-wrap: balance; } .ott-pnf-red a { border: var(--border-regular); color: var(--color-text-4); } .ott-pnf-red a:hover, .ott-pnf-red button:hover { color: var(--color-text-2); } .ott-pnf-red .lead svg { margin-bottom: -0.5px; } svg.ott-pnf-sig .sig-arm-fill { fill: var(--color-text-4); } svg.ott-pnf-sig .sig-arm-stroke { stroke: var(--color-text-4); } svg.ott-pnf-sig .sig-arm-fill-bold { fill: var(--color-text-2); } svg.ott-pnf-sig .sig-arm { transform-origin: 75% 20%; transition-duration: 400ms; transition-delay: 80ms; transition-property: transform; transition-timing-function: cubic-bezier(0.19,0.00,0.90,0.39); transform: rotateZ(0deg); } svg.ott-pnf-sig.sig-off .sig-arm { transform: rotateZ(43deg); transition-duration: 800ms; transition-delay: 80ms; transition-property: transform; transition-timing-function: cubic-bezier(0.25,0.10,0.42,1.13); } /* #endregion */ /* #region Error Message */ .ott-err { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; padding: var(--style-padding-xlarge); max-width: 100%; overflow: hidden; } .ott-err * { white-space: normal; text-wrap: wrap; } .ott-err-cont { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: var(--style-padding-medium); max-width: 100%; min-width: 0; flex-grow: 1; flex-shrink: 1; } .ott-err-cont .lead, .ott-err-cont .trail { display: flex; flex-direction: column; align-items: center; gap: var(--style-padding-medium); flex-grow: 1; } .ott-err-cont .message { background-color: var(--color-back-2); padding: var(--style-padding-small); border-radius: var(--style-border-radius); border: 1px solid var(--color-back-4); min-width: 240px; } .ott-err-cont aside { overflow: hidden; } .ott-err-cont button { padding: 0 var(--style-padding-tiny); border: var(--border-regular); } .ott-err-cont button * { color: var(--color-text-4); } .ott-err-cont button:hover * { color: var(--color-text-2); } svg.ott-err-sign { width: auto; } svg.ott-err-sign .sign-fill { fill: var(--color-text-4); } svg.ott-err-sign .sign-stroke { stroke: var(--color-text-4); } svg.ott-err-sign .ott-err-light { animation: ott-err-blink 800ms step-start infinite; } svg.ott-err-sign .ott-err-light .sign-fill { fill: var(--color-text-1); } @keyframes ott-err-blink { 50% { opacity: 0; } } /* #endregion */ /* #region Generic Labels */ .gen-lbl-pl { border-radius: var(--style-border-radius); min-height: var(--style-label-height); min-width: var(--style-label-height); text-align: center; align-items: center; display: flex; justify-content: center; } .gen-lbl-pl.plat { background-color: var(--platform-label-background); color: #000; border: 1px solid var(--style-background-accent-thin); font-weight: 700; } .gen-lbl-pl.line { background-color: var(--linecode-label-background); border: 1px solid var(--style-background-accent-thin); color: #fff; font-weight: 600; } /* #endregion */ /* #region Header Generics */ header:has(> .lead, > .center), .hlabel:has(> .lead, > .center) { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } header > .lead, .hlabel > .lead { flex-grow: 1; } header > .lead, header > .center, header > .trail, .hlabel > .lead, .hlabel > .center, .hlabel > .trail { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--style-padding-small); } /* #endregion */ /* #region Generic Popover */ .generic-popover { box-shadow: var(--popover-shadow); } .generic-popover.background { background-color: var(--style-background-quarternary); border: var(--border-regular); border-radius: var(--style-border-radius); } .generic-popover.padding { padding: var(--style-padding-medium); } .generic-popover.margin-horizontal { margin-left: var(--style-padding-medium); margin-right: var(--style-padding-medium); } .generic-popover.margin-vertical { margin-top: var(--style-padding-tiny); margin-bottom: var(--style-padding-tiny); } .generic-popover.radius { border-radius: var(--style-border-radius-tiny); } /* #endregion */ /* #region Icon Button */ button.icon-button { height: var(--style-label-height); width: var(--style-label-height); background-color: var(--style-background-accent-thin); border-radius: var(--style-border-radius-tiny); display: flex; justify-content: center; align-items: center; position: relative; transition-duration: var(--anim-duration-short); } button.icon-button:hover { background-color: var(--style-background-accent-regular); } button.icon-button svg * { transition-duration: var(--anim-duration-short); } button.icon-button:hover svg .icon-stroke { stroke: var(--style-text-primary); } button.icon-button:hover svg .icon-fill { fill: var(--style-text-primary); } button.icon-button.clear { background-color: transparent; padding: 0; border: 0; } button.icon-button.clear:hover { background-color: var(--style-background-accent-thin); } button.icon-button.tiny-width { width: var(--icon-size-tiny); } button.icon-button.small-width { width: var(--icon-size-small); } button.icon-button.regular-width { width: var(--icon-size-regular); } button.icon-button.large-width { width: var(--icon-size-large); } button.icon-button.xlarge-width { width: var(--icon-size-xlarge); } button.icon-button.xxlarge-width { width: var(--icon-size-xxlarge); } button.icon-button.xxxlarge-width { width: var(--icon-size-xxxlarge); } /* #endregion */ .password-container { display: flex; border: var(--border-regular); border-radius: var(--style-border-radius); justify-content: space-between; } .password-container input.text { outline: none; border: none; } /* #password container */ /* #region Dynamic Button Gradients */ button.icon-button.dynamic svg { z-index: 2; } button.icon-button.dynamic:hover svg * { fill: white; } button.icon-button.dynamic::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: var(--style-border-radius-tiny); opacity: 0; transition-duration: var(--anim-duration-short); background: linear-gradient(45deg, #07e4a2, #c374e0, #07cc91, #8b6aec, #37c3f2); background-size: 1000% 1000%; animation: DynamicGradientBackground 3.5s ease infinite; z-index: 0; } button.icon-button.dynamic:hover::before { opacity: 1; } @keyframes DynamicGradientBackground { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* #endregion */ /* #endregion */ /* #region Expander */ .expander { display: flex; flex-direction: row; align-items: center; } .expander-icon { transform: rotate(90deg); transition-duration: var(--anim-duration-short); } .expander-icon.expanded { transform: rotate(180deg); } /* #endregion */ /* #region Dynamic Filter Editor */ .dynamic-filter-editor-wrap { margin-top: var(--style-padding-small); } .dynamic-filter-editor { min-width: 300px; position: relative; background-color: transparent; box-shadow: var(--popover-shadow); display: flex; flex-direction: column; justify-content: stretch; flex-wrap: nowrap; padding: var(--style-padding-tiny); gap: var(--style-padding-tiny); border-radius: var(--style-border-radius-tiny); background: linear-gradient(45deg, #07e4a2, #c374e0, #07cc91, #8b6aec, #37c3f2); background: linear-gradient(45deg, rgba(7, 228, 162, 0.5), rgba(195, 116, 224, 0.5), rgba(7, 204, 145, 0.5), rgba(138, 106, 236, 0.5), rgba(55, 195, 242, 0.5)); background-size: 1000% 1000%; animation: DynamicGradientBackground 24s ease infinite; backdrop-filter: blur(12px); } .dynamic-filter-editor .dynamic-filter-title { padding: var(--style-padding-tiny) 0; text-align: center; position: relative; } .dynamic-filter-editor .dynamic-filter-title h2 { color: var(--style-text-primary); font-size: var(--font-size-heading); font-weight: 400; } .dynamic-filter-editor .dynamic-filter-title button.close-button { position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; background-color: transparent !important; } .dynamic-filter-editor .dynamic-filter-title button.close-button svg .icon-stroke { stroke: var(--style-text-primary); } .dynamic-filter-editor section.dynamic-filter-section { background-color: var(--style-background-tertiary); padding: var(--style-padding-small); border-radius: var(--style-padding-tiny); transition-duration: var(--anim-duration-ultrashort); cursor: pointer; /* position: relative; */ } .dynamic-filter-editor section.dynamic-filter-section:first-child { /* border-top-left-radius: 3px; border-top-right-radius: 3px; */ } .dynamic-filter-editor section.dynamic-filter-section:last-child { /* border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; */ } .dynamic-filter-editor section.dynamic-filter-section:hover { background-color: var(--style-background-quarternary); } .dynamic-filter-editor section.dynamic-filter-section header { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: var(--style-padding-medium); } .dynamic-filter-editor section.dynamic-filter-section header .leading { display: flex; flex-direction: row; align-items: center; justify-content: start; gap: var(--style-padding-small); } .dynamic-filter-editor .filter-icon { background: linear-gradient(45deg, #07e4a2, #c374e0, #07cc91, #8b6aec, #37c3f2); background-size: 1000% 1000%; animation: DynamicGradientBackground 9s ease infinite; width: 24px; height: 24px; border-radius: var(--style-border-radius-tiny); display: flex; justify-content: center; align-items: center; } .dynamic-filter-editor .filter-icon svg path { fill: #fff; } /* #endregion */ /* #region Master Layout Detail */ /* #region Master Layout (Sidebar - Content) */ .ott-root { width: 100%; height: 100%; max-height: 100%; } .ott-content { display: flex; flex-direction: row; width: 100%; height: 100%; min-height: 100%; padding-right: env(safe-area-inset-right, 0px); padding-left: calc(env(safe-area-inset-left, 0px) + var(--style-padding-small)); align-items: stretch; } .ott-sidebar { display: block; position: relative; } .ott-detail { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; min-width: 0px; margin-top: var(--style-padding-small); margin-bottom: var(--style-padding-small); margin-right: var(--style-padding-small); border: 1px solid var(--style-background-accent-regular); border-radius: var(--style-border-radius); overflow: hidden; justify-content: stretch; align-items: stretch; display: flex; flex-direction: column; z-index: 1; } /* #endregion */ /* #region Main Area */ .ott-main { overflow: hidden; display: flex; flex-grow: 1; flex-shrink: 0; flex-direction: column; max-height: 100%; } .ott-main-area { overflow: hidden; display: flex; flex-direction: column; flex-grow: 1; flex-shrink: 1; background-color: var(--style-background-secondary); position: relative; } .light-mode .ott-main-area { background-color: var(--style-background-tertiary); } /* #endregion */ /* #region Toolbar + Filter */ .ott-main-header { display: flex; flex-direction: column; align-items: stretch; justify-content: start; } .ott-main-header { border-bottom: 1px solid var(--style-background-accent-regular); } .ott-main-header > *:nth-of-type(n+2) { border-top: var(--border-regular); } .ott-main-header.empty { position: absolute; top: 0; left: 0; width: 100%; background-color: transparent; border-bottom: none; z-index: 1; } /* #endregion */ /* #region Master Toolbar */ .ott-toolbar-area { flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: var(--style-padding-small) var(--style-padding-medium); height: calc(var(--style-label-height) + (var(--style-padding-small) * 2) ); max-height: calc(var(--style-label-height) + (var(--style-padding-small) * 2) ); } .ott-toolbar-leading, .ott-toolbar-trailing, .ott-toolbar-center { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: start; align-items: center; gap: var(--style-padding-small); flex: 1 1 0; width: 0; } .ott-toolbar-center { justify-content: center; overflow: visible; white-space: nowrap; } .ott-toolbar-center > * { white-space: nowrap; text-overflow: ellipsis; } .ott-toolbar-leading > *, .ott-toolbar-trailing > * { max-height: var(--style-label-height); } .ott-toolbar-trailing { justify-content: end; } .ott-toolbar-leading span.heading { font-size: var(--font-size-heading); color: var(--style-text-primary); transform: translateY(1px); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 500; } /* #endregion */ /* #region Master Sidebar Header */ .ott-nav-header { padding: 0; display: flex; justify-content: space-between; align-items: center; flex-direction: row; flex-wrap: nowrap; height: 40px; min-height: 40px; height: calc(var(--style-label-height) + (var(--style-padding-small) * 2)); min-height: calc(var(--style-label-height) + (var(--style-padding-small) * 2)); padding: 0 10px 0 var(--style-padding-small); } .ott-nav-header-leading { display: flex; justify-content: start; flex-shrink: 1; flex-grow: 0; max-width: 100%; padding-top: var(--style-padding-small); } .ott-nav-header-trailing { display: flex; height: var(--style-label-height); width: auto; justify-content: end; gap: var(--style-padding-tiny); flex-direction: row; } /* #endregion */ /* #region Environment Menu/Sign Out */ .env-main-button { padding: 6px 8px !important; } .env-main-title { display: flex; flex-direction: row; gap: var(--style-padding-small); padding: 0 !important; min-width: 0; flex-grow: 0 !important; flex-shrink: 1 !important; } .env-main-label { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; flex-shrink: 1; flex-grow: 0; } .env-main-ico { flex-shrink: 0; } #env-signout { display: contents; } /* #endregion */ /* #region Master Sidebar Navigation */ .ott-nav-content { position: relative; height: 100%; display: flex; flex-direction: column; flex-shrink: 0; padding-top: calc(var(--style-padding-tiny)); } .ott-nav-body { padding: 0 calc(var(--style-padding-small) - 10px) 0 var(--style-padding-small); padding: 0 var(--style-padding-small); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; flex-grow: 1; position: relative; } .ott-nav-logo { position: absolute; bottom: 0; left: 0; width: 100%; padding-left: var(--style-padding-medium); padding-bottom: var(--style-padding-medium); padding-top: var(--style-padding-small); padding-right: var(--style-padding-small); height: auto; line-height: 0; display: flex; flex-shrink: 1; flex-grow: 0; justify-content: center; align-items: center; gap: var(--style-padding-tiny); } .ott-nav-logo::before { content: ''; display: block; position: absolute; top: 0; left: var(--style-padding-small); right: var(--style-padding-small); height: 0.5px; background-color: var(--style-background-accent-regular); } .ott-nav-logo svg.logo { width: 100%; max-width: 105px; min-height: 18px; } .ott-nav-logo span.beta { font-size: var(--font-size-subtitle); } /* #endregion */ /* #region Master Content Area */ .ott-content-area { display: flex; flex-grow: 1; flex-shrink: 1; flex-direction: row; min-height: 0; min-width: 0; position: relative; } .ott-content-wrap, .ott-content-body { display: flex; flex-direction: column; flex-grow: 1; flex-shrink: 1; min-width: 0px; min-height: 0px; position: relative; } .ott-content-body { background-color: var(--style-background-secondary); overflow: hidden; container-type: inline-size; container-name: ott-content-container; } .ott-content-body.scroll-x { overflow-x: auto; height: auto; } .ott-content-body.scroll-y { overflow-y: auto; } .ott-content-body.padding { padding: var(--style-padding-large) } .ott-content-filters { } .ott-main-notification-wrap { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; z-index: 9999; display: flex; justify-content: center; align-items: center; padding: 0 0 var(--style-padding-medium); pointer-events: none; } .ott-main-notification-wrap:has(.ott-main-notification-content:empty) { display: none; } .ott-main-notification-content { background-color: green; max-width: 560px; /* width: 100%;/ */ display: flex; justify-content: center; pointer-events: all; padding: var(--style-padding-medium) var(--style-padding-large); background-color: var(--style-background-accent-thin); backdrop-filter: blur(18px); border-radius: var(--style-border-radius); border: var(--border-regular); } /* #endregion */ /* #endregion */ /* #region Tooltip */ .tooltip-container { position: relative; display: contents; } .tooltip-overlay { font-size: var(--font-size-small); padding: 2px 8px; border-radius: 3px; background-color: var(--style-background-primary); margin: var(--style-padding-small); text-align: center; } .tooltip { position: absolute; bottom: calc(100% + 2px); width: max-content; display: flex; height: auto; background-color: var(--style-background-primary); border: var(--border-regular); z-index: 10000; font-size: var(--font-size-small); padding: 2px 8px; border-radius: 3px; max-width: 160px; content-visibility: hidden; opacity: 0; transition-duration: var(--anim-duration-medium); transition-delay: 0s; transition-behavior: allow-discrete; text-align: left; pointer-events: none; } *:hover > .tooltip { content-visibility: visible; opacity: 1; transition-delay: 0.25s; transition-duration: var(--anim-duration-long); } .tooltip.anchor-top { bottom: calc(100% + var(--style-padding-tiny)); /* left: 0; */ left: 50%; transform: translateX(-50%); } .tooltip.anchor-bottom { top: calc(100% + var(--style-padding-medium)); bottom: initial; /* left: 0; */ left: 50%; transform: translateX(-50%); } .tooltip.anchor-leading { right: calc(100% + var(--style-padding-medium)); bottom: initial; top: 50%; transform: translateY(-50%); } .tooltip.anchor-trailing { left: calc(100% + var(--style-padding-medium)); bottom: initial; top: 50%; transform: translateY(-50%); } /* #endregion */ /* #region Environment Title / Menu */ .ott-env-nav { position: relative; padding: 0; } .ott-env-button { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: start; align-items: center; gap: var(--style-padding-small); font-size: var(--font-size-heading); padding: 6px var(--style-padding-small); border-radius: 6px; } .ott-env-button:hover { background-color: var(--style-background-accent-thin); } .ott-env-icon { width: var(--icon-size-small); height: var(--icon-size-small); border-radius: var(--style-border-radius); background-color: rgba(129, 129, 129, 0.553); /* overflow: hidden; */ } .ott-env-icon .env { font-size: var(--font-size-body); } .ott-env-button .expand { transform: rotate(180deg); } /* #endregion */ /* #region QuickGrid */ @scope (.des-tbl-srch-grid) to ([popover], [dialog]) { table.quickgrid { min-width: 100%; max-width: 100%; } table.quickgrid th { padding-top: var(--style-padding-tiny); padding-bottom: var(--style-padding-tiny); background-color: var(--style-background-tertiary); z-index: 1; position: relative; position: sticky; top: 0; } table.quickgrid th::after { width: 100%; height: 1px; background-color: var(--style-background-accent-regular); display: block; content: ''; position: absolute; bottom: 0; left: 0; } table.quickgrid td { padding-top: var(--style-padding-tiny) !important; padding-bottom: var(--style-padding-tiny) !important; } table.quickgrid tr { opacity: 1; transition-property: opacity; transition-duration: var(--anim-duration-medium); @starting-style { opacity: 0; } } table.quickgrid th.col-justify-right, table.quickgrid td.col-justify-right { text-align: right; } table.quickgrid .sort-indicator { background-image: none !important; -webkit-mask-image: url('data:image/svg+xml,') !important; mask-image: url('data:image/svg+xml,') !important; width: 8px; height: 8px; background-color: var(--style-text-secondary); transition-duration: var(--anim-duration-short); } table.quickgrid .col-sort-asc .sort-indicator { transform: scaleY(1) rotateZ(180deg) !important; } table.quickgrid button { padding-left: var(--style-padding-small); } table.quickgrid button:hover { background-color: var(--style-background-accent-thin) !important; } table.quickgrid.nowrap * { white-space: nowrap; text-overflow: ellipsis; } table.quickgrid.alternate tbody tr:nth-of-type(even) td { background-color: var(--style-background-timeline-alternate) !important; } table.quickgrid.size26 td, table.quickgrid.size-26 td { height: 26px; min-height: 26px; max-height: 26px; } table.quickgrid.size36 td, table.quickgrid.size-36 td { height: 36px; min-height: 36px; max-height: 36px; } table.quickgrid.separated td { border-bottom: 1px solid var(--style-background-accent-thin); } table.quickgrid > thead > tr > th.stretch, table.quickgrid > tbody > tr > td.stretch, table.quickgrid > thead > tr > th.grow, table.quickgrid > tbody > tr > td.grow { width: 100%; } table.quickgrid th.col-justify-end:has(button.col-title) button { flex-direction: row !important; justify-content: end; } table.quickgrid.on-hover tr:hover td { transition-property: background-color; transition-duration: var(--anim-duration-ultrashort); } table.quickgrid.on-hover tr:hover td { background-color: var(--style-background-accent-ultrathin); } table.quickgrid.wide-space th, table.quickgrid.wide-space td { padding-left: var(--style-padding-large) !important; padding-right: var(--style-padding-large) !important; } table.quickgrid th:first-child, table.quickgrid td:first-child { padding-left: var(--style-padding-large) !important; } table.quickgrid.wide-space th:first-child, table.quickgrid.wide-space td:first-child { padding-left: var(--style-padding-xxxlarge) !important; } table.quickgrid.wide-space th:last-child, table.quickgrid.wide-space td:last-child { padding-right: var(--style-padding-xxxlarge) !important; } table.quickgrid.hide-buttons td > button, table.quickgrid.hide-buttons td > a.button { opacity: 0; } table.quickgrid.hide-buttons tr:hover > td > button, table.quickgrid.hide-buttons tr:hover > td > a.button { opacity: 1; } table.quickgrid td.vehicle-left:first-child { padding-left: 0 !important; } } /* #endregion */ /* #region Inspector ------------------------------------------------------- */ /* #region Inspector Container */ .ott-content-inspector { position: relative; background-color: var(--style-background-tertiary); border-left: var(--border-regular); } .ott-content-inspector:not(.resizing){ transition: width var(--anim-duration-medium), max-width var(--anim-duration-medium), min-width var(--anim-duration-medium); } @media screen and (max-width: 960px) { .ott-content-inspector { position: absolute; right: 0; min-height: 100%; z-index: 200; } } /* .ott-content-inspector.hide-inspector { display: none; } */ .ott-content-inspector .ott-inspector-resize { position: absolute; width: 9px; height: 100%; max-height: 100%; top: 0; left: -3px; background-color: transparent; display: flex; flex-direction: column; cursor: col-resize; z-index: 9999; } .ott-content-inspector .ott-inspector-resize::after { content: ''; background-color: transparent; display: block; width: 100%; height: 100%; left: 3px; width: 2px; border-radius: 1px; position: absolute; transition-duration: var(--anim-duration-short); transition-delay: 0s; } .ott-content-inspector .ott-inspector-resize:hover::after { background-color: var(--style-background-accent-ultrathick); transition-delay: var(--anim-duration-short); } /* #endregion */ /* #region Inspector Body */ aside.ott-inspector { overflow-x: hidden; overflow-y: auto; height: 100%; max-height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--style-padding-medium); padding-bottom: var(--style-padding-medium); } aside.ott-inspector.no-scroll { overflow-y: hidden; } /* #endregion */ /* #region Inspector Section (New) */ .insp-sect { padding: 0 var(--style-padding-medium); } .insp-sect > .content { padding: var(--style-padding-medium); background-color: var(--style-background-quarternary); border-radius: var(--style-border-radius-tiny); display: flex; flex-direction: column; gap: var(--style-padding-small); } .insp-sect > .content > header { min-height: var(--style-label-height); } .insp-sect > .content > header h3 { font-size: var(--font-size-subheading); font-weight: 500; color: var(--style-text-secondary); } /* #endregion */ /* #region Inspector Generic List */ ul.insp-gen-list { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; } ul.insp-gen-list > li { padding: var(--style-padding-small); border-radius: var(--style-border-radius); } ul.insp-gen-list > li:nth-of-type(odd) { background-color: var(--style-background-accent-ultrathin); } ul.insp-gen-list > .center, .hlabel > .center { justify-content: center; flex-grow: 1; background-color: orange; } /* #endregion */ /* #region Inspector-Section */ .ott-inspector-section { padding: var(--style-padding-xlarge) var(--style-padding-medium); padding: 0 var(--style-padding-medium); display: flex; flex-direction: column; gap: var(--style-padding-small); } .ott-inspector-section:has(.content:empty) { display: none; } .ott-inspector-section .content { padding: 0; } .ott-inspector-section:not(.header, .no-border, .formation, .full-width) .content { padding: var(--style-padding-small); border-radius: var(--style-border-radius); border-radius: var(--style-border-radius-tiny); background-color: var(--style-background-accent-ultrathin); gap: var(--style-padding-small); overflow: hidden; } .ott-inspector-section.no-background, .ott-inspector-section.no-background .content { background-color: transparent; } .ott-inspector-section.gap-large { margin-bottom: var(--style-padding-large); } .ott-inspector-section .content.no-padding { padding: 0; } .ott-inspector-section.full-width { padding-left: 0; padding-right: 0; } .ott-inspector-section.no-border { border-bottom: none; } .ott-inspector-section.header { padding-top: 0; } .ott-inspector-section.formation { padding-bottom: 0; margin-bottom: var(--style-padding-medium); } .ott-inspector-section .section-header { margin-bottom: var(--style-padding-small); } .ott-inspector-section button.expand-button { padding: 3px var(--style-padding-small) 2px; display: flex; align-content: center; gap: var(--style-padding-tiny); } .ott-inspector-section h2 { font-size: var(--font-size-body); color: var(--style-text-tertiary); } .ott-inspector-section footer, .ott-inspector-section .footer { color: var(--style-text-tertiary); font-size: var(--font-size-small); padding: 0 var(--style-padding-small); margin-bottom: var(--style-padding-large); } .ott-inspector-section footer *, .ott-inspector-section .footer * { font-size: var(--font-size-small); } /* #endregion */ /* #region Inspector Simple Header Section */ .ott-inspector-section.simple-header { margin-top: var(--style-padding-medium); } .ott-inspector-section.simple-header .simple-header { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--style-padding-medium) var(--style-padding-small); } .ott-inspector-section.simple-header .simple-header .icon { margin-bottom: var(--style-padding-small); } .ott-inspector-section.simple-header h1, .ott-inspector-section.simple-header h2 { text-wrap: pretty; } .ott-inspector-section.simple-header h1, .ott-inspector-section.simple-header input.input-title { color: var(--style-text-secondary); font-size: var(--font-size-title3); } .ott-inspector-section.simple-header h2, .ott-inspector-section.simple-header input.input-subtitle { color: var(--style-text-tertiary); font-size: var(--font-size-subtitle); } .ott-inspector-section.simple-header .description { padding-top: var(--style-padding-medium); display: flex; width: 100%; text-align: center; } .ott-inspector-section.simple-header .description p { min-height: 1rem; } .ott-inspector-section.simple-header textarea.input-description { background: none; resize: none; width: 100%; box-sizing: border-box; border: none; color: var(--style-text-tertiary); text-align: center; } .ott-inspector-section.simple-header .description .full-width { width: 100%; } .ott-inspector-section.simple-header .title { display: flex; } .ott-inspector-section.simple-header input.input-title, .ott-inspector-section.simple-header input.input-subtitle{ text-align: center; border: none; background: none; } .ott-inspector-section.simple-header input.input-title:focus-visible { border: none; } .ott-inspector-section.simple-header .edit-icon { display: none; } .ott-inspector-section.simple-header .title:hover .edit-icon, .ott-inspector-section.simple-header .subtitle:hover .edit-icon, .ott-inspector-section.simple-header .description:hover .edit-icon { display: flex; } .ott-inspector-section.simple-header .title .relative-wrapper, .ott-inspector-section.simple-header .subtitle .relative-wrapper, .ott-inspector-section.simple-header .description .relative-wrapper { position: relative; } .ott-inspector-section.simple-header .description .relative-wrapper { display: inline-block; justify-self: center; margin: 0 auto; } .ott-inspector-section.simple-header .edit-icon { display: none; position: absolute; top: -10px; right: -15px; } .ott-inspector-section.simple-header .edit-icon svg { fill: var(--style-text-secondary); width: 15px; } /* #endregion */ /* #region Inspector Table */ .inspector-table-content { display: flex; flex-direction: column; gap: var(--style-padding-medium); } .inspector-table-content h2 { font-size: var(--font-size-subtitle); } .inspector-table { display: grid; grid-template-columns: auto 1fr; gap: var(--style-padding-small) var(--style-padding-medium); } .inspector-table-cell { display: contents; } .inspector-table-cell .label, .inspector-table-cell .value { overflow: hidden; } .inspector-table-cell .label { color: var(--style-text-tertiary); padding-left: var(--style-padding-tiny); white-space: nowrap; display: flex; flex-direction: row; justify-content: start; align-items: center; } .inspector-table-cell .value { /* height: var(--style-label-height); */ display: flex; flex-direction: row; justify-content: start; align-items: center; text-wrap: nowrap; text-overflow: ellipsis; gap: var(--style-padding-tiny); } .inspector-table-cell span { overflow: hidden; text-overflow: ellipsis; display: block; } /* #endregion */ /* #region Inspector Bottom Picker */ .bound-explore-inspector-spacer { position: absolute; top: 0; left: 0; width: 100%; height: 36px; } .bound-explore-inspector-content { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--style-padding-medium); } .bound-explore-inspector-picker { position: sticky; left: 0; top: 0; width: 100%; border-bottom: var(--border-regular); /* background-color: var(--style-background-accent-thin); */ -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); z-index: 100; padding: var(--style-padding-small) var(--style-padding-medium) ; } .bound-explore-inspector-picker .content { background-color: var(--style-background-accent-control); border-radius: var(--style-border-radius); } /* #endregion */ /* #endregion */ /* #region Generic Date Time Hour Minute Grids ----------------------------- */ /* #region Generic Date Grid */ .generic-date-wrap { display: flex; flex-direction: column; gap: var(--style-padding-medium); } .generic-date-list { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--style-padding-small); } .generic-date-scroll { width: auto; height: auto; max-width: 100%; overflow-x: auto; overflow-y: hidden; position: relative; display: flex; justify-content: center; } table.generic-date-grid { border-spacing: 1.5px; table-layout: fixed; border-collapse: separate; } table.generic-date-grid * { font-size: var(--font-size-small); } table.generic-date-grid td { position: relative; } table.generic-date-grid td.date { background-color: rgba(255, 255, 255, 0.1); outline: 1px solid rgba(255, 255, 255, 0.15); outline-offset: -1px; border-radius: 1.5px; transition-duration: var(--anim-duration-medium); position: relative; border: none; padding: 0; } table.generic-date-grid td.date.selected { background-color: orange; } .grid-schedule-item { display: flex; justify-content: space-between; } li.grid-schedule-item .key.cancel::after, table.generic-date-grid td.date.cancel::after { content: ''; display: block; width: 100%; height: 100%; top: 0; left: 0; border: 1px solid transparent; position: absolute; box-sizing: border-box; border-radius: 1.5px; } li.grid-schedule-item .key.base, table.generic-date-grid td.date.base { background-color: var(--date-base-color); filter: brightness(1) ; } li.grid-schedule-item .key.overlay, table.generic-date-grid td.date.overlay { background-color: var(--date-overlay-color); filter: brightness(2.2) saturate(1.2) hue-rotate(5deg) sepia(0.5); } li.grid-schedule-item .key.cancel, table.generic-date-grid:not(.hovering) td.date.cancel { background-color: color-mix(in srgb, var(--date-cancel-color), black 65%); } li.grid-schedule-item .key.summary { background-color: var(--style-background-accent-thin); border: 1px solid var(--style-background-accent-thick); } li.grid-schedule-item .key.cancel::after, table.generic-date-grid:not(.hovering) td.date.cancel::after { border-color: color-mix(in srgb, var(--date-cancel-color), rgba(84, 84, 84, 0.585)); filter: brightness(1.5) saturate(2); } table.generic-date-grid.hovering td.date.overlay, table.generic-date-grid.hovering td.date.base, table.generic-date-grid.hovering td.date.cancel { filter: none; background-color: color-mix(in srgb, var(--date-cancel-color), rgba(84, 84, 84, 0.9)); } table.generic-date-grid td.date.hover-overlay, table.generic-date-grid td.date.hover-base, table.generic-date-grid td.date.hover-cancel { background-color: var(--date-hover-color) !important; filter: brightness(2) saturate(1.3) !important; } table.generic-date-grid td.row-label span { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); } /* #region ADDED from OTHER CSS */ li.grid-schedule-item { transition-duration: var(--anim-duration-short); border-radius: var(--style-border-radius); padding: var(--style-padding-small); } li.grid-schedule-item:hover { background-color: var(--style-background-accent-thin); } li.grid-schedule-item .leading { justify-content: start; } li.grid-schedule-item .key { background-color: var(--style-background-accent-ultrathin); outline: 1px solid var(--style-background-accent-ultrathin); outline-offset: -1px; width: 12px; height: 12px; border-radius: 3px; position: relative; } li.grid-schedule-item .key::after { border-radius: 3px !important; } /* #endregion */ /* #region Generic Date */ .generic-date-wrap { display: flex; flex-direction: column; gap: var(--style-padding-medium); } .generic-date-scroll { width: auto; height: auto; max-width: 100%; overflow-x: auto; overflow-y: hidden; position: relative; } table.generic-date-grid { border-spacing: 1.5px; table-layout: fixed; border-collapse: separate; } table.generic-date-grid * { font-size: var(--font-size-small); } table.generic-date-grid td { position: relative; } table.generic-date-grid td.date { background-color: var(--style-background-accent-thin); outline: 0.5px solid var(--style-background-accent-ultrathin); outline-offset: -1px; border-radius: 1.5px; } table.generic-date-grid td.row-label span { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); } /* #endregion */ ul.grid-schedule-list { display: flex; flex-direction: column; /* gap: var(--style-padding-tiny); */ } ul.grid-schedule-list hr { height: 1px; background-color: var(--style-background-accent-regular); margin: var(--style-padding-tiny) 0; } li.grid-schedule-item, li.grid-schedule-item .leading { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--style-padding-small); } /* #endregion */ /* #region Generic HourMin Grid */ .timing-hour-min-grid-wrap { display: flex; flex-direction: column; gap: var(--style-padding-small); } .timing-hour-min-grid-wrap hr { display: block; width: 100%; height: 1px; content: ''; background-color: var(--style-background-accent-thin); } .generic-hour-min-grid-wrap { display: flex; justify-content: center; } .generic-hour-min-grid { border-spacing: 1.5px; width: max-content; max-width: 100%; border-collapse: separate; } .generic-hour-min-grid.size-tiny { border-spacing: 1.5px; } .generic-hour-min-grid td.row-label { position: relative; width: 20px; } .generic-hour-min-grid td.row-label span { position: absolute; right: var(--style-padding-tiny); line-height: 1; font-size: var(--font-size-small); color: var(--style-text-tertiary); top: 50%; transform: translateY(-50%); } .generic-hour-min-grid td.min { border-radius: 1px; background-color: var(--style-background-accent-thin); outline: 0.5px solid var(--style-background-accent-ultrathin); outline-offset: -1px; transition-duration: var(--anim-duration-short); } .generic-hour-min-grid tr.highlight-hour td.min:not(.active) { /* background-color: var(--style-background-accent-regular); outline-color: var(--style-background-accent-thin); */ opacity: 0.6; } .generic-hour-min-grid td.min.highlight-min:not(.active) { /* background-color: var(--style-background-accent-regular); outline-color: var(--style-background-accent-thin); */ opacity: 0.6; } .generic-hour-min-grid td.min.active { background-color: orange; } .generic-hour-min-grid td.min.hover-active { filter: var(--active-filter); } .generic-hour-min-grid td.min.hover-inactive { /* filter: grayscale(0.7) brightness(0.7); opacity: 0.8; */ filter: var(--inactive-filter); } .generic-hour-min-grid td.min-label { position: relative; } .generic-hour-min-grid td.min-label span { position: absolute; left: 50%; top: 2px; line-height: 1; font-size: var(--font-size-small); color: var(--style-text-tertiary); transform: translateX(-50%); } /* #endregion */ /* #region Hour Min Grid Controls */ .hour-min-grid-controls { display: flex; flex-direction: row; justify-content: space-between; } /* #endregion */ /* #region Hour Min Grid Group Item List */ .hour-min-group-button { padding: var(--style-padding-small); cursor: pointer; transition-duration: var(--anim-duration-short); border-radius: var(--style-border-radius); } .hour-min-group-item { transition-duration: var(--anim-duration-short); border-radius: var(--style-border-radius); padding: var(--style-padding-small); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--style-padding-small); } .hour-min-group-item:hover, .hour-min-group-button:hover { background-color: var(--style-background-accent-thin); } .hour-min-group-item .leading, .hour-min-group-item .trailing { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--style-padding-small); } .hour-min-group-item .key { outline: 1px solid var(--style-background-accent-ultrathin); outline-offset: -1px; width: 12px; height: 12px; border-radius: 3px; position: relative; } /* #endregion */ /* #endregion */ /* #region Brand Icon Group */ .brand-icon-group { display: flex; flex-direction: row; position: relative; } .brand-icon-group .brand-icon.overflow-brand { overflow: hidden; position: relative; background-color: var(--style-background-primary); } .brand-icon-group .brand-icon.overflow-brand figure { transform: scale(1.4); filter: blur(5px) saturate(0.7); } .brand-icon { margin: 0; border-radius: var(--style-border-radius); overflow: hidden; } .brand-icon.xsmall { width: var(--icon-size-tiny); height: var(--icon-size-tiny); border-radius: 2px; } .brand-icon.small { width: var(--icon-size-small); height: var(--icon-size-small); border-radius: 4px; } .brand-icon.regular { width: var(--icon-size-regular); height: var(--icon-size-regular); } .brand-icon.large { width: var(--icon-size-large); height: var(--icon-size-large); } .brand-icon.xlarge { width: var(--icon-size-xlarge); height: var(--icon-size-xlarge); } .brand-icon.xxlarge { width: var(--icon-size-xxlarge) !important; height: var(--icon-size-xxlarge) !important; border-radius: var(--style-border-radius-tiny) !important; } .brand-icon.xxxlarge { width: var(--icon-size-xxxlarge) !important; height: var(--icon-size-xxxlarge) !important; border-radius: var(--style-border-radius-tiny) !important; } /* .brand-icon { margin: 0; border-radius: var(--style-border-radius); width: var(--icon-size-regular); height: var(--icon-size-regular); overflow: hidden; } .brand-icon.xsmall { width: var(--icon-size-tiny); height: var(--icon-size-tiny); border-radius: 2px; } .brand-icon.small { width: var(--icon-size-small); height: var(--icon-size-small); border-radius: 3px; } .brand-icon.regular { width: var(--icon-size-regular); height: var(--icon-size-regular); } .brand-icon.large { width: var(--icon-size-large); height: var(--icon-size-large); } .brand-icon.xlarge { width: var(--icon-size-xlarge); height: var(--icon-size-xlarge); } .brand-icon.xlarge { width: var(--icon-size-xxxlarge); height: var(--icon-size-xxxlarge); } */ .brand-icon-group .overflow-count { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transform: translateX(-4%); } .brand-icon-group .overflow-count span { letter-spacing: -0.06em; color: var(--style-text-primary); } .brand-icon-group.small .overflow-count span { font-size: var(--font-size-tiny); } .brand-icon-group.large .overflow-count span { font-size: var(--font-size-heading); } .brand-icon-group.xlarge .overflow-count span { font-size: var(--font-size-subtitle); } .brand-icon-group > * { transition-duration: var(--anim-duration-short); z-index: 1; } .brand-icon-group.small > .brand-icon:nth-of-type(n+2), .brand-icon-group.small > .overflow-brand { margin-left: calc(var(--icon-size-small) * var(--icon-overlap)); } .brand-icon-group.regular > .brand-icon:nth-of-type(n+2), .brand-icon-group.regular > .overflow-brand { margin-left: calc(var(--icon-size-regular) * var(--icon-overlap)); } .brand-icon-group.large > .brand-icon:nth-of-type(n+2), .brand-icon-group.large > .overflow-brand { margin-left: calc(var(--icon-size-large) * var(--icon-overlap)); } .brand-icon-group.xlarge > .brand-icon:nth-of-type(n+2), .brand-icon-group.xlarge > .overflow-brand { margin-left: calc(var(--icon-size-xlarge) * var(--icon-overlap)); } .brand-icon-group.animated.small > *:hover { transform: translateX(calc(var(--icon-size-small) * var(--icon-overlap) - 2px)); } .brand-icon-group.animated.regular > *:hover { transform: translateX(calc(var(--icon-size-regular) * var(--icon-overlap) - 2px)); } .brand-icon-group.animated.large > *:hover { transform: translateX(calc(var(--icon-size-large) * var(--icon-overlap) - 2px)); } .brand-icon-group.animated.xlarge > *:hover { transform: translateX(calc(var(--icon-size-xlarge) * var(--icon-overlap) - 2px)); } .brand-icon-group > :last-child:hover { transform: translateX(0) !important; } .brand-icon-group > .brand-icon, .brand-icon-group > .overflow-brand { outline: 2px solid var(--style-background-secondary); } .brand-icon-group.small > .brand-icon, .brand-icon-group.small > .overflow-brand { outline-width: 2px; } .brand-icon-group.background-primary > * { outline-color: var(--style-background-primary) !important; } .brand-icon-group.background-tertiary > * { outline-color: var(--style-background-tertiary) !important; } .brand-icon-group.background-quarternary > * { outline-color: var(--style-background-quarternary) !important; } .brand-icon-group.no-border > * { outline: none; } /* #endregion */ /* #region Article -------------------------------------------------------*/ /* #region Article Fonts */ .article h1.x-large { font-size: var(--font-size-title); } .article h1 { font-size: var(--font-size-title2); } .article h2 { font-size: var(--font-size-title3); } .article h3 { font-size: var(--font-size-subtitle); } .article h4 { font-size: var(--font-size-heading); } .article h5 { font-size: var(--font-size-heading); } .article h6 { font-size: var(--font-size-body); } .article p { font-size: var(--font-size-body); line-height: 1.5; color: var(--style-text-tertiary); } .article p strong { font-size: var(--font-size-body); color: var(--style-text-primary); } .article p:has(code) { line-height: 1.8; } .article p a { font-size: inherit; font-weight: inherit; text-decoration: none; color: var(--style-text-primary); } .article hr { display: block; content:''; position: relative; width: 100%; height: 1.5px; background-color: var(--style-background-accent-regular); } /* #endregion */ /* #region Article Body */ article.article { padding: 0 var(--style-padding-large) var(--style-padding-large); margin-bottom: var(--style-padding-xlarge); display: flex; flex-direction: column; justify-content: start; align-items: stretch; align-self: center; max-width: 640px; width: 100%; } article.article.no-padding { padding: 0; } article.article header, article.article section { padding-bottom: var(--style-padding-xxlarge); padding-top: var(--style-padding-xxlarge); border-bottom: 1px solid var(--style-background-accent-regular); position: relative; } article.article header:last-child, article.article section:last-child { border-bottom: none; } /* #endregion */ /* #region Article Title */ header.article-title { margin-top: var(--style-padding-xlarge); } header.article-title .heading { font-size: var(--font-size-subtitle); margin-top: var(--style-padding-small); letter-spacing: -0.01em; } /* #endregion */ /* #region Article Section */ section.article-section>* { margin-top: var(--style-padding-medium); margin-bottom: var(--style-padding-medium); } section.article-section>*:first-child { margin-top: 0; } section.article-section>*:last-child { margin-bottom: 0; } section.article-section h1, section.article-section h2 { margin-top: var(--style-padding-large); } /* #endregion */ /* #region Article Code */ .article code { background-color: var(--style-background-primary); padding: var(--style-padding-small); border-radius: var(--style-border-radius); border: 1px solid var(--style-background-accent-thick); display: block; color: var(--style-text-secondary); font-family: var(--font-mono); font-weight: 500; } .article code>p { color: var(--style-text-secondary); font-family: var(--font-mono); font-weight: 500; font-size: var(--font-size-paragraph); line-height: 1; margin: var(--style-padding-small) 0; } .article code> :first-child { margin-top: 0; } .article code> :last-child { margin-bottom: 0; } .article p>code { display: inline-block; padding: 2px var(--style-padding-tiny); margin: 0; font-family: var(--font-mono); font-weight: 500; line-height: 1.2; } /* #endregion */ /* #region Article Blockquote */ .article blockquote { margin: 0; position: relative; padding-left: var(--style-padding-medium); padding-top: var(--style-padding-tiny); padding-bottom: var(--style-padding-tiny); } .article blockquote>* { margin-top: var(--style-padding-small); margin-bottom: var(--style-padding-small); } .article blockquote>*:first-child { margin-top: 0; } .article blockquote>*:last-child { margin-bottom: 0; } .article blockquote::before { position: absolute; content: ''; top: 0; left: 0; bottom: 0; width: 3px; border-radius: 1.5px; display: block; background-color: var(--style-background-accent-thick); } /* #endregion */ article.article ul { list-style-type: disc; } /* #endregion Article -------------------------------------------------------*/ /* #region Control Item Label */ .control-label { display: flex; flex-direction: row; justify-content:space-between; flex-wrap: nowrap; align-items: center; gap: var(--style-padding-medium); } .control-label.padding { padding-top: var(--style-padding-small); padding-bottom: var(--style-padding-small); } .control-label .label-content { display: flex; flex-direction: column; align-items: start; justify-content: start; gap: var(--style-padding-tiny); flex-grow: 1; } .control-label .label-content .label-description { color: var(--style-text-tertiary); line-height: 1.5; } .control-label .control-content { display: flex; flex-direction: row; align-items: center; justify-content: center; } /* #endregion */ /* #region Control Item */ .control-item { display: flex; } /* #endregion */ /* #region Control Item Checkbox */ .label-switch { height: var(--icon-size-small); } .control-item input[type="checkbox"] { appearance: none; border: none; height: var(--icon-size-small); width: calc(var(--icon-size-small) * 1.5); position: relative; flex-shrink: 0; } .control-item input[type="checkbox"]::before, .control-item input[type="checkbox"]::after { content: ''; display: block; position: absolute; transition-duration: var(--anim-duration-medium); } .control-item input[type="checkbox"]::before { height: var(--icon-size-small); width: calc(var(--icon-size-small) * 1.5); background-color: var(--style-background-accent-regular); top: 0; left: 0; border-radius: calc(var(--icon-size-small) / 2); } .control-item input[type="checkbox"]:checked:before { background-color: var(--color-accent); } .control-item input[type="checkbox"]::after { height: calc(var(--icon-size-small) - 6px); width: calc(var(--icon-size-small) - 6px); top: 3px; left: 3px; background-color: var(--color-accent-text); border-radius: 50%; box-shadow: lch(0 0 0 / 0.22) 0px 0px 5px, lch(0 0 0 / 0.12) 0px 2px 4px, lch(0 0 0 / 0.10) 0px 1px 2px; } .control-item input[type="checkbox"]:checked:after { transform: translateX(calc(var(--icon-size-small) / 2)); } .control-item input[type="checkbox"]:disabled { opacity: 0.25; } /* #endregion */ /* #region Input Text */ .input-item.full-width { width: 100%; } .input-content { background-color: transparent; padding: var(--style-padding-tiny); width: 100%; border-radius: var(--style-border-radius); color: inherit; border: 1px solid transparent; transition: var(--anim-duration-short); width: 100%; } .input-content.outline { background-color: var(--style-background-accent-ultrathin); border: 1px solid var(--style-background-accent-thin); } .input-content:focus-within { border-color: var(--style-background-accent-regular); background-color: var(--style-background-accent-thin); } .input-content input { background-color: transparent; border: none; color: inherit; outline: none; appearance: none; caret-color: var(--color-accent); width: 100%; font-size: var(--font-size-body); } .input-content input:focus, .input-content input:active { outline: none; appearance: none; border: none; } .input-content input { padding: var(--style-padding-tiny); width: 100%; } /* #endregion */ /* #region Generic List */ .input-item.full-width { width: 100%; } .input-content { background-color: transparent; padding: var(--style-padding-tiny); width: 100%; border-radius: var(--style-border-radius); color: inherit; border: 1px solid transparent; transition: var(--anim-duration-short); width: 100%; } .input-content.outline { background-color: var(--style-background-accent-ultrathin); border: 1px solid var(--style-background-accent-thin); } .input-content:focus-within { border-color: var(--style-background-accent-regular); background-color: var(--style-background-accent-thin); } .input-content input { background-color: transparent; border: none; color: inherit; outline: none; appearance: none; caret-color: var(--color-accent); width: 100%; } .input-content input { padding: var(--style-padding-tiny); width: 100%; } /* #endregion */ /* #region Generic List */ .generic-list { display: flex; width: 100%; } .generic-list.padding { padding: var(--style-padding-medium); } .generic-list ul { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; } .generic-list-item { padding: var(--style-padding-small); border-radius: var(--style-border-radius); position: relative; } .generic-list-item .item-content { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--style-padding-small); justify-content: space-between; width: 100%; } .generic-list-item .item-content .trailing { display: flex; flex-direction: row; align-items: center; gap: var(--style-padding-small); } .generic-list-item .item-content:has(.label-switch) { align-items: start; } .generic-list-item.control-item .trailing { flex-grow: 1; display: flex; justify-content: end; flex-direction: row; flex-wrap: nowrap; } .generic-list-item.control-item .trailing .input-text { text-align: right; width: 100%; height: var(--style-label-height); cursor: text; padding: 0; } .generic-list-item.control-item .trailing .input-text-area { text-align: right; width: 100%; height: var(--style-label-height)*3; cursor: text; resize: none; padding: 0; } .generic-list-item.control-item .trailing input:disabled, .generic-list-item.control-item .trailing textarea:disabled { cursor: default; } .generic-list.alternating ul { gap: var(--style-padding-tiny); } .generic-list.alternating .generic-list-item:nth-of-type(2n-1) { background-color: var(--style-background-accent-thin); } .generic-list.bordered .generic-list-item { border-bottom: var(--border-regular); border-radius: 0; } .generic-list.bordered .generic-list-item:last-of-type { border-bottom: none; } .generic-list.plain { background-color: transparent; } .generic-list.bordered .generic-list-item.control-item { padding-top: calc(var(--style-padding-medium) * 1); padding-bottom: calc(var(--style-padding-medium) * 1); } .generic-list.bordered .generic-list-item.control-item:first-child { padding-top: var(--style-padding-small); } .generic-list.bordered .generic-list-item.control-item:last-child { padding-bottom: var(--style-padding-small); } /* #endregion */ /* #region Journey Table */ .journey-table-section { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--style-padding-small); } .journey-table { display: grid; grid-template-columns: [marker] var(--icon-size-tiny) [location] 1fr [platform] auto [linecode] auto [arr] auto [dep] auto; align-items: center; width: 100%; } .journey-table.mode-loadings { grid-template-columns: [marker] var(--icon-size-tiny) [location] 1fr [platform] repeat(7, 30px); } .journey-table-row { display: contents; } .journey-table-row > * { height: 100%; font-weight: 500; } .journey-table-row.header .cell { padding: 0 var(--style-padding-small) var(--style-padding-small); color: var(--style-text-tertiary); } .journey-table .location { text-align: left; display: flex; flex-shrink: 1; flex-grow: 0; min-width: 0; } .journey-table .plat, .journey-table .line { text-align: center; } .journey-table-row.header .time { text-align: center; } .journey-table .routed-timings { display: contents; } /* #region Alternating Color */ .journey-table-row:nth-of-type(2n+2) .cell { background-color: var(--style-background-accent-ultrathin); } .journey-table-row:nth-of-type(2n+2) .cell:first-of-type { border-top-left-radius: var(--style-border-radius); border-bottom-left-radius: var(--style-border-radius); overflow: hidden; } .journey-table-row:nth-of-type(2n+2) .cell:last-of-type { border-top-right-radius: var(--style-border-radius); border-bottom-right-radius: var(--style-border-radius); overflow: hidden; } /* #endregion */ .journey-table .cell.marker, .journey-table .cell.section-marker { width: var(--icon-size-tiny); min-width: var(--icon-size-tiny); position: relative; overflow: hidden; } .journey-table .cell.marker svg, .journey-table .cell.section-marker svg { position: absolute; top: calc(50% - 100px); } .journey-table .cell.marker svg.fill, .journey-table .cell.marker svg .fill { fill: var(--style-text-secondary); } .journey-table .cell.marker svg.stroke, .journey-table .cell.marker svg .stroke { stroke: var(--style-text-secondary); } .journey-table .cell:not(.marker) { padding: var(--style-padding-small); padding-right: 0; } .journey-table .cell:not(.marker):last-of-type { padding: var(--style-padding-small); } .journey-table .cell.location { width: 100%; } .journey-table .cell.location .loc-label { display: block; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; position: relative; } .journey-table .cell.loading { padding-left: 0; padding-right: 0; text-align: center; } .journey-table .cell.adjustments { grid-column: 2 / -1; display: flex; justify-content: end; gap: var(--style-padding-small); } .journey-table .cell.adjustments .adj-item { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--style-padding-tiny); padding-left: var(--style-padding-small); } .journey-table .cell.adjustments .adj-item span { color: var(--style-text-quarternary); font-style: normal; font-size: var(--font-size-small); } .journey-table .cell.adjustments .adj-item .adj-time { color: var(--style-text-secondary); } .journey-table .cell.time span.sec { color: var(--style-text-tertiary); font-weight: 500; } .journey-table-row.pass { color: var(--style-text-secondary) !important; font-style: italic; } .journey-table-row.pass .cell.time.arr, .journey-table-row.pass .cell.time.arr * { color: transparent; } .journey-table-row.routedPass { color: var(--style-text-quarternary) !important; font-style: italic; } .journey-table-row.routedPass .cell.time.arr, .journey-table-row.routedPass .cell.time.arr * { color: transparent; } .journey-table-row.routedPass .cell.time.dep * { color: rgba(80, 80, 80, 1.0) } .journey-table-row.section-summary .section-summary { grid-column: span 5; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; padding-left: var(--style-padding-medium); color: var(--style-text-tertiary) !important; font-style: italic; } .journey-table-row.section-change .section-change { grid-column: span 5; display: flex; flex-direction: column; flex-wrap: nowrap; /* gap: var(--style-padding-tiny); */ align-items: start; justify-content: center; padding-top: 0 !important; padding-bottom: 0 !important; } .journey-table-row.section-change .section-change * { font-size: var(--font-size-small); /* color: var(--style-text-tertiary); */ } .journey-table-row.section-change .section-change .section-change-part { display: flex; flex-direction: row; align-items: center; width: 100%; gap: var(--style-padding-tiny); padding: var(--style-padding-small) var(--style-padding-tiny); margin-left: calc(var(--style-padding-tiny) * -1); border-bottom: 1px solid var(--style-background-accent-thin); } .journey-table-row.section-change .section-change .section-change-part:last-of-type { /* background-color: var(--style-background-accent-ultrathin); border-radius: var(--style-border-radius); */ border-bottom: none; } /* #endregion */ /* #region Schedule Inspector ---------------------------------------------- */ /* #region Schedule ID Table */ /* table.identifier-table { width: max-content; } table.identifier-table th, table.identifier-table td { text-align: left; padding-right: var(--style-padding-large); } table.identifier-table th { position: relative; color: var(--style-text-tertiary); font-size: var(--font-size-small); } table.identifier-table td { color: var(--style-text-primary); font-size: var(--font-size-heading); } */ /* #endregion */ /* #region Headline Property Grid */ /* #endregion */ .schedule-title-container { container-type: inline-size; position: relative; } .schedule-background { width: 100%; height: 72px; background-color: transparent; position: absolute; top: 0; left: 0; right: 0; z-index: 0; } .schedule-background::before { display: block; content: ''; position: absolute; bottom: 100%; width: 100%; height: 120px; background-color: inherit; } .schedule-title { display: flex; flex-direction: row; justify-content: space-between; gap: var(--style-padding-small); flex-direction: column; z-index: 2; position: relative; margin: var(--style-padding-medium) var(--style-padding-medium) var(--style-padding-small); padding: var(--style-padding-small); border-radius: var(--style-border-radius-small); z-index: 1; } .schedule-title::before, .schedule-title::after { content: ''; position: absolute; display: block; background-color: var(--style-background-secondary); border-radius: var(--style-border-radius); top: 0; left: 0; width: 100%; height: 100%; z-index: -2; } .schedule-title::after { z-index: -1; background-color: var(--style-background-accent-thin); } .schedule-title hr { display: block; height: 0.5px; background-color: var(--style-background-accent-regular); } .schedule-identifiers { display: flex; flex-shrink: 0; flex-grow: 0; } .schedule-identifiers * { font-size: var(--font-size-subtitle); font-weight: 500; color: var(--style-text-secondary); } .schedule-details { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: end; gap: var(--style-padding-small); } .schedule-details * { font-size: var(--font-size-heading); font-weight: 500; } .schedule-details .route { display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 2px } .schedule-details .route .origin, .schedule-details .route .dest { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .traction-table { display: grid; grid-template-columns: auto auto auto auto; gap: var(--style-padding-tiny); } .traction-table > * { display: flex; flex-direction: row; align-items: center; gap: var(--style-padding-tiny); } .schedule-arr-dep { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--style-padding-small); } .property-grid { display: flex; position: relative; z-index: 2; } .property-grid.margin { margin: var(--style-padding-tiny) var(--style-padding-medium); margin: 0 var(--style-padding-medium); } .headline-property-grid { display: grid; flex-grow: 1; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--style-padding-small); } .headline-property-grid .property-item { display: flex; background-color: var(--style-background-quarternary); border-radius: var(--style-border-radius); flex-direction: column; justify-content: start; padding: var(--style-padding-tiny) var(--style-padding-small); } .headline-property-grid .property-item .label * { font-size: var(--font-size-small); color: var(--style-text-tertiary); } .headline-property-grid .property-item .value * { font-size: var(--font-size-body); font-weight: 500; } /* #endregion */ /* #region User Table */ .user-table { display: flex; flex-direction: column; gap: var(--style-padding-tiny); } .user-table .user-select { border-radius: var(--style-border-radius); border: 1px solid transparent; padding: var(--style-padding-small); } .user-table .user-select:hover { background-color: var(--style-background-accent-thin); } .user-table .user-select.selected { background-color: var(--style-background-accent-regular); border: var(--border-regular); } .user-table-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: var(--style-padding-small); } .section-header { padding-bottom: var(--style-padding-small); } .permission-subtext { padding-bottom: var(--style-padding-tiny); font-size: var(--font-size-small); color: var(--style-text-tertiary); } /* #endregion */ /* #region Diagnostics */ .diagnostic-message-table.selected { background-color: var(--style-background-accent-regular); border: var(--border-regular); } /* #endregion */ /* #region Date Picker ----------------------------------------------------------------------- */ /* #region Date Picker - Today */ .date-picker-today { display: flex; width: 100%; flex-direction: row; flex-wrap: nowrap; gap: var(--style-padding-tiny); /* border-top: var(--border-regular); padding-top: var(--style-padding-small); */ padding-bottom: var(--style-padding-small); padding-left: 0 !important; padding-right: 0 !important; } .date-picker-today > * { flex: 1 1 0; padding: 2px var(--style-padding-tiny); border: var(--border-regular); } /* #endregion */ /* #region Date Picker - Month */ .date-picker-month-wrap { display: table; padding-top: var(--style-padding-medium); padding-bottom: var(--style-padding-tiny); } .date-picker-month-wrap.background { border: var(--border-regular); border-radius: var(--style-border-radius); background-color: var(--style-background-accent-ultrathin); } .date-picker-month-wrap.padding { padding-left: var(--style-padding-medium); padding-right: var(--style-padding-medium); } table.date-picker-month { font-size: var(--font-size-body); text-align: center; font-feature-settings: 'tnum' 1; border-collapse: collapse; width: 224px; max-width: 224px; } table.date-picker-month th { border-bottom: 1px solid var(--style-background-accent-thin); } table.date-picker-month th, table.date-picker-month td { width: 28px; height: 28px; border-radius: var(--style-border-radius); position: relative; font-weight: 500; } table.date-picker-month th *, table.date-picker-month td * { z-index: 2; position: relative; } table.date-picker-month td::before { content: ''; position: absolute; top: 2px; bottom: 2px; left: 2px; right: 2px; transition-duration: var(--anim-duration-ultrashort); transition-timing-function: var(--anim-bounce); border-radius: 50%; z-index: 1; transform: scale(0.7); border: 1.5px solid transparent; } table.date-picker-month td.weekend { color: var(--style-text-tertiary); } table.date-picker-month td.other-month { color: var(--style-text-quarternary); } table.date-picker-month td.selected { color: var(--color-accent-text); } table.date-picker-month td.selected::before { background-color: var(--color-accent); transform: scale(1); } table.date-picker-month td.enabled:hover { color: var(--color-accent-text); } table.date-picker-month td.enabled:hover::before { background-color: var(--color-accent-hover); transform: scale(1); } table.date-picker-month td.disabled { color: var(--style-text-quarternary); opacity: 0.4; } table.date-picker-month th.week-no *, table.date-picker-month td.week-no * { font-size: var(--font-size-small); font-style: italic; font-weight: 600; color: var(--style-text-quarternary) !important; padding-left: var(--style-padding-medium); } table.date-picker-month td.week-no.selectable { background-color: green; } /* Highlighting for today */ table.date-picker-month td.is-today:not(.selected)::before { transform: scale(1); border-color: var(--style-background-accent-thick); border-style: dotted; } /* Highlighting for first of multi-select */ table.date-picker-month td.first-of-selection::before { transform: scale(1); border-color: var(--color-accent); border-style: dashed; } table.date-picker-month td.range.selected:not(.first-of-range, .last-of-range)::before { left: 0; right: 0; border-radius: 0; } table.date-picker-month td.range.selected.first-of-range::before { border-top-right-radius: 0; border-bottom-right-radius: 0; right: 0; } table.date-picker-month td.range.selected.last-of-range::before { border-top-left-radius: 0; border-bottom-left-radius: 0; left: 0; } table.date-picker-month td.range.selected.weekday-last:not(.first-of-range, .last-of-range)::before { border-top-right-radius: var(--style-border-radius); border-bottom-right-radius: var(--style-border-radius); } table.date-picker-month td.range.selected.weekday-first:not(.first-of-range, .last-of-range)::before { border-top-left-radius: var(--style-border-radius); border-bottom-left-radius: var(--style-border-radius); } table.date-picker-month td.range.selected.other-month { opacity: 0.4; } table.date-picker-month td.range.selected.first-of-range.last-of-range::before { border-radius: 50%; left: 2px; right: 2px; } .date-picker-month-header { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; margin-bottom: var(--style-padding-small); } .date-picker-month-header .month-controls { display: flex; flex-wrap: nowrap; flex-direction: row; flex-shrink: 0; } .date-picker-month-header .month-button svg { stroke: var(--style-text-secondary); } .date-picker-month-header .month-button.disabled svg { stroke: var(--style-text-quarternary); } .date-picker-month-header .month-button { padding: 0; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; } .date-picker-month-header .month-button.disabled { background-color: transparent !important; cursor: default; } /* #endregion */ /* #region Date Picker - NR Period */ .nr-period-grid-wrap, .nr-timetable-period-wrap { display: block; width: max-content; overflow-y: scroll; max-height: 240px; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; } .nr-period-grid-wrap::-webkit-scrollbar, .nr-timetable-period-wrap::-webkit-scrollbar { display: none; } .nr-period-grid-wrap.background, .nr-timetable-period-wrap.background { background-color: var(--style-background-accent-ultrathin); padding: var(--style-padding-medium); border: var(--border-regular); border-radius: var(--style-border-radius); } .nr-timetable-period-wrap.padding { padding-top: var(--style-padding-medium); padding-bottom: var(--style-padding-medium); } .nr-timetable-period-wrap { width: 224px; } /* #region NR Period Only */ .nr-period-section { margin-top: var(--style-padding-large); } .nr-period-section:first-child { margin-top: 0; } .nr-period-grid-wrap.padding .nr-period-section:first-child { margin-top: var(--style-padding-medium); } .nr-period-grid-wrap.padding .nr-period-section:last-child { margin-bottom: var(--style-padding-medium); } .nr-period-header { margin-bottom: var(--style-padding-small); } .nr-period-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; width: 224px; max-width: 224px; gap: var(--style-padding-small); } .nr-period-item { padding: 2px var(--style-padding-tiny); border: 1.5px solid var(--style-background-accent-regular); border-radius: var(--style-border-radius); display: flex; justify-content: center; transition: var(--anim-duration-ultrashort); cursor: pointer; } .nr-period-item.selectable:hover { background-color: var(--style-background-accent-thin); } .nr-period-item.selected { background-color: var(--style-background-accent-regular); border-color: var(--color-accent); cursor: default; } /* #endregion */ /* #region NR Timetable Only */ .nr-timetable-section { display: flex; flex-direction: column; gap: var(--style-padding-small); margin-bottom: var(--style-padding-medium); } .nr-timetable-section .selectable { padding: 2px var(--style-padding-tiny); border: 1.5px solid var(--style-background-accent-regular); border-radius: var(--style-border-radius); display: flex; justify-content: center; transition: var(--anim-duration-ultrashort); cursor: pointer; } .nr-timetable-section .selectable:hover { background-color: var(--style-background-accent-thin); } .nr-timetable-section .selectable.selected { background-color: var(--style-background-accent-regular); border-color: var(--color-accent); cursor: default; } .nr-timetable-section .tt-title { width: 100%; } .nr-timetable-section .tt-periods { display: grid; grid-template-columns: 1fr 1fr; gap: var(--style-padding-small); } /* #endregion */ /* #endregion */ /* #region Date Picker - Horizontal */ .calendar-short-day-picker-wrap { display: table; flex-direction: column; gap: var(--style-padding-small); flex-shrink: 1; } .calendar-short-day-picker-wrap.background { padding: var(--style-padding-small); background-color: var(--style-background-accent-ultrathin); border: var(--border-regular); border-radius: var(--style-border-radius); } .calendar-short-day-picker-wrap.padding { margin-top: var(--style-padding-medium); margin-bottom: var(--style-padding-medium); } .calendar-short-day-picker-wrap .header { padding-bottom: var(--style-padding-small); margin-bottom: var(--style-padding-small); border-bottom: var(--border-regular); } .horizontal-date-grid { display: flex; flex-direction: row; flex-wrap: nowrap; flex-grow: 0; flex-shrink: 1; width: auto; } .horizontal-date-item { display: flex; width: 0; max-width: calc(var(--date-picker-size) + 2px); min-width: calc(var(--date-picker-size) + 2px); flex: 1 1 0; justify-content: center; position: relative; } .horizontal-date-item.disabled * { color: var(--style-text-quarternary); } .horizontal-date-item .icon { display: flex; flex-direction: column; justify-content: start; align-items: center; position: relative; width: 100%; gap: var(--style-padding-tiny); } .horizontal-date-item .icon .day-wrap { width: 100%; height: auto; position: relative; display: flex; justify-content: center; align-items: center; } .horizontal-date-item .icon .day-wrap * { z-index: 2; font-size: var(--font-size-small); } .horizontal-date-item .icon .date-icon { background-color: transparent; width: var(--date-picker-size); height: var(--date-picker-size); display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 1.5px solid transparent; transition-duration: var(--anim-duration-ultrashort); } .horizontal-date-item.first-selected-date .icon .date-icon { background-color: var(--style-background-accent-thin); border-color: var(--color-accent); } .horizontal-date-item:hover:not(.disabled) .icon .date-icon { background-color: var(--style-background-accent-regular); } .horizontal-date-item .icon .day-wrap::before { content: ''; display: block; position: absolute; top:0; left: 0; right: 0; bottom: 0; z-index: 0; } .horizontal-date-item.selected.selected * { color: var(--color-accent-text); } .horizontal-date-item.selected.first-selection .icon .day-wrap::before, .horizontal-date-item.selected.mid-selection .icon .day-wrap::before, .horizontal-date-item.selected.last-selection .icon .day-wrap::before { background-color: var(--style-background-accent-regular); border-top: 1.5px solid var(--color-accent); border-bottom: 1.5px solid var(--color-accent); } .horizontal-date-item.selected.first-selection .icon .day-wrap::before { left: calc((100% - var(--date-picker-size)) / 2); border-top-left-radius: calc(var(--date-picker-size) / 2); border-bottom-left-radius: calc(var(--date-picker-size) / 2); border-left: 1.5px solid var(--color-accent); } .horizontal-date-item.selected.last-selection .icon .day-wrap::before { right: calc((100% - var(--date-picker-size)) / 2); border-top-right-radius: calc(var(--date-picker-size) / 2); border-bottom-right-radius: calc(var(--date-picker-size) / 2); border-right: 1.5px solid var(--color-accent); } /* #endregion */ /* #region Date Range Picker - Wrapper */ .date-master-picker-container { display: flex; } .date-master-picker-container.margin-vertical { margin-top: var(--style-padding-tiny); margin-bottom: var(--style-padding-tiny); } .date-master-picker { width: max-content; flex-grow: 0; flex-shrink: 1; } .date-master-picker.background { background-color: var(--style-background-quarternary); border: var(--border-regular); border-radius: var(--style-border-radius); } .date-master-picker > * { padding-left: var(--style-padding-medium); padding-right: var(--style-padding-medium); border-bottom: var(--border-regular); } .date-master-picker > *:last-child { border-bottom: none; } .date-master-picker .picker-header { padding-top: var(--style-padding-medium); padding-bottom: var(--style-padding-medium); display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--style-padding-small); } .date-picker-selection { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .date-picker-selection .selection { flex-shrink: 1; flex-grow: 0; display: block; display: flex; min-width: 0; } .date-picker-selection .selection .date-range { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thing123 { display: block; } .date-picker-selection button.clear-selection { width: 24px; height: 24px; padding: 0; display: flex; flex-grow: 0; flex-shrink: 0; justify-content: center; align-items: center; transition: var(--anim-duration-short); } .date-picker-selection button.clear-selection.disabled { transform: scale(0.7); opacity: 0; } /* #endregion */ /* #region Dual Month Range Picker */ .dual-month-picker { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: start; } /* #endregion */ /* #endregion -------------------------------------------------------------------------------- */ /* #region Transport Filtering ------------------------------------- */ /* #region Filter Toolbar */ .filter-toolbar { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: start; justify-content: space-between; padding: var(--style-padding-small) var(--style-padding-medium); } .filter-edit-wrap { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--style-padding-tiny); } .filter-edit-wrap button { width: auto; height: var(--style-label-height); display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--style-padding-tiny); border: 1px solid transparent; transition-duration: var(--anim-duration-ultrashort); background-color: var(--style-background-accent-thin); padding: 0; } .filter-edit-wrap button:hover { background-color: var(--style-background-accent-regular); } .filter-edit-wrap .generic-filter-clear button { padding-left: var(--style-padding-small); padding-right: var(--style-padding-small); } .generic-filter-button svg .icon-stroke { stroke: var(--style-text-secondary); } .generic-filter-button.hide-label { padding: 0; width: var(--style-label-height); height: var(--style-label-height); } .generic-filter-button.hide-label .label { display: none; } .generic-filter-item .filter-type.dynamic { transition-duration: var(--anim-duration-short); transition-property: all; padding-left: var(--style-padding-tiny); gap: var(--style-padding-tiny); position: relative; } .generic-filter-item .filter-type.dynamic::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(70deg, #c374e070, #8b6aec70 , #37c3f270, #07cc9170); opacity: 0; transition-duration: var(--anim-duration-short); z-index: 1; border-top-left-radius: var(--style-border-radius); border-bottom-left-radius: var(--style-border-radius); } .generic-filter-item .filter-type.dynamic > * { z-index: 2; } .generic-filter-item .filter-type.dynamic:hover { color: #e0e0e0; } .generic-filter-item .filter-type.dynamic:hover::before { opacity: 1; } .generic-filter-item .filter-type.dynamic svg path { transition-duration: var(--anim-duration-short); } .generic-filter-item .filter-type.dynamic:hover svg path { fill: #fff !important; } .generic-filter-item .filter-delete .generic-filter-item .filter-delete svg * { transition-duration: var(--anim-duration-ultrashort); } .generic-filter-item .filter-delete:hover { background-color: rgb(186, 28, 28) !important; } .generic-filter-item .filter-delete:hover svg * { stroke: white !important; } /* #endregion */ /* #region Headcode Filter */ .generic-filter-item.headcode input { width: 70px; text-transform: uppercase; max-width: 100%; } .generic-filter-item.headcode input::placeholder { text-transform: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .generic-filter-item.headcode .filter-value { width: 84px; } /* #endregion */ /* #region Diagram Search Filter */ .generic-filter-item.diagramsearch input { width: 70px; text-transform: uppercase; max-width: 100%; } .generic-filter-item.diagramsearch input::placeholder { text-transform: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .generic-filter-item.diagramsearch .filter-value { width: 84px; } /* #endregion */ /* #endregion */ /* #region Control - Dropdown */ .basic-dropdown-selection { position: relative; } .bd-selection-content.display-normal { background-color: var(--style-background-accent-ultrathin); border-radius: var(--style-border-radius); border: var(--border-regular); padding: var(--style-padding-small); min-width: 160px; max-width: 100%; max-width: 400px; display: block; } .bd-selection-content.display-normal:hover { background-color: var(--style-background-accent-thin); } .bd-selection-content.display-filter { height: var(--style-label-height); padding-left: var(--style-padding-small); padding-right: var(--style-padding-small); min-width: 80px; max-width: 240px; display: block; background-color: var(--style-background-accent-thin); } .bd-selection-content.display-filter:hover { background-color: var(--style-background-accent-regular); } .bd-selection-body { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: stretch; width: 100%; max-width: 100%; min-width: 100%; height: 100%; } .bd-selection-clear { flex-grow: 0; flex-shrink: 0; display: flex; flex-direction: row; align-items: center; transition-timing-function: ease-in-out; transition-duration: var(--anim-duration-ultrashort); transform: scale(1); } .bd-selection-clear.disable-clear { transform: scale(0); } .bd-selection-value { flex-grow: 1; flex-shrink: 0; display: flex; flex-direction: row; align-items: center; justify-content: start; height: 100%; } .bd-selection-value > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .basic-dropdown-popover { min-width: 180px; max-width: 360px; margin-top: var(--style-padding-tiny); max-height: 360px; position: relative; width: 100%; display: flex; } .basic-dropdown-popover * { font-size: var(--font-size-body); } .basic-dropdown-items { border-radius: var(--style-border-radius-tiny); background-color: var(--style-background-tertiary); border: var(--border-regular); box-shadow: var(--popover-shadow); width: 100%; flex-grow: 1; display: flex; flex-direction: column; flex-wrap: nowrap; } .bd-search-container { padding: 2px var(--style-padding-small) 0; } .bd-search-input { width: 100%; min-width: 180px; padding: var(--style-padding-small) 0 var(--style-padding-small); border-bottom: var(--border-regular); } .bd-items-scroll { overflow-x: hidden; overflow-y: scroll; } .bd-items-container { padding: var(--style-padding-tiny); padding-top: 0; height: 100%; } .bd-items-table { width: 100%; margin-top: var(--style-padding-tiny); } .bd-items-table * { box-sizing: border-box; } .bd-items-table tr { height: var(--style-label-height); border-radius: var(--style-border-radius); } .bd-items-table td { padding-right: var(--style-padding-small); height: 28px; } .bd-items-table tr:hover td { background-color: var(--style-background-accent-thin); } .bd-items-table td > * { vertical-align: middle; } .bd-items-table td:first-child { border-left: 0; padding-left: var(--style-padding-tiny); border-top-left-radius: var(--style-border-radius); border-bottom-left-radius: var(--style-border-radius); } .bd-items-table td:last-child { border-right: 0; padding-right: var(--style-padding-tiny); border-top-right-radius: var(--style-border-radius); border-bottom-right-radius: var(--style-border-radius); } .bd-items-table td.bd-check { width: 14px; } .bd-items-table td.bd-check:last-child { padding-left: var(--style-padding-small); } .bd-items-table td.bd-icon { padding-top: var(--style-padding-tiny); padding-bottom: var(--style-padding-tiny); width: 20px; } .bd-items-table td.bd-auto { position: relative; } .bd-items-table td.bd-auto .bd-overflow-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; } .bd-items-table td.bd-auto .bd-overflow-wrap .bd-overflow { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* #endregion */ /* #region Loading Basic (Headcode) */ .load-full-space { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; } .load-basic-headcode { display: flex; flex-direction: row; flex-wrap: nowrap; justify-self:center; align-self:center; gap: var(--style-padding-small); } .load-basic-headcode .hcode { background-color: var(--style-background-accent-regular); width: 24px; height: 40px; border-radius: var(--style-border-radius); animation: loading-headcode 2s linear infinite; } .load-basic-headcode .hcode:nth-of-type(2) { animation-delay: 0.5s; } .load-basic-headcode .hcode:nth-of-type(3) { animation-delay: 1s; } .load-basic-headcode .hcode:nth-of-type(4) { animation-delay: 1.5s; } @keyframes loading-headcode { 0% { opacity: 0.2; } 20% { opacity: 1; } 40% { opacity: 0.2; } 100% { opacity: 0.2;} } /* #endregion */ /* #region Loading Graphic */ .loading-container { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; } .loading-untimed { align-self: center; justify-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity: 1; animation-name: loading-route-fade; animation-duration: 1s; } .loading-untimed span.loading { font-size: var(--font-size-subtitle); } #BaseNetwork > path { fill: var(--style-background-accent-regular); } #AnimLoadingNetwork { } #AnimLoadingNetwork > path { stroke-dasharray: 20 350; stroke-dashoffset: 240; animation-name: loading-route-anim; animation-iteration-count: infinite; animation-duration: 14s; stroke: var(--style-text-secondary); stroke-width: 0.75; } #route-1 { animation-delay: -1s; } #route-2 { animation-delay: 0s; } #route-3 { animation-delay: 1s; } #route-4 { animation-delay: 2s; } #route-5 { animation-delay: 3s; } #route-6 { animation-delay: 4s; } #route-7 { animation-delay: 5s; } #route-8 { animation-delay: 6s; } #route-9 { animation-delay: 7s; } #route-10 { animation-delay: 8s; } #route-11 { animation-delay: 9s; } #route-12 { animation-delay: 10s; } @keyframes loading-route-anim { from { stroke-dashoffset: 80; } to { stroke-dashoffset: -280; } } @keyframes loading-route-fade { from { opacity: 0; } to { opacity: 1; } } /* #endregion */ /* #region Vehicle Graphic */ /* #region Vehicle Basic Controls */ .vehicle-graphic-container.debug { background-color: green; } .vehicle-graphic-container.dark-mode { filter: brightness(0.75); } .vehicle-graphic-container.clip { overflow-x: hidden; } .vehicle-graphic-container.scroll { overflow-x: scroll; } .vehicle-graphic-container.hide-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .vehicle-graphic-container.hide-scrollbar::-webkit-scrollbar { display: none; } .vehicle-graphic-container .veh-part { position: relative; flex-shrink: 1; flex-grow: 0; line-height: 0; display: flex; align-items: end; } .vehicle-graphic-container .veh-part.flip-veh { transform: scaleX(-1); } .vehicle-graphic-container img.vehicle { width: auto; position: relative; z-index: 2; } .vehicle-graphic-container.small svg { width: auto !important; } /* #endregion */ /* #region Align Right */ .vehicle-graphic-container.align-right .formation { /* justify-content: end; */ flex-direction: row-reverse; } /* #endregion */ .formation, .formation-container, .vehicle-container { display: flex; flex-grow: 1; } .vehicle-graphic-container, .vehicle-graphic-container .veh-part, .vehicle-graphic-container .veh-part img { user-select: none !important; -webkit-user-select: none !important; } .light-mode .vehicle-graphic-container .veh-part img { filter: saturate(0.9) contrast(0.9) brightness(1.1); } .vehicle-graphic-container.vehicle-padding .formation-container { padding-left: var(--style-padding-small); padding-right: var(--style-padding-small); } .vehicle-graphic-container.flip { transform: rotateY(180deg); } .vehicle-graphic-container.upper-detail .formation { padding-top: 18px; } .vehicle-graphic-container.upper-detail .veh-part::before { width: 100%; height: 18px; display: flex; align-items: center; justify-content: center; position: absolute; bottom: 100%; left: 0; content: attr(data-veh-desc); line-height: 1.4; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--font-size-small); } /* #region Pantograph Anim */ .vehicle-graphic-container .veh-part .pan { position: absolute; z-index: 1; } .vehicle-graphic-container .veh-part .pan.reverse { transform: scaleX(-1) } .vehicle-graphic-container .veh-part .pan-container { position: relative; /* background-color: green; */ } .vehicle-graphic-container svg.pan-spark { position: absolute; top: -80%; left: -20%; /* animation: name duration timing-function delay iteration-count direction fill-mode; */ opacity: 0; } .vehicle-graphic-container svg.pan-spark.raised { animation: pansparkanim 1s linear 0.8s 1 forwards; } @keyframes pansparkanim { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } } .vehicle-graphic-container svg.pan-spark .pan-spark {} .vehicle-graphic-container svg.pantograph { position: absolute; bottom: 0; left: 0; } .vehicle-graphic-container svg.pantograph * { transition-duration: 1.5s; transition-timing-function: ease-in-out; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.4); } .vehicle-graphic-container svg.pantograph .pan-lower-group { transform-origin: 16.6666% 93.75%; transform: rotate(-3deg); } .vehicle-graphic-container svg.pantograph .pan-upper-group { transform-origin: 96.66666667% 93.75%; transform: rotate(6deg); } .vehicle-graphic-container svg.pantograph .pan-contact { transform-origin: 16.6666% 93.75%; transform: rotate(-3deg) } .vehicle-graphic-container svg.pantograph.raised .pan-lower-group, .vehicle-graphic-container svg.pantograph.raised .pan-contact { transform: rotate(-12deg); } .vehicle-graphic-container svg.pantograph.raised .pan-upper-group { transform: rotate(24deg); } /* #endregion */ /* #endregion */ /* #region Edit View Form */ .edit-view-form { margin: var(--anim-duration-medium); border-bottom: var(--border-regular); display: flex; width: 100%; } .edit-view-content { padding: var(--style-padding-medium); display: flex; flex-direction: column; flex-grow: 1; width: 100%; } .edit-view-body { background-color: var(--style-background-accent-thin); border-radius: var(--style-border-radius); flex-grow: 1; } .edit-view-properties { padding: var(--style-padding-medium); display: flex; flex-direction: row; gap: var(--style-padding-tiny); } .edit-view-properties input.view-name { font-size: var(--font-size-subtitle); width: auto; flex-grow: 1; } /* #endregion */ /* #region TO BE SORTED */ .schedule-count { min-width: 45px; text-align-last:end; } .plan-stage-icon { position: relative; display: flex; justify-content: center; align-items: center; overflow: visible; } .hover-popover { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .hover-popover .hover-content { position: absolute; display: none; width: max-content; max-width: 360px; z-index: 9999; top: calc(100% + var(--style-padding-tiny)); left: 0; background-color: var(--style-background-quarternary); padding: var(--style-padding-small); border-radius: var(--style-border-radius); word-wrap: normal; } .hover-popover:hover .hover-content { display: block; } /* #endregion */ /* #region Timeline */ :root, * { --timeline-leg-height: 20px; --timeline-row-padding: 8px; --timeline-row-height: 36px; --timeline-row-inner-height: 28px; } /* #region Timeline Master */ .timeline-body { width: 100%; min-width: 100%; max-width: 100%; height: 100%; min-height: 100%; max-height: 100%; overflow-x: scroll; overflow-y: auto; position: relative; } .timeline { display: block; } .timeline-row { height: var(--timeline-row-height); position: relative; background-color: var(--style-background-secondary); } /* #endregion */ /* #region Timeline Scale Bar */ .timeline-scale { width: 100%; height: var(--style-label-height); position: relative; position: sticky; top: 0; z-index: 5; background-color: var(--style-background-secondary); border-bottom: var(--border-regular); } .timeline-scale.bottom { border-top: var(--border-regular); border-bottom: none; } .timeline-scale .scale-hour { position: absolute; top: 0; height: 100%; } .timeline-scale .scale-hour span.hour { position: absolute; left: 0; top: 50%; transform: translateX(-50%) translateY(-50%); } /* #endregion */ /* #region Timeline Key */ .timeline-key { position: absolute; backdrop-filter: blur(24px); background-color: var(--style-background-accent-thin); border-radius: var(--style-border-radius); border: var(--border-regular); z-index: 9999; display: flex; flex-direction: column; gap: var(--style-padding-tiny); padding: var(--style-padding-tiny) var(--style-padding-small); transition: var(--anim-duration-medium); } .timeline-key.pinned { pointer-events: none; } .timeline-key hr { background-color: var(--style-background-accent-regular); display: block; height: 1px; } .timeline-key.anchor-top-trailing { top: var(--style-padding-large); right: var(--style-padding-large); } .timeline-key.anchor-top-leading { top: var(--style-padding-large); left: var(--style-padding-medium); } .timeline-key.anchor-bottom-trailing { bottom: var(--style-padding-medium); right: var(--style-padding-large); } .timeline-key.anchor-bottom-leading { bottom: var(--style-padding-medium); left: var(--style-padding-small); } .timeline-key .key-label { display: flex; flex-direction: row; gap: var(--style-padding-small); justify-content: start; align-items: center; } .timeline-key .key-options { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; gap: var(--style-padding-tiny); padding: 2px 0; pointer-events: all; } .timeline-key .key-options .pin { display: block; line-height: 0; opacity: 0.4; } .timeline-key .key-options .pin, .timeline-key .key-options .pin * { cursor: pointer; } .timeline-key.pinned .key-options .pin { opacity: 1; } .timeline-key .key-options .pin:hover { opacity: 0.8; } .timeline-key .key-options .pin svg .icon-fill { fill: var(--style-text-primary); } .timeline-key .key-options .pin svg .icon-stroke { stroke: var(--style-text-primary); } .timeline-key .key-options .anchors { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--style-padding-tiny); } .timeline-key .key-options .key-anchor-button svg .icon-fill { fill: var(--style-text-primary); } .timeline-key .key-options .key-anchor-button svg .icon-stroke { stroke: var(--style-text-primary); } .timeline-key .key-options .key-anchor-button:not(.active) { opacity: 0.4; } .timeline-key .key-options .key-anchor-button:hover { opacity: 0.8; } .timeline-key span.label { font-size: var(--font-size-small); } .timeline-key .key-icon { width: var(--style-padding-medium); height: var(--style-padding-medium); border-radius: 2px; background-color: var(--color-accent-thick); border: 1.5px solid var(--style-background-accent-regular); } /* #endregion */ /* #region Timeline Row */ .timeline-row { z-index: 1; transition-duration: var(--anim-duration-medium); transition-property: opacity; @starting-style { opacity: 0; } } .timeline-row.alternate { background-color: var(--style-background-timeline-alternate); } .timeline-row:nth-last-child(2)::after { content: ''; display: block; position: absolute; bottom: 0px; left: 0; height: 1px; width: 100%; background-color: var(--style-background-accent-regular); z-index: 20; } .timeline-row-label { height: var(--timeline-row-height); top: 0; bottom: 0; left: 0; position: sticky; border-right: var(--border-regular); z-index: 3; } .timeline-row-label-body { position: relative; flex-grow: 1; height: 100%; width: 100%; z-index: 4; background-color: var(--style-background-secondary); } .timeline-row.alternate .timeline-row-label-body { background-color: var(--style-background-timeline-alternate); } .timeline-row-label-body::after { position: absolute; content: ''; width: 8px; left: 100%; height: 100%; top:0; background: transparent; background: linear-gradient(90deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0) 100%); } .timeline-row-label-content { display: flex; align-items: center; justify-content: space-between; flex-direction: row; height: 100%; } .timeline-row-content { position: absolute; top: 0; z-index: 1; } .timeline-row-content .row-spacer { height: var(--timeline-row-height); display: block; position: relative; } .timeline-row-content .row-body { height: var(--timeline-row-height); top: 0; position: absolute; left: 0; } .timeline-row-content .row-body .row-body-content { position: relative; height: var(--timeline-row-height); top: 0; left: 0; } .timeline-row-inactive-hours { position: absolute; background-color: var(--style-background-primary); opacity: 0.5; height: var(--timeline-row-height); } .crew-active-hours-background { position: absolute; top: 1px; bottom: 1px; /* height: calc(var(--timeline-row-height)); */ background-color: var(--style-background-primary); border: 1px dotted var(--style-background-accent-thin); opacity: 0.8; border-radius: var(--style-border-radius-tiny); } .timeline-row-crew-sign { height:var(--timeline-row-height); position:absolute; top:0; display: flex; align-items: center; opacity: 0.7; } .timeline-row-crew-sign .crew-sign-content { position: relative; } .timeline-row-crew-sign .crew-sign-content .label { position: absolute; top: 0; height: 100%; display: flex; flex-direction: row; align-items: center; gap: var(--style-padding-small); } .timeline-row-crew-sign.sign-on .crew-sign-content .label { right: calc(100% + var(--style-padding-tiny)); } .timeline-row-crew-sign.sign-off .crew-sign-content .label { left: calc(100% + var(--style-padding-tiny)); } .timeline-row-crew-sign .crew-sign-content .label span { font-weight: 500; white-space: nowrap; } .timeline-row-crew-sign .crew-sign-content .marker { display: flex; justify-content: center; } .timeline-row-veh-fromto { height: 100%; position: absolute; overflow: visible; opacity: 0.7; transition-duration: var(--anim-duration-medium); transition-property: opacity; @starting-style { opacity: 0; } } .timeline-row-veh-fromto .wrap { width: 100%; height: var(--timeline-row-height); display: block; overflow: visible; position: relative; } .timeline-row-veh-fromto .content { display: flex; align-items: center; flex-direction: row; flex-wrap: nowrap; gap: var(--style-padding-tiny); width: max-content; height: 100%; padding: 0 var(--style-padding-medium); } .timeline-row-veh-fromto.origin .content { position: sticky; } .timeline-row-veh-fromto.dest .content { position: absolute; left: 0; } /* #endregion */ /* #region Timeline Date Label */ .timeline-row-vehicle-label { display: grid; grid-template-columns: [diag-id] auto [stage] 1fr [dayofweek] auto; align-items: center; width: 100%; } .timeline-row-vehicle-label .day-of-week { justify-self: end; } .timeline-diagram-date-tooltip { display: flex; flex-direction: column; justify-content: center; gap: var(--style-padding-small); align-items: stretch; padding: var(--style-padding-tiny); } /* #endregion */ /* #region Timeline Row Selection */ .timeline-row, .timeline-row-label { /* transition-duration: var(--anim-duration-ultrashort); */ } .timeline-row:has(.timeline-row-label:hover) { background-color: var(--style-background-tertiary); } .timeline-row-label:hover, .timeline-row:nth-of-type(2n+2) .timeline-row-label:hover { background-color: var(--style-background-tertiary); } /* .timeline-row.selected, */ .timeline-row.selected .timeline-row-label-body { background-color: var(--style-background-quarternary); outline: 2px solid var(--color-accent-selection); outline-offset: -2px; } /* #endregion */ /* #region Timeline Leg */ .timeline-leg { position: absolute; top: 0; height: 100%; display: flex; justify-content: center; align-items: center; } .timeline-leg.animate { transition-property: left; transition-duration: 2s; } .timeline-leg .leg-content-wrap { display: block; position: relative; width: 100%; height: 100%; } .timeline-leg .leg-background { display: block; content: ''; position: absolute; top: var(--timeline-row-padding); bottom: var(--timeline-row-padding); left: 0; width: 100%; z-index: 0; overflow: hidden; } .timeline-leg .leg-background.animate { transition-property background-color, border-color; transition-duration: 2s; } .timeline-leg .leg-background .od-bg-wrap { position: relative; width: 100%; height: 100%; } .timeline-leg .leg-background .od-bg-wrap .od-bg-key { position: absolute; left: -1px; right: -1px; height: 100%; display: block; opacity: 0.45; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3) } .timeline-leg .leg-content { display: flex; position: relative; width: 100%; margin-top: var(--timeline-row-padding); height: 20px; cursor: pointer; z-index: 2; } /* #region Timeline Activity Leg */ .timeline-leg.activity-leg .leg-background { background-color: var(--style-background-secondary); border: 1.5px dashed var(--style-background-accent-regular); } .timeline-leg.activity-leg.mixed .leg-background { background-color: var(--style-background-secondary); border: 1.5px dotted var(--style-background-accent-regular); } /* #endregion */ /* #region Timeline Leg Details */ .timeline-leg .leg-details { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; padding: 0 var(--style-padding-tiny); } .timeline-leg .leg-details .leg-center { flex-grow: 1; display: flex; justify-content: center; } .timeline-leg .leg-details .leg-time-inside { color: var(--style-text-tertiary); } .timeline-leg .leg-details .leg-details > * { text-wrap: nowrap; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .timeline-leg .leg-vehicle-turnaround { height: 20%; position: absolute; background-color: var(--style-background-accent-thin); border-color: var(--style-background-accent-regular); border-width: 1px; } .leg-vehicle-turnaround.before { background-color: var(--style-background-accent-thin); } /* #endregion */ /* #endregion */ /* #region Timeline Coupling Border and Radius */ .timeline-leg .leg-background { background-color: var(--style-background-accent-thin); border: 0.5px solid var(--style-background-accent-regular); border-radius: var(--style-border-radius); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); cursor: pointer; } .light-mode .timeline-leg .leg-background { box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); } .timeline-leg.couple-above .leg-background, .timeline-leg.couple-above-indirect .leg-background { border-top-left-radius: 0; border-top-right-radius: 0; } .timeline-leg.adjacent-prev .leg-background { border-top-left-radius: 0; border-bottom-left-radius: 0; } .timeline-leg.adjacent-next .leg-background { border-top-right-radius: 0; border-bottom-right-radius: 0; } .timeline-leg.couple-above .leg-background { border-top: 0px solid transparent; top: 0; } .timeline-leg.couple-above-indirect .leg-background { top: 4px; border-top-style: dashed; border-top-width: 1.5px; } .timeline-leg.couple-below .leg-background, .timeline-leg.couple-below-indirect .leg-background { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .timeline-leg.couple-below .leg-background { border-bottom: 0px solid transparent; bottom: 0; } .timeline-leg.couple-below-indirect .leg-background { bottom: 4px; border-bottom-style: dashed; border-bottom-width: 1.5px; } .timeline-leg.same-leg-before .leg-background { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: dashed; border-left-width: 1.5px; } .timeline-leg.same-leg-after .leg-background { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: dashed; border-right-width: 1.5px; } /* #endregion */ .timeline-leg .leg-background { outline: 1.5px solid transparent; outline-offset: -1.5px; } .timeline-leg.selected .leg-background { border-color: var(--style-background-accent-thick); background-color: var(--style-background-accent-regular); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2); outline-color: var(--color-accent-selection); } .timeline-leg.key-cif-match .leg-background { border-color: rgb(179, 11, 11); } .timeline-leg.key-has-coupling .leg-background { border-color: rgb(58, 157, 8); } .timeline-leg.key-has-group .leg-background { border-color: rgb(58, 157, 8); } .timeline-leg.key-loading-low .leg-background { /* border-color: green; */ } .timeline-leg.key-loading-medium .leg-background { border-color: var(--color-loading-medium-border); background-color: var(--color-loading-medium-background); } .timeline-leg.key-loading-high .leg-background { border-color: var(--color-loading-high-border); background-color: var(--color-loading-high-background); } .timeline-leg.key-loading-no-data .leg-background { background-color: var(--style-background-accent-ultrathin); } /* added !important as otherwise crew pass legs don't get the color*/ .timeline-leg.key-delay-tiny .leg-background { border-color: var(--color-delay-tiny-border) !important; background-color: var(--color-delay-tiny-background) !important; } .timeline-leg.key-delay-low .leg-background { border-color: var(--color-delay-low-border) !important; background-color: var(--color-delay-low-background) !important; } .timeline-leg.key-delay-medium .leg-background { border-color: var(--color-delay-medium-border) !important; background-color: var(--color-delay-medium-background) !important; } .timeline-leg.key-delay-high .leg-background { border-color: var(--color-delay-high-border) !important; background-color: var(--color-delay-high-background) !important; } .timeline-leg.is-empty .leg-background { background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 8px, var(--style-background-accent-ultrathin) 8px, var(--style-background-accent-ultrathin) 16px ); } /* #region Timeline Leg Styling */ /* .timeline-leg .leg-content { background-color: var(--style-background-accent-thin); background-color: var(--style-background-quarternary); border-radius: var(--style-border-radius); border: 0.5px solid var(--style-background-accent-regular); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2); cursor: pointer; outline: 2px solid transparent; outline-offset: -1px; } = .timeline-leg.is-empty .leg-content { background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 8px, var(--style-background-accent-ultrathin) 8px, var(--style-background-accent-ultrathin) 16px ); } .timeline-leg.selected .leg-content-wrap { border-color: var(--style-background-accent-ultrathick); outline: 2px solid var(--color-accent-selection); } .timeline-leg.matching-selected .leg-content-wrap { border-color: var(--style-background-accent-thick); outline: 2px solid var(--color-accent-thin); } .timeline-leg.key .leg-content { transition-delay: var(--anim-duration-ultrashort); transition-duration: var(--anim-duration-medium); transition-property: border-color; } .key-cif-match.key-match .leg-content, .key-has-coupling.key-match .leg-content { border-color: rgb(192, 20, 65); } */ /* #endregion */ /* #region Timeline Row Groups */ .timeline-row-group { /* border-bottom: var(--border-regular); */ } /* #endregion */ /* #region Timeline Header Rows */ .timeline-row-group { height: auto; position: relative; z-index: 1; } .timeline-header-row { z-index: 2; position: sticky; top: var(--style-label-height); height: var(--timeline-row-height); transition-duration: var(--anim-duration-ultrashort); backdrop-filter: blur(38px); } /* .dark-mode .timeline-header-row { backdrop-filter: blur(38px) brightness(0.7); } */ .timeline-row-group > *:not(.timeline-header-row) { z-index: 1; } .timeline-header-row.hidden-summary { backdrop-filter: none; background-color: var(--style-background-secondary) !important; } /* .timeline-row-group:not(.expanded) .timeline-header-row { z-index: 3; position: sticky; } */ .timeline-header-row:hover { /* background-color: var(--style-background-accent-thin); */ } /* .timeline-header-row .background { position: absolute; top: 0; left: 0; width: 100%; height: var(--timeline-row-height); background-color: var(--style-background-accent-thin); opacity: 0; transition-property: opacity; transition-duration: var(--anim-duration-ultrashort); display: none; } .timeline-header-row:hover .background { opacity: 1; } */ .timeline-header-content { position: relative; display: flex; justify-content: space-between; height: var(--timeline-row-height); /* background-color: var(--style-background-accent-thin); */ /* backdrop-filter: blur(12px) brightness(60%) saturate(60%); */ transition-property: background-color; transition-duration: var(--anim-duration-ultrashort); border-bottom: var(--border-regular); } .timeline-header-content.heading-row { background-color: var(--style-background-accent-thin); } .timeline-header-content.subheading-row { background-color: var(--style-background-accent-ultrathin); } /* .timeline-header-row:hover .timeline-header-content { background-color: transparent !important; } */ .timeline-header-row .content-leading, .timeline-header-row .content-trailing { position: sticky; top: 0; display: flex; align-items: center; flex-shrink: 0; width:max-content; gap: var(--style-padding-small); padding: 0 var(--style-padding-small); } .timeline-header-row .content-leading.has-formation { padding-left: 0; } .timeline-header-row .content-leading.has-formation .formation { padding-right: var(--style-padding-tiny); } .timeline-header-row .content-leading { left: 0; } .timeline-header-row .content-leading .icon { width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; overflow: hidden; } .timeline-header-row .content-trailing { right: 0; } .timeline-header-row .content-leading .items, .timeline-header-row .content-trailing .items { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--style-padding-small); align-items: center; } .timeline-header-row .timeline-res-type-icon { padding: 0 var(--style-padding-small); padding-right: var(--style-padding-medium); height: 24px; border-radius: 12px; display: flex; gap: var(--style-padding-tiny); border: var(--border-regular); justify-content: start; align-items: center; border-color: var(--style-background-accent-thick); } .timeline-header-row .timeline-res-type-icon svg .icon-fill { fill: var(--style-text-secondary) !important; } /* #endregion */ /* #endregion */ /* #region Diagram Leg List */ .diagram-leg-list { display: flex; flex-direction: column; gap: var(--style-padding-small); } .diagram-leg-grid { display: grid; grid-template-columns: var(--style-padding-small) [padding-start] 64px [time] 28px [marker] 1fr [detail] auto [trailing] var(--style-padding-small) [padding-end]; } .diagram-leg-grid-row, .diagram-leg-grid-row-wrap { display: contents; } .diagram-leg-grid-row .icon-label { display: flex; flex-direction: row; align-items: center; justify-content: end; gap: var(--style-padding-small); } .diagram-leg-grid-row-wrap { grid-column: 1 / -1; display: grid; grid-template-columns: var(--style-padding-small) [padding-start] 64px [time] 28px [marker] 1fr [detail] auto [trailing] var(--style-padding-small) [padding-end]; margin-bottom: var(--style-padding-medium); } .diagram-leg-grid-row-wrap:last-child { margin-bottom: 0; } .diagram-leg-grid-row-wrap.selected { outline: 1.5px solid var(--color-accent-selection); } .diagram-act-grid-row-wrap { display:contents; } .diagram-act-grid-row-wrap.selected { outline: 1.5px solid var(--color-accent-selection); } .diagram-leg-grid-row-wrap { border-radius: var(--style-border-radius-tiny); background-color: var(--style-background-accent-ultrathin); } .diagram-leg-grid-row-wrap.move-empty { background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 8px, var(--style-background-accent-ultrathin) 8px, var(--style-background-accent-ultrathin) 16px ); } .diagram-leg-grid-row .cell:not(.marker) { display: flex; justify-content: end; align-items: center; } .diagram-leg-grid-row .cell.detail { justify-content: start; } .diagram-leg-grid-row .cell.marker { position: relative; overflow: hidden; display: flex; justify-content: center; padding-left: var(--style-padding-small); padding-right: var(--style-padding-small); } .diagram-leg-grid-row .cell.marker svg.activity-icon { position: absolute; top: calc(50%); transform: translateY(-50%); } .diagram-leg-grid-row .cell.marker svg.journey-marker { position: absolute; top: calc(50% - 100px); left: 3px; } .diagram-leg-grid-row .cell.invalid::before { content: ''; background-color: var(--alert-warning-primary); display: block; width: 6px; height: 6px; border-radius: 3px; margin-right: 5px; } .diagram-leg-grid-row-wrap.leg .diagram-leg-grid-row:first-child > * { padding: var(--style-padding-small) 0; } .diagram-leg-grid-row-wrap.leg .diagram-leg-grid-row:nth-child(2) > * { padding-top: 0; } .diagram-leg-list:not(.mode-summary) .diagram-leg-grid-row-wrap.leg .diagram-leg-grid-row:nth-last-child(2) > * { padding-bottom: 0; } .diagram-leg-grid-row-wrap.leg .diagram-leg-grid-row:last-child > * { padding: var(--style-padding-small) 0; } .diagram-leg-grid-row-wrap.move-activity .cell { background-color: var(--style-background-tertiary); } /* #region Diagram Movement ACTIVITY Border + Radius */ .diagram-leg-grid-row-wrap.move-activity .diagram-leg-grid-row:first-of-type .cell { border-top: var(--border-regular); } .diagram-leg-grid-row-wrap.move-activity .diagram-leg-grid-row .cell:first-of-type { border-left: var(--border-regular); } .diagram-leg-grid-row-wrap.move-activity .diagram-leg-grid-row .cell:last-of-type { border-right: var(--border-regular); } .diagram-leg-grid-row-wrap.move-activity .diagram-leg-grid-row:last-of-type .cell { border-bottom: var(--border-regular); } .diagram-leg-grid-row-wrap.move-activity .diagram-leg-grid-row:first-of-type .cell:first-of-type { border-top-left-radius: var(--style-border-radius-tiny); } .diagram-leg-grid-row-wrap.move-activity .diagram-leg-grid-row:first-of-type .cell:last-of-type { border-top-right-radius: var(--style-border-radius-tiny); } .diagram-leg-grid-row-wrap.move-activity .diagram-leg-grid-row:last-of-type .cell:first-of-type { border-bottom-left-radius: var(--style-border-radius-tiny); } .diagram-leg-grid-row-wrap.move-activity .diagram-leg-grid-row:last-of-type .cell:last-of-type { border-bottom-right-radius: var(--style-border-radius-tiny); } /* #endregion */ .diagram-leg-grid-row .cell.time, .diagram-leg-grid-row .cell.detail, .diagram-leg-grid-row .cell.trailing { padding: var(--style-padding-tiny) var(--style-padding-small); } .diagram-leg-grid-row .cell.time { padding-left: 0; padding-right: 0; text-align: right; } .diagram-leg-grid-row .cell.detail { padding-left: 0; } .diagram-leg-grid-row .cell.trailing { padding-right: 0; } .diagram-leg-grid-row.row-formation .cell { padding-top: 0; } .diagram-leg-grid-row .cell.trailing.formation { grid-column: span 2; border-bottom: var(--border-regular); padding-bottom: 0; } .diagram-leg-grid-row .cell.detail .detail-content { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: start; } .diagram-leg-grid-row .cell.detail.formation .detail-content { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } .diagram-leg-grid .formation-summary { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--style-padding-tiny); } .diagram-leg-grid .formation-summary span.formation-plus:first-child { display: none; } .diagram-leg-grid .formation-summary span.formation-part { background-color: var(--style-background-accent-regular); padding: 0 var(--style-padding-tiny); border-radius: var(--style-border-radius); } .diagram-leg-grid-row .diagram-loading-detail { display: flex; flex-direction: row; gap: var(--style-padding-small); align-items: center; } .diagram-leg-grid-row .cell.trailing { text-align: right; } /* #region Diagram Activity Cells */ /* Intermediate */ .diagram-leg-grid-row.row-activity .cell { /* background-color: green; */ background-color: var(--style-background-tertiary); border-top: var(--border-regular); border-bottom: var(--border-regular); margin-bottom: var(--style-padding-medium); } .diagram-leg-grid-row.row-activity .cell:first-child { border-left: var(--border-regular); border-top-left-radius: var(--style-border-radius-tiny); border-bottom-left-radius: var(--style-border-radius-tiny); } .diagram-leg-grid-row.row-activity .cell:last-child { border-right: var(--border-regular); border-top-right-radius: var(--style-border-radius-tiny); border-bottom-right-radius: var(--style-border-radius-tiny); } /* First of more than 1 */ .diagram-leg-grid-row.row-activity:has(+ .row-activity) .cell { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; } /* Last of more than 1 */ .diagram-leg-grid-row.row-activity + .row-activity .cell { /* background-color: red; */ border-top-left-radius: 0; border-top-right-radius: 0; } .diagram-leg-grid-row.row-activity + .row-activity .cell.time, .diagram-leg-grid-row.row-activity + .row-activity .cell.padding, .diagram-leg-grid-row.row-activity + .row-activity .cell.marker { border-top: none; } /* #endregion */ /* #endregion */ /* #region Diagram Inspector */ .diagram-formation-graphic-header { margin-top: var(--style-padding-small); border-bottom: var(--border-regular); } .diagram-inspector-legs { display: grid; grid-template-columns: 16px [marker] 1fr [detail] auto [time]; } .diagram-table { display: grid; grid-template-columns: 16px [marker] 1fr [detail] auto [time]; } .activity-row, .train-leg-rows, .dwell-row { display: contents; } .train-leg-rows .train-leg { display: contents; /* background-color: orange; */ } /* #region Rounded Corners */ .diagram-table .cell:first-child { border-top-left-radius: var(--style-border-radius); border-bottom-left-radius: var(--style-border-radius); } .diagram-table .cell:last-child { border-top-right-radius: var(--style-border-radius); border-bottom-right-radius: var(--style-border-radius); } /* #endregion */ /* #region Train Leg Rows */ .diagram-table .cell:not(.marker) { padding: var(--style-padding-tiny) var(--style-padding-small); } .diagram-table .cell:not(:last-child){ padding-right: 0; } .diagram-table .train-leg.origin .cell { margin-top: var(--style-padding-tiny); } .diagram-table .train-leg.dest .cell { margin-bottom: var(--style-padding-tiny); } .diagram-table .train-leg.origin .cell, .diagram-table .train-leg.dest .cell { background-color: var(--style-background-accent-ultrathin); } .diagram-table .train-leg.detail * { color: var(--style-text-tertiary); } .diagram-table .train-leg .cell.time { text-align: right; } /* #endregion */ .diagram-table .cell.detail span.location-id { font-family: var(--font-mono); font-weight: 500; color: var(--style-text-quarternary); } .diagram-table .cell.marker { position: relative; overflow: hidden; } .diagram-table .cell.marker svg { position: absolute; top: calc(50% - 100px); } /* #endregion */ /* #region Diagram Delay Table */ .delay-leg-table-wrap { background-color: var(--style-background-tertiary); border: 1px solid var(--style-background-accent-regular); border-radius: var(--style-border-radius); } table.leg-delay-table { padding: var(--style-padding-tiny); position: relative; } table.leg-delay-table td { padding: var(--style-padding-tiny) var(--style-padding-small); } table.leg-delay-table thead td { padding-bottom: 0; color: var(--style-text-tertiary); } table.leg-delay-table tbody td { padding-top: 0; } /* #endregion */ /* #region Mult-Dropdown */ .md-button-wrap { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: start; gap: var(--style-padding-tiny); } .md-button-wrap:has(> .md-filter-label > .md-filter-icon-wrap:last-child) { padding-right: var(--style-padding-tiny) !important; } .md-filter-label { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: start; align-items: center; gap: var(--style-padding-tiny); } .md-filter-icon-wrap { display: flex; flex-direction: row; justify-content: center; align-items: center; height: 100%; } .md-filter-expand-icon, .md-filter-clear-button { display: flex; align-items: center; justify-content: center; min-width: 20px; min-height: 20px; border-radius: var(--style-border-radius); } .md-filter-clear-button:hover { background-color: var(--style-background-accent-thick); } .md-filter-clear-button:hover svg * { stroke: var(--style-text-primary); } /* #region Multi-Dropdown Label - Context Filter */ .md-context-filter .md-filter-label { height: var(--style-label-height); min-width: 24px; padding-left: var(--style-padding-small); padding-right: var(--style-padding-small); } .md-context-filter .md-filter-label-icons { display: flex; flex-direction: row; flex-wrap: nowrap; height: var(--icon-size-tiny); } .md-context-filter .md-filter-label-icons .md-label-icon:first-child { margin-left: 2px; } .md-context-filter .md-filter-label-icons .md-label-icon:last-child { margin-right: 2px; } .md-context-filter .md-filter-label-icons .md-label-icon:has(> .brand-icon) { outline: 0px solid #282829; box-shadow: 0 0 2px 1px rgba(21, 21, 21, 0.4); border-radius: 2px; } .md-context-filter .md-filter-label-icons .md-label-icon:nth-of-type(n+2) { margin-left: calc((var(--icon-size-tiny) * 0.15) * -1); } .md-context-filter .md-filter-label-text { height: var(--style-label-height); display: flex; align-items: center; } /* #endregion */ /* #region Multi-Dropdown Label - Context Borderless */ .md-context-borderless.md-button-wrap { min-height: var(--style-label-height); min-width: var(--style-label-height); padding: var(--style-padding-tiny) var(--style-padding-small); display: flex; flex-direction: row; justify-content: start; align-items: center; gap: var(--style-padding-small); color: var(--style-text-tertiary); border-radius: var(--style-border-radius); } .md-context-borderless.md-button-wrap:hover { background-color: var(--style-background-accent-regular); } .md-context-borderless.md-button-wrap:hover .md-filter-label * { color: var(--style-text-secondary); } .md-context-borderless.md-button-wrap .md-filter-label {} /* #endregion */ /* #region Multi-Dropdown - Popover */ .md-popover-wrap { width: 360px; max-height: 540px; background-color: var(--style-background-tertiary); border: var(--border-regular); border-radius: var(--style-border-radius-tiny); overflow: hidden; } .md-popover-wrap * { font-size: var(--font-size-body); } .md-popover-search { padding: var(--style-padding-small); border-bottom: var(--border-regular); } .md-popover-list { max-height: 360px; min-height: 80px; overflow-y: auto; padding-left: var(--style-padding-tiny); padding-right: var(--style-padding-tiny); } .md-popover-list-content { padding-top: var(--style-padding-tiny); padding-bottom: var(--style-padding-tiny); } .md-item-checkbox .md-check-wrap { display: flex; align-items: center; height: 100%; } .md-popover-list input[type=checkbox] { appearance: none; box-shadow: none; visibility: hidden; fill-opacity: 0; height: 1px; width: 1px; position: absolute; } .md-popover-table { width: 100%; } .md-item-row { min-height: var(--style-label-height); vertical-align: middle; } .md-item-row td:first-of-type { border-top-left-radius: var(--style-border-radius); border-bottom-left-radius: var(--style-border-radius); } .md-item-row td:last-of-type { border-top-right-radius: var(--style-border-radius); border-bottom-right-radius: var(--style-border-radius); } .md-item-row:hover td { background-color: var(--style-background-accent-thin); } .md-popover-list span.match { background-color: var(--color-accent); color: var(--color-accent-text); } .md-item-row td.md-item-icon, .md-item-row td.md-item-label, .md-item-row td.md-item-checkbox { padding: 6px; } .md-item-row td.md-item-label { width: 100%; height: var(--style-label-height); min-height: var(--style-label-height); } .md-item-row td.md-item-label:first-child { padding-left: var(--style-padding-small); } .md-item-row td.md-item-label:last-child { padding-right: var(--style-padding-small); } .md-item-row td.md-item-label { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .md-item-row td.md-item-label.primary { position: relative; padding: 0 } .md-item-row td.md-item-label.primary .label-content { position: absolute; top: 50%; transform: translateY(-48%); left: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .md-item-row td.md-item-label.primary .label-content .md-item-row td.md-item-label.primary .label-content span.label { width: 100%; } .md-item-row td.md-item-label.primary:first-child .label-content span.label { padding-left: var(--style-padding-small); } .md-item-row td.md-item-label.primary:last-child .label-content span.label { padding-right: var(--style-padding-small); } .md-item-current { background: var(--style-background-accent-regular); } /* #endregion */ /* #endregion */ /* #region Multi-Dropdown - Toolbar */ .md-context-toolbar.md-button-wrap { height: var(--style-label-height); border: var(--border-regular); padding: 0 var(--style-padding-small); border-radius: var(--style-border-radius); cursor: pointer; } .md-context-toolbar.md-button-wrap:hover { background-color: var(--style-background-accent-thin); } .md-context-toolbar.md-button-wrap * { cursor: inherit; } /* #endregion */ /* #region Alert */ .validation-message { background-color: var(--alert-error-secondary); border: 1px solid var(--alert-error-primary); border-radius: var(--style-border-radius); padding: var(--style-padding-small); margin: var(--style-padding-tiny) 0; color: var(--style-text-primary); display: flex; flex-direction: row; justify-content: start; align-items: center; gap: var(--style-padding-small); opacity: 1; transform: scale(1); transform-origin: top center; transition: var(--anim-duration-short); @starting-style { opacity: 0; transform: scale(0.95); } } .validation-message::before { display: block; width: 14px; height: 14px; content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg' b-te5ukdio03=''%3E%3Ccircle cx='7' cy='7' r='6.5' stroke='white' b-te5ukdio03=''%3E%3C/circle%3E%3Cpath d='M8.55405 11H5.44605V9.894H6.42605V6.856H5.44605V5.75H7.58805V9.894H8.55405V11ZM7.74205 3.72C7.74205 3.93466 7.66739 4.112 7.51805 4.252C7.36872 4.38266 7.20539 4.448 7.02805 4.448C6.84139 4.448 6.67339 4.38266 6.52405 4.252C6.37472 4.112 6.30005 3.93466 6.30005 3.72C6.30005 3.50533 6.37472 3.328 6.52405 3.188C6.67339 3.048 6.84139 2.978 7.02805 2.978C7.20539 2.978 7.36872 3.048 7.51805 3.188C7.66739 3.328 7.74205 3.50533 7.74205 3.72Z' fill='white' b-te5ukdio03=''%3E%3C/path%3E%3C/svg%3E"); } .alert-section { background-color: orange; padding: var(--style-padding-medium); border: 1px solid transparent; border-radius: var(--style-border-radius); display: flex; flex-direction: column; flex-wrap: nowrap; } .alert-section .alert-icon { padding-top: 2px; flex-shrink: 0; } .alert-section strong { color: var(--style-text-primary); font-size: inherit; } .alert-section code { border: 1px solid var(--style-text-primary); padding-left: 2px; padding-right: 2px; border-radius: var(--style-border-radius); font-family: var(--font-mono); font-weight: 500; background: transparent; } .alert-section .alert-heading { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--style-padding-small); } .alert-section .alert-heading * { font-size: var(--font-size-body); } ::deep.alert-section .alert-body * { color: var(--style-text-primary); } .alert-section.plain { border-color: var(--style-background-accent-regular); background-color: var(--style-background-accent-thin); } .alert-section.info { border-color: var(--alert-info-border-color); background-color: var(--alert-info-background-color); } .alert-section.warning { border-color: var(--alert-warning-primary); background-color: var(--alert-warning-secondary); } .alert-section.error { border-color: var(--alert-warning-primary); background-color: var(--alert-warning-secondary); } .alert-section.success { border-color: var(--alert-success-border-color); background-color: var(--alert-success-background-color); } ::deep.alert-section code { background-color: var(--style-background-accent-regular); border-color: var(--style-background-accent-ultrathick); } ::deep.alert-section a { color: var(--style-text-primary) !important; } .alert-body { font-size: var(--font-size-body); color: var(--style-text-primary); } .alert-body p { font-size: inherit; color: inherit; margin: var(--style-padding-tiny) 0; } .alert-body ul, .alert-body li { list-style: initial; margin-left: var(--style-padding-small); font-size: inherit; } .ott-inspector-section > .content > .alert-section { border-radius: var(--style-border-radius-tiny); } /* #endregion */ /* #region Disclosure Panel */ .disclosure-panel { border-radius: var(--style-border-radius-tiny); background-color: var(--style-background-accent-thin); display: flex; flex-direction: column; gap: var(--style-padding-small); padding: var(--style-padding-small) var(--style-padding-medium); } .ott-inspector-section .disclosure-panel { background-color: var(--style-background-accent-ultrathin); } .disclosure-panel .disclosure-header { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; color: var(--style-text-secondary); padding: 0 var(--style-padding-small); position: relative; } .disclosure-panel .disclosure-header::after { content: ''; display: block; width: 100%; height: 1px; background-color: var(--style-background-accent-regular); position: absolute; bottom: calc(var(--style-padding-small) * -1); left: 0; transition: var(--anim-duration-short); } .disclosure-panel.closed .disclosure-header::after, .disclosure-panel.hide-spacer .disclosure-header::after { opacity: 0; } .disclosure-panel.align-top .disclosure-header { align-items: start; } .disclosure-panel .disclosure-header * { } .disclosure-panel .disclosure-header .disclosure-leading, .disclosure-panel .disclosure-header .disclosure-trailing { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: start; gap: var(--style-padding-small); } /* #endregion */ /* #region Generic Filters */ /* #region Generic Filter */ /* #region Add Filter */ .generic-filter-add, .generic-filter-add button { height: var(--style-label-height); min-width: var(--style-label-height); padding: 0; position: relative; } .generic-filter-add button svg .icon-stroke { stroke: var(--style-text-secondary); } .generic-filter-add button:hover svg .icon-stroke { stroke: var(--style-text-primary); } /* #endregion */ /* #region Generic Filter Item */ .generic-filter-item { position: relative; flex-shrink: 1; white-space: nowrap; text-overflow: ellipsis; display: flex; flex: initial; flex-direction: row; flex-shrink: 1; flex-grow: 0; align-items: stretch; height: var(--style-label-height); border-radius: var(--style-border-radius); gap: 2px; background-color: var(--style-background-accent-ultrathin); } .generic-filter-item>*:not(.filter-value) { align-items: center; display: flex; flex-shrink: 1; flex-grow: 0; min-width: 0; padding-right: var(--style-padding-small); padding-left: var(--style-padding-small); background-color: var(--style-background-accent-thin); position: relative; transition-duration: var(--anim-duration-ultrashort); } .generic-filter-item>.filter-value { flex-grow: 0; flex-shrink: 1; align-self: stretch; display: flex; background-color: var(--style-background-accent-thin); } .generic-filter-item>.filter-value>* { align-self: stretch; display: flex; align-items: center; flex-shrink: 1; flex-grow: 0; flex-basis: content; padding-left: var(--style-padding-tiny); padding-right: var(--style-padding-tiny); } .generic-filter-item>.filter-value>.control-menu { padding-left: 0; padding-right: 0; } .generic-filter-item>.filter-value>.control-menu button { border-radius: 0; } .generic-filter-item>.filter-value.clear>* { padding-left: 0; padding-right: 0; } .generic-filter-item .mud-popover-cascading-value{ display: none; } .generic-filter-item>*:first-child { border-top-left-radius: var(--style-border-radius); border-bottom-left-radius: var(--style-border-radius); } .generic-filter-item>*:last-child { border-top-right-radius: var(--style-border-radius); border-bottom-right-radius: var(--style-border-radius); } .generic-filter-item>* span { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .generic-filter-item .filter-operator { color: var(--style-text-tertiary); } .generic-filter-item .filter-operator.enabled { cursor: pointer; } .generic-filter-item .filter-operator.enabled:hover, .generic-filter-item .filter-value:hover, .generic-filter-item .filter-delete:hover { background-color: var(--style-background-accent-regular); } .generic-filter-item .filter-delete { cursor: pointer; padding-left: var(--style-padding-tiny); padding-right: var(--style-padding-tiny); } .generic-filter-item .filter-value.clear { padding-left: 0; padding-right: 0; } /* #endregion */ /* #endregion */ /* #endregion */ .diagram-summary-controls { padding: var(--style-padding-small) var(--style-padding-small) 0 var(--style-padding-medium); display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; } .diagram-vehicle-summary-panel { padding-top: var(--style-padding-small); display: grid; grid-template-columns: 90px repeat(5, auto); gap: var(--style-padding-tiny); padding-right: var(--style-padding-medium); } .diagram-vehicle-summary-panel .date-group, .diagram-vehicle-summary-panel .date-group .rows, .diagram-vehicle-summary-panel .vehicle-row, .diagram-vehicle-summary-panel .grid-headers { display: contents; } .diagram-vehicle-summary-panel .grid-headers .header { text-align: center; } .diagram-vehicle-summary-panel .grid-headers .header.vehicle { grid-column: span 2; padding-left: var(--style-padding-medium); } .diagram-vehicle-summary-panel .date-group .header { grid-column: span 5; padding: var(--style-padding-medium) var(--style-padding-medium) 0; justify-content: end; justify-items: end; } .diagram-vehicle-summary-panel .date-group .header * { font-size: var(--font-size-small) !important; } .diagram-vehicle-summary-panel .vehicle-row .cell { align-items: center; align-content: center; } .diagram-vehicle-summary-panel .vehicle-row .cell.seats, .diagram-vehicle-summary-panel .vehicle-row .cell.standing { text-align: center; display: flex; flex-direction: row; align-items: center; gap: var(--style-padding-tiny); } .diagram-vehicle-summary-panel .vehicle-row .cell.car-count { text-align: right; } .diagram-vehicle-summary-panel .vehicle-row .cell.diagram-id { text-align: right; } .diagram-crew-summary-panel { display: grid; grid-template-columns: repeat(2, auto) auto auto 1fr auto auto; gap: var(--style-padding-small); padding: var(--style-padding-medium); } .diagram-crew-summary-panel .crew-row { display: contents; } .diagram-crew-summary-panel .crew-row .cell { align-items: center; align-content: center; } .diagram-crew-summary-panel .crew-row .cell span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .train-graph { width: 100%; min-width: 100%; max-width: 100%; height: 100%; min-height: 100%; max-height: 100%; overflow-x: scroll; overflow-y: scroll; position: relative; } .main-summary-container { display: flex; flex-direction: row; justify-content: center; align-items: start; padding: 0 var(--style-padding-xxxlarge); height: 100%; } .main-summary-grid { max-width: 720px; max-height: 720px; width: 100%; display: flex; flex-direction: column; gap: var(--style-padding-medium); padding: var(--style-padding-xxxlarge) 0; } .main-summary-service-wrap { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--style-padding-medium); } .main-summary-service-wrap .service-item { background-color: var(--style-background-accent-ultrathin); border-radius: var(--style-border-radius-tiny); padding: var(--style-padding-large); display: flex; flex-direction: column; } .main-summary-service-wrap .service-item span.label { font-size: var(--font-size-heading); color: var(--style-text-tertiary); } .main-summary-service-wrap .service-item span.callout, .main-summary-service-wrap .service-item span.callout * { font-size: var(--font-size-title); } .main-summary-header-wrap { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: var(--style-padding-medium); } .main-summary-header-wrap .header { padding: var(--style-padding-large); background-color: var(--style-background-accent-ultrathin); border-radius: var(--style-border-radius-tiny); display: flex; align-items: center; } .main-summary-header-wrap .header.tu-name { grid-column: span 2; } .main-summary-header-wrap .header * { font-size: var(--font-size-title3); font-weight: 500; } .main-summary-vehicle-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--style-padding-medium); } .main-summary-vehicle-wrap .vehicle-row { grid-column: span 1; background-color: var(--style-background-accent-ultrathin); position: relative; min-height: 60px; border-radius: var(--style-border-radius-tiny); padding: var(--style-padding-medium) var(--style-padding-large) 42px; overflow: hidden; } .main-summary-vehicle-wrap .vehicle-row .vehicle-header { display: flex; flex-direction: row; justify-content: space-between; align-items: start; } .main-summary-vehicle-wrap .vehicle-row .vehicle-header * { font-size: var(--font-size-subtitle) !important; } .main-summary-vehicle-wrap .vehicle-row .vehicle-header .count-veh, .main-summary-vehicle-wrap .vehicle-row .vehicle-header .count-veh * { font-size: var(--font-size-title2) !important; line-height: 1; } .main-summary-vehicle-wrap .vehicle-row .vehicle-img-position { position: absolute; bottom: 0; right: 72px; } .main-summary-vehicle-wrap .vehicle-row:last-child { grid-column: auto / span auto / -1; } /* #region Transport Undertaking Inspector */ .inspector-tu-header { padding: var(--style-padding-xxlarge) var(--style-padding-xlarge) var(--style-padding-xlarge); } .inspector-tu-header-content { text-align: left; display: flex; flex-direction: column; gap: var(--style-padding-medium); } .inspector-tu-header h1 { font-size: var(--font-size-title2); font-weight: 500; text-wrap: pretty; letter-spacing: -0.01em; } .inspector-tu-header .brand-icon { box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.2); } .inspector-tu-header .property-item { background-color: rgba(0, 0, 0, 0.1); } /* #endregion */ /* #region Location Report Region*/ .loc-rep-thisOne { font-weight: bold; } .loc-rep-otherOne { opacity: 0.4; } .loc-rep-row-container { padding-bottom: var(--style-padding-small); } .loc-rep-row { display: grid; grid-template-columns: 200px 50px 50px auto 50px 200px; padding-bottom: 0px; } .loc-rep-row * { white-space: nowrap; } .loc-rep-timeline { width: 100%; } .loc-rep-mismatch { border-bottom: 1px solid red; } .loc-rep-arrive-block { border: none; display: flex; justify-content: flex-end; padding-right: 5px; gap: 5px; } .loc-rep-depart-block { border: none; display: flex; padding-left: 5px; gap: 5px; } /* #endregion */ /* #region Schedule List Inner Timeline */ .location-timeline .move-shunt { position: absolute; height: var(--timeline-row-height); width: 0px; overflow: hidden; } .location-timeline .move-shunt .move-shunt-content { position: relative; width: 100%; height: 100%; } .location-timeline .move-shunt .move-background { width: 100%; top: var(--timeline-row-padding); bottom: var(--timeline-row-padding); position: absolute; z-index: 0; border: 1.5px solid var(--style-background-accent-regular); border-radius: var(--style-border-radius); background-color: var(--style-background-accent-thin); } .location-timeline .move-position { position: absolute; height: var(--timeline-row-height); width: 0px; background-color: orange; overflow: visible; } .location-timeline .move-position .move-wrap { position: absolute; height: var(--timeline-row-height); width: auto; display: flex; justify-content: center; align-items: center; } .location-timeline .move-position.non-stop .move-wrap { transform: translateX(-50%); } .location-timeline .move-position.arr .move-wrap { right: 0px; } .location-timeline .move-position.dep .move-wrap { left: 0px; } .location-timeline .move-position .move-background { width: 100%; top: var(--timeline-row-padding); bottom: var(--timeline-row-padding); position: absolute; z-index: 0; border: 1.5px solid var(--style-background-accent-thick); } .location-timeline .move-position .move-background.coupled-above { top: 0; border-top: none; } .location-timeline .move-position .move-background.coupled-below { bottom: 0; border-bottom: none; } .location-timeline .move-position.arr .move-background.coupled-above { border-top-right-radius: 0 !important; } .location-timeline .move-position.arr .move-background.coupled-below { border-bottom-right-radius: 0 !important; } .location-timeline .move-position.dep .move-background.coupled-above { border-top-left-radius: 0 !important; } .location-timeline .move-position.dep .move-background.coupled-below { border-bottom-left-radius: 0 !important; } .location-timeline .move-shunt .move-background.coupled-above { top: 0; border-top: none; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } .location-timeline .move-shunt .move-background.coupled-below { bottom: 0; border-bottom: none; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } .location-timeline .move-position.arr.dep-main-event .move-background, .location-timeline .move-position.dep.arr-main-event .move-background, .location-timeline .move-position.no-main-event .move-background{ border-color: var(--style-background-accent-regular) !important; background-color: transparent !important; } .location-timeline .move-position.arr.dep-main-event *, .location-timeline .move-position.dep.arr-main-event *, .location-timeline .move-position.no-main-event *{ color: var(--style-text-quarternary) !important; } .location-timeline .move-position.arr.dep-main-event svg .icon-stroke, .location-timeline .move-position.dep.arr-main-event svg .icon-stroke, .location-timeline .move-position.no-main-event svg .icon-stroke { stroke: var(--style-text-quarternary); } .location-timeline .move-position.arr.dep-main-event svg .icon-fill, .location-timeline .move-position.dep.arr-main-event svg .icon-fill, .location-timeline .move-position.no-main-event svg .icon-fill { fill: var(--style-text-quarternary); } .location-timeline .move-position.arr .move-background { border-left: none; -webkit-mask-image: linear-gradient(90deg, transparent 0px, black 60%); mask-image: linear-gradient(90deg, transparent 0px, black 60%); } .location-timeline .move-position.arr:not(.through) .move-background { border-top-right-radius: var(--style-border-radius); border-bottom-right-radius: var(--style-border-radius); } .location-timeline .move-position.dep .move-background { border-right: none; -webkit-mask-image: linear-gradient(-90deg, transparent 0px, black 60%); mask-image: linear-gradient(-90deg, transparent 0px, black 60%); } .location-timeline .move-position.dep:not(.through) .move-background { border-top-left-radius: var(--style-border-radius); border-bottom-left-radius: var(--style-border-radius); } .location-timeline .move-position.non-stop .move-background { border-left: none; border-right: none; -webkit-mask-image: linear-gradient(-90deg, transparent 0px, black 20%, black 80%, transparent 100%); mask-image: linear-gradient(-90deg, transparent 0px, black 20%, black 80%, transparent 100%); } .location-timeline .move-position .move-content { padding: 0 var(--style-padding-small); position: relative; z-index: 1; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--style-padding-tiny); } .location-timeline .move-position.non-stop .move-content { padding-left: var(--style-padding-xxlarge); padding-right: var(--style-padding-xxlarge); font-style: italic; } .location-timeline .move-position.arr .move-content { padding-left: var(--style-padding-large); } .location-timeline .move-position.dep .move-content { padding-right: var(--style-padding-large); } */ /* #endregion */ /* #region Explore Control Panel */ .explore-view-toggle { gap: 0; height: var(--style-label-height); border: var(--border-regular); display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--style-padding-tiny); padding-left: var(--style-padding-small); padding-right: var(--style-padding-small); } .explore-control-panel { background-color: var(--style-background-tertiary); border-radius: var(--style-border-radius-tiny); border: var(--border-regular); width: 320px; margin-top: var(--style-padding-tiny); overflow: hidden; } .explore-control-panel section { padding: var(--style-padding-medium); display: flex; flex-direction: column; gap: var(--style-padding-small); } .explore-control-panel section.controls { display: grid; grid-template-columns: auto auto 1fr; gap: var(--style-padding-small); align-items: center; } .explore-control-panel section:nth-of-type(n+2) { border-top: var(--border-regular); } .explore-control-panel section .control-item { display: contents; } .explore-control-panel section .control-item .control-content > * { width: 100%; text-align: right; } .view-picker { display: grid; gap: var(--style-padding-small); grid-template-columns: 1fr 1fr 1fr; } .view-picker .select-view-button { padding: var(--style-padding-small) var(--style-padding-tiny) var(--style-padding-tiny); border: var(--border-regular); border-radius: var(--style-border-radius); display: flex; flex-direction: column; justify-content: center; align-items: center; } .view-picker .select-view-button svg .icon-stroke { stroke: var(--style-text-secondary); } .view-picker .select-view-button svg .icon-fill { fill: var(--style-text-secondary); } .light-mode .view-picker .select-view-button svg .icon-fill { fill: var(--style-text-quarternary); } .view-picker .select-view-button.active { border-color: var(--style-background-accent-thick); background-color: var(--style-background-accent-ultrathin); } .view-picker .select-view-button.active svg .icon-stroke { stroke: var(--style-text-primary); } .light-mode .view-picker .select-view-button.active svg .icon-stroke { stroke: var(--style-text-tertiary); } .view-picker .select-view-button.active svg .icon-fill { fill: var(--style-text-primary); } .light-mode .view-picker .select-view-button.active svg .icon-fill { fill: var(--style-text-tertiary); } .view-picker .select-view-button.disabled { opacity: 0.6; background-color: transparent !important; border: var(--border-regular) !important; cursor: default !important; } .view-picker .select-view-button.disabled svg .icon-stroke { stroke: var(--style-text-quarternary); } .view-picker .select-view-button.disabled svg .icon-fill { fill: var(--style-text-quarternary); } /* #endregion */ .train-graph { width: 100%; min-width: 100%; max-width: 100%; height: 100%; min-height: 100%; max-height: 100%; overflow-x: scroll; overflow-y: scroll; position: relative; background-color: var(--style-background-primary); } .train-graph .sticky-scroll .sticky-x-top-content, .train-graph .sticky-scroll .sticky-x-bottom-content { position: sticky; z-index: 6; padding-left: var(--train-graph-y-axis-width); } .train-graph .sticky-scroll .sticky-x-top-content { top: 0; background-color: var(--style-background-accent-thin); backdrop-filter: blur(18px) brightness(50%); border-bottom: var(--border-regular); } .train-graph .sticky-scroll .sticky-x-bottom-content { bottom: 0; background-color: var(--style-background-primary); border-top: var(--border-regular); } .train-graph .sticky-scroll .scroll-x-content .sticky-y-wrap { position: relative; } .train-graph .sticky-scroll .timeline-scale { background-color: transparent !important; border: none !important; } .train-graph .sticky-scroll .scroll-x-content .sticky-y-wrap .sticky-y-content { width: var(--train-graph-y-axis-width); /* background-color: var(--style-background-secondary); */ background-color: var(--style-background-accent-thin); backdrop-filter: blur(18px) brightness(50%); position: sticky; left: 0; z-index: 5; border-right: var(--border-regular); } .train-graph .location-axis .loc-label { display: block; position: absolute; width: 100%; right: 0; left: 0; height: var(--style-input-height); line-height: 1.2; transform: translateY(-50%); /* display: flex; justify-content: right; flex-wrap: nowrap; align-items: center; */ display: flex; justify-content: center; flex-direction: column; } .train-graph .location-axis .loc-label span { padding-right: var(--style-padding-medium); padding-left: var(--style-padding-small); text-overflow: ellipsis; text-wrap: nowrap; overflow: hidden; font-size: var(--font-size-small); text-align: right; height: 14px; } .train-graph .location-axis .loc-label:nth-of-type(2n+1) span { color: var(--style-text-quarternary); } .train-graph .location-axis .loc-label span.code { color: var(--style-text-tertiary); } .train-graph .location-axis .loc-label::before { content: ''; display: block; position: absolute; width: 100%; height: 1px; right: 0; width: var(--style-padding-small); background-color: var(--style-background-accent-regular); top: calc(50% - 0.5px); } .train-graph .sticky-scroll .scroll-x-content .sticky-y-wrap .scroll-y-content { position: absolute; top: 0; z-index: 1; margin-left: var(--train-graph-y-axis-width); overflow: hidden; } .train-graph .schedule-path { cursor: pointer; stroke-linejoin: round; stroke-width: 2px; stroke-linecap: round; content-visibility: hidden; } .train-graph #schedules .schedule-path { opacity: 0.8; transition: opacity var(--anim-duration-long); @starting-style { opacity: 0; } } .train-graph .schedule-path.selected { stroke-width: 8px; opacity: 0.5; /* stroke: var(--color-accent-selection); */ } .train-graph .schedule-path.hover-clone { opacity: 1; filter: brightness(150%); transition: opacity var(--anim-duration-medium); @starting-style { opacity: 0; } } .train-graph .grid-line { stroke: var(--style-background-accent-thin); stroke-width: 1px; /* stroke-dasharray: 10, 5; */ } .train-graph .timeline-scale { height: auto; position: relative; } .train-graph .timeline-scale .date-scale { position: absolute; height: var(--style-label-height); left: 0; display: flex; } .train-graph .timeline-scale .date-scale .day { border-right: var(--border-regular); display: flex; position: relative; z-index: 3; } .train-graph .timeline-scale .date-scale .day .date { background-color: var(--style-background-secondary); border-right: var(--border-regular); width: var(--train-graph-y-axis-width); transform: translateX(calc(var(--train-graph-y-axis-width) * -1)); height: var(--style-label-height); display: flex; justify-content: end; padding: 0 var(--style-padding-small); align-items: center; z-index: 3; } .train-graph .timeline-scale .date-scale .date { position: sticky; align-self: center; display: inline; left: var(--train-graph-y-axis-width) } .train-graph .timeline-scale .time-scale { position: relative; height: var(--style-label-height); z-index: 2; } .train-graph .timeline-scale .time-scale .scale-hour:first-of-type { opacity: 0; } .train-graph .timeline-scale .time-scale .scale-hour:nth-of-type(2n) span { color: var(--style-text-tertiary); } /* #region Train Graph Selection Colors */ svg.train-graph:has(#selected-group:not(:empty)) #schedules .schedule-path { /* stroke: rgb(62, 62, 62) !important; */ } /* #endregion */ /* #region Bound Data Report */ .bound-data-report { min-height: 100%; max-height: 100%; width: 100%; } .bound-data-report-controls { display: flex; width: 100%; justify-content: center; align-items: baseline; border-bottom: var(--border-regular); padding: var(--style-padding-tiny) 0; } .information-panel { width: 100%; height: 100%; padding: var(--style-padding-xlarge); display: flex; flex-direction: row; align-items: center; justify-content: center; } .information-panel .info-body { max-width: 640px; } .information-panel .info-body > * { margin: var(--style-padding-tiny) 0; } .information-panel .info-body > *:first-child { margin-top: 0; } .information-panel .info-body > *:last-child { margin-bottom: 0; } .information-panel .info-body h1 { font-size: var(--font-size-subtitle); } .settings-layout { display: flex; align-items: start; justify-content: center; margin: 0; width: 100%; height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; text-wrap: pretty; } .settings-layout.padding { padding: var(--style-padding-xxxlarge) var(--style-padding-xlarge) var(--style-padding-xxxlarge); } .settings-layout.padding-small { padding: var(--style-padding-medium); } .ott-inspector .settings-layout { padding-left: var(--style-padding-medium); padding-right: var(--style-padding-medium); } .settings-layout form { display: contents; } .settings-layout .settings-layout-headline, .settings-layout .settings-layout-content, .settings-layout .settings-layout-body { flex-grow: 1; max-width: 640px; display: flex; flex-direction: column; flex-wrap: nowrap; } .settings-layout .settings-layout-headline { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--style-padding-medium); } .settings-layout .settings-layout-headline .icon > * { width: auto; height: 48px; } .settings-layout .settings-layout-headline h1 { font-size: var(--font-size-title2); font-weight: 500; } .settings-layout .settings-layout-headline body { display: flex; flex-direction: column; gap: var(--style-padding-small); } .settings-layout .settings-layout-headline .settings-layout-description * { font-size: var(--font-size-subtitle); } .settings-layout .settings-layout-headline .settings-layout-description > *:not(:last-child) { margin-bottom: var(--style-padding-medium); } .settings-layout .settings-layout-content { gap: var(--style-padding-xlarge); } .settings-layout .settings-layout-body { gap: var(--style-padding-large); padding-bottom: var(--style-padding-xxxlarge); } .settings-layout.padding-small .settings-layout-body { padding-bottom: 0; } .ott-inspector .settings-layout .settings-layout-body { gap: var(--style-padding-large); } .settings-group { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--style-padding-small); transition: opacity var(--anim-duration-medium); opacity: 1; @starting-style { opacity: 0; } } .settings-group .settings-group-header { display: flex; flex-direction: column; gap: var(--style-padding-tiny); } .ott-inspector .settings-group .settings-group-header { padding-left: var(--style-padding-medium); padding-right: var(--style-padding-medium); } .settings-group-header-body { display: flex; flex-direction: column; align-items: start; gap: var(--style-padding-tiny); } .settings-group-header-body h2 { margin-top: var(--style-padding-medium); margin-bottom: var(--style-padding-tiny); font-size: var(--font-size-subtitle); font-weight: 500; } .settings-group .settings-group-body { background-color: var(--style-background-quarternary); /* background-color: var(--style-background-accent-thin); */ border-radius: var(--style-border-radius-tiny); overflow: hidden; } .settings-group-footer-content { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--style-padding-medium); padding: 0 var(--style-padding-medium); } .settings-group-footer-content > *:empty { display: none; } .settings-group .settings-group-body > .settings-item:not(:last-of-type)::after, .settings-group .settings-item.add-border::after, .settings-group .setting-item-group > .settings-item:not(:last-of-type)::after { content: ''; display: block; height: 0.5px; background-color: var(--style-background-accent-regular); width: calc(100% - (var(--style-padding-large) * 2)); margin: 0 var(--style-padding-large); } .ott-inspector .settings-group .settings-item::after { margin: 0 var(--style-padding-medium) !important; width: calc(100% - (var(--style-padding-medium) * 2)) !important; } .settings-group .settings-group-actions { display: flex; flex-direction: row; justify-content: end; gap: var(--style-padding-small); } .settings-item { container-type: inline-size; } .settings-item h3 { font-size: 13px; font-weight: 500; margin: 0; } .settings-item.link:hover { background-color: var(--style-background-accent-ultrathin); } .settings-item .setting-icon { flex-grow: 0; flex-shrink: 1; align-items: center; display: flex; } .settings-item.link button[type=submit] { width: 100%; display: inline-block; } .settings-item.qr-svg svg { width: 300px; height: 300px; } .settings-item .setting-content { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: var(--style-padding-medium); padding: var(--style-padding-large); } .settings-item .setting-content-custom { display: flex; width: 100%; height: auto; gap: var(--style-padding-medium); flex-direction: column; } .settings-item.custom.padding .setting-content-custom { padding: var(--style-padding-medium) var(--style-padding-large); } .settings-item .setting-content-custom.text { display: block; } .settings-item:focus { background-color: var(--style-background-accent-thin); outline: none; } .settings-item:not(.no-wrap) .setting-content { @container (max-width: 400px) { flex-direction: column; justify-content: center; align-items: start; } } .ott-inspector .setting-content { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; } .settings-item.compact .setting-content { padding-top: var(--style-padding-medium); padding-bottom: var(--style-padding-medium); } .ott-inspector .setting-content { padding: var(--style-padding-medium) !important; } .settings-item .setting-body { display: flex; flex-grow: 1; flex-direction: column; align-items: start; justify-content: start; overflow: hidden; } .settings-item.wide-control .setting-body { flex-grow: 0; flex-shrink: 1; } .settings-item.wide-control .setting-control { flex-grow: 1; flex-shrink: 0; } .settings-item .setting-body .setting-headline, .settings-item .setting-body .setting-description { overflow: hidden; display: block; max-width: 100%; } .settings-item .setting-body .setting-headline > *, .settings-item .setting-body .setting-description > * { text-overflow: ellipsis; overflow: hidden; } .settings-item .setting-control { display: flex; flex-direction: row; align-items: center; justify-content: end; gap: var(--style-padding-small); max-width: 240px; } .settings-item.wide-control .setting-control { max-width: 100%; } .settings-item.disabled * { color: var(--style-text-tertiary) !important; } .settings-item.disabled p { color: var(--style-text-quarternary) !important; } /* BESPOKE */ .setting-control input.text, .setting-control textarea { width: 220px; max-width: 100%; min-width: 180px; resize: vertical; } .setting-control textarea { min-height: 72px; } /* BESPOKE */ input.text, input[type=checkbox], input[type=date], input[type=number], textarea { outline: none; appearance: none; border: none; background-color: transparent; cursor: text; height: var(--style-input-height); } input.text, input[type=date], input[type=number], textarea, .input-suffix, .input-prefix { border-radius: var(--style-border-radius); border: 1px solid; border-color: var(--style-background-accent-regular); padding: var(--style-padding-table) var(--style-padding-small); color: var(--style-text-primary); font-size: var(--font-size-heading); transition-duration: var(--anim-duration-short); outline: 1px solid transparent; } .input-suffix, .input-prefix { color: var(--style-text-tertiary); display: flex; align-items: center; } .input-suffix { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 0; } input:has(+ .input-suffix) { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: var(--style-padding-tiny); } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { width: var(--style-padding-xxxlarge); text-align: right; -moz-appearance: textfield; } .input-wrap { gap: 0; display: flex; flex-direction: row; flex-wrap: nowrap; } /* #region Input - Text */ input.text.full-width { width: 100%; } input.text:hover:not(:disabled) { border-color: var(--style-background-accent-thick); } input.text:focus:not(:disabled) { border-color: var(--color-accent); outline-color: var(--color-accent); } input:disabled, input.text:disabled, textarea:disabled { cursor: default; color: var(--style-text-tertiary); user-select: none; } /* #endregion */ /* #region Input - Button */ /* #endregion */ /* #region Input - Date */ .dark-mode input[type=date]::-webkit-calendar-picker-indicator { color-scheme: dark; } /* #endregion */ /* #region Access Denied Page */ .access-denied { text-align: center; } /* #endregion */ /* #region Inspector Property Grid */ .inspector-header-property-grid { } .ih-property-grid { display: grid; flex-grow: 1; grid-template-columns: 1fr 1fr 1fr; gap: var(--style-padding-small); } .ih-property-grid .property-item { background-color: rgba(0, 0, 0, 0.15); padding: var(--style-padding-small); border-radius: var(--style-border-radius); } .ih-property-grid .property-item .label { opacity: 0.75; font-size: var(--font-size-small); } .ih-property-grid .property-item .value { font-size: var(--font-size-body); } /* #endregion */ /* #region Inspector Header */ .inspector-header { position: relative; } .inspector-header .content { padding: var(--style-padding-xlarge) 0 0; position: relative; display: flex; flex-direction: column; gap: var(--style-padding-small); z-index: 0; } .inspector-header.large .content { padding-top: var(--icon-size-xlarge); } .inspector-header .content .background { position: absolute; bottom: 0; left: 0; width: 100%; height: 100vh; z-index: -1; } .dark-mode .inspector-header .content .background { opacity: 0.8; } .inspector-header .content > *:not(.formation) { padding-right: var(--style-padding-large); padding-left: var(--style-padding-large); } .inspector-header .content > :last-child:not(.formation) { padding-bottom: var(--style-padding-xlarge); } .inspector-header h1, .inspector-header h1 span, .inspector-header h2, .inspector-header h2 span { font-size: var(--font-size-title3); text-wrap: balance; line-height: 1.1; font-weight: 600; } .inspector-header h2 { opacity: 0.8; font-size: var(--font-size-subtitle); line-height: 0.8; } .inspector-header.large h1 { font-size: var(--font-size-title2); letter-spacing: 0em; font-weight: 600; } .inspector-header .brand-icon { box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.2); } .inspector-header.large .brand-icon { box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.2); } .inspector-header .headline-icon-group { display: grid; grid-template-columns: auto 1fr auto; gap: var(--style-padding-medium); align-items: center; } .inspector-header .headline-icon-group .shortcut { align-self: start; } .inspector-header .headline-large { display: flex; flex-direction: column; gap: var(--style-padding-medium); } .inspector-header .headline-stack { display: flex; flex-direction: column; justify-content: start; gap: var(--style-padding-tiny); } .inspector-header .headline-stack.route h1, .inspector-header .headline-stack.route h1 span, .inspector-header .headline-stack.route h2, .inspector-header .headline-stack.route h2 span { font-size: var(--font-size-subtitle); } .inspector-header span.format-time-only { margin: 0 var(--style-padding-tiny); } .inspector-header span.secondary { opacity: 0.7; } .inspector-header .ih-property-grid { margin-top: var(--style-padding-medium); } /* #endregion */ /* #region spinner */ @keyframes spinner { 0% { transform: translate3d(-50%, -50%, 0) rotate(0deg); } 100% { transform: translate3d(-50%, -50%, 0) rotate(360deg); } } .spin::before { animation: 1.5s linear infinite spinner; animation-play-state: inherit; border: solid 3px #cfd0d1; border-bottom-color: #1c87c9; border-radius: 50%; content: ""; height: 12px; width: 12px; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); will-change: transform; } .schedule-diagram-summary-dates { display:flex; flex-direction:row; justify-content: space-between; align-items:center; padding: var(--style-padding-small) var(--style-padding-medium) 0 var(--style-padding-small); } .schedule-diagram-active-dates { padding-left: var(--style-padding-large); padding-bottom: var(--style-padding-small); display: flex; flex-direction:column; justify-content: center; align-items:center; } .schedule-diagram-summary-date-button { align-self: flex-end; } .schedule-diagram-summary .diag-summary-grid-scroll { overflow-y: hidden; overflow-x: auto; min-width: 100%; max-width: 100%; width: 100%; padding-top: var(--style-padding-tiny); padding-bottom: var(--style-padding-tiny); padding-right: var(--style-padding-xlarge); padding-left: 0; } .schedule-diagram-summary .diag-summary-grid { display: grid; gap: 0; position: relative; } .schedule-diagram-summary .diag-summary-row { display: contents; } .schedule-diagram-summary .diag-summary-row.row-header span, .schedule-diagram-summary .diag-summary-row.row-footer span { color: var(--style-text-tertiary); } .schedule-diagram-summary .diag-summary-row.vehicle .diag-summary-row-label { position: sticky; left: 0; min-width: 60px; } .schedule-diagram-summary .diag-summary-row.vehicle .diag-summary-row-label > * { position: absolute; bottom: 0; right: var(--style-padding-small); } .schedule-diagram-summary .diag-summary-row:not(.vehicle) .diag-summary-row-label { padding-left: var(--style-padding-medium); } .schedule-diagram-summary .diag-summary-row > * { margin-top: var(--style-padding-tiny); margin-bottom: var(--style-padding-tiny); } .schedule-diagram-summary .diag-summary-row:nth-of-type(2) > * { margin-top: var(--style-padding-small); } .schedule-diagram-summary .diag-summary-row:nth-last-of-type(2) > * { margin-bottom: var(--style-padding-small); } .schedule-diagram-summary .diag-summary-row-label { grid-column-start: 1; padding-right: var(--style-padding-medium); } .schedule-diagram-summary .diag-summary-row-leg { border: var(--border-regular); background-color: var(--style-background-accent-thin); border-radius: var(--style-border-radius); z-index: 1; backdrop-filter: blur(2px); text-align: center; } .schedule-diagram-summary .diag-summary-row-leg.pass-ride { border-style: dashed; } .schedule-diagram-summary .diag-summary-row-leg span { font-size: var(--font-size-small); } .schedule-diagram-summary .diag-summary-label { position: relative; justify-self: end; transform: translateX(50%); } .schedule-diagram-summary .location-mark { width: 1px; height: auto; background-color: transparent; border-right: 1.5px dashed var(--style-background-accent-regular); z-index: 0; } /* #region Location Report Map Picker */ .loc-rep-map-sel-content { display: block; top: 0; left: 0; right: 0; position: absolute; z-index: 1; padding: var(--style-padding-large) var(--style-padding-large) var(--style-padding-medium); backdrop-filter: blur(96px); border-bottom: var(--border-regular); pointer-events: none; } .loc-rep-map-sel-title { max-width: 560px; fill: var(--primary-location-text-fill); stroke: var(--primary-location-text-stroke); stroke-linejoin : round; } .loc-rep-map-sel-content text.heading { font-size: var(--font-size-title3); font-weight: 600; stroke-width: 5px; } .loc-rep-map-sel-content text.subheading { font-size: var(--font-size-subtitle); font-weight: 600; stroke-width: 2.5px; } /* #endregion */ /* #region Location Inspector */ .loc-inspect-operator-list { width: 100%; padding: 0 var(--style-padding-tiny); } .loc-inspect-operator-list td { padding: var(--style-padding-small) 0; padding-right: var(--style-padding-small); } .loc-inspect-operator-list td:first-of-type { padding-left: var(--style-padding-small); border-top-left-radius: var(--style-border-radius); border-bottom-left-radius: var(--style-border-radius); } .loc-inspect-operator-list td:last-of-type { border-top-right-radius: var(--style-border-radius); border-bottom-right-radius: var(--style-border-radius); } .loc-inspect-operator-list tr:nth-of-type(2n+2) td { background-color: var(--style-background-accent-ultrathin); } .loc-inspect-operator-list td.name { width: 100%; } .loc-inspect-operator-list td.trains { text-align: right; } .loc-inspect-header { position: relative; } .loc-inspect-header .background { background-color: #E6001E; bottom: 0; left: 0; right: 0; height: 200%; position: absolute; z-index: 0; } .loc-inspect-header .content { display: flex; flex-direction: column; align-items: center; padding: var(--style-padding-xlarge); padding-bottom: var(--style-padding-large); position: relative; } .loc-inspect-header * { color: #fff; } .loc-inspect-header figure { margin-bottom: var(--style-padding-tiny); } .loc-inspect-header h1 { font-size: var(--font-size-title2); font-weight: 600; } /* #endregion */ /* #region Location Report */ /* .location-platform { display: flex; justify-content: center; padding: var(--style-padding-tiny); border-bottom: var(--border-regular); position: relative; } .location-timeline { overflow-y: auto; overflow-x: hidden; display: grid; grid-template-columns: [in-brand] 28px [in-headcode] auto [from] minmax(100px, 160px) [in-stage] 42px [vehicle] auto [cars] auto [in-line] 36px [in-plat] 36px [timeline] minmax(360px, 1fr) [out-plat] 36px [out-line] 36px [out-headcode] auto [to] minmax(100px, 160px) [out-stage] 42px [out-brand] 28px; align-items: center; position: relative; z-index: 10; } .location-timeline > *:not(.loc-timeline-diagram-row) { grid-column: 1 / -1; } .loc-timeline-diagram-row, .location-timeline .leading, .location-timeline .leading .content, .location-timeline .leading .content .arr-grid, .location-timeline .trailing, .location-timeline .trailing .content, .location-timeline .trailing .content .dep-grid { display: contents; } */ /* #region Schedule List General Styling */ /* .location-timeline .cell { position: relative; } .location-timeline .cell > * { z-index: 1; } .location-timeline .arr-grid > *, .location-timeline .dep-grid > * { height: var(--timeline-row-height); display: flex; align-items: center; } .location-timeline .line-code-content, .location-timeline .plat-content { height: var(--timeline-row-height); } .location-timeline .arr-grid > * { padding-left: var(--style-padding-small); } .location-timeline .dep-grid > * { padding-right: var(--style-padding-small); } .location-timeline .arr-grid > *:last-child { border-right: var(--border-regular); padding-right: var(--style-padding-small); } .location-timeline .dep-grid > *:first-child { border-left: var(--border-regular); padding-left: var(--style-padding-small); } */ /* #endregion */ /* #region Schedule List Location Info */ .location-timeline .cell, .location-timeline .cell { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .location-timeline .cell span:not(.plan-stage) { max-width: 100%; text-overflow: ellipsis; overflow: hidden; } .location-timeline .cell.cars { justify-content: end; } /* #endregion */ /* #region Schedule List Plan Stage */ .location-timeline span.plan-stage { border-radius: var(--style-border-radius); border-width: 1.5px; border: var(--border-regular); padding: 2px var(--style-padding-tiny); color: var(--style-text-quarternary); } /* #endregion */ /* #region Schedule List Plat/Line Codes */ .location-timeline .line-icon, .location-timeline .plat-icon { background-color: var(--style-background-quarternary); border: var(--border-regular); border-radius: var(--style-border-radius); height: var(--timeline-row-inner-height); width: var(--timeline-row-inner-height); display: flex; justify-content: center; align-items: center; overflow: hidden; } .location-timeline .line-icon span, .location-timeline .plat-icon span { font-size: var(--font-size-small); } .location-timeline .line-code-content, .location-timeline .plat-content { display: flex; align-items: center; } .location-timeline .leading .line-code-content, .location-timeline .leading .plat-content { justify-content: start; } .location-timeline .leading .line-icon { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; } .location-timeline .trailing .line-code-content, .location-timeline .trailing .plat-content { justify-content: end; } .location-timeline .trailing .line-icon { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; } /* #endregion */ /* #region Schedule List Outer Timeline */ .loc-timeline-diagram-row.main-event-dep .leading, .loc-timeline-diagram-row.main-event-arr .trailing { color: var(--style-text-quarternary); } .loc-timeline-diagram-row .plat-move-timeline { height: var(--timeline-row-height); display: flex; } .loc-timeline-diagram-row .schedule-list-timeline-wrap { height: var(--timeline-row-height); width: 100%; display: block; padding: 0 48px; } .loc-timeline-diagram-row .schedule-list-timeline { display: flex; justify-content: center; align-items: center; padding: var(--style-padding-tiny); overflow: visible; position: relative; height: var(--timeline-row-height); } /* #endregion */ /* #region Schedule List Inner Timeline */ .location-timeline .move-shunt { position: absolute; height: var(--timeline-row-height); width: 0px; overflow: hidden; } .location-timeline .move-shunt .move-shunt-content { position: relative; width: 100%; height: 100%; } .location-timeline .move-shunt .move-background { width: 100%; top: var(--timeline-row-padding); bottom: var(--timeline-row-padding); position: absolute; z-index: 0; border: 1.5px solid var(--style-background-accent-regular); border-radius: var(--style-border-radius); background-color: var(--style-background-accent-thin); } .location-timeline .move-position { position: absolute; height: var(--timeline-row-height); width: 0px; background-color: orange; overflow: visible; } .location-timeline .move-position .move-wrap { position: absolute; height: var(--timeline-row-height); width: auto; display: flex; justify-content: center; align-items: center; } .location-timeline .move-position.non-stop .move-wrap { transform: translateX(-50%); } .location-timeline .move-position.arr .move-wrap { right: 0px; } .location-timeline .move-position.dep .move-wrap { left: 0px; } .location-timeline .move-position .move-background { width: 100%; top: var(--timeline-row-padding); bottom: var(--timeline-row-padding); position: absolute; z-index: 0; border: 1.5px solid var(--style-background-accent-thick); } .location-timeline .move-position .move-background.coupled-above { top: 0; border-top: none; } .location-timeline .move-position .move-background.coupled-below { bottom: 0; border-bottom: none; } .location-timeline .move-position.arr .move-background.coupled-above { border-top-right-radius: 0 !important; } .location-timeline .move-position.arr .move-background.coupled-below { border-bottom-right-radius: 0 !important; } .location-timeline .move-position.dep .move-background.coupled-above { border-top-left-radius: 0 !important; } .location-timeline .move-position.dep .move-background.coupled-below { border-bottom-left-radius: 0 !important; } .location-timeline .move-shunt .move-background.coupled-above { top: 0; border-top: none; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } .location-timeline .move-shunt .move-background.coupled-below { bottom: 0; border-bottom: none; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } .location-timeline .move-position.arr.dep-main-event .move-background, .location-timeline .move-position.dep.arr-main-event .move-background, .location-timeline .move-position.no-main-event .move-background{ border-color: var(--style-background-accent-regular) !important; background-color: transparent !important; } .location-timeline .move-position.arr.dep-main-event *, .location-timeline .move-position.dep.arr-main-event *, .location-timeline .move-position.no-main-event *{ color: var(--style-text-quarternary) !important; } .location-timeline .move-position.arr.dep-main-event svg .icon-stroke, .location-timeline .move-position.dep.arr-main-event svg .icon-stroke, .location-timeline .move-position.no-main-event svg .icon-stroke { stroke: var(--style-text-quarternary); } .location-timeline .move-position.arr.dep-main-event svg .icon-fill, .location-timeline .move-position.dep.arr-main-event svg .icon-fill, .location-timeline .move-position.no-main-event svg .icon-fill { fill: var(--style-text-quarternary); } .location-timeline .move-position.arr .move-background { border-left: none; -webkit-mask-image: linear-gradient(90deg, transparent 0px, black 60%); mask-image: linear-gradient(90deg, transparent 0px, black 60%); } .location-timeline .move-position.arr:not(.through) .move-background { border-top-right-radius: var(--style-border-radius); border-bottom-right-radius: var(--style-border-radius); } .location-timeline .move-position.dep .move-background { border-right: none; -webkit-mask-image: linear-gradient(-90deg, transparent 0px, black 60%); mask-image: linear-gradient(-90deg, transparent 0px, black 60%); } .location-timeline .move-position.dep:not(.through) .move-background { border-top-left-radius: var(--style-border-radius); border-bottom-left-radius: var(--style-border-radius); } .location-timeline .move-position.non-stop .move-background { border-left: none; border-right: none; -webkit-mask-image: linear-gradient(-90deg, transparent 0px, black 20%, black 80%, transparent 100%); mask-image: linear-gradient(-90deg, transparent 0px, black 20%, black 80%, transparent 100%); } .location-timeline .move-position .move-content { padding: 0 var(--style-padding-small); position: relative; z-index: 1; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--style-padding-tiny); } .location-timeline .move-position.non-stop .move-content { padding-left: var(--style-padding-xxlarge); padding-right: var(--style-padding-xxlarge); font-style: italic; } .location-timeline .move-position.arr .move-content { padding-left: var(--style-padding-large); } .location-timeline .move-position.dep .move-content { padding-right: var(--style-padding-large); } /* #endregion */ /* #region Schedule List Alternative Color */ .location-timeline .alternate .leading:not(.usage-goods, .usage-empty) .cell, .location-timeline .alternate .trailing:not(.usage-goods, .usage-empty) .cell, .location-timeline .alternate .line-code-content, .location-timeline .alternate .plat-content, .location-timeline .alternate .plat-move-timeline { background-color: var(--style-background-timeline-alternate); } .location-timeline .leading .cell:last-of-type, .location-timeline .trailing .cell:first-of-type { overflow: visible; } .location-timeline .leading.usage-goods .cell:last-of-type::before, .location-timeline .leading.usage-empty .cell:last-of-type::before, .location-timeline .trailing.usage-goods .cell:first-of-type::before, .location-timeline .trailing.usage-empty .cell:first-of-type::before { display: block; position: absolute; content: ''; top: 0; height: 100%; width: 100vw; z-index: -1; } .location-timeline .leading.usage-goods .cell:last-of-type::before, .location-timeline .trailing.usage-goods .cell:first-of-type::before { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 13px, var(--style-background-accent-ultrathin) 13px, var(--style-background-accent-ultrathin) 26px); } .location-timeline .leading.usage-empty .cell:last-of-type::before, .location-timeline .trailing.usage-empty .cell:first-of-type::before { background-image: linear-gradient(45deg, var(--style-background-accent-ultrathin) 25%, transparent 25%), linear-gradient(135deg, var(--style-background-accent-ultrathin) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--style-background-accent-ultrathin) 75%), linear-gradient(135deg, transparent 75%, var(--style-background-accent-ultrathin) 75%); background-size: 18px 18px; background-position: 0 0, 9px 0, 9px -9px, 0px 9px; } .location-timeline .leading .cell:last-of-type::before { right: 0; } .location-timeline .trailing .cell:first-of-type::before { left: 0; } /* #endregion */ /* #region Schedule List Animation */ .schedule-list-timeline.anim .move-position, .schedule-list-timeline.anim .move-shunt { transition-duration: var(--anim-duration-long); transition-delay: var(--anim-duration-medium); transition-behavior: allow-discrete; opacity: 1; @starting-style { opacity: 0; } } .schedule-list-timeline.anim .cell span { transition-duration: var(--anim-duration-long); transition-delay: var(--anim-duration-medium); transition-behavior: allow-discrete; opacity: 1; @starting-style { opacity: 0; } } .schedule-list-timeline.anim .move-position.arr, .schedule-list-timeline.anim .move-shunt.arr { @starting-style { transform: translateX(-16px); } } .schedule-list-timeline.anim .move-position.dep, .schedule-list-timeline.anim .move-shunt.dep { @starting-style { transform: translateX(16px); } } @media (prefers-reduced-motion: reduce) { .schedule-list-timeline.anim .move-position, .schedule-list-timeline.anim .move-shunt { transition-duration: 0; opacity: 1; @starting-style { opacity: 1; } } .schedule-list-timeline.anim .cell span { transition-duration: 0; opacity: 1; @starting-style { opacity: 1; } } .schedule-list-timeline.anim .move-position.arr, .schedule-list-timeline.anim .move-shunt.arr { @starting-style { transform: translateX(0); } } .schedule-list-timeline.anim .move-position.dep, .schedule-list-timeline.anim .move-shunt.dep { @starting-style { transform: translateX(0); } } } /* #endregion */ /* #region Schedule List Selective Hiding */ .location-timeline .arr-hidden .cell.brand *, .location-timeline .arr-hidden .cell.headcode *, .location-timeline .arr-hidden .cell.from *, .location-timeline .arr-hidden .cell.stage * { display: none; } .location-timeline .dep-hidden .cell.brand *, .location-timeline .dep-hidden .cell.headcode *, .location-timeline .dep-hidden .cell.to *, .location-timeline .dep-hidden .cell.stage * { display: none; } /* #endregion */ @container ott-content-container (max-width: 1080px) { .location-timeline { grid-template-columns: [in-brand] 28px [in-headcode] 48px [from] minmax(100px, 160px) [in-stage] 42px [vehicle] 48px [cars] 54px [in-line] 48px [in-plat] 36px [timeline] auto [out-plat] 36px [out-line] 48px [out-headcode] 48px [to] minmax(100px, 160px) [out-stage] 42px [out-brand] 28px; } .location-timeline .arr-grid>*:last-child { border-right: none; } .location-timeline .dep-grid>*:first-child { border-left: none; } .location-timeline .leading .line-icon { border-top-left-radius: var(--style-border-radius); border-bottom-left-radius: var(--style-border-radius); border-left: var(--border-regular); } .location-timeline .trailing .line-icon { border-top-right-radius: var(--style-border-radius); border-bottom-right-radius: var(--style-border-radius); border-right: var(--border-regular); } .location-timeline .line-code-content, .location-timeline .plat-content { justify-content: center !important; } } /* #endregion */ .diagram-stats-container { padding: var(--style-padding-xxlarge) var(--style-padding-large); display: flex; flex-direction: column; flex-wrap: nowrap; } .diagram-stats-chart { width: 100%; min-height: 400px; margin-bottom: var(--style-padding-xxlarge); } /* #region Login Screens */ body:has(main.login) { background-color: var(--style-background-primary-dark); } main.login { padding: 20vh var(--style-padding-xxlarge) var(--style-padding-xxlarge); display: flex; flex-direction: column; justify-content: start; align-items: center; text-align: center; position: relative; background-color: var(--style-background-primary-dark); z-index: 0; } main.login:has(.privacy-policy) { padding-top: var(--style-padding-xlarge); padding-bottom: var(--style-padding-xlarge); justify-content: center; } main.login:has(.privacy-policy) .wrap { max-width: 560px; } main.login section.privacy-policy { max-height: 360px; overflow-x: hidden; overflow-y: scroll; text-align: justify; border: var(--border-regular); padding: var(--style-padding-medium); border-radius: var(--style-border-radius); align-items: start; user-select: text; } main.login .privacy-policy ul { list-style: unset; margin: unset; padding: unset; } main.login .privacy-policy p { max-width: initial; } main.login .privacy-policy * { font-size: var(--font-size-body); user-select: text; cursor: text; } main.login .background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; } main.login .validation-message { text-align: left; } main.login .background .glyph-upper { position: absolute; left: 25vw; top: -20vh; width: 100vw; height: 70vh; display: flex; justify-content: start; align-items: end; opacity: 0.15; } main.login .background .glyph-lower { position: absolute; top: 60vh; right: 60vw; width: 50vw; height: 30vh; display: flex; justify-content: end; align-items: start; opacity: 0.15; } main.login .background span.copyright { width: 100%; position: absolute; bottom: var(--style-padding-small); left: 0; font-size: var(--font-size-small); color: var(--style-text-quarternary-dark); } main.login .wrap { display: block; max-width: 420px; width: 100%; background-color: var(--style-background-accent-ultrathin); border: var(--border-regular); border-radius: var(--style-border-radius-small); padding: var(--style-padding-xxlarge) var(--style-padding-xlarge) var(--style-padding-xxlarge); overflow-x: hidden; overflow-y: auto; scrollbar-width: 0px; backdrop-filter: blur(12px); transition: var(--anim-duration-long); transition-delay: var(--anim-duration-short); opacity: 1; /* background-color: var(--style-background-tertiary); box-shadow: 0 0 8px rgba(0, 0, 0, 0.4), 0 0 36px rgba(0, 0, 0, 0.4); */ } main.login .body { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--style-padding-large); } main.login h1, main.login h2 { font-size: var(--font-size-title3); font-weight: 500; letter-spacing: 0.02em; color: var(--style-text-primary-dark); } main.login h2 { font-size: 16px; } main.login p { font-size: 14px; text-wrap: pretty; max-width: 320px; color: var(--style-text-secondary-dark); } main.login .privacy-policy li p { color: var(--style-text-secondary-dark); } main.login a { color: var(--style-text-secondary-dark); font-size: 14px; } main.login a:hover { text-decoration: underline; } main.login a:hover::before, main.login a:hover::after { text-decoration: none; } main.login section { display: flex; flex-direction: column; align-items: center; justify-content: start; gap: var(--style-padding-medium); } main.login footer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--style-padding-small); } main.login footer, main.login footer * { color: var(--style-text-quarternary-dark); text-align: center; font-size: var(--font-size-body); text-wrap: balance; } main.login button { display: inline-flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; padding: var(--style-padding-small) var(--style-padding-medium); width: 100%; height: 42px; border-radius: var(--style-border-radius-tiny); border: 1px solid var(--style-background-accent-thin); gap: var(--style-padding-small); background-color: var(--style-background-accent-thin); transition-duration: var(--anim-duration-short); outline: 1px solid transparent; font-weight: 500; font-size: 13px; } main.login button:hover:not(:disabled) { background-color: var(--style-background-accent-regular); } main.login button:focus { /* outline-color: #ffffff89 !important; */ outline-color: #ffffff89 var(--style-background-accent-thick); background-color: var(- -style-background-accent-regular); } main.login li.validation-message { opacity: 1; transform-origin: top center; transition-delay: var(--anim-duration-long); transition: var(--anim-duration-medium); transform: scale(1); @starting-style { opacity: 0; transform: scale(0.95); } } main.login form, main.login .external-login-providers { width: 100%; display: flex; justify-content: center; align-self: center; flex-direction: column; gap: var(--style-padding-small); text-align: center; } main.login form.email-login { margin-top: var(--style-padding-large); } main.login .reset-confirm { gap: var(--style-padding-large); } main.login button.external-login svg.external-icon { width: 24px; height: 24px; } main.login .input-wrap { display: flex; align-items: center; justify-content: center; } main.login label { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: var(--style-padding-tiny); } main.login form.email-login .input-wrap { position: relative; } main.login .input-wrap label.hidden { position: absolute; width: 1px; height: 1px; clip: rect(0px, 0px, 0px, 0px); opacity: 0; } main.login input.text { width: 100%; height: 42px; font-size: 14px; border-radius: var(--style-border-radius-tiny); background-color: var(--style-background-accent-ultrathin); font-weight: 500; } main.login input.text:focus { outline-color: #ffffff89 !important; border-color: #ffffff89 !important; } input.twofa { text-align: center; } /* #endregion */ /* #region Date Validity Picker */ .dv-picker { min-width: 48px; height: 24px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; justify-content: space-between; } .dv-picker-banner, .dv-picker-banner * { cursor: pointer; } .dv-picker-bar-wrap { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: var(--style-padding-tiny); transition: var(--anim-duration-ultrashort); padding-left: var(--style-padding-small); padding-right: var(--style-padding-tiny); border-radius: var(--style-border-radius); } .dv-picker-bar-wrap:hover { background-color: var(--style-background-accent-thin); } .dv-picker-bar-wrap svg .icon-fill { fill: var(--style-text-primary); } .dv-picker-bar-wrap svg .icon-stroke { stroke: var(--style-text-primary); } .dv-picker-bars { height: 24px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; flex-grow: 1; max-width: 100%; } .dv-picker-bars .dv-picker-bar { width: 6px; height: 6px; border-radius: 3px; transform: scale(0.7); background-color: var(--style-text-quarternary); margin: 0 1.5px; transition: var(--anim-duration-short); } .dv-picker-bars .dv-picker-bar.active { transform: scale(1); background-color: var(--style-text-primary); } .dv-picker-current * { font-size: var(--font-size-small); white-space: nowrap; text-overflow: hidden; } .dv-picker-popover { min-width: 120px; max-width: inherit; max-height: inherit; display: flex; flex-direction: column; flex-wrap: nowrap; background-color: var(--style-background-secondary); border: var(--border-regular); border-radius: var(--style-border-radius-tiny); } .dv-picker-popover .dv-picker-calendar { padding: var(--style-padding-medium); overflow: none; } .dv-picker-popover .dv-picker-scroll { min-width: 100%; padding: var(--style-padding-small); border-top: var(--border-regular); overflow-y: auto; overflow-x: hidden; } .dv-picker-popover .dv-picker-options { display: flex; gap: 2px; flex-direction: column; justify-content: end; } .dv-picker-popover hr { display: block; height: 1px; width: 100%; background-color: transparent; border-bottom: 1.5px dashed var(--style-text-primary); opacity: 0.2; } button.dv-historic { padding: var(--style-padding-tiny); } button.dv-picker-date { display: flex; padding: 6px var(--style-padding-small) 5px; justify-content: right; border: 1px solid transparent; transition: var(--anim-duration-short); } button.dv-picker-date.selected span.date { color: var(--style-text-primary); } button.dv-picker-date:not(.selected, :hover) { opacity: 0.7; } button.dv-picker-date.context-date::before { content: ''; display: inline; width: 6px; height: 6px; margin-top: -1px; margin-right: var(--style-padding-small); border-radius: 50%; background-color: var(--style-text-ultra); } /* #endregion */ /* #region TFCP Editing */ .tfcp-table { display: grid; align-items: stretch; justify-content: start; min-width: 100%; gap: var(--style-padding-tiny) 0; } .tfcp-table .tfcp-row > * { display: flex; align-items: center; padding-top: 2px; padding-bottom: 2px; padding-right: var(--style-padding-small) } .tfcp-table .tfcp-row > *:first-of-type { padding-left: var(--style-padding-small); border-top-left-radius: var(--style-border-radius); border-bottom-left-radius: var(--style-border-radius); } .tfcp-table .tfcp-row > *:last-of-type { border-top-right-radius: var(--style-border-radius); border-bottom-right-radius: var(--style-border-radius); } .tfcp-loadings-table { grid-template-columns: [src] auto [loc] 1fr [weekdays] auto [loading] auto [measure] auto [edit] auto; } .tfcp-formation-table { grid-template-columns: [src] auto [formation] 1fr [weekdays] auto [seats] auto [standing] auto [wheelchair] auto [edit] auto; } .tfcp-loading-row, .tfcp-formation-row, .tfcp-formation-row { display: contents; } .tfcp-loading-row, .tfcp-formation-row > *:not(:last-of-type) { padding-right: var(--style-padding-small); } .tfcp-loading-row, .tfcp-formation-row.locked .loading { padding-right: var(--style-padding-small); } .tfcp-table .tfcp-row.inactive > * { background-color: var(--style-background-tertiary); color: var(--style-text-quarternary); opacity: 0.4; } .tfcp-table hr { width: 100%; height: 1px; background-color: var(--style-background-accent-regular); grid-column: 1 / -1; } .tfcp-table .count { text-align: right; } .tfcp-table button { padding: var(--style-padding-tiny); } /* tfcp settings page */ .selected-tfcp-week > div { background: rgb(150, 50, 50); } /* tfcp report */ .tfcp-above { background: var(--alert-error-primary) !important; color: #C8C8C8; } /* undo list */ .undo-table { width: 100%; } .undo-table th, .undo-table td { padding: 12px 15px; /*border: 1px solid #ddd;*/ text-align: left; } .undo-table thead { border-bottom: 1px solid #555; } /* tfcp schedule rows */ .row-detail-elements { display: flex; flex-direction: row; flex-wrap: nowrap; flex-grow: 1; justify-content: end; gap: var(--style-padding-small); padding-right: var(--style-padding-medium); } .rounded-detail-element { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; border: var(--border-regular); height: 24px; border-radius: 12px; padding: 0 var(--style-padding-small); justify-content: start; background-color: var(--style-background-secondary); transition: var(--anim-duration-ultrashort); } .rounded-detail-element .section { display: flex; align-items: center; gap: var(--style-padding-tiny); } .rounded-detail-element .section:not(:first-of-type) { border-left: var(--border-regular); padding-left: var(--style-padding-small); margin-left: var(--style-padding-small); } .rounded-detail-element:has(.pct-ctr):hover { background-color: var(--style-background-tertiary); } .basic-tooltip p, .basic-tooltip span { max-width: 360px; text-wrap: wrap; } .basic-tooltip table th, .basic-tooltip table td { padding: 2px 8px; } .basic-tooltip table th:first-of-type, .basic-tooltip table td:first-of-type { padding-left: 0; } .basic-tooltip table th:last-of-type, .basic-tooltip table td:last-of-type { padding-right: 0; } .basic-tooltip table th:nth-of-type(n+2), .basic-tooltip table td:nth-of-type(n+2) { text-align: right; } /* end tfcp schedule rows */ /* #endregion */ /* #region Home Page Content */ .tu-day-summary { display: flex; flex-direction: row; align-items: center; width: 100%; justify-content: start; } .tu-day-summary ul.tu-schedules { display: flex; flex-direction: row; gap: var(--style-padding-large); } .tu-day-summary ul.tu-schedules li { display: flex; align-items: center; gap: var(--style-padding-large); } .tu-day-summary ul.tu-schedules li span { font-size: var(--font-size-subtitle); color: var(--style-text-tertiary); } .tu-day-summary ul.tu-schedules li strong { font-size: var(--font-size-title2); } .tu-day-summary .tu-day-counts { display: flex; flex-direction: row; gap: var(--style-padding-large); align-items: center; } .tu-veh-count-summary { display: flex; flex-direction: column; background-color: var(--style-background-quarternary); justify-content: end; } .tu-veh-grid { display: grid; grid-template-columns: 180px 1fr auto auto; align-items: stretch; } .tu-veh-row { display: contents; } .tu-veh-row:nth-of-type(2n + 1) > * { background-color: var(--style-background-accent-ultrathin); } .tu-veh-row > * { align-items: center; display: flex; padding-top: var(--style-padding-small); padding-bottom: var(--style-padding-small); } .tu-veh-row > *:not(:first-child) { padding-left: var(--style-padding-xlarge); } .tu-veh-row > *:last-child { padding-right: var(--style-padding-xlarge); } .tu-veh-row h3 { font-size: var(--font-size-title3); } .tu-veh-row .key-stat { font-size: var(--font-size-subtitle); text-align: right; justify-self: stretch; justify-content: end; line-height: 1; color: var(--style-text-tertiary); } .tu-veh-row .key-stat strong.value { font-size: var(--font-size-title3); } li.tu-veh-upload { display: flex; justify-content: space-between; flex-direction: row; gap: var(--style-padding-xxxlarge); align-items: center; padding: var(--style-padding-small) 0; min-width: 220px } li.tu-veh-upload:not(:last-of-type) { border-bottom: var(--border-regular); } li.tu-veh-upload .age { display: flex; flex-direction: column; align-items: start; } li.tu-veh-upload .count { display: flex; flex-direction: column; align-items: end; gap: 0; } li.tu-veh-upload span { line-height: 1.2; } li.tu-veh-upload span.count { font-size: var(--font-size-title3); color: var(--style-text-primary); } .home-welcome { background-color: var(--style-background-tertiary); padding: var(--style-padding-xxlarge); padding-bottom: var(--style-padding-large); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: visible; height: 180px; } .home-glacier { position: absolute; transform: translateX(15%) translateY(-15%); z-index: 1; top: 0; right: 0; height: 110%; width: auto; opacity: 0.5; z-index: 0; } .home-glacier svg { height: 100%; } .home-brand { align-self: flex-end; z-index: 2; } .dark-mode .home-brand svg .icon-fill { fill: var(--style-text-primary); } .home-user { display: flex; flex-direction: column; line-height: 1.2; z-index: 3; } .home-user span.welcome { font-size: var(--font-size-title3); color: var(--style-text-tertiary); } .home-user span.name { font-size: var(--font-size-title); color: var(--style-text-primary); } .home-org { padding: var(--style-padding-xlarge) var(--style-padding-xxlarge) var(--style-padding-xlarge); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 200; background-color: var(--style-background-accent-ultrathin); backdrop-filter: blur(36px); margin-bottom: var(--style-padding-xlarge); } .light-mode .home-org { background-color: #dcdcdc49; } .home-org h1 { font-size: var(--font-size-title); font-weight: 500; } .home-org .environment { display: flex; align-items: center; gap: var(--style-padding-large); } .home-org .dates h1 { color: var(--style-text-tertiary); } .home-cards { padding: 0 var(--style-padding-xxlarge) var(--style-padding-xxxlarge); display: flex; flex-wrap: wrap; flex-direction: row; gap: var(--style-padding-xxlarge); } .home-card-column { display: flex; flex-direction: column; gap: var(--style-padding-large); min-width: 240px; max-width: 100%; } .home-card-column-header { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: end; padding-top: var(--style-padding-xlarge); } .home-card-column-header h1 { font-size: var(--font-size-title); color: var(--style-text-secondary); } .home-card-column.fleet { flex-grow: 3; flex-shrink: 0; } .home-card-column.integrations { flex-grow: 1; flex-shrink: 2; min-width: 360px; width: 360px; /* min-width: 360px; max-width: 480px; */ } .home-card { border-radius: var(--style-border-radius-small); overflow: hidden; background-color: var(--style-background-tertiary); } .home-card .home-card-header, .home-card .home-card-body { padding: var(--style-padding-large); display: flex; flex-direction: column; } .home-card .home-card-table { background-color: var(--style-background-quarternary); display: flex; flex-direction: column; border-top: var(--border-regular); padding-bottom: var(--style-padding-tiny); } .home-card .home-card-body { padding-top: var(--style-padding-small); padding-bottom: var(--style-padding-small); background-color: var(--style-background-quarternary); } .home-card .home-card-error { text-align: center; padding: var(--style-padding-large); } .home-card .home-card-error * { font-size: var(--font-size-subtitle); color: inherit; } .home-card .home-card-header.justify { flex-direction: row; justify-content: space-between; } .home-card .home-card-header span.eyebrow { background-color: var(--style-text-primary); color: var(--style-background-primary); text-transform: uppercase; height: 18px; display: inline-flex; font-size: 12px; font-weight: 700; padding: 0.5px var(--style-padding-small) 0; border-radius: 9px; } .home-card ul.home-card-row li { display: flex; justify-content: space-between; padding: var(--style-padding-small) 0; gap: var(--style-padding-xlarge); } .home-card ul.home-card-row li:not(:last-of-type) { border-bottom: var(--border-regular); border-bottom-width: 1.5px; } .home-card ul.home-card-row li span, .home-card ul.home-card-row li span strong { font-size: 14px; } /* #region QuickGrid Home Card */ .home-card table.quickgrid * { font-size: 13px; } .home-card table.quickgrid td { padding-top: var(--style-padding-small) !important; padding-bottom: var(--style-padding-small) !important; } .home-card table.quickgrid td:first-child { padding-left: var(--style-padding-large) !important; } .home-card table.quickgrid td:last-child { padding-right: var(--style-padding-large) !important; } .home-card table.quickgrid tbody tr:first-child td { padding-top: var(--style-padding-medium) !important; } .home-card table.quickgrid tbody tr:nth-last-of-type(2n) td { background-color: var(--style-background-accent-ultrathin); } /* #endregion */ .home-card.fleet { flex-grow: 0; } .home-card.rdm { background-color: #153462; } .home-card.rdm .home-card-header { align-items: center; } .home-card.rdm .home-card-body { background-color: #1a417a; } .home-card.rdm * { color: #fff; } .home-card.rdm span { color: #6e97d6; } .home-card.rdm li { border-bottom-color: #355e9d !important; } .home-card.nr-schedules { background-color: #d25b26; color: #fff; } .home-card.nr-schedules .home-card-header span.eyebrow { background-color: #fff; color: #d25b26; } .home-card.nr-schedules .home-card-body { background-color: #d4742a; } .home-card.nr-schedules span { color: #edd9c9; } .home-card.nr-schedules span strong { color: #fff; } .home-card.nr-schedules li { border-bottom-color: #e08e4f !important; } .home-card .event-icon { width: var(--icon-size-regular); height: var(--icon-size-regular); border-radius: var(--style-border-radius); display: flex; align-items: center; justify-content: center; } .date-slider { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--style-padding-small); } .date-slider-item { display: flex; flex-direction: column; gap: var(--style-padding-tiny); } .date-slider-item .month { width: 100%; position: relative; height: 24px; } .date-slider-item .month .label { position: absolute; top: 0; left: 0; width: auto; white-space: nowrap; display: inline; z-index: 1; } .date-slider-item .month .label span { font-size: var(--font-size-title3); color: var(--style-text-tertiary); } button.date-slider-button { display: flex; flex-direction: column; gap: var(--style-padding-tiny); background-color: transparent; border-radius: var(--style-border-radius); padding: var(--style-padding-tiny); transition: var(--anim-duration-short); } button.date-slider-button:focus { outline: 1.5px solid var(--style-text-tertiary); outline-offset: 1.5px; } button.date-slider-button:hover:not(:disabled) { background-color: var(--style-background-accent-thin); } .date-slider-item .day { width: 28px; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-subtitle); color: var(--style-text-primary); } .date-slider-item.weekend:not(.selected) .day { color: var(--style-text-quarternary); } .date-slider-item .dow { color: var(--style-text-quarternary); text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; font-size: var(--font-size-small); } .date-slider-item.selected .dow { color: inherit; } .collab1tt-table { width: 100%; display: grid; grid-template-columns: [logo] auto [name] 1fr [icon] auto [vehicles] auto [crew] auto [ltp] auto [stp] auto; gap: var(--style-padding-small) 0; align-items: center; position: relative; } .collab1tt-table-row { display: contents; } .collab1tt-table-row:not(.header):nth-of-type(2n) .collab1tt-table-cell { background-color: var(--style-background-accent-thin); } .collab1tt-table-cell { display: flex; align-items: center; align-self: stretch; } .collab1tt-table-cell:first-of-type { padding: var(--style-padding-tiny); border-top-left-radius: var(--style-border-radius); border-bottom-left-radius: var(--style-border-radius); } .collab1tt-table-cell:last-of-type { border-top-right-radius: var(--style-border-radius); border-bottom-right-radius: var(--style-border-radius); padding-right: var(--style-padding-small); } .collab1tt-table-cell:not(:last-of-type) { padding-right: var(--style-padding-small); } .collab1tt-table-row.header .collab1tt-table-cell { position: sticky; top: 0; } .collab1tt-table-row.not-sharing { color: var(--style-text-tertiary); } .collab1tt-table-cell.not-sharing { grid-column: span 4; justify-content: end; } .collab1tt-table-cell.monochrome figure.brand-icon { filter: grayscale(1) contrast(0.6) brightness(0.6); } .light-mode .collab1tt-table-cell.monochrome figure.brand-icon { filter: grayscale(1) contrast(0.6) brightness(1.2); } .collab1tt-table-cell.crew, .collab1tt-table-cell.vehicles { justify-content: center; padding-left: var(--style-padding-medium); padding-right: var(--style-padding-medium); } .collab1tt-table-cell.ltp, .collab1tt-table-cell.stp { justify-content: end; padding-left: var(--style-padding-medium); } /* #endregion */ /* #region Train Graph */ .inspector-train-graph { background-color: var(--map-background); display: flex; flex-direction: column; flex-wrap: nowrap; padding: var(--style-padding-medium); } .dates { display: flex; justify-content: flex-end; } .graph { mask-image: linear-gradient(black, transparent); mask-image: linear-gradient(90deg,rgba(0, 0, 0, 1) calc(100% - var(--style-padding-medium)), rgba(0, 0, 0, 0) 100%); } /* #endregion */ /* #region TFCP Editing */ .tfcp-table { display: grid; align-items: stretch; justify-content: start; min-width: 100%; gap: var(--style-padding-tiny) 0; } .tfcp-table .tfcp-row > * { display: flex; align-items: center; padding-top: 2px; padding-bottom: 2px; padding-right: var(--style-padding-small) } .tfcp-table .tfcp-row > *:first-of-type { padding-left: var(--style-padding-small); border-top-left-radius: var(--style-border-radius); border-bottom-left-radius: var(--style-border-radius); } .tfcp-table .tfcp-row > *:last-of-type { border-top-right-radius: var(--style-border-radius); border-bottom-right-radius: var(--style-border-radius); } .tfcp-loadings-table { grid-template-columns: [src] auto [loc] 1fr [weekdays] auto [loading] auto [measure] auto [edit] auto ; } .tfcp-formation-table { grid-template-columns: [src] auto [formation] 1fr [weekdays] auto [seats] auto [standing] auto [wheelchair] auto [edit] auto; } .tfcp-loading-row, .tfcp-formation-row, .tfcp-formation-row { display: contents; } .tfcp-loading-row, .tfcp-formation-row > *:not(:last-of-type) { padding-right: var(--style-padding-small); } .tfcp-loading-row, .tfcp-formation-row.locked .loading { padding-right: var(--style-padding-small); } .tfcp-table .tfcp-row.inactive > * { background-color: var(--style-background-tertiary); color: var(--style-text-quarternary); opacity: 0.4; } .tfcp-table hr { width: 100%; height: 1px; background-color: var(--style-background-accent-regular); grid-column: 1 / -1; } .tfcp-table .count { text-align: right; } .tfcp-table button { padding: var(--style-padding-tiny); } .tfcp-above { background: var(--alert-error-primary) !important; color: #C8C8C8; } /* #endregion */ /* #region TFCP Temporary */ /* settings page */ .selected-tfcp-week > div { background: rgb(150, 50, 50); } .undo-table { width: 100%; } .undo-table th, .undo-table td { padding: 12px 15px; /*border: 1px solid #ddd;*/ text-align: left; } .undo-table thead { border-bottom: 1px solid #555; } .row-detail-elements { display: flex; flex-direction: row; flex-wrap: nowrap; flex-grow: 1; justify-content: end; gap: var(--style-padding-small); padding-right: var(--style-padding-medium); } .rounded-detail-element { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; border: var(--border-regular); height: 24px; border-radius: 12px; padding: 0 var(--style-padding-small); justify-content: start; background-color: var(--style-background-secondary); transition: var(--anim-duration-ultrashort); } .rounded-detail-element .section { display: flex; align-items: center; gap: var(--style-padding-tiny); } .rounded-detail-element .section:not(:first-of-type) { border-left: var(--border-regular); padding-left: var(--style-padding-small); margin-left: var(--style-padding-small); } .rounded-detail-element:has(.pct-ctr):hover { background-color: var(--style-background-tertiary); } .basic-tooltip p, .basic-tooltip span { max-width: 360px; text-wrap: wrap; } .basic-tooltip table th, .basic-tooltip table td { padding: 2px 8px; } .basic-tooltip table th:first-of-type, .basic-tooltip table td:first-of-type { padding-left: 0; } .basic-tooltip table th:last-of-type, .basic-tooltip table td:last-of-type { padding-right: 0; } .basic-tooltip table th:nth-of-type(n+2), .basic-tooltip table td:nth-of-type(n+2) { text-align: right; } /* #endregion */ /* #region Table Row Capsules */ .schedule-details, .trow-details { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: end; gap: var(--style-padding-small); } .schedule-details.tiny, .trow-details.tiny { gap: var(--style-padding-tiny); } .trow-detail-capsule, .trow-detail-capsule section, .trow-detail-capsule .item { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; } .trow-detail-capsule section { height: 100%; gap: var(--style-padding-tiny); } .trow-detail-capsule > section:nth-child(n+2) { border-left: var(--border-regular); padding-left: var(--style-padding-tiny); margin-left: var(--style-padding-tiny); } .trow-detail-capsule { height: 24px; padding: 0 6px; color: var(--style-text-secondary); transition-duration: var(--anim-duration-short); } .trow-detail-capsule.outline { border-radius: 6px; border: var(--border-regular); color: var(--style-text-tertiary); background-color: var(--style-background-primary); } .trow-detail-capsule.outline:has(.pct-ctr):hover { background-color: var(--style-background-tertiary); color: var(--style-text-secondary); } .trow-detail-capsule .item { gap: var(--style-padding-tiny); } .trow-detail-capsule .text-error { color: var(--alert-error-primary); } .trow-detail-capsule .text-warning { color: var(--alert-warning-primary); } .trow-detail-capsule:not(.outline) { padding: 0; } .trow-detail-capsule:not(.outline) svg { width: 24px; height: 24px; } .trow-detail-capsule .item.unimportant { opacity: 0.5; } /* #endregion */ /* #region DOW Table */ .days-of-week-table { display: grid; grid-template-columns: repeat(7, auto); gap: 2px; margin: 0 2px; } .days-of-week-table span { color: var(--style-text-quarternary); opacity: 0.6; text-align: center; } .days-of-week-table span.active { color: var(--style-text-primary); opacity: 1; } /* #endregion */ .event-swimlanes { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-height: 100%; gap: var(--style-padding-medium); padding: var(--style-padding-large); } .event-swimlane { width: 320px; min-width: 320px; overflow-x: hidden; overflow-y: auto; background-color: var(--style-background-tertiary); padding: 0 var(--style-padding-small) var(--style-padding-medium); border-radius: var(--style-border-radius-tiny); } .event-swimlane header { position: sticky; top: 0; padding: var(--style-padding-medium) 0 var(--style-padding-small); border-bottom: var(--border-regular); margin-bottom: var(--style-padding-small); background-color: var(--style-background-tertiary); } .event-loc-list { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--style-padding-tiny); } .event-loc-item { padding: var(--style-padding-small); background-color: var(--style-background-quarternary); border-radius: var(--style-border-radius); } .schedule-details { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: end; gap: var(--style-padding-small); } .trow-detail-capsule, .trow-detail-capsule section, .trow-detail-capsule .item { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; } .trow-detail-capsule section { height: 100%; gap: var(--style-padding-tiny); } .trow-detail-capsule > section:nth-child(n+2) { border-left: var(--border-regular); padding-left: var(--style-padding-tiny); margin-left: var(--style-padding-tiny); } .trow-detail-capsule:not(.outline) section:nth-child(n+2) { border-left: none; } .trow-detail-capsule { height: 24px; padding: 0 6px; color: var(--style-text-secondary); transition-duration: var(--anim-duration-short); } .trow-detail-capsule.outline { border-radius: 6px; border: var(--border-regular); color: var(--style-text-tertiary); background-color: var(--style-background-primary); } .trow-detail-capsule.outline:has(.pct-ctr):hover { background-color: var(--style-background-tertiary); color: var(--style-text-secondary); } .trow-detail-capsule .item { gap: var(--style-padding-tiny); } .trow-detail-capsule.text-error { color: var(--alert-error-primary); } .trow-detail-capsule.text-warning { color: var(--alert-warning-primary); } .trow-detail-capsule:not(.outline) { padding: 0; } .trow-detail-capsule:not(.outline) svg { width: 24px; height: 24px; } .days-of-week-table { display: grid; grid-template-columns: repeat(7, auto); gap: 2px; margin: 0 2px; } .days-of-week-table span { color: var(--style-text-quarternary); opacity: 0.6; } .days-of-week-table span.active { color: var(--style-text-primary); opacity: 1; } /* #endregion */ .event-swimlanes { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-height: 100%; gap: var(--style-padding-small); padding: var(--style-padding-large) var(--style-padding-large) var(--style-padding-small); } .event-credit { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--style-padding-small); padding: var(--style-padding-small); } .event-swimlane { width: 320px; min-width: 320px; overflow-x: hidden; overflow-y: auto; background-color: var(--style-background-tertiary); padding: 0 var(--style-padding-small) var(--style-padding-medium); border-radius: var(--style-border-radius-tiny); } .event-swimlane header { position: sticky; top: 0; padding: var(--style-padding-large) 0 var(--style-padding-small); border-bottom: var(--border-regular); margin-bottom: var(--style-padding-small); background-color: var(--style-background-tertiary); } .event-swimlane header h2 { font-size: var(--font-size-title3); } .event-loc-list { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--style-padding-tiny); } .event-loc-item { padding: var(--style-padding-small); background-color: var(--style-background-accent-ultrathin); border-radius: var(--style-border-radius); transition: var(--anim-duration-ultrashort); display: flex; flex-direction: column; gap: var(--style-padding-small); border: 1px solid transparent; } .event-loc-item:hover { background-color: var(--style-background-accent-thin); } .event-loc-item.selected { background-color: var(--style-background-accent-thin); border: var(--border-regular); } .event-loc-item .header { display: flex; flex-direction: row; justify-content: space-between; } .event-loc-item .header * { white-space: nowrap; } .event-loc-item .loc-event-size, .event-loc-item .loc-event-ranking { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; } .event-loc-item .loc-event-ranking { gap: var(--style-padding-small); } .event-loc-item .loc-event-ranking strong { font-size: var(--font-size-subtitle); } .event-loc-item .loc-event-ranking svg { width: 20px; height: 20px; } .loc-event-capacity, .loc-event-start { display: flex; align-items: center; border-radius: 50%; height: var(--style-label-height); border-radius: calc(var(--style-label-height) / 2); gap: var(--style-padding-tiny); border: var(--border-regular); border-width: 1.5px; padding: 0 var(--style-padding-small); flex-grow: 0; flex-shrink: 1; } .loc-event-inspector-list { display: flex; flex-direction: column; gap: var(--style-padding-small); } .loc-event-inspector-list-header { padding: var(--style-padding-small) var(--style-padding-medium) 0; } .loc-event-inspector-list-header h2 { font-size: var(--font-size-title3); font-weight: 500; color: var(--style-text-primary); } .loc-event-inspector-list ul { background-color: var(--style-background-quarternary); border-radius: var(--style-border-radius-tiny); overflow: hidden; } /* .loc-event-inspector-list li { padding: var(--style-padding-small); border-radius: var(--style-border-radius-tiny); } .loc-event-inspector-list li:nth-of-type(2n+1) { background-color: var(--style-background-accent-ultrathin); } */ .loc-event-inspector-list ul li { padding: var(--style-padding-medium) var(--style-padding-medium); padding-left: 0; margin-left: var(--style-padding-medium); } .loc-event-inspector-list ul li:not(:last-of-type) { border-bottom: var(--border-regular); } .loc-event-list-item { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--style-padding-small); } .loc-event-list-item .header, .loc-event-list-item .body { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } .loc-event-list-item .span { font-size: var(--font-size-paragraph); } .loc-event-list-item h3 { font-size: var(--font-size-title3); margin-top: var(--style-padding-tiny); text-wrap: balance; } .loc-event-list-item .icon { font-size: 20px; height: 36px !important; width: 36px !important; min-width: 36px; max-width: 36px; min-height: 36px; max-height: 36px; border-radius: var(--style-border-radius-tiny); display: flex; align-items: center; justify-content: center; } /* #region Inspector Header Location */ .inspector-header.location * { color: var(--color-nationalRail-white); } .inspector-header.location .background { background-color: var(--color-nationalRail-red); } .inspector-header.location .date-logo { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: start; } .inspector-header.location .date span { font-size: var(--font-size-subtitle); } .inspector-header.location .headline .eyebrow { font-size: var(--font-size-subtitle); opacity: 0.6; } .inspector-header.location .headline h1 { font-size: var(--font-size-title2); } /* #endregion */ /* #region Special Events */ .spevent-timeline { overflow-y: auto; min-height: 100%; } .spevent-timeline .ev-timeline-row { height: var(--timeline-row-height); display: block; position: relative; } .spevent-timeline .ev-timeline-row:nth-of-type(2n+1) { background-color: var(--style-background-timeline-alternate); } .spevent-timeline .ev-timeline-row:last-of-type, .spevent-timeline .ev-timeline-row:last-of-type .ev-timeline-row-label { border-bottom: var(--border-regular); } .spevent-timeline .ev-timeline-row-label { background-color: var(--style-background-tertiary); height: var(--timeline-row-height); position: sticky; left: 0; top: 0; bottom: 0; padding: 0 var(--style-padding-small); border-right: var(--border-regular); backdrop-filter: blur(24px); z-index: 2; } .spevent-timeline .ev-timeline-row:nth-of-type(2n+1) .ev-timeline-row-label { background-color: var(--style-background-quarternary); } .spevent-timeline .ev-label-grid { display: grid; grid-template-columns: [glyph] auto [title] 1fr [capacity] auto; align-items: center; height: 100%; gap: var(--style-padding-small); } .spevent-timeline .ev-label-grid .title { display: block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .spevent-timeline .ev-label-grid a:hover { text-decoration: underline; } .spevent-timeline .ev-label-grid .capacity { border: var(--border-regular); padding: 0 var(--style-padding-small); display: flex; align-items: center; height: 20px; border-radius: 10px; } .spevent-timeline .ev-timeline-row-content { position: absolute; top: 0; z-index: 1; height: var(--timeline-row-height); } .spevent-timeline .ev-timeline-item { height: 20px; position: absolute; top: 0; height: 100%; display: flex; justify-content: center; align-items: center; } .spevent-timeline .ev-content { height: 20px; min-width: 100%; position: relative; } .spevent-timeline .ev-content * { cursor: pointer; } .spevent-timeline .ev-content .ev-background, .spevent-timeline .ev-content .ev-border { border-radius: var(--style-border-radius); border: var(--border-regular); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .spevent-timeline .ev-content .ev-background { opacity: 0.2; transition: var(--anim-duration-short); } .light-mode .spevent-timeline .ev-content .ev-background { opacity: 0.6; } .spevent-timeline .ev-content:hover .ev-background { opacity: 0.5; } .light-mode .spevent-timeline .ev-content:hover .ev-background { opacity: 0.8; } .spevent-timeline .ev-content .ev-border.dayOnly { border-style: dashed; } .spevent-timeline .ev-content .ev-background.startOnly, .spevent-timeline .ev-content .ev-border.startOnly { mask-image: linear-gradient(90deg,rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0) 100%); border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } .spevent-timeline .ev-content .ev-start-time, .spevent-timeline .ev-content .ev-location { position: absolute; width: auto; white-space: nowrap; height: 100%; display: flex; align-items: center; } .spevent-timeline .ev-content .ev-start-time { right: calc(100% + var(--style-padding-small)); } .spevent-timeline .ev-content .ev-location { left: calc(100% + var(--style-padding-small)); } .spevent-timeline .ev-content { color: var(--style-text-tertiary); } .spevent-timeline .ev-group-row { height: var(--timeline-row-height); display: flex; justify-content: start; padding: 0 var(--style-padding-small); border-bottom: var(--border-regular); align-items: center; position: sticky; top: 0; z-index: 10; background-color: var(--style-background-accent-ultrathin); backdrop-filter: blur(24px); } .spevent-timeline .ev-group-row .ev-group-label { position: sticky; left: var(--style-padding-medium); } ul.ev-near-station-list { display: flex; flex-direction: column; gap: var(--style-padding-small); padding: var(--style-padding-tiny); } ul.ev-near-station-list li { display: flex; justify-content: space-between; align-items: center; } ul.ev-near-station-list li > * { display: flex; align-items: center; gap: var(--style-padding-small); } ul.ev-near-station-list a:hover { text-decoration: underline; } /* #endregion */ /* #region Timeline Row Groupings */ .tl-row-grp { z-index: 1; position: relative; } .tl-group-header-container { z-index: 2; position: sticky; height: var(--timeline-row-height); } .tl-group-header-container .background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--style-background-tertiary); } .tl-group-header-container:hover .background { background-color: var(--style-background-quarternary); } .light-mode .tl-group-header-container .background { background-color: var(--style-background-secondary); } .light-mode .tl-group-header-container:hover .background { background-color: var(--style-background-tertiary); } .tl-row-grp .tl-group-header { position: relative; display: flex; justify-content: space-between; height: var(--timeline-row-height); border-bottom: var(--border-regular); } .tl-row-grp .tl-group-header button.filter { content-visibility: hidden; transition-property: opacity, content-visibility; transition-behavior: allow-discrete; transition-duration: var(--anim-duration-short); opacity: 0; } .tl-row-grp .tl-group-header:hover button.filter, .tl-row-grp .tl-group-header:focus-within button.filter { content-visibility: visible; opacity: 1; } .tl-row-grp .tl-group-header .tl-grp-header-leading, .tl-row-grp .tl-group-header .tl-grp-header-trailing { display: flex; align-items: center; top: 0; position: sticky; left: 0; flex-direction: row; gap: var(--style-padding-small); } .tl-grp-header-leading { z-index: 2; } .tl-row-grp .tl-group-header .tl-grp-header-trailing { z-index: 1; right: 0; padding-right: var(--style-padding-medium); gap: var(--style-padding-small); } .tl-row-grp .tl-group-header .veh { align-self: end; width: 156px; margin-right: var(--style-padding-small); } .tl-row-grp .tl-group-header .tl-grp-header-leading > *:first-of-type:not(.veh) { margin-left: var(--style-padding-small); } .tl-row-grp .tl-group-header .icon { width: var(--icon-size-regular); height: var(--icon-size-regular); display: flex; flex-direction: row; justify-content: center; align-items: center; } .tl-row-grp .tl-group-header .icon > div:has( > svg) { display: flex; justify-content: center; align-items: center; } .tl-row-grp .tl-group-header .icon svg { } .tl-row-grp .tl-group-header .icon svg .icon-stroke { stroke: currentColor; } .tl-row-grp .tl-group-header .icon svg .icon-fill { fill: currentColor; } .tl-row-grp .tl-group-header .leading, .tl-row-grp .tl-group-header .trailing { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--style-padding-small); justify-content: start; align-items: center; } .tl-row-grp .tl-group-header .trailing { justify-content: end; } .tl-row-vehicle-single, .tl-row-vehicle-multi { display: flex; flex-direction: row; height: 100%; justify-content: end; align-items: end; flex-direction: row-reverse; overflow: hidden; max-width: 156px; } .tl-row-vehicle-multi .vehicle-graphic-container { transform: rotateY(180deg); width: 48px; } .tl-row-vehicle-single .vehicle-graphic-container { transform: rotateY(180deg); width: 156px; } /* #endregion */ /* #region Timeline Row Label */ .tl-row-lbl { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; height: 100%; overflow: hidden; justify-content: space-between; z-index: 1; } .tl-row-lbl * { font-size: 11px; letter-spacing: 0em; } .tl-row-lbl .labels { padding-right: 8px; padding-left: 8px; display: flex; flex-direction: row; gap: 4px; flex-wrap: nowrap; align-items: center; } .tl-row-lbl .diag-lbl.bordered .wrap { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 2px; font-size: 11px; overflow: hidden; height: 24px; padding: 0 4px; background-color: var(--style-background-primary); border-radius: 4px; border: var(--border-regular); opacity: 1; transition-duration: var(--anim-duration-medium); transition-property: opacity; @starting-style { opacity: 0; } } .tl-row-lbl .diag-lbl.bordered .wrap.center { justify-content: center; } .tl-row-lbl .diag-lbl.bordered .wrap.end { justify-content: end; } .tl-row-lbl .diag-lbl.bordered section:not(:last-of-type) { border-right: var(--border-regular); } .tl-row-lbl .veh-img { overflow: hidden; } .tl-row-lbl .veh-img > * { transform: rotateY(180deg); } .tl-row-lbl .veh-img-alt { padding-left: 8px; display: flex; } .tl-row-lbl .veh-img-alt .wrap { padding: 0 3px 0 0 !important; gap: 1px !important; width: 100%; max-width: 100%; overflow: hidden; } .tl-row-lbl .veh-img-alt * { font-size: 10px; } /* #region Diagram Date Label */ .tl-row-lbl .diag-lbl.bordered.dates { width: 154px; } .diag-lbl-date-sum { display: flex; flex-direction: row; flex-wrap: nowrap; height: 100%; align-items: center; background-color: var(--style-background-primary); border-radius: 4px; border: var(--border-regular); width: 100%; height: 24px; } .diag-lbl-date-sum > * { height: 100%; display: flex; align-items: center; } .diag-lbl-date-sum section { text-align: center; justify-content: center; display: flex; flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .diag-lbl-date-sum section.stage { width: 20px; } .diag-lbl-date-sum section.dow { width: 78px; } .diag-lbl-date-sum section.dow .days-of-week-table { gap: 1.5px; } .diag-lbl-date-sum section.date { width: 54px; } /* #endregion */ /* #endregion */ /* #region Resilience */ .risk-res, .contagion { color: rgb(156, 202, 39);; } .light-mode .risk-res { color: rgb(51, 78, 13);; } /* #endregion */ /* #region Schedule Table */ .pg-lay-detail .schedule-table { width: 100%; height: 100%; } .schedule-table { overflow-x: hidden; overflow-y: auto; z-index: 1; } .schedule-table-row { display: flex; position: relative; flex-direction: row; flex-wrap: nowrap; justify-content: start; align-items: center; gap: var(--style-padding-medium); padding: var(--style-padding-small) var(--style-padding-medium); border-bottom: 1px solid var(--style-background-accent-regular); height: var(--schedule-list-row-height); max-height: var(--schedule-list-row-height); min-width: 360px; color: var(--style-text-secondary); background-color: var(--style-background-tertiary); transition-duration: var(--anim-duration-medium); transition-property: opacity; @starting-style { opacity: 0; } } .schedule-table-row:focus { outline: 1.5px solid var(--color-accent); outline-offset: -1.5px; } .schedule-table-row:focus:not(:focus-visible) { outline: none; } .schedule-table-row.hidden-summary { justify-content: center; background-color: var(--style-background-secondary) !important; } .schedule-table-row .background { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -1; opacity: 0; background-color: var(--style-background-tertiary); } .schedule-table-row.schedule:not(.selected, :hover) .background { background-color: var(--style-background-secondary) !important; opacity: 1; } .schedule-table-row:hover .background { opacity: 0.1; } .schedule-table-row.selected .background { opacity: 0.2; } .schedule-table-row.selected:hover .background { opacity: 0.3; } .schedule-table-group { position: relative; } .schedule-table-group > *:not(.sticky-header) { z-index: 1; } .schedule-table-row.sticky-header { position: sticky; top: 0; z-index: 2; } .schedule-table-row * { font-size: var(--font-size-body); white-space: nowrap; } .schedule-table-row .icon { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-grow: 0; flex-shrink: 0; width: var(--icon-size-regular); height: var(--icon-size-regular); max-width: var(--icon-size-regular); max-height: var(--icon-size-regular); } .schedule-table-row.schedule .icon { opacity: 0; } .schedule-table-row.schedule:hover .icon, .schedule-table-row.schedule.selected .icon { opacity: 1; } .schedule-table-row .rw-hcode { width: 48px; } .schedule-table-row .prefix { display: flex; justify-content: start; align-items: center; flex-shrink: 0; gap: var(--style-padding-small); } .schedule-table-row .leading { flex-shrink: 1; /* flex-grow: 1; */ display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--style-padding-tiny); /* BLOCK VERTICAL ALIGN ISSUE */ transform: translateY(1px); /* BLOCK VERTICAL ALIGN ISSUE */ } .schedule-table-row .trailing { flex-grow: 1; /* flex-shrink: 1; */ display: flex; flex-direction: row; align-items: center; justify-content: end; gap: var(--style-padding-table); height: var(--schedule-list-row-height); max-height: var(--schedule-list-row-height); } .schedule-table-row svg { flex-shrink: 0; } /* .schedule-table-row { backdrop-filter: blur(38px) saturate(0.6); } .schedule-table-row.heading-row { background-color: var(--style-background-accent-thin); } .schedule-table-row.subheading-row { background-color: var(--style-background-accent-ultrathin); } */ .schedule-list-date-card { width: 300px; min-width: 300px; display: flex; flex-direction: row; justify-content: end; gap: var(--style-padding-small); } button.schedule-list-filter { margin-left: var(--style-padding-small); width: 24px; height: 24px; content-visibility: none; transition-behavior: allow-discrete; opacity: 0; display: inline-flex; justify-content: center; align-items: center; } .schedule-table-row:hover button.schedule-list-filter { content-visibility: visible; opacity: 1; } .schedule-table-row span.peak { border: 1.5px solid var(--style-text-quarternary); color: var(--style-text-tertiary); border-radius: var(--style-border-radius); padding: 1px var(--style-padding-tiny); margin-left: var(--style-padding-small); } /* #region Schedule Table Timeline */ .schedule-list-timeline-wrap { padding: 0 48px; width: 100%; display: block; height: 24px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 4%, rgba(0,0,0,1) 96%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 4%, rgba(0,0,0,1) 96%, rgba(0,0,0,0) 100%); } .schedule-list-timeline-wrap.show-od { padding: 0 92px; } .schedule-list-timeline { height: 24px; position: relative; } .schedule-timeline-capsule { height: 16px; top: 50%; transform: translateY(-50%); position: absolute; border-radius: var(--style-border-radius); background-color: var(--style-background-accent-thin); border: 1px solid var(--style-background-accent-regular); /* -webkit-mask-image: linear-gradient(270deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 100%); mask-image: linear-gradient(270deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 100%); */ } .schedule-timeline-time { position: absolute; height: 100%; /* top: 50%; */ /* transform: translateY(-50%); */ display: flex; align-items: center; } .schedule-timeline-time.dest { padding-left: 6px; } .schedule-timeline-time.origin { padding-right: 6px; } .schedule-timeline-time .loc { color: var(--style-text-tertiary); } .schedule-timeline-time .loc.origin { padding-right: var(--style-padding-tiny); } .schedule-timeline-time .loc.dest { padding-left: var(--style-padding-tiny); } .schedule-table-row .shrow-trailing-wrap { position: relative; width: 100%; top: 0; bottom: 0; left: 0; right: 0; height: 100%; max-height: 100%; display: flex; justify-content: end; align-items: center; } .schedule-table-row .shrow-trailing-wrap .tline { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; z-index: 1; display: flex; align-items: center; flex-grow: 1; } .schedule-table-row .shrow-trailing-wrap .tline:after { content: ''; display: flex; position: relative; max-width: 240px; width: 40%; height: 100%; flex-grow: 2; } .schedule-table-row .shrow-trailing-wrap .detail { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; } /* #endregion */ /* #endregion */ /* #region Searchable Grid */ .des-tbl-srch-grid { display: flex; flex-direction: column; flex-wrap: nowrap; max-height: 100%; height: 100%; min-width: 100%; } .des-tbl-srch-grid header { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; gap: var(--style-padding-large); padding-left: var(--style-padding-xxxlarge); padding-right: var(--style-padding-xxxlarge); padding: var(--style-padding-xxxlarge) var(--style-padding-xxxlarge) var(--style-padding-xlarge); } .des-tbl-srch-grid header h1 { font-size: 28px; font-weight: 500; margin-top: var(--style-padding-medium); } .des-tbl-srch-grid header .leading, .des-tbl-srch-grid header .trailing { display: flex; align-items: end; justify-content: end; } .des-tbl-srch-grid header .leading { display: flex; flex-direction: column; align-items: start; gap: var(--style-padding-medium); flex-grow: 1; } .des-tbl-srch-grid header .leading .actions, .des-tbl-srch-grid header .trailing .actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--style-padding-small); height: var(--style-input-height); font-size: var(--font-size-paragraph); } .des-tbl-srch-grid header .actions{ display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--style-padding-small); } .des-tbl-srch-grid .new-item-content { height: 0; padding: 0 var(--style-padding-xxxlarge); display: flex; opacity: 0; transition: var(--anim-duration-medium) ease-in; padding-bottom: var(--style-padding-medium); } .des-tbl-srch-grid .new-item-content.show { opacity: 1; height: auto; height: calc-size(auto); } .des-tbl-srch-grid .srch-content { overflow: auto; } .des-tbl-srch-grid .srch-content:has(table td) { display: flex; flex-grow: 1; } .des-tbl-srch-grid .srch-content .container { min-width: 100%; } .des-tbl-srch-grid table:has(td) { height: auto; } .des-tbl-srch-grid table.quickgrid th { background-color: var(--style-background-secondary); } .des-tbl-srch-grid input.search { min-width: 240px; max-width: 360px; width: 100%; flex-grow: 1; } .des-tbl-srch-grid .empty-content { flex-grow: 1; align-items: center; justify-content: start; display: flex; flex-direction: column; padding-top: var(--style-padding-xxlarge); gap: var(--style-padding-medium); color: var(--style-text-quarternary); } .des-tbl-srch-grid .empty-content .icn, .des-tbl-srch-grid .empty-content .icn svg { width: 100%; height: 100%; max-width: 128px; max-height: 128px; } .des-tbl-srch-grid .empty-content .lbl { font-size: var(--font-size-subheading); } /* #endregion */ /*#region Location Print Report*/ body:has(> .print-content) { overflow: auto; background-color: transparent; height: auto; } .print-content { width: 100%; height: auto; justify-content: center; display: flex; } .print-loc-container { width: 100%; height: auto; overflow-y: visible; overflow-x: none; background-color: transparent; } .print-loc-container * { font-size: 14px; font-weight: 600; } .prnt-loc-table { min-width: 100%; } .prnt-loc-table thead { display: table-header-group; } .prnt-loc-table thead th::after { content: ''; display: block; width: 100%; height: 2px; background-color: rgb(230, 230, 230); margin-bottom: var(--style-padding-tiny); print-color-adjust: exact; } .prnt-loc-table thead * { font-size: var(--font-size-body); } .prnt-loc-table tfoot { display: table-footer-group; } .prnt-loc-table tfoot * { font-size: var(--font-size-tiny); } .prnt-loc-table .print-loc-title { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding-bottom: var(--style-padding-small); color: #888; position: relative; } .prnt-loc-table .print-loc-title .platforms { display: flex; flex-direction: row; gap: var(--style-padding-tiny); } .prnt-loc-table .print-loc-title .platforms span.plat { background-color: var(--platform-label-background); color: #000; print-color-adjust: exact; padding: 2px 6px; border-radius: var(--style-border-radius); } .prnt-loc-table .print-loc-title strong { color: #000 !important; } .prnt-loc-table .print-loc-title .leading, .prnt-loc-table .print-loc-title .trailing { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--style-padding-small); } .prnt-loc-table .print-loc-title svg { display: block; width: 20px; height: 14px; } .prnt-loc-row-space td { background-color: transparent; } .prnt-loc-row-space td div { display: block; width: 100%; height: 2px; margin: var(--style-padding-tiny) 0; background-color: rgb(230, 230, 230); print-color-adjust: exact; z-index: -2; position: relative; } .prnt-loc-row-space td div.large { margin-top: var(--style-padding-xlarge); margin-bottom: var(--style-padding-small); } .prnt-loc-row td .icon { display: flex; align-items: center; justify-content: center; } .prnt-loc-sht-rtn { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: end; align-items: center; margin-top: var(--style-padding-tiny); margin-bottom: var(--style-padding-tiny); gap: var(--style-padding-table); color: rgb(108, 108, 108); } .prnt-loc-sht-rtn svg { display: inline-block; vertical-align: text-bottom; } .prnt-loc-sht-rtn strong { color: #000; } .prnt-loc-sht-rtn .for-plat-ico { color: #000 !important; font-size: var(--font-size-body); font-weight: 700; } .prnt-loc-row td { color: #000; font-size: 14px; font-weight: 600; vertical-align: middle; break-inside: avoid; } .prnt-loc-row td.sub-ev { font-weight: 500 !important; color: rgb(138, 138, 138); } .prnt-loc-row td.brand { padding: 2px var(--style-padding-tiny); padding-left: 0; vertical-align: middle; width: 30px; } .prnt-loc-row td.brand.xt { padding-top: 6px; vertical-align: top; position: relative; } .prnt-loc-row td.brand.xt::after { content: ''; width: 100%; bottom: 0; left: 0; height: 2px; position: absolute; bottom: var(--style-padding-tiny); background-color: rgb(230, 230, 230); print-color-adjust: exact; } .prnt-loc-row.whitespace td.brand.xt::after { bottom: var(--style-padding-small); } .prnt-loc-row td.hcode { text-align: right; width: 48px; } .prnt-loc-key-stp-sched, .prnt-loc-row td.hcode .trainid.stp { border-bottom: 2px dotted #000; } .prnt-loc-row td.from-time { width: 56px; padding-left: 6px; } .prnt-loc-row td.to-time { width: 50px; } .prnt-loc-row td.from-name, .prnt-loc-row td.to-name { text-wrap: nowrap; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 120px; } .prnt-loc-row td.to-name { text-align: right; padding-right: var(--style-padding-tiny); } .prnt-loc-row td.veh-cla { text-align: right; padding-right: 8px; } .prnt-loc-row td.veh-cla *, .prnt-loc-row td.veh-len * { white-space: nowrap; text-wrap: nowrap; } .prnt-loc-key-plat-ico, /* For Cover Page Key */ .prnt-loc-row .for-plat-ico, .prnt-loc-row td.plat .plt-ico, .prnt-loc-row td.line .line-ico { height: 24px; min-width: 24px; max-width: 30px; padding: 0 2px; display: flex; justify-content: center; align-items: center; border-radius: 4px; print-color-adjust: exact; font-weight: 600; } .prnt-loc-row td.plat { padding: 2px var(--style-padding-tiny); } .prnt-loc-key-plat-ico, /* For Cover Page Key */ .prnt-loc-row .for-plat-ico, .prnt-loc-row td.plat .plt-ico { background-color: var(--platform-label-background); } .prnt-loc-row td.line { padding: 2px var(--style-padding-tiny); max-width: 28px; } .prnt-loc-row td.line .line-ico { background-color: rgb(187, 187, 187); } .prnt-loc-row td.icons { padding: 0 var(--style-padding-tiny); } .prnt-loc-row td.icons svg { width: 20px; height: 20px; } /* For Cover Page Key */ .prnt-loc-key-ico svg { width: 24px; height: 24px; color: #000 !important; } .prnt-loc-row td.index { text-align: right; font-size: 12px; max-width: 42px; width: 42px; } .prnt-loc-row.note-row td { height: 30px; } .prnt-loc-row.note-row td.detail { text-align: right; } .prnt-loc-row.note-row td.index { color: #909090; } td.loc-work-act { position: relative; height: 30px; padding-top: 4px; padding-bottom: 4px; } td.loc-work-act.arr { width: 64px; } td.loc-work-act.dep { width: 64px; height: 30px; } td.loc-work-act.stop { max-width: 32px; text-align: right; } td.loc-work-act.cpl-above { padding-top: 0; } td.loc-work-act.cpl-below { padding-bottom: 0; } .loc-work-act .pstn { width: 100%; height: 100%; position: relative; display: flex; } .loc-work-act .act { border: 1.5px solid rgb(139, 139, 139); display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: rgb(221, 221, 221); print-color-adjust: exact; } .loc-work-act .act.main-ev { background-color: rgb(216, 216, 216); border-color: #000; } .loc-work-act .act.sub-ev { color: rgb(104, 104, 104); background-color: transparent; } .loc-work-act .act.main-ev * { font-weight: 600; } .loc-work-act .act.nonst { border-left: none; border-right: none; text-align: center; mask-image: linear-gradient(90deg, transparent 0%, black 12px, black calc(100% - 12px), transparent 100%); } .loc-work-act .act.arr { border-left: none; text-align: right; padding-left: var(--style-padding-tiny); mask-image: linear-gradient(90deg, transparent 0%, black 12px); } .loc-work-act .act.arr.schd-chng { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .loc-work-act .act.dep { border-right: none; text-align: left; padding-right: var(--style-padding-tiny); mask-image: linear-gradient(270deg, transparent 0%, black 12px); } .loc-work-act .act.dep.schd-chng { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .loc-work-act .act.cpl-above { border-top: none; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } .loc-work-act .act.cpl-below { border-bottom: none; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } .loc-work-act .act.stop.schd-same { background-color: rgb(216, 216, 216); border-color: #000; border-right: none; border-left: none; } .loc-work-act .act.stop * { font-size: 12px; } .loc-work-act .act.stop.schd-chng { background-color: transparent; border: none; } .print-loc-cover-wrap { width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; } .print-loc-cover { width: 100vw; max-height: 600px; page-break-after: always; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: var(--style-padding-xlarge); padding: var(--style-padding-large) 0; } .print-loc-cover svg.logo { height: 8mm; width: auto; } @media print { .print-loc-cover { height: 100vh; } } .print-loc-cover * { color: #555; } .print-loc-cover strong { color: #000; } .print-loc-cover header { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; } .print-loc-cover footer { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--style-padding-small); } .print-loc-cover header { padding-bottom: var(--style-padding-large); border-bottom: 2px solid rgb(230, 230, 230); } .print-loc-cover footer { padding-top: var(--style-padding-large); border-top: 2px solid rgb(230, 230, 230); } .print-loc-cover footer .row { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; } .print-loc-cover footer .row:not(:first-child) * { font-size: 11px !important; font-weight: 500; color: #b1b1b1; } .print-loc-cover footer strong { color: #000; } .print-loc-cover footer .row:not(:first-child) strong { color: #444; } .print-loc-cover h1 { display: flex; flex-direction: row; align-items: center; gap: var(--style-padding-small); } .print-loc-cover h1 svg { height: 42px; width: 60px; } .print-loc-cover strong { font-size: inherit; font-weight: inherit; color: #000; } .print-loc-cover h1, .print-loc-cover h2 { font-size: var(--font-size-title) } .print-loc-cover h3 { font-size: var(--font-size-subtitle); color: #000; margin-bottom: var(--style-padding-medium); } .print-loc-cover header .platforms { display: flex; flex-direction: row; gap: var(--style-padding-small); } .print-loc-cover header .platforms span.plat { background-color: var(--platform-label-background); color: #000; border-radius: var(--style-border-radius); font-size: var(--font-size-title2); font-weight: 700; height: 36px; align-items: center; justify-content: center; display: flex; padding: 0 var(--style-padding-small); min-width: 36px; print-color-adjust: exact; } .print-loc-cover .content { display: flex; flex-direction: row; flex-grow: 1; overflow: hidden; padding-top: var(--style-padding-large); padding-bottom: var(--style-padding-large); gap: var(--style-padding-xlarge); } .print-loc-cover .content > * { max-height: 100%; } .print-loc-cover .content * { font-size: 13px; } .print-loc-cover .content * { color: #000 !important; } .print-loc-cover .info.operators > ul { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: start; gap: 0 var(--style-padding-small); max-height: 100%; width: max-content; } .print-loc-cover .toc-list { max-height: 100%; display: flex; flex-direction: column; flex-grow: 1; flex-shrink: 1; } .print-loc-cover .info ul { color: #000 !important; } .print-loc-cover .info ul li { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--style-padding-small); } .print-loc-cover .info ul li:not(:last-of-type) { margin-bottom: var(--style-padding-medium); } .print-loc-cover table.info-movement-graphic-key th { text-align: center; } .print-loc-cover table.info-movement-graphic-key td.graphic-demo { width: 210px; padding-right: var(--style-padding-large); padding-bottom: var(--style-padding-small); padding-top: var(--style-padding-small); } .print-loc-cover table.info-mov-key-demo td { width: 90px; min-width: 90px; } .print-loc-cover table.info-mov-key-demo td:nth-of-type(2) { width: 70px; min-width: 70px; } .print-loc-cover table.info-mov-key-demo { width: 250px; } .print-loc-cover table.info-mov-key-demo.header td { text-align: center; } /*#endregion*/ /* #region Weekday Card */ .from-to-date-card { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--style-padding-small); flex-shrink: 0; align-items: center; } .from-to-date-card > .weekday-card { transform: translateY(-1.5px) } .weekday-card-wrap { height: 24px; width: 94px; max-height: 100%; max-width: 100%; } @scope (.weekday-card-wrap) to ([dialog], [popover]) { table.weekday-card { overflow: hidden; height: 24px !important; max-height: 24px !important; line-height: 0; table-layout: fixed; } .from-to-date-card table.weekday-card { margin-bottom: -2px; } table.weekday-card.bordered { border-radius: 8px; outline: 1px solid var(--style-background-accent-thick); } table.weekday-card * { font-weight: 600; color: var(--color-text-7); } table.weekday-card td { padding: 0.5px 1px 0px; height: auto !important; vertical-align: middle; border: none; text-align: center; } table.weekday-card td:first-child { padding-left: 6px; } table.weekday-card td:last-child { padding-right: 6px; } table.weekday-card td.active { color: var(--color-text-2); } } /* #endregion */