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",
"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"

19
maloja/server.py
View File

@ -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("")

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
**/
: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;
}

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;
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;
}