src/assets/less/main_window.less
@import "_colors.less";
@import "_variables.less";
.fill-parent {
height: 100%;
width: 100%;
}
html {
overflow: hidden;
}
html, body {
.fill-parent;
margin: 0;
padding: 0;
background: #fff;
}
// Make modal inside custom frame
.lean-overlay {
height: calc(~"100vh - " (@border-width * 2 + @title-bar-height));
width: calc(~"100vw - " ((@border-width - 0.05em) * 2));
margin: (@border-width - 0.05em);
margin-top: @border-width + @title-bar-height;
top: 0;
}
.darwin-title-bar {
display: none;
}
// Hide custom frame when native frame is used
.native-frame {
.lean-overlay {
height: 125%;
width: 100%;
margin: 0;
top: -100px;
}
.darwin-title-bar {
height: @title-bar-height-darwin;
transition: margin-top 160ms;
flex-shrink: 0;
display: flex !important;
align-items: center;
justify-content: center;
font-size: @title-bar-text-size;
-webkit-user-select: none;
-webkit-app-region: drag;
padding: 0 70px;
.title {
flex: 0 1 auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: @grey;
}
background-color: @orange;
[loaded] & {
transition: background-color 0.3s ease;
}
}
.window-border {
border: 0;
> header {
display: none;
}
.embedded-player {
height: 100vh !important;
&.darwin {
height: calc(100vh ~"-" @title-bar-height-darwin) !important;
}
}
&.fullscreen .embedded-player.darwin {
height: 100vh !important;
}
}
#lyrics_back {
display: none;
top: 100vh;
left: 0;
width: 100vw;
height: 100vh;
&.vis {
display: block;
top: 0;
}
}
}
.window-border {
&.fullscreen {
border-width: 0;
header {
display: none;
}
.embedded-player {
height: 100vh;
}
}
.fill-parent;
border: @border-width solid @orange;
border-top-width: 0;
display: flex;
flex-direction: column;
[loaded] & {
transition: border 0.3s ease;
}
.title-bar {
height: @title-bar-height + @border-width;
background: @orange;
display: flex;
[loaded] & {
transition: background 0.3s ease;
}
.drag-handle {
height: ~"calc(100% - 5px)";
flex: 1;
-webkit-app-region: drag;
align-self: flex-end;
}
.controls {
height: 100%;
float: right;
padding-right: 0.2em;
-webkit-user-select: none;
.control {
height: 100%;
padding: 4px 10px;
transition: background 0.2s linear;
background: rgba(255, 255, 255, 0);
float: left;
cursor: pointer;
img {
height: 100%;
-webkit-filter: invert(1);
-webkit-user-drag: none;
}
&:hover {
background: rgba(255, 255, 255, 0.6);
}
}
}
}
.drag-handle-large {
display: none;
}
.embedded-player-container {
flex: 1;
background: @grey;
position: relative;
.embedded-player {
height: calc(~"100vh -" (@title-bar-height + @border-width * 2));
display: flex;
transition: opacity 0.4s linear;
position: relative;
z-index: 2;
[loading] & {
opacity: 0;
}
outline: 0;
&::shadow {
object {
height: 100%;
width: 100%;
outline: 0;
}
}
}
}
}
.drag-handle-large {
position: absolute;
top: 10px;
left: 7px;
height: 60%;
width: calc(~"100% - 14px");
display: block;
}
#color_wheel_container {
padding: 14px;
> div {
margin: 0 auto;
}
}
#lyrics_back {
position: fixed;
top: 100vh;
left: @border-width * 0.9;
width: calc(~"100vw -" (@border-width * 1.8));
height: calc(~"100vh -" (@title-bar-height + @border-width * 1.8));
z-index: 999999999;
overflow: hidden;
opacity: 0;
background: @darksecondary;
&.vis {
top: @title-bar-height + @border-width;
opacity: 1;
transition: all .15s ease-in-out;
}
#lyrics_container {
color: white;
text-align: center;
padding: 24px;
display: flex;
height: 100%;
width: 100%;
#search-link {
position: absolute;
bottom: 70px;
right: 25px;
text-decoration: underline;
cursor: pointer;
}
#lyrics {
height: 100%;
width: 100%;
display: flex;
h1 {
font-size: 42px;
text-align: center;
align-self: center;
width: 100%;
padding: 12px 0;
}
p {
text-align: center;
width: 100%;
font-size: 26px;
line-height: 1.6em;
padding: 12px 0;
overflow: auto;
}
p[data-scroll] {
overflow: hidden; /* Hide scroll bar so that the user relies on auto scroll */
}
@media (max-width: 35em) {
p {
font-size: 4.5vw;
padding: 5vw 0;
}
}
@media (max-width: 20em) {
p {
font-size: 12px;
padding: 26px 0;
}
}
}
#shadow {
position: absolute;
top: 0;
left: -80px;
width: calc(100% + 2*80px);
height: 100%;
box-shadow: 0 0 20px 66px @darksecondary inset;
pointer-events: none;
}
}
#lyrics_progress {
position: relative;
bottom: 4px;
height: 4px;
width: 100%;
background: @orange;
box-shadow: 0 0 8px rgba(0,0,0,.4);
[loaded] & {
transition: background 0.3s ease;
}
#lyrics_bar {
position: absolute;
height: 100%;
width: 0%;
background: @darkprimary;
[loaded] & {
transition: background 0.3s ease;
}
}
}
}
#welcome.open {
display: flex !important;
flex-direction: column;
overflow: hidden;
.modal-content {
flex: 1 auto;
overflow: auto;
}
.modal-footer {
margin-bottom: 8px;
}
}
.offline-warning {
position: absolute;
background: @white;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 999;
text-align: center;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
.offline & {
display: flex;
}
i {
color: @darkprimary;
font-size: 500px;
}
h1 {
font-size: 62px;
color: @darkprimary;
}
@media (max-width: 1100px), (max-height: 660px) {
i { font-size: 300px; }
h1 { font-size: 44px; }
}
@media (max-width: 650px), (max-height: 530px) {
i { font-size: 200px; }
h1 { font-size: 32px; }
}
@media (max-width: 400px), (max-height: 400px) {
i { font-size: 160px; }
h1 { font-size: 28px; }
}
@media (max-width: 300px), (max-height: 350px) {
i { font-size: 80px; }
h1 { font-size: 22px; }
}
}
#APICodeContainer {
display: block;
font-size: 72px;
text-align: center;
letter-spacing: 40px;
}