Stephan Lo
14d7d9d588
- Fix white text visibility in primary/magenta sections with text-shadow - Prevent white background on hover in lead sections - Ensure text stays white in dark feature card sections on hover - Add proper hover states for dark sections with readable text
524 lines
12 KiB
SCSS
524 lines
12 KiB
SCSS
/*
|
|
* Telekom-inspired Theme Variables
|
|
* Based on https://edp.buildth.ing Telekom Design System
|
|
*/
|
|
|
|
// Bootstrap/Docsy Variable Overrides (must be before imports)
|
|
$primary: #E20074 !default;
|
|
$secondary: #B6B6B6 !default;
|
|
$success: #00b367 !default;
|
|
$info: #0070ad !default;
|
|
$warning: #ffcc00 !default;
|
|
$danger: #d52b1e !default;
|
|
$dark: #000000 !default;
|
|
$light: #f9fafb !default;
|
|
|
|
// Link colors
|
|
$link-color: #E20074 !default;
|
|
$link-hover-color: #C2005E !default;
|
|
|
|
// Body
|
|
$body-bg: #ffffff !default;
|
|
$body-color: #000000 !default;
|
|
|
|
// Navbar
|
|
$navbar-light-color: #000000 !default;
|
|
$navbar-light-hover-color: #E20074 !default;
|
|
$navbar-light-active-color: #E20074 !default;
|
|
|
|
// Fonts
|
|
$font-family-sans-serif: 'TeleNeo', -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif !default;
|
|
$font-family-base: $font-family-sans-serif !default;
|
|
|
|
// Telekom TeleNeo Fonts
|
|
@font-face {
|
|
font-family: 'TeleNeo';
|
|
src: url('../fonts/TeleNeoOffice-Thin.53627df9.ttf') format('truetype');
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'TeleNeo';
|
|
src: url('../fonts/TeleNeoOffice-Regular.b0a2cff1.ttf') format('truetype');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'TeleNeo';
|
|
src: url('../fonts/TeleNeoOffice-Medium.79fb426d.ttf') format('truetype');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'TeleNeo';
|
|
src: url('../fonts/TeleNeoOffice-Bold.a7bb592b.ttf') format('truetype');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'TeleNeo';
|
|
src: url('../fonts/TeleNeoOffice-ExtraBold.fbe9fe42.ttf') format('truetype');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
|
|
// Primary Colors - Telekom Magenta
|
|
:root {
|
|
// Telekom Primary Color (Magenta)
|
|
--color-primary: #E20074;
|
|
--color-primary-contrast: #ffffff;
|
|
--color-primary-dark-1: #C2005E;
|
|
--color-primary-dark-2: #A5004D;
|
|
--color-primary-dark-3: #87003D;
|
|
--color-primary-light-1: #E7338A;
|
|
--color-primary-light-2: #EC66A1;
|
|
--color-primary-light-3: #F299B8;
|
|
--color-primary-light-4: #F7CCCF;
|
|
--color-primary-light-5: #FCEFF6;
|
|
--color-primary-light-6: #FFF5FA;
|
|
|
|
// Secondary Colors
|
|
--color-secondary: #B6B6B6;
|
|
--color-secondary-dark: #6a7178;
|
|
--color-secondary-light: #f9fafb;
|
|
|
|
// Semantic Colors
|
|
--color-success: #00b367;
|
|
--color-warning: #ffcc00;
|
|
--color-error: #d52b1e;
|
|
--color-info: #0070ad;
|
|
|
|
// Text Colors
|
|
--color-text: #000000;
|
|
--color-text-light: #666666;
|
|
--color-text-dark: #000000;
|
|
|
|
// Background Colors
|
|
--color-body: #ffffff;
|
|
--color-card: #F1F1F1;
|
|
--color-hover: #F1F1F1;
|
|
--color-active: #F1F1F1;
|
|
|
|
// Navigation
|
|
--color-nav-bg: #ffffff;
|
|
--color-nav-text: #000000;
|
|
--nav-border-color: #B6B6B6;
|
|
|
|
// UI Elements
|
|
--color-input-background: #ffffff;
|
|
--color-input-border: #cccccc;
|
|
--color-input-text: #000000;
|
|
--color-box-body: #f2f2f2;
|
|
--color-box-header: #e6e6e6;
|
|
|
|
// Shadows & Overlays
|
|
--color-shadow: rgba(0, 0, 0, 0.15);
|
|
--color-overlay-backdrop: rgba(0, 0, 0, 0.5);
|
|
|
|
// Font Settings
|
|
--font-family-base: 'TeleNeo', -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--nav-text-font-weight: 600;
|
|
}
|
|
|
|
// Apply TeleNeo font globally
|
|
body {
|
|
font-family: var(--font-family-base);
|
|
}
|
|
|
|
// Dark Mode Support
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
// Primary Colors remain same
|
|
--color-primary: #E20074;
|
|
--color-primary-contrast: #000000;
|
|
|
|
// Dark Mode Adjustments
|
|
--color-primary-dark-1: #E7338A;
|
|
--color-primary-dark-2: #EC66A1;
|
|
--color-primary-light-1: #C2005E;
|
|
--color-primary-light-2: #A5004D;
|
|
|
|
// Secondary Colors for Dark Mode
|
|
--color-secondary: #1c1c1e;
|
|
--color-secondary-dark: #4D4D4D;
|
|
--color-secondary-light: #0D0D0D;
|
|
|
|
// Text Colors
|
|
--color-text: #FFFFFF;
|
|
--color-text-light: #CCCCCC;
|
|
--color-text-dark: #FFFFFF;
|
|
|
|
// Background Colors
|
|
--color-body: #000000;
|
|
--color-card: #1c1c1e;
|
|
--color-hover: #1c1c1e;
|
|
--color-active: #0D0D0D;
|
|
|
|
// Navigation
|
|
--color-nav-bg: #000000;
|
|
--color-nav-text: #FFFFFF;
|
|
|
|
// UI Elements
|
|
--color-input-background: #1c1c1e;
|
|
--color-input-border: #4D4D4D;
|
|
--color-input-text: #FFFFFF;
|
|
--color-box-body: #000000;
|
|
--color-box-header: #1A1A1A;
|
|
|
|
// Semantic Colors for Dark Mode
|
|
--color-success: #00A94F;
|
|
--color-warning: #FFCC00;
|
|
--color-error: #D52B1E;
|
|
--color-info: #0070AD;
|
|
|
|
// Shadows
|
|
--color-shadow: rgba(0, 0, 0, 0.35);
|
|
}
|
|
}
|
|
|
|
// Telekom-inspired Component Styling
|
|
.td-navbar {
|
|
background-color: var(--color-nav-bg) !important;
|
|
border-bottom: 1px solid var(--nav-border-color);
|
|
|
|
.navbar-brand,
|
|
.nav-link {
|
|
color: var(--color-nav-text) !important;
|
|
font-weight: var(--nav-text-font-weight);
|
|
}
|
|
|
|
.nav-link:hover,
|
|
.nav-link.active {
|
|
color: var(--color-primary) !important;
|
|
background: transparent !important;
|
|
}
|
|
}
|
|
|
|
// Primary Buttons - Telekom Magenta
|
|
.btn-primary {
|
|
background-color: var(--color-primary) !important;
|
|
border-color: var(--color-primary) !important;
|
|
color: var(--color-primary-contrast) !important;
|
|
|
|
&:hover {
|
|
background-color: var(--color-primary-dark-1) !important;
|
|
border-color: var(--color-primary-dark-1) !important;
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
background-color: var(--color-primary-dark-2) !important;
|
|
border-color: var(--color-primary-dark-2) !important;
|
|
}
|
|
}
|
|
|
|
// Links
|
|
a {
|
|
color: var(--color-primary);
|
|
|
|
&:hover {
|
|
color: var(--color-primary-dark-1);
|
|
}
|
|
}
|
|
|
|
// Cards with Telekom Style
|
|
.card {
|
|
background-color: var(--color-card);
|
|
border: 1px solid var(--nav-border-color);
|
|
|
|
&:hover {
|
|
background-color: var(--color-hover);
|
|
}
|
|
}
|
|
|
|
// Active/Selected States - REMOVED harsh black backgrounds
|
|
// Now using soft Telekom colors instead
|
|
|
|
// Sidebar Navigation
|
|
.td-sidebar-nav {
|
|
.td-sidebar-link {
|
|
&:hover {
|
|
background-color: var(--color-primary-light-5) !important;
|
|
color: var(--color-primary) !important;
|
|
}
|
|
|
|
&.active {
|
|
background-color: var(--color-primary-light-6);
|
|
color: var(--color-primary);
|
|
font-weight: 500;
|
|
border-left: 3px solid var(--color-primary);
|
|
}
|
|
}
|
|
|
|
// All list items in sidebar
|
|
li a {
|
|
&:hover {
|
|
background-color: var(--color-primary-light-5) !important;
|
|
color: var(--color-primary) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Main navigation tabs
|
|
.td-sidebar {
|
|
.td-sidebar-nav__section {
|
|
.ul-1 > li > a {
|
|
&.active,
|
|
&.td-sidebar-link--active {
|
|
background-color: var(--color-primary-light-6) !important;
|
|
color: var(--color-primary) !important;
|
|
font-weight: 500;
|
|
border-left: 3px solid var(--color-primary);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--color-primary-light-5) !important;
|
|
color: var(--color-primary) !important;
|
|
}
|
|
}
|
|
|
|
// All nested levels
|
|
li a:hover {
|
|
background-color: var(--color-primary-light-5) !important;
|
|
color: var(--color-primary) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Top navigation breadcrumb area
|
|
.td-sidebar__inner {
|
|
.td-sidebar-nav__section-title {
|
|
&.active {
|
|
background-color: var(--color-primary-light-5) !important;
|
|
color: var(--color-primary) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Breadcrumb navigation in header
|
|
.breadcrumb {
|
|
.active {
|
|
color: var(--color-primary) !important;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-primary-dark-1) !important;
|
|
}
|
|
}
|
|
|
|
// Remove harsh black backgrounds globally
|
|
.active,
|
|
.selected {
|
|
background-color: var(--color-primary-light-6) !important;
|
|
color: var(--color-primary) !important;
|
|
}
|
|
|
|
// Softer hover states
|
|
*:hover {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
// Override any dark/black hover backgrounds in navigation
|
|
nav, .td-sidebar, .td-sidebar-nav {
|
|
a:hover,
|
|
li:hover > a,
|
|
.nav-link:hover {
|
|
background-color: var(--color-primary-light-5) !important;
|
|
color: var(--color-primary) !important;
|
|
}
|
|
}
|
|
|
|
// Code Blocks
|
|
pre,
|
|
code {
|
|
background-color: var(--color-box-body);
|
|
border: 1px solid var(--color-input-border);
|
|
}
|
|
|
|
// Inline code (backticks in text)
|
|
code {
|
|
background-color: var(--color-primary-light-6);
|
|
color: var(--color-primary-dark-2);
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
border: 1px solid var(--color-primary-light-3);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
// Code blocks (fenced code)
|
|
pre {
|
|
background-color: var(--color-box-body);
|
|
border: 1px solid var(--color-input-border);
|
|
padding: 1rem;
|
|
border-radius: 4px;
|
|
|
|
code {
|
|
background-color: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
// Tables
|
|
table {
|
|
thead {
|
|
background-color: var(--color-box-header);
|
|
}
|
|
|
|
tbody tr:hover {
|
|
background-color: var(--color-hover);
|
|
}
|
|
}
|
|
|
|
// Alerts/Notifications
|
|
.alert-success {
|
|
background-color: var(--color-success);
|
|
border-color: var(--color-success);
|
|
}
|
|
|
|
.alert-warning {
|
|
background-color: var(--color-warning);
|
|
border-color: var(--color-warning);
|
|
color: #000000;
|
|
}
|
|
|
|
.alert-danger {
|
|
background-color: var(--color-error);
|
|
border-color: var(--color-error);
|
|
}
|
|
|
|
.alert-info {
|
|
background-color: var(--color-info);
|
|
border-color: var(--color-info);
|
|
}
|
|
|
|
// Docsy Homepage Components
|
|
.td-cover-block {
|
|
background-color: var(--color-primary) !important;
|
|
|
|
h1, h2, h3, h4, h5, h6, p {
|
|
color: var(--color-primary-contrast) !important;
|
|
}
|
|
}
|
|
|
|
// Lead blocks with primary color background
|
|
.td-block--primary,
|
|
section[class*="bg-primary"],
|
|
section[class*="color-primary"] {
|
|
background-color: var(--color-primary) !important;
|
|
|
|
* {
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6, p, a, .lead {
|
|
color: #FFFFFF !important;
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
// Prevent white background on hover
|
|
&:hover,
|
|
*:hover {
|
|
background-color: transparent !important;
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
a:hover {
|
|
color: #FFFFFF !important;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.td-box {
|
|
background-color: var(--color-card);
|
|
border: 1px solid var(--nav-border-color);
|
|
|
|
&:hover {
|
|
background-color: var(--color-hover);
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
&--primary {
|
|
background-color: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary-contrast);
|
|
}
|
|
|
|
&--secondary {
|
|
background-color: var(--color-secondary);
|
|
border-color: var(--color-secondary);
|
|
}
|
|
}
|
|
|
|
// Hero/Cover sections
|
|
.td-cover {
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark-2) 100%);
|
|
|
|
.display-1, .display-2, .display-3, .display-4 {
|
|
color: var(--color-primary-contrast) !important;
|
|
}
|
|
}
|
|
|
|
// Section backgrounds
|
|
.td-section {
|
|
&--primary {
|
|
background-color: var(--color-primary-light-6);
|
|
}
|
|
|
|
&--secondary {
|
|
background-color: var(--color-secondary-light);
|
|
}
|
|
}
|
|
|
|
// Feature boxes
|
|
.td-feature {
|
|
border: 1px solid var(--nav-border-color);
|
|
background-color: var(--color-card);
|
|
|
|
&:hover {
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 4px 12px var(--color-shadow);
|
|
}
|
|
}
|
|
|
|
// Feature blocks on homepage (blocks/feature)
|
|
.td-box--dark,
|
|
.td-box--colored,
|
|
section[class*="bg-dark"] .td-box,
|
|
section[class*="color-dark"] .td-box {
|
|
.h2, .h3, .h4, .h5, h2, h3, h4, h5, p, a {
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: rgba(0, 0, 0, 0.8) !important;
|
|
|
|
.h2, .h3, .h4, .h5, h2, h3, h4, h5, p, a {
|
|
color: #FFFFFF !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Ensure text stays visible in dark sections
|
|
section[class*="bg-dark"],
|
|
section[class*="color-dark"] {
|
|
* {
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
.td-box, .card {
|
|
&:hover {
|
|
background-color: rgba(0, 0, 0, 0.8) !important;
|
|
|
|
* {
|
|
color: #FFFFFF !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|