chore: move panel button match scss#7550
Open
fikrydev wants to merge 8 commits into
Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates Lakesideview skin SCSS for panels, buttons, matches, and tournament-related colors into the Lua-Modules stylesheet bundle so the styling is provided by module-loaded CSS rather than the skin.
Changes:
- Added global CSS custom properties for Team Portal button theming (light/dark).
- Added panel color variables and attempted “wiki theme color included” detection logic.
- Added match/tournament color variables (light/dark) for the main page.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 8 comments.
| File | Description |
|---|---|
| stylesheets/commons/TeamPortal.scss | Introduces button-related CSS variables intended for Team Portal button styling. |
| stylesheets/commons/Panels.scss | Adds panel color variables and a theme-detection mechanism for selecting wiki colors vs defaults. |
| stylesheets/commons/Mainpage.scss | Adds match/tournament CSS variables for main page UI elements across themes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+17
to
+29
| $button-border-color-focus--light: var( --clr-wiki-theme-20 ); | ||
| $button-border-color-focus--dark: var( --clr-wiki-theme-40 ); | ||
| $button-color--light: var( --clr-on-primary ); | ||
| $button-color--dark: #ffffff; | ||
| $button-secondary-background-color-hover--light: hsl( from var( --clr-primary ) h s l / 0.08 ); | ||
| $button-secondary-background-color-hover--dark: hsl( from var( --clr-primary ) h s l / 0.08 ); | ||
| $button-secondary-color--light: var( --clr-primary-30 ); | ||
| $button-secondary-color--dark: var( --clr-primary-80 ); | ||
| $button-error-color--light: var( --clr-semantic-negative-40 ); | ||
| $button-error-color--dark: var( --clr-semantic-negative-80 ); | ||
|
|
||
| $button-new-primary-color--light: var( --clr-wiki-theme-40 ); | ||
| $button-new-primary-color--dark: var( --clr-wiki-theme-30 ); |
Rathoz
changed the title
fikrydev
force-pushed
the
fix/add-panel-button-match-scss
branch
from
ebbd8bf to
3b38599
Compare
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
fikrydev
force-pushed
the
fix/add-panel-button-match-scss
branch
from
3b38599 to
93bdbfb
Compare
liquidely
reviewed
May 27, 2026
| border-radius: 0.5rem 0.5rem 0 0; | ||
| min-height: 3rem; | ||
| padding: 0 1rem; | ||
| font-size: 1rem; |
Contributor
There was a problem hiding this comment.
Suggested change
| font-size: 1rem; | |
| font-weight: bold; |
Adding font-weight bold because of remove css above
| .panel-box-heading { | ||
| display: flex; | ||
| align-items: center; | ||
| background-color: var( --clr-wiki-theme-primary, var( --wiki-color-medium ) ); |
Contributor
There was a problem hiding this comment.
Suggested change
| background-color: var( --clr-wiki-theme-primary ); |
Remove unnecessary fallback
Comment on lines
+5
to
+36
|
|
||
| /* Panel box */ | ||
| /* Default values */ | ||
| .theme--light { | ||
| --panel-box-border-color: color-mix( in srgb, #000000 16%, var( --clr-wiki-primary-container ) ); | ||
| --panel-box-color: var( --clr-wiki-on-primary-container ); | ||
| --panel-header-background-color: var( --clr-wiki-primary-container ); | ||
| } | ||
|
|
||
| .theme--dark { | ||
| --panel-box-border-color: var( --clr-surface-3 ); | ||
| --panel-box-color: var( --clr-wiki-on-primary-container ); | ||
| --panel-header-background-color: color-mix( in srgb, #000000 20%, var( --clr-wiki-theme-20 ) ); | ||
| } | ||
|
|
||
| /* If theme was in the known list */ | ||
| $themes: sun, tuliptree, redviolet, gigas, forest; | ||
|
|
||
| @each $theme in $themes { | ||
| html[data-wiki-theme='#{$theme}'].theme--light { | ||
| --panel-box-border-color: var( --clr-#{$theme}-80 ); | ||
| --panel-box-color: var( --clr-#{$theme}-10 ); | ||
| --panel-header-background-color: var( --clr-#{$theme}-90 ); | ||
| } | ||
|
|
||
| html[data-wiki-theme='#{$theme}'].theme--dark { | ||
| --panel-box-border-color: var( --clr-#{$theme}-30 ); | ||
| --panel-box-color: var( --clr-#{$theme}-90 ); | ||
| --panel-header-background-color: var( --clr-#{$theme}-20 ); | ||
| } | ||
| } | ||
|
|
Contributor
There was a problem hiding this comment.
Delete, I remember now that this was for the previous panel boxes design
Comment on lines
38
to
45
| html .panel-box { | ||
| margin-bottom: 10px; | ||
| border: 0.0625rem solid var( --panel-box-border-color, var( --wiki-bordercolor-light ) ); | ||
|
|
||
| &.wiki-bordercolor-light { | ||
| border-color: var( --panel-box-border-color, var( --wiki-bordercolor-light ) ); | ||
| } | ||
| } |
Contributor
There was a problem hiding this comment.
Delete, move margin-bottom: 10px; to class below (I'll add this as a suggestion)
| .panel-box { | ||
| box-shadow: 0 0.0625rem 0.25rem 0 rgba( 0, 0, 0, 0.12 ); | ||
| border: 0; | ||
| border-radius: 0.5rem; |
Contributor
There was a problem hiding this comment.
Suggested change
| border-radius: 0.5rem; | |
| margin-bottom: 0.625rem; |
Add margin from class above
Comment on lines
48
to
72
| html .panel-box-heading { | ||
| font-size: 18px; | ||
| font-weight: bold; | ||
| padding: 5px 10px; | ||
| background-color: var( --panel-header-background-color, var( --wiki-color-light ) ); | ||
| border-bottom: 0.0625rem solid var( --panel-box-border-color, var( --wiki-bordercolor-light ) ); | ||
| color: var( --panel-box-color ); | ||
|
|
||
| &.wiki-bordercolor-light { | ||
| border-color: var( --panel-box-border-color, var( --wiki-bordercolor-light ) ); | ||
| } | ||
| } | ||
|
|
||
| .panel-box-heading:not( :first-child ) { | ||
| border-top: 1px solid; | ||
| border-top-color: inherit; | ||
| } | ||
|
|
||
| .panel-box-heading > small { | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .panel-box-body { | ||
| padding: 10px; | ||
| } |
Contributor
There was a problem hiding this comment.
Delete, this is old code, the mainpage uses .mainpage-v2 . Moving the font-weight from panel-box-heading to the class below (I'll add this as a suggestion)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
For
Panels.scssthere will be an additional attribute being added to<html/>element onlakesideviewskins for exposing the current wiki theme ondata-wiki-themeattribute.How did you test this change?
Deployed to my dev wiki (lakesideview + Lua-Modules changes): Compared the loaded css from production with dev. Production should still contain the removed css, and on dev the css should be on the loaded modules intead of the lakeside skin.
Dev Lakeside CSS
Dev LuaModule CSS