Skip to content

D
Desktop Client
Commit 49466cd9 authored by Andreas Heimann's avatar Andreas Heimann
Browse files
Options

add startup style

parent 3727454f
Hide whitespace changes
Inline Side-by-side
Showing with 324 additions and 0 deletions
src/assets/css/startup.css 0 → 100644
View file @ 49466cd9
.staff-ads {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 25px;
}
.staff-ads .staff-ad {
background: #fff;
border-radius: 6px;
padding: 50px;
height: 256px;
display: grid;
transition: 0.2s ease all;
grid-template-rows: auto 100px auto;
}
.staff-ads .staff-ad .ad-type {
color: #aaa;
justify-self: left;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.3em;
}
.staff-ads .staff-ad .ad-title {
font-weight: bold;
font-size: 34px;
justify-self: left;
align-self: flex-start;
letter-spacing: -0.025em;
color: #222;
}
.staff-ads .staff-ad .ad-button {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
padding: 10px 25px;
color: #fff;
background: #aaa;
justify-self: left;
border-radius: 6px;
transition: 0.2s ease-in-out all;
}
.staff-ads .staff-ad .ad-button:hover {
cursor: pointer;
opacity: 0.6;
}
.staff-ads .staff-ad.ad-loading {
opacity: 0.2;
}
.song-row {
display: grid;
grid-template-rows: auto 1fr;
grid-gap: 5px;
}
.song-row .song-header {
display: grid;
letter-spacing: 0.25em;
grid-template-columns: 1fr auto;
}
.song-row .song-header .row-title {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
.song-row .song-header .row-controls {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 15px;
}
.song-row .song-header .row-controls .item {
width: 28px;
height: 28px;
font-size: 22px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.song-row .song-header .row-controls .item.disabled {
opacity: 0.4;
}
.song-row .song-header .row-controls .item:not(.disabled):hover {
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
}
.song-row .song-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 15px;
}
.song-row .song-list .song-item {
background: rgba(255, 255, 255, 0.1);
transition: 0.2s ease-in-out transform, 0.2s ease-in-out box-shadow;
overflow: hidden;
}
.song-row .song-list .song-item .song-cover {
background: rgba(255, 255, 255, 0.1);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.song-row .song-list .song-item .song-cover .song-charter {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
opacity: 0;
padding: 15px;
overflow: hidden;
display: grid;
transition: 0.2s ease-in-out opacity;
grid-template-columns: auto 1fr;
grid-gap: 10px;
align-items: flex-end;
}
.song-row .song-list .song-item .song-cover .song-charter .song-charter-info {
display: grid;
align-items: center;
}
.song-row .song-list .song-item .song-cover .song-charter .song-charter-info .mdi {
font-size: 18px;
}
.song-row .song-list .song-item .song-cover .song-charter .song-charter-info span {
font-size: 12px;
color: transparent;
transition: 0.2s ease-in-out color;
overflow: hidden;
white-space: nowrap;
}
.song-row .song-list .song-item .song-metadata {
padding: 15px;
}
.song-row .song-list .song-item .song-metadata .song-title {
font-weight: bold;
overflow: hidden;
white-space: nowrap;
}
.song-row .song-list .song-item .song-metadata .song-artist {
margin-top: 5px;
opacity: 0.6;
overflow: hidden;
white-space: nowrap;
}
.song-row .song-list .song-item:not(.song-item-loading):hover {
transform: scale(1.1);
cursor: pointer;
box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
}
.song-row .song-list .song-item:not(.song-item-loading):hover .song-cover .song-charter {
opacity: 1;
}
src/assets/css/startup.less 0 → 100644
View file @ 49466cd9
.staff-ads {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 25px;
& .staff-ad {
background: #fff;
border-radius: 6px;
padding: 50px;
height: 256px;
display: grid;
transition: 0.2s ease all;
grid-template-rows: auto 100px auto;
& .ad-type {
color: #aaa;
justify-self: left;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.3em;
}
& .ad-title {
font-weight: bold;
font-size: 34px;
justify-self: left;
align-self: flex-start;
letter-spacing: -0.025em;
color: #222;
}
& .ad-button {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
padding: 10px 25px;
color: #fff;
background: #aaa;
justify-self: left;
border-radius: 6px;
transition: 0.2s ease-in-out all;
&:hover {
cursor: pointer;
opacity: 0.6;
}
}
&.ad-loading {
opacity: 0.2;
}
}
}
.song-row {
display: grid;
grid-template-rows: auto 1fr;
grid-gap: 5px;
& .song-header {
display: grid;
letter-spacing: 0.25em;
grid-template-columns: 1fr auto;
& .row-title {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
& .row-controls {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 15px;
& .item {
width: 28px;
height: 28px;
font-size: 22px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
&.disabled {
opacity: 0.4;
}
&:not(.disabled):hover {
background: rgba(255,255,255,0.2);
cursor: pointer;
}
}
}
}
& .song-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 15px;
& .song-item {
background: rgba(255,255,255,0.1);
transition: 0.2s ease-in-out transform, 0.2s ease-in-out box-shadow;
overflow: hidden;
& .song-cover {
background: rgba(255,255,255,0.1);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
& .song-charter {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.8));
opacity: 0;
padding: 15px;
overflow: hidden;
display: grid;
transition: 0.2s ease-in-out opacity;
grid-template-columns: auto 1fr;
grid-gap: 10px;
align-items: flex-end;
& .song-charter-info {
display: grid;
align-items: center;
& .mdi {
font-size: 18px;
}
& span {
font-size: 12px;
color: transparent;
transition: 0.2s ease-in-out color;
overflow: hidden;
white-space: nowrap;
}
}
}
}
& .song-metadata {
padding: 15px;
& .song-title {
font-weight: bold;
overflow: hidden;
white-space: nowrap;
}
& .song-artist {
margin-top: 5px;
opacity: 0.6;
overflow: hidden;
white-space: nowrap;
}
}
&:not(.song-item-loading):hover {
transform: scale(1.1);
cursor: pointer;
box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
& .song-cover {
& .song-charter {
opacity: 1;
}
}
}
}
}
}
\ 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