feat: add find-in-page functionality with keyboard shortcuts, regex support, and match navigation
This commit is contained in:
@@ -3868,3 +3868,223 @@ body.popup-mode .content-area {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 32px 16px; color: var(--text-muted); gap: 8px; font-size: 13px;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Find in Page
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
/* Animation d'entrée */
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Barre principale */
|
||||
.find-in-page-bar {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 12px 16px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
||||
z-index: 1000;
|
||||
animation: slideUp 200ms ease;
|
||||
max-width: calc(100vw - 40px);
|
||||
}
|
||||
|
||||
.find-in-page-bar[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Contenu de la barre */
|
||||
.find-in-page-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Icône de recherche */
|
||||
.find-icon {
|
||||
color: var(--text-secondary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Input de recherche */
|
||||
#find-input {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
outline: none;
|
||||
transition: border-color 200ms ease;
|
||||
}
|
||||
|
||||
#find-input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Compteur d'occurrences */
|
||||
.find-counter {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
min-width: 90px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Boutons de navigation */
|
||||
.find-nav-buttons {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Boutons génériques */
|
||||
.find-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 150ms ease;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.find-btn:hover:not(:disabled) {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
background: color-mix(in srgb, var(--accent) 10%, var(--bg-primary));
|
||||
}
|
||||
|
||||
.find-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Options */
|
||||
.find-options {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
border-left: 1px solid var(--border);
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.find-option-btn {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.find-option-btn[aria-pressed="true"] {
|
||||
border-color: var(--accent);
|
||||
background: color-mix(in srgb, var(--accent) 20%, var(--bg-primary));
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.find-option-text {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Bouton fermer */
|
||||
.find-close {
|
||||
border-left: 1px solid var(--border);
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.find-close:hover {
|
||||
background: var(--danger-bg);
|
||||
border-color: var(--danger);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
/* Message d'erreur */
|
||||
.find-error {
|
||||
margin-top: 8px;
|
||||
padding: 6px 10px;
|
||||
background: var(--danger-bg);
|
||||
border: 1px solid var(--danger);
|
||||
border-radius: 6px;
|
||||
color: var(--danger);
|
||||
font-size: 0.75rem;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.find-error[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Highlights dans le contenu */
|
||||
.find-highlight {
|
||||
background: rgba(255, 235, 59, 0.4);
|
||||
padding: 0 2px;
|
||||
border-radius: 2px;
|
||||
transition: background 150ms ease;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .find-highlight {
|
||||
background: rgba(255, 193, 7, 0.35);
|
||||
}
|
||||
|
||||
.find-highlight-active {
|
||||
background: rgba(255, 193, 7, 0.7);
|
||||
box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.3);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .find-highlight-active {
|
||||
background: rgba(255, 193, 7, 0.6);
|
||||
box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.4);
|
||||
}
|
||||
|
||||
/* Responsive mobile */
|
||||
@media (max-width: 768px) {
|
||||
.find-in-page-bar {
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
max-width: none;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.find-in-page-content {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
#find-input {
|
||||
min-width: 120px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.find-counter {
|
||||
font-size: 0.7rem;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.find-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.find-options {
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user