From a55343f442d41030af1c23d4bac1194ccea849e0 Mon Sep 17 00:00:00 2001 From: krateng Date: Mon, 30 Aug 2021 19:03:06 +0200 Subject: [PATCH] Changed from LESS to CSS custom properties --- maloja/__pkginfo__.py | 3 +- maloja/server.py | 19 ++--- .../{less/grisons.less => css/grisons.css} | 77 ++++++++++--------- .../grisonsfont.less => css/grisonsfont.css} | 0 .../{less/maloja.less => css/maloja.css} | 50 ++++++------ 5 files changed, 71 insertions(+), 78 deletions(-) rename maloja/web/static/{less/grisons.less => css/grisons.css} (50%) rename maloja/web/static/{less/grisonsfont.less => css/grisonsfont.css} (100%) rename maloja/web/static/{less/maloja.less => css/maloja.css} (92%) diff --git a/maloja/__pkginfo__.py b/maloja/__pkginfo__.py index b69b4d4..0653b03 100644 --- a/maloja/__pkginfo__.py +++ b/maloja/__pkginfo__.py @@ -5,7 +5,7 @@ author = { "email":"maloja@dev.krateng.ch", "github": "krateng" } -version = 2,12,10 +version = 2,12,11 versionstr = ".".join(str(n) for n in version) links = { "pypi":"malojaserver", @@ -19,7 +19,6 @@ requires = [ "nimrodel>=0.6.5", "setproctitle>=1.1.10", "wand>=0.5.4", - "lesscpy>=0.13", "jinja2>2.11", "lru-dict>=1.1.6", "css_html_js_minify>=2.5.5" diff --git a/maloja/server.py b/maloja/server.py index 549ea8e..a8b4084 100644 --- a/maloja/server.py +++ b/maloja/server.py @@ -34,7 +34,7 @@ import os import setproctitle import pkg_resources import math -from css_html_js_minify import html_minify +from css_html_js_minify import html_minify, css_minify # url handling import urllib @@ -73,17 +73,13 @@ def deprecated_api(pth): -pthjoin = os.path.join - def generate_css(): - import lesscpy - from io import StringIO - less = "" - for f in os.listdir(pthjoin(STATICFOLDER,"less")): - with open(pthjoin(STATICFOLDER,"less",f),"r") as lessf: - less += lessf.read() + css = "" + for f in os.listdir(os.path.join(STATICFOLDER,"css")): + with open(os.path.join(STATICFOLDER,"css",f),"r") as fd: + css += fd.read() - css = lesscpy.compile(StringIO(less),minify=True) + css = css_minify(css) return css css = generate_css() @@ -93,9 +89,6 @@ def clean_html(inp): if settings.get_settings("DEV_MODE"): return inp else: return html_minify(inp) -#os.makedirs("web/css",exist_ok=True) -#with open("web/css/style.css","w") as f: -# f.write(css) @webserver.route("") diff --git a/maloja/web/static/less/grisons.less b/maloja/web/static/css/grisons.css similarity index 50% rename from maloja/web/static/less/grisons.less rename to maloja/web/static/css/grisons.css index 13d75ba..5900fa2 100644 --- a/maloja/web/static/less/grisons.less +++ b/maloja/web/static/css/grisons.css @@ -2,33 +2,33 @@ COMMON STYLES FOR MALOJA, ALBULA AND POSSIBLY OTHERS **/ +:root { + --base-color: #232327; + --base-color-dark: #090909; + --base-color-light: #343437; -@BASE_COLOR: #333337; -@BASE_COLOR_DARK: #0a0a0a; -@BASE_COLOR_LIGHT: #444447; + --text-color: beige; + --text-color-selected: fadeout(var(--text-color),40%); + --text-color-secondary: #bbb; + --text-color-tertiary: grey; + --text-color-focus: yellow; -@TEXT_COLOR: beige; -@TEXT_COLOR_SELECTED: fadeout(@TEXT_COLOR,40%); -@TEXT_COLOR_SECONDARY: #bbb; -@TEXT_COLOR_TERTIARY: grey; -@FOCUS_COLOR: yellow; + --ctrl-element-color-bg: rgba(0,255,255,0.1); + --ctrl-element-color-main: rgba(103,85,0,0.7); + --ctrl-element-color-focus: gold; -@CONTROL_ELEMENT_BG_COLOR: rgba(0,255,255,0.1); -@CONTROL_ELEMENT_FG_COLOR: rgba(103,85,0,0.7); -@CONTROL_ELEMENT_FOCUS_COLOR: gold; - -@BUTTON_BG_COLOR: @TEXT_COLOR; -@BUTTON_FOCUS_BG_COLOR: @FOCUS_COLOR; -@BUTTON_FG_COLOR: @BASE_COLOR; -@BUTTON_FOCUS_FG_COLOR: @BASE_COLOR; + --button-color-bg: var(--text-color); + --button-color-bg-focus: var(--focus-color); + --button-color-fg: var(--base-color); + --button-color-fg-focus: var(--base-color); +} -//@import url('https://fonts.googleapis.com/css?family=Ubuntu'); body { - background-color: @BASE_COLOR; - color: @TEXT_COLOR; + background-color: var(--base-color); + color: var(--text-color); font-family:"Ubuntu"; } @@ -78,13 +78,13 @@ table.top_info td.text table.image_row td:hover { } ::-webkit-scrollbar-track { background: grey; - background-color: @CONTROL_ELEMENT_BG_COLOR; + background-color: var(--ctrl-element-color-bg); } ::-webkit-scrollbar-thumb { -background-color: @CONTROL_ELEMENT_FG_COLOR; +background-color: var(--ctrl-element-color-main); } ::-webkit-scrollbar-thumb:hover { - background: @CONTROL_ELEMENT_FOCUS_COLOR; + background: var(--ctrl-element-color-focus); } @@ -99,14 +99,14 @@ background-color: @CONTROL_ELEMENT_FG_COLOR; div.grisons_bar { - background-color: @CONTROL_ELEMENT_BG_COLOR; + background-color: var(--ctrl-element-color-bg); } div.grisons_bar>div { height:100%; - background-color: @CONTROL_ELEMENT_FG_COLOR; + background-color: var(--ctrl-element-color-main); } div.grisons_bar:hover>div { - background-color: @CONTROL_ELEMENT_FOCUS_COLOR; + background-color: var(--ctrl-element-color-focus); } @@ -116,22 +116,23 @@ div.grisons_bar:hover>div { /** LINKS **/ - a { - color:inherit; - text-decoration:none; - } +a { + color:inherit; + text-decoration:none; +} +a:hover { + text-decoration:underline; +} // for links in running text - a.textlink { - color:@FOCUS_COLOR; - } - a.hidelink:hover { - text-decoration:none; - } +a.textlink { + color: var(--text-color-focus); +} +a.hidelink:hover { + text-decoration:none; +} + - a:hover { - text-decoration:underline; - } diff --git a/maloja/web/static/less/grisonsfont.less b/maloja/web/static/css/grisonsfont.css similarity index 100% rename from maloja/web/static/less/grisonsfont.less rename to maloja/web/static/css/grisonsfont.css diff --git a/maloja/web/static/less/maloja.less b/maloja/web/static/css/maloja.css similarity index 92% rename from maloja/web/static/less/maloja.less rename to maloja/web/static/css/maloja.css index d0c5a1c..ef8bd8f 100644 --- a/maloja/web/static/less/maloja.less +++ b/maloja/web/static/css/maloja.css @@ -59,10 +59,10 @@ div#settingsicon { position:fixed; right:30px; top:30px; - fill:@TEXT_COLOR; + fill: var(--text-color); } div#settingsicon:hover { - fill:@FOCUS_COLOR; + fill: var(--text-color-focus); } @@ -74,7 +74,7 @@ div.footer { position:fixed; height:20px; /**width:100%;**/ - background-color:@BASE_COLOR_DARK; + background-color: var(--base-color-dark); bottom:0px; left:0px; right:0px; @@ -183,7 +183,7 @@ div.searchresults table.searchresults_tracks td span:nth-child(1) { position:fixed; /*height:30px;*/ /**width:100%;**/ - background-color:@BASE_COLOR_DARK; + background-color: var(--base-color-dark); bottom:0px; left:0px; right:0px; @@ -247,14 +247,14 @@ table.top_info + .stat_module_toptracks table { .stats { - color:@TEXT_COLOR_TERTIARY; + color: var(--text-color-tertiary); } .rank { text-align:right; - color:@TEXT_COLOR_TERTIARY; + color: var(--text-color-tertiary); } .extra { - color:@TEXT_COLOR_TERTIARY; + color: var(--text-color-tertiary); font-size:80%; } @@ -273,14 +273,14 @@ input#apikey { input.simpleinput { font-family:'Ubuntu'; - color:@TEXT_COLOR; + color: var(--text-color); outline:none; border-top: 0px solid; border-left: 0px solid; border-right: 0px solid; padding:2px; background-color:inherit; - border-bottom: 1px solid @TEXT_COLOR; + border-bottom: 1px solid var(--text-color); } @@ -303,7 +303,7 @@ h2.headerwithextra { margin-top:15px; } h2.headerwithextra+span.afterheader { - color:@TEXT_COLOR_TERTIARY; + color: var(--text-color-tertiary); } /* SHINY*/ @@ -423,13 +423,13 @@ img.star { padding:3px; padding-right:6px; padding-left:6px; - background-color:@BUTTON_BG_COLOR; - color:@BUTTON_FG_COLOR; + background-color: var(--button-color-bg); + color: var(--button-color-fg); cursor:pointer; } .button:hover { - background-color:@BUTTON_FOCUS_BG_COLOR; - color:@BUTTON_FOCUS_FG_COLOR; + background-color: var(--button-color-bg-focus); + color: var(--button-color-fg-focus); } .button.locked { background-color:grey; @@ -488,7 +488,7 @@ table.list tr:hover { table.list td.time { width:11%; - color:@TEXT_COLOR_TERTIARY; + color: var(--text-color-tertiary); } @@ -534,7 +534,7 @@ table.list td.artists,td.artist,td.title,td.track { } table.list td.track span.artist_in_trackcolumn { - color:@TEXT_COLOR_SECONDARY; + color: var(--text-color-secondary); } table.list td.searchProvider { @@ -587,25 +587,25 @@ table.list td.amount { } table.list td.bar { width:500px; - background-color:@BASE_COLOR; + background-color: var(--base-color); /* Remove 5er separators for bars */ /*border-color:rgba(0,0,0,0)!important;*/ } table.list td.bar div { - background-color:@TEXT_COLOR; + background-color: var(--text-color); height:20px; /* can only do this absolute apparently */ position:relative; display:inline-block; margin-bottom:-3px; } table.list tr:hover td.bar div { - background-color:@FOCUS_COLOR; + background-color: var(--text-color-focus); cursor:pointer; } table.list td.chart { width:500px; - background-color:@BASE_COLOR; + background-color: var(--base-color); /* Remove 5er separators for bars */ /*border-color:rgba(0,0,0,0)!important;*/ } @@ -651,14 +651,14 @@ table.list tr td.button { table.list td.button div { - background-color:@BUTTON_BG_COLOR; - color:@BUTTON_FG_COLOR; + background-color: var(--button-color-bg); + color: var(--button-color-fg); padding:3px; border-radius:4px; } table.list td.button div:hover { - background-color:@BUTTON_FOCUS_BG_COLOR; - color:@BUTTON_FOCUS_FG_COLOR; + background-color: var(--button-color-bg-focus); + color: var(--button-color-fg-focus); padding:3px; border-radius:4px; } @@ -829,7 +829,7 @@ div.sidelist { top:0px; width:40%; height:100%; - background-color:#444447; + background-color: var(--base-color-light); padding-left:30px; padding-right:30px; }