89 lines
1.9 KiB
CSS
89 lines
1.9 KiB
CSS
/* ===== SOCIOWIRE – GAME STYLE FILTER BUTTONS ===== */
|
||
|
||
/* Columns on left/right of the map */
|
||
.game-filter-column {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.55rem;
|
||
z-index: 25;
|
||
pointer-events: none; /* overlay container */
|
||
}
|
||
|
||
.game-filter-column * {
|
||
pointer-events: auto; /* real buttons clickable */
|
||
}
|
||
|
||
.game-filter-column-left {
|
||
left: 0.45rem;
|
||
}
|
||
|
||
.game-filter-column-right {
|
||
right: 0.45rem;
|
||
}
|
||
|
||
/* One line: circle + vertical label */
|
||
.game-filter-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.15rem;
|
||
}
|
||
|
||
/* Round “avatar style” button */
|
||
.game-filter-circle {
|
||
width: 52px;
|
||
height: 52px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle at 30% 30%, #3f9dfd, #1d4ed8, #020617);
|
||
border: 3px solid rgba(255, 255, 255, 0.35);
|
||
box-shadow:
|
||
0 4px 14px rgba(0, 0, 0, 0.7),
|
||
0 0 10px rgba(59, 130, 246, 0.9);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition:
|
||
transform 0.15s ease,
|
||
box-shadow 0.2s ease,
|
||
background 0.2s ease,
|
||
border-color 0.2s ease;
|
||
}
|
||
|
||
.game-filter-circle span {
|
||
font-size: 0.8rem;
|
||
font-weight: 700;
|
||
color: #e5f2ff;
|
||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
|
||
}
|
||
|
||
/* Selected state */
|
||
.game-filter-circle-active {
|
||
background: radial-gradient(circle at 30% 30%, #4ade80, #16a34a, #052e16);
|
||
border-color: #22c55e;
|
||
box-shadow:
|
||
0 0 16px rgba(34, 197, 94, 0.9),
|
||
0 6px 18px rgba(0, 0, 0, 0.85);
|
||
}
|
||
|
||
/* Vertical label like AVATAR / QUEST */
|
||
.game-filter-label {
|
||
font-size: 0.55rem;
|
||
letter-spacing: 1px;
|
||
text-transform: uppercase;
|
||
color: #f9fafb;
|
||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
|
||
writing-mode: vertical-rl;
|
||
text-orientation: mixed;
|
||
}
|
||
|
||
/* Tiny tweak for small screens */
|
||
@media (max-width: 480px) {
|
||
.game-filter-circle {
|
||
width: 46px;
|
||
height: 46px;
|
||
}
|
||
}
|