mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-06 07:53:54 +00:00
Carlos Valente
8d8bbef546
* feat: selected event if is first * style: fix wrap - remove wrap tag (broken in firefox) * feat: add more text to notes this is a quick fix and does not replace the real deal. using a text input makes it difficult to edit, this should be revised with a textarea on note field * upgrade electron * Stage timer in /sm has placeholder when not running * fix style issue where clock would move depending on whether there are events selected * ensure ontime logo and text have a minimum readable size * fix scrollbar styling * clean debugging logs * link to latest release using gitreleases.dev service for this. this is a temporary fix until we have a release (in opposition to pre-release) so we can use githubs latest link * scale gracefully * fixed error with naming of maxChar
134 lines
2.1 KiB
CSS
134 lines
2.1 KiB
CSS
.mainContainer {
|
|
background: linear-gradient(90deg, #202020 0%, #121212 100%);
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: auto;
|
|
color: #fffd;
|
|
padding: max(16px, 2vh);
|
|
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
grid-template-columns: 40px 48em auto 1fr;
|
|
grid-template-areas:
|
|
'sett even play info'
|
|
'sett even mess info';
|
|
gap: max(16px, 2vh);
|
|
}
|
|
|
|
/* 2/3 window, hide info */
|
|
@media (max-width: 1450px) and (min-height: 700px) {
|
|
.mainContainer {
|
|
height: 100%;
|
|
grid-template-rows: auto 1fr;
|
|
grid-template-columns: 40px 48em auto;
|
|
/* grid-template-areas:
|
|
'even play sett'
|
|
'even mess sett'; */
|
|
}
|
|
|
|
.info {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
/* 1/3 window, show control only */
|
|
@media (max-width: 850px) and (min-height: 500px) {
|
|
.mainContainer {
|
|
grid-template-rows: auto 1fr;
|
|
grid-template-columns: 100%;
|
|
column-gap: 0;
|
|
grid-template-areas:
|
|
'play'
|
|
'mess';
|
|
}
|
|
|
|
.editor,
|
|
.info,
|
|
.settings {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
/* 1/3 corner window, playback only */
|
|
@media (max-width: 900px) and (max-height: 500px) {
|
|
.mainContainer {
|
|
grid-template-rows: 100%;
|
|
grid-template-columns: 100%;
|
|
grid-template-areas: 'play';
|
|
max-height: 325px;
|
|
}
|
|
|
|
.editor,
|
|
.messages,
|
|
.info,
|
|
.settings {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font-size: max(1.5em, 16px);
|
|
color: rgba(255, 255, 255, 0.63);
|
|
padding-bottom: 0.25em;
|
|
}
|
|
|
|
.mainContainer > div {
|
|
border-radius: 0.5em;
|
|
height: 100%;
|
|
background-color: rgba(255, 255, 255, 0.13);
|
|
padding: 0.8em 1.5em;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.editor {
|
|
grid-area: even;
|
|
}
|
|
|
|
.info {
|
|
grid-area: info;
|
|
}
|
|
|
|
.messages {
|
|
grid-area: mess;
|
|
}
|
|
|
|
.playback {
|
|
grid-area: play;
|
|
}
|
|
|
|
.messages,
|
|
.playback {
|
|
min-width: 31em;
|
|
}
|
|
|
|
.mainContainer > .settings {
|
|
grid-area: sett;
|
|
background-color: transparent;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: fit-content;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1em;
|
|
}
|
|
|
|
.content {
|
|
padding-top: 0.5em;
|
|
}
|
|
|
|
.cornerButtonContainer {
|
|
position: relative;
|
|
top: -4.5em;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.buttonContainer {
|
|
padding-bottom: 2em;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|