revengeday/cyber-circle-creator
revengeday/cyber-circle-creator
2
1
Fork 1
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

feat: Optimize the cyber score slider to fit better on mobile

Browse source
This commit is contained in:
Marco Kaiser 2024-11-17 08:15:40 +01:00
parent 6128fbacd6
commit 002e945bbe
Signed by: kaiserkiwi
GPG key ID: 664DEC0325FA5EAC
1 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
css/style.css
View file

@ -443,21 +443,25 @@ button:active {
/* Slider */ /* Slider */
.slider-container { .slider-container {
margin: 20px 0; margin: 20px 0;
text-align: center;
color: var(--cyber-font-color); color: var(--cyber-font-color);
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: center; text-align: center;
gap: 15px; gap: var(--spacing-sm) var(--spacing-md);
} }
.slider-container label { .slider-container label {
font-size: 1.2rem; font-size: 1.2rem;
@media (width < 568px) {
width: 100%;
}
} }
input[type="range"] { input[type="range"] {
-webkit-appearance: none; -webkit-appearance: none;
width: 70%; flex: 1;
margin: 10.5px 0; margin: 10.5px 0;
background-color: var(--cyber-faq-bg-color); background-color: var(--cyber-faq-bg-color);
} }
@ -539,7 +543,6 @@ input[type="range"]::-ms-thumb {
#sliderValueDisplay { #sliderValueDisplay {
font-size: 1.1rem; font-size: 1.1rem;
margin-left: 10px;
color: var(--cyber-primary-color); color: var(--cyber-primary-color);
font-weight: bold; font-weight: bold;
} }