pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

The great flattification

Browse Source
This commit is contained in:
Fornax
2022-03-29 21:41:46 +02:00
parent e5328a7d6c
commit 2b847c0456
41 changed files with 379 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
webcontroller/style.go
View File

@@ -29,16 +29,12 @@ func userStyle(style string) (s pixeldrainStyleSheet) {
s = pixeldrainClassicStyle
case "solarized_dark":
s = solarizedDarkStyle
case "sunny":
s = sunnyPixeldrainStyle
case "maroon":
s = maroonStyle
case "hacker":
s = hackerStyle
case "canta":
s = cantaPixeldrainStyle
case "deepsea":
s = deepseaPixeldrainStyle
case "skeuos":
s = skeuosPixeldrainStyle
case "nord":
@@ -66,48 +62,50 @@ func userStyle(style string) (s pixeldrainStyleSheet) {
}
}
setDefaultHSL(&s.Link, s.Highlight.Add(0, 0, -.05))
setDefaultHSL(&s.InputDisabled, s.Input.Add(0, -.2, -.2))
setDefaultHSL(&s.ScrollbarForeground, s.Input)
setDefaultHSL(&s.ScrollbarHover, s.ScrollbarForeground.Add(0, 0, .1))
setDefaultHSL(&s.Layer1Text, s.Text)
setDefaultColor(&s.ScrollbarBackground, s.BodyColor)
setDefaultColor(&s.ScrollbarForeground, s.Input)
setDefaultColor(&s.ScrollbarHover, s.Highlight)
setDefaultHSL(&s.Chart1, s.Highlight)
setDefaultHSL(&s.Chart2, s.Chart1.Add(120, 0, 0))
setDefaultHSL(&s.Chart3, s.Chart2.Add(120, 0, 0))
setDefaultColor(&s.HighlightBackground, Gradient{180, []Color{s.Highlight, s.Highlight.Add(0, 0, -0.03)}})
setDefaultColor(&s.Background, s.Layer1)
setDefaultColor(&s.BackgroundPattern, s.Layer1)
setDefaultColor(&s.ParallaxSlider, s.Layer1)
setDefaultColor(&s.Background, s.BackgroundColor)
setDefaultColor(&s.BackgroundPattern, s.BackgroundColor)
setDefaultColor(&s.ParallaxSlider, s.BackgroundColor)
setDefaultColor(&s.Navigation, NoColor)
setDefaultColor(&s.Body, s.Layer2)
setDefaultColor(&s.BodyBackground, s.BodyColor)
setDefaultHSL(&s.BackgroundText, s.BodyText)
setDefaultColor(&s.Separator, s.BodyColor.Add(0, 0, .05))
setDefaultColor(&s.Shaded, RGBA{0, 0, 0, 0.2})
return s
}
type pixeldrainStyleSheet struct {
Text hsl
Link hsl // Based on Highlight if undefined
Input hsl // Buttons, text fields
InputText hsl
InputDisabled hsl
Input Color
InputText Color
InputDisabledText Color
HighlightBackground Color
Highlight hsl // Links, highlighted buttons, list navigation
HighlightText hsl // Text on buttons
Danger hsl
ScrollbarForeground hsl // Based on Highlight if undefined
ScrollbarHover hsl // Based on ScrollbarForeground if undefined
ScrollbarBackground Color
ScrollbarForeground Color // Based on Highlight if undefined
ScrollbarHover Color // Based on ScrollbarForeground if undefined
BackgroundColor hsl
Background Color
BackgroundText hsl
BackgroundPattern Color
ParallaxSlider Color
Navigation Color
Body Color
BodyColor hsl
BodyBackground Color
BodyText hsl
Separator Color
Shaded Color
Layer1 hsl // Deepest and darkest layer
Layer1Text hsl // Based on Text if undefined
Layer2 hsl
Layer3 hsl
Layer4 hsl // Highest and brightest layer
PopoutColor hsl
// Colors to use in graphs
Chart1 hsl
@@ -121,37 +119,31 @@ type pixeldrainStyleSheet struct {
func (s pixeldrainStyleSheet) String() string {
return fmt.Sprintf(
`:root {
--text_color: %s;
--link_color: %s;
--input_color: %s;
--input_color_dark: %s;
--input_text_color: %s;
--input_disabled_color: %s;
--input_background: %s;
--input_text: %s;
--input_disabled_text: %s;
--highlight_background: %s;
--highlight_color: %s;
--highlight_color_dark: %s;
--highlight_text_color: %s;
--danger_color: %s;
--danger_color_dark: %s;
--scrollbar_background_color: %s;
--scrollbar_foreground_color: %s;
--scrollbar_hover_color: %s;
--scrollbar_background_color: %s;
--background_color: %s;
--background: %s;
--background_text_color: %s;
--background_pattern_color: %s;
--parallax_slider_color: %s;
--navigation_background: %s;
--body_color: %s;
--body_background: %s;
--body_text_color: %s;
--separator: %s;
--shaded_background: %s;
--layer_1_color: %s;
--layer_1_color_border: %s;
--layer_1_text_color: %s;
--layer_2_color: %s;
--layer_2_color_border: %s;
--layer_3_color: %s;
--layer_3_color_border: %s;
--layer_4_color: %s;
--layer_4_color_border: %s;
--popout_color: %s;
--chart_1_color: %s;
--chart_2_color: %s;
@@ -159,36 +151,30 @@ func (s pixeldrainStyleSheet) String() string {
--shadow_color: %s;
}`,
s.Text.CSS(),
s.Link.CSS(),
s.Input.CSS(),
s.Input.Add(0, 0, -.02).CSS(),
s.InputText.CSS(),
s.InputDisabled.CSS(),
s.InputDisabledText.CSS(),
s.HighlightBackground.CSS(),
s.Highlight.CSS(),
s.Highlight.Add(0, 0, -.02).CSS(),
s.HighlightText.CSS(),
s.Danger.CSS(),
s.Danger.Add(0, 0, -.02).CSS(),
s.ScrollbarBackground.CSS(),
s.ScrollbarForeground.CSS(),
s.ScrollbarHover.CSS(),
s.Layer2.CSS(), // Scrollbar background
s.BackgroundColor.CSS(),
s.Background.CSS(),
s.BackgroundText.CSS(),
s.BackgroundPattern.CSS(),
s.ParallaxSlider.CSS(),
s.Navigation.CSS(),
s.Body.CSS(),
s.BodyColor.CSS(),
s.BodyBackground.CSS(),
s.BodyText.CSS(),
s.Separator.CSS(),
s.Shaded.CSS(),
s.Layer1.CSS(),
s.Layer1.Add(0, 0, .05).CSS(),
s.Layer1Text.CSS(),
s.Layer2.CSS(),
s.Layer2.Add(0, 0, .05).CSS(),
s.Layer3.CSS(),
s.Layer3.Add(0, 0, .05).CSS(),
s.Layer4.CSS(),
s.Layer4.Add(0, 0, .05).CSS(),
s.PopoutColor.CSS(),
s.Chart1.CSS(),
s.Chart2.CSS(),
s.Chart3.CSS(),
@@ -229,227 +215,192 @@ func (s pixeldrainStyleSheet) BackgroundTiles(tpl *template.Template) template.U
// Following are all the available styles
var defaultPixeldrainStyle = pixeldrainStyleSheet{
Text: hsl{0, 0, .8},
Input: hsl{266, .85, .38},
InputText: hsl{0, 0, 1},
Input: hsl{266, .85, .24},
InputText: hsl{0, 0, .9},
InputDisabledText: hsl{266, .85, .4},
HighlightBackground: NewGradient(150, hsl{150, .84, .39}, hsl{85, .85, .35}),
Highlight: hsl{117, .63, .46},
HighlightText: hsl{0, 0, 0},
Danger: hsl{357, .63, .46},
ScrollbarBackground: hsl{274, .9, .14},
ScrollbarForeground: hsl{266, .85, .40},
ScrollbarHover: hsl{266, .85, .50},
Background: NewGradient(120, hsl{240, .9, .14}, hsl{274, .9, .14}, hsl{310, .8, .12}),
BackgroundColor: hsl{275, .8, .10},
Background: NewGradient(120, hsl{250, .9, .14}, hsl{300, .9, .10}),
BackgroundPattern: NoColor,
ParallaxSlider: hsl{275, .8, .1},
Navigation: RGBA{0, 0, 0, 0.1},
Body: NoColor,
Layer1: hsl{275, .8, .10},
Layer2: hsl{275, .75, .12},
Layer3: hsl{275, .7, .18},
Layer4: hsl{275, .65, .24},
BodyColor: hsl{274, .9, .14},
BodyBackground: NoColor,
BodyText: hsl{0, 0, .8},
PopoutColor: hsl{275, .8, .18},
Shadow: hsl{0, 0, 0},
}
var pixeldrainClassicStyle = pixeldrainStyleSheet{
Text: hsl{0, 0, .8},
Input: hsl{0, 0, .25},
InputText: hsl{0, 0, 1},
Input: hsl{0, 0, .16},
InputText: hsl{0, 0, .9},
InputDisabledText: hsl{0, 0, .4},
Highlight: hsl{89, .60, .45},
HighlightText: hsl{0, 0, 0},
Danger: hsl{339, .65, .31},
ScrollbarForeground: hsl{0, 0, .40},
ScrollbarHover: hsl{0, 0, .50},
Layer1: hsl{0, 0, .08},
Layer2: hsl{0, 0, .11},
Layer3: hsl{0, 0, .15},
Layer4: hsl{0, 0, .18},
Shadow: hsl{0, 0, 0},
}
var sunnyPixeldrainStyle = pixeldrainStyleSheet{
Text: hsl{0, 0, .1},
Input: hsl{0, 0, .96}, // hsl(0, 0%, 96%)
InputText: hsl{0, 0, .1},
Highlight: hsl{89, .74, .5}, // hsl(89, 73%, 50%)
HighlightText: hsl{0, 0, 0},
Danger: hsl{345, .99, .33}, // hsl(345, 99%, 33%)
ScrollbarForeground: hsl{0, 0, .30},
ScrollbarHover: hsl{0, 0, .40},
Layer1: hsl{0, 0, .98}, // hsl(0, 0%, 13%)
Layer2: hsl{0, 1, 1},
Layer3: hsl{0, 1, 1},
Layer4: hsl{0, 1, 1},
BackgroundColor: hsl{0, 0, .08},
BodyColor: hsl{0, 0, .11},
BodyText: hsl{0, 0, .8},
PopoutColor: hsl{0, 0, .18},
Shadow: hsl{0, 0, 0},
}
var solarizedDarkStyle = pixeldrainStyleSheet{
Text: hsl{0, 0, .75},
Input: hsl{192, .95, .25},
InputText: hsl{0, 0, 1},
InputDisabledText: hsl{0, 0, .5},
Highlight: hsl{145, .63, .42},
HighlightText: hsl{0, 0, 0},
Danger: hsl{343, .63, .42},
ScrollbarForeground: hsl{192, .95, .30},
ScrollbarHover: hsl{192, .95, .40},
Layer1: hsl{192, .87, .09},
Layer2: hsl{192, .81, .14},
Layer3: hsl{192, .95, .17},
Layer4: hsl{192, .99, .19},
BackgroundColor: hsl{192, .87, .09},
BodyColor: hsl{192, .81, .14},
BodyText: hsl{0, 0, .75},
PopoutColor: hsl{192, .95, .17},
Shadow: hsl{0, 0, 0},
}
var maroonStyle = pixeldrainStyleSheet{
Text: hsl{0, 0, .8},
Input: hsl{0, .87, .40}, // hsl(0, 87%, 40%)
Input: hsl{0, .8, .20}, // hsl(0, 87%, 40%)
InputText: hsl{0, 0, 1},
InputDisabledText: hsl{0, 0, .5},
Highlight: hsl{137, 1, .37}, //hsl(137, 100%, 37%)
HighlightText: hsl{0, 0, 0},
Danger: hsl{9, .96, .42}, //hsl(9, 96%, 42%)
ScrollbarForeground: hsl{0, .75, .3},
ScrollbarHover: hsl{0, .75, .4},
Layer1: hsl{0, .7, .05},
Layer2: hsl{0, .8, .08}, // hsl{0, .8, .15},
Layer3: hsl{0, .9, .14},
Layer4: hsl{0, .9, .20},
BackgroundColor: hsl{0, .7, .05},
BodyColor: hsl{0, .8, .08}, // hsl{0, .8, .15},
BodyText: hsl{0, 0, .8},
PopoutColor: hsl{0, .9, .14},
Shadow: hsl{0, 0, 0},
}
var hackerStyle = pixeldrainStyleSheet{
Text: hsl{0, 0, .8},
Input: hsl{120, .5, .1}, // hsl(120, 50%, 10%)
Input: hsl{0, 0, .1}, // hsl(120, 50%, 10%)
InputText: hsl{0, 0, 1},
Highlight: hsl{120, 1, .5},
InputDisabledText: hsl{0, 0, .5},
Highlight: hsl{120, .8, .5},
HighlightText: hsl{0, 0, 0},
Danger: hsl{0, 1, .4},
ScrollbarForeground: hsl{120, .5, .25},
ScrollbarHover: hsl{120, .5, .35},
Layer1: hsl{0, 0, 0},
Layer2: hsl{0, 0, .03},
Layer3: hsl{120, .3, .08},
Layer4: hsl{120, .5, .12},
BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{0, 0, .03},
BodyText: hsl{0, 0, .8},
PopoutColor: hsl{120, .4, .05},
Shadow: hsl{0, 0, 0},
}
var cantaPixeldrainStyle = pixeldrainStyleSheet{
Text: hsl{0, 0, .8},
Input: hsl{167, .06, .30}, // hsl(167, 6%, 30%)
InputText: hsl{0, 0, 1},
InputDisabledText: hsl{0, 0, .5},
Highlight: hsl{165, 1, .40}, // hsl(165, 100%, 40%)
HighlightText: hsl{0, 0, 0},
Danger: hsl{40, 1, .5}, // hsl(40, 100%, 50%)
ScrollbarForeground: hsl{204, .05, .78}, // hsl(204, 5%, 78%)
ScrollbarHover: hsl{204, .05, .88},
Layer1: hsl{180, .04, .16},
Layer2: hsl{168, .05, .21},
Layer3: hsl{170, .05, .26},
Layer4: hsl{163, .04, .31},
Shadow: hsl{0, 0, 0},
}
var deepseaPixeldrainStyle = pixeldrainStyleSheet{
Text: hsl{0, 0, .7},
Input: hsl{41, .58, .47},
InputText: hsl{0, 0, 0},
Highlight: hsl{5, .77, .55},
HighlightText: hsl{0, 0, 0},
Danger: hsl{5, .77, .55},
ScrollbarForeground: hsl{162, .28, .23}, // hsl(162, 28%, 23%)
ScrollbarHover: hsl{12, .38, .26}, // hsl(12, 38%, 26%)
Layer1: hsl{160, .27, .05},
Layer2: hsl{163, .26, .09}, // hsl(163, 26%, 11%)
Layer3: hsl{161, .28, .12}, // hsl(161, 28%, 14%)
Layer4: hsl{161, .32, .15},
BackgroundColor: hsl{180, .04, .16},
BodyColor: hsl{168, .05, .21},
BodyText: hsl{0, 0, .8},
PopoutColor: hsl{170, .05, .26},
Shadow: hsl{0, 0, 0},
}
var skeuosPixeldrainStyle = pixeldrainStyleSheet{
Text: hsl{60, .06, .93}, // hsl(60, 6%, 93%)
Input: hsl{226, .15, .23}, //hsl(226, 15%, 23%)
InputText: hsl{60, .06, .93},
InputDisabledText: hsl{0, 0, .5},
Highlight: hsl{282, .65, .54}, // hsl(282, 65%, 54%)
HighlightText: hsl{0, 0, 1},
Danger: hsl{0, .79, .43}, // hsl(0, 79%, 43%)
ScrollbarForeground: hsl{220, .02, .62}, // hsl(220, 2%, 62%)
ScrollbarHover: hsl{220, .02, .80},
Layer1: hsl{232, .14, .11}, //hsl(232, 14%, 11%)
Layer2: hsl{229, .14, .16}, // hsl(229, 14%, 16%)
Layer3: hsl{225, .14, .17}, // hsl(225, 14%, 17%)
Layer4: hsl{226, .14, .18}, // hsl(226, 14%, 18%)
BackgroundColor: hsl{232, .14, .11}, //hsl(232, 14%, 11%)
BodyColor: hsl{229, .14, .16}, // hsl(229, 14%, 16%)
BodyText: hsl{60, .06, .93}, // hsl(60, 6%, 93%)
PopoutColor: hsl{225, .14, .17}, // hsl(225, 14%, 17%)
Shadow: hsl{0, 0, 0},
}
var nordPixeldrainStyle = pixeldrainStyleSheet{
Text: hsl{210, .34, .63},
Input: hsl{193, .43, .67},
InputText: hsl{180, .19, .23},
InputDisabledText: hsl{0, 0, .5},
Highlight: hsl{145, .63, .42},
HighlightText: hsl{0, 0, 0},
Danger: hsl{354, .42, .56},
ScrollbarForeground: hsl{193, .43, .67},
ScrollbarHover: hsl{193, .43, .76},
Layer1: hsl{220, .16, .22},
Layer2: hsl{222, .16, .28},
Layer3: hsl{220, .17, .32},
Layer4: hsl{220, .16, .36},
BackgroundColor: hsl{220, .16, .22},
BodyColor: hsl{222, .16, .28},
BodyText: hsl{210, .34, .63},
PopoutColor: hsl{220, .17, .32},
Shadow: hsl{0, 0, 0},
}
var snowstormPixeldrainStyle = pixeldrainStyleSheet{
Text: hsl{220, .16, .36}, // hsl(220, 16%, 36%)
Link: hsl{92, .40, .40},
Input: hsl{193, .43, .67}, // hsl(193, 43%, 67%)
Input: hsl{219, .28, .88}, // hsl(219, 28%, 88%)
InputText: hsl{180, .19, .23},
Highlight: hsl{92, .28, .65}, // hsl(92, 28%, 65%)
InputDisabledText: hsl{180, .05, .63},
Highlight: hsl{179, .25, .65}, // hsl(92, 28%, 65%)
HighlightText: hsl{0, 0, 0},
Danger: hsl{354, .42, .56},
ScrollbarForeground: hsl{193, .43, .67},
ScrollbarHover: hsl{193, .43, .76},
BackgroundColor: hsl{220, .16, .36}, // hsl(220, 16%, 36%)
BackgroundText: hsl{219, .28, .88},
ParallaxSlider: hsl{220, .17, .20}, // Layer 1 but darker
BodyColor: hsl{218, .27, .94},
BodyText: hsl{220, .16, .36}, // hsl(220, 16%, 36%)
Shaded: RGBA{255, 255, 255, 0.4},
Layer1: hsl{220, .17, .32}, // hsl(220, 17%, 32%)
Layer1Text: hsl{219, .28, .88},
BackgroundPattern: hsl{219, .28, .88}, // hsl(219, 28%, 88%)
Layer2: hsl{219, .28, .88}, // hsl(219, 28%, 88%)
Layer3: hsl{218, .27, .92}, // hsl(218, 27%, 92%)
Layer4: hsl{218, .27, .94}, // hsl(218, 27%, 94%)
PopoutColor: hsl{218, .27, .92}, // hsl(218, 27%, 92%)
Shadow: hsl{0, .0, .50},
Shadow: hsl{220, .16, .36},
Light: true,
}
var sweetPixeldrainStyle = pixeldrainStyleSheet{
Text: hsl{223, .13, .79}, // hsl(223, 13%, 79%)
Input: hsl{214, .26, .20}, // hsl(214, 26%, 12%)
InputText: hsl{223, .13, .79},
Highlight: hsl{296, .88, .44},
HighlightText: hsl{0, 0, 0},
Danger: hsl{356, 1, .64}, // hsl(356, 100%, 64%)
Input: hsl{229, .25, .18}, // hsl(229, 25%, 14%)
InputText: hsl{223, .13, .79},
InputDisabledText: hsl{0, 0, .5},
Highlight: hsl{296, .88, .44},
HighlightText: hsl{0, 0, 0},
Danger: hsl{356, 1, .64}, // hsl(356, 100%, 64%)
Layer1: hsl{225, .25, .06}, // hsl(225, 25%, 6%)
Layer2: hsl{228, .25, .12}, // hsl(228, 25%, 12%)
Layer3: hsl{229, .25, .14}, // hsl(229, 25%, 14%)
Layer4: hsl{229, .25, .18},
BackgroundColor: hsl{225, .25, .06}, // hsl(225, 25%, 6%)
BodyColor: hsl{228, .25, .12}, // hsl(228, 25%, 12%)
BodyText: hsl{223, .13, .79}, // hsl(223, 13%, 79%)
PopoutColor: hsl{229, .25, .14}, // hsl(229, 25%, 14%)
Shadow: hsl{0, 0, 0},
}