97 lines
1.9 KiB
CSS
97 lines
1.9 KiB
CSS
@import '_variables';
|
|
|
|
@mixin panel($width, $max-width) {
|
|
max-width: $max-width;
|
|
margin: 0 auto;
|
|
float: none;
|
|
border-radius: 0;
|
|
position: relative;
|
|
width: $width;
|
|
}
|
|
|
|
@mixin play-button {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
|
|
&:hover {
|
|
.overlay-circle {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.overlay-triangle {
|
|
border-color: transparent transparent transparent var(--accent);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin breakable {
|
|
overflow: hidden;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
@mixin ellipsis {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@mixin center-panel($bg) {
|
|
padding: 12px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
background: $bg;
|
|
box-shadow: 0 0 15px $shadow_dark;
|
|
margin: auto;
|
|
margin-top: -50px;
|
|
}
|
|
|
|
@mixin input-colors {
|
|
&:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
&:active {
|
|
border-color: var(--accent_light);
|
|
}
|
|
}
|
|
|
|
@mixin search-resize($width, $rows) {
|
|
@media(max-width: $width) {
|
|
.search-toggles {
|
|
grid-template-columns: repeat($rows, auto);
|
|
}
|
|
|
|
#search-panel-toggle:checked ~ .search-panel {
|
|
@if $rows == 6 {
|
|
max-height: 200px !important;
|
|
}
|
|
@if $rows == 5 {
|
|
max-height: 300px !important;
|
|
}
|
|
@if $rows == 4 {
|
|
max-height: 300px !important;
|
|
}
|
|
@if $rows == 3 {
|
|
max-height: 365px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin create-toggle($elem, $height) {
|
|
##{$elem}-toggle {
|
|
display: none;
|
|
|
|
&:checked ~ .#{$elem} {
|
|
max-height: $height;
|
|
}
|
|
|
|
&:checked ~ label .icon-down:before {
|
|
transform: rotate(180deg) translateY(-1px);
|
|
}
|
|
}
|
|
}
|