300 lines
6.8 KiB
CSS
300 lines
6.8 KiB
CSS
/* Black & White Theme for Python Lern App */
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap');
|
|
|
|
:root {
|
|
--bw-bg: #ffffff;
|
|
--bw-text: #000000;
|
|
--bw-black: #000000;
|
|
--bw-white: #ffffff;
|
|
--bw-grey-light: #f5f5f5;
|
|
--bw-grey-medium: #888888;
|
|
--bw-grey-dark: #333333;
|
|
--bw-border: #000000;
|
|
}
|
|
|
|
[data-theme='dark'] {
|
|
--bw-bg: #000000;
|
|
--bw-text: #ffffff;
|
|
--bw-grey-light: #1a1a1a;
|
|
--bw-border: #ffffff;
|
|
}
|
|
|
|
html, body {
|
|
background-color: var(--bw-bg) !important;
|
|
color: var(--bw-text) !important;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
line-height: 1.6;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6, .font-mono {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: -1px;
|
|
color: var(--bw-text);
|
|
}
|
|
|
|
/* Utilities that respect theme */
|
|
.bw-text { color: var(--bw-text) !important; }
|
|
.bw-bg { background-color: var(--bw-bg) !important; }
|
|
.bw-border { border-color: var(--bw-border) !important; }
|
|
|
|
/* Override some Bootstrap defaults to respect theme */
|
|
.text-muted {
|
|
color: var(--bw-grey-medium) !important;
|
|
}
|
|
|
|
.list-group-item {
|
|
background-color: transparent !important;
|
|
color: var(--bw-text) !important;
|
|
border-color: var(--bw-border) !important;
|
|
}
|
|
|
|
.list-group-item-action:hover {
|
|
background-color: var(--bw-grey-light) !important;
|
|
color: var(--bw-text) !important;
|
|
}
|
|
|
|
/* Brutalist UI Elements */
|
|
.btn-bw {
|
|
background-color: var(--bw-text) !important;
|
|
color: var(--bw-bg) !important;
|
|
border: 2px solid var(--bw-text) !important;
|
|
border-radius: 0;
|
|
padding: 10px 25px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-weight: 700;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-bw:hover {
|
|
background-color: var(--bw-bg) !important;
|
|
color: var(--bw-text) !important;
|
|
}
|
|
|
|
.btn-bw-outline {
|
|
background-color: var(--bw-bg) !important;
|
|
color: var(--bw-text) !important;
|
|
border: 2px solid var(--bw-text) !important;
|
|
border-radius: 0;
|
|
padding: 10px 25px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-weight: 700;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-bw-outline:hover {
|
|
background-color: var(--bw-text) !important;
|
|
color: var(--bw-bg) !important;
|
|
}
|
|
|
|
.card-bw {
|
|
border: 2px solid var(--bw-border) !important;
|
|
border-radius: 0;
|
|
background-color: var(--bw-bg) !important;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.card-bw:hover {
|
|
transform: translate(-4px, -4px);
|
|
box-shadow: 4px 4px 0px var(--bw-border);
|
|
}
|
|
|
|
.border-bw {
|
|
border: 2px solid var(--bw-border) !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* Section Inverted logic */
|
|
.section-inverted {
|
|
background-color: var(--bw-text) !important;
|
|
color: var(--bw-bg) !important;
|
|
}
|
|
|
|
.section-inverted h1,
|
|
.section-inverted h2,
|
|
.section-inverted h3,
|
|
.section-inverted h4,
|
|
.section-inverted h5,
|
|
.section-inverted h6,
|
|
.section-inverted p,
|
|
.section-inverted li,
|
|
.section-inverted div,
|
|
.section-inverted span,
|
|
.section-inverted .font-mono,
|
|
.section-inverted .lead {
|
|
color: var(--bw-bg) !important;
|
|
}
|
|
|
|
/* Adjust components inside inverted section */
|
|
.section-inverted .btn-bw {
|
|
background-color: var(--bw-bg) !important;
|
|
color: var(--bw-text) !important;
|
|
border-color: var(--bw-bg) !important;
|
|
}
|
|
|
|
.section-inverted .btn-bw-outline {
|
|
background-color: transparent !important;
|
|
color: var(--bw-bg) !important;
|
|
border-color: var(--bw-bg) !important;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero-bw {
|
|
padding: 100px 0;
|
|
border-bottom: 2px solid var(--bw-border);
|
|
background-image: radial-gradient(var(--bw-text) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
}
|
|
|
|
.hero-content {
|
|
background-color: var(--bw-bg) !important;
|
|
padding: 40px;
|
|
border: 4px solid var(--bw-border) !important;
|
|
display: inline-block;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
}
|
|
|
|
/* Navbar */
|
|
.navbar-bw {
|
|
border-bottom: 2px solid var(--bw-border);
|
|
padding: 20px 0;
|
|
background-color: var(--bw-bg) !important;
|
|
}
|
|
|
|
.navbar-brand-bw {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
color: var(--bw-text) !important;
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--bw-text) !important;
|
|
}
|
|
|
|
.navbar-toggler {
|
|
border-color: var(--bw-border) !important;
|
|
border-radius: 0;
|
|
}
|
|
|
|
[data-theme='dark'] .navbar-toggler-icon {
|
|
filter: invert(1);
|
|
}
|
|
|
|
/* Timeline/Modules */
|
|
.module-list {
|
|
border-left: 2px solid var(--bw-border);
|
|
padding-left: 30px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.module-item {
|
|
position: relative;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.module-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -41px;
|
|
top: 5px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: var(--bw-text);
|
|
}
|
|
|
|
/* Code block styling */
|
|
pre, code {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
background-color: var(--bw-grey-light) !important;
|
|
border: 1px solid var(--bw-border) !important;
|
|
padding: 10px;
|
|
color: var(--bw-text) !important;
|
|
}
|
|
|
|
/* Progress Bar */
|
|
.progress {
|
|
background-color: var(--bw-grey-light) !important;
|
|
border-color: var(--bw-border) !important;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.progress-bar {
|
|
background-color: var(--bw-text) !important;
|
|
color: var(--bw-bg) !important;
|
|
}
|
|
|
|
/* Theme Toggle Button */
|
|
.theme-toggle {
|
|
cursor: pointer;
|
|
border: 2px solid var(--bw-text);
|
|
background: var(--bw-bg);
|
|
color: var(--bw-text);
|
|
padding: 5px 15px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-weight: 700;
|
|
margin-left: 15px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
background: var(--bw-text);
|
|
color: var(--bw-bg);
|
|
}
|
|
|
|
/* Footer fixes */
|
|
footer.bw-border {
|
|
border-top: 2px solid var(--bw-border) !important;
|
|
}
|
|
|
|
/* Global Form Styling */
|
|
.form-control, .form-select {
|
|
background-color: transparent !important;
|
|
border: 2px solid var(--bw-border) !important;
|
|
color: var(--bw-text) !important;
|
|
border-radius: 0 !important;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
padding: 10px 15px;
|
|
}
|
|
|
|
.form-control:focus, .form-select:focus {
|
|
box-shadow: 4px 4px 0px var(--bw-border) !important;
|
|
background-color: transparent !important;
|
|
color: var(--bw-text) !important;
|
|
}
|
|
|
|
/* Alert Styling */
|
|
.alert-bw {
|
|
background-color: var(--bw-bg) !important;
|
|
color: var(--bw-text) !important;
|
|
border: 2px solid var(--bw-border) !important;
|
|
border-radius: 0;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.btn-close {
|
|
filter: invert(0);
|
|
}
|
|
|
|
[data-theme='dark'] .btn-close {
|
|
filter: invert(1);
|
|
}
|
|
|
|
/* Table Styling */
|
|
.table-bw {
|
|
border-color: var(--bw-border);
|
|
color: var(--bw-text);
|
|
}
|
|
|
|
.table-bw td, .table-bw th {
|
|
border-color: var(--bw-border);
|
|
background-color: transparent !important;
|
|
color: var(--bw-text) !important;
|
|
} |