1196 lines
22 KiB
CSS
1196 lines
22 KiB
CSS
:root{
|
|
color-scheme: dark;
|
|
--bg-primary: #070913;
|
|
--bg-secondary: #0d1020;
|
|
--surface: #15182d;
|
|
--surface-hover: #1c203a;
|
|
--text-primary: #f4f7ff;
|
|
--text-secondary: #9ba7c0;
|
|
--accent-cyan: #20d9f3;
|
|
--accent-magenta: #f02fb8;
|
|
--accent-orange: #ff9b45;
|
|
--status-running: #29d7a0;
|
|
--status-stopped: #8791a8;
|
|
--status-warning: #ff9b45;
|
|
--status-error: #ff5d71;
|
|
--border: #292d49;
|
|
--radius: 14px;
|
|
--shadow: 0 18px 50px #0007;
|
|
font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
|
|
line-height: 1.5;
|
|
font-synthesis: none
|
|
}
|
|
*{
|
|
box-sizing: border-box
|
|
}
|
|
html{
|
|
scroll-behavior: smooth
|
|
}
|
|
body{
|
|
margin: 0;
|
|
background: radial-gradient(circle at 75% -10%,#32154d55,transparent 35rem),var(--bg-primary);
|
|
color: var(--text-primary)
|
|
}
|
|
button,input,textarea,select{
|
|
font: inherit
|
|
}
|
|
a{
|
|
color: inherit
|
|
}
|
|
.skip-link{
|
|
position: fixed;
|
|
z-index: 100;
|
|
top: .5rem;
|
|
left: .5rem;
|
|
transform: translateY(-150%);
|
|
padding: .7rem 1rem;
|
|
background: var(--accent-cyan);
|
|
color: #041017;
|
|
border-radius: 8px
|
|
}
|
|
.skip-link:focus{
|
|
transform: none
|
|
}
|
|
.app-body{
|
|
min-height: 100vh
|
|
}
|
|
.sidebar{
|
|
position: fixed;
|
|
inset: 0 auto 0 0;
|
|
width: 250px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 24px 16px;
|
|
background: #0b0d18ee;
|
|
border-right: 1px solid var(--border);
|
|
backdrop-filter: blur(18px);
|
|
z-index: 20
|
|
}
|
|
.brand{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 0 8px 25px;
|
|
text-decoration: none
|
|
}
|
|
.brand img{
|
|
width: 54px;
|
|
height: 54px;
|
|
border-radius: 13px;
|
|
object-fit: cover;
|
|
box-shadow: 0 0 18px #ef2fb833
|
|
}
|
|
.brand strong{
|
|
display: block;
|
|
font-size: 1.3rem;
|
|
letter-spacing: .04em
|
|
}
|
|
.brand small,.account small{
|
|
display: block;
|
|
color: var(--text-secondary);
|
|
font-size: .72rem
|
|
}
|
|
.sidebar nav{
|
|
display: grid;
|
|
gap: 5px
|
|
}
|
|
.sidebar nav p{
|
|
margin: 22px 12px 7px;
|
|
color: #68728b;
|
|
font-size: .68rem;
|
|
font-weight: 800;
|
|
letter-spacing: .14em;
|
|
text-transform: uppercase
|
|
}
|
|
.sidebar nav a{
|
|
padding: 11px 13px;
|
|
border: 1px solid transparent;
|
|
border-radius: 10px;
|
|
color: var(--text-secondary);
|
|
font-weight: 650;
|
|
text-decoration: none
|
|
}
|
|
.sidebar nav a:hover{
|
|
background: var(--surface);
|
|
color: var(--text-primary)
|
|
}
|
|
.sidebar nav a.active{
|
|
border-color: #c22f9b66;
|
|
background: linear-gradient(100deg,#6b287566,#13365355);
|
|
color: #fff;
|
|
box-shadow: inset 3px 0 var(--accent-cyan)
|
|
}
|
|
.account{
|
|
margin-top: auto;
|
|
padding-top: 18px;
|
|
border-top: 1px solid var(--border)
|
|
}
|
|
.account>div{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 12px
|
|
}
|
|
.avatar{
|
|
display: grid;
|
|
width: 36px;
|
|
height: 36px;
|
|
place-items: center;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg,var(--accent-cyan),var(--accent-magenta));
|
|
color: #081019;
|
|
font-weight: 900;
|
|
text-transform: uppercase
|
|
}
|
|
.app-main{
|
|
min-height: 100vh;
|
|
margin-left: 250px;
|
|
padding: 44px clamp(24px,4vw,64px) 70px
|
|
}
|
|
.mobile-header{
|
|
display: none
|
|
}
|
|
.page-heading{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: end;
|
|
margin: 0 auto 28px;
|
|
max-width: 1400px
|
|
}
|
|
.eyebrow{
|
|
margin: 0 0 5px;
|
|
color: var(--accent-cyan);
|
|
font-size: .74rem;
|
|
font-weight: 850;
|
|
letter-spacing: .14em;
|
|
text-transform: uppercase
|
|
}
|
|
.page-heading h1,.auth-card h1{
|
|
margin: 0;
|
|
font-size: clamp(2rem,4vw,3.35rem);
|
|
line-height: 1.08;
|
|
letter-spacing: -.04em
|
|
}
|
|
.page-heading p:not(.eyebrow),.auth-copy{
|
|
margin: .6rem 0 0;
|
|
color: var(--text-secondary)
|
|
}
|
|
.instance-grid{
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill,minmax(min(100%,260px),1fr));
|
|
gap: 20px;
|
|
max-width: 1400px;
|
|
margin: auto
|
|
}
|
|
.instance-card{
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
background: linear-gradient(145deg,#181b32,#111426);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 10px 24px #0004;
|
|
transition: border-color .18s,transform .18s,box-shadow .18s
|
|
}
|
|
.instance-card:hover{
|
|
transform: translateY(-2px);
|
|
border-color: #20d9f388;
|
|
box-shadow: 0 14px 34px #0007,0 0 20px #20d9f312
|
|
}
|
|
.instance-art{
|
|
position: relative;
|
|
display: grid;
|
|
height: 145px;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg,#232645,#12162c)
|
|
}
|
|
.instance-art:after{
|
|
content: "";
|
|
position: absolute;
|
|
inset: auto 0 0;
|
|
height: 45%;
|
|
background: linear-gradient(transparent,#111426)
|
|
}
|
|
.instance-art img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover
|
|
}
|
|
.instance-art>span:not(.status-badge){
|
|
font-size: 2rem;
|
|
font-weight: 900;
|
|
color: #20d9f366
|
|
}
|
|
.status-badge{
|
|
position: absolute;
|
|
z-index: 2;
|
|
right: 12px;
|
|
bottom: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 5px 9px;
|
|
border: 1px solid currentColor;
|
|
border-radius: 999px;
|
|
background: #080b16dd;
|
|
font-size: .72rem;
|
|
font-weight: 800
|
|
}
|
|
.status-badge i{
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: currentColor
|
|
}
|
|
.status-running{
|
|
color: var(--status-running)
|
|
}
|
|
.status-stopped{
|
|
color: var(--status-stopped)
|
|
}
|
|
.status-warning{
|
|
color: var(--status-warning)
|
|
}
|
|
.status-error{
|
|
color: var(--status-error)
|
|
}
|
|
.status-unknown{
|
|
color: #aab2c4
|
|
}
|
|
.instance-card-body{
|
|
padding: 17px 18px 19px
|
|
}
|
|
.game-name{
|
|
margin: 0;
|
|
color: var(--accent-cyan);
|
|
font-size: .78rem;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
letter-spacing: .08em
|
|
}
|
|
.instance-card h2{
|
|
margin: 5px 0 7px;
|
|
font-size: 1.16rem
|
|
}
|
|
.instance-id{
|
|
margin: 0;
|
|
overflow: hidden;
|
|
color: #747f99;
|
|
font-size: .72rem;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap
|
|
}
|
|
.summary-grid{
|
|
display: grid;
|
|
grid-template-columns: repeat(4,1fr);
|
|
gap: 14px;
|
|
max-width: 1400px;
|
|
margin: 26px auto 0
|
|
}
|
|
.summary-grid article{
|
|
padding: 18px;
|
|
background: #111425aa;
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px
|
|
}
|
|
.summary-grid span{
|
|
display: block;
|
|
color: var(--text-secondary);
|
|
font-size: .78rem
|
|
}
|
|
.summary-grid strong{
|
|
font-size: 1.65rem
|
|
}
|
|
.empty-state{
|
|
max-width: 1400px;
|
|
margin: auto;
|
|
padding: 80px 30px;
|
|
text-align: center;
|
|
background: #11142588;
|
|
border: 1px dashed #343a5c;
|
|
border-radius: var(--radius)
|
|
}
|
|
.empty-icon{
|
|
color: var(--accent-magenta);
|
|
font-size: 3rem
|
|
}
|
|
.empty-state h2{
|
|
margin: .5rem 0
|
|
}
|
|
.empty-state p{
|
|
color: var(--text-secondary)
|
|
}
|
|
.panel{
|
|
max-width: 1400px;
|
|
margin: 0 auto 22px;
|
|
padding: clamp(18px,3vw,30px);
|
|
background: linear-gradient(145deg,#15182d,#101322);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 12px 35px #0003
|
|
}
|
|
.panel h2{
|
|
margin: 0
|
|
}
|
|
.section-heading{
|
|
display: flex;
|
|
align-items: start;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
margin-bottom: 22px
|
|
}
|
|
.section-heading p,.help,.muted{
|
|
margin: .35rem 0;
|
|
color: var(--text-secondary);
|
|
font-size: .88rem
|
|
}
|
|
.settings-section{
|
|
scroll-margin-top: 20px
|
|
}
|
|
.tabs{
|
|
display: flex;
|
|
gap: 8px;
|
|
max-width: 1400px;
|
|
margin: 0 auto 20px;
|
|
padding: 7px;
|
|
background: #111425;
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
overflow-x: auto
|
|
}
|
|
.tabs a{
|
|
padding: 8px 13px;
|
|
border-radius: 8px;
|
|
color: var(--text-secondary);
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
white-space: nowrap
|
|
}
|
|
.tabs a:hover,.tabs a:focus{
|
|
background: var(--surface-hover);
|
|
color: var(--text-primary)
|
|
}
|
|
form{
|
|
display: grid;
|
|
gap: 15px
|
|
}
|
|
label{
|
|
display: grid;
|
|
gap: 6px;
|
|
color: #dce3f4;
|
|
font-size: .84rem;
|
|
font-weight: 700
|
|
}
|
|
input,textarea,select{
|
|
width: 100%;
|
|
padding: 11px 12px;
|
|
background: #0a0d1a;
|
|
color: var(--text-primary);
|
|
border: 1px solid #343957;
|
|
border-radius: 8px;
|
|
outline: 0
|
|
}
|
|
textarea{
|
|
resize: vertical
|
|
}
|
|
input:hover,textarea:hover,select:hover{
|
|
border-color: #59617f
|
|
}
|
|
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{
|
|
outline: 2px solid var(--accent-cyan);
|
|
outline-offset: 3px
|
|
}
|
|
button,.link-button{
|
|
justify-self: start;
|
|
padding: 10px 15px;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
background: linear-gradient(100deg,#7d37ed,var(--accent-magenta));
|
|
color: #fff;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
text-decoration: none
|
|
}
|
|
.button-secondary{
|
|
background: #171b30;
|
|
border: 1px solid #383d5b;
|
|
color: #dce3f4
|
|
}
|
|
.danger{
|
|
background: #a5283b;
|
|
color: #fff
|
|
}
|
|
.warning{
|
|
padding: 13px 15px;
|
|
border: 1px solid #8c572c;
|
|
border-left: 4px solid var(--accent-orange);
|
|
border-radius: 8px;
|
|
background: #2d1b14;
|
|
color: #ffd9bd
|
|
}
|
|
.error{
|
|
padding: 12px 14px;
|
|
border-left: 4px solid var(--status-error);
|
|
border-radius: 7px;
|
|
background: #351620;
|
|
color: #ffd8de
|
|
}
|
|
.form-grid,.filter-grid{
|
|
display: grid;
|
|
grid-template-columns: repeat(2,minmax(0,1fr));
|
|
gap: 15px
|
|
}
|
|
.filter-grid{
|
|
grid-template-columns: repeat(4,minmax(140px,1fr));
|
|
margin-bottom: 25px
|
|
}
|
|
.filter-grid button{
|
|
align-self: end
|
|
}
|
|
.inline{
|
|
display: inline
|
|
}
|
|
.inline+form{
|
|
margin-left: 7px
|
|
}
|
|
.channel-list{
|
|
display: grid;
|
|
gap: 9px;
|
|
margin: 0 0 24px;
|
|
padding: 0;
|
|
list-style: none
|
|
}
|
|
.channel-list li{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 15px;
|
|
padding: 13px 15px;
|
|
background: #0d1020;
|
|
border: 1px solid var(--border);
|
|
border-radius: 9px
|
|
}
|
|
.channel-list small{
|
|
display: block;
|
|
color: var(--text-secondary)
|
|
}
|
|
.two-panels{
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 24px
|
|
}
|
|
.two-panels>form+form{
|
|
padding-left: 24px;
|
|
border-left: 1px solid var(--border)
|
|
}
|
|
fieldset{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
margin: 0;
|
|
padding: 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px
|
|
}
|
|
legend{
|
|
padding: 0 6px;
|
|
color: var(--text-secondary);
|
|
font-size: .8rem
|
|
}
|
|
.check{
|
|
display: flex;
|
|
grid-template-columns: auto 1fr;
|
|
align-items: center;
|
|
gap: 8px
|
|
}
|
|
.check input{
|
|
width: auto
|
|
}
|
|
.table-wrap{
|
|
overflow-x: auto
|
|
}
|
|
table{
|
|
width: 100%;
|
|
border-collapse: collapse
|
|
}
|
|
th,td{
|
|
padding: 13px 12px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border);
|
|
white-space: nowrap
|
|
}
|
|
th{
|
|
color: #78829b;
|
|
font-size: .7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: .08em
|
|
}
|
|
td{
|
|
font-size: .85rem
|
|
}
|
|
code{
|
|
color: #8eeaf8
|
|
}
|
|
.outcome{
|
|
padding: 3px 7px;
|
|
border-radius: 99px;
|
|
background: #20243a
|
|
}
|
|
.outcome-allowed{
|
|
color: var(--status-running)
|
|
}
|
|
.outcome-denied,.outcome-failed{
|
|
color: var(--status-error)
|
|
}
|
|
.auth-body{
|
|
min-height: 100vh;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 24px;
|
|
background: radial-gradient(circle at 50% 0,#43175188,transparent 32rem),linear-gradient(145deg,#060812,#10132a)
|
|
}
|
|
.auth-card{
|
|
width: min(100%,430px);
|
|
padding: 34px;
|
|
background: #101322ee;
|
|
border: 1px solid #343957;
|
|
border-radius: 18px;
|
|
box-shadow: var(--shadow)
|
|
}
|
|
.auth-logo{
|
|
width: 78px;
|
|
height: 78px;
|
|
margin-bottom: 20px;
|
|
object-fit: cover;
|
|
border-radius: 18px;
|
|
box-shadow: 0 0 25px #ef2fb844
|
|
}
|
|
.auth-card h1{
|
|
font-size: 2.1rem
|
|
}
|
|
.auth-card form{
|
|
margin-top: 26px
|
|
}
|
|
.auth-card button{
|
|
width: 100%;
|
|
justify-self: stretch
|
|
}
|
|
.auth-copy{
|
|
font-size: .9rem
|
|
}
|
|
@media(max-width:1050px){
|
|
.summary-grid{
|
|
grid-template-columns: repeat(2,1fr)
|
|
}
|
|
.filter-grid{
|
|
grid-template-columns: repeat(2,1fr)
|
|
}
|
|
}
|
|
@media(max-width:760px){
|
|
.sidebar{
|
|
transform: translateX(-105%);
|
|
transition: transform .2s;
|
|
box-shadow: 20px 0 50px #000a
|
|
}
|
|
.nav-open .sidebar{
|
|
transform: none
|
|
}
|
|
.app-main{
|
|
margin-left: 0;
|
|
padding: 0 18px 50px
|
|
}
|
|
.mobile-header{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin: 0 -18px 28px;
|
|
padding: 12px 18px;
|
|
background: #0b0d18ee;
|
|
border-bottom: 1px solid var(--border);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 15
|
|
}
|
|
.mobile-header img{
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 9px
|
|
}
|
|
.menu-button{
|
|
margin-left: auto;
|
|
padding: 8px 12px;
|
|
background: #171b30;
|
|
border: 1px solid #383d5b
|
|
}
|
|
.page-heading{
|
|
align-items: start
|
|
}
|
|
.two-panels{
|
|
grid-template-columns: 1fr
|
|
}
|
|
.two-panels>form+form{
|
|
padding: 20px 0 0;
|
|
border-top: 1px solid var(--border);
|
|
border-left: 0
|
|
}
|
|
.section-heading{
|
|
display: grid
|
|
}
|
|
.channel-list li{
|
|
align-items: start;
|
|
flex-direction: column
|
|
}
|
|
.form-grid{
|
|
grid-template-columns: 1fr
|
|
}
|
|
}
|
|
@media(max-width:520px){
|
|
.instance-grid{
|
|
grid-template-columns: 1fr
|
|
}
|
|
.summary-grid,.filter-grid{
|
|
grid-template-columns: 1fr
|
|
}
|
|
.panel{
|
|
padding: 17px
|
|
}
|
|
.auth-card{
|
|
padding: 25px 22px
|
|
}
|
|
.instance-art{
|
|
height: 160px
|
|
}
|
|
}
|
|
.audit-filter-grid{
|
|
display: grid;
|
|
grid-template-columns: repeat(4,minmax(150px,1fr));
|
|
gap: 14px
|
|
}
|
|
.audit-filter-grid button{
|
|
align-self: end
|
|
}
|
|
.audit-list{
|
|
display: grid;
|
|
gap: 8px
|
|
}
|
|
.audit-event{
|
|
display: grid;
|
|
grid-template-columns: 180px minmax(220px,1fr) minmax(120px,.6fr) auto;
|
|
gap: 16px;
|
|
align-items: start;
|
|
padding: 15px 0;
|
|
border-bottom: 1px solid var(--border)
|
|
}
|
|
.audit-event time,.audit-event small{
|
|
color: var(--text-secondary);
|
|
font-size: .8rem
|
|
}
|
|
.audit-event small{
|
|
display: block;
|
|
margin-top: 3px
|
|
}
|
|
.audit-event details{
|
|
max-width: 260px;
|
|
color: var(--text-secondary);
|
|
font-size: .82rem
|
|
}
|
|
.audit-event details p{
|
|
white-space: normal
|
|
}
|
|
.audit-pagination{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-top: 22px
|
|
}
|
|
@media(max-width:760px){
|
|
.audit-filter-grid{
|
|
grid-template-columns: repeat(2,minmax(0,1fr))
|
|
}
|
|
.audit-event{
|
|
grid-template-columns: 1fr 1fr
|
|
}
|
|
.audit-event details{
|
|
grid-column: 1/-1
|
|
}
|
|
}
|
|
@media(max-width:520px){
|
|
.audit-filter-grid,.audit-event{
|
|
grid-template-columns: 1fr
|
|
}
|
|
}
|
|
.app-body{
|
|
background-color: #050814;
|
|
background-image: radial-gradient(circle at 12% 14%,#20d9f355 0 1px,transparent 1.5px),radial-gradient(circle at 78% 8%,#f4f7ff77 0 1px,transparent 1.5px),radial-gradient(circle at 55% 26%,#f02fb844 0 1px,transparent 1.5px),linear-gradient(165deg,#060917 0%,#080b18 52%,#070916 100%);
|
|
background-size: 137px 149px,191px 173px,223px 211px,auto
|
|
}
|
|
.sidebar{
|
|
width: 220px;
|
|
border-right-color: #f02fb866;
|
|
box-shadow: 8px 0 40px #0005
|
|
}
|
|
.app-main{
|
|
margin-left: 220px
|
|
}
|
|
.brand{
|
|
display: grid;
|
|
justify-items: center;
|
|
text-align: center;
|
|
padding-bottom: 20px
|
|
}
|
|
.brand img{
|
|
width: 72px;
|
|
height: 72px
|
|
}
|
|
.brand small{
|
|
display: none
|
|
}
|
|
.page-heading{
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid #232943
|
|
}
|
|
.page-heading h1{
|
|
font-size: clamp(1.9rem,3vw,2.6rem)
|
|
}
|
|
.instance-grid{
|
|
grid-template-columns: repeat(auto-fill,minmax(min(100%,280px),1fr));
|
|
gap: 16px
|
|
}
|
|
.instance-card{
|
|
border-color: #3d4667;
|
|
border-radius: 10px
|
|
}
|
|
.instance-art{
|
|
height: 112px;
|
|
border-bottom: 1px solid #424b6d
|
|
}
|
|
.instance-art:after{
|
|
height: 25%
|
|
}
|
|
.instance-card-body{
|
|
padding: 13px 15px 15px
|
|
}
|
|
.instance-card h2{
|
|
margin: 0;
|
|
font-size: 1.05rem
|
|
}
|
|
.instance-name{
|
|
margin: 3px 0 12px;
|
|
color: var(--text-secondary);
|
|
font-size: .84rem
|
|
}
|
|
.status-badge{
|
|
position: static;
|
|
display: inline-flex;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
font-size: .82rem
|
|
}
|
|
.summary-grid{
|
|
grid-template-columns: repeat(5,1fr);
|
|
gap: 12px
|
|
}
|
|
.summary-grid article{
|
|
position: relative;
|
|
padding: 15px 17px;
|
|
border-top: 2px solid #384260
|
|
}
|
|
.summary-grid strong{
|
|
display: block;
|
|
line-height: 1.1
|
|
}
|
|
.summary-total{
|
|
border-top-color: var(--accent-cyan)!important
|
|
}
|
|
.summary-running{
|
|
border-top-color: var(--status-running)!important
|
|
}
|
|
.summary-stopped{
|
|
border-top-color: var(--status-stopped)!important
|
|
}
|
|
.summary-warning{
|
|
border-top-color: var(--status-warning)!important
|
|
}
|
|
.summary-error{
|
|
border-top-color: var(--status-error)!important
|
|
}
|
|
.sr-only{
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0,0,0,0);
|
|
white-space: nowrap;
|
|
border: 0
|
|
}
|
|
@media(max-width:1050px){
|
|
.summary-grid{
|
|
grid-template-columns: repeat(3,1fr)
|
|
}
|
|
}
|
|
@media(max-width:760px){
|
|
.sidebar{
|
|
width: 250px
|
|
}
|
|
.app-main{
|
|
margin-left: 0
|
|
}
|
|
.brand{
|
|
display: flex;
|
|
justify-items: initial;
|
|
text-align: left
|
|
}
|
|
.brand img{
|
|
width: 54px;
|
|
height: 54px
|
|
}
|
|
.brand small{
|
|
display: block
|
|
}
|
|
}
|
|
@media(max-width:520px){
|
|
.summary-grid{
|
|
grid-template-columns: 1fr 1fr
|
|
}
|
|
.summary-grid article:first-child{
|
|
grid-column: 1/-1
|
|
}
|
|
}
|
|
@media(prefers-reduced-motion:reduce){
|
|
*{
|
|
scroll-behavior: auto!important;
|
|
transition: none!important
|
|
}
|
|
}
|
|
.auth-card{
|
|
padding: 0;
|
|
overflow: hidden
|
|
}
|
|
.auth-brand{
|
|
width: 100%;
|
|
line-height: 0
|
|
}
|
|
.auth-brand img{
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
object-fit: contain
|
|
}
|
|
.auth-content{
|
|
padding: 28px 34px 34px
|
|
}
|
|
.language-select{
|
|
display: flex;
|
|
grid-auto-flow: column;
|
|
justify-content: end;
|
|
gap: 7px;
|
|
margin: 0 0 18px
|
|
}
|
|
.language-select button{
|
|
padding: 5px 9px;
|
|
font-size: .75rem
|
|
}
|
|
.auth-content form:not(.language-select){
|
|
margin-top: 26px
|
|
}
|
|
@media(max-width:520px){
|
|
.auth-card{
|
|
padding: 0
|
|
}
|
|
.auth-content{
|
|
padding: 22px
|
|
}
|
|
.language-select{
|
|
justify-content: start
|
|
}
|
|
}
|
|
.instance-detail{
|
|
display: grid;
|
|
grid-template-columns: minmax(190px,300px) minmax(0,1fr);
|
|
gap: clamp(24px,5vw,64px);
|
|
max-width: 1120px;
|
|
margin: auto;
|
|
padding: clamp(20px,4vw,42px);
|
|
background: linear-gradient(145deg,#15182d,#101322);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius)
|
|
}
|
|
.instance-detail h1{
|
|
margin: 0;
|
|
font-size: clamp(2rem,5vw,3.6rem)
|
|
}
|
|
.detail-actions{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 9px;
|
|
margin: 0 0 30px
|
|
}
|
|
.detail-actions form{
|
|
display: block
|
|
}
|
|
.detail-actions button,.action-restore{
|
|
margin: 0;
|
|
border: 1px solid #ffffff22;
|
|
border-radius: 9px;
|
|
padding: 10px 14px;
|
|
font-weight: 850
|
|
}
|
|
.action-start{
|
|
background: linear-gradient(120deg,#117b58,#2bd69d)
|
|
}
|
|
.action-stop{
|
|
background: linear-gradient(120deg,#7d1d37,#f04f6c)
|
|
}
|
|
.action-backup{
|
|
background: linear-gradient(120deg,#164f96,#24b9ee)
|
|
}
|
|
.action-update{
|
|
background: linear-gradient(120deg,#93640d,#ffc644)
|
|
}
|
|
button:disabled{
|
|
opacity: .42;
|
|
cursor: not-allowed
|
|
}
|
|
.instance-info{
|
|
display: grid;
|
|
grid-template-columns: repeat(2,minmax(0,1fr));
|
|
gap: 12px;
|
|
margin: 28px 0 0
|
|
}
|
|
.instance-info div{
|
|
padding: 14px;
|
|
background: #0b1020;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px
|
|
}
|
|
.instance-info dt{
|
|
color: var(--text-secondary);
|
|
font-size: .8rem
|
|
}
|
|
.instance-info dd{
|
|
margin: 5px 0 0;
|
|
font-weight: 750
|
|
}
|
|
.instance-detail-lower{
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 22px;
|
|
max-width: 1120px;
|
|
margin: 22px auto
|
|
}
|
|
.backup-list{
|
|
display: grid;
|
|
gap: 9px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none
|
|
}
|
|
.backup-list li{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
background: #0b1020;
|
|
border: 1px solid var(--border);
|
|
border-radius: 9px
|
|
}
|
|
.backup-list small{
|
|
display: block;
|
|
color: var(--text-secondary)
|
|
}
|
|
.notice{
|
|
padding: 12px 14px;
|
|
background: #103427;
|
|
border-left: 4px solid var(--status-running);
|
|
border-radius: 7px
|
|
}
|
|
@media(max-width:700px){
|
|
.instance-detail,.instance-detail-lower{
|
|
grid-template-columns: 1fr
|
|
}
|
|
.instance-detail aside{
|
|
max-width: 300px;
|
|
margin: auto;
|
|
width: 100%
|
|
}
|
|
.detail-actions{
|
|
justify-content: flex-start
|
|
}
|
|
.instance-info{
|
|
grid-template-columns: 1fr
|
|
}
|
|
}
|
|
.catalog-tools{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px
|
|
}
|
|
.scan-button,.deploy-band button{
|
|
border: 1px solid #20d9f388;
|
|
border-radius: 10px;
|
|
padding: 10px 15px;
|
|
background: linear-gradient(110deg,#123b51,#55264d);
|
|
color: #fff;
|
|
font-weight: 800;
|
|
cursor: pointer
|
|
}
|
|
.catalog-grid{
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
|
|
gap: 22px;
|
|
max-width: 1400px;
|
|
margin: auto
|
|
}
|
|
.catalog-card{
|
|
text-decoration: none;
|
|
min-width: 0
|
|
}
|
|
.catalog-cover,.game-cover{
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg,#25233f,#101322);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
box-shadow: 0 12px 26px #0005;
|
|
aspect-ratio: 2/3
|
|
}
|
|
.catalog-cover img,.game-cover img{
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover
|
|
}
|
|
.cover-fallback,.game-cover>span{
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #20d9f366;
|
|
font-size: 3rem
|
|
}
|
|
.catalog-card h2{
|
|
margin: 10px 3px 0;
|
|
font-size: 1rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis
|
|
}
|
|
.catalog-card:hover .catalog-cover{
|
|
border-color: var(--accent-cyan);
|
|
box-shadow: 0 16px 32px #0008,0 0 22px #20d9f322;
|
|
transform: translateY(-3px)
|
|
}
|
|
.catalog-scan-result{
|
|
max-width: 1400px;
|
|
margin: 0 auto 22px;
|
|
padding: 14px 18px;
|
|
background: #12314466;
|
|
border: 1px solid #20d9f366;
|
|
border-radius: 12px
|
|
}
|
|
.catalog-scan-result ul{
|
|
margin: 8px 0 0;
|
|
padding-left: 20px;
|
|
color: var(--text-secondary)
|
|
}
|
|
.back-link{
|
|
display: inline-block;
|
|
margin: 0 auto 22px;
|
|
max-width: 1400px;
|
|
color: var(--accent-cyan);
|
|
text-decoration: none
|
|
}
|
|
.game-detail{
|
|
display: grid;
|
|
grid-template-columns: minmax(210px,330px) minmax(0,1fr);
|
|
gap: clamp(28px,5vw,70px);
|
|
max-width: 1120px;
|
|
margin: auto;
|
|
padding: clamp(20px,4vw,42px);
|
|
background: linear-gradient(145deg,#15182d,#101322);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius)
|
|
}
|
|
.game-detail h1{
|
|
margin: 0;
|
|
font-size: clamp(2rem,5vw,3.6rem)
|
|
}
|
|
.game-description{
|
|
max-width: 70ch;
|
|
color: var(--text-secondary);
|
|
font-size: 1.05rem
|
|
}
|
|
.deploy-band{
|
|
margin-top: 12px;
|
|
padding: 12px;
|
|
background: #0b1020;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px
|
|
}
|
|
.deploy-band button{
|
|
width: 100%;
|
|
cursor: not-allowed;
|
|
opacity: .7
|
|
}
|
|
.requirements-grid{
|
|
display: grid;
|
|
grid-template-columns: repeat(2,minmax(0,1fr));
|
|
gap: 16px;
|
|
margin-top: 30px
|
|
}
|
|
.requirements-grid section{
|
|
padding: 18px;
|
|
background: #0c1020;
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px
|
|
}
|
|
.requirements-grid h2{
|
|
margin: 0 0 12px;
|
|
color: var(--accent-cyan);
|
|
font-size: 1rem
|
|
}
|
|
.requirements-grid dl{
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 8px 12px;
|
|
margin: 0
|
|
}
|
|
.requirements-grid dt{
|
|
color: var(--text-secondary)
|
|
}
|
|
.requirements-grid dd{
|
|
margin: 0;
|
|
text-align: right
|
|
}
|
|
@media(max-width:700px){
|
|
.catalog-header{
|
|
align-items: start;
|
|
flex-direction: column
|
|
}
|
|
.catalog-tools{
|
|
width: 100%;
|
|
justify-content: space-between
|
|
}
|
|
.catalog-tools .instance-search{
|
|
flex: 1
|
|
}
|
|
.game-detail{
|
|
grid-template-columns: 1fr
|
|
}
|
|
.game-detail aside{
|
|
max-width: 300px;
|
|
margin: auto;
|
|
width: 100%
|
|
}
|
|
.requirements-grid{
|
|
grid-template-columns: 1fr
|
|
}
|
|
}
|