527 lines
9.9 KiB
SCSS
527 lines
9.9 KiB
SCSS
@import "_bootstrap";
|
|
|
|
/* --------------------------------------------------
|
|
Root Variables
|
|
-------------------------------------------------- */
|
|
:root {
|
|
--total: 11; /* Number of items in the energy wheel */
|
|
--radius: 40px; /* Circle radius */
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
$grid-breakpoints: (
|
|
xs: 0,
|
|
sm: 576px,
|
|
md: 768px,
|
|
lg: 992px,
|
|
xl: 1200px,
|
|
xxl: 1400px,
|
|
xxxl: 1920px
|
|
) !default;
|
|
|
|
$container-max-widths: (
|
|
sm: 540px,
|
|
md: 720px,
|
|
lg: 960px,
|
|
xl: 1140px,
|
|
xxl: 1320px,
|
|
xxxl: 1840px
|
|
) !default;
|
|
|
|
/* --------------------------------------------------
|
|
Layout
|
|
-------------------------------------------------- */
|
|
.wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100dvh !important;
|
|
}
|
|
|
|
.main {
|
|
flex: 1;
|
|
}
|
|
|
|
.footer {
|
|
margin-top: auto;
|
|
}
|
|
|
|
/* --------------------------------------------------
|
|
Energy Wheel
|
|
-------------------------------------------------- */
|
|
.energy-wheel {
|
|
position: relative;
|
|
width: calc(var(--radius) * 2);
|
|
height: calc(var(--radius) * 2);
|
|
margin: 5px 0 10px;
|
|
}
|
|
|
|
.energy-wheel-item {
|
|
position: absolute;
|
|
width: 25px;
|
|
height: 25px;
|
|
top: 50%;
|
|
left: 50%;
|
|
--angle: calc(360deg / var(--total) * var(--i));
|
|
|
|
transform:
|
|
rotate(var(--angle))
|
|
translateX(var(--radius))
|
|
rotate(calc(-1 * var(--angle)));
|
|
}
|
|
|
|
.energy-wheel-item:first-of-type {
|
|
z-index: 100;
|
|
}
|
|
|
|
/* --------------------------------------------------
|
|
Navbar & Icons
|
|
-------------------------------------------------- */
|
|
.navbar {
|
|
background-color: var(--bs-danger) !important;
|
|
}
|
|
|
|
.sticky-top {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.nav-icon {
|
|
width: 1.85rem;
|
|
height: 1.85rem;
|
|
|
|
> svg {
|
|
fill: hsla(210, 11%, 15%, 0.5);
|
|
stroke: hsla(210, 11%, 15%, 0.5);
|
|
|
|
&:hover {
|
|
fill: hsla(210, 11%, 15%, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* --------------------------------------------------
|
|
Typography
|
|
-------------------------------------------------- */
|
|
.copy-small {
|
|
font-size: 0.75rem;
|
|
opacity: 0.87;
|
|
|
|
@media (min-width: 768px) {
|
|
font-size: 0.85rem;
|
|
}
|
|
@media (min-width: 1400px) {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
/* --------------------------------------------------
|
|
Modal & Cards
|
|
-------------------------------------------------- */
|
|
.modal-xl {
|
|
@media (min-width: 768px) {
|
|
max-width: 95vw;
|
|
}
|
|
@media (min-width: 1400px) {
|
|
max-width: 85vw;
|
|
}
|
|
@media (min-width: 1921px) {
|
|
max-width: 75vw;
|
|
}
|
|
}
|
|
|
|
.image-grow {
|
|
transition: box-shadow 350ms ease, transform 350ms ease;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
|
|
|
|
&:is(:hover, :focus) {
|
|
box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
|
|
transform: translateY(-0.9rem) scale(1.02);
|
|
}
|
|
}
|
|
|
|
.card-modal {
|
|
background-color: rgba(1, 11, 18, 0.8);
|
|
cursor: default;
|
|
}
|
|
|
|
.pokedex-page {
|
|
position: relative;
|
|
top: 50px;
|
|
z-index: 99;
|
|
|
|
@media (min-width: 768px) {
|
|
top: 100px !important;
|
|
}
|
|
}
|
|
|
|
/* --------------------------------------------------
|
|
Navigation Tabs
|
|
-------------------------------------------------- */
|
|
.nav-link {
|
|
font-weight: 600;
|
|
color: rgba(255, 255, 255, 0.67);
|
|
transition:
|
|
margin-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
|
|
padding-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
|
|
padding-bottom 0.2s cubic-bezier(0.5, 0, 0.3, 1);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: rgba(0, 0, 0, 0.87);
|
|
}
|
|
}
|
|
|
|
.nav-tabs {
|
|
.nav-link.active,
|
|
.nav-item.show .nav-link {
|
|
color: rgba(0, 0, 0, 0.94);
|
|
}
|
|
|
|
.nav-link:hover,
|
|
.nav-link:focus {
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
/* Tiered Colors */
|
|
$tiers: (
|
|
nm: rgba(156, 204, 102, 1),
|
|
lp: rgba(211, 225, 86, 1),
|
|
mp: rgba(255, 238, 87, 1),
|
|
hp: rgba(255, 201, 41, 1),
|
|
dmg: rgba(255, 167, 36, 1),
|
|
vendor: hsl(262, 47%, 55%)
|
|
);
|
|
|
|
@each $name, $color in $tiers {
|
|
.nav-link.#{$name} {
|
|
border-bottom: 3px solid $color;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: rgba($color, 0.67);
|
|
}
|
|
|
|
&.active {
|
|
background-color: $color;
|
|
border-bottom-color: $color;
|
|
|
|
@if $name == vendor {
|
|
color: rgba(255, 255, 255, 0.87);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* --------------------------------------------------
|
|
Misc UI Elements
|
|
-------------------------------------------------- */
|
|
.dark-callout {
|
|
@media (min-width: 768px) {
|
|
background-color: rgba(44, 48, 59, 1);
|
|
}
|
|
}
|
|
|
|
.price-area {
|
|
max-height: 75px;
|
|
}
|
|
|
|
.card-image {
|
|
aspect-ratio: 23 / 32;
|
|
object-fit: cover;
|
|
z-index: 998;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Icon sizing */
|
|
.small-icon svg {
|
|
width: 100%;
|
|
max-height: 16px;
|
|
margin-top: -0.25rem;
|
|
}
|
|
|
|
/* Black silhouette overlay */
|
|
.masked-image {
|
|
z-index: 1000;
|
|
opacity: 1;
|
|
filter: brightness(0);
|
|
}
|
|
|
|
/* Decorative background elements */
|
|
.starburst,
|
|
.whos-that-pokemon {
|
|
mix-blend-mode: lighten;
|
|
opacity: 0.1;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.whos-that-pokemon {
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
/* SVG sizes */
|
|
.energy-icon svg,
|
|
.rarity-icon-large svg,
|
|
.set-icon svg {
|
|
width: 2.5rem;
|
|
z-index: 999;
|
|
}
|
|
|
|
.rarity-icon-large svg,
|
|
.set-icon svg {
|
|
margin-bottom: -0.25rem;
|
|
}
|
|
|
|
.filter-icon svg {
|
|
width: 2rem;
|
|
fill: rgba(255,255,255,0.87);
|
|
stroke: rgba(255,255,255,0.87);
|
|
}
|
|
|
|
.form-check-input:checked {
|
|
background-color: var(--bs-success);
|
|
border-color: var(--bs-success-border-subtle);
|
|
}
|
|
|
|
.form-check-input:focus {
|
|
border-color: var(--bs-success);
|
|
box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
|
|
}
|
|
|
|
.search-button {
|
|
width: 2rem;
|
|
fill: rgba(255,255,255,0.87);
|
|
stroke: rgba(255,255,255,0.87);
|
|
}
|
|
|
|
#btn-back-to-top {
|
|
position: fixed;
|
|
bottom: 5vh;
|
|
right: 5vw;
|
|
display: none;
|
|
}
|
|
|
|
.top-icon svg {
|
|
width: 2rem;
|
|
height:2rem;
|
|
fill: var(--bs-info-bg-subtle);
|
|
stroke: var(--bs-info-bg-subtle);
|
|
}
|
|
|
|
#btn-back-to-top:hover .top-icon svg {
|
|
fill: var(--bs-info-border-subtle);
|
|
stroke: var(--bs-info-border-subtle);
|
|
}
|
|
|
|
.energy-icon svg {
|
|
margin-top: -0.25rem;
|
|
margin-right: -0.25rem;
|
|
}
|
|
|
|
.set-icon svg {
|
|
margin-left: -0.25rem;
|
|
}
|
|
|
|
.shadow-filter {
|
|
filter:
|
|
drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))
|
|
drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
|
|
}
|
|
|
|
/* --------------------------------------------------
|
|
Pricing
|
|
-------------------------------------------------- */
|
|
.price-row {
|
|
position: relative;
|
|
margin-top: -1.25rem;
|
|
border-radius: 0.33rem;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(156, 204, 102, 1) 21%,
|
|
rgba(211, 225, 86, 1) 42%,
|
|
rgba(255, 238, 87, 1) 63%,
|
|
rgba(255, 201, 41, 1) 74%,
|
|
rgba(255, 167, 36, 1) 85%
|
|
);
|
|
}
|
|
|
|
.inventory-button {
|
|
margin-bottom: -2rem;
|
|
margin-right: -0.25rem;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 0.33rem;
|
|
background-color: hsl(262, 47%, 55%);
|
|
color: #fff;
|
|
}
|
|
|
|
.inventory-label {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.fs-7 {
|
|
font-size: 0.9rem !important;
|
|
}
|
|
|
|
.price-label {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
color: rgba(0, 0, 0, 0.87);
|
|
background-color: hsl(88, 50%, 60%);
|
|
border-radius: 0.33rem 0 0 0.33rem;
|
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35);
|
|
|
|
@media (min-width: 768px) {
|
|
font-size: 0.8rem;
|
|
}
|
|
@media (min-width: 996px) {
|
|
font-size: 0.85rem;
|
|
}
|
|
@media (min-width: 1200px) {
|
|
font-size: 0.9rem;
|
|
}
|
|
@media (min-width: 1600px) {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
background-color: hsl(66, 70%, 61%);
|
|
}
|
|
&:nth-of-type(3) {
|
|
background-color: hsl(54, 100%, 67%);
|
|
}
|
|
&:nth-of-type(4) {
|
|
background-color: hsl(45, 100%, 58%);
|
|
}
|
|
&:last-of-type {
|
|
background-color: hsl(36, 100%, 57%);
|
|
border-radius: 0.33rem;
|
|
}
|
|
}
|
|
|
|
/* --------------------------------------------------
|
|
Search
|
|
-------------------------------------------------- */
|
|
@media (max-width: 768px) {
|
|
.search-box,
|
|
.search-button {
|
|
min-height: 48px;
|
|
}
|
|
}
|
|
|
|
::placeholder {
|
|
color: rgba(255, 255, 255, 0.7) !important;
|
|
opacity: 1 !important;
|
|
font-size: 1rem;
|
|
line-height: 2rem;
|
|
}
|
|
|
|
/* Sticky (mobile-bottom / desktop-top) search bar */
|
|
.search-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 48px;
|
|
z-index: 1000;
|
|
transform: rotate(180deg);
|
|
|
|
@media (min-width: 768px) {
|
|
position: sticky;
|
|
top: 0;
|
|
float: right;
|
|
min-width: 45vw;
|
|
max-width: 45vw;
|
|
transform: rotate(0);
|
|
}
|
|
}
|
|
|
|
.facet-list {
|
|
max-height: 185px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* --------------------------------------------------
|
|
Circles (Header, Buttons, etc.)
|
|
-------------------------------------------------- */
|
|
|
|
/* Shared Circle Styles */
|
|
%circle-base {
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
margin: 0 auto;
|
|
--a: 8deg;
|
|
mask: linear-gradient(135deg, #fffc 40%, #fff, #fffc 60%) 100% 100% / 240% 240%;
|
|
transition: 0.4s;
|
|
transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));
|
|
}
|
|
|
|
/* Red */
|
|
.redCircle {
|
|
@extend %circle-base;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border: 1px solid hsl(210, 11%, 15%);
|
|
background: radial-gradient(circle at top left, hsl(0, 100%, 56%), hsl(0, 79%, 45%));
|
|
}
|
|
|
|
/* Yellow */
|
|
.yellowCircle {
|
|
@extend %circle-base;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border: 1px solid hsl(210, 11%, 15%);
|
|
background: radial-gradient(circle at top left, hsl(61, 100%, 50%), hsl(61, 100%, 40%));
|
|
}
|
|
|
|
/* Green */
|
|
.greenCircle {
|
|
@extend %circle-base;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border: 1px solid hsl(210, 11%, 15%);
|
|
background: radial-gradient(circle at top left, hsl(149, 100%, 40%), hsl(149, 100%, 30%));
|
|
}
|
|
|
|
/* Circle Hover Effect */
|
|
.yellowCircle:hover,
|
|
.redCircle:hover,
|
|
.greenCircle:hover,
|
|
.blueCircle:hover {
|
|
--i: -1, 1;
|
|
mask-position: 0 0;
|
|
}
|
|
|
|
.nav-icon {
|
|
width: 1.85rem;
|
|
height: 1.85rem;
|
|
}
|
|
|
|
.btn-warning>span, .btn-warning>svg.nav-icon {
|
|
fill: var(--bs-warning-border-subtle);
|
|
stroke: var(--bs-warning-border-subtle);
|
|
color: var(--bs-warning-border-subtle);
|
|
}
|
|
|
|
.btn.btn-warning:hover>span, .btn.btn-warning:hover>svg.nav-icon {
|
|
fill: var(--bs-warning-bg-subtle);
|
|
stroke: var(--bs-warning-bg-subtle);
|
|
color: var(--bs-warning-border-subtle);
|
|
}
|
|
|
|
.btn-outline-success svg.nav-icon {
|
|
fill: var(--bs-success);
|
|
stroke: var(--bs-success);
|
|
}
|
|
|
|
.btn.btn-outline-success:hover, .btn.btn-outline-success:hover>svg.nav-icon {
|
|
fill: var(--bs-success-border-subtle);
|
|
stroke: var(--bs-success-border-subtle);
|
|
color: var(--bs-success-border-subtle);
|
|
} |