diff options
Diffstat (limited to 'src/features/appearance/index.js')
-rw-r--r-- | src/features/appearance/index.js | 26 |
1 files changed, 13 insertions, 13 deletions
diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js index d1db68ac6..0c935be32 100644 --- a/src/features/appearance/index.js +++ b/src/features/appearance/index.js | |||
@@ -14,7 +14,7 @@ function createStyleElement() { | |||
14 | } | 14 | } |
15 | 15 | ||
16 | function setAppearance(style) { | 16 | function setAppearance(style) { |
17 | const styleElement = document.getElementById(STYLE_ELEMENT_ID); | 17 | const styleElement = document.querySelector(`#${STYLE_ELEMENT_ID}`); |
18 | 18 | ||
19 | if (styleElement) { | 19 | if (styleElement) { |
20 | styleElement.innerHTML = style; | 20 | styleElement.innerHTML = style; |
@@ -30,18 +30,18 @@ function darkenAbsolute(originalColor, absoluteChange) { | |||
30 | function generateAccentStyle(accentColorStr) { | 30 | function generateAccentStyle(accentColorStr) { |
31 | let style = ''; | 31 | let style = ''; |
32 | 32 | ||
33 | Object.keys(themeInfo).forEach(property => { | 33 | for (const property of Object.keys(themeInfo)) { |
34 | style += ` | 34 | style += ` |
35 | ${themeInfo[property]} { | 35 | ${themeInfo[property]} { |
36 | ${property}: ${accentColorStr}; | 36 | ${property}: ${accentColorStr}; |
37 | } | 37 | } |
38 | `; | 38 | `; |
39 | }); | 39 | } |
40 | 40 | ||
41 | let accentColor = color(DEFAULT_APP_SETTINGS.accentColor); | 41 | let accentColor = color(DEFAULT_APP_SETTINGS.accentColor); |
42 | try { | 42 | try { |
43 | accentColor = color(accentColorStr); | 43 | accentColor = color(accentColorStr); |
44 | } catch (e) { | 44 | } catch { |
45 | // Ignore invalid accent color. | 45 | // Ignore invalid accent color. |
46 | } | 46 | } |
47 | const darkerColorStr = darkenAbsolute(accentColor, 5).hex(); | 47 | const darkerColorStr = darkenAbsolute(accentColor, 5).hex(); |
@@ -133,14 +133,14 @@ function generateShowDragAreaStyle(accentColor) { | |||
133 | } | 133 | } |
134 | 134 | ||
135 | function generateVerticalStyle(widthStr, alwaysShowWorkspaces) { | 135 | function generateVerticalStyle(widthStr, alwaysShowWorkspaces) { |
136 | if (!document.getElementById('vertical-style')) { | 136 | if (!document.querySelector('#vertical-style')) { |
137 | const link = document.createElement('link'); | 137 | const link = document.createElement('link'); |
138 | link.id = 'vertical-style'; | 138 | link.id = 'vertical-style'; |
139 | link.rel = 'stylesheet'; | 139 | link.rel = 'stylesheet'; |
140 | link.type = 'text/css'; | 140 | link.type = 'text/css'; |
141 | link.href = './styles/vertical.css'; | 141 | link.href = './styles/vertical.css'; |
142 | 142 | ||
143 | document.head.appendChild(link); | 143 | document.head.append(link); |
144 | } | 144 | } |
145 | const width = Number(widthStr); | 145 | const width = Number(widthStr); |
146 | const sidebarWidth = width - 4; | 146 | const sidebarWidth = width - 4; |
@@ -150,12 +150,12 @@ function generateVerticalStyle(widthStr, alwaysShowWorkspaces) { | |||
150 | .sidebar { | 150 | .sidebar { |
151 | height: ${sidebarWidth + verticalStyleOffset + 1}px !important; | 151 | height: ${sidebarWidth + verticalStyleOffset + 1}px !important; |
152 | ${ | 152 | ${ |
153 | alwaysShowWorkspaces | 153 | alwaysShowWorkspaces |
154 | ? ` | 154 | ? ` |
155 | width: calc(100% - 300px) !important; | 155 | width: calc(100% - 300px) !important; |
156 | ` | 156 | ` |
157 | : '' | 157 | : '' |
158 | } | 158 | } |
159 | } | 159 | } |
160 | 160 | ||
161 | .sidebar .sidebar__button { | 161 | .sidebar .sidebar__button { |
@@ -220,10 +220,10 @@ function generateStyle(settings) { | |||
220 | } | 220 | } |
221 | if (useVerticalStyle) { | 221 | if (useVerticalStyle) { |
222 | style += generateVerticalStyle(serviceRibbonWidth, alwaysShowWorkspaces); | 222 | style += generateVerticalStyle(serviceRibbonWidth, alwaysShowWorkspaces); |
223 | } else if (document.getElementById('vertical-style')) { | 223 | } else if (document.querySelector('#vertical-style')) { |
224 | const link = document.getElementById('vertical-style'); | 224 | const link = document.querySelector('#vertical-style'); |
225 | if (link) { | 225 | if (link) { |
226 | document.head.removeChild(link); | 226 | link.remove(); |
227 | } | 227 | } |
228 | } | 228 | } |
229 | if (alwaysShowWorkspaces) { | 229 | if (alwaysShowWorkspaces) { |