Move omorphia styles (#161)

* Move omorphia styles * Fix errors * Fix comp * fix btn brand highlight * add dayjs properly * Add raised button * Fix fromnow * Add plugin * Run intl extract
modrinth · Nov 29, 2023 · 4856a6a · 4856a6a
1 parent f6eff09
commit 4856a6a
Show file tree

Hide file tree

Showing 23 changed files with 2,180 additions and 1,730 deletions.
diff --git a/lib/assets/icons/right-arrow.svg b/lib/assets/icons/right-arrow.svg
diff --git a/lib/assets/styles/classes.scss b/lib/assets/styles/classes.scss
@@ -223,6 +223,34 @@
   }
 }
 
+.universal-modal {
+  @extend .universal-body;
+
+  padding: var(--spacing-card-bg);
+  display: flex;
+  flex-direction: column;
+
+  > p:first-child {
+    margin-top: 0;
+  }
+
+  @media screen and (max-width: 750px) {
+    .adjacent-input,
+    &.adjacent-input &:not(&.small) {
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+
+  @media screen and (max-width: calc(600px + 2rem)) {
+    .adjacent-input,
+    &.adjacent-input &:not(&.small) {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+}
+
 // CLICKABLES/BUTTONS
 a,
 .clickable {
@@ -245,12 +273,12 @@ a,
     cursor: pointer;
 
     &:not(.btn-outline.btn-hover-filled, .btn-transparent) {
-      filter: brightness(0.85);
+      filter: var(--filter-hover);
     }
   }
 
   &:active:not(&:disabled, .btn-outline.btn-hover-filled, .btn-transparent) {
-    filter: brightness(0.8);
+    filter: var(--filter-active);
   }
 
   &:disabled.quiet-disabled {
@@ -272,11 +300,11 @@ a,
 
   &:focus-visible:not(&.disabled),
   &:hover:not(&.disabled) {
-    filter: brightness(0.85);
+    filter: brightness(var(--filter-hover));
   }
 
   &:active:not(&.disabled) {
-    filter: brightness(0.8);
+    filter: brightness(var(--filter-active));
   }
 
   // For some reason this within the above block makes it universal and not only applied to children. SCSS bug maybe?
@@ -319,6 +347,7 @@ a,
   &.btn-transparent {
     --_accent-color: var(--color-base);
     color: var(--_accent-color);
+    border-color: transparent;
 
     &.btn-hover-filled-only {
       color: var(--color-base);
@@ -382,6 +411,12 @@ a,
     --_accent-color: var(--color-orange);
   }
 
+  &.btn-brand-highlight {
+    --_text-color: var(--color-brand);
+    --_background-color: var(--color-brand-highlight);
+    --_accent-color: var(--color-brand-highlight);
+  }
+
   &.btn-red {
     --_text-color: var(--color-accent-contrast);
     --_background-color: var(--color-red);
@@ -427,10 +462,10 @@ a,
 
   color: var(--_text-color);
   background-color: var(--_background-color);
-  box-shadow: var(--_shadow);
+  box-shadow: none;
   border-radius: var(--radius-md);
-
-  padding: var(--gap-sm) var(--gap-lg);
+  padding: var(--gap-sm) var(--gap-md);
+  border: var(--button-border-width) solid var(--button-divider);
 
   display: flex;
   align-items: center;
@@ -440,7 +475,7 @@ a,
   height: fit-content;
   text-decoration: none;
   gap: 0.5rem;
-  line-height: 1.25rem;
+  line-height: 1rem;
 
   svg {
     width: 1.25rem;
@@ -461,6 +496,12 @@ a,
   &.transparent {
     background: none;
     box-shadow: none;
+    border-color: transparent;
+  }
+
+  &.raised {
+    background-color: var(--color-raised-bg);
+    box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
   }
 
   &.btn-dropdown-animation {
@@ -507,30 +548,23 @@ a,
 
 .project-list {
   width: 100%;
-  gap: var(--gap-md);
-  overflow: hidden;
+  gap: var(--spacing-card-md);
+  overflow: unset !important;
+  container-type: inline-size;
 
   &:not(:first-child) {
-    margin-top: var(--gap-md);
+    margin-top: var(--spacing-card-md);
   }
 
   &:not(:empty) {
-    margin-bottom: var(--gap-md);
+    margin-bottom: var(--spacing-card-md);
   }
 }
 
 .project-list.display-mode--list {
-  display: flex;
-  flex-direction: column;
-}
-
-.project-list.display-mode--gallery {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-
-  @media screen and (max-width: 750px) {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
+  grid-template-columns: repeat(1, 1fr);
+  gap: 0.75rem;
 }
 
 .project-list.display-mode--grid {
@@ -550,8 +584,7 @@ a,
   }
 
   @media screen and (max-width: 550px) {
-    display: flex;
-    flex-direction: column;
+    grid-template-columns: repeat(1, 1fr);
   }
 }
 
@@ -563,6 +596,7 @@ a,
 
   background-color: var(--color-raised-bg);
   border-radius: var(--radius-lg);
+  border: var(--card-border-width) solid var(--card-divider);
 
   margin-bottom: var(--gap-md);
   outline: 2px solid transparent;
@@ -665,11 +699,11 @@ a,
     &.selectable:focus-visible,
     &.selectable:hover {
       cursor: pointer;
-      filter: brightness(0.85);
+      filter: var(--filter-hover);
     }
 
     &.selectable:active {
-      filter: brightness(0.8);
+      filter: var(--filter-active);
       scale: 0.99;
     }
   }
@@ -861,7 +895,7 @@ a,
 
   a {
     cursor: pointer;
-    color: var(--color-link);
+    color: var(--color-blue);
 
     &:focus-visible,
     &:hover {
@@ -948,6 +982,16 @@ a,
     th {
       border-bottom: 0.1rem solid var(--color-button-bg);
     }
+
+    kbd {
+      background-color: var(--color-button-bg);
+      color: var(--color-base);
+      box-shadow: var(--shadow-inset-lg);
+      padding: 0.2em 0.5em 0.1em;
+      border-radius: 3px;
+      line-height: 1;
+      font-size: 0.85em !important;
+    }
   }
 
   details {
@@ -964,7 +1008,7 @@ a,
       border-radius: var(--radius-xs);
 
       &:hover {
-        filter: brightness(0.85);
+        filter: var(--filter-hover);
       }
     }
 

diff --git a/lib/assets/styles/defaults.scss b/lib/assets/styles/defaults.scss
@@ -40,6 +40,7 @@ body {
 
 a.uncolored {
   color: inherit;
+  text-decoration: none;
 }
 
 input[type='text'],
@@ -129,6 +130,7 @@ input[type='number'] {
   input {
     padding: 0 2.5rem;
     width: 100%;
+    box-shadow: none;
   }
 
   &:focus-within svg {
@@ -224,3 +226,9 @@ h3 {
   margin-block: var(--gap-md) var(--gap-md);
   color: var(--color-contrast);
 }
+
+h1,
+h2,
+h3 {
+  font-weight: 600;
+}
diff --git a/lib/assets/styles/variables.scss b/lib/assets/styles/variables.scss
@@ -1,5 +1,4 @@
 html {
-  @extend .light-mode;
   --dark-color-base: #b0bac5;
   --dark-color-contrast: #ecf9fb;
 
@@ -8,26 +7,43 @@ html {
   --color-ad-contrast: black;
   --color-ad-highlight: var(--color-purple);
 
+  --card-border-width: 1px;
+  --button-border-width: 1px;
+  --divider-border-width: 1px;
+
+  --round-little: 5px;
+  --round-univ: 9px;
+  --round-card: 13px;
+
   --gap-xs: 0.25rem;
   --gap-sm: 0.5rem;
   --gap-md: 0.75rem;
   --gap-lg: 1rem;
-  --gap-xl: 1.5rem;
+  --gap-xl: 1.25rem;
 
-  --radius-xs: 0.25rem;
-  --radius-sm: 0.5rem;
-  --radius-md: 0.75rem;
-  --radius-lg: 1rem;
-  --radius-xl: 1.25rem;
+  --radius-xs: var(--round-univ);
+  --radius-sm: var(--round-univ);
+  --radius-md: var(--round-univ);
+  --radius-lg: var(--round-univ);
+  --radius-xl: var(--round-univ);
   --radius-max: 999999999px;
 }
 
 .light-mode,
 .light {
-  --color-bg: #e5e7eb;
+  --color-bg: #fafafa;
   --color-raised-bg: #ffffff;
   --color-super-raised-bg: #e9e9e9;
-  --color-button-bg: hsl(220, 13%, 91%);
+  --color-button-bg: #f0f1f2;
+
+  --color-divider: rgba(78, 67, 121, 0.2);
+  --color-button-divider: rgba(78, 67, 121, 0.1);
+  --color-card-divider: rgba(77, 66, 120, 0.2);
+
+  --color-tag-bg: rgba(0, 0, 0, 0.075);
+
+  --filter-hover: brightness(90%);
+  --filter-active: brightness(80%);
 
   --color-base: hsl(221, 39%, 11%);
   --color-secondary: #6b7280;
@@ -53,10 +69,9 @@ html {
   --shadow-raised: 0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15),
     1px 2px 2.2px -1.7px hsl(var(--shadow-color) / 0.12),
     4.4px 8.8px 9.7px -3.4px hsl(var(--shadow-color) / 0.09);
-  --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
-    hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;
+  --shadow-floating: 2px 2px 24px 0px rgba(0, 0, 0, 0.05), 3px 6px 24px 8px rgba(0, 0, 0, 0.07);
 
-  --shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px;
+  --shadow-card: 0px 0px 10px 2px hsla(0, 0%, 0%, 0.025);
 
   --color-tooltip-text: var(--color-accent-contrast);
   --color-tooltip-bg: var(--color-base);
@@ -65,9 +80,18 @@ html {
 .dark-mode,
 .dark {
   --color-bg: #16181c;
-  --color-raised-bg: #26292f;
+  --color-raised-bg: #24262b;
   --color-super-raised-bg: #40434a;
-  --color-button-bg: hsl(222, 13%, 30%);
+  --color-button-bg: rgb(51, 54, 61);
+
+  --color-divider: rgba(176, 169, 207, 0.2);
+  --color-button-divider: transparent;
+  --color-card-divider: rgba(176, 169, 207, 0.1);
+
+  --color-tag-bg: var(--color-button-bg);
+
+  --filter-hover: brightness(120%);
+  --filter-active: brightness(140%);
 
   --color-base: var(--dark-color-base);
   --color-secondary: #96a2b0;
@@ -91,9 +115,7 @@ html {
 
   --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
   --shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
-  --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
-    hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
-
+  --shadow-floating: 2px 2px 24px 0px rgba(0, 0, 0, 0.15), 3px 6px 48px 16px rgba(0, 0, 0, 0.15);
   --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
 
   --color-tooltip-text: var(--color-base);

diff --git a/lib/components/base/Avatar.vue b/lib/components/base/Avatar.vue
@@ -85,15 +85,17 @@ function updatePixelated() {
   box-shadow: var(--shadow-inset-lg), var(--shadow-card);
   height: var(--size) !important;
   width: var(--size) !important;
-  background-color: var(--color-button-bg);
   object-fit: cover;
   max-width: var(--size) !important;
   max-height: var(--size) !important;
 
+  background-color: var(--color-raised-bg);
+  border: 1px solid var(--color-divider);
+
   &.size-xxs {
     --size: 1.25rem;
     box-shadow: var(--shadow-inset), var(--shadow-card);
-    border-radius: var(--radius-sm);
+    border-radius: 5px;
   }
 
   &.size-xs {

diff --git a/lib/components/base/CopyCode.vue b/lib/components/base/CopyCode.vue
@@ -58,12 +58,12 @@ async function copyText() {
   }
 
   &:hover {
-    filter: brightness(0.85);
+    filter: brightness(var(--filter-hover));
   }
 
   &:active {
     transform: scale(0.95);
-    filter: brightness(0.8);
+    filter: brightness(var(--filter-active));
   }
 }
 </style>