init
This commit is contained in:
@@ -0,0 +1,298 @@
|
||||
/* 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;
|
||||
}
|
||||
Reference in New Issue
Block a user