mirror/maloja
1
0
Fork 0
mirror of https://github.com/krateng/maloja.git synced 2023-08-10 21:12:55 +03:00
Code Issues Projects Releases Wiki Activity

Changed from LESS to CSS custom properties

Browse Source
This commit is contained in:
krateng 2021-08-30 19:03:06 +02:00
parent 9037403777
commit a55343f442
5 changed files with 71 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
maloja/__pkginfo__.py
View File

@ -5,7 +5,7 @@ author = {
"email":"maloja@dev.krateng.ch", "email":"maloja@dev.krateng.ch",
"github": "krateng" "github": "krateng"
} }
version = 2,12,10 version = 2,12,11
versionstr = ".".join(str(n) for n in version) versionstr = ".".join(str(n) for n in version)
links = { links = {
"pypi":"malojaserver", "pypi":"malojaserver",
@ -19,7 +19,6 @@ requires = [
"nimrodel>=0.6.5", "nimrodel>=0.6.5",
"setproctitle>=1.1.10", "setproctitle>=1.1.10",
"wand>=0.5.4", "wand>=0.5.4",
"lesscpy>=0.13",
"jinja2>2.11", "jinja2>2.11",
"lru-dict>=1.1.6", "lru-dict>=1.1.6",
"css_html_js_minify>=2.5.5" "css_html_js_minify>=2.5.5"

19
maloja/server.py
View File

@ -34,7 +34,7 @@ import os
import setproctitle import setproctitle
import pkg_resources import pkg_resources
import math import math
from css_html_js_minify import html_minify from css_html_js_minify import html_minify, css_minify
# url handling # url handling
import urllib import urllib
@ -73,17 +73,13 @@ def deprecated_api(pth):
pthjoin = os.path.join
def generate_css(): def generate_css():
import lesscpy css = ""
from io import StringIO for f in os.listdir(os.path.join(STATICFOLDER,"css")):
less = "" with open(os.path.join(STATICFOLDER,"css",f),"r") as fd:
for f in os.listdir(pthjoin(STATICFOLDER,"less")): css += fd.read()
with open(pthjoin(STATICFOLDER,"less",f),"r") as lessf:
less += lessf.read()
css = lesscpy.compile(StringIO(less),minify=True) css = css_minify(css)
return css return css
css = generate_css() css = generate_css()
@ -93,9 +89,6 @@ def clean_html(inp):
if settings.get_settings("DEV_MODE"): return inp if settings.get_settings("DEV_MODE"): return inp
else: return html_minify(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("") @webserver.route("")

77
maloja/web/static/less/grisons.less → maloja/web/static/css/grisons.css
View File

@ -2,33 +2,33 @@
COMMON STYLES FOR MALOJA, ALBULA AND POSSIBLY OTHERS COMMON STYLES FOR MALOJA, ALBULA AND POSSIBLY OTHERS
**/ **/
:root {
--base-color: #232327;
--base-color-dark: #090909;
--base-color-light: #343437;
@BASE_COLOR: #333337; --text-color: beige;
@BASE_COLOR_DARK: #0a0a0a; --text-color-selected: fadeout(var(--text-color),40%);
@BASE_COLOR_LIGHT: #444447; --text-color-secondary: #bbb;
--text-color-tertiary: grey;
--text-color-focus: yellow;
@TEXT_COLOR: beige; --ctrl-element-color-bg: rgba(0,255,255,0.1);
@TEXT_COLOR_SELECTED: fadeout(@TEXT_COLOR,40%); --ctrl-element-color-main: rgba(103,85,0,0.7);
@TEXT_COLOR_SECONDARY: #bbb; --ctrl-element-color-focus: gold;
@TEXT_COLOR_TERTIARY: grey;
@FOCUS_COLOR: yellow;
@CONTROL_ELEMENT_BG_COLOR: rgba(0,255,255,0.1); --button-color-bg: var(--text-color);
@CONTROL_ELEMENT_FG_COLOR: rgba(103,85,0,0.7); --button-color-bg-focus: var(--focus-color);
@CONTROL_ELEMENT_FOCUS_COLOR: gold; --button-color-fg: var(--base-color);
--button-color-fg-focus: var(--base-color);
@BUTTON_BG_COLOR: @TEXT_COLOR; }
@BUTTON_FOCUS_BG_COLOR: @FOCUS_COLOR;
@BUTTON_FG_COLOR: @BASE_COLOR;
@BUTTON_FOCUS_FG_COLOR: @BASE_COLOR;
//@import url('https://fonts.googleapis.com/css?family=Ubuntu');
body { body {
background-color: @BASE_COLOR; background-color: var(--base-color);
color: @TEXT_COLOR; color: var(--text-color);
font-family:"Ubuntu"; font-family:"Ubuntu";
} }
@ -78,13 +78,13 @@ table.top_info td.text table.image_row td:hover {
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: grey; background: grey;
background-color: @CONTROL_ELEMENT_BG_COLOR; background-color: var(--ctrl-element-color-bg);
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: @CONTROL_ELEMENT_FG_COLOR; background-color: var(--ctrl-element-color-main);
} }
::-webkit-scrollbar-thumb:hover { ::-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 { div.grisons_bar {
background-color: @CONTROL_ELEMENT_BG_COLOR; background-color: var(--ctrl-element-color-bg);
} }
div.grisons_bar>div { div.grisons_bar>div {
height:100%; height:100%;
background-color: @CONTROL_ELEMENT_FG_COLOR; background-color: var(--ctrl-element-color-main);
} }
div.grisons_bar:hover>div { 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 **/ /** LINKS **/
a { a {
color:inherit; color:inherit;
text-decoration:none; text-decoration:none;
} }
a:hover {
text-decoration:underline;
}
// for links in running text // for links in running text
a.textlink { a.textlink {
color:@FOCUS_COLOR; color: var(--text-color-focus);
} }
a.hidelink:hover { a.hidelink:hover {
text-decoration:none; text-decoration:none;
} }
a:hover {
text-decoration:underline;
}

0
maloja/web/static/less/grisonsfont.less → maloja/web/static/css/grisonsfont.css
View File

50
maloja/web/static/less/maloja.less → maloja/web/static/css/maloja.css
View File

@ -59,10 +59,10 @@ div#settingsicon {
position:fixed; position:fixed;
right:30px; right:30px;
top:30px; top:30px;
fill:@TEXT_COLOR; fill: var(--text-color);
} }
div#settingsicon:hover { div#settingsicon:hover {
fill:@FOCUS_COLOR; fill: var(--text-color-focus);
} }
@ -74,7 +74,7 @@ div.footer {
position:fixed; position:fixed;
height:20px; height:20px;
/**width:100%;**/ /**width:100%;**/
background-color:@BASE_COLOR_DARK; background-color: var(--base-color-dark);
bottom:0px; bottom:0px;
left:0px; left:0px;
right:0px; right:0px;
@ -183,7 +183,7 @@ div.searchresults table.searchresults_tracks td span:nth-child(1) {
position:fixed; position:fixed;
/*height:30px;*/ /*height:30px;*/
/**width:100%;**/ /**width:100%;**/
background-color:@BASE_COLOR_DARK; background-color: var(--base-color-dark);
bottom:0px; bottom:0px;
left:0px; left:0px;
right:0px; right:0px;
@ -247,14 +247,14 @@ table.top_info + .stat_module_toptracks table {
.stats { .stats {
color:@TEXT_COLOR_TERTIARY; color: var(--text-color-tertiary);
} }
.rank { .rank {
text-align:right; text-align:right;
color:@TEXT_COLOR_TERTIARY; color: var(--text-color-tertiary);
} }
.extra { .extra {
color:@TEXT_COLOR_TERTIARY; color: var(--text-color-tertiary);
font-size:80%; font-size:80%;
} }
@ -273,14 +273,14 @@ input#apikey {
input.simpleinput { input.simpleinput {
font-family:'Ubuntu'; font-family:'Ubuntu';
color:@TEXT_COLOR; color: var(--text-color);
outline:none; outline:none;
border-top: 0px solid; border-top: 0px solid;
border-left: 0px solid; border-left: 0px solid;
border-right: 0px solid; border-right: 0px solid;
padding:2px; padding:2px;
background-color:inherit; 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; margin-top:15px;
} }
h2.headerwithextra+span.afterheader { h2.headerwithextra+span.afterheader {
color:@TEXT_COLOR_TERTIARY; color: var(--text-color-tertiary);
} }
/* SHINY*/ /* SHINY*/
@ -423,13 +423,13 @@ img.star {
padding:3px; padding:3px;
padding-right:6px; padding-right:6px;
padding-left:6px; padding-left:6px;
background-color:@BUTTON_BG_COLOR; background-color: var(--button-color-bg);
color:@BUTTON_FG_COLOR; color: var(--button-color-fg);
cursor:pointer; cursor:pointer;
} }
.button:hover { .button:hover {
background-color:@BUTTON_FOCUS_BG_COLOR; background-color: var(--button-color-bg-focus);
color:@BUTTON_FOCUS_FG_COLOR; color: var(--button-color-fg-focus);
} }
.button.locked { .button.locked {
background-color:grey; background-color:grey;
@ -488,7 +488,7 @@ table.list tr:hover {
table.list td.time { table.list td.time {
width:11%; 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 { table.list td.track span.artist_in_trackcolumn {
color:@TEXT_COLOR_SECONDARY; color: var(--text-color-secondary);
} }
table.list td.searchProvider { table.list td.searchProvider {
@ -587,25 +587,25 @@ table.list td.amount {
} }
table.list td.bar { table.list td.bar {
width:500px; width:500px;
background-color:@BASE_COLOR; background-color: var(--base-color);
/* Remove 5er separators for bars */ /* Remove 5er separators for bars */
/*border-color:rgba(0,0,0,0)!important;*/ /*border-color:rgba(0,0,0,0)!important;*/
} }
table.list td.bar div { table.list td.bar div {
background-color:@TEXT_COLOR; background-color: var(--text-color);
height:20px; /* can only do this absolute apparently */ height:20px; /* can only do this absolute apparently */
position:relative; position:relative;
display:inline-block; display:inline-block;
margin-bottom:-3px; margin-bottom:-3px;
} }
table.list tr:hover td.bar div { table.list tr:hover td.bar div {
background-color:@FOCUS_COLOR; background-color: var(--text-color-focus);
cursor:pointer; cursor:pointer;
} }
table.list td.chart { table.list td.chart {
width:500px; width:500px;
background-color:@BASE_COLOR; background-color: var(--base-color);
/* Remove 5er separators for bars */ /* Remove 5er separators for bars */
/*border-color:rgba(0,0,0,0)!important;*/ /*border-color:rgba(0,0,0,0)!important;*/
} }
@ -651,14 +651,14 @@ table.list tr td.button {
table.list td.button div { table.list td.button div {
background-color:@BUTTON_BG_COLOR; background-color: var(--button-color-bg);
color:@BUTTON_FG_COLOR; color: var(--button-color-fg);
padding:3px; padding:3px;
border-radius:4px; border-radius:4px;
} }
table.list td.button div:hover { table.list td.button div:hover {
background-color:@BUTTON_FOCUS_BG_COLOR; background-color: var(--button-color-bg-focus);
color:@BUTTON_FOCUS_FG_COLOR; color: var(--button-color-fg-focus);
padding:3px; padding:3px;
border-radius:4px; border-radius:4px;
} }
@ -829,7 +829,7 @@ div.sidelist {
top:0px; top:0px;
width:40%; width:40%;
height:100%; height:100%;
background-color:#444447; background-color: var(--base-color-light);
padding-left:30px; padding-left:30px;
padding-right:30px; padding-right:30px;
} }