diff --git a/client/instance.css b/client/instance.css index 8827d86d..32188ced 100644 --- a/client/instance.css +++ b/client/instance.css @@ -14,11 +14,22 @@ "cryps cryps info"; } +@media (max-width: 1920px) { + .instance { + grid-template-columns: 2fr 2fr 1fr; + } + + .instance .info table td svg { + height: 50%; + } +} + .instance .top { grid-area: top; } .instance .info { + font-size: 75%; margin-left: 1em; grid-area: info; display: flex; @@ -61,14 +72,19 @@ .vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus { - color: black; + color: white; } -.vbox-btn.reclaiming, .vbox-btn.reclaiming:hover { - color: #a52a2a; +.vbox-btn.reclaiming, .vbox-btn.reclaim.reclaiming:hover { + background: #a52a2a; + color: black; box-shadow: inset 0.5em 0 0 0 #a52a2a; } +.vbox-btn.reclaim:hover { + color: #a52a2a; +} + .vbox-hdr { display: flex; align-items: flex-end; @@ -88,17 +104,12 @@ .vbox button { width: 100%; margin: 0; - background-color: #444; - color: black; + background-color: #333; border-width: 0; } -.vbox-btn:hover { - color: black; -} - .vbox-table td { - transition-property: all; + transition-property: color background border; transition-duration: 0.5s; transition-delay: 0; transition-timing-function: ease; @@ -106,8 +117,7 @@ } .vbox-table table td:active { - background-color: #444; - color: black; + background-color: #333; } /* CRYP LIST */ @@ -143,6 +153,7 @@ .instance-cryp .name { grid-area: name; + margin-bottom: 0.5em; } .instance-cryp .avatar { diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 1e5853ae..daea780c 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -212,7 +212,7 @@ function Vbox(args) { } const classes = `vbox ${vboxHidden ? 'hidden' : ''}`; - const reclaimClass = `instance-btn instance-ui-btn vbox-btn ${reclaiming ? 'reclaiming' : ''}`; + const reclaimClass = `instance-btn instance-ui-btn vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`; return (