mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-07 08:23:55 +00:00
Carlos Valente
93fb48ea1c
* feat: operator view * chore: smoke test operator * refactor: small improvements from deepsource --------- Co-authored-by: arihanv <arihanvaranasi@gmail.com> Co-authored-by: arihanv <63890951+arihanv@users.noreply.github.com>
71 lines
1.5 KiB
SCSS
71 lines
1.5 KiB
SCSS
@use "./ontimeColours" as *;
|
|
|
|
$transition-time-action: 0.1s;
|
|
$transition-time-feedback: 0.3s;
|
|
|
|
$blinking-time: 1.2s;
|
|
|
|
$component-border-radius-md: 3px;
|
|
$component-border-radius-sm: 2px;
|
|
|
|
// semantic colours
|
|
$action-blue: #3182ce;
|
|
$action-text-color: $blue-400;
|
|
$ontime-color: #ff7597;
|
|
$error-red: $red-500;
|
|
$warning-orange: $orange-500;
|
|
$opacity-disabled: 0.4;
|
|
|
|
// 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;
|
|
$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;
|
|
$large-bottom-drawer-shadow: rgba(0, 0, 0, 0.35) 0 3px 6px 6px;
|
|
$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;
|
|
$label-gray: $gray-400;
|
|
$secondary-text-gray: $gray-400;
|
|
$section-white: $ui-white;
|
|
$inner-section-text-size: calc(1rem - 2px);
|
|
$text-body-size: calc(1rem - 1px);
|
|
|
|
// media queries
|
|
$min-tablet: 500px;
|
|
|
|
.blink {
|
|
animation: blink $blinking-time linear infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
50% {
|
|
opacity: 20%;
|
|
}
|
|
}
|