mirror of
https://github.com/Alexander-D-Karpov/about.git
synced 2026-03-16 22:06:08 +03:00
510 lines
17 KiB
CSS
510 lines
17 KiB
CSS
:root{
|
|
--bg:#05070a; --bg-2:#080b10; --bg-3:#0b0f14; --paper:#070b10;
|
|
--ink:#e6edf3; --ink-2:#c5ccd4; --muted:#8a94a2;
|
|
--accent:#7aa2ff; --accent-2:#b692ff; --good:#3ad38b; --warn:#ffd166; --bad:#ff6b6b;
|
|
--edge-0: rgba(255,255,255,.016); --edge-1: rgba(255,255,255,.024); --edge-2: rgba(255,255,255,.04);
|
|
--shadow:0 10px 30px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
|
|
--radius:16px; --radius-lg:22px; --gap: clamp(2px, 0.06vw, 16px); --left-col:380px; --col-min:280px;
|
|
--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
|
|
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
--btn-red:#ff5f57; --btn-yellow:#febc2e; --btn-green:#28c840;
|
|
}
|
|
|
|
*{box-sizing:border-box}
|
|
html,body{height:100%;width:100%}
|
|
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
|
|
body{
|
|
margin:0;background:
|
|
radial-gradient(circle at 1px 1px, rgba(255,255,255,.015) 1px, transparent 1px) 0 0/22px 22px,
|
|
linear-gradient(var(--bg), var(--bg));
|
|
color:var(--ink);
|
|
overflow-x:hidden;
|
|
font-family:var(--font);
|
|
}
|
|
a{color:var(--accent);text-decoration:none} a:hover{opacity:.9}
|
|
img{max-width:100%;display:block;height:auto}
|
|
*:focus-visible{outline:2px solid color-mix(in oklab, var(--accent) 45%, transparent);outline-offset:2px}
|
|
|
|
.status-indicator{--s:10px;display:inline-block;width:var(--s);height:var(--s);border-radius:50%;margin-right:6px;background:#666;border:2px solid rgba(0,0,0,.25);vertical-align:middle}
|
|
.status-online{background:var(--good)} .status-loading{background:var(--warn)} .status-offline{background:var(--bad)}
|
|
.btn,.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:10px;border:none;background:rgba(255,255,255,.06);backdrop-filter:blur(8px);box-shadow:0 1px 3px rgba(0,0,0,.15);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
|
|
.btn:hover,.icon-btn:hover{background:rgba(255,255,255,.1);box-shadow:0 3px 12px rgba(0,0,0,.25);transform:translateY(-1px)}
|
|
.btn:active,.icon-btn:active{transform:none;box-shadow:0 1px 2px rgba(0,0,0,.15)}
|
|
.icon-btn{width:34px;height:34px;padding:0}
|
|
|
|
.toast-root{position:fixed;top:20px;right:20px;z-index:10000;pointer-events:none;display:flex;flex-direction:column;gap:8px;max-width:calc(100vw - 40px)}
|
|
.toast{background:var(--paper);border-radius:var(--radius);padding:12px 16px;color:var(--ink);font-size:14px;font-weight:600;box-shadow:var(--shadow);transform:translateX(420px);transition:transform .28s ease;max-width:320px}
|
|
.toast.in{transform:translateX(0)}
|
|
.ripple-host{position:relative;overflow:hidden}
|
|
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none;transform:scale(0);animation:ripple-animation .6s ease-out}
|
|
@keyframes ripple-animation{0%{transform:scale(0);opacity:.6}100%{transform:scale(1);opacity:0}}
|
|
|
|
.container{margin:0 auto;padding:28px clamp(12px,3vw,28px)}
|
|
[class$="-section"]{
|
|
background:linear-gradient(180deg, rgba(255,255,255,.012), color-mix(in oklab, var(--bg-3) 26%, transparent));
|
|
border-radius:var(--radius);
|
|
box-shadow:inset 0 0 0 1px var(--edge-0), var(--shadow);
|
|
margin-bottom:3px;
|
|
}
|
|
[class$="-section"] .plugin__inner{padding:14px 14px 20px}
|
|
|
|
.js .container{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:calc(var(--gap) * 2);
|
|
align-items:stretch;
|
|
}
|
|
|
|
.profile-section{
|
|
position:relative;
|
|
background:linear-gradient(180deg, color-mix(in oklab, var(--paper) 92%, transparent) 0%, var(--paper) 100%);
|
|
border-radius:var(--radius-lg);
|
|
padding:18px;
|
|
box-shadow:inset 0 0 0 1px var(--edge-0), var(--shadow);
|
|
min-height:200px;
|
|
width:100%;
|
|
max-width:var(--left-col);
|
|
order:-999;
|
|
margin:0 0 calc(var(--gap) * 2) 0;
|
|
}
|
|
|
|
.mosaic{
|
|
display:grid;
|
|
grid-template-columns:repeat(auto-fit, minmax(var(--col-min), 1fr));
|
|
grid-auto-flow:dense;
|
|
grid-auto-rows:1.5px;
|
|
gap:var(--gap);
|
|
width:100%;
|
|
align-items:start;
|
|
padding-bottom:48px;
|
|
overflow-x:clip;
|
|
}
|
|
|
|
.profile-content{gap:14px;display:flex;align-items:center}
|
|
.profile-text{flex:1;min-width:0}
|
|
.profile-name{margin:.25rem 0;font-size:clamp(1.5rem, 4vw, 2rem);line-height:1.1}
|
|
|
|
.profile-titles {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin: .25rem 0 .5rem;
|
|
}
|
|
|
|
.profile-title, .profile-subtitle {
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.profile-titles {
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.profile-title, .profile-subtitle {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.profile-title{font-weight:700;color:var(--ink)} .profile-subtitle{font-weight:700;color:var(--accent)}
|
|
.profile-image img{width:88px;height:88px;object-fit:cover;border-radius:18px;box-shadow:inset 0 0 0 1px var(--edge-0), var(--shadow)}
|
|
|
|
.plugin{
|
|
background:linear-gradient(180deg, rgba(255,255,255,.012), color-mix(in oklab, var(--bg-3) 26%, transparent));
|
|
border-radius:var(--radius);
|
|
box-shadow:inset 0 0 0 1px var(--edge-0), var(--shadow);
|
|
position:relative;isolation:isolate;transition:transform .08s ease, box-shadow .2s ease, background-color .2s ease;
|
|
min-height:120px;
|
|
}
|
|
.plugin__inner{padding:14px 14px 20px;display:flow-root;min-height:inherit}
|
|
.plugin.is-collapsed .plugin__inner>*:not(.plugin-header){display:none}
|
|
.plugin[data-w="2"]{grid-column:span 2}
|
|
.plugin[data-w="3"]{grid-column:span 3}
|
|
|
|
.plugin-header{
|
|
display:flex;align-items:center;gap:10px;justify-content:space-between;margin:0 0 12px;padding:10px 12px;border-radius:14px;
|
|
background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);box-shadow:inset 0 0 0 1px var(--edge-0);
|
|
min-height:44px;
|
|
}
|
|
.plugin-title{margin:0;font-weight:800;letter-spacing:.2px;font-size:clamp(14px,3.5vw,18px);flex:1;min-width:0;text-transform:capitalize;word-wrap:break-word;hyphens:auto;line-height:1.2}
|
|
.plugin-toolbar{display:flex;gap:8px}
|
|
.plugin-btn{
|
|
width:14px;height:14px;border-radius:50%;padding:0;
|
|
font-size:11px;line-height:1;
|
|
color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);
|
|
font-weight:700;
|
|
display:flex;align-items:center;justify-content:center;
|
|
}
|
|
.plugin-btn[data-action="collapse"]{background:var(--btn-red)}
|
|
.plugin-btn[data-action="w-dec"]{background:var(--btn-yellow)}
|
|
.plugin-btn[data-action="w-inc"]{background:var(--btn-green)}
|
|
.plugin-btn[data-action="expand"]{background:var(--accent)}
|
|
.plugin-btn[data-action="view"]{background:var(--accent-2)}
|
|
.drag-handle{cursor:grab}
|
|
.dragging-cursor, .plugin.dragging .drag-handle{cursor:grabbing}
|
|
|
|
.drag-proxy{position:fixed;left:0;top:0;pointer-events:none;z-index:10000;border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden}
|
|
.plugin.dragging{opacity:.35}
|
|
.plugin-placeholder{visibility:visible;opacity:.2;background:var(--edge-0);border:2px dashed var(--edge-1)}
|
|
.plugin-overlay{
|
|
position:fixed; inset:0;
|
|
display:flex; place-items:center;
|
|
background:rgba(4,6,9,.85);
|
|
backdrop-filter:blur(4px);
|
|
opacity:0; pointer-events:none;
|
|
transition:opacity .15s ease;
|
|
z-index: 999999;
|
|
align-items:center; justify-content:center; padding:20px;
|
|
}
|
|
.plugin-overlay.in{opacity:1;pointer-events:auto}
|
|
.plugin--expanded{width:min(1100px,92vw);max-height:92vh;overflow:auto;border-radius:18px;box-shadow:inset 0 0 0 1px var(--edge-1), var(--shadow);margin:auto}
|
|
|
|
.status-bar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 10px;
|
|
z-index: 999999;
|
|
width: max-content;
|
|
max-width: calc(100% - 20px);
|
|
margin: 0 auto;
|
|
padding: 8px 12px;
|
|
border-radius: 12px;
|
|
background: var(--paper);
|
|
box-shadow: inset 0 0 0 1px var(--edge-0), var(--shadow);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.loading{display:inline-block;width:16px;height:16px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin .8s linear infinite}
|
|
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
|
|
|
|
.tech-filter-popup {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--paper);
|
|
border-radius: var(--radius);
|
|
padding: 12px 16px;
|
|
box-shadow: var(--shadow);
|
|
border: 1px solid var(--edge-1);
|
|
z-index: 9999999;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity .3s ease;
|
|
}
|
|
|
|
.tech-filter-popup.show {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.tech-filter-popup .filter-icon{font-size:16px;color:var(--accent)}
|
|
.tech-filter-popup .filter-text{font-weight:600;color:var(--ink-2)}
|
|
.tech-filter-popup .filter-tech{color:var(--accent);font-weight:700}
|
|
|
|
.tech-filter-popup .clear-filter-btn {
|
|
padding: 4px 8px;
|
|
font-size: 12px;
|
|
background: var(--bad);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
transition: background .2s ease;
|
|
}
|
|
.tech-filter-popup .clear-filter-btn:hover{background:#dc2626}
|
|
|
|
|
|
@media (max-width:1200px){
|
|
:root{--col-min:260px;--gap:2px}
|
|
.plugin[data-w="3"]{grid-column:span 2}
|
|
}
|
|
@media (max-width:900px){
|
|
:root{--col-min:240px;--gap:2px}
|
|
}
|
|
|
|
@media (max-width:780px){
|
|
.js .container{
|
|
flex-direction:column;
|
|
gap:calc(var(--gap)*.8);
|
|
padding:16px;
|
|
}
|
|
|
|
.profile-section{
|
|
position:static;
|
|
max-width:100%;
|
|
margin-bottom:var(--gap);
|
|
}
|
|
|
|
:root{--col-min:240px}
|
|
.mosaic{
|
|
grid-template-columns:repeat(auto-fit,minmax(var(--col-min),1fr));
|
|
gap:calc(var(--gap)*.8);
|
|
grid-auto-rows:1px;
|
|
}
|
|
.plugin[data-w]{grid-column:span 1}
|
|
.plugin__inner{padding:12px 12px 16px}
|
|
.plugin-toolbar{display:none}
|
|
}
|
|
@media (max-width:520px){
|
|
.container{padding:12px}
|
|
.plugin-header{padding:8px 10px;margin:0 0 8px}
|
|
:root{--col-min:220px;--gap:2px}
|
|
}
|
|
@media (prefers-color-scheme: light){
|
|
:root {
|
|
--bg: #ffffff;
|
|
--bg-2: #f6f8fa;
|
|
--bg-3: #eef1f5;
|
|
--paper: #ffffff;
|
|
--ink: #24292f;
|
|
--ink-2: #57606a;
|
|
--muted: #6e7781;
|
|
--accent: #0969da;
|
|
--accent-2: #8250df;
|
|
--good: #1a7f37;
|
|
--warn: #bf8700;
|
|
--bad: #cf222e;
|
|
--edge-0: rgba(0, 0, 0, .08);
|
|
--edge-1: rgba(0, 0, 0, .12);
|
|
--edge-2: rgba(0, 0, 0, .16);
|
|
--shadow: 0 8px 24px rgba(140, 149, 159, .15), 0 1px 4px rgba(27, 31, 36, .1);
|
|
--btn-red: #ff5f57;
|
|
--btn-yellow: #febc2e;
|
|
--btn-green: #28c840;
|
|
}
|
|
|
|
body {
|
|
background: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .02) 1px, transparent 1px) 0 0/22px 22px,
|
|
linear-gradient(var(--bg), var(--bg));
|
|
}
|
|
|
|
.social-link {
|
|
background: #111 !important;
|
|
color: #fff;
|
|
border: 1px solid rgba(0, 0, 0, .15);
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
|
|
}
|
|
|
|
.social-link:hover {
|
|
background: #000 !important;
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
|
|
}
|
|
|
|
.social-link img {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.tech-item.filtered img {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.btn, .icon-btn {
|
|
background: rgba(0, 0, 0, .04);
|
|
color: var(--ink);
|
|
border: 1px solid var(--edge-1);
|
|
}
|
|
|
|
.btn:hover, .icon-btn:hover {
|
|
background: rgba(0, 0, 0, .08);
|
|
}
|
|
|
|
.plugin {
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, .01), rgba(0, 0, 0, .02));
|
|
box-shadow: inset 0 0 0 1px var(--edge-0), 0 2px 8px rgba(0, 0, 0, .06);
|
|
}
|
|
|
|
.terminal {
|
|
background: #f6f8fa;
|
|
color: #24292f;
|
|
box-shadow: inset 0 0 0 1px var(--edge-1),
|
|
0 4px 16px rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
.terminal-body {
|
|
background: #f6f8fa;
|
|
}
|
|
|
|
.terminal-header {
|
|
background: #ffffff;
|
|
border-bottom: 1px solid var(--edge-1);
|
|
}
|
|
|
|
.neofetch-pre {
|
|
color: #24292f;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.color-palette {
|
|
background: #ffffff;
|
|
border: 1px solid var(--edge-1);
|
|
}
|
|
}
|
|
|
|
@media (min-width:781px){
|
|
.js .container{
|
|
display:grid;
|
|
grid-template-columns:minmax(280px,var(--left-col)) 1fr;
|
|
gap:var(--gap);
|
|
align-items:start;
|
|
}
|
|
|
|
.profile-section{
|
|
position:static;
|
|
top:auto;
|
|
align-self:start;
|
|
max-width:var(--left-col);
|
|
}
|
|
|
|
.mosaic{
|
|
grid-column:2;
|
|
}
|
|
}
|
|
|
|
body.scroll-locked {
|
|
overflow: hidden;
|
|
overscroll-behavior: contain;
|
|
touch-action: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.custom-music-player{
|
|
display:flex;align-items:center;gap:12px;padding:12px;
|
|
background:linear-gradient(135deg, rgba(122,162,255,.08) 0%, rgba(182,146,255,.06) 100%);
|
|
border-radius:14px;margin-top:12px;
|
|
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 4px 16px rgba(0,0,0,.2);
|
|
backdrop-filter:blur(8px);
|
|
}
|
|
|
|
.player-artwork-mini{
|
|
width:48px;height:48px;border-radius:8px;overflow:hidden;flex-shrink:0;
|
|
box-shadow:0 2px 8px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1);
|
|
}
|
|
.player-artwork-mini img{width:100%;height:100%;object-fit:cover}
|
|
|
|
.player-info{flex:1;min-width:0;margin-right:8px}
|
|
.player-track-name{
|
|
font-weight:700;font-size:14px;color:var(--ink);
|
|
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
|
|
margin-bottom:2px;
|
|
}
|
|
.player-artist-name{
|
|
font-size:12px;color:var(--ink-2);
|
|
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
|
|
}
|
|
|
|
.player-progress-container{flex:1;min-width:120px;max-width:200px}
|
|
.player-progress-bar{
|
|
width:100%;height:6px;background:rgba(0,0,0,.25);border-radius:3px;
|
|
position:relative;cursor:pointer;overflow:hidden;
|
|
box-shadow:inset 0 1px 3px rgba(0,0,0,.3);
|
|
}
|
|
.player-progress-fill{
|
|
height:100%;background:linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
|
|
border-radius:3px;width:0%;transition:width .1s linear;
|
|
box-shadow:0 0 8px rgba(122,162,255,.4);
|
|
position:relative;
|
|
}
|
|
.player-progress-fill::after{
|
|
content:'';position:absolute;right:0;top:0;bottom:0;width:8px;
|
|
background:radial-gradient(circle, rgba(255,255,255,.6), transparent);
|
|
border-radius:50%;
|
|
}
|
|
|
|
.player-time{
|
|
display:flex;justify-content:space-between;margin-top:4px;
|
|
font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;
|
|
}
|
|
|
|
.player-controls{display:flex;gap:8px;align-items:center}
|
|
.player-btn{
|
|
width:36px;height:36px;border-radius:50%;border:none;
|
|
background:rgba(255,255,255,.08);color:var(--ink);cursor:pointer;
|
|
display:flex;align-items:center;justify-content:center;
|
|
transition:background .2s ease,transform .15s ease,box-shadow .2s ease;
|
|
box-shadow:0 2px 6px rgba(0,0,0,.2);
|
|
}
|
|
.player-btn:hover{
|
|
background:rgba(255,255,255,.14);transform:scale(1.05);
|
|
box-shadow:0 4px 12px rgba(0,0,0,.3);
|
|
}
|
|
.player-btn:active{transform:scale(.95)}
|
|
|
|
#player-play-pause{
|
|
width:42px;height:42px;background:var(--accent);
|
|
box-shadow:0 4px 12px rgba(122,162,255,.3);
|
|
}
|
|
#player-play-pause:hover{
|
|
background:color-mix(in oklab, var(--accent) 90%, white);
|
|
box-shadow:0 6px 18px rgba(122,162,255,.4);
|
|
}
|
|
|
|
.player-volume{
|
|
width:80px;height:4px;-webkit-appearance:none;appearance:none;
|
|
background:rgba(0,0,0,.25);border-radius:2px;outline:none;
|
|
box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
|
|
}
|
|
.player-volume::-webkit-slider-thumb{
|
|
-webkit-appearance:none;appearance:none;width:14px;height:14px;
|
|
background:var(--accent);border-radius:50%;cursor:pointer;
|
|
box-shadow:0 2px 4px rgba(0,0,0,.3);
|
|
transition:transform .15s ease;
|
|
}
|
|
.player-volume::-webkit-slider-thumb:hover{transform:scale(1.2)}
|
|
.player-volume::-moz-range-thumb{
|
|
width:14px;height:14px;background:var(--accent);border-radius:50%;
|
|
cursor:pointer;border:none;box-shadow:0 2px 4px rgba(0,0,0,.3);
|
|
transition:transform .15s ease;
|
|
}
|
|
.player-volume::-moz-range-thumb:hover{transform:scale(1.2)}
|
|
|
|
.play-btn-large{
|
|
width:64px !important;height:64px !important;
|
|
background:rgba(122,162,255,.95) !important;
|
|
backdrop-filter:blur(8px);
|
|
}
|
|
.play-btn-large:hover{
|
|
background:var(--accent) !important;
|
|
box-shadow:0 8px 24px rgba(122,162,255,.5) !important;
|
|
}
|
|
|
|
#lastfm-audio-element{display:none}
|
|
|
|
@media (max-width:900px){
|
|
.custom-music-player{flex-wrap:wrap;gap:10px}
|
|
.player-progress-container{order:4;width:100%;max-width:none}
|
|
.player-volume{width:60px}
|
|
}
|
|
|
|
@media (max-width:520px){
|
|
.player-artwork-mini{width:40px;height:40px}
|
|
.player-track-name{font-size:13px}
|
|
.player-artist-name{font-size:11px}
|
|
.player-btn{width:32px;height:32px}
|
|
#player-play-pause{width:36px;height:36px}
|
|
.player-volume{display:none}
|
|
} |