Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tweaks for better small screen layout and darker theme #86

Closed
wants to merge 7 commits into from
Closed

Tweaks for better small screen layout and darker theme #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ffe095e
Move Volume Slider & Now Playing on small screens
Mar 10, 2015
0eef4c8
Right Side Panel for Settings & Dark Theme
Mar 10, 2015
4218146
Trim Dark Theme CSS files to only whats needed
Mar 16, 2015
961c1da
Remove inline css and move to dark theme css
Mar 16, 2015
9bf9685
Allow independently scrollable playlist and track panes
Mar 16, 2015
0f4be1b
Move Shutdown and Reboot buttons to Right Side Panel
Mar 16, 2015
c11d252
Neaten up Right Side Settings Panel
Mar 17, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 74 additions & 0 deletions mopidy_musicbox_webclient/static/css/jquery.mobile.flatui-dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
/****************************
*New colors
*main bg 121314
*sidebar bg 1c1c1f
*active text dfe0e6 (or white)
*inactive text 88898c
*hover 222326
*green 84bd00
****************************/


.ui-bar-a{border:1px solid #121314;background:#1c1c1f;}
.ui-bar-a a.ui-link{color:#dfe0e6;}
.ui-bar-a a.ui-link:visited{color:#dfe0e6 }
.ui-bar-a a.ui-link:hover{color:#84bd00}
.ui-bar-a a.ui-link:active{color:#84bd00}
.ui-body-a,.ui-overlay-a{border:2px solid #1c1c1f ;color:#dfe0e6 ;background:#1c1c1f;}
.ui-body-a .ui-link{color:#dfe0e6;}
.ui-body-a .ui-link:visited,.ui-body-a .ui-link:hover,.ui-body-a .ui-link:active{color:#dfe0e6}
.ui-body-a.ui-input-text.ui-focus{border:2px solid #222326;}
.ui-btn-up-a{border:1px solid #121314;background:#1c1c1f;font-weight:normal;}
.ui-btn-hover-a{border:1px solid #222326;background:#222326;}
.ui-btn-down-a{border:1px solid #222326;background:#222326;}
.ui-bar-a .ui-btn-up-a,.ui-bar-a .ui-btn-down-a,.ui-bar-a .ui-btn-hover-a{background-color:#eee;border:1px solid #eee}
.ui-body-b,.ui-overlay-b{border:2px solid #eee;color:#222326;background:#121314;}
.ui-body-b .ui-link:visited,.ui-body-b .ui-link:hover,.ui-body-b .ui-link:active{color:#84bd00}
.ui-body-b.ui-input-text.ui-focus{border:2px solid #84bd00;}
.ui-btn-up-b{border:1px solid #1c1c1f;background:#88898c;}
.ui-btn-hover-b{border:1px solid #84bd00;background:#84bd00;}
.ui-btn-down-b{border:1px solid #84bd00;background:#84bd00;}
.ui-body-c,.ui-overlay-c{border:2px solid #1c1c1f;color:#fff ;background:#121314;}
.ui-body-c .ui-link{color:#dfe0e6;}
.ui-body-c .ui-link:visited,.ui-body-c .ui-link:hover,.ui-body-c .ui-link:active{color:#84bd00}
.ui-btn-up-c{border:1px solid #121314;background:#1c1c1f;color:#dfe0e6;}
.ui-btn-up-c:visited,.ui-btn-up-c a.ui-link-inherit{color:#fff;}
.ui-btn-down-c{border:0px;}
.ui-body-d,.ui-overlay-d{color:#222326;}
.ui-body-e,.ui-overlay-e{color:#222326;}
.ui-body-f,.ui-overlay-f{color:#222326;}
.ui-body-g,.ui-overlay-g{color:#222326;}
.ui-btn-active {
border: none;
border-right: 4px solid #84bd00;
background: #222326 /*{global-active-background-color}*/;
color: #84bd00 /*{global-active-color}*/;
}
.ui-btn-active.ui-slider-bg {
background: #84bd00;
}
.ui-slider-handle {
background: #dfe0e6;
border: 1px solid #222326;
}
.ui-slider-handle.ui-btn-corner-all {
border-radius: 20%;
-webkit-border-radius: 20%;
border: 1px solid #222326;
}

.ui-mini .ui-btn-inner { font-size: 16.5px; padding: .55em 11px .5em; }
.ui-li.ui-last-child, .ui-li.ui-field-contain.ui-last-child { border-bottom-width: 0px; }
.ui-slider-track.ui-mini {top: 12px;}
.ui-slider-track.ui-mini .ui-slider-handle {
height: 12px;
width: 12px;
border-radius: 7px;
margin: -7px 0 0 -3px;
}

.ui-panel-display-reveal {
-webkit-box-shadow: inset 0px 0 5px rgba(0,0,0,.15);
-moz-box-shadow: inset 0px 0 5px rgba(0,0,0,.15);
box-shadow: inset 0px 0 5px rgba(0,0,0,.15);
}
10 changes: 6 additions & 4 deletions mopidy_musicbox_webclient/static/css/jquery.mobile.flatui.css
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@
.ui-body-a input,.ui-body-a select,.ui-body-a textarea,.ui-body-a button{font-family:Lato,sans-serif}
.ui-body-a .ui-link-inherit{color:#333}
.ui-body-a .ui-link{color:#2c3e50;font-weight:bold;}
.ui-body-a .ui-link:visited,.ui-body-a .ui-link:hover,.ui-body-a .ui-link:active{color:#4e6d8d}
.ui-body-a .ui-link:visited,.ui-body-a .ui-link:hover,.ui-body-a .ui-link:active{color:#fff}
.ui-body-a.ui-input-text{border:2px solid #eee;}
.ui-body-a.ui-input-text.ui-focus{border:2px solid #4e6d8d;-webkit-transition:border linear .2s;-moz-transition:border linear .2s;-o-transition:border linear .2s;transition:border linear .2s}
.ui-btn-up-a{border:1px solid #2c3e50;background:#2c3e50;font-weight:bold;color:#fff;}
Expand Down Expand Up @@ -346,6 +346,8 @@ input.ui-input-text.ui-slider-input {
border: 2px solid #eee !important;
}

#theme .ui-btn.ui-submit {display: inline-block; width: 45%}
#theme-choose {color:white;margin-left:25%}
/* corner rounding classes
-----------------------------------------------------------------------------------------------------------*/

Expand Down Expand Up @@ -1684,7 +1686,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.ui-footer .ui-btn-block { display: block; }
.ui-header .ui-btn-inner,
.ui-footer .ui-btn-inner,
.ui-mini .ui-btn-inner { font-size: 12.5px; padding: .55em 11px .5em; }
.ui-mini .ui-btn-inner { font-size: 18.5px; padding: .1em 11px .5em; }
.ui-fullsize .ui-btn-inner,
.ui-fullsize .ui-btn-inner { font-size: 16px; padding: .6em 20px; }
.ui-btn-icon-notext { width: 24px; height: 24px; }
Expand Down Expand Up @@ -2379,7 +2381,7 @@ label.ui-slider {
margin-bottom: .4em;
}
div.ui-slider {
height: 30px;
height: 10px;
margin: .5em 0;
zoom: 1;
}
Expand Down Expand Up @@ -2432,7 +2434,7 @@ input.ui-input-text.ui-slider-input {
top: 6px;
}
.ui-slider-track.ui-mini {
height: 12px;
height: 4px;
top: 8px;
}
.ui-slider-bg {
Expand Down
137 changes: 137 additions & 0 deletions mopidy_musicbox_webclient/static/css/webclient-dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
/****************************
DARK THEME CSS
*New colors
*main bg 121314
*sidebar bg 1c1c1f
*active text dfe0e6 (or white)
*inactive text 88898c
*hover 222326
*green 84bd00
****************************/

.hide {display:none;}
.show {display:inline-block;}

#headermenubtn{
background-color: #1c1c1f;
border: 0px;
}

#headermenubtn2{
background-color: #1c1c1f;
}

#close-btn{
background-color: #1c1c1f;
}

#page{
background-color: #121314;
}

#homerows div {
background-color: #000000;
}

.table li a {
color: #dfe0e6 !important;
}

.table li {
background-color: #121314;
border: 1px solid #1c1c1f;
}

#homerows div {
border: 1px solid #CECECE;
}

.albumdivider {
background-color: #1c1c1f !important;
}

.smalldivider {
background-color: #1c1c1f !important;
}

#playlistslist li a {
background-color: #000;
}

#playlisttracksback {
background-color: #000;
}

#browselist li {
background-color: #000;
}

#browselist a:hover {
color:#84bd00;
}

.playlistactive {
background-color: #1c1c1f;
border-right: 4px solid #84bd00;
}

currenttrack2 {
background-image: url('../images/icons/play_alt_16x16.png');
}

.currenttrack {
background-image: url('../images/icons/play_alt_12x12.png');
background-color: #dfe0e6;
}

.nowPlayingControls #btplayNowPlaying{
margin-left: 20px;
margin-right: 20px;
}

#modalartist a, #modalalbum a {
color: #eee;
}

#modalalbum a:hover ,#modalartist a:hover{
color: #84bd00;
}


#controlspopup, #artistpopup, #coverpopup {
background: grey;
}

#btplayNowPlaying {
margin-bottom: 5px;
}

/*
#playlistspane {
margin: 0px !important;
padding: 2px !important;
overflow-y: hidden;
}
*/

#nowPlayingFooter{
color: #1c1c1f;
}

#controldiv{
background: none repeat scroll 0% 0% rgb(44, 62, 80);
}


@media (max-width: 35em){

#nowPlayingpane{
padding: 15px 25px 0px 25px;
}

#nowPlayingpane #controlspopupimage{
max-width: 100%;
}
}


Loading