696 lines
17 KiB
CSS
696 lines
17 KiB
CSS
/*
|
|
* PersoNotes - Multi-Theme System
|
|
* Supports: Material Dark (default), Monokai Dark, Dracula, One Dark, Solarized Dark, Nord
|
|
*/
|
|
|
|
/* ===========================
|
|
THEME: MATERIAL DARK (défaut)
|
|
=========================== */
|
|
:root,
|
|
[data-theme="material-dark"] {
|
|
--bg-primary: #1e1e1e;
|
|
--bg-secondary: #252525;
|
|
--bg-tertiary: #2d2d2d;
|
|
--bg-elevated: #323232;
|
|
|
|
--border-primary: #3e3e3e;
|
|
--border-secondary: #2a2a2a;
|
|
|
|
--text-primary: #e0e0e0;
|
|
--text-secondary: #b0b0b0;
|
|
--text-muted: #6e6e6e;
|
|
|
|
--accent-primary: #42a5f5;
|
|
--accent-primary-hover: #5ab3f7;
|
|
--accent-secondary: #29b6f6;
|
|
--accent-secondary-hover: #4fc3f7;
|
|
|
|
--success: #66bb6a;
|
|
--warning: #ffa726;
|
|
--error: #ef5350;
|
|
}
|
|
|
|
/* ===========================
|
|
THEME: MONOKAI DARK
|
|
=========================== */
|
|
[data-theme="monokai-dark"] {
|
|
--bg-primary: #272822;
|
|
--bg-secondary: #2d2e27;
|
|
--bg-tertiary: #3e3d32;
|
|
--bg-elevated: #49483e;
|
|
|
|
--border-primary: #49483e;
|
|
--border-secondary: #3e3d32;
|
|
|
|
--text-primary: #f8f8f2;
|
|
--text-secondary: #cfcfc2;
|
|
--text-muted: #75715e;
|
|
|
|
--accent-primary: #66d9ef;
|
|
--accent-primary-hover: #7ee5f7;
|
|
--accent-secondary: #88c070;
|
|
--accent-secondary-hover: #9acc84;
|
|
|
|
--success: #88c070;
|
|
--warning: #e6db74;
|
|
--error: #f92672;
|
|
}
|
|
|
|
/* ===========================
|
|
THEME: DRACULA
|
|
=========================== */
|
|
[data-theme="dracula"] {
|
|
--bg-primary: #282a36;
|
|
--bg-secondary: #2f3241;
|
|
--bg-tertiary: #373844;
|
|
--bg-elevated: #44475a;
|
|
|
|
--border-primary: #44475a;
|
|
--border-secondary: #373844;
|
|
|
|
--text-primary: #f8f8f2;
|
|
--text-secondary: #d6d6d6;
|
|
--text-muted: #6272a4;
|
|
|
|
--accent-primary: #8be9fd;
|
|
--accent-primary-hover: #9ff3ff;
|
|
--accent-secondary: #bd93f9;
|
|
--accent-secondary-hover: #cba6ff;
|
|
|
|
--success: #50fa7b;
|
|
--warning: #f1fa8c;
|
|
--error: #ff5555;
|
|
}
|
|
|
|
/* ===========================
|
|
THEME: ONE DARK
|
|
=========================== */
|
|
[data-theme="one-dark"] {
|
|
--bg-primary: #282c34;
|
|
--bg-secondary: #2c313a;
|
|
--bg-tertiary: #333842;
|
|
--bg-elevated: #3e4451;
|
|
|
|
--border-primary: #3e4451;
|
|
--border-secondary: #333842;
|
|
|
|
--text-primary: #abb2bf;
|
|
--text-secondary: #9ca3af;
|
|
--text-muted: #5c6370;
|
|
|
|
--accent-primary: #61afef;
|
|
--accent-primary-hover: #75bdf5;
|
|
--accent-secondary: #c678dd;
|
|
--accent-secondary-hover: #d48ae9;
|
|
|
|
--success: #98c379;
|
|
--warning: #e5c07b;
|
|
--error: #e06c75;
|
|
}
|
|
|
|
/* ===========================
|
|
THEME: SOLARIZED DARK
|
|
=========================== */
|
|
[data-theme="solarized-dark"] {
|
|
--bg-primary: #002b36;
|
|
--bg-secondary: #073642;
|
|
--bg-tertiary: #094454;
|
|
--bg-elevated: #0e5261;
|
|
|
|
--border-primary: #0e5261;
|
|
--border-secondary: #094454;
|
|
|
|
--text-primary: #839496;
|
|
--text-secondary: #93a1a1;
|
|
--text-muted: #586e75;
|
|
|
|
--accent-primary: #268bd2;
|
|
--accent-primary-hover: #4098d9;
|
|
--accent-secondary: #2aa198;
|
|
--accent-secondary-hover: #3eb3a8;
|
|
|
|
--success: #859900;
|
|
--warning: #b58900;
|
|
--error: #dc322f;
|
|
}
|
|
|
|
/* ===========================
|
|
THEME: NORD
|
|
=========================== */
|
|
[data-theme="nord"] {
|
|
--bg-primary: #2e3440;
|
|
--bg-secondary: #3b4252;
|
|
--bg-tertiary: #434c5e;
|
|
--bg-elevated: #4c566a;
|
|
|
|
--border-primary: #4c566a;
|
|
--border-secondary: #434c5e;
|
|
|
|
--text-primary: #eceff4;
|
|
--text-secondary: #d8dee9;
|
|
--text-muted: #616e88;
|
|
|
|
--accent-primary: #88c0d0;
|
|
--accent-primary-hover: #9dcadb;
|
|
--accent-secondary: #81a1c1;
|
|
--accent-secondary-hover: #94b0cc;
|
|
|
|
--success: #a3be8c;
|
|
--warning: #ebcb8b;
|
|
--error: #bf616a;
|
|
}
|
|
|
|
/* ===========================
|
|
THEME: CATPPUCCIN MOCHA
|
|
=========================== */
|
|
[data-theme="catppuccin"] {
|
|
--bg-primary: #1e1e2e;
|
|
--bg-secondary: #181825;
|
|
--bg-tertiary: #313244;
|
|
--bg-elevated: #45475a;
|
|
|
|
--border-primary: #45475a;
|
|
--border-secondary: #313244;
|
|
|
|
--text-primary: #cdd6f4;
|
|
--text-secondary: #bac2de;
|
|
--text-muted: #6c7086;
|
|
|
|
--accent-primary: #89b4fa;
|
|
--accent-primary-hover: #a6c8ff;
|
|
--accent-secondary: #f5c2e7;
|
|
--accent-secondary-hover: #f9d5ee;
|
|
|
|
--success: #a6e3a1;
|
|
--warning: #f9e2af;
|
|
--error: #f38ba8;
|
|
}
|
|
|
|
/* ===========================
|
|
THEME: EVERFOREST DARK
|
|
=========================== */
|
|
[data-theme="everforest"] {
|
|
--bg-primary: #2d353b;
|
|
--bg-secondary: #272e33;
|
|
--bg-tertiary: #343f44;
|
|
--bg-elevated: #3d484d;
|
|
|
|
--border-primary: #3d484d;
|
|
--border-secondary: #343f44;
|
|
|
|
--text-primary: #d3c6aa;
|
|
--text-secondary: #b4a990;
|
|
--text-muted: #7a8478;
|
|
|
|
--accent-primary: #7fbbb3;
|
|
--accent-primary-hover: #93c9c1;
|
|
--accent-secondary: #a7c080;
|
|
--accent-secondary-hover: #b8cc94;
|
|
|
|
--success: #a7c080;
|
|
--warning: #dbbc7f;
|
|
--error: #e67e80;
|
|
}
|
|
|
|
/* ===========================
|
|
BOUTONS D'ACTION DE LA SIDEBAR
|
|
=========================== */
|
|
.sidebar-action-btn {
|
|
width: 100%;
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-primary);
|
|
border-radius: var(--radius-md);
|
|
color: var(--text-primary);
|
|
padding: var(--spacing-md);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-sm);
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
.sidebar-action-btn:hover {
|
|
background: var(--bg-elevated);
|
|
border-color: var(--accent-primary);
|
|
color: var(--accent-primary);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
/* Style spécifique pour le bouton paramètres (avec animation) */
|
|
.theme-settings-btn {
|
|
width: 100%;
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-primary);
|
|
border-radius: var(--radius-md);
|
|
color: var(--text-primary);
|
|
padding: var(--spacing-md);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-sm);
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
.theme-settings-btn:hover {
|
|
background: var(--bg-elevated);
|
|
border-color: var(--accent-primary);
|
|
color: var(--accent-primary);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.theme-settings-btn svg {
|
|
animation: rotate 2s linear infinite;
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
.theme-settings-btn:hover svg {
|
|
animation-play-state: running;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* ===========================
|
|
MODALE DE SÉLECTION DE THÈME
|
|
=========================== */
|
|
#theme-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.theme-modal-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.theme-modal-content {
|
|
position: relative;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--accent-primary);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-xl);
|
|
max-width: 600px;
|
|
width: 90%;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
box-shadow: var(--shadow-lg), var(--shadow-glow);
|
|
animation: slideUp 0.3s ease;
|
|
z-index: 1;
|
|
}
|
|
|
|
.theme-modal-content h2 {
|
|
margin: 0 0 var(--spacing-lg) 0;
|
|
color: var(--text-primary);
|
|
font-size: 1.4rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.theme-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: var(--spacing-md);
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.theme-card {
|
|
background: var(--bg-tertiary);
|
|
border: 2px solid var(--border-primary);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--spacing-md);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
position: relative;
|
|
}
|
|
|
|
.theme-card:hover {
|
|
border-color: var(--accent-primary);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.theme-card.active {
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.2);
|
|
}
|
|
|
|
.theme-card.active::before {
|
|
content: '✓';
|
|
position: absolute;
|
|
top: var(--spacing-xs);
|
|
right: var(--spacing-xs);
|
|
background: var(--accent-primary);
|
|
color: white;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.theme-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.theme-card-icon {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.theme-card-name {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.theme-preview {
|
|
display: flex;
|
|
gap: var(--spacing-xs);
|
|
margin-bottom: var(--spacing-sm);
|
|
height: 40px;
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.theme-preview-color {
|
|
flex: 1;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.theme-card:hover .theme-preview-color {
|
|
transform: scaleY(1.1);
|
|
}
|
|
|
|
.theme-description {
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Couleurs de prévisualisation pour chaque thème */
|
|
.theme-card[data-theme="material-dark"] .theme-preview-color:nth-child(1) { background: #1e1e1e; }
|
|
.theme-card[data-theme="material-dark"] .theme-preview-color:nth-child(2) { background: #42a5f5; }
|
|
.theme-card[data-theme="material-dark"] .theme-preview-color:nth-child(3) { background: #29b6f6; }
|
|
.theme-card[data-theme="material-dark"] .theme-preview-color:nth-child(4) { background: #e0e0e0; }
|
|
|
|
.theme-card[data-theme="monokai-dark"] .theme-preview-color:nth-child(1) { background: #272822; }
|
|
.theme-card[data-theme="monokai-dark"] .theme-preview-color:nth-child(2) { background: #66d9ef; }
|
|
.theme-card[data-theme="monokai-dark"] .theme-preview-color:nth-child(3) { background: #88c070; }
|
|
.theme-card[data-theme="monokai-dark"] .theme-preview-color:nth-child(4) { background: #f8f8f2; }
|
|
|
|
.theme-card[data-theme="dracula"] .theme-preview-color:nth-child(1) { background: #282a36; }
|
|
.theme-card[data-theme="dracula"] .theme-preview-color:nth-child(2) { background: #8be9fd; }
|
|
.theme-card[data-theme="dracula"] .theme-preview-color:nth-child(3) { background: #bd93f9; }
|
|
.theme-card[data-theme="dracula"] .theme-preview-color:nth-child(4) { background: #f8f8f2; }
|
|
|
|
.theme-card[data-theme="one-dark"] .theme-preview-color:nth-child(1) { background: #282c34; }
|
|
.theme-card[data-theme="one-dark"] .theme-preview-color:nth-child(2) { background: #61afef; }
|
|
.theme-card[data-theme="one-dark"] .theme-preview-color:nth-child(3) { background: #c678dd; }
|
|
.theme-card[data-theme="one-dark"] .theme-preview-color:nth-child(4) { background: #abb2bf; }
|
|
|
|
.theme-card[data-theme="solarized-dark"] .theme-preview-color:nth-child(1) { background: #002b36; }
|
|
.theme-card[data-theme="solarized-dark"] .theme-preview-color:nth-child(2) { background: #268bd2; }
|
|
.theme-card[data-theme="solarized-dark"] .theme-preview-color:nth-child(3) { background: #2aa198; }
|
|
.theme-card[data-theme="solarized-dark"] .theme-preview-color:nth-child(4) { background: #839496; }
|
|
|
|
.theme-card[data-theme="nord"] .theme-preview-color:nth-child(1) { background: #2e3440; }
|
|
.theme-card[data-theme="nord"] .theme-preview-color:nth-child(2) { background: #88c0d0; }
|
|
.theme-card[data-theme="nord"] .theme-preview-color:nth-child(3) { background: #81a1c1; }
|
|
.theme-card[data-theme="nord"] .theme-preview-color:nth-child(4) { background: #eceff4; }
|
|
|
|
.theme-card[data-theme="catppuccin"] .theme-preview-color:nth-child(1) { background: #1e1e2e; }
|
|
.theme-card[data-theme="catppuccin"] .theme-preview-color:nth-child(2) { background: #89b4fa; }
|
|
.theme-card[data-theme="catppuccin"] .theme-preview-color:nth-child(3) { background: #f5c2e7; }
|
|
.theme-card[data-theme="catppuccin"] .theme-preview-color:nth-child(4) { background: #cdd6f4; }
|
|
|
|
.theme-card[data-theme="everforest"] .theme-preview-color:nth-child(1) { background: #2d353b; }
|
|
.theme-card[data-theme="everforest"] .theme-preview-color:nth-child(2) { background: #7fbbb3; }
|
|
.theme-card[data-theme="everforest"] .theme-preview-color:nth-child(3) { background: #a7c080; }
|
|
.theme-card[data-theme="everforest"] .theme-preview-color:nth-child(4) { background: #d3c6aa; }
|
|
|
|
.theme-modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--spacing-sm);
|
|
margin-top: var(--spacing-lg);
|
|
padding-top: var(--spacing-md);
|
|
border-top: 1px solid var(--border-primary);
|
|
}
|
|
|
|
/* Onglets de paramètres */
|
|
.settings-tabs {
|
|
display: flex;
|
|
gap: var(--spacing-sm);
|
|
margin-bottom: var(--spacing-lg);
|
|
border-bottom: 2px solid var(--border-primary);
|
|
}
|
|
|
|
.settings-tab {
|
|
background: transparent;
|
|
border: none;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
color: var(--text-secondary);
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -2px;
|
|
}
|
|
|
|
.settings-tab:hover {
|
|
color: var(--text-primary);
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.settings-tab.active {
|
|
color: var(--accent-primary);
|
|
border-bottom-color: var(--accent-primary);
|
|
}
|
|
|
|
.settings-section {
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
|
|
/* Grille de polices */
|
|
.font-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: var(--spacing-md);
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.font-card {
|
|
background: var(--bg-tertiary);
|
|
border: 2px solid var(--border-primary);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--spacing-md);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
position: relative;
|
|
}
|
|
|
|
.font-card:hover {
|
|
border-color: var(--accent-primary);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.font-card.active {
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.2);
|
|
}
|
|
|
|
.font-card.active::before {
|
|
content: '✓';
|
|
position: absolute;
|
|
top: var(--spacing-xs);
|
|
right: var(--spacing-xs);
|
|
background: var(--accent-primary);
|
|
color: white;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.font-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.font-card-icon {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.font-card-name {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.font-preview {
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-primary);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--spacing-md);
|
|
margin-bottom: var(--spacing-sm);
|
|
font-size: 1.1rem;
|
|
text-align: center;
|
|
color: var(--text-primary);
|
|
min-height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.font-description {
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Sélecteur de taille de police */
|
|
.font-size-selector {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.font-size-option {
|
|
background: var(--bg-tertiary);
|
|
border: 2px solid var(--border-primary);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--spacing-md);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.font-size-option:hover {
|
|
border-color: var(--accent-primary);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.font-size-option.active {
|
|
border-color: var(--accent-primary);
|
|
background: rgba(66, 165, 245, 0.1);
|
|
box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.2);
|
|
}
|
|
|
|
.size-label {
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.font-size-option.active .size-label {
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
.size-preview {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
line-height: 1;
|
|
}
|
|
|
|
/* ===========================
|
|
TOGGLE SWITCH (pour Mode Vim)
|
|
=========================== */
|
|
.toggle-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 50px;
|
|
height: 26px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.toggle-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.toggle-slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: var(--bg-tertiary);
|
|
transition: 0.3s;
|
|
border-radius: 26px;
|
|
border: 1px solid var(--border-primary);
|
|
}
|
|
|
|
.toggle-slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 18px;
|
|
width: 18px;
|
|
left: 4px;
|
|
bottom: 3px;
|
|
background-color: var(--text-muted);
|
|
transition: 0.3s;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.toggle-switch input:checked + .toggle-slider {
|
|
background-color: var(--accent-primary);
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
.toggle-switch input:checked + .toggle-slider:before {
|
|
transform: translateX(24px);
|
|
background-color: white;
|
|
}
|
|
|
|
.toggle-switch input:focus + .toggle-slider {
|
|
box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.2);
|
|
}
|