feat: autoscroll standard, visualizzazione tag/date e OCR spaziale avanzato
- Aggiunto autoscroll standard con controllo velocità (V1-V10) e relativo toggle in settings. - Implementata la visualizzazione opzionale di tag e data aggiornamento nella lista canti. - Rinnovata la pagina 'Proponi Canto' con tastiera accordi (fondamentale + variazioni) e OCR spaziale potenziato per l'allineamento automatico degli accordi con il testo. - Ottimizzata la persistenza della modalità schermo intero.
This commit is contained in:
David Frassi
@@ -1,3 +1,113 @@
|
||||
:host {
|
||||
--ion-background-color: #1a1a2e !important;
|
||||
--ion-text-color: #ffffff !important;
|
||||
--ion-item-background: transparent !important;
|
||||
|
||||
ion-input, ion-textarea, ion-select {
|
||||
--color: #ffffff !important;
|
||||
color: #ffffff !important;
|
||||
--placeholder-color: rgba(255, 255, 255, 0.5) !important;
|
||||
}
|
||||
}
|
||||
|
||||
body.high-contrast :host {
|
||||
--ion-background-color: #ffffff !important;
|
||||
--ion-text-color: #000000 !important;
|
||||
--ion-item-background: #ffffff !important;
|
||||
|
||||
ion-input, ion-textarea, ion-select {
|
||||
--color: #000000 !important;
|
||||
color: #000000 !important;
|
||||
--placeholder-color: rgba(0, 0, 0, 0.6) !important;
|
||||
}
|
||||
|
||||
/* Labels must be black, not teal */
|
||||
ion-label {
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
/* Variations container layout in high contrast */
|
||||
.variations-container {
|
||||
background: #f5f5f5 !important;
|
||||
border: 1px solid #555555 !important;
|
||||
}
|
||||
}
|
||||
|
||||
body.high-contrast :host ::ng-deep {
|
||||
/* Default styles for high contrast buttons (no border by default, e.g. for fill="clear") */
|
||||
ion-button {
|
||||
--background: transparent !important;
|
||||
--color: #000000 !important;
|
||||
--color-activated: #000000 !important;
|
||||
--color-focused: #000000 !important;
|
||||
--color-hover: #000000 !important;
|
||||
--border-color: transparent !important;
|
||||
--border-width: 0px !important;
|
||||
border: none !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
/* Outlined buttons (tags, chords, action buttons) in high contrast get single gray border */
|
||||
ion-button[fill="outline"],
|
||||
.main-chords-toolbar ion-button,
|
||||
.variations-toolbar ion-button {
|
||||
--background: #ffffff !important;
|
||||
--border-color: #555555 !important;
|
||||
--border-width: 1px !important;
|
||||
--border-style: solid !important;
|
||||
}
|
||||
|
||||
/* Target specific Light-colored outlined buttons (inactive main chords) to overpower Ionic classes */
|
||||
ion-button.ion-color-light,
|
||||
.main-chords-toolbar ion-button.ion-color-light,
|
||||
.variations-toolbar ion-button.ion-color-light {
|
||||
--background: #ffffff !important;
|
||||
--color: #000000 !important;
|
||||
--color-activated: #000000 !important;
|
||||
--color-focused: #000000 !important;
|
||||
--color-hover: #000000 !important;
|
||||
--border-color: #555555 !important;
|
||||
--border-width: 1px !important;
|
||||
--border-style: solid !important;
|
||||
color: #000000 !important;
|
||||
border: none !important;
|
||||
|
||||
/* OVERRIDE IONIC COLOR BASE FOR COLOR="LIGHT" OUTLINE BUTTONS */
|
||||
--ion-color-base: #000000 !important;
|
||||
--ion-color-base-rgb: 0, 0, 0 !important;
|
||||
}
|
||||
|
||||
/* Solid buttons (active chords, save button) in high contrast */
|
||||
ion-button.button-solid,
|
||||
ion-button[fill="solid"],
|
||||
.send-btn {
|
||||
--background: var(--ion-color-secondary) !important;
|
||||
--color: #ffffff !important;
|
||||
--color-activated: #ffffff !important;
|
||||
--color-focused: #ffffff !important;
|
||||
--color-hover: #ffffff !important;
|
||||
--border-color: #555555 !important;
|
||||
--border-width: 1px !important;
|
||||
--border-style: solid !important;
|
||||
border: none !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
/* Textarea inside high contrast must have white background and black text */
|
||||
.content-textarea {
|
||||
--color: #000000 !important;
|
||||
color: #000000 !important;
|
||||
background: #ffffff !important;
|
||||
--background: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Force background of inputs and items to be white with single dark gray border in high contrast */
|
||||
.custom-input-item, .select-item {
|
||||
--background: #ffffff !important;
|
||||
border: 1px solid #555555 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-gradient {
|
||||
--background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
}
|
||||
@@ -142,81 +252,95 @@
|
||||
}
|
||||
|
||||
&.hc {
|
||||
border: 2px solid #ffffff;
|
||||
background: #000000;
|
||||
border: 2px solid #000000;
|
||||
background: #ffffff;
|
||||
|
||||
.editor-header {
|
||||
background: #ffffff;
|
||||
background: #f0f0f0;
|
||||
border-bottom: 2px solid #000000;
|
||||
span { color: #000000; }
|
||||
small { color: #333; font-weight: 600; }
|
||||
|
||||
ion-button {
|
||||
--color: #000000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.content-textarea {
|
||||
--color: #ffffff !important;
|
||||
color: #ffffff !important;
|
||||
background: #000000 !important;
|
||||
--color: #000000 !important;
|
||||
color: #000000 !important;
|
||||
background: #ffffff !important;
|
||||
--background: #ffffff !important;
|
||||
font-size: 18px !important;
|
||||
font-weight: 700 !important;
|
||||
caret-color: #ff00ff;
|
||||
caret-color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-textarea {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
--padding-start: 16px;
|
||||
--padding-end: 16px;
|
||||
--padding-top: 16px;
|
||||
--padding-bottom: 16px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.category-selectors {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.select-item {
|
||||
--background: rgba(255, 255, 255, 0.04);
|
||||
--border-radius: 12px;
|
||||
|
||||
ion-select {
|
||||
width: 100%;
|
||||
--padding-start: 0;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-input-item {
|
||||
--background: rgba(255, 255, 255, 0.04);
|
||||
--border-radius: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
ion-label {
|
||||
color: var(--ion-color-secondary) !important;
|
||||
font-family: 'Outfit', sans-serif;
|
||||
:host ::ng-deep {
|
||||
.content-textarea {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px !important;
|
||||
font-size: 12px !important;
|
||||
text-transform: uppercase;
|
||||
--color: #ffffff !important;
|
||||
color: #ffffff !important;
|
||||
--padding-start: 16px;
|
||||
--padding-end: 16px;
|
||||
--padding-top: 16px;
|
||||
--padding-bottom: 16px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
ion-input {
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea-item {
|
||||
--background: transparent;
|
||||
--padding-start: 0;
|
||||
--padding-end: 0;
|
||||
.category-selectors {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.select-item {
|
||||
--background: rgba(255, 255, 255, 0.08) !important;
|
||||
--border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
ion-select {
|
||||
width: 100%;
|
||||
--padding-start: 0;
|
||||
--color: #ffffff !important;
|
||||
color: #ffffff !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-input-item {
|
||||
--background: rgba(255, 255, 255, 0.08) !important;
|
||||
--border-radius: 12px;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
ion-label {
|
||||
color: #64ffda !important; /* High-contrast teal label */
|
||||
font-family: 'Outfit', sans-serif;
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px !important;
|
||||
font-size: 12px !important;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
ion-input {
|
||||
--color: #ffffff !important;
|
||||
color: #ffffff !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea-item {
|
||||
--background: transparent;
|
||||
--padding-start: 0;
|
||||
--padding-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@@ -233,51 +357,65 @@
|
||||
box-shadow: 0 8px 20px rgba(var(--ion-color-secondary-rgb), 0.3);
|
||||
}
|
||||
|
||||
/* POPOVER STYLING */
|
||||
.quick-popover {
|
||||
--width: 90%;
|
||||
--max-width: 400px;
|
||||
--background: #1e1e1e;
|
||||
--color: white;
|
||||
|
||||
.popover-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.popover-section {
|
||||
h6 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
color: var(--ion-color-medium);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-grid {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
|
||||
ion-button {
|
||||
margin: 0;
|
||||
--padding-start: 4px;
|
||||
--padding-end: 4px;
|
||||
font-size: 12px;
|
||||
height: 32px;
|
||||
--background: rgba(255,255,255,0.08);
|
||||
--color: white;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.chords-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
/* INTERACTIVE CHORDS TOOLBAR */
|
||||
.main-chords-toolbar {
|
||||
ion-button {
|
||||
--border-radius: 8px;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
min-width: 44px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.variations-container {
|
||||
background: rgba(var(--ion-color-secondary-rgb), 0.08);
|
||||
border: 1px solid rgba(var(--ion-color-secondary-rgb), 0.25);
|
||||
border-radius: 12px;
|
||||
padding: 8px 12px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 12px;
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(-4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.variations-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.variations-label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--ion-color-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
ion-button {
|
||||
--background: rgba(255, 255, 255, 0.12);
|
||||
--color: #ffffff;
|
||||
--border-radius: 6px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
height: 28px;
|
||||
|
||||
&:active {
|
||||
--background: var(--ion-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user