-
-
+/>
-
+/>
-
+/>
```
diff --git a/lib/assets/branding/logo.svg b/lib/assets/branding/logo.svg
index 3d73b0f8b..a6b2e3807 100644
--- a/lib/assets/branding/logo.svg
+++ b/lib/assets/branding/logo.svg
@@ -1,4 +1,4 @@
diff --git a/lib/assets/icons/bell-ring.svg b/lib/assets/icons/bell-ring.svg
index 56c1a1e9e..7e4f8040f 100644
--- a/lib/assets/icons/bell-ring.svg
+++ b/lib/assets/icons/bell-ring.svg
@@ -3,5 +3,4 @@
-
diff --git a/lib/assets/icons/right-arrow.svg b/lib/assets/icons/right-arrow.svg
index 6046f1518..2e8e17d01 100644
--- a/lib/assets/icons/right-arrow.svg
+++ b/lib/assets/icons/right-arrow.svg
@@ -1,4 +1 @@
-
+
diff --git a/lib/assets/styles/classes.scss b/lib/assets/styles/classes.scss
index 9bf5b0d4d..17e2238d6 100644
--- a/lib/assets/styles/classes.scss
+++ b/lib/assets/styles/classes.scss
@@ -223,6 +223,34 @@
}
}
+.universal-modal {
+ @extend .universal-body;
+
+ padding: var(--gap-lg);
+ 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 {
@@ -240,17 +268,17 @@ a,
border: none;
outline: 2px solid transparent;
- &:focus-visible:not(&:disabled),
- &:hover:not(&:disabled) {
+ &:focus-visible:not(&:disabled, &.disabled),
+ &:hover:not(&:disabled, &.disabled) {
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);
+ &:active:not(&:disabled, &.disabled, .btn-outline.btn-hover-filled, .btn-transparent) {
+ filter: var(--filter-active);
}
&:disabled.quiet-disabled {
@@ -258,7 +286,8 @@ a,
}
&:disabled:not(.quiet-disabled),
- &[disabled]:not(.quiet-disabled) {
+ &[disabled]:not(.quiet-disabled),
+ &.disabled:not(.quiet-disabled) {
cursor: not-allowed;
filter: grayscale(50%);
opacity: 0.5;
@@ -272,11 +301,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,13 +348,14 @@ a,
&.btn-transparent {
--_accent-color: var(--color-base);
color: var(--_accent-color);
+ border-color: transparent;
&.btn-hover-filled-only {
color: var(--color-base);
}
- &:focus-visible:not(&:disabled),
- &:hover:not(&:disabled) {
+ &:focus-visible:not(&:disabled, &.disabled),
+ &:hover:not(&:disabled, &.disabled) {
background-color: var(--color-button-bg);
&.btn-hover-filled,
@@ -347,8 +377,8 @@ a,
border-color: var(--color-contrast);
}
- &:focus-visible:not(&:disabled),
- &:hover:not(&:disabled) {
+ &:focus-visible:not(&:disabled, &.disabled),
+ &:hover:not(&:disabled, &.disabled) {
&.btn-hover-filled,
&.btn-hover-filled-only {
border-color: var(--_accent-color);
@@ -382,6 +412,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 +463,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 +476,7 @@ a,
height: fit-content;
text-decoration: none;
gap: 0.5rem;
- line-height: 1.25rem;
+ line-height: 1rem;
svg {
width: 1.25rem;
@@ -461,6 +497,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 {
@@ -508,7 +550,8 @@ a,
.project-list {
width: 100%;
gap: var(--gap-md);
- overflow: hidden;
+ overflow: unset !important;
+ container-type: inline-size;
&:not(:first-child) {
margin-top: var(--gap-md);
@@ -520,22 +563,15 @@ a,
}
.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 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 0.75rem;
@media screen and (max-width: 80rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -550,8 +586,7 @@ a,
}
@media screen and (max-width: 550px) {
- display: flex;
- flex-direction: column;
+ grid-template-columns: repeat(1, 1fr);
}
}
@@ -563,6 +598,7 @@ a,
background-color: var(--color-raised-bg);
border-radius: var(--radius-lg);
+ border: var(--card-border-width) solid var(--color-card-divider);
margin-bottom: var(--gap-md);
outline: 2px solid transparent;
@@ -591,18 +627,22 @@ a,
}
}
- // TODO: Add back later
- //&.warning {
- // border-left: 0.5rem solid var(--color-warning-banner-side);
- // background-color: var(--color-warning-banner-bg);
- // color: var(--color-warning-banner-text);
- //}
- //
- //&.information {
- // border-left: 0.5rem solid var(--color-info-banner-side);
- // background-color: var(--color-info-banner-bg);
- // color: var(--color-info-banner-text);
- //}
+ &.recessed {
+ background-color: var(--color-bg);
+ box-shadow: none;
+ }
+
+ &.warning {
+ border-left: 0.5rem solid var(--color-red);
+ background-color: var(--color-red-bg);
+ color: var(--color-base);
+ }
+
+ &.information {
+ border-left: 0.5rem solid var(--color-blue);
+ background-color: var(--color-blue-bg);
+ color: var(--color-base);
+ }
}
.card {
@@ -665,11 +705,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 +901,7 @@ a,
a {
cursor: pointer;
- color: var(--color-link);
+ color: var(--color-blue);
&:focus-visible,
&:hover {
@@ -936,7 +976,7 @@ a,
}
tr:nth-child(2n) {
- background-color: var(--color-accent-contrast);
+ background-color: var(--color-alt-bg);
}
td:not(:last-of-type),
@@ -948,6 +988,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 +1014,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
index f9a2dd20c..397891457 100644
--- a/lib/assets/styles/defaults.scss
+++ b/lib/assets/styles/defaults.scss
@@ -38,8 +38,21 @@ body {
--font-weight-title: var(--font-weight-extrabold);
}
-a.uncolored {
+a {
color: inherit;
+ text-decoration: none;
+}
+
+button,
+input[type='button'] {
+ cursor: pointer;
+ border: none;
+ outline: 2px solid transparent;
+
+ &:disabled,
+ &[disabled] {
+ cursor: not-allowed;
+ }
}
input[type='text'],
@@ -129,6 +142,7 @@ input[type='number'] {
input {
padding: 0 2.5rem;
width: 100%;
+ box-shadow: none;
}
&:focus-within svg {
@@ -224,3 +238,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
index bcf99e823..ef052684e 100644
--- 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,44 @@ 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-little);
+ --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-alt-bg: #f2f4f7;
+ --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;
@@ -41,6 +58,9 @@ html {
--color-purple: #8e32f3;
--color-gray: #595b61;
+ --color-red-bg: rgba(203, 34, 69, 0.3);
+ --color-blue-bg: rgba(31, 104, 192, 0.3);
+
--color-brand: var(--color-green);
--color-brand-highlight: rgba(0, 175, 92, 0.25);
--color-brand-shadow: rgba(0, 175, 92, 0.7);
@@ -53,10 +73,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 +84,19 @@ 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-alt-bg: #202228;
+ --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;
@@ -81,6 +110,9 @@ html {
--color-purple: #c78aff;
--color-gray: #9fa4b3;
+ --color-red-bg: rgba(255, 73, 110, 0.3);
+ --color-blue-bg: rgba(79, 156, 255, 0.3);
+
--color-brand: var(--color-green);
--color-brand-highlight: rgba(27, 217, 106, 0.25);
--color-brand-shadow: rgba(27, 217, 106, 0.7);
@@ -91,9 +123,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
index e4b852e58..bfbfe5908 100644
--- 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/Button.vue b/lib/components/base/Button.vue
index 7d3e6434a..f6f1ff397 100644
--- a/lib/components/base/Button.vue
+++ b/lib/components/base/Button.vue
@@ -26,6 +26,7 @@ const props = withDefaults(
transparent?: boolean
hoverFilled?: boolean
hoverFilledOnly?: boolean
+ disabled?: boolean
}>(),
{
link: undefined,
@@ -38,6 +39,7 @@ const props = withDefaults(
transparent: false,
hoverFilled: false,
hoverFilledOnly: false,
+ disabled: false
}
)
@@ -58,6 +60,7 @@ const accentedButton = computed(() =>
'btn-hover-filled-only': hoverFilledOnly,
'btn-outline': outline,
'color-accent-contrast': accentedButton,
+ 'disabled': disabled,
[`btn-${color}`]: true,
}"
:to="link"
@@ -78,6 +81,7 @@ const accentedButton = computed(() =>
'btn-hover-filled-only': hoverFilledOnly,
'btn-outline': outline,
'color-accent-contrast': accentedButton,
+ 'disabled': disabled,
[`btn-${color}`]: true,
}"
:href="link"
@@ -100,6 +104,7 @@ const accentedButton = computed(() =>
'color-accent-contrast': accentedButton,
[`btn-${color}`]: true,
}"
+ :disabled="disabled"
@click="action"
>
diff --git a/lib/components/base/Chips.vue b/lib/components/base/Chips.vue
index d3759ea52..0bc16da5c 100644
--- a/lib/components/base/Chips.vue
+++ b/lib/components/base/Chips.vue
@@ -14,59 +14,53 @@
-
diff --git a/lib/components/base/DoubleIcon.vue b/lib/components/base/DoubleIcon.vue
index ff054e837..41368bac6 100644
--- a/lib/components/base/DoubleIcon.vue
+++ b/lib/components/base/DoubleIcon.vue
@@ -1,33 +1,62 @@
-
-
+
diff --git a/lib/components/base/MarkdownEditor.vue b/lib/components/base/MarkdownEditor.vue
index 80cd100d4..9fe93bd2d 100644
--- a/lib/components/base/MarkdownEditor.vue
+++ b/lib/components/base/MarkdownEditor.vue
@@ -48,7 +48,7 @@