diff --git a/server.py b/server.py index b258bd2..814e270 100755 --- a/server.py +++ b/server.py @@ -116,6 +116,7 @@ def static_image(pth): #@webserver.route("/") @webserver.route("/") @webserver.route("/") +@webserver.route("/") @webserver.route("/") @webserver.route("/") @webserver.route("/") diff --git a/website/common/header.html b/website/common/header.html index f8467a0..b11b5de 100644 --- a/website/common/header.html +++ b/website/common/header.html @@ -1,4 +1,8 @@ + + + + diff --git a/website/css/grisons.css b/website/css/grisons.css deleted file mode 100644 index aaa4d87..0000000 --- a/website/css/grisons.css +++ /dev/null @@ -1,72 +0,0 @@ -/** - COMMON STYLES FOR MALOJA, ALBULA AND POSSIBLY OTHERS -**/ - -@import url('https://fonts.googleapis.com/css?family=Ubuntu'); -body { - background-color:#333337; - color:beige; - font-family:"Ubuntu"; -} - -/* TOP INFO TABLE */ - -table.top_info td.image div { - margin-right:20px; - margin-bottom:20px; - background-size:cover; - background-position:center; - height:174px; - width:174px -} - -table.top_info td.text { - vertical-align: top; -} - -table.top_info td.text h1 { - display:inline; - padding-right:5px; -} - - -table.top_info td.text table.image_row td { - height:50px; - width:50px; - background-size:cover; - background-position:center; - background-repeat: no-repeat; - opacity:0.5; - filter: grayscale(80%); -} -table.top_info td.text table.image_row td:hover { - opacity:1; - filter: grayscale(0%); -} - - - - -/** SCROLLBAR **/ - -::-webkit-scrollbar { - width: 8px; - cursor: pointer; -} -::-webkit-scrollbar-track { - background: grey; - background-color:rgba(0,255,255,0.1); -} -::-webkit-scrollbar-thumb { -background-color:rgba(103,85,0,0.7); -} -::-webkit-scrollbar-thumb:hover { - background: gold; -} - - - - -[onclick]:hover, a:hover { - cursor: pointer; -} diff --git a/website/less/grisons.less b/website/less/grisons.less new file mode 100644 index 0000000..985b0ef --- /dev/null +++ b/website/less/grisons.less @@ -0,0 +1,132 @@ +/** + COMMON STYLES FOR MALOJA, ALBULA AND POSSIBLY OTHERS +**/ + + +@BASE_COLOR: #333337; +@BASE_COLOR_DARK: rgba(10,10,10,1); +@BASE_COLOR_LIGHT: #444447; + +@TEXT_COLOR: beige; +@TEXT_COLOR_SELECTED: fadeout(@TEXT_COLOR,40%); +@TEXT_COLOR_SECONDARY: #bbb; +@TEXT_COLOR_TERTIARY: grey; +@FOCUS_COLOR: yellow; + +@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; + + +@import url('https://fonts.googleapis.com/css?family=Ubuntu'); +body { + background-color: @BASE_COLOR; + color: @TEXT_COLOR; + font-family:"Ubuntu"; +} + +/* TOP INFO TABLE */ + +table.top_info td.image div { + margin-right:20px; + margin-bottom:20px; + background-size:cover; + background-position:center; + height:174px; + width:174px +} + +table.top_info td.text { + vertical-align: top; +} + +table.top_info td.text h1 { + display:inline; + padding-right:5px; +} + + +table.top_info td.text table.image_row td { + height:50px; + width:50px; + background-size:cover; + background-position:center; + background-repeat: no-repeat; + opacity:0.5; + filter: grayscale(80%); +} +table.top_info td.text table.image_row td:hover { + opacity:1; + filter: grayscale(0%); +} + + + + +/** SCROLLBAR **/ + +::-webkit-scrollbar { + width: 8px; + cursor: pointer; +} +::-webkit-scrollbar-track { + background: grey; + background-color: @CONTROL_ELEMENT_BG_COLOR; +} +::-webkit-scrollbar-thumb { +background-color: @CONTROL_ELEMENT_FG_COLOR; +} +::-webkit-scrollbar-thumb:hover { + background: @CONTROL_ELEMENT_FOCUS_COLOR; +} + + + + +[onclick]:hover, a:hover { + cursor: pointer; +} + + +/** HOVERABLE LOAD/PROGRESS BAR **/ + + +div.grisons_bar { + background-color: @CONTROL_ELEMENT_BG_COLOR; +} +div.grisons_bar>div { + height:100%; + background-color: @CONTROL_ELEMENT_FG_COLOR; +} +div.grisons_bar:hover>div { + background-color: @CONTROL_ELEMENT_FOCUS_COLOR; +} + + + + + +/** LINKS **/ + + + a { + color:inherit; + text-decoration:none; + } + +// for links in running text + a.textlink { + color:@FOCUS_COLOR; + } + a.hidelink:hover { + text-decoration:none; + } + + a:hover { + text-decoration:underline; + } diff --git a/website/css/maloja.css b/website/less/maloja.less similarity index 93% rename from website/css/maloja.css rename to website/less/maloja.less index ed79675..6f4e90a 100644 --- a/website/css/maloja.css +++ b/website/less/maloja.less @@ -1,3 +1,4 @@ +@import "grisons"; body { padding:15px; @@ -11,21 +12,6 @@ body { */ } -a { - color:inherit; - text-decoration:none; -} - -a.textlink { - color:gold; -} -a.hidelink:hover { - text-decoration:none; -} - -a:hover { - text-decoration:underline; -} input[type="date"] { @@ -75,7 +61,7 @@ div.footer { position:fixed; height:20px; /**width:100%;**/ - background-color:rgba(10,10,10,0.9); + background-color:fadeout(@BASE_COLOR_DARK,10%); bottom:0px; left:0px; right:0px; @@ -184,7 +170,7 @@ div.searchresults table.searchresults_tracks td span:nth-child(1) { position:fixed; /*height:30px;*/ /**width:100%;**/ - background-color:rgba(10,10,10,0.9); + background-color:fadeout(@BASE_COLOR_DARK,10%); bottom:0px; left:0px; right:0px; @@ -248,14 +234,14 @@ table.top_info + .stat_module_toptracks table { .stats { - color:grey; + color:@TEXT_COLOR_TERTIARY; } .rank { text-align:right; - color:grey; + color:@TEXT_COLOR_TERTIARY; } .extra { - color:gray; /*sue me*/ + color:@TEXT_COLOR_TERTIARY; font-size:80%; } @@ -269,14 +255,14 @@ input#apikey { input.simpleinput { font-family:'Ubuntu'; - color:beige; + color:@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 beige; + border-bottom: 1px solid @TEXT_COLOR; } @@ -416,7 +402,7 @@ table.list tr:hover { table.list td.time { width:11%; - color:gray; + color:@TEXT_COLOR_TERTIARY; } @@ -462,7 +448,7 @@ table.list td.artists,td.artist,td.title,td.track { } table.list td.track span.artist_in_trackcolumn { - color:#bbb; + color:@TEXT_COLOR_SECONDARY; } table.list td.track a.trackProviderSearch { @@ -508,23 +494,23 @@ table.list td.amount { } table.list td.bar { width:500px; - background-color:#333337; + background-color:@BASE_COLOR; /* Remove 5er separators for bars */ /*border-color:rgba(0,0,0,0)!important;*/ } table.list td.bar div { - background-color:beige; + background-color:@TEXT_COLOR; height:20px; /* can only do this absolute apparently */ position:relative; } table.list tr:hover td.bar div { - background-color:yellow; + background-color:@FOCUS_COLOR; cursor:pointer; } table.list td.chart { width:500px; - background-color:#333337; + background-color:@BASE_COLOR; /* Remove 5er separators for bars */ /*border-color:rgba(0,0,0,0)!important;*/ } @@ -570,8 +556,14 @@ table.list tr td.button { table.list td.button div { - background-color:yellow; - color:#333337; + background-color:@BUTTON_BG_COLOR; + color:@BUTTON_FG_COLOR; + padding:3px; + border-radius:4px; +} +table.list td.button div:hover { + background-color:@BUTTON_FOCUS_BG_COLOR; + color:@BUTTON_FOCUS_FG_COLOR; padding:3px; border-radius:4px; }