for best visual experience
* See README.md for complete documentation
*/
code[class*="language-"],
pre[class*="language-"] {
color: #fff;
background: transparent;
text-shadow: none !important;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
tab-size: 4;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #997f66;
}
.token.punctuation {
color: #fff;
opacity: 0.7;
}
.token.namespace {
opacity: 0.7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
color: #d1939e;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #bce051;
}
.token.operator,
.token.entity,
.token.url,
.token.variable {
color: #f4b73d;
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #d1939e;
}
.token.function,
.token.class-name {
color: #f4b73d;
}
.token.regex,
.token.important {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token.deleted {
color: red;
}
/* Code container for syntax-highlighted blocks
* Provides beautiful dark containers for code examples
* Usage:
* Can be auto-wrapped with JavaScript - see README.md
*/
.code-container {
background-color: #2d2d2d;
border: 1px solid #444;
border-radius: 4px;
padding: 1rem;
margin-top: 1rem;
position: relative;
}
.code-container h5 {
color: #f8f8f2;
margin-bottom: 0.5rem;
}
.code-container pre {
margin: 0;
background: transparent !important;
border: none !important;
border-left: none !important;
white-space: pre-wrap;
word-wrap: break-word;
}
.code-container pre code {
background: transparent !important;
padding: 0 !important;
}
/* Copy button for code containers */
.code-container .copy-button {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 10;
opacity: 0.8;
transition: opacity 0.2s;
border: none;
background: rgba(255, 255, 255, 0.1);
color: #f8f8f2;
border-radius: 3px;
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
}
.code-container .copy-button:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.2);
}
.code-container:hover .copy-button {
opacity: 1;
}
/* Icon Spacing - Add consistent spacing after Font Awesome and Bootstrap icons */
.fa, .fas, .far, .fab, .fal, .fad,
.bi {
margin-right: 0.25rem;
}
/* Remove margin when icon is the last element (no text after) */
.fa:last-child, .fas:last-child, .far:last-child,
.fab:last-child, .fal:last-child, .fad:last-child,
.bi:last-child {
margin-right: 0;
}
/* Also remove margin when explicitly using me-0 class */
.fa.me-0, .fas.me-0, .far.me-0,
.fab.me-0, .fal.me-0, .fad.me-0,
.bi.me-0 {
margin-right: 0 !important;
}
.table {
background-color: var(--bs-table-bg);
color: var(--bs-body-color);
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: var(--bs-table-striped-bg);
}
th {
background-color: var(--bs-table-striped-bg);
}
footer {
background-color: var(--bs-footer-bg);
border-top-color: var(--bs-footer-border);
}
#ace-preview {
border-color: var(--ace-preview-border) !important;
}
/* Dark mode specific overrides */
body.dark-mode .form-control,
body.dark-mode .form-select {
background-color: var(--bs-card-bg);
border-color: var(--bs-border-color);
color: var(--bs-body-color);
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
background-color: var(--bs-card-bg);
border-color: #0d6efd;
color: var(--bs-body-color);
}
/* Dropdown menus */
body.dark-mode .dropdown-menu {
background-color: var(--bs-card-bg);
border-color: var(--bs-border-color);
}
body.dark-mode .dropdown-item {
color: var(--bs-body-color);
}
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
background-color: rgba(255, 255, 255, 0.1);
color: var(--bs-body-color);
}
body.dark-mode .dropdown-divider {
border-top-color: var(--bs-border-color);
}
body.dark-mode .dropdown-header {
color: rgba(255, 255, 255, 0.6);
}
/* Nav tabs */
body.dark-mode .nav-tabs {
border-bottom-color: var(--bs-border-color);
}
body.dark-mode .nav-tabs .nav-link {
color: var(--bs-body-color);
}
body.dark-mode .nav-tabs .nav-link:hover {
border-color: var(--bs-border-color);
background-color: rgba(255, 255, 255, 0.05);
}
body.dark-mode .nav-tabs .nav-link.active {
background-color: var(--bs-card-bg);
border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-card-bg);
color: var(--bs-body-color);
}
/* Alerts */
body.dark-mode .alert-info {
background-color: var(--alert-info-bg);
border-color: var(--alert-info-border);
color: var(--alert-info-color);
}
body.dark-mode .alert-warning {
background-color: var(--alert-warning-bg);
border-color: var(--alert-warning-border);
color: var(--alert-warning-color);
}
/* Text muted */
body.dark-mode .text-muted {
color: rgba(255, 255, 255, 0.6) !important;
}
/* Headings - ensure good contrast in dark mode */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .h1,
body.dark-mode .h2,
body.dark-mode .h3,
body.dark-mode .h4,
body.dark-mode .h5,
body.dark-mode .h6,
body.dark-mode .card-title {
color: #f0f0f0;
}
/* Lead text needs better contrast */
body.dark-mode .lead {
color: #d0d0d0;
}
/* Homepage headings specifically */
body.dark-mode .display-4,
body.dark-mode .display-5,
body.dark-mode .display-6 {
color: #f5f5f5;
}
/* Links in dark mode */
body.dark-mode a {
color: #66b3ff;
}
body.dark-mode a:hover {
color: #4da3ff;
}
/* Code blocks in dark mode */
body.dark-mode code {
background-color: rgba(255, 255, 255, 0.1);
color: #ff6b6b;
}
body.dark-mode pre {
background-color: #2d2d2d;
border-left-color: #0d6efd;
}
/* Buttons */
body.dark-mode .btn-secondary {
background-color: #495057;
border-color: #495057;
}
body.dark-mode .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
/* Compact layout styles */
/* Reduce padding and margins */
body.compact-layout .container-fluid {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
body.compact-layout .card {
margin-bottom: 1rem;
}
body.compact-layout .card-header {
padding: 0.5rem 1rem;
}
body.compact-layout .card-body {
padding: 1rem;
}
body.compact-layout .card-title {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
/* Reduce form spacing */
body.compact-layout .mb-3 {
margin-bottom: 0.75rem !important;
}
body.compact-layout .mt-4 {
margin-top: 1.5rem !important;
}
body.compact-layout .mt-5 {
margin-top: 2rem !important;
}
/* Compact navbar */
body.compact-layout .navbar {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
body.compact-layout .navbar-brand {
font-size: 1.1rem;
}
body.compact-layout .nav-link {
padding: 0.375rem 0.75rem;
}
body.compact-layout .dropdown-item {
padding: 0.25rem 1rem;
}
/* Compact footer */
body.compact-layout footer {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
/* Compact alerts */
body.compact-layout .alert {
padding: 0.5rem 1rem;
margin-bottom: 0.75rem;
}
/* Compact tabs */
body.compact-layout .nav-tabs {
margin-bottom: 1rem;
}
body.compact-layout .tab-content {
margin-top: 1rem !important;
}
/* Reduce main content area height */
body.compact-layout main {
min-height: calc(100vh - 40px - 40px); /* Reduced navbar and footer heights */
}
/* Compact form controls */
body.compact-layout .form-control,
body.compact-layout .form-select {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
body.compact-layout .form-label {
margin-bottom: 0.25rem;
font-size: 0.875rem;
}
body.compact-layout .form-text {
font-size: 0.75rem;
margin-top: 0.25rem;
}
body.compact-layout .form-check {
margin-bottom: 0.5rem;
}
/* Compact headings */
body.compact-layout h3 {
font-size: 1.5rem;
}
body.compact-layout h5 {
font-size: 1rem;
margin-bottom: 0.75rem;
margin-top: 1rem;
}
/* Compact editor preview */
body.compact-layout #ace-preview {
height: 250px !important;
}
body.compact-layout #preview-editor {
height: 200px !important;
}
/* Combination: Dark mode + Compact layout */
/* Any specific combination styles can go here */
/* ACE Editor Resizable Styles */
.ace-editor-wrapper {
position: relative;
border: 1px solid var(--bs-border-color);
border-radius: 4px;
margin-bottom: 1rem;
padding-bottom: 8px; /* Space for dragbar */
}
.ace-editor {
width: 100%;
min-height: 150px;
max-height: 800px;
border-radius: 4px 4px 0 0; /* Round top corners only */
position: relative;
z-index: 1;
}
/* Remove text-shadow from all ACE editor syntax highlighting */
.ace-editor .ace_keyword,
.ace-editor .ace_string,
.ace-editor .ace_comment,
.ace-editor .ace_constant,
.ace-editor .ace_variable,
.ace-editor .ace_function,
.ace-editor .ace_numeric,
.ace-editor .ace_support,
.ace-editor .ace_storage,
.ace-editor .ace_entity,
.ace-editor .ace_invalid,
.ace-editor .ace_meta,
.ace-editor .ace_markup,
.ace-editor * {
text-shadow: none !important;
}
.ace-editor-dragbar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 8px; /* Increased from 4px for easier grabbing */
background-color: #666;
cursor: row-resize;
opacity: 0.5; /* Increased from 0.3 for better visibility */
transition: opacity 0.2s, background-color 0.2s;
z-index: 100; /* High z-index to ensure it's on top */
border-radius: 0 0 4px 4px; /* Round bottom corners */
}
.ace-editor-dragbar:hover {
opacity: 0.7;
background-color: #0d6efd;
}
/* Dark mode adjustments */
body.dark-mode .ace-editor-dragbar {
background-color: #888;
}
body.dark-mode .ace-editor-dragbar:hover {
background-color: #0d6efd;
}
/* Visual feedback during drag */
.ace-editor-wrapper.dragging .ace-editor-dragbar {
opacity: 1;
background-color: #0d6efd;
}
/* Prevent text selection during drag */
.ace-editor-wrapper.dragging {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}