Skip to content

Commit

Permalink
revamp css
Browse files Browse the repository at this point in the history
  • Loading branch information
@wighawag
wighawag committed Jan 17, 2024
1 parent a23d0e3 commit a30711c
Show file tree
Hide file tree
Showing 24 changed files with 181 additions and 140 deletions.
32 changes: 27 additions & 5 deletions web/src/css/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@
/* BASIC STYLES */
/* ------------------------------------------------- */
:root {
background-color: var(--color-background-base);
color: var(--color-text-base);
background-color: var(--color-surface-500);
color: var(--color-text-on-surface);

font-family: 'Noto Sans', Verdana, sans-serif;
}

a {
color: var(--color-link-base);
color: var(--color-text-for-links);
text-decoration: underline;
}
a:visited {
color: var(--color-link-base);
color: var(--color-text-for-links);
}
a:hover {
/* font-weight: 900; */
Expand All @@ -22,7 +22,7 @@ a:hover {
/* ------------------------------------------------- */

/* ------------------------------------------------- */
/* remove button style
/* buttons
/* ------------------------------------------------- */
button {
background: none;
Expand All @@ -33,6 +33,28 @@ button {
cursor: pointer;
outline: inherit;
}

button,
a[role='button'] {
display: inline-flex;
align-items: center;
justify-content: center;

cursor: pointer;
-webkit-user-select: none;
user-select: none;

border-radius: 0.5rem;

line-height: 1em;
font-weight: 600;
text-decoration-line: none;

height: 2rem;
min-height: 2rem;
padding-inline: 0.75rem;
font-size: 0.875rem;
}
/* ------------------------------------------------- */

/* smooth scrolling */
Expand Down
75 changes: 34 additions & 41 deletions web/src/css/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,59 +2,52 @@
/* GLOBAL CLASSES */
/* ------------------------------------------------- */

.button {
display: inline-flex;
align-items: center;
justify-content: center;

cursor: pointer;
-webkit-user-select: none;
user-select: none;

border-radius: 0.5rem;

line-height: 1em;
font-weight: 600;
text-decoration-line: none;

height: 2rem;
min-height: 2rem;
padding-inline: 0.75rem;
font-size: 0.875rem;
}

.primary {
background-color: var(--color-background-primary);
color: var(--color-text-primary);

&:hover {
background-color: var(--color-background-primary-100);
}
background-color: var(--color-primary-500);
color: var(--color-text-on-primary-500);
}
button.primary:hover,
a[role='button'].primary:hover {
background-color: var(--color-primary-600);
}
a[role='button'].primary:visited {
color: var(--color-text-on-primary-500);
}

.secondary {
background-color: var(--color-background-secondary);
color: var(--color-text-secondary);

&:hover {
background-color: var(--color-background-secondary-100);
}
background-color: var(--color-secondary-500);
color: var(--color-text-on-secondary-500);
}
button.secondary:hover,
a[role='button'].secondary:hover {
background-color: var(--color-secondary-600);
}
a[role='button'].secondary:visited {
color: var(--color-text-on-secondary-500);
}

.success {
color: var(--color-text-success);
background-color: var(--color-background-success);
color: var(--color-text-on-success-500);
background-color: var(--color-success-500);
}
button.success:hover,
a[role='button'].success:hover {
background-color: var(--color-success-600);
}
button.success:hover {
background-color: var(--color-background-success-hover);
a[role='button'].success:visited {
color: var(--color-text-on-success-500);
}

.error {
color: var(--color-text-error);
background-color: var(--color-background-error);
color: var(--color-text-on-error-500);
background-color: var(--color-error-500);
}
button.error:hover,
a[role='button'].error:hover {
background-color: var(--color-error-600);
}
button.error:hover {
background-color: var(--color-background-error-hover);
a[role='button'].error:visited {
color: var(--color-text-on-error-500);
}

/* ------------------------------------------------- */
95 changes: 66 additions & 29 deletions web/src/css/palette.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,72 @@

/* Colors */
:root {
--color-text-base: white;
--color-background-base: hsl(231.43 15% 18%);

--color-background-base-100: hsl(231.43 15% 16%);
--color-background-base-200: hsl(231.43 15% 16%);
--color-background-base-300: hsl(231.43 16% 14%);

--color-text-primary: black;
--color-background-primary: hsl(325.52 100% 74%);
--color-text-primary-100: black;
--color-background-primary-100: hsl(325.52 100% 64%);

--color-text-secondary: black;
--color-background-secondary: hsl(264.71 89% 78%);
--color-text-secondary-100: black;
--color-background-secondary-100: hsl(264.71 54% 67%);

--color-link-base: white;

--color-error: hsl(0 85.48% 62.99%);
--color-error-100: hsl(0 85.48% 52.99%);
--color-success: hsl(135.18 66.47% 56.04%);
--color-success-100: hsl(135.18 66.47% 46.04%);
--color-background-error: var(--color-error);
--color-background-error-hover: var(--color-error-100);
--color-background-success: var(--color-success);
--color-background-success-hover: var(--color-success-100);
--color-text-error: black;
--color-text-success: black;
--color-surface: 231.43 15%;
--color-surface-lightness: 18%;
--color-on-surface: 0 0%;
--color-on-surface-lightness: 100%;

--color-lighness-direction: -1;

--color-primary: 325.52 100%;
--color-primary-lightness: 74%;
--color-on-primary: 0 0%;
--color-on-primary-lightness: 0%;

--color-secondary: 264.71 89%;
--color-secondary-lightness: 78%;
--color-on-secondary: 0 0%;
--color-on-secondary-lightness: 0%;

--color-error: 0 85.48%;
--color-error-lightness: 62.99%;
--color-on-error: 0 0%;
--color-on-error-lightness: 0%;

--color-success: 135.18 66.47%;
--color-success-lightness: 56.04%;
--color-on-success: 0 0%;
--color-on-success-lightness: 0%;

--color-text-on-surface: hsl(var(--color-on-surface) var(--color-on-surface-lightness));
--color-text-for-links: hsl(var(--color-on-surface) var(--color-on-surface-lightness));

--color-surface-500: hsl(var(--color-surface) var(--color-surface-lightness));
--color-surface-600: hsl(
var(--color-surface) calc(var(--color-surface-lightness) + var(--color-lighness-direction) * 2%)
);
--color-surface-700: hsl(
var(--color-surface) calc(var(--color-surface-lightness) + var(--color-lighness-direction) * 3%)
);
--color-surface-800: hsl(
var(--color-surface) calc(var(--color-surface-lightness) + var(--color-lighness-direction) * 4%)
);

--color-primary-500: hsl(var(--color-primary) var(--color-primary-lightness));
--color-primary-600: hsl(
var(--color-primary) calc(var(--color-primary-lightness) + var(--color-lighness-direction) * 10%)
);
--color-text-on-primary-500: hsl(var(--color-on-primary) var(--color-on-primary-lightness));
--color-text-on-primary-600: hsl(var(--color-on-primary) var(--color-on-primary-lightness));

--color-secondary-500: hsl(var(--color-secondary) var(--color-secondary-lightness));
--color-secondary-600: hsl(
var(--color-secondary) calc(var(--color-secondary-lightness) + var(--color-lighness-direction) * 11%)
);
--color-text-on-secondary-500: hsl(var(--color-on-secondary) var(--color-on-secondary-lightness));
--color-text-on-secondary-600: hsl(var(--color-on-secondary) var(--color-on-secondary-lightness));

--color-error-500: hsl(var(--color-error) var(--color-error-lightness));
--color-error-600: hsl(var(--color-error) calc(var(--color-error-lightness) + var(--color-lighness-direction) * 10%));
--color-text-on-error-500: hsl(var(--color-on-error) var(--color-on-error-lightness));
--color-text-on-error-600: hsl(var(--color-on-error) var(--color-on-error-lightness));

--color-success-500: hsl(var(--color-success) var(--color-success-lightness));
--color-success-600: hsl(
var(--color-success) calc(var(--color-success-lightness) + var(--color-lighness-direction) * 10%)
);
--color-text-on-success-500: hsl(var(--color-on-success) var(--color-on-success-lightness));
--color-text-on-success-600: hsl(var(--color-on-success) var(--color-on-success-lightness));
}

/* ------------------------------------------------- */
2 changes: 1 addition & 1 deletion web/src/lib/components/jolly-roger/Feature.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

<style>
h3 {
color: var(--color-background-primary-100);
color: var(--color-primary-600);
}
p,
Expand Down
4 changes: 2 additions & 2 deletions web/src/lib/components/jolly-roger/Showcase.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
background-color: var(--color-background-base-200);
background-color: var(--color-surface-700);
}
.image-wrapper {
Expand Down Expand Up @@ -70,7 +70,7 @@
font-weight: 500;
}
.name a {
color: var(--color-background-primary);
color: var(--color-primary-500);
}
.card-content {
Expand Down
14 changes: 3 additions & 11 deletions web/src/lib/components/modals/ModalContent.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,7 @@

<div bind:this={element} use:focusTrap={true}>
{#if showCancelButton}
<button on:click={() => (onResponse ? onResponse(false) : modalStore.close())} class="button close-button">✕</button
>
<button on:click={() => (onResponse ? onResponse(false) : modalStore.close())} class="close-button">✕</button>
{/if}
{#if settings?.type && settings.type !== 'custom'}
{#if settings.type === 'info'}
Expand All @@ -45,12 +44,8 @@
{settings.message}
</p>
<div class="actions">
<button on:click={() => (onResponse ? onResponse(false) : modalStore.close())} class="button error"
>Cancel</button
>
<button on:click={() => (onResponse ? onResponse(true) : modalStore.close())} class="button success"
>Confirm</button
>
<button on:click={() => (onResponse ? onResponse(false) : modalStore.close())} class="error">Cancel</button>
<button on:click={() => (onResponse ? onResponse(true) : modalStore.close())} class="success">Confirm</button>
</div>
{:else}
<!-- TODO more -->
Expand Down Expand Up @@ -80,7 +75,4 @@
padding-top: 1rem;
padding-bottom: 1rem;
}
.actions {
}
</style>
2 changes: 1 addition & 1 deletion web/src/lib/components/modals/Modals.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@
}
.modal {
background-color: var(--color-background-base-300);
background-color: var(--color-surface-800);
border-radius: 1rem;
padding: 1rem;
Expand Down
4 changes: 2 additions & 2 deletions web/src/lib/components/navigation/NavTabs.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
margin: 0;
list-style-type: none;
padding: 8px 8px 0px 0px;
background-color: var(--color-background-base);
border-bottom: 4px solid var(--color-background-primary);
background-color: var(--color-surface-500);
border-bottom: 4px solid var(--color-primary-500);
}
</style>
6 changes: 3 additions & 3 deletions web/src/lib/components/navigation/PageLink.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
a {
text-decoration: none;
display: inline-block;
color: var(--color-text-base);
color: var(--color-text-on-surface);
font-size: 0.875rem;
border-top-left-radius: 8px;
Expand All @@ -29,8 +29,8 @@
.current {
font-weight: bold;
color: var(--color-text-primary);
background-color: var(--color-background-primary);
color: var(--color-text-on-primary-500);
background-color: var(--color-primary-500);
pointer-events: none;
}
Expand Down
Loading

0 comments on commit a30711c

Please sign in to comment.