Dragon Dark DevOps

/* ========================================================================== */
/* Azure Abyss Theme - Dark Mode */
/* Mythical underwater monster theme */
/* Full background image visibility, no shadow overlay */
/* ========================================================================== */

/* --------------------------------------------------------------- */
/* CSS Variables */
/* --------------------------------------------------------------- */
:root {
/* Abyss Blues */
--abyss-990: #020b12;
--abyss-950: #04121c;
--abyss-930: #071a29;
--abyss-900: #0a2233;
--abyss-850: #10314a;
--abyss-800: #144666;
--azure-700: #1d78d6;
--azure-600: #33a1ff;
--azure-500: #63b8ff;
--azure-400: #8cd0ff;
--azure-300: #b8e3ff;

/* Monster / Ember Accent */
--ember-800: #a64800;
--ember-700: #cc5d00;
--ember-600: #f27a00;
--ember-500: #ff9500;
--ember-400: #ffb347;
--ember-300: #ffd08d;

/* Text / Neutrals */
--text-strong: #f2fbff;
--text-main: #d9ecf7;
--text-soft: #a8c2d3;
--text-muted: #7d97aa;

/* Surface system */
--surface-header: rgba(5, 18, 28, 0.58);
--surface-sidebar: rgba(4, 18, 28, 0.52);
--surface-nav: rgba(6, 20, 31, 0.50);
--surface-page: rgba(5, 18, 28, 0.22);
--surface-card: rgba(4, 18, 28, 0.46);
--surface-card-strong: rgba(4, 18, 28, 0.60);
--surface-input: rgba(3, 16, 26, 0.62);
--surface-modal: rgba(4, 18, 28, 0.84);
--surface-pill: rgba(10, 34, 51, 0.62);

/* Borders / FX */
--color-logo: var(--azure-500);
--color-header-text: var(--text-strong);
--color-sidebar-text: var(--text-main);

--color-link: var(--azure-400);
--color-link-hover: var(--ember-400);

--color-border: rgba(140, 208, 255, 0.18);
--color-border-strong: rgba(140, 208, 255, 0.28);
--color-border-warm: rgba(255, 149, 0, 0.28);

--color-row-hover: rgba(51, 161, 255, 0.18);
--color-row-hover-strong: rgba(255, 149, 0, 0.14);

--color-shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.22);
--color-shadow-md: 0 18px 42px rgba(0, 0, 0, 0.30);
--color-shadow-lg: 0 28px 60px rgba(0, 0, 0, 0.42);

--color-glow-blue: rgba(51, 161, 255, 0.16);
--color-glow-orange: rgba(255, 149, 0, 0.10);

--radius-xs: 15px;
--radius-sm: 15px;
--radius-md: 15px;
--radius-lg: 15px;
--radius-xl: 15px;

--transition-fast: 0.18s ease;
--transition-med: 0.28s ease;
--transition-slow: 0.45s ease;

--blur-glass: 10px;

--theme-bg-image: url("https://images.nightcafe.studio/jobs/d9I4if59jcrCiFfMkKf3/d9I4if59jcrCiFfMkKf3--1--24bbi_4x-real-esrgan-x4-v3-wdn.jpg?tr=w-1600,c-at_max") center / cover no-repeat fixed;
/* --theme-bg-image: url("https://i.pinimg.com/originals/33/d9/6b/33d96b44c9f41f9cf4f0d5d429d1ad5c.jpg") center / cover no-repeat fixed; */
}

/* --------------------------------------------------------------- */
/* Keyframes */
/* --------------------------------------------------------------- */
@keyframes abyssFloat {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(0, -6px, 0) scale(1.01); }
100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes deepCurrent {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

@keyframes biolumeSweep {
0% { transform: translateX(-130%); opacity: 0; }
20% { opacity: 0.22; }
100% { transform: translateX(130%); opacity: 0; }
}

@keyframes currentDrift {
0% { transform: translateX(0px) translateY(0px); }
50% { transform: translateX(10px) translateY(-4px); }
100% { transform: translateX(0px) translateY(0px); }
}

/* --------------------------------------------------------------- */
/* Custom */
/* --------------------------------------------------------------- */
.project-overview-tab {
background: transparent !important;
}
.wiki-md-container {
background: #000215bd;
}
.board-wrapper .kanban-board .kanban-board-column-header {
background: #528b8582;
padding: 2px;
border-radius: 15px;
}
.board-wrapper .kanban-board .kanban-board-column-header-container {
background: transparent;
}
/* Dashed Border + Rounded Border + Glass Card */
.vss-FilterBar,
.vss-ZeroDataItem,
.board-wrapper .kanban-board .kanban-board-column-header {
background: #002372ab;
padding: 2px;
border-radius: 15px;
color: #fff;
border: 1px dashed #00ffff;
}
/* div#__bolt-splitter-fixed-pane0{
background: #002372ab;
color: #fff;
} */
.vss-Splitter--divider {
background: #00b5ff8f;
}
.html-editor.auto-grow .rooster-wrapper .rooster-editor {
background: #2579c4;
}
.activity-feed-list,
.repos-overview-right-pane,
.work-items-tab-content > div .ms-List-page,
div#__bolt-splitter-fixed-pane0 {
background: #017788a3;
border-radius: 15px;
padding: 5px;
box-shadow: 0px 0px 10px 0px #00e7a4;
}
.vss-DetailsList--layout.headerRowStyles .ms-DetailsHeader-cell {
min-height: 36px;
}
.work-item-form-control-wrapper > div:hover, 
.boards-widget-report:hover, 
.bolt-card:hover, 
.ms-Panel-main:hover {
/* box-shadow: var(--color-shadow-md); */
border-width: 2px;
background: var(--surface-card-strong) !important;
border-style: double;
border-color: #ffffff #b4ff56 #ffef2d #83ff6c;
box-shadow: 0px 0px 10px 0px #00e7a4;
}

/* --------------------------------------------------------------- */
/* Global Surface */
/* --------------------------------------------------------------- */
html {
background: transparent !important;
min-height: 100%;
}
.wit-card .card-content,
.deployment-control-container .deployments-zero-data, 
span {
color: #fff;
}
.board-wrapper .kanban-board{
background: transparent;
}

body {
min-height: 100vh;
background: var(--theme-bg-image) !important;
background-size: 100% 100% !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
color: var(--text-main);
position: relative;
overflow-x: hidden;
}

/* No shadow overlay on the image */
/* Only a very subtle animated color aura to fit the sea-monster theme */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(circle at 14% 18%, rgba(51, 161, 255, 0.08) 0%, rgba(51, 161, 255, 0) 26%),
radial-gradient(circle at 82% 16%, rgba(140, 208, 255, 0.06) 0%, rgba(140, 208, 255, 0) 22%),
radial-gradient(circle at 78% 78%, rgba(255, 149, 0, 0.05) 0%, rgba(255, 149, 0, 0) 22%);
animation: currentDrift 20s ease-in-out infinite;
}

#root,
body > * {
position: relative;
z-index: 1;
}

/* --------------------------------------------------------------- */
/* Logo */
/* --------------------------------------------------------------- */
.suite-logo {
color: var(--color-logo) !important;
text-shadow:
0 0 14px rgba(51, 161, 255, 0.28),
0 0 28px rgba(51, 161, 255, 0.12);
transition: transform var(--transition-med), color var(--transition-med);
}

.suite-logo:hover {
transform: translateY(-1px) scale(1.02);
color: var(--ember-400) !important;
}

/* --------------------------------------------------------------- */
/* Header */
/* --------------------------------------------------------------- */
.top-level-header.flex-row.flex-noshrink > div,
.project-header.flex-row.flex-noshrink > div > div {
background: linear-gradient(135deg, rgba(4,18,28,0.66) 0%, rgba(10,34,51,0.56) 60%, rgba(36,18,6,0.40) 100%) !important;
background-size: 200% 200%;
animation: deepCurrent 18s ease infinite;
color: var(--color-header-text) !important;
border-bottom: 1px solid var(--color-border-strong);
box-shadow: var(--color-shadow-sm);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
position: relative;
overflow: hidden;
}

.top-level-header.flex-row.flex-noshrink > div::after,
.project-header.flex-row.flex-noshrink > div > div::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 35%;
height: 100%;
background: linear-gradient(
100deg,
transparent 0%,
rgba(140,208,255,0.05) 35%,
rgba(140,208,255,0.18) 50%,
rgba(140,208,255,0.05) 65%,
transparent 100%
);
animation: biolumeSweep 12s linear infinite;
pointer-events: none;
}

/* --------------------------------------------------------------- */
/* Sidebar */
/* --------------------------------------------------------------- */
.navigation-container.flex-column > div {
background: var(--surface-sidebar) !important;
color: var(--color-sidebar-text) !important;
border-right: 1px solid var(--color-border);
box-shadow: inset -1px 0 0 rgba(255,255,255,0.03);
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
}

.navigation-container.flex-column {
max-width: 240px;
transition: width var(--transition-med), transform var(--transition-med);
}

.project-navigation.region-navigation.flex-column.flex-grow.expanded {
max-width: 100%;
}

.navigation-container .bolt-list-row,
.navigation-container .tree-row,
.navigation-container .item {
border-radius: var(--radius-sm);
color: var(--text-main) !important;
transition:
background var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast),
color var(--transition-fast);
}

.navigation-container .bolt-list-row:hover,
.navigation-container .tree-row:hover,
.navigation-container .item:hover {
background: linear-gradient(90deg, rgba(51, 161, 255, 0.18), rgba(255, 149, 0, 0.10)) !important;
transform: translateX(3px);
box-shadow: inset 3px 0 0 var(--azure-600);
}

.navigation-container .selected,
.navigation-container [aria-selected="true"] {
background: linear-gradient(90deg, rgba(51, 161, 255, 0.24), rgba(255, 149, 0, 0.12)) !important;
box-shadow: inset 3px 0 0 var(--ember-500);
}

/* --------------------------------------------------------------- */
/* Main Content */
/* --------------------------------------------------------------- */
.work-item-form-nav-bar.flex-row.flex-grow.flex-center {
background: var(--surface-nav) !important;
border-bottom: 1px solid var(--color-border);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}

.work-item-form-page.flex-grow.flex-column.v-scroll-hidden.form-height.bolt-page.v-scroll-auto.flex-column.bolt-page-white {
background: var(--surface-page) !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
position: relative;
}

/* --------------------------------------------------------------- */
/* Tables / Rows */
/* --------------------------------------------------------------- */
.vss-DetailsList--layout.ms-DetailsList.colors .ms-DetailsRow {
color: var(--text-main) !important;
transition:
background var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
border-radius: var(--radius-sm);
}

.vss-DetailsList--layout.ms-DetailsList.colors .ms-DetailsRow:hover {
background: linear-gradient(90deg, rgba(51, 161, 255, 0.16), rgba(255, 149, 0, 0.10)) !important;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
transform: translateY(-1px);
}

.vss-DetailsList--layout .ms-DetailsHeader-cell {
background: linear-gradient(180deg, rgba(10,34,51,0.74) 0%, rgba(7,26,41,0.74) 100%) !important;
border-bottom: 1px solid var(--color-border);
color: var(--text-strong) !important;
font-weight: 700;
}

/* --------------------------------------------------------------- */
/* Cards / Widgets / Panels */
/* --------------------------------------------------------------- */
.work-item-form-control-wrapper > div,
.work-item-form-control-content,
.boards-widget-report,
.boards-widget-report .chart,
.bolt-card,
.ms-Panel-main,
.bolt-table-card,
.bolt-tabbar,
.bolt-pill-group {
background: var(--surface-card) !important;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--color-shadow-sm);
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
transition:
transform var(--transition-med),
box-shadow var(--transition-med),
border-color var(--transition-med),
background var(--transition-med);
}

.work-item-form-control-wrapper > div,
.boards-widget-report,
.boards-widget-report .chart {
padding: 10px 14px;
margin-bottom: 14px;
}

.work-item-form-control-wrapper > div,
.boards-widget-report,
.bolt-card {
position: relative;
overflow: hidden;
}

.work-item-form-control-wrapper > div::before,
.boards-widget-report::before,
.bolt-card::before {
content: "";
position: absolute;
top: 0;
left: 14px;
right: 14px;
height: 3px;
border-radius: 15px;
background: linear-gradient(90deg, var(--azure-600), var(--ember-500));
opacity: 0.9;
}

/* --------------------------------------------------------------- */
/* Skip link / helper surfaces */
/* --------------------------------------------------------------- */
div#skip-to-main-content > div {
background: transparent !important;
border-radius: var(--radius-md);
border: none;
box-shadow: none;
}

.boards-widget-report {
border: 1px solid var(--color-border-strong);
}

/* --------------------------------------------------------------- */
/* Links */
/* --------------------------------------------------------------- */
a {
color: var(--color-link);
font-weight: 500;
transition:
color var(--transition-fast),
text-shadow var(--transition-fast);
}

a:hover,
a:focus {
color: var(--color-link-hover);
text-decoration: none;
text-shadow: 0 0 12px rgba(255, 149, 0, 0.18);
}

/* --------------------------------------------------------------- */
/* Buttons */
/* --------------------------------------------------------------- */
button,
input[type="button"],
input[type="submit"] {
border-radius: var(--radius-md) !important;
border: 1px solid var(--color-border);
background: linear-gradient(180deg, rgba(10,34,51,0.82) 0%, rgba(4,18,28,0.82) 100%);
color: var(--text-strong) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
transition:
transform var(--transition-fast),
box-shadow var(--transition-fast),
border-color var(--transition-fast),
background var(--transition-fast),
color var(--transition-fast);
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
transform: translateY(-1px);
box-shadow:
0 10px 18px rgba(0, 0, 0, 0.26),
0 0 0 3px rgba(51, 161, 255, 0.10);
border-color: var(--color-border-warm);
background: linear-gradient(180deg, rgba(16,49,74,0.88) 0%, rgba(6,20,31,0.88) 100%);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active {
transform: translateY(0);
}

button.primary,
button.bolt-button.primary,
.bolt-button.enabled.primary {
background: linear-gradient(135deg, var(--azure-700), var(--azure-600)) !important;
color: #ffffff !important;
border-color: transparent !important;
box-shadow: 0 12px 24px rgba(29, 120, 214, 0.28);
}

button.primary:hover,
button.bolt-button.primary:hover,
.bolt-button.enabled.primary:hover {
background: linear-gradient(135deg, var(--azure-700), var(--ember-500)) !important;
}

/* --------------------------------------------------------------- */
/* Focus States */
/* --------------------------------------------------------------- */
*:focus-visible {
outline: 2px solid var(--ember-500);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(255, 149, 0, 0.14);
}

/* --------------------------------------------------------------- */
/* Inputs */
/* --------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
textarea,
select,
.ms-TextField-field,
.ms-Dropdown-title {
background: var(--surface-input) !important;
color: var(--text-strong) !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--radius-md) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast),
background var(--transition-fast),
transform var(--transition-fast);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
textarea:hover,
select:hover,
.ms-TextField-field:hover,
.ms-Dropdown-title:hover {
border-color: var(--color-border-warm) !important;
background: rgba(4,18,28,0.72) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
.ms-TextField-field:focus,
.ms-Dropdown-title:focus {
border-color: var(--azure-600) !important;
box-shadow:
0 0 0 4px rgba(51, 161, 255, 0.14),
0 6px 16px rgba(29, 120, 214, 0.16) !important;
transform: translateY(-1px);
}

/* --------------------------------------------------------------- */
/* Modal dialogs */
/* --------------------------------------------------------------- */
.bolt-modal,
.ms-Dialog-main,
.ms-Layer-content .ms-Panel-main {
border-radius: var(--radius-xl) !important;
box-shadow: var(--color-shadow-lg) !important;
border: 1px solid var(--color-border) !important;
background: var(--surface-modal) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}

/* --------------------------------------------------------------- */
/* Tooltips */
/* --------------------------------------------------------------- */
.ms-Tooltip {
background: rgba(4,18,28,0.92) !important;
color: var(--text-strong) !important;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
box-shadow: var(--color-shadow-sm);
}

/* --------------------------------------------------------------- */
/* Scrollbars */
/* --------------------------------------------------------------- */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}

::-webkit-scrollbar-track {
background: rgba(4,18,28,0.40);
border-radius: 15px;
}

::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--azure-600), var(--ember-500));
border-radius: 15px;
border: 2px solid rgba(4,18,28,0.40);
}

::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--azure-500), var(--ember-400));
}

/* --------------------------------------------------------------- */
/* Selection / drag / active markers */
/* --------------------------------------------------------------- */
.ms-List-cell.is-dropping,
.ms-List-cell.is-selected {
border-left: 4px solid var(--ember-500) !important;
background: linear-gradient(90deg, rgba(255, 149, 0, 0.14), rgba(51, 161, 255, 0.10)) !important;
}

/* --------------------------------------------------------------- */
/* Tags / chips / pills */
/* --------------------------------------------------------------- */
.bolt-pill,
.ms-TagItem,
.bolt-badge {
border-radius: 15px !important;
background: var(--surface-pill) !important;
border: 1px solid var(--color-border);
color: var(--text-main) !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

/* --------------------------------------------------------------- */
/* Tabs */
/* --------------------------------------------------------------- */
.bolt-tab {
border-radius: var(--radius-md) var(--radius-md) 0 0;
color: var(--text-soft) !important;
transition:
background var(--transition-fast),
color var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
}

.bolt-tab:hover {
background: rgba(51, 161, 255, 0.10) !important;
color: var(--text-strong) !important;
}

.bolt-tab.selected,
.bolt-tab[aria-selected="true"] {
background: linear-gradient(180deg, rgba(10,34,51,0.76), rgba(4,18,28,0.76)) !important;
color: var(--azure-400) !important;
font-weight: 700;
}

/* --------------------------------------------------------------- */
/* Ambient animation */
/* --------------------------------------------------------------- */
.work-item-form-page.flex-grow.flex-column.v-scroll-hidden.form-height.bolt-page.v-scroll-auto.flex-column.bolt-page-white::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 15% 20%, var(--color-glow-blue), transparent 24%),
radial-gradient(circle at 85% 18%, var(--color-glow-orange), transparent 20%),
radial-gradient(circle at 70% 75%, rgba(51, 161, 255, 0.06), transparent 22%);
animation: abyssFloat 16s ease-in-out infinite;
opacity: 0.8;
}

/* --------------------------------------------------------------- */
/* Better text contrast */
/* --------------------------------------------------------------- */
body,
span,
div,
label,
p,
td,
th,
li {
color: inherit;
}

h1, h2, h3, h4, h5, h6,
.bolt-header-title,
.work-item-title-text,
.ms-DetailsHeader-cellName {
color: var(--text-strong) !important;
}

/* Common dark text fixes */
.ms-DetailsRow-cell,
.bolt-table-cell,
.bolt-card,
.bolt-pill-content,
.ms-Link,
.ms-Button-label,
.ms-TextField-field,
.ms-Dropdown-title {
color: var(--text-main) !important;
}

/* --------------------------------------------------------------- */
/* Reduced motion support */
/* --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

/* --------------------------------------------------------------- */
/* Utility fix */
/* --------------------------------------------------------------- */
.text-ellipsis {
display: flex;
text-wrap: wrap;
}