Skip to content

Instantly share code, notes, and snippets.

@sauntimo

sauntimo/custom.css

Last active April 16, 2026 16:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sauntimo/9fb8b4a77928c9ec55ef7985a0f536a9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sauntimo/9fb8b4a77928c9ec55ef7985a0f536a9 to your computer and use it in GitHub Desktop.
Download ZIP
custom css
Raw
custom.css
/* ============================================================
AUTH0 DELEGATED ADMIN — CUSTOM THEME
Modern, sleek overhaul. Drop this into the extension's
"Custom CSS" configuration field.
============================================================ */
/* ── Design tokens ── */
:root {
--bg: #f1f5f9;
--surface: #ffffff;
--border: #e2e8f0;
--border-soft: #f1f5f9;
--primary: #6366f1;
--primary-dk: #4f46e5;
--primary-lt: #eef2ff;
--success: #10b981;
--success-lt: #d1fae5;
--danger: #ef4444;
--danger-lt: #fee2e2;
--warning: #f59e0b;
--text: #0f172a;
--text-muted: #64748b;
--text-xs: #94a3b8;
--header-bg: #344e8a;
--radius: 10px;
--radius-sm: 6px;
--shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
--shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
--shadow-lg: 0 10px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
--transition: all .18s ease;
}
/* ── Base reset ── */
*, *::before, *::after { box-sizing: border-box; }
body {
background: var(--bg) !important;
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
font-size: 14px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
/* Override padding-top: 100px set by index.min.css */
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Ensure consistent background throughout */
#content-area,
section.content-page,
.content-page.current {
background: transparent !important;
}
/* ============================================================
HEADER / NAVBAR
============================================================ */
header.dashboard-header {
background: var(--header-bg) !important;
border-bottom: none !important;
box-shadow: 0 1px 0 rgba(255,255,255,.06), var(--shadow-md);
position: sticky;
top: 0;
z-index: 1030;
width: 100%;
overflow: visible !important;
height: 120px;
}
header.dashboard-header nav.navbar,
header.dashboard-header .navbar-default {
background: transparent !important;
border: none !important;
margin-bottom: 0 !important;
min-height: 60px !important;
max-height: 60px !important;
height: 60px !important;
width: 100%;
max-width: 100%;
overflow: visible !important;
}
/* Force the navbar container into a single non-wrapping row */
header.dashboard-header .navbar > .container,
header.dashboard-header .navbar-default > .container {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
width: 100% !important;
max-width: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
header.dashboard-header .navbar-collapse,
header.dashboard-header #navbar-collapse {
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important;
justify-content: flex-end !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
}
header.dashboard-header ul.navbar-nav.navbar-right {
float: none !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
flex-shrink: 0 !important;
list-style: none !important;
padding: 0 !important;
}
header.dashboard-header ul.navbar-nav.navbar-right > li {
display: flex;
align-items: center;
height: 60px;
}
/* Override inline style="width: 800px" on #header.navbar-header */
header.dashboard-header #header.navbar-header,
header.dashboard-header .navbar-header {
width: auto !important;
max-width: 100% !important;
min-width: auto !important;
flex: 1 !important;
float: none !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
height: 60px !important;
}
header.dashboard-header .navbar-brand,
header.dashboard-header .navbar-brand a,
header.dashboard-header .navbar-brand span {
color: #fff !important;
font-weight: 700 !important;
font-size: 15px !important;
letter-spacing: -.3px;
padding: 0 20px 0 0 !important;
margin: 0 !important;
opacity: .95;
white-space: nowrap !important;
display: flex !important;
align-items: center !important;
gap: 10px;
flex-shrink: 1 !important;
min-width: 0 !important;
overflow: hidden;
text-overflow: ellipsis;
height: 60px !important;
line-height: 1.3 !important;
}
header.dashboard-header .navbar-brand img {
flex-shrink: 0 !important;
max-height: 32px;
width: auto;
}
header.dashboard-header .navbar-brand:hover,
header.dashboard-header .navbar-brand a:hover {
opacity: 1;
color: #fff !important;
text-decoration: none !important;
}
/* All text inside the header defaults to white */
header.dashboard-header,
header.dashboard-header * {
color: #fff !important;
}
/* Re-scope dropdown menu back to dark text */
header.dashboard-header .dropdown-menu,
header.dashboard-header .dropdown-menu * {
color: var(--text) !important;
}
/* User dropdown in header */
header.dashboard-header .btn-dro,
header.dashboard-header .btn-username {
color: rgba(255,255,255,.8) !important;
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.1) !important;
border-radius: var(--radius-sm) !important;
padding: 6px 12px !important;
font-size: 13px;
font-weight: 500;
transition: var(--transition);
cursor: pointer;
}
header.dashboard-header .btn-dro:hover,
header.dashboard-header .btn-username:hover {
background: rgba(255,255,255,.12) !important;
color: #fff !important;
}
header.dashboard-header img.picture,
header.dashboard-header img.avatar {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,.2);
margin-right: 8px;
vertical-align: middle;
}
header.dashboard-header .username-text {
vertical-align: middle;
color: rgba(255,255,255,.85);
}
header.dashboard-header i.icon-budicon-460,
header.dashboard-header i.icon-budicon-462 {
color: rgba(255,255,255,.5);
margin-left: 6px;
font-size: 10px;
}
/* Dropdown menu */
header.dashboard-header .dropdown,
header.dashboard-header li.dropdown {
position: relative;
}
header.dashboard-header .dropdown.open .dropdown-menu,
header.dashboard-header li.dropdown.open .dropdown-menu {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
header.dashboard-header .dropdown-menu {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
box-shadow: var(--shadow-lg) !important;
padding: 6px !important;
margin-top: 8px !important;
min-width: 180px;
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: auto !important;
z-index: 1050 !important;
display: none;
}
header.dashboard-header .dropdown-menu li {
list-style: none;
}
header.dashboard-header .dropdown-menu li a {
color: var(--text) !important;
border-radius: var(--radius-sm);
padding: 8px 12px;
font-size: 13px;
transition: var(--transition);
display: block;
text-decoration: none;
}
header.dashboard-header .dropdown-menu li a:hover {
background: var(--primary-lt) !important;
color: var(--primary) !important;
}
/* ============================================================
MAIN LAYOUT
============================================================ */
.content-page {
padding-top: 0;
}
.container {
max-width: 1200px;
padding: 32px 20px;
}
.row.content-header {
margin-bottom: 24px;
align-items: center;
}
.row.content-header h1 {
font-size: 22px;
font-weight: 700;
color: var(--text);
letter-spacing: -.4px;
margin: 0;
line-height: 1.2;
}
/* ============================================================
TABS
============================================================ */
/* Tab bar strip — sits between header and page content */
.widget-title,
.title-with-nav-bars,
.navbar-tabs-wrapper,
[role="tablist"],
.tab-bar-container {
background: var(--surface) !important;
border-bottom: 1px solid var(--border) !important;
border-top: none !important;
margin-bottom: 24px !important;
margin-left: -20px;
margin-right: -20px;
padding: 0 20px;
}
ul.nav.nav-tabs {
border-bottom: none !important;
display: flex !important;
gap: 2px !important;
background: transparent !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
ul.nav.nav-tabs > li > a {
color: var(--text-muted) !important;
background: transparent !important;
border: none !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
padding: 12px 18px !important;
font-size: 13px;
font-weight: 500;
margin-bottom: -1px;
transition: var(--transition);
}
ul.nav.nav-tabs > li > a:hover {
color: var(--text) !important;
background: transparent !important;
border-bottom-color: var(--border) !important;
}
ul.nav.nav-tabs > li.active > a,
ul.nav.nav-tabs > li.active > a:hover,
ul.nav.nav-tabs > li.active > a:focus {
color: var(--primary) !important;
background: transparent !important;
border: none !important;
border-bottom: 2px solid var(--primary) !important;
font-weight: 600;
}
.tab-content {
background: transparent;
}
/* ============================================================
SEARCH BAR
============================================================ */
.advanced-search-control {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
display: flex;
align-items: center;
padding: 0 4px 0 14px;
transition: var(--transition);
margin-bottom: 16px;
}
.advanced-search-control:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(99,102,241,.12), var(--shadow);
}
.advanced-search-control .search-area {
display: flex;
align-items: center;
flex: 1;
gap: 10px;
}
.advanced-search-control .search-area i {
color: var(--text-xs);
font-size: 15px;
flex-shrink: 0;
}
.advanced-search-control input.user-input {
border: none !important;
background: transparent !important;
outline: none !important;
box-shadow: none !important;
color: var(--text);
font-size: 14px;
padding: 12px 0;
width: 100%;
}
.advanced-search-control input.user-input::placeholder {
color: var(--text-xs);
}
.advanced-search-control .controls {
display: flex;
gap: 4px;
padding: 4px;
}
.advanced-search-control .controls button {
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-muted);
padding: 6px 10px;
font-size: 12px;
transition: var(--transition);
cursor: pointer;
}
.advanced-search-control .controls button:hover {
background: var(--primary-lt);
border-color: var(--primary);
color: var(--primary);
}
.help-block {
color: var(--text-xs);
font-size: 12px;
margin-top: 8px;
}
.keyboard-button {
display: inline-block;
background: var(--border-soft);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1px 6px;
font-size: 11px;
color: var(--text-muted);
font-family: "SF Mono", "Fira Code", monospace;
}
/* ============================================================
TABLES
============================================================ */
/* Table wrapper card */
.col-xs-12 > table,
.user-table-content ~ div table,
div[ref="searchResults"] table,
.tab-content table {
background: var(--surface);
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--shadow);
border-collapse: separate !important;
border-spacing: 0;
overflow: hidden;
width: 100%;
}
/* Also target auth0-extension-ui table wrappers */
.dae-table,
[class*="table-responsive"],
.tab-pane > div > div {
border-radius: var(--radius);
overflow: hidden;
}
table thead tr {
background: var(--bg) !important;
}
table thead th,
table thead td {
background: var(--bg) !important;
color: var(--text-xs) !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: .6px !important;
padding: 12px 16px !important;
border-bottom: 1px solid var(--border) !important;
border-top: none !important;
white-space: nowrap;
}
table tbody tr {
border-bottom: 1px solid var(--border-soft);
transition: background .12s ease;
}
table tbody tr:last-child {
border-bottom: none;
}
table tbody tr:hover {
background: #f8faff !important;
cursor: pointer;
}
table tbody td {
padding: 13px 16px !important;
vertical-align: middle !important;
color: var(--text);
font-size: 13.5px;
border-top: none !important;
}
/* Sortable column headers */
.table-column-div {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
transition: color .12s ease;
}
.table-column-div:hover { color: var(--primary); }
.table-column-div .icon {
font-size: 9px;
color: var(--text-xs);
opacity: .7;
}
/* Row avatars */
table img.img-circle {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid var(--border);
object-fit: cover;
}
/* No results */
.user-search-no-results {
display: block;
text-align: center;
padding: 48px 0;
color: var(--text-muted);
font-size: 14px;
}
/* ============================================================
BUTTONS
============================================================ */
.btn {
border-radius: var(--radius-sm) !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 8px 16px !important;
border: 1px solid transparent !important;
transition: var(--transition) !important;
line-height: 1.4 !important;
letter-spacing: -.1px;
box-shadow: none !important;
cursor: pointer;
}
.btn-success, #create-user-button {
background: var(--primary) !important;
border-color: var(--primary) !important;
color: #fff !important;
}
.btn-success:hover, #create-user-button:hover {
background: var(--primary-dk) !important;
border-color: var(--primary-dk) !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(99,102,241,.3) !important;
}
.btn-success:active, #create-user-button:active {
transform: translateY(0);
box-shadow: none !important;
}
.btn-primary {
background: var(--primary) !important;
border-color: var(--primary) !important;
color: #fff !important;
}
.btn-primary:hover {
background: var(--primary-dk) !important;
border-color: var(--primary-dk) !important;
}
.btn-default {
background: var(--surface) !important;
border-color: var(--border) !important;
color: var(--text) !important;
}
.btn-default:hover {
background: var(--bg) !important;
border-color: #cbd5e1 !important;
color: var(--text) !important;
}
.btn-danger {
background: var(--danger) !important;
border-color: var(--danger) !important;
color: #fff !important;
}
.btn-danger:hover {
background: #dc2626 !important;
border-color: #dc2626 !important;
}
/* New / create button margin */
button.new { margin-top: 0 !important; }
/* Button toolbar spacing */
.btn-toolbar { display: flex; gap: 8px; align-items: center; }
.btn-toolbar .btn { margin: 0 !important; }
/* ============================================================
USER PROFILE HEADER
============================================================ */
.user-header {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
margin-bottom: 24px;
}
.user-bg-box {
height: 100px !important;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
position: relative;
overflow: hidden;
}
img.user-bg {
display: none; /* Hide the blurred background img; use gradient instead */
}
.box-content {
background: transparent !important;
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding: 16px 20px 16px 120px;
}
.username-area {
color: #fff;
}
.username-area h4 {
font-size: 17px;
font-weight: 700;
margin: 0 0 2px;
color: #fff;
text-shadow: 0 1px 4px rgba(0,0,0,.2);
}
span.name.user-head-nickname,
span.user-head-email {
font-size: 13px;
color: rgba(255,255,255,.8);
}
.login-count {
margin-left: auto;
text-align: right;
color: rgba(255,255,255,.9);
}
.lined-text {
font-size: 13px;
font-weight: 500;
padding-bottom: 4px;
border-bottom: 1px solid rgba(255,255,255,.3);
}
img.img-polaroid {
width: 80px !important;
height: 80px !important;
border-radius: 50% !important;
border: 3px solid var(--surface) !important;
object-fit: cover;
position: absolute !important;
bottom: -20px !important;
left: 20px !important;
box-shadow: var(--shadow-md) !important;
background: var(--surface);
}
.user-label {
display: inline-block;
background: var(--primary-lt);
color: var(--primary);
border-radius: 20px;
padding: 2px 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: .3px;
text-transform: uppercase;
margin-left: 8px;
vertical-align: middle;
}
/* ============================================================
USER INFO FIELDS
============================================================ */
.user-info {
display: flex;
flex-flow: row wrap;
gap: 0;
padding: 28px 20px 20px;
background: var(--surface);
}
.user-info-field {
flex-basis: 33.33%;
padding: 12px 16px;
border-right: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
}
.user-info-field:nth-child(3n) { border-right: none; }
.user-info-field-title {
font-size: 10px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: .7px !important;
color: var(--text-xs) !important;
margin-bottom: 4px;
}
.user-info-field > *:not(.user-info-field-title) {
color: var(--text);
font-size: 13.5px;
word-break: break-all;
}
/* ============================================================
FORMS
============================================================ */
.form-horizontal .form-group {
margin-bottom: 18px;
}
.form-horizontal label {
color: var(--text-muted);
font-size: 13px;
font-weight: 500;
text-align: right;
padding-top: 9px;
}
.form-control {
border: 1px solid var(--border) !important;
border-radius: var(--radius-sm) !important;
box-shadow: none !important;
color: var(--text) !important;
font-size: 14px !important;
padding: 9px 12px !important;
height: auto !important;
transition: var(--transition) !important;
background: var(--surface) !important;
}
.form-control:focus {
border-color: var(--primary) !important;
box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
outline: none !important;
}
.form-control::placeholder { color: var(--text-xs) !important; }
/* Error state */
.has-error .form-control {
border-color: var(--danger) !important;
}
.has-error .form-control:focus {
box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}
.has-error label {
color: var(--danger) !important;
font-weight: 600 !important;
}
/* ============================================================
MODALS
============================================================ */
.modal-backdrop {
background: rgba(15,23,42,.5) !important;
backdrop-filter: blur(4px);
}
.modal-backdrop.in { opacity: 1 !important; }
.modal .modal-dialog {
margin-top: 80px;
}
.modal .modal-content {
border: none !important;
border-radius: var(--radius) !important;
box-shadow: var(--shadow-lg) !important;
overflow: hidden;
}
.modal .modal-header {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 20px 24px;
}
.modal .modal-header.has-border {
border-bottom: 1px solid var(--border);
}
.modal .modal-header h4,
.modal .modal-title {
font-size: 16px;
font-weight: 700;
color: var(--text);
letter-spacing: -.3px;
}
.modal .modal-header .close {
color: var(--text-muted);
opacity: 1;
font-size: 18px;
font-weight: 300;
margin-top: 0;
transition: var(--transition);
}
.modal .modal-header .close:hover { color: var(--text); }
.modal .modal-body {
padding: 24px;
background: var(--surface);
}
.modal .modal-footer {
background: var(--bg);
border-top: 1px solid var(--border);
padding: 16px 24px;
display: flex;
gap: 8px;
justify-content: flex-end;
}
/* ============================================================
VALIDATION ERRORS
============================================================ */
.alert {
border-radius: var(--radius-sm) !important;
border: none !important;
padding: 12px 16px !important;
font-size: 13px;
}
.alert-danger,
.validation-error {
background: var(--danger-lt) !important;
color: #991b1b !important;
border-left: 3px solid var(--danger) !important;
}
.validation-error-fields-list {
margin: 6px 0 0;
padding-left: 18px;
}
.validation-error-fields-list li label {
text-decoration: none !important;
font-weight: 500;
}
.alert-success {
background: var(--success-lt) !important;
color: #065f46 !important;
border-left: 3px solid var(--success) !important;
}
.alert-warning {
background: #fef3c7 !important;
color: #92400e !important;
border-left: 3px solid var(--warning) !important;
}
/* ============================================================
PAGINATION
============================================================ */
ul.pagination {
display: flex;
align-items: center;
gap: 4px;
margin: 20px 0 0;
padding: 0;
list-style: none;
}
ul.pagination li a,
ul.pagination li span {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-muted);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: var(--transition);
}
ul.pagination li a:hover {
background: var(--primary-lt);
border-color: var(--primary);
color: var(--primary);
}
ul.pagination li.active a,
ul.pagination li.active span {
background: var(--primary) !important;
border-color: var(--primary) !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(99,102,241,.35);
}
ul.pagination li.disabled a,
ul.pagination li.disabled span {
opacity: .4;
cursor: not-allowed;
pointer-events: none;
}
/* ============================================================
CONFIGURATION PAGE
============================================================ */
.configuration {
background: transparent;
}
.row.configuration-tabs {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
padding: 0;
}
.save-config {
padding-top: 20px;
text-align: right;
}
/* CodeMirror editor */
.CodeMirror {
font-family: "SF Mono", "Fira Code", "JetBrains Mono", monospace !important;
font-size: 13px !important;
line-height: 1.65 !important;
border-radius: 0;
height: 400px;
}
/* ============================================================
LOGS TABLE
============================================================ */
.wrapper {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
/* ============================================================
USER ROWS — action buttons
============================================================ */
.row.user-tabs {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 0;
overflow: hidden;
}
/* ============================================================
LOADING & EMPTY STATES
============================================================ */
/* Spinner / loading panel */
.loading {
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
color: var(--text-muted);
font-size: 14px;
}
/* ============================================================
RESPONSIVE ADJUSTMENTS
============================================================ */
@media (max-width: 768px) {
.container { padding: 16px; }
.user-info-field {
flex-basis: 50%;
}
.row.content-header h1 { font-size: 18px; }
.modal .modal-dialog { margin: 16px; }
}
@media (max-width: 480px) {
.user-info-field { flex-basis: 100%; border-right: none; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment