382 lines
8.5 KiB
CSS
382 lines
8.5 KiB
CSS
/* NES SPORTS THEME FOR WOODPECKER CI - RBI Baseball / Tecmo Super Bowl */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
|
|
|
|
:root {
|
|
/* NES Color Palette */
|
|
--nes-black: #0f0f0f;
|
|
--nes-dark-gray: #1a1a2e;
|
|
--nes-gray: #4a4a68;
|
|
--nes-light-gray: #9090a8;
|
|
--nes-white: #f0f0f0;
|
|
|
|
--nes-dark-blue: #1a1a40;
|
|
--nes-blue: #2840a0;
|
|
--nes-mid-blue: #4060c0;
|
|
--nes-light-blue: #70a0e0;
|
|
--nes-sky: #90c0f0;
|
|
|
|
--nes-red: #d03030;
|
|
--nes-orange: #e07020;
|
|
--nes-yellow: #e0b040;
|
|
--nes-green: #40a040;
|
|
--nes-light-green: #80d080;
|
|
--nes-cyan: #40b0c0;
|
|
--nes-cream: #e8d8c0;
|
|
|
|
/* Woodpecker color overrides */
|
|
--color-wp-primary-100: var(--nes-sky);
|
|
--color-wp-primary-200: var(--nes-light-blue);
|
|
--color-wp-primary-300: var(--nes-mid-blue);
|
|
--color-wp-primary-400: var(--nes-blue);
|
|
--color-wp-primary-500: var(--nes-dark-blue);
|
|
|
|
--color-wp-success-100: var(--nes-light-green);
|
|
--color-wp-success-200: var(--nes-green);
|
|
|
|
--color-wp-error-100: #f08080;
|
|
--color-wp-error-200: var(--nes-red);
|
|
|
|
--color-wp-warning-100: var(--nes-yellow);
|
|
--color-wp-warning-200: var(--nes-orange);
|
|
|
|
--color-wp-gray-100: var(--nes-white);
|
|
--color-wp-gray-200: var(--nes-light-gray);
|
|
--color-wp-gray-300: var(--nes-gray);
|
|
--color-wp-gray-400: var(--nes-dark-gray);
|
|
--color-wp-gray-500: var(--nes-dark-blue);
|
|
--color-wp-gray-600: var(--nes-black);
|
|
}
|
|
|
|
/* Global styles */
|
|
body,
|
|
html {
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
background: linear-gradient(180deg, #0a0a28 0%, #1a1a40 30%, #1a1a40 70%, #0a0a28 100%) !important;
|
|
background-attachment: fixed !important;
|
|
color: var(--nes-white) !important;
|
|
}
|
|
|
|
/* Headings */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'Press Start 2P', monospace !important;
|
|
letter-spacing: 0.5px !important;
|
|
line-height: 1.8 !important;
|
|
}
|
|
|
|
h1 { font-size: 18px !important; color: var(--nes-light-green) !important; }
|
|
h2 { font-size: 14px !important; color: var(--nes-sky) !important; }
|
|
h3 { font-size: 12px !important; color: var(--nes-yellow) !important; }
|
|
|
|
/* Header/Navbar */
|
|
header,
|
|
nav,
|
|
.navbar,
|
|
[class*="header"],
|
|
[class*="Header"] {
|
|
background: var(--nes-black) !important;
|
|
border-bottom: 3px solid var(--nes-gray) !important;
|
|
}
|
|
|
|
/* Sidebar */
|
|
aside,
|
|
[class*="sidebar"],
|
|
[class*="Sidebar"] {
|
|
background: var(--nes-black) !important;
|
|
border-right: 3px solid var(--nes-gray) !important;
|
|
}
|
|
|
|
/* Main content area */
|
|
main,
|
|
[class*="content"],
|
|
[class*="Content"] {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Cards and panels */
|
|
[class*="card"],
|
|
[class*="Card"],
|
|
[class*="panel"],
|
|
[class*="Panel"],
|
|
[class*="box"],
|
|
[class*="Box"] {
|
|
background: var(--nes-black) !important;
|
|
border: 2px solid var(--nes-gray) !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
/* Buttons */
|
|
button,
|
|
[class*="btn"],
|
|
[class*="Btn"],
|
|
[class*="button"],
|
|
[class*="Button"] {
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
font-weight: 500 !important;
|
|
border-radius: 4px !important;
|
|
transition: all 0.15s ease !important;
|
|
}
|
|
|
|
/* Primary buttons */
|
|
[class*="primary"],
|
|
[class*="Primary"],
|
|
button[type="submit"] {
|
|
background: var(--nes-mid-blue) !important;
|
|
color: var(--nes-white) !important;
|
|
border: 2px solid var(--nes-light-blue) !important;
|
|
}
|
|
|
|
[class*="primary"]:hover,
|
|
[class*="Primary"]:hover,
|
|
button[type="submit"]:hover {
|
|
background: var(--nes-light-blue) !important;
|
|
color: var(--nes-black) !important;
|
|
}
|
|
|
|
/* Success/green buttons */
|
|
[class*="success"],
|
|
[class*="Success"],
|
|
[class*="green"],
|
|
[class*="Green"] {
|
|
background: var(--nes-green) !important;
|
|
color: var(--nes-white) !important;
|
|
border: 2px solid var(--nes-light-green) !important;
|
|
}
|
|
|
|
[class*="success"]:hover,
|
|
[class*="Success"]:hover {
|
|
background: var(--nes-light-green) !important;
|
|
color: var(--nes-black) !important;
|
|
}
|
|
|
|
/* Danger/red buttons */
|
|
[class*="danger"],
|
|
[class*="Danger"],
|
|
[class*="error"],
|
|
[class*="Error"],
|
|
[class*="red"],
|
|
[class*="Red"] {
|
|
background: var(--nes-red) !important;
|
|
color: var(--nes-white) !important;
|
|
}
|
|
|
|
/* Forms */
|
|
input,
|
|
textarea,
|
|
select {
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
background: var(--nes-dark-gray) !important;
|
|
color: var(--nes-white) !important;
|
|
border: 2px solid var(--nes-gray) !important;
|
|
border-radius: 4px !important;
|
|
padding: 8px 12px !important;
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: var(--nes-light-blue) !important;
|
|
outline: none !important;
|
|
box-shadow: 0 0 0 2px rgba(112, 160, 224, 0.3) !important;
|
|
}
|
|
|
|
/* Tables */
|
|
table {
|
|
background: var(--nes-black) !important;
|
|
border: 2px solid var(--nes-gray) !important;
|
|
border-collapse: collapse !important;
|
|
}
|
|
|
|
th {
|
|
background: var(--nes-blue) !important;
|
|
color: var(--nes-white) !important;
|
|
font-family: 'Press Start 2P', monospace !important;
|
|
font-size: 10px !important;
|
|
text-transform: uppercase !important;
|
|
padding: 10px 12px !important;
|
|
border: 1px solid var(--nes-mid-blue) !important;
|
|
}
|
|
|
|
td {
|
|
background: var(--nes-black) !important;
|
|
color: var(--nes-cream) !important;
|
|
padding: 8px 12px !important;
|
|
border: 1px solid var(--nes-dark-gray) !important;
|
|
}
|
|
|
|
tr:nth-child(even) td {
|
|
background: var(--nes-dark-gray) !important;
|
|
}
|
|
|
|
tr:hover td {
|
|
background: var(--nes-dark-blue) !important;
|
|
}
|
|
|
|
/* Pipeline/build status colors */
|
|
[class*="running"],
|
|
[class*="Running"],
|
|
[class*="pending"],
|
|
[class*="Pending"] {
|
|
color: var(--nes-yellow) !important;
|
|
}
|
|
|
|
[class*="success"],
|
|
[class*="Success"],
|
|
[class*="passed"],
|
|
[class*="Passed"] {
|
|
color: var(--nes-light-green) !important;
|
|
}
|
|
|
|
[class*="failure"],
|
|
[class*="Failure"],
|
|
[class*="failed"],
|
|
[class*="Failed"],
|
|
[class*="error"],
|
|
[class*="Error"] {
|
|
color: var(--nes-red) !important;
|
|
}
|
|
|
|
/* Build logs */
|
|
pre,
|
|
code,
|
|
[class*="log"],
|
|
[class*="Log"],
|
|
[class*="console"],
|
|
[class*="Console"] {
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
background: var(--nes-black) !important;
|
|
color: var(--nes-cream) !important;
|
|
border: 2px solid var(--nes-gray) !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
/* Inline code */
|
|
code {
|
|
background: var(--nes-dark-gray) !important;
|
|
color: var(--nes-light-green) !important;
|
|
padding: 2px 6px !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Links */
|
|
a {
|
|
color: var(--nes-sky) !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--nes-white) !important;
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
/* Dropdowns */
|
|
[class*="dropdown"],
|
|
[class*="Dropdown"],
|
|
[class*="menu"],
|
|
[class*="Menu"],
|
|
[class*="popover"],
|
|
[class*="Popover"] {
|
|
background: var(--nes-dark-gray) !important;
|
|
border: 2px solid var(--nes-gray) !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
[class*="dropdown"] li:hover,
|
|
[class*="menu"] li:hover,
|
|
[role="menuitem"]:hover,
|
|
[role="option"]:hover {
|
|
background: var(--nes-blue) !important;
|
|
}
|
|
|
|
/* Badges and tags */
|
|
[class*="badge"],
|
|
[class*="Badge"],
|
|
[class*="tag"],
|
|
[class*="Tag"],
|
|
[class*="label"],
|
|
[class*="Label"] {
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
font-size: 11px !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
/* Tooltips */
|
|
[role="tooltip"],
|
|
[class*="tooltip"],
|
|
[class*="Tooltip"] {
|
|
font-family: 'IBM Plex Mono', monospace !important;
|
|
background: var(--nes-black) !important;
|
|
color: var(--nes-white) !important;
|
|
border: 2px solid var(--nes-gray) !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
/* Progress bars */
|
|
progress,
|
|
[class*="progress"],
|
|
[class*="Progress"] {
|
|
background: var(--nes-dark-gray) !important;
|
|
border: 2px solid var(--nes-gray) !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
progress::-webkit-progress-bar {
|
|
background: var(--nes-dark-gray) !important;
|
|
}
|
|
|
|
progress::-webkit-progress-value {
|
|
background: var(--nes-green) !important;
|
|
}
|
|
|
|
/* Scrollbars */
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--nes-dark-gray);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--nes-gray);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--nes-light-gray);
|
|
}
|
|
|
|
/* Selection */
|
|
::selection {
|
|
background: var(--nes-blue) !important;
|
|
color: var(--nes-white) !important;
|
|
}
|
|
|
|
/* Icons - ensure visibility */
|
|
svg,
|
|
[class*="icon"],
|
|
[class*="Icon"] {
|
|
fill: currentColor;
|
|
}
|
|
|
|
/* Avatar images */
|
|
img[class*="avatar"],
|
|
[class*="avatar"] img {
|
|
border: 2px solid var(--nes-gray) !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
/* Repo/pipeline list items */
|
|
[class*="item"],
|
|
[class*="Item"],
|
|
[class*="list-item"],
|
|
[class*="ListItem"] {
|
|
border-bottom: 1px solid var(--nes-dark-gray) !important;
|
|
}
|
|
|
|
[class*="item"]:hover,
|
|
[class*="Item"]:hover {
|
|
background: rgba(64, 96, 192, 0.1) !important;
|
|
}
|