Skip to content

More css tweaks #764

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 2, 2024
Merged

More css tweaks #764

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2856af0
remove redundant style
Rich-Harris Nov 1, 2024
44322c5
various
Rich-Harris Nov 2, 2024
6c37228
prettier
Rich-Harris Nov 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,11 +96,7 @@
padding: 0.2rem 0 0 3rem;
height: 3rem;
text-transform: uppercase;
color: var(--sk-fg-4);

&:hover {
color: var(--sk-fg-3);
}
user-select: none;

&::before,
&::after {
Expand Down Expand Up @@ -148,6 +144,10 @@
color: var(--sk-fg-4);
margin: 0;
display: block;

&:hover {
color: var(--sk-fg-3);
}
}
}

Expand Down
6 changes: 0 additions & 6 deletions packages/repl/src/lib/Input/ComponentSelector.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,6 @@
height: 100%;
aspect-ratio: 1;
margin: 0;
color: var(--sk-fg-3);
border-radius: 0;
cursor: pointer;
}
Expand Down Expand Up @@ -261,11 +260,6 @@
line-height: 1;
}

.input-sizer {
display: flex;
color: var(--sk-fg-3, #ccc);
}

input {
position: absolute;
width: 100%;
Expand Down
1 change: 0 additions & 1 deletion packages/repl/src/lib/Output/CompilerOptions.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@
display: block;
padding: 0 0 0 1.25em;
white-space: nowrap;
color: var(--sk-fg-3);
user-select: none;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/site-kit/src/lib/nav/MobileMenu.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@
& :global(a) {
position: relative;
padding: 0.3rem 0;
color: var(--sk-fg-3);
color: inherit;
font: var(--sk-font-ui-medium);
width: 100%;
height: 100%;
Expand Down
6 changes: 1 addition & 5 deletions packages/site-kit/src/lib/nav/Nav.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
.current-section {
display: flex;
align-items: center;
color: var(--sk-fg-3);
color: inherit;
margin-left: 0.4em;
font: var(--sk-font-ui-medium);
}
Expand All @@ -227,10 +227,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
}
}

button {
color: var(--sk-fg-3);
}

.links {
display: flex;
width: 100%;
Expand Down
46 changes: 7 additions & 39 deletions packages/site-kit/src/lib/search/Search.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
position: relative;
display: flex;
align-items: center;
width: 100%;
width: 11rem;
font-size: 1.4rem;
}

Expand All @@ -68,12 +68,11 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
appearance: none;
-webkit-appearance: none;
width: 100%;
height: 4.2rem;
border-radius: 3.5rem;
height: 3.4rem;
border-radius: 5.6rem;
background:
no-repeat 0.6em 55% / 1.2em 1.2em url(../icons/search.svg),
var(--sk-bg-4);
color: var(--sk-fg-3);
}

input:focus + .shortcut {
Expand All @@ -82,14 +81,14 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc

input::placeholder {
text-transform: lowercase;
color: var(--sk-fg-3);
color: var(--sk-fg-4);
opacity: 0;
}

.shortcut {
color: var(--sk-fg-3);
position: absolute;
top: calc(50% - 0.9rem);
right: 0;
right: 1.6rem;
width: 100%;
text-align: right;
pointer-events: none;
Expand All @@ -99,36 +98,11 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
}

kbd {
display: none;
color: var(--sk-fg-3);
color: var(--sk-fg-4);
font-size: inherit;
font-family: inherit;
}

@media (min-width: 800px) {
.search-container {
width: 11rem;
}

.shortcut {
padding: 0 1.6rem 0 0;
}

input {
height: 3.4rem;
border-radius: 5.6rem;
}

input::placeholder {
opacity: 0;
}

/* we're using media query as an imperfect proxy for mobile/desktop */
kbd {
display: inline;
}
}

@media (min-width: 960px) {
.search-container {
width: 19rem;
Expand All @@ -138,10 +112,4 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
opacity: 1;
}
}

@media (min-width: 1240px) {
.search-container {
width: 19rem;
}
}
</style>
2 changes: 1 addition & 1 deletion packages/site-kit/src/lib/styles/tokens/colours.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
/* Foreground colours */
--sk-fg-1: hsl(0, 0%, 5%); /* for headings, and (very sparingly) as a highlight colour */
--sk-fg-2: hsl(0, 0%, 12%); /* most text should be this colour */
--sk-fg-3: hsl(0, 0%, 27%); /* secondary text (e.g. figcaptions) */
--sk-fg-3: hsl(0, 0%, 27%); /* secondary text (e.g. figcaptions) and icons */
--sk-fg-4: hsl(0, 0%, 45%); /* faded text (disabled buttons, comments etc) */
--sk-fg-accent: hsl(12, 93%, 43%);

Expand Down
Loading