mirror of
https://github.com/Alexander-D-Karpov/about.git
synced 2026-03-16 22:06:08 +03:00
42 lines
1.8 KiB
CSS
42 lines
1.8 KiB
CSS
.tech-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:8px}
|
|
.tech-item{position:relative;width:50px;height:50px;border-radius:12px;background:rgba(255,255,255,.014);box-shadow:inset 0 0 0 1px var(--edge-0);display:grid;place-items:center;cursor:pointer;transition:all .2s ease;overflow:hidden}
|
|
.tech-item:hover{background:rgba(255,255,255,.024);box-shadow:inset 0 0 0 1px var(--edge-1), var(--shadow);transform:translateY(-2px)}
|
|
.tech-item img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
|
|
.tech-item .tech-name{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);background:var(--paper);padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:all .2s ease;z-index:10;border:1px solid var(--edge-1)}
|
|
.tech-item:hover .tech-name{opacity:1;bottom:-35px}
|
|
|
|
.tech-item.filtered {
|
|
background: var(--accent);
|
|
color: #fff;
|
|
box-shadow: 0 0 0 2px rgba(122, 162, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .2);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.tech-item.filtered img {
|
|
filter: brightness(1.3) contrast(1.1) drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
.tech-item {
|
|
background: rgba(0, 0, 0, .04);
|
|
border: 1px solid var(--edge-1);
|
|
}
|
|
|
|
.tech-item:hover {
|
|
background: rgba(0, 0, 0, .08);
|
|
}
|
|
|
|
.tech-item img {
|
|
filter: none;
|
|
}
|
|
|
|
.tech-item.filtered {
|
|
background: var(--accent);
|
|
color: #fff;
|
|
box-shadow: 0 0 0 2px rgba(9, 105, 218, .3), inset 0 0 0 1px rgba(255, 255, 255, .3);
|
|
}
|
|
|
|
.tech-item.filtered img {
|
|
filter: brightness(10) drop-shadow(0 2px 4px rgba(0, 0, 0, .2));
|
|
}
|
|
} |