fix(styles): gecut layout

Author: MM25Zamanian

packages/styles/src/css/layout.css

@@ -1,5 +1,36 @@
 @layer utilities {
   .gecut-layout {
+    * {
+      @apply select-none;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    span,
+    a,
+    i,
+    b,
+    strong,
+    em,
+    code,
+    kbd,
+    var,
+    cite,
+    dfn,
+    abbr,
+    address,
+    q,
+    blockquote,
+    ins,
+    del {
+      @apply select-auto;
+    }
+
     body {
       main {
         &.has-top-bar {

packages/styles/src/index.css

@@ -6,27 +6,8 @@
 @import './css/alpine.css';
 @import './css/form.css';
 @import './css/scrollbar.css';
+@import './css/layout.css';
 @import './css/utilities.css';
 @import './css/typography.css';
 
 @import './components/components.css';
-
-@layer base {
-  gecut-root,
-  .root {
-    @apply flex flex-col h-full w-full overflow-hidden relative;
-  }
-
-  main[role='main'] {
-    @apply flex flex-col flex-1 overflow-hidden relative;
-  }
-
-  .gecut-page,
-  .page {
-    &.scrollable {
-      @apply overflow-x-auto;
-    }
-
-    @apply flex flex-col h-full gap-2;
-  }
-}

packages/styles/src/plugins/translucent.ts

@@ -2,10 +2,10 @@ import plugin from 'tailwindcss/plugin.js';
 
 export const translucentPlugin = plugin(({addUtilities}) => {
   addUtilities({
-    '@supports (backdrop-filter: blur(20px))': {
+    '@supports (backdrop-filter: blur(0.75rem))': {
       '.translucent': {
-        '--tw-bg-opacity': '0.8 !important',
-        'backdrop-filter': 'saturate(180%) blur(20px)',
+        '--tw-bg-opacity': '0.7 !important',
+        'backdrop-filter': 'saturate(120%) blur(0.75rem)',
       },
     },
   });