update pepe theme
This commit is contained in:
saml33
parent
bf9e64a499
commit
58a1e7dccf
|
|
@ -162,11 +162,11 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
|
|||
className={`transition-all duration-${sideBarAnimationDuration} ${
|
||||
collapsed ? 'w-[64px]' : 'w-[200px]'
|
||||
} border-r border-th-bkg-3 bg-th-bkg-1 bg-contain`}
|
||||
style={
|
||||
collapsed
|
||||
? { backgroundImage: `url(${themeData.sideTilePath})` }
|
||||
: { backgroundImage: `url(${themeData.sideTilePathExpanded})` }
|
||||
}
|
||||
// style={
|
||||
// collapsed
|
||||
// ? { backgroundImage: `url(${themeData.sideTilePath})` }
|
||||
// : { backgroundImage: `url(${themeData.sideTilePathExpanded})` }
|
||||
// }
|
||||
>
|
||||
{sidebarImageUrl && !collapsed ? (
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -185,7 +185,7 @@ const TopBar = () => {
|
|||
)
|
||||
) : isWhiteListed ? (
|
||||
<Link href="/rewards" shallow={true}>
|
||||
<div className="flex h-16 items-center justify-between border-x border-th-bkg-3 px-4 md:border-l-0">
|
||||
<div className="flex h-16 items-center justify-between border-x border-th-bkg-3 bg-th-bkg-1 px-4 md:border-l-0">
|
||||
{accountPointsAndRank?.rank ? (
|
||||
<div
|
||||
className={`relative hidden h-6 w-6 flex-shrink-0 items-center justify-center rounded-full sm:flex ${
|
||||
|
|
|
|||
|
|
@ -1,80 +0,0 @@
|
|||
import React, { useRef, useEffect } from 'react'
|
||||
import Image from 'next/image'
|
||||
|
||||
function HolographicCard() {
|
||||
const cardRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!cardRef.current) return
|
||||
|
||||
const el = cardRef.current
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
const w = el.clientWidth
|
||||
const h = el.clientHeight
|
||||
const b = el.getBoundingClientRect()
|
||||
|
||||
const X = (e.clientX - b.left) / w
|
||||
const Y = (e.clientY - b.top) / h
|
||||
|
||||
const rX = -(X - 0.5) * 26
|
||||
const rY = (Y - 0.5) * 26
|
||||
|
||||
const bgX = 40 + 20 * X
|
||||
const bgY = 40 + 20 * Y
|
||||
|
||||
document.documentElement.style.setProperty('--x', 100 * X + '%')
|
||||
document.documentElement.style.setProperty('--y', 100 * Y + '%')
|
||||
|
||||
document.documentElement.style.setProperty('--bg-x', bgX + '%')
|
||||
document.documentElement.style.setProperty('--bg-y', bgY + '%')
|
||||
|
||||
document.documentElement.style.setProperty('--r-x', rX + 'deg')
|
||||
document.documentElement.style.setProperty('--r-y', rY + 'deg')
|
||||
}
|
||||
const handleMouseLeave = () => {
|
||||
// Resetting to neutral values
|
||||
document.documentElement.style.setProperty('--x', '50%')
|
||||
document.documentElement.style.setProperty('--y', '50%')
|
||||
document.documentElement.style.setProperty('--bg-x', '50%')
|
||||
document.documentElement.style.setProperty('--bg-y', '50%')
|
||||
document.documentElement.style.setProperty('--r-x', '0deg')
|
||||
document.documentElement.style.setProperty('--r-y', '0deg')
|
||||
}
|
||||
|
||||
el.addEventListener('mousemove', handleMouseMove)
|
||||
el.addEventListener('mouseleave', handleMouseLeave)
|
||||
|
||||
// Cleanup event listener on unmount
|
||||
return () => {
|
||||
el.removeEventListener('mousemove', handleMouseMove)
|
||||
el.removeEventListener('mouseleave', handleMouseLeave)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div
|
||||
className="card scale-[.6] transition duration-150 hover:scale-[.65]"
|
||||
ref={cardRef}
|
||||
>
|
||||
<div className="card__wrapper">
|
||||
<div className="card__3d">
|
||||
<div className="card__image" style={{ cursor: 'pointer' }}>
|
||||
<div className="rounded-[48px] border-2 border-white/90 bg-gradient-to-bl from-yellow-300 to-yellow-500 p-4 shadow-xl">
|
||||
<Image
|
||||
src="/images/rewards/questionmark3.png"
|
||||
alt="Frame Legendary"
|
||||
width={600}
|
||||
height={600}
|
||||
className="rounded-[40px] opacity-40 shadow-md ring-2 ring-white/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card__layer1"></div>
|
||||
<div className="card__layergold"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HolographicCard
|
||||
|
|
@ -101,39 +101,6 @@ th {
|
|||
--error: theme('colors.light-theme.error');
|
||||
--success: theme('colors.light-theme.success');
|
||||
--warning: theme('colors.light-theme.warning');
|
||||
|
||||
/* holographic card */
|
||||
--step: 5%;
|
||||
--patterngold: url('/images/rewards/holobg3.png') center / 75%;
|
||||
|
||||
--rainbow: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgb(255, 119, 115) calc(var(--step) * 1),
|
||||
rgba(255, 237, 95, 1) calc(var(--step) * 2),
|
||||
rgba(168, 255, 95, 1) calc(var(--step) * 3),
|
||||
rgba(131, 255, 247, 1) calc(var(--step) * 4),
|
||||
rgba(120, 148, 255, 1) calc(var(--step) * 5),
|
||||
rgb(216, 117, 255) calc(var(--step) * 6),
|
||||
rgb(255, 119, 115) calc(var(--step) * 7)
|
||||
)
|
||||
0% var(--bg-y) / 200% 300%;
|
||||
--diagonal: repeating-linear-gradient(
|
||||
128deg,
|
||||
#0e152e 0%,
|
||||
hsl(180, 10%, 60%) 3.8%,
|
||||
hsl(180, 10%, 60%) 4.5%,
|
||||
hsl(180, 10%, 60%) 5.2%,
|
||||
#0e152e 10%,
|
||||
#0e152e 12%
|
||||
)
|
||||
var(--bg-x) var(--bg-y) / 300%;
|
||||
--shade: radial-gradient(
|
||||
farthest-corner circle at var(--x) var(--y),
|
||||
rgba(255, 255, 255, 0.1) 12%,
|
||||
rgba(255, 255, 255, 0.15) 20%,
|
||||
rgba(255, 255, 255, 0.25) 120%
|
||||
)
|
||||
var(--bg-x) var(--bg-y) / 300%;
|
||||
}
|
||||
|
||||
[data-theme='Dark'] {
|
||||
|
|
@ -618,83 +585,6 @@ table p {
|
|||
}
|
||||
}
|
||||
|
||||
/* holographic card */
|
||||
.card {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.card__wrapper {
|
||||
perspective: 300px;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
.card__3d {
|
||||
transform: rotateY(var(--r-x)) rotateX(var(--r-y));
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
clip-path: inset(0 0 0 0 round 48px);
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
.card__image {
|
||||
clip-path: inset(0 0 0 0 round 48px);
|
||||
}
|
||||
.card__image img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
/* soft light */
|
||||
.card__layer1 {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 20;
|
||||
mix-blend-mode: soft-light;
|
||||
clip-path: inset(0 0 1px 0 round 48px);
|
||||
background: radial-gradient(
|
||||
farthest-corner circle at var(--x) var(--y),
|
||||
rgba(255, 255, 255, 0.8) 1%,
|
||||
rgba(255, 255, 255, 0.65) 1%,
|
||||
rgba(255, 255, 255, 0) 5%
|
||||
);
|
||||
}
|
||||
|
||||
.card__layergold {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 30;
|
||||
|
||||
mix-blend-mode: color-dodge;
|
||||
will-change: background;
|
||||
transition-property: opacity;
|
||||
clip-path: inset(0 0 1px 0 round 48px);
|
||||
|
||||
background-blend-mode: hue, hue, hard-light, overlay;
|
||||
background: var(--patterngold), var(--rainbow), var(--diagonal);
|
||||
}
|
||||
|
||||
/* second crazy blend */
|
||||
.card__layergold:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--patterngold), var(--rainbow), var(--diagonal), var(--shade);
|
||||
mix-blend-mode: overlay;
|
||||
background-size:
|
||||
75%,
|
||||
200% 400%,
|
||||
800%,
|
||||
200%;
|
||||
background-position:
|
||||
center,
|
||||
0% var(--bg-y),
|
||||
calc(var(--bg-x) * -1) calc(var(--bg-y) * -1),
|
||||
var(--bg-x) var(--bg-y);
|
||||
background-blend-mode: soft-light, hue, hard-light;
|
||||
}
|
||||
|
||||
/* Scrollbars */
|
||||
|
||||
.hide-scroll::-webkit-scrollbar {
|
||||
|
|
@ -925,22 +815,6 @@ input[type='range']::-webkit-slider-runnable-track {
|
|||
top: 4px;
|
||||
}
|
||||
|
||||
/* .raised-sell-button {
|
||||
@apply relative flex items-center justify-center bg-th-down text-white transition-none;
|
||||
box-shadow: 0 6px var(--down-dark);
|
||||
}
|
||||
|
||||
.raised-sell-button:hover {
|
||||
background-color: var(--down) !important;
|
||||
box-shadow: 0 4px var(--down-dark);
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.raised-sell-button:active {
|
||||
box-shadow: 0 0 var(--down-dark);
|
||||
top: 6px;
|
||||
} */
|
||||
|
||||
.pagination {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
|
|
|
|||
|
|
@ -462,10 +462,10 @@ module.exports = {
|
|||
'bkg-2': 'hsl(104, 35%, 26%)',
|
||||
'bkg-3': 'hsl(104, 35%, 32%)',
|
||||
'bkg-4': 'hsl(104, 35%, 38%)',
|
||||
'fgd-1': 'hsl(104, 35%, 90%)',
|
||||
'fgd-2': 'hsl(104, 35%, 80%)',
|
||||
'fgd-3': 'hsl(104, 35%, 70%)',
|
||||
'fgd-4': 'hsl(104, 35%, 60%)',
|
||||
'fgd-1': 'hsl(104, 35%, 95%)',
|
||||
'fgd-2': 'hsl(104, 35%, 85%)',
|
||||
'fgd-3': 'hsl(104, 35%, 75%)',
|
||||
'fgd-4': 'hsl(104, 35%, 65%)',
|
||||
},
|
||||
'th-bkg-1': 'var(--bkg-1)',
|
||||
'th-bkg-2': 'var(--bkg-2)',
|
||||
|
|
@ -520,13 +520,5 @@ module.exports = {
|
|||
},
|
||||
},
|
||||
},
|
||||
// variants: {
|
||||
// extend: {
|
||||
// cursor: ['hover', 'focus', 'disabled'],
|
||||
// opacity: ['disabled'],
|
||||
// backgroundColor: ['disabled'],
|
||||
// textColor: ['disabled'],
|
||||
// },
|
||||
// },
|
||||
plugins: [],
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import localFont from 'next/font/local'
|
||||
import { Lalezar, Nunito, Short_Stack } from 'next/font/google'
|
||||
import { Lalezar, Nunito, Comic_Neue } from 'next/font/google'
|
||||
|
||||
// this font should be used as the mono variant for all themes
|
||||
|
||||
|
|
@ -55,13 +55,13 @@ export const nunitoBody = Nunito({
|
|||
|
||||
// pepe theme
|
||||
|
||||
export const shortStackDisplay = Short_Stack({
|
||||
weight: '400',
|
||||
export const comicNeueDisplay = Comic_Neue({
|
||||
weight: '700',
|
||||
subsets: ['latin'],
|
||||
variable: '--font-display',
|
||||
})
|
||||
|
||||
export const shortStackBody = Short_Stack({
|
||||
export const comicNeueBody = Comic_Neue({
|
||||
weight: '400',
|
||||
subsets: ['latin'],
|
||||
variable: '--font-body',
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { ThemeData } from 'types'
|
||||
import {
|
||||
comicNeueBody,
|
||||
comicNeueDisplay,
|
||||
lalezar,
|
||||
nunitoBody,
|
||||
nunitoDisplay,
|
||||
shortStackBody,
|
||||
shortStackDisplay,
|
||||
ttCommons,
|
||||
ttCommonsExpanded,
|
||||
ttCommonsMono,
|
||||
|
|
@ -76,8 +76,8 @@ export const nftThemeMeta: NftThemeMeta = {
|
|||
Pepe: {
|
||||
buttonStyle: 'raised',
|
||||
fonts: {
|
||||
body: shortStackBody,
|
||||
display: shortStackDisplay,
|
||||
body: comicNeueBody,
|
||||
display: comicNeueDisplay,
|
||||
mono: ttCommonsMono,
|
||||
rewards: lalezar,
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue