отличные баннеры для Администратора

Joker_Mayorov · Вторник в 22:04

Less:

:root {
  --adm-accent: #e11d48;                 
  --adm-accent-2: #fb7185;             
  --adm-text: #f8fafc;                 
  --adm-bg-start: #0b0c0f;
  --adm-bg-end: #121317;                 
  --adm-border-grad-start: rgba(225,29,72,0.55);
  --adm-border-grad-end: rgba(225,29,72,0.15);
  --adm-border-neutral: rgba(255,255,255,0.08);
  --adm-glow: rgba(225,29,72,0.30);
  --adm-dot-hi: #ff8fa3;

  --adm-font-w: 700;
  --adm-fs: 12px;
  --adm-ls: 0.04em;
  --adm-pad-y: 0.22rem;
  --adm-pad-x: 0.8rem;
  --adm-radius: 999px;
  --adm-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);
  --adm-shadow: 0 10px 28px rgba(0,0,0,0.28);
  --adm-ring: 0 0 0 2px rgba(225,29,72,0.35);
}


@media (prefers-color-scheme: light) {
  :root {
    --adm-text: #1b1b1f;
    --adm-bg-start: #f7f7f9;
    --adm-bg-end: #eff0f4;
    --adm-border-neutral: rgba(0,0,0,0.08);
    --adm-glow: rgba(225,29,72,0.20);
    --adm-border-grad-start: rgba(225,29,72,0.45);
    --adm-border-grad-end: rgba(225,29,72,0.10);
  }
}


.admin,
.userBanner.admin,
.userBanner--admin {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  padding: var(--adm-pad-y) var(--adm-pad-x);
  border-radius: var(--adm-radius);
  font-weight: var(--adm-font-w);
  font-size: var(--adm-fs);
  line-height: 1.2;
  letter-spacing: var(--adm-ls);
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

 
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, var(--adm-border-grad-start), var(--adm-border-grad-end)) border-box,
    linear-gradient(180deg, var(--adm-bg-start), var(--adm-bg-end)) padding-box;

  color: var(--adm-text);
  box-shadow: var(--adm-shadow-inset), var(--adm-shadow);
  position: relative;
  isolation: isolate;
  transition:
    transform .2s ease,
    box-shadow .25s ease,
    background .25s ease,
    color .2s ease;
}


.admin::before,
.userBanner.admin::before,
.userBanner--admin::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--adm-dot-hi) 0%, var(--adm-accent) 75%);
  filter: drop-shadow(0 0 8px var(--adm-glow));
  flex: 0 0 auto;
}


.admin::after,
.userBanner.admin::after,
.userBanner--admin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 42%),
    radial-gradient(90% 90% at 0% 0%, rgba(255,255,255,0.06), transparent 45%),
    
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 8px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 8px);
  opacity: .55;
  z-index: 1;
}


.admin:hover,
.userBanner.admin:hover,
.userBanner--admin:hover,
.admin:focus,
.userBanner.admin:focus,
.userBanner--admin:focus {
  transform: translateY(-1px);
  box-shadow:
    var(--adm-shadow-inset),
    0 14px 34px rgba(0,0,0,0.34),
    var(--adm-ring);
}


.admin:active,
.userBanner.admin:active,
.userBanner--admin:active {
  transform: translateY(0);
  box-shadow:
    var(--adm-shadow-inset),
    0 10px 26px rgba(0,0,0,0.28);
}


.admin.is-compact,
.userBanner.admin.is-compact,
.userBanner--admin.is-compact {
  --adm-fs: 11px;
  --adm-pad-y: 0.14rem;
  --adm-pad-x: 0.6rem;
  --adm-ls: 0.03em;
}

.admin.is-large,
.userBanner.admin.is-large,
.userBanner--admin.is-large {
  --adm-fs: 13px;
  --adm-pad-y: 0.3rem;
  --adm-pad-x: 0.95rem;
}


.admin.is-subtle,
.userBanner.admin.is-subtle,
.userBanner--admin.is-subtle {
  background:
    linear-gradient(135deg, rgba(225,29,72,0.25), rgba(225,29,72,0.08)) border-box,
    linear-gradient(180deg, rgba(225,29,72,0.10), rgba(225,29,72,0.06)) padding-box;
  color: #3a0a12;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
@media (prefers-color-scheme: dark) {
  .admin.is-subtle,
  .userBanner.admin.is-subtle,
  .userBanner--admin.is-subtle {
    color: #ffe9ed;
  }
}


.admin.is-outline,
.userBanner.admin.is-outline,
.userBanner--admin.is-outline {
  background:
    linear-gradient(135deg, var(--adm-border-grad-start), var(--adm-border-grad-end)) border-box,
    linear-gradient(180deg, transparent, transparent) padding-box;
  color: var(--adm-accent);
  box-shadow: none;
}
.admin.is-outline::after,
.userBanner.admin.is-outline::after,
.userBanner--admin.is-outline::after { display: none; }


.admin.is-glow:hover,
.userBanner.admin.is-glow:hover,
.userBanner--admin.is-glow:hover {
  box-shadow:
    var(--adm-shadow-inset),
    0 18px 40px rgba(0,0,0,0.38),
    0 0 0 2px rgba(225,29,72,0.45),
    0 0 38px var(--adm-glow);
}


.admin.no-dot::before,
.userBanner.admin.no-dot::before,
.userBanner--admin.no-dot::before { display: none; }


.tone-dark .admin,
.tone-dark .userBanner.admin,
.tone-dark .userBanner--admin {
  --adm-text: #f8fafc;
  --adm-bg-start: #0b0c0f;
  --adm-bg-end: #121317;
  --adm-border-neutral: rgba(255,255,255,0.08);
}
.tone-light .admin,
.tone-light .userBanner.admin,
.tone-light .userBanner--admin {
  --adm-text: #1b1b1f;
  --adm-bg-start: #f7f7f9;
  --adm-bg-end: #eff0f4;
  --adm-border-neutral: rgba(0,0,0,0.08);
}


.admin.has-shield::before,
.userBanner.admin.has-shield::before,
.userBanner--admin.has-shield::before {
  width: 12px;
  height: 12px;
  background: var(--adm-text);
  filter: none;
 
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'><path fill='%23000' d='M12 2l7 3v6c0 5-3.438 9.74-7 11-3.562-1.26-7-6-7-11V5l7-3z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'><path fill='%23000' d='M12 2l7 3v6c0 5-3.438 9.74-7 11-3.562-1.26-7-6-7-11V5l7-3z'/></svg>") no-repeat center / contain;
}


@media (prefers-reduced-motion: reduce) {
  .admin,
  .userBanner.admin,
  .userBanner--admin {
    transition: none;
  }
  .admin:hover,
  .userBanner.admin:hover,
  .userBanner--admin:hover {
    transform: none;
    box-shadow: var(--adm-shadow-inset), 0 10px 26px rgba(0,0,0,0.28);
  }
}


@media (forced-colors: active) {
  .admin,
  .userBanner.admin,
  .userBanner--admin {
    border: 1px solid CanvasText;
    color: ButtonText;
    background: Canvas;
    box-shadow: none;
  }
  .admin::before,
  .userBanner.admin::before,
  .userBanner--admin::before {
    background: ButtonText;
    -webkit-mask: none;
            mask: none;
  }
}


@supports not (background: paint(something)) {
  .admin,
  .userBanner.admin,
  .userBanner--admin {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 22px rgba(0,0,0,0.26);
  }
}

LIVE SAMP

отличные баннеры для Администратора

Добро пожаловать!

Joker_Mayorov