forked from hesabix/arc
433 lines
12 KiB
CSS
Executable file
433 lines
12 KiB
CSS
Executable file
/*
|
|
* Hesabix API - Swagger UI Dark Mode
|
|
* نسخه: 1.0.0
|
|
* توضیحات: حالت تیره (Dark Mode) برای Swagger UI
|
|
*/
|
|
|
|
/* ==================== متغیرهای Dark Mode ==================== */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--hesabix-dark-bg: #1a202c;
|
|
--hesabix-dark-bg-secondary: #2d3748;
|
|
--hesabix-dark-bg-tertiary: #4a5568;
|
|
--hesabix-dark-text: #e2e8f0;
|
|
--hesabix-dark-text-muted: #a0aec0;
|
|
--hesabix-dark-border: #4a5568;
|
|
--hesabix-dark-primary: #4a7ab8;
|
|
--hesabix-dark-primary-hover: #5a8fd4;
|
|
--hesabix-dark-code-bg: #2d3748;
|
|
--hesabix-dark-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* ==================== پسزمینه اصلی ==================== */
|
|
.swagger-ui {
|
|
background-color: var(--hesabix-dark-bg);
|
|
color: var(--hesabix-dark-text);
|
|
}
|
|
|
|
/* ==================== Topbar ==================== */
|
|
.swagger-ui .topbar {
|
|
background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
|
|
border-bottom: 1px solid var(--hesabix-dark-border);
|
|
}
|
|
|
|
/* ==================== بخش اطلاعات ==================== */
|
|
.swagger-ui .info {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.swagger-ui .info .title {
|
|
color: var(--hesabix-dark-text);
|
|
}
|
|
|
|
.swagger-ui .info .description {
|
|
color: var(--hesabix-dark-text-muted);
|
|
}
|
|
|
|
.swagger-ui .info .base-url {
|
|
color: var(--hesabix-dark-text);
|
|
background-color: var(--hesabix-dark-bg-secondary);
|
|
border: 1px solid var(--hesabix-dark-border);
|
|
}
|
|
|
|
/* ==================== Operation Blocks ==================== */
|
|
.swagger-ui .opblock {
|
|
background-color: var(--hesabix-dark-bg-secondary);
|
|
border-color: var(--hesabix-dark-border);
|
|
box-shadow: var(--hesabix-dark-shadow);
|
|
}
|
|
|
|
.swagger-ui .opblock.opblock-get {
|
|
background: rgba(74, 122, 184, 0.1);
|
|
border-color: var(--hesabix-dark-primary);
|
|
}
|
|
|
|
.swagger-ui .opblock.opblock-post {
|
|
background: rgba(72, 187, 120, 0.1);
|
|
border-color: #48bb78;
|
|
}
|
|
|
|
.swagger-ui .opblock.opblock-put {
|
|
background: rgba(237, 137, 54, 0.1);
|
|
border-color: #ed8936;
|
|
}
|
|
|
|
.swagger-ui .opblock.opblock-delete {
|
|
background: rgba(245, 101, 101, 0.1);
|
|
border-color: #f56565;
|
|
}
|
|
|
|
.swagger-ui .opblock.opblock-patch {
|
|
background: rgba(102, 126, 234, 0.1);
|
|
border-color: #667eea;
|
|
}
|
|
|
|
/* ==================== Summary ==================== */
|
|
.swagger-ui .opblock-summary {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.swagger-ui .opblock-summary-path {
|
|
color: var(--hesabix-dark-text);
|
|
}
|
|
|
|
.swagger-ui .opblock-summary-description {
|
|
color: var(--hesabix-dark-text-muted);
|
|
}
|
|
|
|
/* ==================== Operation Details ==================== */
|
|
.swagger-ui .opblock-body {
|
|
background-color: var(--hesabix-dark-bg-tertiary);
|
|
border-top: 1px solid var(--hesabix-dark-border);
|
|
}
|
|
|
|
.swagger-ui .opblock-description-wrapper,
|
|
.swagger-ui .opblock-title_normal {
|
|
color: var(--hesabix-dark-text-muted);
|
|
}
|
|
|
|
/* ==================== Parameters & Tables ==================== */
|
|
.swagger-ui table thead tr {
|
|
background-color: var(--hesabix-dark-bg-tertiary);
|
|
color: var(--hesabix-dark-text);
|
|
border-bottom: 1px solid var(--hesabix-dark-border);
|
|
}
|
|
|
|
.swagger-ui table th,
|
|
.swagger-ui table td {
|
|
border-color: var(--hesabix-dark-border);
|
|
color: var(--hesabix-dark-text);
|
|
}
|
|
|
|
.swagger-ui table tbody tr:nth-child(even) {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.swagger-ui table tbody tr:hover {
|
|
background-color: rgba(74, 122, 184, 0.1);
|
|
}
|
|
|
|
/* ==================== Input Fields ==================== */
|
|
.swagger-ui input[type="text"],
|
|
.swagger-ui input[type="password"],
|
|
.swagger-ui input[type="email"],
|
|
.swagger-ui select,
|
|
.swagger-ui textarea {
|
|
background-color: var(--hesabix-dark-bg-tertiary);
|
|
border-color: var(--hesabix-dark-border);
|
|
color: var(--hesabix-dark-text);
|
|
}
|
|
|
|
.swagger-ui input[type="text"]:focus,
|
|
.swagger-ui input[type="password"]:focus,
|
|
.swagger-ui input[type="email"]:focus,
|
|
.swagger-ui select:focus,
|
|
.swagger-ui textarea:focus {
|
|
border-color: var(--hesabix-dark-primary);
|
|
background-color: var(--hesabix-dark-bg-secondary);
|
|
}
|
|
|
|
/* ==================== دکمهها ==================== */
|
|
.swagger-ui .btn {
|
|
background-color: var(--hesabix-dark-primary);
|
|
color: #ffffff;
|
|
border-color: var(--hesabix-dark-primary);
|
|
}
|
|
|
|
.swagger-ui .btn:hover {
|
|
background-color: var(--hesabix-dark-primary-hover);
|
|
border-color: var(--hesabix-dark-primary-hover);
|
|
}
|
|
|
|
.swagger-ui .btn.cancel {
|
|
background-color: var(--hesabix-dark-bg-tertiary);
|
|
border-color: var(--hesabix-dark-border);
|
|
}
|
|
|
|
/* ==================== کدها ==================== */
|
|
.swagger-ui code {
|
|
background-color: var(--hesabix-dark-code-bg);
|
|
color: var(--hesabix-dark-primary);
|
|
border: 1px solid var(--hesabix-dark-border);
|
|
}
|
|
|
|
.swagger-ui pre {
|
|
background-color: #1e293b;
|
|
border: 1px solid var(--hesabix-dark-border);
|
|
}
|
|
|
|
.swagger-ui .model-example,
|
|
.swagger-ui .highlight-code {
|
|
background-color: var(--hesabix-dark-bg-secondary);
|
|
border-color: var(--hesabix-dark-border);
|
|
}
|
|
|
|
/* ==================== Models (Schema) ==================== */
|
|
.swagger-ui .model {
|
|
color: var(--hesabix-dark-text);
|
|
}
|
|
|
|
.swagger-ui .model-box {
|
|
background-color: var(--hesabix-dark-bg-secondary);
|
|
border-color: var(--hesabix-dark-border);
|
|
}
|
|
|
|
.swagger-ui .model-title {
|
|
color: var(--hesabix-dark-primary);
|
|
}
|
|
|
|
.swagger-ui .property-row {
|
|
border-bottom-color: var(--hesabix-dark-border);
|
|
}
|
|
|
|
/* ==================== Responses ==================== */
|
|
.swagger-ui .responses-wrapper {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.swagger-ui .response {
|
|
background-color: var(--hesabix-dark-bg-secondary);
|
|
border: 1px solid var(--hesabix-dark-border);
|
|
}
|
|
|
|
.swagger-ui .response-col_description {
|
|
color: var(--hesabix-dark-text-muted);
|
|
}
|
|
|
|
/* ==================== Authorization Modal ==================== */
|
|
.swagger-ui .dialog-ux {
|
|
background-color: var(--hesabix-dark-bg);
|
|
border: 1px solid var(--hesabix-dark-border);
|
|
}
|
|
|
|
.swagger-ui .dialog-ux .modal-ux {
|
|
background-color: var(--hesabix-dark-bg);
|
|
}
|
|
|
|
.swagger-ui .dialog-ux .modal-ux-header {
|
|
background-color: var(--hesabix-dark-bg-secondary);
|
|
border-bottom: 1px solid var(--hesabix-dark-border);
|
|
}
|
|
|
|
.swagger-ui .dialog-ux .modal-ux-header h3 {
|
|
color: var(--hesabix-dark-text);
|
|
}
|
|
|
|
.swagger-ui .dialog-ux .modal-ux-content {
|
|
background-color: var(--hesabix-dark-bg);
|
|
color: var(--hesabix-dark-text);
|
|
}
|
|
|
|
/* ==================== Filter (جستجو) ==================== */
|
|
.swagger-ui .filter .operation-filter-input {
|
|
background-color: var(--hesabix-dark-bg-tertiary);
|
|
border-color: var(--hesabix-dark-border);
|
|
color: var(--hesabix-dark-text);
|
|
}
|
|
|
|
.swagger-ui .filter .operation-filter-input::placeholder {
|
|
color: var(--hesabix-dark-text-muted);
|
|
}
|
|
|
|
/* ==================== Tags ==================== */
|
|
.swagger-ui .opblock-tag {
|
|
color: var(--hesabix-dark-text);
|
|
border-bottom-color: var(--hesabix-dark-primary);
|
|
}
|
|
|
|
.swagger-ui .opblock-tag:hover {
|
|
color: var(--hesabix-dark-primary-hover);
|
|
}
|
|
|
|
/* ==================== Links ==================== */
|
|
.swagger-ui a {
|
|
color: var(--hesabix-dark-primary);
|
|
}
|
|
|
|
.swagger-ui a:hover {
|
|
color: var(--hesabix-dark-primary-hover);
|
|
}
|
|
|
|
/* ==================== Markdown ==================== */
|
|
.swagger-ui .markdown h1,
|
|
.swagger-ui .markdown h2,
|
|
.swagger-ui .markdown h3,
|
|
.swagger-ui .markdown h4,
|
|
.swagger-ui .markdown h5 {
|
|
color: var(--hesabix-dark-text);
|
|
}
|
|
|
|
.swagger-ui .markdown p {
|
|
color: var(--hesabix-dark-text-muted);
|
|
}
|
|
|
|
/* ==================== Scrollbar ==================== */
|
|
.swagger-ui ::-webkit-scrollbar-track {
|
|
background: var(--hesabix-dark-bg-secondary);
|
|
}
|
|
|
|
.swagger-ui ::-webkit-scrollbar-thumb {
|
|
background: var(--hesabix-dark-bg-tertiary);
|
|
}
|
|
|
|
.swagger-ui ::-webkit-scrollbar-thumb:hover {
|
|
background: var(--hesabix-dark-border);
|
|
}
|
|
|
|
/* ==================== Errors ==================== */
|
|
.swagger-ui .errors-wrapper {
|
|
background-color: rgba(245, 101, 101, 0.1);
|
|
border-color: #f56565;
|
|
}
|
|
|
|
.swagger-ui .errors-wrapper h4 {
|
|
color: #fc8181;
|
|
}
|
|
|
|
/* ==================== Information Container ==================== */
|
|
.swagger-ui .information-container {
|
|
background-color: var(--hesabix-dark-bg-secondary);
|
|
border-color: var(--hesabix-dark-border);
|
|
}
|
|
|
|
/* ==================== Schemes ==================== */
|
|
.swagger-ui .schemes {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.swagger-ui .schemes select {
|
|
background-color: var(--hesabix-dark-bg-tertiary);
|
|
border-color: var(--hesabix-dark-border);
|
|
color: var(--hesabix-dark-text);
|
|
}
|
|
|
|
/* ==================== Try it out ==================== */
|
|
.swagger-ui .try-out {
|
|
background-color: var(--hesabix-dark-bg-secondary);
|
|
}
|
|
|
|
.swagger-ui .try-out__btn {
|
|
background-color: var(--hesabix-dark-primary);
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* ==================== Download Button ==================== */
|
|
.swagger-ui .download-contents {
|
|
background-color: var(--hesabix-dark-primary);
|
|
}
|
|
|
|
.swagger-ui .download-contents:hover {
|
|
background-color: var(--hesabix-dark-primary-hover);
|
|
}
|
|
|
|
/* ==================== Servers ==================== */
|
|
.swagger-ui .servers {
|
|
background-color: var(--hesabix-dark-bg-secondary);
|
|
border: 1px solid var(--hesabix-dark-border);
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.swagger-ui .servers label {
|
|
color: var(--hesabix-dark-text);
|
|
}
|
|
|
|
.swagger-ui .servers select {
|
|
background-color: var(--hesabix-dark-bg-tertiary);
|
|
color: var(--hesabix-dark-text);
|
|
}
|
|
|
|
/* ==================== لوگو در Dark Mode ==================== */
|
|
.swagger-ui .topbar .topbar-wrapper::before {
|
|
/* لوگو را برای Dark Mode روشنتر کن */
|
|
filter: brightness(0) invert(1) brightness(0.9);
|
|
}
|
|
|
|
/* ==================== نوار بارگذاری ==================== */
|
|
.swagger-ui .loading-container .loading {
|
|
border-top-color: var(--hesabix-dark-primary);
|
|
}
|
|
}
|
|
|
|
/* ==================== Dark Mode دستی با کلاس ==================== */
|
|
/* اگر کاربر دستی Dark Mode را فعال کند */
|
|
.swagger-ui.dark-mode {
|
|
background-color: var(--hesabix-dark-bg, #1a202c);
|
|
color: var(--hesabix-dark-text, #e2e8f0);
|
|
}
|
|
|
|
.swagger-ui.dark-mode .topbar {
|
|
background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
|
|
}
|
|
|
|
.swagger-ui.dark-mode .opblock {
|
|
background-color: var(--hesabix-dark-bg-secondary, #2d3748);
|
|
border-color: var(--hesabix-dark-border, #4a5568);
|
|
}
|
|
|
|
/* ==================== Toggle Button برای Dark Mode (اختیاری) ==================== */
|
|
.dark-mode-toggle {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background-color: #4a7ab8;
|
|
color: #ffffff;
|
|
border: none;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
transition: all 0.3s ease;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.dark-mode-toggle:hover {
|
|
background-color: #5a8fd4;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.dark-mode-toggle:focus {
|
|
outline: 3px solid #4a7ab8;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ==================== انیمیشن برای تغییر به Dark Mode ==================== */
|
|
.swagger-ui {
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.swagger-ui .opblock,
|
|
.swagger-ui .model-box,
|
|
.swagger-ui table,
|
|
.swagger-ui input,
|
|
.swagger-ui select,
|
|
.swagger-ui textarea {
|
|
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
|