mirror of
https://github.com/Kornstalx/5etools-mirror-2.github.io.git
synced 2025-10-28 20:45:35 -05:00
v1.198.1
This commit is contained in:
TheGiddyLimit
378
scss/decks.scss
Normal file
378
scss/decks.scss
Normal file
@@ -0,0 +1,378 @@
|
||||
@import "includes/vars";
|
||||
|
||||
:root {
|
||||
--rgb-card-glint--edge: #d5592e;
|
||||
}
|
||||
|
||||
:root.night-mode {
|
||||
--rgb-card-glint--edge: #ffd21f;
|
||||
}
|
||||
|
||||
// region Roller
|
||||
.rollbox-min {
|
||||
right: unset;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
.rollbox {
|
||||
right: unset;
|
||||
left: 1em;
|
||||
}
|
||||
|
||||
#listcontainer {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
// endregion
|
||||
|
||||
.decks {
|
||||
&__ {
|
||||
&h-cards {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&wrp-btn-show-card {
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity $time-3-frames;
|
||||
}
|
||||
|
||||
&wrp-card-face {
|
||||
&:hover {
|
||||
.decks__wrp-btn-show-card {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
transition: opacity $time-3-frames;
|
||||
}
|
||||
}
|
||||
|
||||
.rd__image {
|
||||
transition: filter 0.15s;
|
||||
}
|
||||
|
||||
&--drawn {
|
||||
.rd__image {
|
||||
filter: grayscale(100%) brightness(25%);
|
||||
transition: filter 0.15s;
|
||||
}
|
||||
}
|
||||
|
||||
.rd__wrp-image {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-card-rows {
|
||||
display: flex;
|
||||
|
||||
.rd__image-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--list {
|
||||
flex-direction: column;
|
||||
|
||||
.decks__wrp-row {
|
||||
padding-top: $spacer;
|
||||
padding-bottom: $spacer;
|
||||
border-bottom: 1px solid $rgb-border-grey;
|
||||
}
|
||||
|
||||
.decks__wrp-card-face {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.decks__wrp-card-text {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&--grid {
|
||||
flex-wrap: wrap;
|
||||
padding-top: $spacer;
|
||||
|
||||
.decks__wrp-row {
|
||||
width: 33%;
|
||||
padding-bottom: $spacer;
|
||||
}
|
||||
|
||||
.decks__wrp-card-face {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.decks__wrp-card-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-draw__ {
|
||||
$time-intro: 500ms;
|
||||
$time-flip: 750ms;
|
||||
$time-sway: 7s;
|
||||
|
||||
@keyframes anim-sway {
|
||||
0% {
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translateX(1rem) translateY(1rem);
|
||||
}
|
||||
|
||||
37.5% {
|
||||
transform: translateX(1.15rem) translateY(0.5rem);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(1rem) translateY(0);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateX(0) translateY(1rem);
|
||||
}
|
||||
|
||||
87.5% {
|
||||
transform: translateX(-0.15rem) translateY(0.5rem);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
&stg {
|
||||
position: fixed;
|
||||
z-index: $z-hwin;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
&--visible {
|
||||
box-shadow: inset 0 0 100vh 100vh #0008;
|
||||
transition: box-shadow $time-intro;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-sparkle-sway {
|
||||
animation-name: anim-sway;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
&img-sparkle {
|
||||
@keyframes anim-sparkle-twinkle {
|
||||
0% {
|
||||
filter: initial;
|
||||
}
|
||||
|
||||
25% {
|
||||
filter: blur(1px) brightness(90%) contrast(150%) drop-shadow(0 0 17px #f6f6f6) hue-rotate(5deg) opacity(75%) saturate(80%);
|
||||
}
|
||||
|
||||
50% {
|
||||
filter: blur(1px) brightness(110%) contrast(75%) drop-shadow(0 0 5px white) hue-rotate(-5deg) opacity(75%) saturate(110%);
|
||||
}
|
||||
|
||||
100% {
|
||||
filter: initial;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-sparkle-warp {
|
||||
0% {
|
||||
transform: rotateX(0) rotateY(0) rotateZ(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: rotateX(20deg) rotateY(0) rotateZ(90deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotateX(0) rotateY(20deg) rotateZ(180deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: rotateX(10deg) rotateY(0) rotateZ(270deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateX(0) rotateY(0) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
max-width: 67%;
|
||||
max-height: 67%;
|
||||
top: -25%;
|
||||
left: -25%;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
animation-name: anim-sparkle-twinkle, anim-sparkle-warp;
|
||||
animation-timing-function: linear, linear;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
|
||||
&--visible {
|
||||
opacity: 1;
|
||||
transition: opacity calc($time-intro / 2);
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-card {
|
||||
@keyframes anim-card-pop-in {
|
||||
0% {
|
||||
scale: 0;
|
||||
}
|
||||
|
||||
65% {
|
||||
scale: 1.2;
|
||||
}
|
||||
|
||||
100% {
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
padding: $spacer;
|
||||
background: $rgb-name-red;
|
||||
border-radius: $spacer;
|
||||
box-shadow: 0 0 30px 10px transparentize($rgb-name-red, 0.7);
|
||||
|
||||
scale: 0;
|
||||
|
||||
&:hover {
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
&--visible {
|
||||
animation-name: anim-card-pop-in;
|
||||
animation-duration: calc($time-intro * 0.67);
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: 1;
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&img-card {
|
||||
z-index: 0;
|
||||
max-height: 50vh;
|
||||
max-width: 60vw;
|
||||
}
|
||||
|
||||
&img-card-back {
|
||||
z-index: -1;
|
||||
|
||||
width: calc(100% - #{2 * $spacer});
|
||||
height: calc(100% - #{2 * $spacer});
|
||||
|
||||
transform: rotateY(180deg);
|
||||
|
||||
transition: z-index $time-flip;
|
||||
}
|
||||
|
||||
&wrp-card-sway {
|
||||
animation-name: anim-sway;
|
||||
animation-duration: $time-sway;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
&wrp-card-flip {
|
||||
transition: transform $time-flip;
|
||||
|
||||
&--flipped {
|
||||
transform: rotateY(180deg);
|
||||
|
||||
transition: transform $time-flip;
|
||||
|
||||
.decks-draw__img-card-back {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&disp-glint {
|
||||
z-index: 2;
|
||||
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
border-radius: $spacer;
|
||||
}
|
||||
|
||||
&wrp-rhs {
|
||||
@keyframes anim-rhs-pop-in {
|
||||
0% {
|
||||
scale: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
scale: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
width: min(30vw, 360px);
|
||||
margin-left: 50px;
|
||||
scale: 0;
|
||||
|
||||
&--visible {
|
||||
animation-name: anim-rhs-pop-in;
|
||||
animation-duration: calc($time-intro * 0.8);
|
||||
animation-timing-function: ease-in-out;
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-desc {
|
||||
border-top: 3px solid $rgb-name-red;
|
||||
border-bottom: 3px solid $rgb-name-red;
|
||||
background-color: #e5c4ba;
|
||||
font-size: 1em;
|
||||
padding-top: 35px;
|
||||
padding-bottom: 40px;
|
||||
box-shadow: 0 0 20px 1px #0008;
|
||||
|
||||
.rd__h {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .decks {
|
||||
&__ {
|
||||
&wrp-card-rows {
|
||||
&--list {
|
||||
.decks__wrp-row {
|
||||
border-color: $rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-draw__ {
|
||||
&wrp-card {
|
||||
background-color: $rgb-name-red--night;
|
||||
box-shadow: 0 0 30px 10px transparentize($rgb-name-red--night, 0.7);
|
||||
color: rgba(255, 255, 255, 0.53);
|
||||
}
|
||||
|
||||
&wrp-desc {
|
||||
border-color: $rgb-name-red--night;
|
||||
background-color: #574930;
|
||||
box-shadow: 0 0 10px 0 black;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user