Nyoom, bye bye Vue

2019-06-28 22:52:57 -07:00 · 2019-06-28 22:52:57 -07:00 · e69d55ec6f
commit e69d55ec6f
parent 109bed4f7d
80 changed files with 2 additions and 5097 deletions
--- a/resources/styles/components/miscellaneous.css
+++ b/resources/styles/components/miscellaneous.css
@ -0,0 +1,120 @@
+code.clean {
+    @apply .font-mono .px-2 .py-1;
+    background-color: #eef1f6;
+    color: #596981;
+    border-radius: 2px;
+    border: 1px solid rgba(0, 0, 0, .1);
+    display: inline-block;
+}
+
+/**
+ * Indicators for server online status.
+ */
+.indicator {
+    @apply .bg-neutral-800 .border .border-primary-500;
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+
+    &.online {
+        @apply .bg-green-600 .border-green-500;
+        animation: onlineblink 2s infinite alternate;
+    }
+
+    &.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;
+        }
+    }
+}