mirror of
https://github.com/flarum/core.git
synced 2025-08-01 14:10:37 +02:00
[1.x] Custom Colorising with CSS Custom Properties (#3001)
* Start of conversion to CSS variables * Use variable for Badge colors * Use variable for avatar bg * Use variable for user card bg * Use css variables for hero * Use css variables for buttons * Use css variables for sidenav links * Cleaner style attr Co-authored-by: David Wheatley <hi@davwheat.dev>
This commit is contained in:
18
less/common/root.less
Normal file
18
less/common/root.less
Normal file
@@ -0,0 +1,18 @@
|
||||
:root {
|
||||
// Component colors
|
||||
--avatar-bg: @control-bg;
|
||||
--badge-bg: @muted-color;
|
||||
--badge-color: #fff;
|
||||
--usercard-bg: @control-bg;
|
||||
--hero-bg: @hero-bg;
|
||||
--hero-color: @hero-color;
|
||||
|
||||
// Store the current responsive screen mode in a CSS variable, to make it
|
||||
// available to the JS code.
|
||||
--flarum-screen: none;
|
||||
|
||||
@media @phone { --flarum-screen: phone; }
|
||||
@media @tablet { --flarum-screen: tablet; }
|
||||
@media @desktop { --flarum-screen: desktop; }
|
||||
@media @desktop-hd { --flarum-screen: desktop-hd; }
|
||||
}
|
Reference in New Issue
Block a user