Refresh

resources/css/app.css

@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    @import "base/_index";
+}
+
+@layer components {
+    @import "components/_index";
+}
+
+@layer utilities {
+    @import "utilities/_index";
+}

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;
+}

resources/css/components/_index.css

@@ -0,0 +1,6 @@
+@import "list.css";
+@import "badge.css";
+@import "folder.css";
+@import "highlight.css";
+@import "prose.css";
+@import "group-status.css";

resources/css/components/badge.css

@@ -0,0 +1,27 @@
+.badge {
+    @apply rounded-full text-xs flex items-center whitespace-nowrap px-2 py-0.5 space-x-1;
+
+    &.default {
+        @apply bg-gray-100 text-gray-500;
+        @apply dark:bg-gray-500 dark:text-white;
+    }
+
+    &.success {
+        @apply bg-green-500 text-white;
+        @apply dark:bg-green-800 dark:text-white;
+    }
+
+    &.danger {
+        @apply bg-red-500 text-white;
+        @apply dark:bg-red-800 dark:text-white;
+    }
+
+    &.warning {
+        @apply bg-orange-500 text-white;
+    }
+
+    &.info {
+        @apply bg-blue-400 text-white;
+        @apply dark:bg-blue-800 dark:text-white;
+    }
+}

resources/css/components/folder.css

@@ -0,0 +1,19 @@
+/* Regular folder */
+.folder-common {
+    @apply text-orange-400;
+}
+
+/* Unread items folder - with unread items */
+.folder-unread-not-empty {
+    @apply text-purple-400;
+}
+
+/* Unread items folder - empty */
+.folder-unread {
+    @apply text-gray-500;
+}
+
+/* Root folder */
+.folder-root {
+    @apply text-blue-400;
+}

resources/css/components/group-status.css

@@ -0,0 +1,26 @@
+.group-status-own {
+    @apply text-white bg-green-800;
+}
+
+.group-status-created {
+    @apply text-white bg-green-800;
+}
+
+.group-status-invited {
+    @apply text-white bg-orange-700;
+}
+
+.group-status-accepted {
+    @apply text-white bg-green-800;
+}
+
+.group-status-rejected {
+    @apply text-white bg-red-800;
+}
+
+.group-status-left {
+}
+
+.group-status-joining {
+    @apply text-white bg-orange-700;
+}

resources/css/components/highlight.css

@@ -0,0 +1,3 @@
+.highlight {
+    @apply rounded px-1;
+}

resources/css/components/list.css

@@ -0,0 +1,160 @@
+.list {
+    &.vertical {
+        @apply flex flex-col p-1;
+    }
+
+    &.horizontal {
+        @apply flex flex-row flex-wrap p-0;
+    }
+
+    &.items-rounded > * {
+        @apply rounded;
+    }
+
+    &.spaced > * {
+        @apply mb-0.5;
+    }
+
+    &.compact > * {
+        @apply py-1;
+    }
+
+    &.alt {
+        @apply rounded;
+        @apply bg-gray-50;
+        @apply dark:bg-gray-850;
+    }
+
+    & > * {
+        @apply px-2 py-2 flex-none;
+
+        &.emphasize {
+            @apply text-blue-300;
+            @apply dark:text-gray-100;
+
+            &:hover {
+                @apply text-blue-500;
+                @apply dark:text-white;
+            }
+        }
+
+        &.list-item,
+        & .list-item {
+            @apply flex items-center justify-between space-x-1;
+
+            & .list-item-text {
+                @apply flex-grow truncate;
+            }
+
+            & .list-item-title {
+                @apply mr-2 whitespace-nowrap;
+            }
+
+            & .list-item-value {
+                @apply text-right;
+
+                & code {
+                    @apply break-all;
+                }
+            }
+        }
+
+        & .icons,
+        & .badges,
+        & .handle {
+            @apply flex-none flex items-center space-x-1;
+        }
+
+        & .handle {
+            cursor: ns-resize;
+        }
+
+        & .caret {
+            @apply dark:text-gray-500;
+
+            @apply w-4 h-4;
+        }
+
+        &.text-xs {
+            & img,
+            & svg,
+            & .caret {
+                max-width: 0.75rem;
+                max-height: 0.75rem;
+            }
+        }
+
+        & img,
+        & svg,
+        & .caret {
+            width: 1rem;
+            height: 1rem;
+        }
+
+        & img.favicon-lg {
+            width: 2rem;
+            height: 2rem;
+			@apply flex-none;
+        }
+
+        &:hover {
+            @apply bg-gray-200 text-gray-500;
+            @apply dark:bg-gray-600 dark:text-gray-400;
+        }
+
+        &.selected {
+            @apply bg-blue-500 text-white;
+            @apply dark:bg-blue-800 dark:text-white;
+
+            & .caret {
+                @apply dark:text-gray-500;
+            }
+
+            &:hover {
+                @apply bg-blue-400;
+                @apply dark:bg-blue-700;
+            }
+        }
+
+        &.dragged-over {
+            @apply bg-green-200 text-gray-500;
+            @apply dark:bg-green-800 dark:text-white;
+        }
+
+        &.cannot-drop {
+            @apply bg-red-200 text-gray-500;
+            @apply dark:bg-red-800 dark:text-white;
+        }
+    }
+
+    &.striped > * {
+        @apply odd:bg-white;
+        @apply dark:odd:bg-gray-750;
+
+        &.emphasize {
+            &:hover {
+                @apply text-blue-500;
+                @apply dark:text-white;
+            }
+        }
+
+        &:hover {
+            @apply bg-gray-200 text-gray-500;
+            @apply dark:bg-gray-600 dark:text-gray-400;
+        }
+
+        &.selected {
+            @apply bg-blue-500 text-white;
+            @apply dark:bg-blue-800 dark:text-white;
+
+            & .caret {
+                @apply dark:text-gray-500;
+            }
+
+            &:hover {
+                @apply bg-blue-400 text-white;
+                @apply dark:bg-blue-700;
+            }
+        }
+    }
+}

resources/css/components/prose.css

@@ -0,0 +1,109 @@
+.cyca-prose {
+    @apply mx-auto mb-6 max-w-prose shadow-lg rounded px-2 py-2 text-justify;
+    @apply bg-white;
+    @apply dark:bg-gray-700;
+
+    max-width: 100%;
+
+    & p {
+        @apply text-justify my-4 leading-7;
+    }
+
+    & img {
+        @apply my-2;
+
+        max-width: 100%;
+    }
+
+    & figure {
+        & figcaption {
+            @apply text-center italic text-sm;
+        }
+    }
+
+    & pre {
+        @apply bg-gray-900 text-gray-400 p-2 rounded overflow-auto;
+    }
+
+    & table {
+        @apply min-w-full divide-y border;
+        @apply divide-gray-300 border-gray-300;
+        @apply dark:divide-gray-800 dark:border-gray-800;
+
+        & tbody {
+            @apply divide-y;
+            @apply divide-gray-300;
+            @apply dark:divide-gray-800;
+
+            & tr {
+                @apply odd:bg-gray-100;
+                @apply dark:odd:bg-gray-600;
+            }
+        }
+
+        & td,
+        & th {
+            @apply px-2 py-1;
+        }
+    }
+
+    & h1,
+    & h2,
+    & h3,
+    & h4,
+    & h5,
+    & h6 {
+        @apply text-black;
+        @apply dark:text-white;
+    }
+
+    & h1 {
+        @apply text-2xl my-6;
+    }
+
+    & h2 {
+        @apply text-xl my-4;
+    }
+
+    & h3 {
+        @apply text-lg my-2;
+    }
+
+    & ul,
+    & ol {
+        @apply mx-8;
+
+        & li {
+            @apply my-2 p-2 rounded;
+
+            @apply odd:bg-gray-100;
+            @apply dark:odd:bg-gray-600;
+        }
+    }
+
+    & ul {
+        @apply list-disc;
+    }
+
+    & ol {
+        @apply list-decimal;
+    }
+
+    & a {
+        @apply underline;
+        @apply text-blue-300;
+        @apply dark:text-blue-500;
+
+        &:hover {
+            @apply no-underline;
+            @apply text-blue-400;
+            @apply dark:text-blue-400;
+        }
+    }
+
+    & blockquote {
+        @apply border-l-4 pl-4 italic mx-8 rounded p-2;
+        @apply border-gray-500 bg-gray-100;
+        @apply dark:border-gray-600 dark:bg-gray-800;
+    }
+}

resources/css/utilities/_index.css

@@ -0,0 +1,2 @@
+@import "readable.css";
+@import "http-status.css";

resources/css/utilities/http-status.css

@@ -0,0 +1,23 @@
+.http-status-general-error {
+    @apply text-red-500;
+}
+
+.http-status-info {
+
+}
+
+.http-status-success {
+    @apply text-green-500;
+}
+
+.http-status-redirection {
+    @apply text-blue-500;
+}
+
+.http-status-client-error {
+    @apply text-orange-500;
+}
+
+.http-status-server-error {
+    @apply text-red-500;
+}

resources/css/utilities/readable.css

@@ -0,0 +1,32 @@
+.readable {
+    @apply font-serif text-xl no-underline break-all;
+    letter-spacing: 0.2rem;
+
+    & .letter {
+    }
+
+    & .capital {
+        @apply font-bold;
+    }
+
+    & .number {
+        @apply text-green-400;
+    }
+
+    & .other {
+        @apply text-purple-500 font-bold;
+    }
+
+    & .empty::before {
+        @apply text-blue-400 inline-block;
+        content: "❡";
+    }
+
+    & .operator {
+        @apply text-purple-500 font-bold;
+    }
+
+    & .suspicious {
+        @apply text-red-500 font-bold;
+    }
+}