mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-11 18:33:53 +00:00
Feat/mac (#109)
* 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
This commit is contained in:
Carlos Valente
GitHub
@@ -1,33 +1,96 @@
|
||||
//////////////////////////////////// general app colours
|
||||
|
||||
$ontime-accent: #4bffabcc;
|
||||
|
||||
$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;
|
||||
|
||||
$error-red: #E53E3E;
|
||||
$info-gray: #aaa;
|
||||
$info-gray-hover: #ddd;
|
||||
$warning-orange: #dd6b20;
|
||||
$error-red: #e53e3e;
|
||||
|
||||
//////////////////////////////////// viewers
|
||||
$title-white: #fffd;
|
||||
$bg-black: #121212;
|
||||
$bg-black-gradient: #202020;
|
||||
|
||||
$title-gray: #ddd;
|
||||
$subtitle-gray: #aaa;
|
||||
|
||||
//////////////////////////////////// block elements
|
||||
$block-delay-color: #ecc94b;
|
||||
$block-delay-border: #d69e2e55;
|
||||
$block-block-color: #805ad5;
|
||||
$block-icon-drag: rgba(255, 255, 255, 0.67);
|
||||
$block-border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
$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
|
||||
|
||||
|
||||
@@ -1,20 +1,27 @@
|
||||
@use "./main" as *;
|
||||
|
||||
//////////////////////////////////// general app elements
|
||||
|
||||
@mixin main-container {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
background-color: $bg-gray-1000;
|
||||
border: 1px solid $bg-gray-1000;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@mixin second-container {
|
||||
background-color: $bg-gray-1100;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@mixin container-bg {
|
||||
background-color: rgba(0, 0, 0, 0.13);
|
||||
@mixin third-container {
|
||||
background-color: $bg-black-300;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
border-radius: 2px;
|
||||
padding: 0 0.5em;
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
|
||||
@mixin osc-label {
|
||||
color: #4bffabcc;
|
||||
color: $ontime-accent-text;
|
||||
font-size: 0.8em;
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
|
||||
@@ -0,0 +1,190 @@
|
||||
@use './main' as *;
|
||||
|
||||
@mixin viewer-container {
|
||||
margin: 0;
|
||||
box-sizing: border-box; /* reset */
|
||||
overflow: hidden;
|
||||
width: 100%; /* restrict the page width to viewport */
|
||||
background: $bg-black;
|
||||
height: 100vh;
|
||||
color: $title-white;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@mixin viewer-event-title {
|
||||
font-size: 3vw;
|
||||
font-weight: 600;
|
||||
text-decoration: underline $ontime-pink 0.5vh;
|
||||
padding-top: 0.2vh;
|
||||
padding-left: 1vw;
|
||||
}
|
||||
|
||||
@mixin viewer-info-messages {
|
||||
font-size: 1.5vw;
|
||||
line-height: 2vw;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
////////////////////////////// Specifics
|
||||
|
||||
.label {
|
||||
font-size: 1.3vw;
|
||||
color: $ontime-pink;
|
||||
}
|
||||
|
||||
.infoContainer > div {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nextContainer > div,
|
||||
.nowContainer > div {
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
.nowContainer,
|
||||
.nextContainer,
|
||||
.todayContainer {
|
||||
background-color: $bg-gray-1000;
|
||||
padding: 1vh 2vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.clockContainer,
|
||||
.countdownContainer,
|
||||
.publicContainer,
|
||||
.publicContainerHidden {
|
||||
background-color: $bg-gray-1000;
|
||||
padding: 1vh 1vw;
|
||||
}
|
||||
|
||||
.publicContainer {
|
||||
opacity: 1;
|
||||
transition: 0.5s;
|
||||
transition-property: opacity;
|
||||
}
|
||||
|
||||
.publicContainerHidden {
|
||||
opacity: 0;
|
||||
transition: 0.5s;
|
||||
transition-property: opacity;
|
||||
}
|
||||
|
||||
.todayContainer,
|
||||
.infoContainer {
|
||||
background-color: $bg-gray-1100;
|
||||
padding: 2.5vh 2vw;
|
||||
}
|
||||
|
||||
.infoContainer,
|
||||
.todayContainer,
|
||||
.publicContainer,
|
||||
.publicContainerHidden {
|
||||
border-radius: 1vw;
|
||||
}
|
||||
|
||||
.nowContainer,
|
||||
.nextContainer {
|
||||
margin-left: -1vw;
|
||||
}
|
||||
|
||||
.qr {
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
grid-area: qr;
|
||||
}
|
||||
|
||||
.clock {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 3vw;
|
||||
line-height: 3vw;
|
||||
text-align: center;
|
||||
letter-spacing: 0.25vw;
|
||||
color: $clocks;
|
||||
}
|
||||
|
||||
.infoContainer {
|
||||
grid-area: info;
|
||||
display: grid;
|
||||
|
||||
grid-template-rows: 3vh minmax(0, 1fr);
|
||||
grid-template-columns: 3fr 1fr;
|
||||
grid-template-areas:
|
||||
'titl .'
|
||||
'binf qr';
|
||||
gap: 0.5vw;
|
||||
}
|
||||
|
||||
.infoMessages {
|
||||
grid-area: binf;
|
||||
font-size: 1.5vw;
|
||||
line-height: 2vw;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.clockContainer {
|
||||
grid-area: time;
|
||||
border-radius: 1vw;
|
||||
}
|
||||
|
||||
.message {
|
||||
font-size: 3vw;
|
||||
line-height: 3vw;
|
||||
padding: 0.5vh 0 0.5vh 1vw;
|
||||
}
|
||||
|
||||
.todayContainer {
|
||||
margin-top: 3vh;
|
||||
height: 95%;
|
||||
|
||||
.todayHeaderBlock {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1.5vh;
|
||||
|
||||
.navItem,
|
||||
.navItemSelected {
|
||||
background-color: $bg-gray-700;
|
||||
width: 0.7vw;
|
||||
height: 0.7vw;
|
||||
border-radius: 0.35vw;
|
||||
}
|
||||
|
||||
.navItemSelected {
|
||||
background-color: $bg-gray-100;
|
||||
}
|
||||
|
||||
.nav {
|
||||
align-self: center;
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
margin-bottom: 2.5vh;
|
||||
}
|
||||
|
||||
.nav > div {
|
||||
margin-left: 0.5vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.infoContainer {
|
||||
display: grid;
|
||||
|
||||
grid-template-rows: 3vh minmax(0, 1fr);
|
||||
grid-template-columns: 3fr 1fr;
|
||||
grid-template-areas:
|
||||
'titl .'
|
||||
'binf qr';
|
||||
gap: 0.5vw;
|
||||
|
||||
.infoMessages {
|
||||
grid-area: binf;
|
||||
font-size: 1.5vw;
|
||||
line-height: 2vw;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.clockContainer {
|
||||
grid-area: time;
|
||||
border-radius: 1vw;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user