mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-07 08:23:55 +00:00
Carlos Valente
88b8e83494
* Timeuntil in UI (#1461) * cherry pick EventBlockChip * pull data down throug components * add comment * cleanup css Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com> --------- Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com> * fix: account for running day * refactor: improve composition * add partial test --------- Co-authored-by: Alex Christoffer Rasmussen <ac@omnivox.dk>
86 lines
1.8 KiB
SCSS
86 lines
1.8 KiB
SCSS
@use "./ontimeColours" as *;
|
|
|
|
$transition-time-action: 0.1s;
|
|
$transition-time-feedback: 0.3s;
|
|
|
|
$component-border-radius-md: 3px;
|
|
$component-border-radius-sm: 2px;
|
|
$component-border-radius-full: 99px;
|
|
|
|
// semantic colours
|
|
$action-blue: #3182ce;
|
|
$action-text-color: $blue-400;
|
|
$ontime-color: #ff7597;
|
|
$error-red: $red-500;
|
|
$warning-orange: $orange-500;
|
|
$info-blue: $blue-500;
|
|
$opacity-disabled: 0.4;
|
|
$active-red: $red-700;
|
|
|
|
// playback colours
|
|
$playback-start: $green-600;
|
|
$ontime-roll: #0274B6;
|
|
$ontime-delay: #F57C13;
|
|
$ontime-delay-text: #E69056;
|
|
$ontime-paused: #c05621;
|
|
$ontime-stop: #E4281E;
|
|
$playback-negative: $red-500;
|
|
$playback-ahead: $green-500;
|
|
$active-indicator: #8bb33d;
|
|
$text-black: $gray-1350;
|
|
|
|
// interface panels
|
|
$bg-container-l1: $gray-1350;
|
|
$bg-container-l2: $gray-1300;
|
|
$bg-container-l3: $gray-1350;
|
|
|
|
$bg-container-onlight: $gray-100;
|
|
|
|
$box-shadow-l1: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
|
|
$box-shadow-l2: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
|
|
$box-shadow-right: rgba(0, 0, 0, 0.15) 3px 0 3px 0;
|
|
$large-top-drawer-shadow: rgba(0, 0, 0, 0.35) 0 1px 6px 3px;
|
|
|
|
$modal-note-color: $gray-700;
|
|
|
|
// interface elements
|
|
$border-color-ondark: $white-10;
|
|
$element-inner-spacing: 0.25rem;
|
|
$element-spacing: 0.5rem;
|
|
$section-spacing: 1rem;
|
|
$main-spacing: 2rem;
|
|
|
|
// interface text
|
|
$ontime-font-family: "Open Sans", "Segoe UI", sans-serif;
|
|
$title-gray: $gray-200;
|
|
$label-gray: $gray-400;
|
|
$secondary-text-gray: $gray-400;
|
|
$muted-gray: $gray-600;
|
|
$section-white: $ui-white;
|
|
$inner-section-text-size: calc(1rem - 2px);
|
|
$text-body-size: calc(1rem - 1px);
|
|
$aux-text-size: calc(1rem - 3px);
|
|
|
|
// media queries
|
|
$min-tablet: 500px;
|
|
$small-screen: 800px;
|
|
|
|
.blink {
|
|
animation: blink 1s step-start infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0% {
|
|
opacity: 100%;
|
|
}
|
|
50% {
|
|
opacity: 20%;
|
|
}
|
|
}
|
|
|
|
@mixin ellipsis-overflow() {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|