Skip to content

D
Desktop Client
Commit 86caf92f authored by Andreas Heimann's avatar Andreas Heimann
Browse files
Options

remove debug style

parent 2aa11595
Show whitespace changes
Inline Side-by-side
Showing with 96 additions and 131 deletions
src/assets/css/main.css
View file @ 86caf92f
html { html {
box-sizing: border-box; box-sizing: border-box;
-webkit-user-select: none;
} }
*, *,
*:before, *:before,
...@@ -16,24 +17,50 @@ body { ...@@ -16,24 +17,50 @@ body {
margin: 0; margin: 0;
background: #212629; background: #212629;
color: #fff; color: #fff;
overflow: hidden;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-size: 14px; font-size: 14px;
} }
.tooltip { ::-webkit-scrollbar {
background: #000; background: #212529;
color: #fff; width: 5px;
padding: 5px 15px;
border-radius: 4px;
position: absolute;
z-index: 100;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
display: none;
} }
.tooltip.active { ::-webkit-scrollbar-thumb {
display: block; background: #fff;
}
main {
display: grid;
margin-left: 60px;
overflow-y: scroll;
}
main aside {
background: rgba(255, 255, 255, 0.1);
display: grid;
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
grid-template-rows: 1fr auto;
}
main aside .item {
width: 60px;
height: 60px;
opacity: 0.4;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
transition: 0.2s ease opacity, 0.2s ease background;
}
main aside .item:hover {
opacity: 1;
cursor: pointer;
}
main aside .item.active {
opacity: 1;
background: linear-gradient(135deg, #00FFEE, #45C1FF);
}
main aside .item .mdi {
font-size: 22px;
} }
input { input {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
...@@ -81,62 +108,17 @@ button:focus, ...@@ -81,62 +108,17 @@ button:focus,
.button:focus { .button:focus {
outline: 0; outline: 0;
} }
header {
background: rgba(255, 255, 255, 0.1);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
}
header .title {
font-size: 20px;
padding: 15px 40px;
}
section { section {
margin: 20px;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
display: none; display: none;
} }
section.active { section.active {
display: block; display: block;
} }
section.section-trackinfo { section.section-startup {
grid-template-columns: 100px auto; padding: 50px;
grid-template-rows: auto auto;
grid-template-areas: "cover metadata" "actions actions";
grid-gap: 25px;
} }
section.section-trackinfo.active { section.section-startup.active {
display: grid; display: grid;
} grid-template-rows: auto;
section.section-trackinfo .cover { grid-gap: 25px;
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
grid-area: cover;
background-size: cover;
}
section.section-trackinfo .metadata {
grid-area: metadata;
}
section.section-trackinfo .metadata .ui-song-title {
font-size: 1.25em;
font-weight: bold;
}
section.section-trackinfo .metadata .ui-song-subtitle {
margin-bottom: 15px;
}
section.section-trackinfo .metadata .ui-song-artist {
margin-bottom: 5px;
opacity: 0.6;
}
section.section-trackinfo .metadata .ui-song-author {
opacity: 0.6;
}
section.section-trackinfo .actions {
grid-area: actions;
}
section.section-result {
padding: 20px;
text-align: center;
} }
src/assets/css/main.less
View file @ 86caf92f
html { html {
box-sizing: border-box; box-sizing: border-box;
-webkit-user-select: none;
} }
*, *:before, *:after { *, *:before, *:after {
box-sizing: inherit; box-sizing: inherit;
...@@ -14,27 +15,55 @@ body { ...@@ -14,27 +15,55 @@ body {
margin: 0; margin: 0;
background: #212629; background: #212629;
color: #fff; color: #fff;
overflow: hidden;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-size: 14px; font-size: 14px;
} }
.tooltip { ::-webkit-scrollbar {
background: #000; background: #212529;
color: #fff; width: 5px;
padding: 5px 15px; }
border-radius: 4px; ::-webkit-scrollbar-thumb {
position: absolute; background: #fff;
z-index: 100; }
font-size: 12px; main {
font-weight: bold; display: grid;
text-transform: uppercase; margin-left: 60px;
display: none; overflow-y: scroll;
& aside {
background: rgba(255,255,255,0.1);
display: grid;
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
grid-template-rows: 1fr auto;
& .item {
width: 60px;
height: 60px;
opacity: 0.4;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
transition: 0.2s ease opacity, 0.2s ease background;
&:hover {
opacity: 1;
cursor: pointer;
}
&.active { &.active {
display: block; opacity: 1;
background: linear-gradient(135deg, #00FFEE, #45C1FF);
} }
}
& .mdi {
font-size: 22px;
}
}
}
}
input { input {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-size: 12px; font-size: 12px;
...@@ -80,66 +109,20 @@ button, .button { ...@@ -80,66 +109,20 @@ button, .button {
outline: 0; outline: 0;
} }
} }
header {
background: rgba(255,255,255,0.1);
box-shadow: 0px 4px 8px rgba(0,0,0,0.4);
& .title {
font-size: 20px;
padding: 15px 40px;
}
}
section { section {
margin: 20px;
padding: 20px;
background: rgba(255,255,255,0.1);
border-radius: 5px;
display: none; display: none;
&.active { &.active {
display: block; display: block;
} }
&.section-trackinfo { &.section-startup {
grid-template-columns: 100px auto; padding: 50px;
grid-template-rows: auto auto;
grid-template-areas: "cover metadata"
"actions actions";
grid-gap: 25px;
&.active { display: grid; } &.active {
& .cover { display: grid;
width: 100px; grid-template-rows: auto;
height: 100px; grid-gap: 25px;
background: rgba(255,255,255,0.2);
border-radius: 4px;
grid-area: cover;
background-size: cover;
}
& .metadata {
grid-area: metadata;
& .ui-song-title {
font-size: 1.25em;
font-weight: bold;
}
& .ui-song-subtitle {
margin-bottom: 15px;
}
& .ui-song-artist {
margin-bottom: 5px;
opacity: 0.6;
}
& .ui-song-author {
opacity: 0.6;
}
}
& .actions {
grid-area: actions;
}
} }
&.section-result {
padding: 20px;
text-align: center;
} }
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment