459 lines
8.6 KiB
CSS
459 lines
8.6 KiB
CSS
.app-main {
|
|
isolation: isolate;
|
|
position: relative;
|
|
}
|
|
.app-main::before {
|
|
background: url("/static/dogama-logo.png") center / min(58vw, 720px) no-repeat;
|
|
content: "";
|
|
filter: saturate(.8);
|
|
inset: 0;
|
|
opacity: .025;
|
|
pointer-events: none;
|
|
position: fixed;
|
|
z-index: 0;
|
|
}
|
|
.app-main::after {
|
|
background-image:
|
|
linear-gradient(90deg, #20d9f312 1px, transparent 1px),
|
|
linear-gradient(#f02fb80d 1px, transparent 1px);
|
|
background-size: 64px 64px;
|
|
bottom: 0;
|
|
content: "";
|
|
height: 34vh;
|
|
left: 220px;
|
|
mask-image: linear-gradient(transparent, #000);
|
|
opacity: .45;
|
|
perspective: 400px;
|
|
pointer-events: none;
|
|
position: fixed;
|
|
right: 0;
|
|
transform: perspective(380px) rotateX(62deg) scale(1.25);
|
|
transform-origin: bottom;
|
|
z-index: 0;
|
|
}
|
|
.app-main > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.sidebar {
|
|
padding: 26px 8px 18px;
|
|
width: 200px;
|
|
}
|
|
.app-main {
|
|
margin-left: 200px;
|
|
}
|
|
.app-main::after {
|
|
left: 200px;
|
|
}
|
|
.brand {
|
|
gap: 8px;
|
|
padding: 0 8px 28px;
|
|
}
|
|
.brand img {
|
|
height: 76px;
|
|
width: 76px;
|
|
}
|
|
.brand strong {
|
|
font-size: 1.45rem;
|
|
}
|
|
.brand small {
|
|
display: none !important;
|
|
}
|
|
.sidebar nav {
|
|
gap: 2px;
|
|
margin: 8px -8px 0;
|
|
}
|
|
.sidebar nav a,
|
|
.sidebar nav span.disabled {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 11px;
|
|
min-height: 52px;
|
|
padding-left: 24px;
|
|
padding-right: 20px;
|
|
}
|
|
.sidebar nav a.active {
|
|
border-left-color: var(--accent-cyan);
|
|
border-radius: 0 10px 10px 0;
|
|
border-right-color: var(--accent-magenta);
|
|
box-shadow: inset 4px 0 var(--accent-cyan), inset -3px 0 var(--accent-magenta), 0 0 22px #cf2fc326;
|
|
}
|
|
.sidebar nav a: :before,
|
|
.sidebar nav span.disabled::before {
|
|
color: #a9b4ca;
|
|
display: grid;
|
|
flex: 0 0 22px;
|
|
font-size: 1rem;
|
|
height: 22px;
|
|
place-items: center;
|
|
width: 22px;
|
|
}
|
|
.sidebar nav a.active::before {
|
|
color: var(--accent-cyan);
|
|
}
|
|
.nav-instances::before {
|
|
content: "\25A4";
|
|
}
|
|
.nav-catalog::before {
|
|
content: "\2667";
|
|
}
|
|
.nav-backups::before {
|
|
content: "\25A3";
|
|
}
|
|
.nav-settings::after {
|
|
content: "\203A";
|
|
margin-left: auto;
|
|
}
|
|
.sidebar nav span.disabled {
|
|
border: 1px solid transparent;
|
|
border-radius: 10px;
|
|
color: #a5aec2;
|
|
cursor: not-allowed;
|
|
font-weight: 650;
|
|
opacity: .72;
|
|
padding-bottom: 11px;
|
|
padding-top: 11px;
|
|
}
|
|
.account-card {
|
|
background: #0d1120cc;
|
|
border: 1px solid #252c45;
|
|
border-radius: 10px;
|
|
margin-bottom: 10px;
|
|
padding: 13px 12px;
|
|
}
|
|
.account .avatar {
|
|
background: #151126;
|
|
border: 1px solid var(--accent-magenta);
|
|
color: #ef54cf;
|
|
height: 42px;
|
|
width: 42px;
|
|
}
|
|
.account-chevron {
|
|
color: var(--text-secondary);
|
|
margin-left: auto;
|
|
}
|
|
.account form {
|
|
border-top: 1px solid #22283e;
|
|
padding-top: 10px;
|
|
}
|
|
.account .signout-button {
|
|
align-items: center;
|
|
background: transparent;
|
|
border: 0;
|
|
box-shadow: none;
|
|
color: var(--text-secondary);
|
|
display: flex;
|
|
gap: 11px;
|
|
padding: 10px 12px;
|
|
width: 100%;
|
|
}
|
|
.account .signout-button:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
.nav-dashboard::before {
|
|
content: "⌂";
|
|
}
|
|
.nav-audit::before {
|
|
content: "▣";
|
|
}
|
|
.nav-settings::before {
|
|
content: "⚙";
|
|
}
|
|
.page-heading {
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
.instance-search {
|
|
max-width: 320px;
|
|
position: relative;
|
|
width: min(100%, 320px);
|
|
}
|
|
.instance-search input {
|
|
background: #090c19cc;
|
|
border-color: #3c4565;
|
|
border-radius: 9px;
|
|
padding-left: 42px;
|
|
padding-right: 42px;
|
|
}
|
|
.instance-search::before {
|
|
color: var(--text-secondary);
|
|
content: "⌕";
|
|
font-size: 1.35rem;
|
|
left: 13px;
|
|
position: absolute;
|
|
top: 5px;
|
|
z-index: 1;
|
|
}
|
|
.instance-search kbd {
|
|
background: #15192b;
|
|
border: 1px solid #313753;
|
|
border-radius: 5px;
|
|
color: var(--text-secondary);
|
|
font: inherit;
|
|
padding: 0 7px;
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 9px;
|
|
}
|
|
.summary-grid {
|
|
margin: 0 auto 22px;
|
|
}
|
|
.summary-grid article {
|
|
background: linear-gradient(145deg, #111628dd, #0b0f1ddd);
|
|
min-height: 76px;
|
|
}
|
|
.instance-grid {
|
|
position: relative;
|
|
}
|
|
.instance-card[hidden] {
|
|
display: none;
|
|
}
|
|
.search-empty {
|
|
color: var(--text-secondary);
|
|
padding: 48px 20px;
|
|
text-align: center;
|
|
}
|
|
button,
|
|
.link-button {
|
|
background: linear-gradient(100deg, #782fd9, #e52eb0 65%, #14c9ed);
|
|
border: 1px solid #ef45c2;
|
|
box-shadow: 0 0 18px #f02fb81f;
|
|
}
|
|
.button-secondary {
|
|
background: #11162a;
|
|
border-color: #38415f;
|
|
box-shadow: none;
|
|
}
|
|
.tabs {
|
|
background: #0c1020dd;
|
|
border-color: #303955;
|
|
}
|
|
@media (max-width: 760px) {
|
|
.app-main::after {
|
|
left: 0;
|
|
}
|
|
.page-heading {
|
|
align-items: stretch;
|
|
display: grid;
|
|
}
|
|
.instance-search {
|
|
max-width: none;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.brand.brand-image {
|
|
display: block;
|
|
padding: 0 14px 28px;
|
|
}
|
|
.brand.brand-image img {
|
|
display: block;
|
|
width: min(100%, 156px);
|
|
height: auto;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
.dashboard-header {
|
|
margin-bottom: 26px;
|
|
}
|
|
.dashboard-section {
|
|
max-width: 1400px;
|
|
margin: 0 auto 24px;
|
|
}
|
|
.summary-grid {
|
|
grid-template-columns: repeat(5, minmax(0,1fr));
|
|
}
|
|
.summary-card {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.summary-card::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: auto -12px -32px auto;
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
filter: blur(26px);
|
|
opacity: .18;
|
|
}
|
|
.summary-card .summary-icon {
|
|
float: right;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 1px solid currentColor;
|
|
border-radius: 9px;
|
|
font-size: 1rem;
|
|
}
|
|
.summary-card.total {
|
|
color: var(--accent-cyan);
|
|
}
|
|
.summary-card.running {
|
|
color: var(--status-running);
|
|
}
|
|
.summary-card.stopped {
|
|
color: var(--status-error);
|
|
}
|
|
.summary-card.updating {
|
|
color: var(--status-warning);
|
|
}
|
|
.summary-card.error {
|
|
color: #ff3c5f;
|
|
}
|
|
.summary-card > span:not(.summary-icon) {
|
|
color: var(--text-secondary);
|
|
}
|
|
.summary-card strong {
|
|
display: block;
|
|
color: var(--text-primary);
|
|
}
|
|
.instance-card h3 {
|
|
margin: 5px 0 7px;
|
|
font-size: 1.16rem;
|
|
}
|
|
.dashboard-lower {
|
|
display: grid;
|
|
grid-template-columns: repeat(2,minmax(0,1fr));
|
|
gap: 22px;
|
|
max-width: 1400px;
|
|
margin: auto;
|
|
}
|
|
.dashboard-lower .panel {
|
|
margin: 0;
|
|
max-width: none;
|
|
}
|
|
.panel-empty {
|
|
color: var(--text-secondary);
|
|
margin: 0;
|
|
padding: 26px 0;
|
|
}
|
|
.activity-list {
|
|
display: grid;
|
|
gap: 14px;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.activity-list li {
|
|
display: grid;
|
|
grid-template-columns: 32px minmax(0,1fr) auto;
|
|
align-items: center;
|
|
gap: 11px;
|
|
padding-bottom: 14px;
|
|
border-bottom: 1px solid #262d47;
|
|
}
|
|
.activity-list li:last-child {
|
|
border: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
.activity-icon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
color: var(--accent-cyan);
|
|
background: #102237;
|
|
border: 1px solid #245574;
|
|
border-radius: 8px;
|
|
}
|
|
.activity-list strong,.activity-list span {
|
|
display: block;
|
|
}
|
|
.activity-list div span,.activity-list time {
|
|
color: var(--text-secondary);
|
|
font-size: .78rem;
|
|
}
|
|
.activity-list time {
|
|
white-space: nowrap;
|
|
}
|
|
.system-list {
|
|
display: grid;
|
|
gap: 0;
|
|
margin: 0;
|
|
}
|
|
.system-list > div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
min-height: 44px;
|
|
border-bottom: 1px solid #262d47;
|
|
}
|
|
.system-list > div:last-child {
|
|
border: 0;
|
|
}
|
|
.system-list dt {
|
|
color: var(--text-secondary);
|
|
}
|
|
.system-list dd {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: end;
|
|
gap: 8px;
|
|
margin: 0;
|
|
text-align: right;
|
|
}
|
|
.system-list .is-good::before,.system-list .is-bad::before {
|
|
content: "";
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
box-shadow: 0 0 10px currentColor;
|
|
}
|
|
.system-list .is-good {
|
|
color: var(--status-running);
|
|
}
|
|
.system-list .is-bad {
|
|
color: var(--status-error);
|
|
}
|
|
.storage-track {
|
|
display: block;
|
|
width: 90px;
|
|
height: 6px;
|
|
overflow: hidden;
|
|
border-radius: 99px;
|
|
background: #272e49;
|
|
}
|
|
.storage-track i {
|
|
display: block;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: linear-gradient(90deg,var(--accent-cyan),var(--accent-magenta));
|
|
}
|
|
@media (max-width: 1050px) {
|
|
.summary-grid {
|
|
grid-template-columns: repeat(3,minmax(0,1fr));
|
|
}
|
|
.dashboard-lower {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
@media (max-width: 600px) {
|
|
.summary-grid {
|
|
grid-template-columns: repeat(2,minmax(0,1fr));
|
|
}
|
|
.summary-card:last-child {
|
|
grid-column: span 2;
|
|
}
|
|
.activity-list li {
|
|
grid-template-columns: 32px minmax(0,1fr);
|
|
}
|
|
.activity-list time {
|
|
grid-column: 2;
|
|
}
|
|
.system-list > div {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
padding: 10px 0;
|
|
gap: 3px;
|
|
}
|
|
.system-list dd {
|
|
justify-content: start;
|
|
text-align: left;
|
|
}
|
|
}
|