mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-20 06:29:07 +00:00
style v2 tweaks (#415)
* fix: reset rundown on upload * style: facilitate reaching event id * fix: show rundown on half screens * style: prevent tab overflow * style: remove redundant information * style: improve editor in small screens * style: small tweaks to editor sizes
This commit is contained in:
@@ -1,16 +1,16 @@
|
||||
@use '../../theme/ontimeColours' as *;
|
||||
@use '../../theme/v2Styles' as *;
|
||||
|
||||
$block-gap: 4px;
|
||||
$block-element-spacing: 4px;
|
||||
$block-binder-width: 32px;
|
||||
$block-clearance: 8px;
|
||||
$block-border-radius: 8px;
|
||||
$block-gap: 0.25rem;
|
||||
$block-element-spacing: 0.25rem;
|
||||
$block-binder-width: 2rem;
|
||||
$block-clearance: 0.5rem;
|
||||
$block-border-radius: 0.5rem;
|
||||
$block-text-color: $gray-50;
|
||||
$block-bg: $gray-1200;
|
||||
$block-bg2: $gray-1050; // for delay and blocks
|
||||
$block-box-shadow: rgba(0, 0, 0, 0.5) 0 0 3px 2px;
|
||||
$secondary-block-height: 40px;
|
||||
$secondary-block-height: 2.5rem;
|
||||
$block-cursor-color: $blue-400;
|
||||
|
||||
@mixin block-styling() {
|
||||
@@ -18,13 +18,13 @@ $block-cursor-color: $blue-400;
|
||||
border: 1px solid $white-10;
|
||||
font-family: $ontime-font-family;
|
||||
border-radius: $block-border-radius;
|
||||
margin: 4px 2px;
|
||||
margin: 0.25rem 0.125rem;
|
||||
position: relative;
|
||||
color: $block-text-color;
|
||||
}
|
||||
|
||||
@mixin block-spacing() {
|
||||
padding-right: 8px;
|
||||
padding-right: 0.5rem;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
.titleEditor {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-size: calc(1rem + 2px);
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -17,7 +17,7 @@ $skip-opacity: 0.1;
|
||||
"binder ... ... ...";
|
||||
|
||||
grid-template-columns: $block-binder-width auto 1fr auto;
|
||||
grid-template-rows: 4px 36px 36px 36px 4px;
|
||||
grid-template-rows: 0.25rem 2.25rem 2.25rem 2.25rem 0.25rem;
|
||||
align-items: center;
|
||||
padding-right: $block-clearance;
|
||||
gap: 2px;
|
||||
@@ -83,12 +83,12 @@ $skip-opacity: 0.1;
|
||||
|
||||
background-color: $gray-1050; // to override inline
|
||||
color: $section-white;
|
||||
font-size: 17px;
|
||||
font-size: 1rem;
|
||||
|
||||
.drag {
|
||||
@include drag-style;
|
||||
position: absolute;
|
||||
margin-top: 4px;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -96,8 +96,8 @@ $skip-opacity: 0.1;
|
||||
grid-area: pb-actions;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 8px;
|
||||
gap: 6px;
|
||||
margin: 0 0.5rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.eventTimers {
|
||||
@@ -108,8 +108,8 @@ $skip-opacity: 0.1;
|
||||
height: 100%;
|
||||
|
||||
.delayNote {
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
font-size: 0.75rem;
|
||||
line-height: 0.8rem;
|
||||
color: $ontime-delay-text;
|
||||
}
|
||||
}
|
||||
@@ -125,10 +125,6 @@ $skip-opacity: 0.1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.eventOptions {
|
||||
margin: $element-spacing 16px $element-spacing 0;
|
||||
}
|
||||
|
||||
.progressBg {
|
||||
grid-area: progb;
|
||||
border-radius: 2px;
|
||||
@@ -152,7 +148,7 @@ $skip-opacity: 0.1;
|
||||
"notes status"
|
||||
"progb progb";
|
||||
gap: 2px;
|
||||
grid-template-rows: auto 4px;
|
||||
grid-template-rows: auto 0.25rem;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 2px 0;
|
||||
@@ -161,15 +157,15 @@ $skip-opacity: 0.1;
|
||||
.eventNote {
|
||||
grid-area: notes;
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-size: calc(1rem - 3px);
|
||||
color: $block-text-color;
|
||||
line-height: 13px;
|
||||
line-height: calc(1rem - 3px);
|
||||
}
|
||||
|
||||
|
||||
.nextTag {
|
||||
grid-area: next;
|
||||
font-size: 1em;
|
||||
font-size: 1rem;
|
||||
color: $orange-500;
|
||||
letter-spacing: 0.03px;
|
||||
font-weight: 600;
|
||||
@@ -181,13 +177,13 @@ $skip-opacity: 0.1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 0.5rem;
|
||||
color: var(--status-color-override, $gray-500);
|
||||
|
||||
|
||||
.statusIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.statusIcon.active {
|
||||
|
||||
Reference in New Issue
Block a user