Add basic support for listing a server's databases

resources/styles/components/miscellaneous.css

@@ -7,114 +7,15 @@ code.clean {
     display: inline-block;
 }
 
-/**
- * Indicators for server online status.
- */
-.indicator {
-    @apply .bg-neutral-800 .border .border-primary-500;
-    border-radius: 50%;
-    width: 16px;
-    height: 16px;
+.grey-row-box {
+    @apply .flex .rounded .no-underline .text-neutral-200 .items-center .bg-neutral-700 .p-4 .border .border-transparent;
+    transition: border-color 150ms linear;
 
-    &.online {
-        @apply .bg-green-600 .border-green-500;
-        animation: onlineblink 2s infinite alternate;
+    &:not(.no-hover):hover {
+        @apply .border-neutral-500;
     }
 
-    &.offline {
-        @apply .bg-green-600 .border-red-500;
-        animation: offlineblink 2s infinite alternate;
-    }
-}
-
-/**
- * Usage indicator labels for the server listing.
- */
-.usage {
-    @apply .flex-1 .text-center .relative;
-
-    & > .indicator-title {
-        @apply .text-xs .uppercase .font-hairline .bg-white .absolute .text-primary-500;
-        margin-top:-9px;
-        padding: 0 8px;
-        left: 50%;
-        transform: translate(-50%, 0);
-    }
-}
-
-/**
- * Styling for elements that contain the core page content.
- */
-.content-box {
-    @apply .bg-white .p-6 .rounded .shadow .border .border-neutral-100;
-}
-
-/**
- * Flex boxes for server listing on user dashboard.
- */
-.server-card-container {
-    @apply .mb-4 .w-full;
-
-    @screen md {
-        @apply .w-1/2 .pr-4;
-
-        &:nth-of-type(2n) {
-            @apply .pr-0;
-        }
-    }
-
-    @screen lg {
-        @apply .w-1/3 .pr-4;
-
-        &:nth-of-type(2n) {
-            @apply .pr-4;
-        }
-
-        &:nth-of-type(3n) {
-            @apply .pr-0;
-        }
-    }
-
-    & > div {
-        @apply .flex .flex-col;
-        transition: box-shadow 150ms ease-in;
-
-        &:hover {
-            @apply .shadow-md;
-        }
-    }
-
-    & > div > .server-card {
-        @apply .flex .flex-col .p-4 .border .border-t-4 .border-neutral-100 .bg-white;
-        transition: all 100ms ease-in;
-
-        & .identifier-icon {
-            @apply .select-none .inline-block .rounded-full .text-white .text-center .leading-none .justify-center .w-8 .h-8 .mr-2 .flex .flex-row .items-center;
-        }
-
-        & a, & a:visited {
-            @apply .no-underline .text-neutral-800;
-        }
-    }
-
-    & > div > .footer {
-        @apply .border .border-neutral-100 .border-t-0 .bg-neutral-50 .shadow-inner;
-    }
-}
-
-.pillbox {
-    @apply .rounded-full .px-2 .py-1 .text-white .font-medium .leading-none .text-xs;
-}
-
-.server-search {
-    @apply .w-full .my-4;
-
-    & > input[type="text"] {
-        @apply .w-full .p-4 .rounded .border .border-neutral-200 .text-neutral-500;
-        transition: border 150ms ease-in;
-
-        &:focus {
-            @apply .border-primary-500;
-        }
+    & > div.icon {
+        @apply .rounded-full .bg-neutral-500 .p-3;
     }
 }