304 lines
9.4 KiB
SCSS
304 lines
9.4 KiB
SCSS
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
text-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5);
|
|
border: 0.15rem solid rgba(var(--priUser), 1);
|
|
border-radius: 50%;
|
|
font-weight: 700;
|
|
font-size: 0.63rem;
|
|
text-transform: uppercase;
|
|
margin: 0.25rem;
|
|
flex-shrink: 0;
|
|
|
|
&:hover,
|
|
&:active {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:active {
|
|
font-size: 0.61rem;
|
|
border: 0.18rem solid rgba(var(--priUser), 1);
|
|
}
|
|
|
|
&.btn-primary {
|
|
color: rgba(var(--quaUser), 1);
|
|
border-color: rgba(var(--quaUser), 1);
|
|
background-color: rgba(var(--quiUser), 1);
|
|
box-shadow:
|
|
0.1rem 0.1rem 0.12rem rgba(var(--quiUser), 0.25),
|
|
0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25),
|
|
0.25rem 0.25rem 0.25rem rgba(var(--quiUser), 0.12)
|
|
;
|
|
|
|
&:hover {
|
|
text-shadow:
|
|
0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25),
|
|
0 0 1rem rgba(var(--quaUser), 1)
|
|
;
|
|
box-shadow:
|
|
0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.5rem rgba(var(--quaUser), 0.12)
|
|
;
|
|
}
|
|
|
|
&:active {
|
|
border: 0.18rem solid rgba(var(--quaUser), 1);
|
|
text-shadow:
|
|
-0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.12rem rgba(var(--quaUser), 1)
|
|
;
|
|
box-shadow:
|
|
-0.1rem -0.1rem 0.12rem rgba(var(--quiUser), 0.25),
|
|
-0.1rem -0.1rem 0.12rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.5rem rgba(var(--quaUser), 0.12)
|
|
;
|
|
}
|
|
}
|
|
|
|
&.btn-xl {
|
|
width: 5rem;
|
|
height: 5rem;
|
|
font-size: 1.2rem;
|
|
border-width: 0.3rem;
|
|
|
|
&:hover {
|
|
text-shadow:
|
|
0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.5rem rgba(var(--quaUser), 1)
|
|
;
|
|
box-shadow:
|
|
0.24rem 0.24rem 0.5rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.5rem rgba(var(--quaUser), 22)
|
|
;
|
|
}
|
|
|
|
&:active {
|
|
border-width: 0.25rem;
|
|
text-shadow:
|
|
-0.2rem -0.2rem 0.25rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.24rem rgba(var(--quaUser), 1)
|
|
;
|
|
box-shadow:
|
|
-0.2rem -0.2rem 0.24rem rgba(var(--quiUser), 0.25),
|
|
-0.2rem -0.2rem 0.24rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.5rem rgba(var(--quaUser), 0.22)
|
|
;
|
|
}
|
|
}
|
|
|
|
&.btn-cancel {
|
|
color: rgba(var(--priOr), 1);
|
|
border-color: rgba(var(--priOr), 1);
|
|
background-color: rgba(var(--terOr), 1);
|
|
box-shadow:
|
|
0.1rem 0.1rem 0.12rem rgba(var(--terOr), 0.25),
|
|
0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25),
|
|
0.25rem 0.25rem 0.25rem rgba(var(--terOr), 0.12)
|
|
;
|
|
|
|
&:hover {
|
|
text-shadow:
|
|
0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.5rem rgba(var(--priOr), 1)
|
|
;
|
|
box-shadow:
|
|
0.24rem 0.24rem 0.5rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.5rem rgba(var(--priOr), 0.12)
|
|
;
|
|
}
|
|
|
|
&:active {
|
|
text-shadow:
|
|
-0.1rem -0.1rem 0.5rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.12rem rgba(var(--priOr), 1)
|
|
;
|
|
box-shadow:
|
|
-0.1rem -0.1rem 0.12rem rgba(var(--terOr), 0.25),
|
|
-0.1rem -0.1rem 0.12rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.5rem rgba(var(--priOr), 0.12)
|
|
;
|
|
}
|
|
}
|
|
|
|
&.btn-caution {
|
|
color: rgba(var(--priYl), 1);
|
|
border-color: rgba(var(--priYl), 1);
|
|
background-color: rgba(var(--terYl), 1);
|
|
box-shadow:
|
|
0.1rem 0.1rem 0.12rem rgba(var(--terYl), 0.25),
|
|
0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25),
|
|
0.25rem 0.25rem 0.25rem rgba(var(--terYl), 0.12)
|
|
;
|
|
|
|
&:hover {
|
|
text-shadow:
|
|
0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25),
|
|
0 0 1rem rgba(var(--priYl), 1)
|
|
;
|
|
box-shadow:
|
|
0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.5rem rgba(var(--priYl), 0.12)
|
|
;
|
|
}
|
|
|
|
&:active {
|
|
border: 0.18rem solid rgba(var(--priYl), 1);
|
|
text-shadow:
|
|
-0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.12rem rgba(var(--priYl), 1)
|
|
;
|
|
box-shadow:
|
|
-0.1rem -0.1rem 0.12rem rgba(var(--terYl), 0.25),
|
|
-0.1rem -0.1rem 0.12rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.5rem rgba(var(--priYl), 0.12)
|
|
;
|
|
}
|
|
}
|
|
|
|
&.btn-confirm {
|
|
color: rgba(var(--priGn), 1);
|
|
border-color: rgba(var(--priGn), 1);
|
|
background-color: rgba(var(--terGn), 1);
|
|
box-shadow:
|
|
0.1rem 0.1rem 0.12rem rgba(var(--terGn), 0.25),
|
|
0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25),
|
|
0.25rem 0.25rem 0.25rem rgba(var(--terGn), 0.12)
|
|
;
|
|
|
|
&:hover {
|
|
text-shadow:
|
|
0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25),
|
|
0 0 1rem rgba(var(--priGn), 1)
|
|
;
|
|
box-shadow:
|
|
0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.5rem rgba(var(--priGn), 0.12)
|
|
;
|
|
}
|
|
|
|
&:active {
|
|
border: 0.18rem solid rgba(var(--priGn), 1);
|
|
text-shadow:
|
|
-0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.12rem rgba(var(--priGn), 1)
|
|
;
|
|
box-shadow:
|
|
-0.1rem -0.1rem 0.12rem rgba(var(--terGn), 0.25),
|
|
-0.1rem -0.1rem 0.12rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.5rem rgba(var(--priGn), 0.12)
|
|
;
|
|
}
|
|
}
|
|
|
|
&.btn-danger {
|
|
color: rgba(var(--priRd), 1);
|
|
background-color: rgba(var(--terRd), 1);
|
|
border-color: rgba(var(--priRd), 1);
|
|
box-shadow:
|
|
0.1rem 0.1rem 0.12rem rgba(var(--terRd), 0.25),
|
|
0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25),
|
|
0.25rem 0.25rem 0.25rem rgba(var(--terRd), 0.12)
|
|
;
|
|
|
|
&:hover {
|
|
text-shadow:
|
|
0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25),
|
|
0 0 1rem rgba(var(--priRd), 1)
|
|
;
|
|
box-shadow:
|
|
0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.5rem rgba(var(--priRd), 0.12)
|
|
;
|
|
}
|
|
|
|
&:active {
|
|
text-shadow:
|
|
-0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.12rem rgba(var(--priRd), 1)
|
|
;
|
|
box-shadow:
|
|
-0.1rem -0.1rem 0.12rem rgba(var(--terRd), 0.25),
|
|
-0.1rem -0.1rem 0.12rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.5rem rgba(var(--priRd), 0.12)
|
|
;
|
|
}
|
|
|
|
&.stop-player {
|
|
width: 4rem;
|
|
height: 4rem;
|
|
font-size: 0.9rem;
|
|
border: 0.2rem solid rgba(var(--priRd), 1);
|
|
box-shadow:
|
|
0.1rem 0.1rem 0.25rem rgba(var(--terRd), 0.5),
|
|
0.25rem 0.25rem 1rem rgba(0, 0, 0, 0.5),
|
|
0.5rem 0.5rem 0.5rem rgba(var(--terRd), 0.25)
|
|
;
|
|
|
|
&:hover {
|
|
text-shadow:
|
|
0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.5),
|
|
0 0 1rem rgba(var(--priRd), 1)
|
|
;
|
|
box-shadow:
|
|
0.25rem 0.25rem 1rem rgba(0, 0, 0, 0.5),
|
|
0 0 1rem rgba(var(--priRd), 0.25)
|
|
;
|
|
}
|
|
|
|
&:active {
|
|
font-size: 0.88rem;
|
|
border: 0.25rem solid rgba(var(--priRd), 1);
|
|
text-shadow:
|
|
-0.1rem -0.1rem 0.5rem rgba(0, 0, 0, 0.5),
|
|
0 0 0.25rem rgba(var(--priRd), 1)
|
|
;
|
|
box-shadow:
|
|
-0.1rem -0.1rem 0.25rem rgba(var(--terRd), 0.5),
|
|
-0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.5),
|
|
0 0 1rem rgba(var(--priRd), 0.25)
|
|
;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.btn-disabled {
|
|
cursor: default !important;
|
|
font-size: 1.2rem;
|
|
color: rgba(var(--secUser), 0.25);
|
|
background-color: rgba(var(--priUser), 1);
|
|
border-color: rgba(var(--secUser), 0.25);
|
|
box-shadow:
|
|
0.1rem 0.1rem 0.12rem rgba(var(--priUser), 0.5),
|
|
0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25),
|
|
0.25rem 0.25rem 0.25rem rgba(var(--secUser), 0.12)
|
|
;
|
|
|
|
&:hover {
|
|
text-shadow:
|
|
0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25),
|
|
0 0 1rem rgba(var(--priUser), 1)
|
|
;
|
|
box-shadow:
|
|
0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.5rem rgba(var(--priUser), 0.12)
|
|
;
|
|
}
|
|
|
|
&:active {
|
|
text-shadow:
|
|
-0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.12rem rgba(var(--priUser), 1)
|
|
;
|
|
box-shadow:
|
|
-0.1rem -0.1rem 0.12rem rgba(var(--priUser), 0.75),
|
|
-0.1rem -0.1rem 0.12rem rgba(0, 0, 0, 0.25),
|
|
0 0 0.5rem rgba(var(--secUser), 0.12)
|
|
;
|
|
}
|
|
}
|
|
}
|