.speedreader-toggle {
background: #0073aa;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
margin-bottom: 15px;
font-weight: bold;
transition: background 0.3s;
display: block;
width: 100%;
text-align: center;
}
.speedreader-toggle:hover {
background: #005a87;
}
.speedreader-panel {
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
margin-bottom: 20px;
background: #f9f9f9;
/* Stała wysokość dla całego panelu */
min-height: 400px;
display: flex;
flex-direction: column;
}
.speedreader-controls {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-bottom: 15px;
flex-shrink: 0; /* Zapobiega zmniejszaniu */
}
.speedreader-controls button {
background: #0073aa;
color: white;
border: none;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
transition: background 0.3s;
}
.speedreader-controls button:hover:not(:disabled) {
background: #005a87;
}
.speedreader-controls button:disabled {
background: #cccccc;
cursor: not-allowed;
}
.speedreader-controls label {
display: flex;
align-items: center;
gap: 5px;
font-size: 14px;
white-space: nowrap;
}
.speedreader-display {
text-align: center;
margin: 20px 0;
/* Stała wysokość obszaru wyświetlania */
height: 120px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border: 1px solid #eee;
border-radius: 5px;
padding: 20px;
/* Zapobiega zmianom rozmiaru */
flex-shrink: 0;
overflow: hidden;
}
.speedreader-text {
font-size: 24px;
line-height: 1.5;
font-family: inherit;
/* Wymusza stałą linię bazową */
line-height: 1.2;
/* Zapewnia, że spacja ma taką samą wysokość jak litery */
display: inline-block;
min-height: 1.2em;
vertical-align: middle;
white-space: pre-wrap; /* Zachowuje spacje */
}
/* Specjalny styl dla spacji w otoczeniu */
.speedreader-space {
display: inline-block;
width: 0.3em;
position: relative;
white-space: pre; /* Zachowuje spację jako spację */
}
.speedreader-space::after {
content: "·";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ccc;
font-weight: normal;
opacity: 0.6;
}
/* Specjalny styl dla spacji która jest focus character */
.speedreader-space-char {
display: inline-block;
width: 0.3em;
position: relative;
white-space: pre; /* Zachowuje spację jako spację */
}
.speedreader-space-char::after {
content: "·";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #0073aa;
font-weight: bold;
font-size: 1.2em;
}
.speedreader-focus-char {
color: #0073aa;
font-weight: bold;
/* Zapewnia stabilność rozmiaru */
display: inline-block;
min-width: 0.5em;
text-align: center;
position: relative;
}
.speedreader-progress {
margin: 15px 0;
flex-shrink: 0;
}
.speedreader-progress-slider {
width: 100%;
height: 5px;
-webkit-appearance: none;
appearance: none;
background: #ddd;
outline: none;
border-radius: 5px;
}
.speedreader-progress-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #0073aa;
cursor: pointer;
}
.speedreader-progress-slider::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
background: #0073aa;
cursor: pointer;
border: none;
}
.speedreader-progress-text {
text-align: center;
font-size: 12px;
color: #666;
}
.speedreader-stats {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #666;
margin-top: 10px;
flex-shrink: 0;
}
/* Theme styles */
.speedreader-panel.theme-light {
background: #f9f9f9;
color: #333;
}
.speedreader-panel.theme-dark {
background: #333;
color: #f9f9f9;
}
.speedreader-panel.theme-dark .speedreader-display {
background: #222;
border-color: #444;
}
.speedreader-panel.theme-dark .speedreader-focus-char {
color: #4fc3f7;
}
.speedreader-panel.theme-dark .speedreader-space::after {
color: #666;
}
.speedreader-panel.theme-sepia {
background: #f5ecd9;
color: #5c4b37;
}
.speedreader-panel.theme-sepia .speedreader-display {
background: #f0e5cf;
border-color: #e0d0b8;
}
.speedreader-panel.theme-blue {
background: #e3f2fd;
color: #0d47a1;
}
.speedreader-panel.theme-blue .speedreader-display {
background: #bbdefb;
border-color: #90caf9;
}
/* Responsive design */
@media (max-width: 768px) {
.speedreader-panel {
min-height: 450px; /* Większa wysokość na mobile */
}
.speedreader-controls {
flex-direction: column;
align-items: stretch;
}
.speedreader-controls label {
justify-content: space-between;
}
.speedreader-text {
font-size: 20px;
}
.speedreader-stats {
flex-direction: column;
gap: 5px;
}
.speedreader-display {
height: 100px; /* Mniejsza wysokość na mobile */
}
}
/* Animation for text display */
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.speedreader-focus-char {
animation: blink 1s infinite;
}
.speedreader-error {
padding: 20px;
background: #ffebee;
border: 1px solid #f44336;
border-radius: 5px;
color: #c62828;
text-align: center;
margin: 10px 0;
}
.speedreader-panel .speedreader-error {
margin: 0;
}
.speedreader-focus-word {
color: #0073aa;
font-weight: bold;
font-size: 1.2em;
display: inline-block;
padding: 0 2px;
}
.speedreader-word-context {
color: #666;
opacity: 0.7;
font-size: 0.9em;
}
.speedreader-character-speed,
.speedreader-word-speed,
.speedreader-character-boundary,
.speedreader-word-boundary {
transition: all 0.3s ease;
}
.speedreader-panel .speedreader-controls label {
margin-bottom: 5px;
}
.speedreader-panel .speedreader-reading-mode {
margin-right: 10px;
}