mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-10 01:43:43 +00:00
Carlos Valente
db0eee3b9c
* chore: upgrade dependencies * feat/mac: draft pipeline * feat/mac: use public folder for transient files * feat/mac: set app fullscreen * feat/mac: cmd + , toggles menu * feat/mac: update readme * refact: easier login process * refact prevent style issues with safari * refact reduce css download * style: cleanup paginator design * style: studio clock is responsive * style: fix spacing style issues with safari
132 lines
2.8 KiB
SCSS
132 lines
2.8 KiB
SCSS
//////////////////////////////////// general app colours
|
|
|
|
|
|
$bg-black-gradient: #202020;
|
|
$bg-black: #121212;
|
|
$bg-black-100: #070707;
|
|
$bg-black-200: #1a1a1a; // container borders
|
|
$bg-black-300: #1f1f1f; // container text
|
|
$bg-gray-1100: #232323; // container borders
|
|
$bg-gray-1000: #262626; // container borders
|
|
$bg-gray-950: #292929;
|
|
$bg-gray-900: #303030;
|
|
$bg-gray-800: #404040;
|
|
$bg-gray-700: #505050;
|
|
$bg-gray-500: #666666;
|
|
$bg-gray-100: #c0c0c0; // borders and whatnot
|
|
|
|
$bg-overlay: rgba(0, 0, 0, 0.85);
|
|
|
|
$ontime-accent: #4bffab;
|
|
$ontime-accent-text: mix($bg-black, $ontime-accent, 10%);
|
|
$ontime-pink: #ff7597;
|
|
$ontime-pink-variant: #ff6969;
|
|
$ontime-roll: #2b6cb0;
|
|
$ontime-delay: #dd6b20;
|
|
|
|
|
|
//rgba(255, 255, 255, 0.39); - $bg-gray-700
|
|
//rgba(255, 255, 255, 0.13); - $bg-gray-900
|
|
//rgba(255, 255, 255, 0.05); - $bg-gray-1000
|
|
//rgba(255, 255, 255, 0.07) - $bg-gray-1000
|
|
// text input bg -
|
|
// was rgba(255, 255, 255, 0.03)
|
|
// container level 1 - $bg-gray-1000
|
|
// container level 2 - $bg-gray-1100
|
|
// container level 2 border - rgba(0, 0, 0, 0.05)
|
|
// indent in level 2 - $bg-black-300
|
|
// outdent in level2 - $bg-gray-950
|
|
//////////////////////////////////// editor
|
|
|
|
$notes-color: #d69e2e;
|
|
|
|
$text-white: #fffffa;
|
|
$text-gray-disabled: #999;
|
|
$header-gray: #ccc;
|
|
$label-gray: #aaa;
|
|
$clocks: #ddd;
|
|
$bg-gray: #f4f4f8;
|
|
|
|
$light-bg: #2b6cb0;
|
|
$light-bg-transparent: #2b6cb055;
|
|
$light-text: #2b6cb022;
|
|
|
|
$info-gray: #aaa;
|
|
$info-gray-hover: #ddd;
|
|
$warning-orange: #dd6b20;
|
|
$error-red: #e53e3e;
|
|
|
|
//////////////////////////////////// viewers
|
|
$title-white: #fffd;
|
|
$title-gray: #ddd;
|
|
$subtitle-gray: #aaa;
|
|
|
|
//////////////////////////////////// block elements
|
|
$block-delay-color: #ecc94b;
|
|
$block-delay-border: #d69e2e55;
|
|
$block-block-color: #805ad5;
|
|
$block-icon-drag: $bg-gray-100;
|
|
$block-border: 1px solid $bg-gray-800;
|
|
|
|
//////////////////////////////////// viewer cards
|
|
@mixin card-title {
|
|
color: $title-gray;
|
|
font-weight: 600;
|
|
}
|
|
|
|
@mixin card-label {
|
|
font-size: 1.3vw;
|
|
color: $ontime-pink;
|
|
}
|
|
|
|
//////////////////////////////////// utils
|
|
|
|
@mixin ellipsis {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
//////////////////////////////////// custom inputs
|
|
$input-bg: rgba(255, 255, 255, 0.03);
|
|
$input-border: 1px solid $bg-gray-800;
|
|
$input-delayed-border: 1px solid $block-delay-border;
|
|
|
|
//////////////////////////////////// general app element overriders
|
|
|
|
// no decoration on lists
|
|
ul {
|
|
list-style-type: none;
|
|
}
|
|
|
|
// no resizing on text areas
|
|
textarea {
|
|
resize: none !important;
|
|
}
|
|
|
|
// Define style for a link
|
|
a {
|
|
&::after {
|
|
content: ' \2197';
|
|
color: $ontime-pink;
|
|
}
|
|
|
|
&:hover {
|
|
color: $ontime-pink;
|
|
}
|
|
}
|
|
|
|
// horizontal separator
|
|
.hSeparator {
|
|
width: 100%;
|
|
border-bottom: 1px solid $light-bg;
|
|
margin: 1em auto;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
// inline vertical separator
|
|
.vSpan {
|
|
margin: 0 0.5em;
|
|
}
|