309 lines
7.5 KiB
CSS
309 lines
7.5 KiB
CSS
:root {
|
|
font-family: Arial, "Helvetica Neue", sans-serif;
|
|
font-size: 14px;
|
|
color: #333;
|
|
background: #f7f7f7;
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
}
|
|
header {
|
|
background: linear-gradient(#3b3b3b, #222);
|
|
color: #ddd;
|
|
border-bottom: 1px solid #080808;
|
|
padding: 16px 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 50px;
|
|
}
|
|
.brand {
|
|
font-size: 21px;
|
|
}
|
|
.brand small {
|
|
font-size: 11px;
|
|
color: #aaa;
|
|
margin-left: 12px;
|
|
}
|
|
nav {
|
|
display: flex;
|
|
gap: 24px;
|
|
}
|
|
nav a {
|
|
color: #ddd;
|
|
text-decoration: none;
|
|
}
|
|
a {
|
|
color: #337ab7;
|
|
}
|
|
main {
|
|
max-width: 1480px;
|
|
margin: 24px auto;
|
|
padding: 0 28px;
|
|
}
|
|
h1 {
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
}
|
|
h2 {
|
|
font-size: 23px;
|
|
font-weight: 400;
|
|
margin-top: 30px;
|
|
}
|
|
.muted {
|
|
color: #666;
|
|
line-height: 1.5;
|
|
}
|
|
.panel {
|
|
background: white;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
margin: 15px 0;
|
|
overflow: auto;
|
|
box-shadow: 0 1px 1px #0000000d;
|
|
}
|
|
.panel-title {
|
|
padding: 12px 15px;
|
|
background: linear-gradient(#fafafa, #ededed);
|
|
border-bottom: 1px solid #ddd;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
th {
|
|
text-align: left;
|
|
font-weight: bold;
|
|
border-bottom: 2px solid #ddd;
|
|
}
|
|
td,
|
|
th {
|
|
padding: 10px 12px;
|
|
vertical-align: top;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
tbody tr:nth-child(even) {
|
|
background: #f9f9f9;
|
|
}
|
|
tbody tr:hover {
|
|
background: #edf5fb;
|
|
}
|
|
td {
|
|
border-top: 1px solid #ddd;
|
|
}
|
|
button {
|
|
padding: 7px 12px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
background: linear-gradient(white, #eee);
|
|
color: #333;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
button:hover {
|
|
background: #e6e6e6;
|
|
}
|
|
button:disabled {
|
|
opacity: 0.5;
|
|
cursor: wait;
|
|
}
|
|
.primary {
|
|
color: #fff;
|
|
background: linear-gradient(#428bca, #3071a9);
|
|
border-color: #285e8e;
|
|
}
|
|
input,
|
|
select {
|
|
font: inherit;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
box-shadow: inset 0 1px 1px #00000013;
|
|
max-width: 100%;
|
|
}
|
|
input:focus,
|
|
button:focus-visible,
|
|
select:focus {
|
|
outline: 2px solid #66afe9;
|
|
outline-offset: 2px;
|
|
}
|
|
label {
|
|
font-weight: bold;
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 18px;
|
|
padding: 20px;
|
|
}
|
|
.form-grid label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
.toolbar {
|
|
padding: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
form p,
|
|
form > button {
|
|
margin: 15px 20px;
|
|
}
|
|
.metrics {
|
|
display: flex;
|
|
gap: 18px;
|
|
}
|
|
.metric {
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
border-left: 4px solid #337ab7;
|
|
border-radius: 3px;
|
|
padding: 15px 20px;
|
|
min-width: 160px;
|
|
}
|
|
.metric strong {
|
|
display: block;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
margin-bottom: 5px;
|
|
}
|
|
.metric span {
|
|
color: #777;
|
|
font-size: 12px;
|
|
}
|
|
#notice {
|
|
padding: 12px 16px;
|
|
background: #d9edf7;
|
|
border: 1px solid #bce8f1;
|
|
border-radius: 4px;
|
|
color: #31708f;
|
|
}
|
|
.error {
|
|
background: #f2dede !important;
|
|
color: #a94442 !important;
|
|
border-color: #ebccd1 !important;
|
|
}
|
|
.empty {
|
|
padding: 30px;
|
|
text-align: center;
|
|
color: #777;
|
|
}
|
|
pre {
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
font: 12px/1.6 monospace;
|
|
background: #fafafa;
|
|
border: 1px solid #ddd;
|
|
padding: 15px;
|
|
max-height: 500px;
|
|
overflow: auto;
|
|
}
|
|
.hash {
|
|
font-family: monospace;
|
|
font-size: 11px;
|
|
color: #777;
|
|
}
|
|
footer {
|
|
padding: 30px;
|
|
text-align: center;
|
|
color: #888;
|
|
}
|
|
#assets td:first-child {
|
|
max-width: 500px;
|
|
}
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
@media (max-width: 800px) {
|
|
.form-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.metrics {
|
|
flex-wrap: wrap;
|
|
}
|
|
header {
|
|
flex-wrap: wrap;
|
|
}
|
|
.brand small {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#preview img,
|
|
#preview video {
|
|
max-width: 100%;
|
|
max-height: 450px;
|
|
}
|
|
#preview audio {
|
|
width: 100%;
|
|
}
|
|
/* Archive dashboard */
|
|
:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color:#263748; background:#eef2f6; }
|
|
header { background:#192b3b; border-bottom:3px solid #29a3a3; padding:20px 32px; }
|
|
.brand {font-weight:750; letter-spacing:2px; color:white;}
|
|
.brand small {letter-spacing:1px; color:#9eb4c7;}
|
|
nav a {color:#d5e3ed;}
|
|
main {max-width:1500px;}
|
|
h1 {font-size:32px; font-weight:650; margin:18px 0 8px;}
|
|
h2 {font-weight:600;}
|
|
button {background:#fff; border-color:#bdcbd6; color:#245376;}
|
|
button:hover {background:#e9f3fa;}
|
|
button:disabled {cursor:default;}
|
|
.primary {background:#237eaa; color:white;}
|
|
.toolbar {flex-wrap:wrap;}
|
|
.panel {border-color:#d4dfe7; border-radius:7px;}
|
|
.panel-title {background:#f8fafc; color:#354e62; padding:16px;}
|
|
.metrics {margin:22px 0;}
|
|
.metric {flex:1; border:1px solid #d4dfe7; border-top:3px solid #27999e; border-radius:6px;}
|
|
.metric strong {font-weight:600;}
|
|
.breadcrumbs {display:flex; align-items:center; gap:10px; margin-top:20px;}
|
|
.breadcrumbs button {border:0; background:none; padding:3px 0;}
|
|
.breadcrumbs > * + *::before {content:"/"; color:#9babb8; margin-right:10px;}
|
|
.game-grid {display:grid; grid-template-columns:repeat(auto-fill,minmax(265px,1fr)); gap:20px; margin:18px 0 40px;}
|
|
.game-card {background:white; border:1px solid #d4dfe7; border-radius:8px; padding:24px; box-shadow:0 3px 8px #22334406;}
|
|
.game-icon {background:#e4f0f2; color:#267c86; border:1px solid #c3e0e2; width:58px; height:58px; border-radius:12px; display:grid; place-items:center; font-size:22px; font-weight:700; margin-bottom:22px;}
|
|
.game-card button {display:block; border:0; padding:0; font-size:20px; font-weight:650; text-align:left; background:none;}
|
|
.game-card p {color:#677b8c; margin-bottom:0;}
|
|
.gallery {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding:16px;}
|
|
.gallery:empty {display:none;}
|
|
.media-card {border:1px solid #dae2e9; border-radius:6px; overflow:hidden; padding-bottom:16px; min-width:0;}
|
|
.media-frame {height:190px; background:#e9eef2; display:flex; align-items:center; justify-content:center; overflow:hidden;}
|
|
.media-frame img {width:100%; height:100%; object-fit:contain;}
|
|
.media-frame video {width:100%; height:100%; background:#17232e;}
|
|
.media-frame.audio {background:linear-gradient(135deg,#d5e7ec,#e7e4f1); padding:16px;}
|
|
.media-frame audio {width:100%;}
|
|
.media-card h3 {font-size:14px; margin:14px 14px 6px; overflow-wrap:anywhere;}
|
|
.media-card p {margin:6px 14px; font-size:12px;}
|
|
.media-path {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#718494;}
|
|
.media-card button,.media-card a {margin:8px 0 0 14px; font-size:12px;}
|
|
.preview-error {line-height:1.6; color:#735321;}
|
|
.pagination {border-top:1px solid #dde5ec;}
|
|
.pagination span {margin-right:auto; color:#617687;}
|
|
.artifact-filters {background:#fbfcfd; border-bottom:1px solid #e2e8ee;}
|
|
.tools summary {cursor:pointer; padding:16px; font-weight:600;}
|
|
.table-wrap {overflow:auto;}
|
|
#notice {font-size:13px; padding:9px 14px;}
|
|
#preview {text-align:left;}
|
|
#preview img {display:block; margin:auto;}
|
|
@media(max-width:1100px) {.gallery {grid-template-columns:repeat(3,minmax(0,1fr));}}
|
|
@media(max-width:800px) {.gallery {grid-template-columns:repeat(2,minmax(0,1fr));} main {padding:0 14px;} header {padding:18px; gap:20px;} .metric {min-width:100px;padding:12px;} .toolbar label {flex-wrap:wrap;} }
|
|
@media(max-width:480px) {.gallery {grid-template-columns:1fr;} .metrics {gap:8px;} .metric strong {font-size:20px;} }
|
|
.media-frame img {width:auto; height:auto; max-width:100%; max-height:100%;}
|
|
.provenance {margin:12px 0; color:#617687; font-size:13px;}
|
|
.provenance summary {cursor:pointer;}
|
|
@media(max-width:800px) {
|
|
.panel table {min-width:760px;}
|
|
.panel th {white-space:nowrap;}
|
|
}
|