sugary/LarpixClient
1
0
Fork 0
forked from olcxjas-softworks/LarpixClient
Code Pull requests Activity

added style for select

Browse source
This commit is contained in:
olcxja 2026-08-22 09:22:22 +02:00
commit c0a645b4e5
6 changed files with 268 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

95
webroot/style.css
View file

@ -1181,3 +1181,98 @@ input:checked + .toggle-slider:before {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
/* Custom Select */
.custom-select {
position: relative;
border-radius: 0.8rem;
background-color: rgba(255, 255, 255, 0.05);
margin: var(--button-margin);
height: var(--button-height);
display: flex;
cursor: pointer;
align-items: center;
border: var(--border-width) solid var(--light-border-color);
color: var(--text-color);
width: calc(100% - (var(--button-margin) * 2));
outline: none;
user-select: none;
z-index: 2; /* to appear above other elements if necessary */
}
.custom-select-value {
padding: var(--button-margin);
padding-left: calc(var(--button-margin) * 2);
padding-right: 1.5rem;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.custom-select-value span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.custom-select .chevron {
transition: transform 0.2s ease;
}
.custom-select.open .chevron {
transform: rotate(180deg);
}
.custom-select-options {
position: absolute;
top: calc(100% + 0.4rem);
left: 0;
width: 100%;
background-color: var(--main-bg-color);
border: var(--border-width) solid var(--light-border-color);
border-radius: 0.8rem;
max-height: 15rem;
overflow-y: auto;
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
padding: 0.4rem;
pointer-events: none;
}
.custom-select.open .custom-select-options {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.custom-select-option {
padding: var(--button-margin) calc(var(--button-margin) * 2);
height: var(--button-height);
display: flex;
align-items: center;
border-radius: 0.8rem;
background-color: transparent;
cursor: pointer;
transition: background-color 0.2s;
text-align: left;
margin-bottom: 0.2rem;
}
.custom-select-option:last-child {
margin-bottom: 0;
}
.custom-select-option:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.custom-select-option.selected {
background-color: rgba(255, 255, 255, 0.15);
font-weight: bold;
}