koel/resources/assets/sass/partials/_mixins.scss

199 lines
4.5 KiB
SCSS

@mixin vertical-center() {
display: flex;
align-items: center;
justify-content: center;
}
@mixin artist-album-wrapper() {
justify-content: space-between;
flex-wrap: wrap;
display: flex;
}
@mixin artist-album-card() {
.item {
flex-direction: column;
margin-bottom: 16px;
width: 23.5%;
position: relative;
@media only screen and (max-width: 1200px) {
width: 32%;
}
@media only screen and (max-width: 960px) {
width: 48%;
}
@media only screen and (max-width: 320px) {
width: 100%;
}
html.with-extra-panel & {
width: 32%;
@media only screen and (max-width: 1200px) {
width: 48%;
}
@media only screen and (max-width: 960px) {
width: 100%;
}
}
.cover {
@include vertical_center();
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 100%;
padding-top: 100%;
position: relative;
.control {
$playBtnWidth: 96px;
display: none;
width: $playBtnWidth;
height: $playBtnWidth;
text-align: center;
line-height: $playBtnWidth;
font-size: 54px;
background: #111;
border-radius: 50%;
text-indent: 5px;
opacity: .7;
border: 1px solid transparent;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: calc(50% - #{$playBtnWidth/2});
transition: .3s;
&:hover {
opacity: 1;
border-color: #fff;
transform: translateY(-50%) scale(1.1);
}
html.touchevents & {
display: block;
}
}
&:before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
transition: .3s;
}
&:hover {
&:before {
background-color: rgba(0, 0, 0, .4);
}
.control {
display: block;
}
}
}
footer {
padding: 16px;
background: #333;
flex: 1;
}
.name {
font-weight: 500;
}
.meta {
color: $color2ndText;
margin-top: 4px;
font-size: 12px;
}
a.name, a.artist {
display: block;
color: $colorMainText;
&:hover {
color: $colorHighlight;
}
}
}
}
@mixin inset-when-pressed() {
&:active {
box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,1);
}
}
@mixin button-group() {
display: flex;
position: relative;
min-width: 192px;
justify-content: flex-end;
button {
$buttonHeight: 28px;
font-size: 12px;
height: $buttonHeight;
padding: 0 16px;
line-height: $buttonHeight;
text-transform: uppercase;
display: inline-block;
border-radius: $buttonHeight/2 0px 0px $buttonHeight/2;
&:last-of-type {
border-top-right-radius: $buttonHeight/2;
border-bottom-right-radius: $buttonHeight/2;
}
&:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: 1px;
}
i {
margin-right: 4px;
}
}
}
@mixin context-menu() {
font-weight: $fontWeight_Thin;
font-size: $fontSize;
padding: 4px 0;
min-width: 144px;
color: #111;
background-color: rgb(232, 232, 232);
position: fixed;
border-radius: 5px;
display: flex;
justify-content: center;
flex-direction: column;
z-index: 1001;
align-items: stretch;
text-align: left;
box-shadow: inset 0 0px 0 rgba(255,255,255,.6), 0 22px 70px 4px rgba(0,0,0,0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);
input[type="search"], input[type="text"], input[type="email"], input[type="url"] {
background: #fff;
&:focus {
background: $colorDirtyInputBgr;
}
}
}