cleaned up css and made sorted active filters to the top
This commit is contained in:
zach
@@ -1,5 +1,5 @@
|
||||
/* --------------------------------------------------
|
||||
Bootstrap overrides
|
||||
Bootstrap Overrides
|
||||
-------------------------------------------------- */
|
||||
|
||||
$grid-breakpoints: (
|
||||
@@ -21,22 +21,20 @@ $container-max-widths: (
|
||||
xxxl: 1840px
|
||||
) !default;
|
||||
|
||||
|
||||
@import "_bootstrap";
|
||||
|
||||
/* --------------------------------------------------
|
||||
Root Variables
|
||||
-------------------------------------------------- */
|
||||
:root {
|
||||
--total: 11; /* Number of items in the energy wheel */
|
||||
--radius: 40px; /* Circle radius */
|
||||
--total: 11;
|
||||
--radius: 40px;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
|
||||
/* --------------------------------------------------
|
||||
Layout
|
||||
-------------------------------------------------- */
|
||||
@@ -71,15 +69,11 @@ html {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
--angle: calc(360deg / var(--total) * var(--i));
|
||||
transform: rotate(var(--angle)) translateX(var(--radius)) rotate(calc(-1 * var(--angle)));
|
||||
|
||||
transform:
|
||||
rotate(var(--angle))
|
||||
translateX(var(--radius))
|
||||
rotate(calc(-1 * var(--angle)));
|
||||
}
|
||||
|
||||
.energy-wheel-item:first-of-type {
|
||||
z-index: 100;
|
||||
&:first-of-type {
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
@@ -143,7 +137,8 @@ html {
|
||||
transition: box-shadow 350ms ease, transform 350ms ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
|
||||
|
||||
&:is(:hover, :focus) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(-0.9rem) scale(1.02);
|
||||
}
|
||||
@@ -165,8 +160,9 @@ html {
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
Navigation Tabs
|
||||
Navigation Tabs & Tier Colors
|
||||
-------------------------------------------------- */
|
||||
|
||||
.nav-link {
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.67);
|
||||
@@ -193,7 +189,6 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
/* Tiered Colors */
|
||||
$tiers: (
|
||||
nm: rgba(156, 204, 102, 1),
|
||||
lp: rgba(211, 225, 86, 1),
|
||||
@@ -220,12 +215,18 @@ $tiers: (
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* price-row alert left borders */
|
||||
.nav-#{$name} div.alert-secondary {
|
||||
border-left: 3px solid $color;
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
Misc UI Elements
|
||||
Misc UI
|
||||
-------------------------------------------------- */
|
||||
|
||||
.dark-callout {
|
||||
@media (min-width: 768px) {
|
||||
background-color: rgba(44, 48, 59, 1);
|
||||
@@ -243,27 +244,18 @@ $tiers: (
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Icon sizing */
|
||||
.small-icon svg {
|
||||
width: 100%;
|
||||
max-height: 16px;
|
||||
margin-top: -0.25rem;
|
||||
}
|
||||
/* Icon Sizes */
|
||||
.small-icon svg { max-height: 16px; width: 100%; margin-top: -0.25rem; }
|
||||
.medium-icon svg { max-height: 32px; width: 100%; margin-left: -0.25rem; }
|
||||
|
||||
.medium-icon svg {
|
||||
width: 100%;
|
||||
max-height: 32px;
|
||||
margin-left: -0.25rem;
|
||||
}
|
||||
|
||||
/* Black silhouette overlay */
|
||||
/* Masked Image */
|
||||
.masked-image {
|
||||
z-index: 1000;
|
||||
opacity: 1;
|
||||
filter: brightness(0);
|
||||
}
|
||||
|
||||
/* Decorative background elements */
|
||||
/* Decorative Background */
|
||||
.starburst,
|
||||
.whos-that-pokemon {
|
||||
mix-blend-mode: lighten;
|
||||
@@ -275,12 +267,16 @@ $tiers: (
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
/* SVG sizes */
|
||||
/* SVG Generic Sizes */
|
||||
.energy-icon svg,
|
||||
.rarity-icon-large svg,
|
||||
.set-icon svg, .edition-icon svg {
|
||||
width: 2.5rem;
|
||||
.set-icon svg,
|
||||
.edition-icon svg {
|
||||
width: 2rem;
|
||||
z-index: 999;
|
||||
@media (min-width: 1024px) {
|
||||
width: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.rarity-icon-large svg,
|
||||
@@ -288,12 +284,14 @@ $tiers: (
|
||||
margin-bottom: -0.25rem;
|
||||
}
|
||||
|
||||
.filter-icon svg {
|
||||
.filter-icon svg,
|
||||
.search-button {
|
||||
width: 2rem;
|
||||
fill: rgba(255,255,255,0.87);
|
||||
stroke: rgba(255,255,255,0.87);
|
||||
}
|
||||
|
||||
/* Form states */
|
||||
.form-check-input:checked {
|
||||
background-color: var(--bs-success);
|
||||
border-color: var(--bs-success-border-subtle);
|
||||
@@ -304,12 +302,7 @@ $tiers: (
|
||||
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);
|
||||
}
|
||||
|
||||
/* Back to Top */
|
||||
#btn-back-to-top {
|
||||
position: fixed;
|
||||
bottom: 5vh;
|
||||
@@ -319,7 +312,7 @@ $tiers: (
|
||||
|
||||
.top-icon svg {
|
||||
width: 2rem;
|
||||
height:2rem;
|
||||
height: 2rem;
|
||||
fill: var(--bs-info-bg-subtle);
|
||||
stroke: var(--bs-info-bg-subtle);
|
||||
}
|
||||
@@ -329,15 +322,6 @@ $tiers: (
|
||||
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))
|
||||
@@ -347,39 +331,26 @@ $tiers: (
|
||||
/* --------------------------------------------------
|
||||
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%
|
||||
map-get($tiers, nm) 21%,
|
||||
map-get($tiers, lp) 42%,
|
||||
map-get($tiers, mp) 63%,
|
||||
map-get($tiers, hp) 74%,
|
||||
map-get($tiers, dmg) 85%
|
||||
);
|
||||
}
|
||||
|
||||
$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)
|
||||
);
|
||||
|
||||
@each $name, $color in $tiers {
|
||||
.nav-#{$name} div.alert-secondary {
|
||||
border-left: 3px solid $color;
|
||||
}
|
||||
}
|
||||
|
||||
.inventory-button {
|
||||
margin-bottom: -2rem;
|
||||
margin-right: -0.25rem;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-bottom: -2rem;
|
||||
margin-right: -0.25rem;
|
||||
border-radius: 0.33rem;
|
||||
background-color: hsl(262, 47%, 55%);
|
||||
color: #fff;
|
||||
@@ -396,6 +367,7 @@ $tiers: (
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
/* Price Label */
|
||||
.price-label {
|
||||
font-size: 0.69rem;
|
||||
font-weight: 600;
|
||||
@@ -404,37 +376,21 @@ $tiers: (
|
||||
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.72rem;
|
||||
}
|
||||
@media (min-width: 996px) {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
@media (min-width: 768px) { font-size: 0.72rem; }
|
||||
@media (min-width: 996px) { font-size: 0.75rem; }
|
||||
@media (min-width: 1200px) { font-size: 0.8rem; }
|
||||
@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;
|
||||
}
|
||||
&: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 {
|
||||
@@ -449,7 +405,7 @@ $tiers: (
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
/* Sticky (mobile-bottom / desktop-top) search bar */
|
||||
/* Sticky Search Bar */
|
||||
.search-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
@@ -461,7 +417,6 @@ $tiers: (
|
||||
@media (min-width: 768px) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
float: right;
|
||||
min-width: 45vw;
|
||||
max-width: 45vw;
|
||||
transform: rotate(0);
|
||||
@@ -474,71 +429,48 @@ $tiers: (
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
Circles (Header, Buttons, etc.)
|
||||
Circles
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Shared Circle Styles */
|
||||
%circle-base {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
--a: 8deg;
|
||||
border: 1px solid hsl(210, 11%, 15%);
|
||||
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));
|
||||
transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a, 8deg));
|
||||
}
|
||||
|
||||
/* 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%));
|
||||
}
|
||||
.redCircle { @extend %circle-base; background: radial-gradient(circle at top left, hsl(0, 100%, 56%), hsl(0, 79%, 45%)); }
|
||||
.yellowCircle { @extend %circle-base; background: radial-gradient(circle at top left, hsl(61, 100%, 50%), hsl(61, 100%, 40%)); }
|
||||
.greenCircle { @extend %circle-base; background: radial-gradient(circle at top left, hsl(149, 100%, 40%), hsl(149, 100%, 30%)); }
|
||||
|
||||
/* 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,
|
||||
.yellowCircle:hover,
|
||||
.greenCircle:hover,
|
||||
.blueCircle:hover {
|
||||
--i: -1, 1;
|
||||
mask-position: 0 0;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 1.85rem;
|
||||
height: 1.85rem;
|
||||
}
|
||||
/* --------------------------------------------------
|
||||
Buttons
|
||||
-------------------------------------------------- */
|
||||
|
||||
.btn-warning>span, .btn-warning>svg.nav-icon {
|
||||
.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 {
|
||||
.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 {
|
||||
@@ -546,72 +478,64 @@ $tiers: (
|
||||
stroke: var(--bs-success);
|
||||
}
|
||||
|
||||
.btn.btn-outline-success:hover, .btn.btn-outline-success:hover>svg.nav-icon {
|
||||
.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);
|
||||
}
|
||||
|
||||
/* Card Modal Navigation Styles */
|
||||
/* --------------------------------------------------
|
||||
Card Modal Navigation
|
||||
-------------------------------------------------- */
|
||||
|
||||
.card-nav-prev,
|
||||
.card-nav-next {
|
||||
transition: all 0.2s ease-in-out;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 36px;
|
||||
padding: 0.375rem 0.5rem;
|
||||
}
|
||||
transition: all 0.2s ease-in-out;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 36px;
|
||||
padding: 0.375rem 0.5rem;
|
||||
will-change: opacity;
|
||||
|
||||
.card-nav-prev:hover:not(:disabled),
|
||||
.card-nav-next:hover:not(:disabled) {
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--bs-secondary);
|
||||
border-color: var(--bs-secondary);
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) { transform: translateY(0); }
|
||||
&:disabled { cursor: not-allowed; }
|
||||
}
|
||||
|
||||
.card-nav-prev:active:not(:disabled),
|
||||
.card-nav-next:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.card-nav-prev:disabled,
|
||||
.card-nav-next:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Optional: Add keyboard indicator hint */
|
||||
.modal-header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Smooth fade in/out for disabled state */
|
||||
.card-nav-prev,
|
||||
.card-nav-next {
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
/* Touch-friendly sizing on mobile */
|
||||
@media (max-width: 768px) {
|
||||
.card-nav-prev,
|
||||
.card-nav-next {
|
||||
min-width: 40px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.card-nav-prev,
|
||||
.card-nav-next {
|
||||
min-width: 40px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Optional: Add a subtle animation when swiping */
|
||||
/* --------------------------------------------------
|
||||
Swipe Animation
|
||||
-------------------------------------------------- */
|
||||
@keyframes swipe-feedback {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(0.95); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
Input Fix (Safari)
|
||||
-------------------------------------------------- */
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
display: block;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
|
||||
}
|
||||
Reference in New Issue
Block a user