14 lines
1.6 KiB
CSS
14 lines
1.6 KiB
CSS
.avatar-name-tag{position:fixed;transform:translate(-50%,-100%);background:rgba(0,0,0,0.7);color:#00ffcc;font-family:'JetBrains Mono',monospace;font-size:12px;padding:2px 8px;border-radius:4px;border:1px solid rgba(0,255,204,0.3);pointer-events:none;z-index:100;white-space:nowrap;text-shadow:0 0 6px rgba(0,255,204,0.5)}
|
|
.avatar-color-picker{position:fixed;top:60px;right:16px;background:rgba(10,15,26,0.95);border:1px solid rgba(0,255,204,0.3);border-radius:8px;padding:12px;z-index:1000;min-width:200px;font-family:'JetBrains Mono',monospace;color:#e0e0e0}
|
|
.avatar-color-picker.hidden{display:none}
|
|
.avatar-picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:14px;color:#00ffcc}
|
|
.avatar-picker-close{background:none;border:none;color:#666;font-size:18px;cursor:pointer}
|
|
.avatar-picker-name{margin-bottom:12px}
|
|
.avatar-picker-name label{display:block;font-size:10px;color:#666;text-transform:uppercase;margin-bottom:4px}
|
|
.avatar-picker-name input{width:100%;background:rgba(255,255,255,0.05);border:1px solid rgba(0,255,204,0.2);border-radius:4px;color:#e0e0e0;padding:6px 8px;font-family:inherit;font-size:13px;outline:none}
|
|
.avatar-picker-colors label{display:block;font-size:10px;color:#666;text-transform:uppercase;margin-bottom:6px}
|
|
.avatar-color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
|
|
.avatar-color-swatch{width:36px;height:36px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:border-color 0.15s,transform 0.15s}
|
|
.avatar-color-swatch:hover{transform:scale(1.15)}
|
|
.avatar-color-swatch.active{border-color:white;box-shadow:0 0 8px currentColor}
|