Skip to content

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

remove debug style

parent 2aa11595
Hide whitespace changes
Inline Side-by-side
Showing with 96 additions and 131 deletions
src/assets/css/main.css
View file @ 86caf92f
html {
box-sizing: border-box;
-webkit-user-select: none;
}
*,
*:before,
......@@ -16,24 +17,50 @@ body {
margin: 0;
background: #212629;
color: #fff;
overflow: hidden;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
.tooltip {
background: #000;
color: #fff;
padding: 5px 15px;
border-radius: 4px;
position: absolute;
z-index: 100;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
display: none;
::-webkit-scrollbar {
background: #212529;
width: 5px;
}
.tooltip.active {
display: block;
::-webkit-scrollbar-thumb {
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 {
font-family: 'Open Sans', sans-serif;
......@@ -81,62 +108,17 @@ button:focus,
.button:focus {
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 {
margin: 20px;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
display: none;
}
section.active {
display: block;
}
section.section-trackinfo {
grid-template-columns: 100px auto;
grid-template-rows: auto auto;
grid-template-areas: "cover metadata" "actions actions";
grid-gap: 25px;
section.section-startup {
padding: 50px;
}
section.section-trackinfo.active {
section.section-startup.active {
display: grid;
}
section.section-trackinfo .cover {
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;
grid-template-rows: auto;
grid-gap: 25px;
}
src/assets/css/main.less
View file @ 86caf92f
html {
box-sizing: border-box;
-webkit-user-select: none;
}
*, *:before, *:after {
box-sizing: inherit;
......@@ -14,27 +15,55 @@ body {
margin: 0;
background: #212629;
color: #fff;
overflow: hidden;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
.tooltip {
background: #000;
color: #fff;
padding: 5px 15px;
border-radius: 4px;
position: absolute;
z-index: 100;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
display: none;
::-webkit-scrollbar {
background: #212529;
width: 5px;
}
::-webkit-scrollbar-thumb {
background: #fff;
}
main {
display: grid;
margin-left: 60px;
overflow-y: scroll;
&.active {
display: block;
& 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 {
opacity: 1;
background: linear-gradient(135deg, #00FFEE, #45C1FF);
}
& .mdi {
font-size: 22px;
}
}
}
}
input {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
......@@ -80,66 +109,20 @@ button, .button {
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 {
margin: 20px;
padding: 20px;
background: rgba(255,255,255,0.1);
border-radius: 5px;
display: none;
&.active {
display: block;
}
&.section-trackinfo {
grid-template-columns: 100px auto;
grid-template-rows: auto auto;
grid-template-areas: "cover metadata"
"actions actions";
grid-gap: 25px;
&.active { display: grid; }
& .cover {
width: 100px;
height: 100px;
background: rgba(255,255,255,0.2);
border-radius: 4px;
grid-area: cover;
background-size: cover;
}
& .metadata {
grid-area: metadata;
&.section-startup {
padding: 50px;
& .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;
&.active {
display: grid;
grid-template-rows: auto;
grid-gap: 25px;
}
}
&.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