Skip to content

Commit 7e84263

Browse files
josevalimjosevalim
committed
Styling
1 parent e6a4af4 commit 7e84263

19 files changed

+360
-337
lines changed

‎assets/css/autocomplete.css‎

Lines changed: 33 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
height: 0;
1111
border-left: 12px solid transparent;
1212
border-right: 12px solid transparent;
13-
border-bottom: 12px solid var(--autocompleBackground);
13+
border-bottom: 12px solid var(--autocompleteBackground);
1414
position: absolute;
1515
top: 8px;
1616
left: 26px;
@@ -23,11 +23,10 @@
2323
width: 100%;
2424
margin: 0;
2525
height: 65vh;
26+
background-color: var(--background);
2627
font-family: var(--sansFontFamily);
2728
border: 4px solid var(--autocompleteBorder);
28-
font-weight: 300;
29-
flex-grow: 12;
30-
font-size: 0.9rem;
29+
padding: 12px 16px;
3130
}
3231

3332
.autocomplete-preview iframe {
@@ -65,7 +64,7 @@
6564
}
6665

6766
.autocomplete-suggestions {
68-
background-color: var(--autocompleBackground);
67+
background-color: var(--autocompleteBackground);
6968
border-radius: 8px;
7069
box-shadow: 0px 15px 99px 0px var(--autocompleteBorder);
7170
overflow-y: auto;
@@ -94,10 +93,6 @@
9493
display: none;
9594
}
9695

97-
.autocomplete-preview {
98-
width: 100%
99-
}
100-
10196
.autocomplete-suggestion {
10297
color: inherit;
10398
display: block;
@@ -121,27 +116,48 @@
121116
background-color: var(--autocompleteHover);
122117
}
123118

124-
.autocomplete-suggestion:not(.selected) .autocomplete-suggestion-preview-indicator {
119+
.autocomplete-suggestion:not(.selected) .autocomplete-preview-indicator {
125120
display: none;
126121
}
127122

128-
.autocomplete-suggestion:hover .autocomplete-suggestion-preview-indicator {
129-
display: block;
123+
.autocomplete-preview-indicator {
124+
float: right;
130125
}
131126

132-
.autocomplete-suggestion-preview-indicator {
133-
float: right;
134-
border-radius: 100%;
127+
.autocomplete-preview-indicator button {
128+
color: var(--iconAction);
129+
display: flex;
130+
align-items: center;
131+
text-decoration: none;
132+
border: 1px solid var(--suggestionBorder);
133+
border-radius: 8px;
134+
transition: color .3s ease-in-out;
135+
background-color: var(--autocompletePreview);
136+
cursor: pointer;
137+
padding: 4px 8px;
138+
font-size: 14px;
139+
}
140+
141+
.autocomplete-preview-indicator button:hover {
142+
color: var(--iconActionHover);
143+
background-color: var(--autocompleteHover);
135144
}
136145

137-
.autocomplete-suggestions.previewing .autocomplete-suggestion-preview-indicator-closed {
146+
.autocomplete-preview-indicator button i {
147+
margin-right: 4px;
148+
}
149+
150+
.autocomplete-suggestions.previewing .autocomplete-preview-indicator-closed {
138151
display: none;
139152
}
140153

141-
.autocomplete-suggestions:not(.previewing) .autocomplete-suggestion-preview-indicator-open {
154+
.autocomplete-suggestions:not(.previewing) .autocomplete-preview-indicator-open {
142155
display: none;
143156
}
144157

158+
.autocomplete-suggestion:hover:not(.selected) .autocomplete-preview-indicator-closed {
159+
display: block;
160+
}
145161

146162
.autocomplete-suggestion em {
147163
font-style: normal;

‎assets/css/custom-props/theme-dark.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,9 +91,10 @@ body.dark {
9191
--searchBarBorder: var(--gray500);
9292
--searchAccentMain: var(--gray300);
9393
--searchSearch: var(--gray900);
94-
--autocompleteBorder: rgba(0,0,0,.25);
94+
--autocompleteBorder: rgba(28,42,60,.75);
95+
--autocompletePreview: var(--gray750);
9596
--autocompleteHover: var(--gray700);
96-
--autocompleBackground: var(--gray800);
97+
--autocompleteBackground: var(--gray800);
9798
--suggestionBorder: var(--gray600);
9899
--autocompleteResults: var(--gray200);
99100
--autocompleteResultsBold: var(--gray100);

‎assets/css/custom-props/theme-light.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,9 @@
9393
--searchLanguageAccentBar: var(--main);
9494
--searchSearch: var(--white);
9595
--autocompleteBorder: rgba(3, 9, 19, 0.10);
96+
--autocompletePreview: var(--gray25);
9697
--autocompleteHover: var(--grey50, #F0F5F9);
97-
--autocompleBackground: var(--white);
98+
--autocompleteBackground: var(--white);
9899
--suggestionBorder: var(--gray200);
99100
--autocompleteResults: var(--gray600);
100101
--autocompleteResultsBold: var(--gray800);

‎assets/js/autocomplete/autocomplete-list.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { getSuggestions } from './suggestions'
22
import { isBlank, qs } from '../helpers'
3+
import { currentTheme } from '../theme'
34

45
export const AUTOCOMPLETE_CONTAINER_SELECTOR = '.autocomplete'
56
export const AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR = '.autocomplete-suggestions'
@@ -99,7 +100,7 @@ export function setAutocompleteSelection (index) {
99100
const newContainer = document.createElement('div')
100101
newContainer.classList.add('autocomplete-preview')
101102
const iframe = document.createElement('iframe')
102-
const previewHref = elementToSelect.href.replace('.html', '.html?preview=true')
103+
const previewHref = elementToSelect.href.replace('.html', `.html?preview=true&theme=${currentTheme()}`)
103104
// The minimum permissions necessary for the iframe to run JavaScript and communicate with the parent window.
104105
iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-popups')
105106
iframe.setAttribute('src', previewHref)
@@ -117,11 +118,11 @@ export function setAutocompleteSelection (index) {
117118
/**
118119
* Toggles the preview state of the autocomplete list
119120
*/
120-
export function togglePreview (elementToSelect) {
121+
export function togglePreview () {
121122
if (state.previewOpen) {
122123
hidePreview()
123124
} else {
124-
showPreview(elementToSelect)
125+
showPreview()
125126
}
126127
}
127128

@@ -138,7 +139,7 @@ export function hidePreview () {
138139
/**
139140
* Shows the preview state of the autocomplete list
140141
*/
141-
function showPreview (elementToSelect) {
142+
export function showPreview (elementToSelect) {
142143
state.previewOpen = true
143144

144145
if (elementToSelect) {

‎assets/js/entry/html.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ onDocumentReady(() => {
2525
const params = new URLSearchParams(window.location.search)
2626
const isPreview = params.has('preview')
2727

28-
initTheme()
28+
initTheme(params.get('theme'))
2929
initContent(isPreview)
3030
initMakeup()
3131
initTooltips()

‎assets/js/handlebars/templates/autocomplete-suggestions.handlebars‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,14 @@
2222
{{#each labels}}
2323
<span class="label">{{this}}</span>
2424
{{/each}}
25-
<div class="autocomplete-suggestion-preview-indicator autocomplete-suggestion-preview-indicator-open">
26-
<button onclick="onTogglePreviewClick(event)" class="icon-settings display-settings" title="Close preveiw" tabindex="-1">
25+
<div class="autocomplete-preview-indicator autocomplete-preview-indicator-open">
26+
<button onclick="onTogglePreviewClick(event, false)" title="Close preview" tabindex="-1">
2727
<i class="ri-close-line" aria-hidden="true"></i>
2828
Close preview
2929
</button>
3030
</div>
31-
<div class="autocomplete-suggestion-preview-indicator autocomplete-suggestion-preview-indicator-closed">
32-
<button onclick="onTogglePreviewClick(event)" class="icon-settings display-settings" title="Open preview" tabindex="-1">
31+
<div class="autocomplete-preview-indicator autocomplete-preview-indicator-closed">
32+
<button onclick="onTogglePreviewClick(event, true)" title="Open preview" tabindex="-1">
3333
<i class="ri-search-2-line" aria-hidden="true"></i>
3434
Open preview
3535
</button>

‎assets/js/search-bar.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
moveAutocompleteSelection,
55
selectedAutocompleteSuggestion,
66
togglePreview,
7+
showPreview,
78
hidePreview,
89
updateAutocompleteList,
910
AUTOCOMPLETE_CONTAINER_SELECTOR,
@@ -20,14 +21,15 @@ const SEARCH_CLOSE_BUTTON_SELECTOR = 'form.search-bar .search-close-button'
2021
export function initialize () {
2122
addEventListeners()
2223

23-
window.onTogglePreviewClick = function onTogglePreviewClick (event) {
24+
window.onTogglePreviewClick = function (event, open) {
2425
event.preventDefault()
2526
event.stopImmediatePropagation()
2627

27-
// Keep the focus on the input instead of the button when the user clicked to open the preview
28+
// Keep the focus on the input instead of the button
29+
// when the user clicked to open the preview.
2830
// Maintains consistent keyboard navigation and look
2931
focusSearchInput()
30-
togglePreview(event.target)
32+
if (open) { showPreview(event.target) } else { hidePreview() }
3133
}
3234
}
3335

‎assets/js/theme.js‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ const THEMES = ['system', 'dark', 'light']
77
/**
88
* Sets initial night mode state and registers to settings updates.
99
*/
10-
export function initialize () {
10+
export function initialize (theme) {
1111
settingsStore.getAndSubscribe(settings => {
12-
document.body.classList.toggle(DARK_MODE_CLASS, shouldUseDarkMode(settings))
12+
document.body.classList.toggle(DARK_MODE_CLASS, shouldUseDarkMode(theme || settings.theme))
1313
})
1414
listenToDarkMode()
1515
}
@@ -18,18 +18,20 @@ export function initialize () {
1818
* Cycles through themes and saves the preference.
1919
*/
2020
export function cycleTheme () {
21-
const settings = settingsStore.get()
22-
const currentTheme = settings.theme || 'system'
23-
const nextTheme = THEMES[THEMES.indexOf(currentTheme) + 1] || THEMES[0]
21+
const nextTheme = THEMES[THEMES.indexOf(currentTheme()) + 1] || THEMES[0]
2422
settingsStore.update({ theme: nextTheme })
2523
showToast(`Set theme to "${nextTheme}"`)
2624
}
2725

28-
function shouldUseDarkMode (settings) {
26+
export function currentTheme () {
27+
return settingsStore.get().theme || 'system'
28+
}
29+
30+
function shouldUseDarkMode (theme) {
2931
// nightMode used to be true|false|null
3032
// Now it's 'dark'|'light'|'system'|null with null treated as 'system'
31-
return (settings.theme === 'dark') ||
32-
(prefersDarkColorScheme() && (settings.theme == null || settings.theme === 'system'))
33+
return (theme === 'dark') ||
34+
(prefersDarkColorScheme() && (theme == null || theme === 'system'))
3335
}
3436

3537
function prefersDarkColorScheme () {
@@ -38,9 +40,9 @@ function prefersDarkColorScheme () {
3840

3941
function listenToDarkMode () {
4042
window.matchMedia('(prefers-color-scheme: dark)').addListener(_e => {
41-
const settings = settingsStore.get()
42-
const isNight = shouldUseDarkMode(settings)
43-
if (settings.theme == null || settings.theme === 'system') {
43+
const theme = settingsStore.get().theme
44+
const isNight = shouldUseDarkMode(theme)
45+
if (theme == null || theme === 'system') {
4446
document.body.classList.toggle(DARK_MODE_CLASS, isNight)
4547
showToast(`Browser changed theme to "${isNight ? 'dark' : 'light'}"`)
4648
}

0 commit comments

Comments
 (0)