medlogic
/
olivetin
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: cssClass again again #804

This commit is contained in:
jamesread 2026-02-13 23:18:35 +00:00
parent a1e5a0ff4e
commit ea7a1fb3e3
4 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/resources/vue/App.vue
View File

@ -361,12 +361,11 @@ function applyTheme() {
document.head.appendChild(themeStyle) document.head.appendChild(themeStyle)
} }
// Load theme into @layer theme so it takes precedence over @layer components (theme is // Load theme into @layer theme so it takes precedence over @layer components
// last in style.css layer order). Fixes #804 regression after beta.2.
if (themePreference.value && themePreference.value !== '') { if (themePreference.value && themePreference.value !== '') {
themeStyle.textContent = `@layer theme { @import url('/custom-webui/themes/${themePreference.value}/theme.css'); }` themeStyle.textContent = `@import url('/custom-webui/themes/${themePreference.value}/theme.css') layer(theme);`
} else { } else {
themeStyle.textContent = `@layer theme { @import url('/theme.css'); }` themeStyle.textContent = `@import url('/theme.css') layer(theme);`
} }
} }

3
integration-tests/tests/cssClass/config.yaml
View File

@ -7,6 +7,9 @@ listenAddressSingleHTTPFrontend: 0.0.0.0:1337
logLevel: "DEBUG" logLevel: "DEBUG"
checkForUpdates: false checkForUpdates: false
# Custom theme used to verify theme CSS applies to cssClass (e.g. action button background)
themeName: cssclass-theme
actions: [] actions: []
dashboards: dashboards:

11
integration-tests/tests/cssClass/cssClass.mjs
View File

@ -29,6 +29,17 @@ describe('config: cssClass', function () {
expect(classAttr).to.include('test-custom-class') expect(classAttr).to.include('test-custom-class')
}) })
it('custom theme applies background color to action button via cssClass', async function () {
await getRootAndWait()
const buttonWithClass = await webdriver.findElements(By.css('.action-button button.test-custom-class'))
expect(buttonWithClass).to.have.length.at.least(1, 'Action button with test-custom-class should exist')
const bgColor = await buttonWithClass[0].getCssValue('background-color')
expect(bgColor, 'Theme theme.css should set .action-button button.test-custom-class background to rgb(32, 64, 128)')
.to.match(/rgba?\(\s*32\s*,\s*64\s*,\s*128\s*(,\s*1)?\s*\)/)
})
it('cssClass override: style rule targeting custom class wins over component styles', async function () { it('cssClass override: style rule targeting custom class wins over component styles', async function () {
await getRootAndWait() await getRootAndWait()

4
integration-tests/tests/cssClass/custom-webui/themes/cssclass-theme/theme.css Normal file
View File

@ -0,0 +1,4 @@
/* Theme for cssClass integration test: set a distinct background on the action button */
.action-button button.test-custom-class {
background-color: rgb(32, 64, 128);
}