527 lines
9.9 KiB
CSS
527 lines
9.9 KiB
CSS
/* AeThex Cyberpunk Documentation Theme */
|
|
@import url('https://fonts.googleapis.com/css2?family=Electrolize&family=Source+Code+Pro:wght@400;500;600;700&display=swap');
|
|
|
|
:root {
|
|
/* Cyberpunk Dark Backgrounds */
|
|
--base-background-color: #000000;
|
|
--base-color: #ffffff;
|
|
|
|
/* Neon Accents */
|
|
--theme-color: #00ffff;
|
|
--theme-color-secondary: #ff00ff;
|
|
|
|
/* Text Colors */
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #b0b0b0;
|
|
--text-muted: #808080;
|
|
|
|
/* Borders with Glow */
|
|
--border-primary: rgba(0, 255, 255, 0.3);
|
|
--border-glow: rgba(0, 255, 255, 0.5);
|
|
|
|
/* Code Blocks */
|
|
--code-theme-background: #0a0a0a;
|
|
--code-theme-text: #00ffff;
|
|
|
|
/* Sidebar */
|
|
--sidebar-background: #0a0a0a;
|
|
--sidebar-border-color: rgba(0, 255, 255, 0.2);
|
|
|
|
/* Search */
|
|
--search-input-background-color: #1a1a1a;
|
|
--search-input-border-color: rgba(0, 255, 255, 0.3);
|
|
|
|
/* Links */
|
|
--link-color: #00ffff;
|
|
--link-color-hover: #ff00ff;
|
|
}
|
|
|
|
/* Base Styling */
|
|
* {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
html {
|
|
font-size: 14px;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Source Code Pro', 'Courier New', monospace;
|
|
background: #000000;
|
|
color: #ffffff;
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Scanline Effect Overlay */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
rgba(0, 255, 255, 0.03) 0px,
|
|
transparent 1px,
|
|
transparent 2px,
|
|
rgba(0, 255, 255, 0.03) 3px
|
|
);
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
animation: scanline 8s linear infinite;
|
|
}
|
|
|
|
@keyframes scanline {
|
|
0% { transform: translateY(0); }
|
|
100% { transform: translateY(10px); }
|
|
}
|
|
|
|
/* Headings with Neon Glow */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'Electrolize', sans-serif;
|
|
color: #00ffff;
|
|
text-shadow: 0 0 10px rgba(0, 255, 255, 0.5),
|
|
0 0 20px rgba(0, 255, 255, 0.3);
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
border-bottom: 2px solid rgba(0, 255, 255, 0.3);
|
|
padding-bottom: 0.5em;
|
|
margin-bottom: 1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.6em;
|
|
margin-top: 2em;
|
|
position: relative;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
h2::before {
|
|
content: '▶';
|
|
position: absolute;
|
|
left: 0;
|
|
color: #ff00ff;
|
|
text-shadow: 0 0 10px rgba(255, 0, 255, 0.8);
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.3em;
|
|
color: #ff00ff;
|
|
text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
|
|
}
|
|
|
|
/* Links with Neon Hover */
|
|
a {
|
|
color: #00ffff !important;
|
|
text-decoration: none;
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
a:hover {
|
|
color: #ff00ff !important;
|
|
text-shadow: 0 0 10px rgba(255, 0, 255, 0.8);
|
|
}
|
|
|
|
/* Sidebar Cyberpunk Style */
|
|
.sidebar {
|
|
background: #0a0a0a;
|
|
border-right: 1px solid rgba(0, 255, 255, 0.2);
|
|
box-shadow: 2px 0 20px rgba(0, 255, 255, 0.1);
|
|
}
|
|
|
|
.sidebar-nav {
|
|
padding: 1em;
|
|
}
|
|
|
|
.sidebar-nav li {
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.sidebar-nav a {
|
|
color: #b0b0b0 !important;
|
|
border-left: 2px solid transparent;
|
|
padding-left: 0.5em;
|
|
display: block;
|
|
font-family: 'Source Code Pro', monospace;
|
|
}
|
|
|
|
.sidebar-nav a:hover {
|
|
color: #00ffff !important;
|
|
border-left-color: #00ffff !important;
|
|
text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
|
|
}
|
|
|
|
.sidebar-nav li.active > a {
|
|
color: #00ffff !important;
|
|
border-left-color: #ff00ff !important;
|
|
font-weight: 600;
|
|
text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
|
|
}
|
|
|
|
/* App Name with Glow */
|
|
.app-name {
|
|
font-family: 'Electrolize', sans-serif;
|
|
font-size: 1.2em;
|
|
color: #00ffff;
|
|
text-shadow: 0 0 20px rgba(0, 255, 255, 0.8),
|
|
0 0 40px rgba(0, 255, 255, 0.4);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
padding: 0.8em 1em;
|
|
border-bottom: 1px solid rgba(0, 255, 255, 0.2);
|
|
}
|
|
|
|
/* Logo Sizing */
|
|
.app-name img,
|
|
.sidebar img,
|
|
.github-corner,
|
|
.github-corner svg {
|
|
max-width: 60px !important;
|
|
max-height: 60px !important;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
.app-name-link img {
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
margin-right: 10px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* GitHub Corner Repositioning */
|
|
.github-corner {
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
right: 0 !important;
|
|
width: 60px !important;
|
|
height: 60px !important;
|
|
z-index: 100 !important;
|
|
}
|
|
|
|
.github-corner svg {
|
|
fill: #00ffff !important;
|
|
color: #000000 !important;
|
|
width: 60px !important;
|
|
height: 60px !important;
|
|
}
|
|
|
|
.github-corner:hover svg {
|
|
fill: #ff00ff !important;
|
|
}
|
|
|
|
.github-corner .octo-arm,
|
|
.github-corner .octo-body {
|
|
fill: #000000 !important;
|
|
}
|
|
|
|
.github-corner:hover .octo-arm {
|
|
animation: octocat-wave 560ms ease-in-out;
|
|
}
|
|
|
|
@keyframes octocat-wave {
|
|
0%, 100% { transform: rotate(0); }
|
|
20%, 60% { transform: rotate(-25deg); }
|
|
40%, 80% { transform: rotate(10deg); }
|
|
}
|
|
|
|
/* Content Area */
|
|
.content {
|
|
padding: 2em 3em;
|
|
background: #000000;
|
|
}
|
|
|
|
/* Content Images */
|
|
.content img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border: 1px solid rgba(0, 255, 255, 0.2);
|
|
border-radius: 4px;
|
|
box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Code Blocks with Neon Border */
|
|
pre {
|
|
background: #0a0a0a !important;
|
|
border: 1px solid rgba(0, 255, 255, 0.3);
|
|
border-radius: 4px;
|
|
padding: 1.5em !important;
|
|
box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
|
|
position: relative;
|
|
overflow: auto;
|
|
}
|
|
|
|
pre code {
|
|
color: #00ffff !important;
|
|
font-family: 'Source Code Pro', monospace;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Inline Code */
|
|
code {
|
|
background: #1a1a1a;
|
|
color: #ff00ff;
|
|
padding: 0.2em 0.5em;
|
|
border-radius: 3px;
|
|
border: 1px solid rgba(255, 0, 255, 0.3);
|
|
font-family: 'Source Code Pro', monospace;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Blockquotes with Neon Accent */
|
|
blockquote {
|
|
background: #0a0a0a;
|
|
border-left: 4px solid #00ffff;
|
|
padding: 1em 1.5em;
|
|
margin: 1.5em 0;
|
|
color: #b0b0b0;
|
|
box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
|
|
}
|
|
|
|
blockquote p {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Tables with Cyberpunk Grid */
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin: 2em 0;
|
|
background: #0a0a0a;
|
|
border: 1px solid rgba(0, 255, 255, 0.2);
|
|
}
|
|
|
|
thead {
|
|
background: #1a1a1a;
|
|
border-bottom: 2px solid #00ffff;
|
|
}
|
|
|
|
thead th {
|
|
color: #00ffff;
|
|
font-family: 'Electrolize', sans-serif;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
padding: 1em;
|
|
text-align: left;
|
|
}
|
|
|
|
tbody tr {
|
|
border-bottom: 1px solid rgba(0, 255, 255, 0.1);
|
|
}
|
|
|
|
tbody tr:hover {
|
|
background: #0f0f0f;
|
|
box-shadow: 0 0 10px rgba(0, 255, 255, 0.1);
|
|
}
|
|
|
|
tbody td {
|
|
padding: 0.8em 1em;
|
|
color: #b0b0b0;
|
|
}
|
|
|
|
/* Search Box */
|
|
.search input {
|
|
background: #1a1a1a;
|
|
border: 1px solid rgba(0, 255, 255, 0.3);
|
|
color: #ffffff;
|
|
padding: 0.8em 1em;
|
|
border-radius: 4px;
|
|
font-family: 'Source Code Pro', monospace;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.search input:focus {
|
|
outline: none;
|
|
border-color: #00ffff;
|
|
box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
|
|
}
|
|
|
|
.search input::placeholder {
|
|
color: #505050;
|
|
}
|
|
|
|
/* Badges/Tags */
|
|
.label {
|
|
background: #1a1a1a;
|
|
color: #00ffff;
|
|
border: 1px solid rgba(0, 255, 255, 0.3);
|
|
padding: 0.2em 0.6em;
|
|
border-radius: 3px;
|
|
font-family: 'Source Code Pro', monospace;
|
|
font-size: 0.85em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Pagination */
|
|
.docsify-pagination-container {
|
|
border-top: 1px solid rgba(0, 255, 255, 0.2);
|
|
margin-top: 3em;
|
|
padding-top: 2em;
|
|
}
|
|
|
|
.pagination-item-title {
|
|
font-family: 'Electrolize', sans-serif;
|
|
color: #00ffff;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.pagination-item:hover .pagination-item-title {
|
|
color: #ff00ff;
|
|
text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
|
|
}
|
|
|
|
/* Checkmarks and Lists */
|
|
ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
ul li {
|
|
padding-left: 1.5em;
|
|
position: relative;
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
ul li::before {
|
|
content: '▶';
|
|
position: absolute;
|
|
left: 0;
|
|
color: #00ffff;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
/* Checkbox Lists */
|
|
input[type="checkbox"] {
|
|
accent-color: #00ffff;
|
|
}
|
|
|
|
/* Alerts/Notices */
|
|
.tip, .warn, .danger {
|
|
padding: 1em 1.5em;
|
|
border-radius: 4px;
|
|
margin: 1.5em 0;
|
|
border-left: 4px solid;
|
|
background: #0a0a0a;
|
|
}
|
|
|
|
.tip {
|
|
border-left-color: #00ff00;
|
|
box-shadow: 0 0 20px rgba(0, 255, 0, 0.1);
|
|
}
|
|
|
|
.warn {
|
|
border-left-color: #ffff00;
|
|
box-shadow: 0 0 20px rgba(255, 255, 0, 0.1);
|
|
}
|
|
|
|
.danger {
|
|
border-left-color: #ff0000;
|
|
box-shadow: 0 0 20px rgba(255, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Copy Code Button */
|
|
.docsify-copy-code-button {
|
|
background: #1a1a1a !important;
|
|
color: #00ffff !important;
|
|
border: 1px solid rgba(0, 255, 255, 0.3);
|
|
font-family: 'Source Code Pro', monospace;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
.docsify-copy-code-button:hover {
|
|
background: #00ffff !important;
|
|
color: #000000 !important;
|
|
box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
|
|
}
|
|
|
|
/* Scrollbar Cyberpunk Style */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #0a0a0a;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #1a1a1a;
|
|
border: 1px solid rgba(0, 255, 255, 0.3);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #00ffff;
|
|
box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
|
|
}
|
|
|
|
/* Glowing Dividers */
|
|
hr {
|
|
border: none;
|
|
height: 1px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(0, 255, 255, 0.5),
|
|
transparent
|
|
);
|
|
margin: 3em 0;
|
|
box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
|
|
}
|
|
|
|
/* Loading Animation */
|
|
.progress {
|
|
background: #00ffff;
|
|
box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
|
|
}
|
|
|
|
/* Mobile Responsive */
|
|
@media screen and (max-width: 768px) {
|
|
.content {
|
|
padding: 1em;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
.sidebar {
|
|
background: #000000;
|
|
}
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes glow-pulse {
|
|
0%, 100% { opacity: 0.5; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
.glow-pulse {
|
|
animation: glow-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Syntax Highlighting Override */
|
|
.token.comment { color: #505050; }
|
|
.token.keyword { color: #ff00ff; }
|
|
.token.string { color: #00ff00; }
|
|
.token.function { color: #00ffff; }
|
|
.token.number { color: #ffff00; }
|
|
.token.operator { color: #ff00ff; }
|
|
.token.punctuation { color: #808080; }
|
|
.token.class-name { color: #00ffff; font-weight: bold; }
|