Refresh

resources/css/base/_index.css

@@ -0,0 +1,4 @@
+@import "article.css";
+@import "forms/_index.css";
+@import "scrollbar.css";
+@import "details.css";

resources/css/base/article.css

@@ -0,0 +1,37 @@
+article {
+    @apply h-full w-full flex flex-col;
+
+    & header {
+        @apply flex-none flex flex-row items-center justify-between text-lg p-2;
+        @apply bg-gray-200;
+        @apply dark:bg-gray-600 dark:text-white;
+
+        & .icons,
+        & .badges,
+        & .tools {
+            @apply flex-shrink flex items-center;
+        }
+
+        & h1 {
+            @apply flex-grow truncate;
+        }
+
+        & .badges,
+        & .tools > * {
+            @apply ml-2;
+        }
+
+        & img,
+        & svg,
+        & .caret {
+            @apply mr-1;
+
+            max-width: 1.125rem;
+            max-height: 1.125rem;
+        }
+    }
+
+    & .body {
+        @apply flex-grow overflow-auto p-2 xl:p-4;
+    }
+}

resources/css/base/details.css

@@ -0,0 +1,15 @@
+details {
+    &.details-block {
+        @apply mb-1 rounded w-full;
+        @apply bg-gray-100;
+        @apply dark:bg-gray-700;
+    }
+
+    & summary {
+        @apply px-2 py-1 cursor-pointer;
+    }
+
+    & .body {
+        @apply p-2;
+    }
+}

resources/css/base/forms/_index.css

@@ -0,0 +1,8 @@
+@import "form.css";
+@import "form-group.css";
+@import "input-group.css";
+@import "label.css";
+@import "input.css";
+@import "button.css";
+@import "textarea.css";
+@import "select.css";

resources/css/base/forms/button.css

@@ -0,0 +1,53 @@
+button,
+a.button {
+    @apply rounded text-left flex-shrink flex items-center whitespace-nowrap space-x-1;
+
+    & svg {
+        @apply flex-none;
+    }
+
+    &[type="submit"],
+    &.info {
+        @apply px-2 py-1 text-sm;
+        @apply bg-blue-500 text-white;
+        @apply dark:bg-blue-800 dark:text-white;
+
+        &:hover {
+            @apply bg-blue-400;
+            @apply dark:bg-blue-700;
+        }
+    }
+
+    &.success {
+        @apply px-2 py-1 text-sm;
+        @apply bg-green-500 text-white;
+        @apply dark:bg-green-800 dark:text-white;
+
+        &:hover {
+            @apply bg-green-400;
+            @apply dark:bg-green-700;
+        }
+    }
+
+    &.danger {
+        @apply px-2 py-1 text-sm;
+        @apply bg-red-500 text-white;
+        @apply dark:bg-red-800 dark:text-white;
+
+        &:hover {
+            @apply bg-red-400;
+            @apply dark:bg-red-700;
+        }
+    }
+
+    &.secondary {
+        @apply px-2 py-1 text-sm;
+        @apply bg-gray-400 text-white;
+        @apply dark:bg-gray-700 dark:text-white;
+
+        &:hover {
+            @apply bg-gray-300;
+            @apply dark:bg-gray-600;
+        }
+    }
+}

resources/css/base/forms/form-group.css

@@ -0,0 +1,7 @@
+.form-group {
+    @apply mb-4 w-full;
+
+    &.last {
+        @apply mt-8 mb-0;
+    }
+}

resources/css/base/forms/form.css

@@ -0,0 +1,3 @@
+form {
+    @apply mb-2;
+}

resources/css/base/forms/input-group.css

@@ -0,0 +1,3 @@
+.input-group {
+    @apply flex items-stretch space-x-2 w-full;
+}

resources/css/base/forms/input.css

@@ -0,0 +1,24 @@
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="url"] {
+    @apply w-full flex-grow rounded px-2 py-1 border;
+    @apply bg-white text-gray-500 border-gray-300;
+    @apply dark:bg-gray-600 dark:text-gray-100 dark:border-gray-600;
+}
+
+input[type="search"] {
+    @apply w-full flex-grow rounded px-2 py-1 border;
+    @apply bg-white text-gray-500 border-gray-300;
+    @apply dark:bg-gray-500 dark:text-gray-100 dark:border-gray-600;
+}
+
+input[type="password"] {
+    @apply tracking-widest;
+}
+
+input[type="color"] {
+    @apply rounded p-0 m-0 h-8 w-12 border-none appearance-none;
+    @apply bg-white;
+    @apply dark:bg-gray-600;
+}

resources/css/base/forms/label.css

@@ -0,0 +1,3 @@
+label {
+    @apply mb-1 flex-shrink whitespace-nowrap flex items-center;
+}

resources/css/base/forms/select.css

@@ -0,0 +1,5 @@
+select {
+    @apply mt-1 block w-full py-0 px-2 border rounded focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
+    @apply border-gray-300 bg-white;
+    @apply dark:border-gray-500 dark:bg-gray-500 dark:text-white;
+}

resources/css/base/forms/textarea.css

@@ -0,0 +1,5 @@
+textarea {
+    @apply rounded w-full;
+    @apply bg-white;
+    @apply dark:bg-gray-500 dark:text-white;
+}

resources/css/base/scrollbar.css

@@ -0,0 +1,24 @@
+/* The emerging W3C standard
+   that is currently Firefox-only */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: theme("colors.white") theme("colors.gray.300");
+
+    &:dark {
+        scrollbar-color: theme("colors.gray.900") theme("colors.gray.800");
+    }
+}
+
+/* Works on Chrome/Edge/Safari */
+*::-webkit-scrollbar {
+    @apply w-2;
+}
+*::-webkit-scrollbar-track {
+    @apply bg-gray-300;
+    @apply dark:bg-gray-900;
+}
+*::-webkit-scrollbar-thumb {
+    @apply rounded;
+    @apply bg-white;
+    @apply dark:bg-gray-500;
+}