dcalc/design/src-web/dialog/style/index.css

/* Source module: dialog.css */
.window {
  border: 1px solid #6c5a37;
  background: #050606;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px #0e1418;
  overflow: hidden;
}
.window-titlebar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 8px;
  background: linear-gradient(#5a7099, #415272 55%, #313e58);
  border-bottom: 1px solid #1d2735;
  color: #f0f2ef;
  text-shadow: 0 1px 1px #000;
  font-size: 13px;
  transition:
    background 0.12s linear,
    color 0.12s linear;
}
.window-titlebar > :not(.window-title-effect) {
  position: relative;
  z-index: 2;
}
.window-titlebar .title {
  grid-column: 2;
}
.window-titlebar .close {
  width: 10px;
  height: 9px;
  image-rendering: auto;
}
.window-titlebar > .dialog-icon-button {
  grid-column: 3;
  justify-self: end;
}
.window-titlebar .title-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}
.window-titlebar .title-actions img {
  flex: 0 0 auto;
  image-rendering: pixelated;
  object-fit: contain;
}
.dialog-icon-button {
  appearance: none;
  width: 20px;
  height: 20px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
}
.dialog-icon-button > img {
  display: block;
  transform: translateY(0);
  filter: brightness(1);
}
.dialog-icon-button:hover > img,
.dialog-icon-button:focus-visible > img,
.dialog-icon-button:active > img {
  filter: brightness(1.28);
}
.dialog-icon-button:focus-visible {
  outline: 1px solid rgba(225, 204, 135, 0.72);
  outline-offset: -2px;
}
.dialog-icon-button:active > img {
  transform: translateY(1px);
}
.dialog-icon-button[aria-pressed="true"] > img {
  filter: brightness(1.28);
}
.window.is-unfocused > .window-titlebar {
  background: linear-gradient(#303b50, #263247 56%, #1d2839);
  color: #8993a0;
  text-shadow: 0 1px 1px #0a0d12;
}
.window.is-focused > .window-titlebar {
  background: linear-gradient(#6079a5, #435a80 55%, #30425f);
  color: #f4f6f2;
}
.window-title-effect {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 0;
  width: 1100px;
  height: 100%;
  max-width: none;
  transform: translateX(-50%);
  object-fit: fill;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: brightness(1.55) contrast(1.06);
  opacity: 0.72;
  image-rendering: auto;
}
.window.is-unfocused > .window-titlebar .window-title-effect {
  display: none;
}
.window-content {
  min-height: 230px;
  padding: 14px;
  background: linear-gradient(
    135deg,
    rgba(31, 36, 40, 0.82),
    rgba(4, 5, 5, 0.98)
  );
}
.window-footer {
  height: 38px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #332c22;
  background: linear-gradient(#20201d, #11110f);
}
.dialog-body-shell {
  padding: 10px !important;
  background: rgba(4, 5, 5, 0.82) !important;
}
.dialog-content-well {
  min-height: 0;
  padding: 0;
  border: 1px solid #262824;
  background: #000;
  color: var(--gold);
}
.dialog-body-shell > .dialog-content-well {
  min-height: 248px;
}
.dialog-footer {
  position: relative;
  background: rgba(4, 5, 5, 0.82);
  border-top-color: #2b2924;
}
.dialog-status {
  min-width: 0;
  margin-right: auto;
  color: #8fc885;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.dialog-status:empty { display: none; }
.dialog-status.is-updated { animation: dialog-status-pulse 0.32s ease-out; }
@keyframes dialog-status-pulse {
  from { opacity: 0.35; transform: translateY(1px); }
  to { opacity: 1; transform: translateY(0); }
}
.window.is-demo-dismissed { animation: dialog-dismiss-feedback 0.28s ease-out; }
@keyframes dialog-dismiss-feedback {
  50% { opacity: 0.58; }
}

.sheet-filter-button {
  appearance: none;
  padding: 2px 3px;
  border: 0;
  background: none;
  color: #9c8e64;
  font: inherit;
  cursor: pointer;
}
.sheet-filter-button:hover,
.sheet-filter-button:focus-visible,
.sheet-filter-button:active,
.sheet-filter-button[aria-pressed="true"] {
  color: #d9c78a;
  outline: none;
}
.sheet-filter-button:active { transform: translateY(1px); }

.sheet {
  width: 390px;
}
.sheet .window-content {
  min-height: 340px;
}
.sheet-tabs {
  display: flex;
  height: 30px;
  border-bottom: 1px solid #7b6439;
}
.sheet-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b8a36b;
  border-right: 1px solid #322b20;
}
.sheet-tab.selected {
  color: #f2d97c;
  background: #271e0d;
}
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(6, 38px);
  gap: 4px;
  margin-top: 12px;
}
.item-slot {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080909;
  border: 1px solid #3e3524;
}
.item-slot.rare,
.item-slot.epic {
  border-color: #3e3524;
  box-shadow: none;
}
.item-slot.rare::after,
.item-slot.epic::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-size: 28px 28px;
  pointer-events: none;
  image-rendering: pixelated;
}
.item-slot.rare::after {
  background-image: url("../img/equipment-rarity/rare.png");
}
.item-slot.epic::after {
  background-image: url("../img/equipment-rarity/epic.png");
}
.item-slot img {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}

.popover {
  width: 420px;
  padding: 12px 14px;
  border: 1px solid #5e4d2d;
  background: rgba(4, 5, 4, 0.97);
  color: var(--gold);
  box-shadow: 0 12px 26px #000;
}
.popover-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.popover h4 {
  margin: 0 0 7px;
  color: #d8bd5d;
  font-size: 13px;
}

.tooltip {
  padding: 5px 7px;
  border: 1px solid #6c5c3d;
  background: #020302;
  color: #f5f5ef;
  box-shadow: 0 6px 14px #000;
  font-size: 12px;
}
.tooltip.rich {
  width: 310px;
  padding: 10px;
  color: #e8e5da;
  line-height: 1.35;
}
.tooltip.rich strong {
  color: #e2c962;
}