update
This commit is contained in:
230
style.css
230
style.css
@@ -2220,3 +2220,233 @@ html[data-theme="light"][data-design-theme="minecraft"] .beian a:hover {
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Persona 5 — Phantom Red UI ───────────────────────────── */
|
||||
html[data-design-theme="persona-5"] {
|
||||
color-scheme: light;
|
||||
|
||||
--accent: #d71920;
|
||||
--accent-rgb: 215, 25, 32;
|
||||
--accent-2: #111111;
|
||||
--accent-3: #ffffff;
|
||||
--accent-secondary-rgb: 17, 17, 17;
|
||||
|
||||
--page-gradient: linear-gradient(
|
||||
135deg,
|
||||
#f6f1e7 0%,
|
||||
#ffffff 55%,
|
||||
#ffd9da 100%
|
||||
);
|
||||
--page-texture:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(215, 25, 32, 0.12) 0 12%,
|
||||
transparent 12% 100%
|
||||
),
|
||||
linear-gradient(315deg, rgba(17, 17, 17, 0.07) 0 10%, transparent 10% 100%);
|
||||
--title-gradient: linear-gradient(
|
||||
135deg,
|
||||
#111111 0%,
|
||||
#d71920 55%,
|
||||
#111111 100%
|
||||
);
|
||||
|
||||
--control-bg: rgba(255, 255, 255, 0.92);
|
||||
--control-border: rgba(17, 17, 17, 0.6);
|
||||
--control-inset: rgba(255, 255, 255, 0.95);
|
||||
--control-fg: #111111;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="persona-5"] {
|
||||
color-scheme: dark;
|
||||
|
||||
--accent: #ff1f2d;
|
||||
--accent-rgb: 255, 31, 45;
|
||||
--accent-2: #ffffff;
|
||||
--accent-3: #111111;
|
||||
--accent-secondary-rgb: 255, 255, 255;
|
||||
|
||||
--page-gradient: #0a0a0a;
|
||||
--page-texture:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 31, 45, 0.22) 0 14%,
|
||||
transparent 14% 100%
|
||||
),
|
||||
linear-gradient(315deg, rgba(255, 255, 255, 0.08) 0 9%, transparent 9% 100%);
|
||||
--title-gradient: linear-gradient(
|
||||
135deg,
|
||||
#ffffff 0%,
|
||||
#ff1f2d 45%,
|
||||
#ffffff 100%
|
||||
);
|
||||
|
||||
--control-bg: rgba(14, 14, 14, 0.9);
|
||||
--control-border: rgba(255, 255, 255, 0.72);
|
||||
--control-inset: rgba(255, 255, 255, 0.08);
|
||||
--control-fg: #ffffff;
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] body::before {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] .title {
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0;
|
||||
filter: drop-shadow(3px 3px 0 rgba(var(--accent-rgb), 0.25));
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] .design-theme-button,
|
||||
html[data-design-theme="persona-5"] .theme-toggle {
|
||||
border-radius: 4px;
|
||||
border-width: 2px;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
transform: skew(-8deg);
|
||||
box-shadow: 6px 6px 0 rgba(var(--accent-rgb), 0.34);
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] .design-theme-button::after,
|
||||
html[data-design-theme="persona-5"] .theme-icon {
|
||||
transform: skew(8deg);
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] .design-theme-button::after {
|
||||
transform: translateY(-50%) skew(8deg);
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] .design-theme-button:hover,
|
||||
html[data-design-theme="persona-5"] .theme-toggle:hover {
|
||||
background: var(--accent);
|
||||
border-color: #111111;
|
||||
color: #ffffff;
|
||||
transform: translateY(-2px) skew(-8deg);
|
||||
box-shadow: 8px 8px 0 rgba(17, 17, 17, 0.95);
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="persona-5"]
|
||||
.design-theme-button:hover,
|
||||
html[data-theme="dark"][data-design-theme="persona-5"] .theme-toggle:hover {
|
||||
border-color: #ffffff;
|
||||
box-shadow: 8px 8px 0 rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] .design-theme-list {
|
||||
border: 2px solid var(--control-border);
|
||||
border-radius: 4px;
|
||||
background: var(--control-bg);
|
||||
box-shadow: 8px 8px 0 rgba(var(--accent-rgb), 0.42);
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] .design-theme-list [role="option"] {
|
||||
border-radius: 2px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] .design-theme-list [role="option"]:hover,
|
||||
html[data-design-theme="persona-5"]
|
||||
.design-theme-list
|
||||
[role="option"][aria-selected="true"] {
|
||||
background: var(--accent);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] .card {
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border: 2px solid #111111;
|
||||
border-radius: 4px;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
box-shadow: 8px 8px 0 rgba(215, 25, 32, 0.72);
|
||||
transform: rotate(-0.4deg);
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] .card:nth-child(even) {
|
||||
transform: rotate(0.4deg);
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] .card::before {
|
||||
display: block;
|
||||
inset: 0 auto 0 0;
|
||||
width: 12px;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
background: var(--accent);
|
||||
-webkit-mask: none;
|
||||
mask: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] .card.pin {
|
||||
background: #fff2f2;
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] .card h2 {
|
||||
color: #111111;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] .card p {
|
||||
color: #3a3a3a;
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] .card:hover,
|
||||
html[data-design-theme="persona-5"] .card:focus {
|
||||
background: #111111;
|
||||
border-color: var(--accent);
|
||||
color: #ffffff;
|
||||
transform: translateY(-4px) rotate(0deg);
|
||||
box-shadow: 10px 10px 0 rgba(var(--accent-rgb), 0.92);
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="persona-5"] .card {
|
||||
background: rgba(14, 14, 14, 0.92);
|
||||
border-color: #ffffff;
|
||||
box-shadow: 8px 8px 0 rgba(255, 31, 45, 0.78);
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="persona-5"] .card.pin {
|
||||
background: rgba(36, 10, 12, 0.92);
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="persona-5"] .card h2 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="persona-5"] .card p {
|
||||
color: #d9d9d9;
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] .card:hover h2,
|
||||
html[data-design-theme="persona-5"] .card:focus h2 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] .card:hover p,
|
||||
html[data-design-theme="persona-5"] .card:focus p {
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] .beian a {
|
||||
color: var(--control-fg);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
html[data-design-theme="persona-5"] .beian a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html[data-design-theme="persona-5"] .card,
|
||||
html[data-design-theme="persona-5"] .design-theme-button,
|
||||
html[data-design-theme="persona-5"] .theme-toggle {
|
||||
transition-duration: 0.01ms !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user