Hi rikardo1979,
so is there a way to remove this and adapt it same way on every device which open the web gui?
No, not the easy way. To change the user interface for all browsers you have to modify RuneAudio by itself.
But you can use a technique called "override CSS stylesheets" with most browsers.
So for example with Firefox you have to setup a file "userContent.css" in your local profile.
Please read
this for a detailed description.
The file "userContent.css" should look like this:
- Code: Select all
@-moz-document domain(runeaudio) {
body {
-webkit-user-select: none;
user-select: none;
font-size: 24px !important;
}
/*
html {
overflow: hidden;
}
*/
#volume-knob { display: none; }
.col-sm-4 {
width: 50% !important;
}
#cover-art {
margin: -150 !important;
max-width: 480px !important;
margin-top: -150px !important;
}
#currentartist, #currentsong, #currentalbum{
width: 50% !important;
}
#overlay-playsource-open {
width: 100% !important;
}
#playlist-position {
display: block !important;
width: 50% !important;
}
#overlay-social-open {
display: none !important;
}
#format-bitrate {
width: 50% !important;
}
a[href^="/settings/"] {
pointer-events: none;
cursor: default;
opacity: 0.6;
}
#section-sources, #section-network, #section-settings {
animation: example 5s linear 2s infinite alternate !important;
-webkit-animation: example 5s linear 2s infinite alternate !important;
}
.container {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.knobs {
margin-top: 0px !important;
line-height: 0 !important;
}
.col-sm-12 {
width: 100% !important;
height: 0 !important;
visibility: hidden !important;
}
#currentalbum .notag {
font-size: 18px !important;
}
#currentalbum {
margin-bottom: 5px !important;
}
#menu-top {
height: 47px !important;
margin: 0px 0px 0px 0px !important;
}
#menu-top .dropdown .dropdown-menu {
font-size: 24px !important;
}
#menu-top .playback-controls {
left: 40% !important;
width: 400px !important;
}
#menu-bottom {
height: 48px !important;
}
#menu-bottom li a {
font-size: 24px !important;
}
.dropdown-menu {
font-size: 24px !important;
}
#currentartist, #currentalbum {
font-size: 24px !important;
}
.btn {
font-size: 24px !important;
}
.btnlist.btnlist-bottom .btn {
font-size: 36px !important;
margin-top: 5px !important;
padding: 0px 20px !important;
}
.pl-nextPage, .db-nextPage, .pl-lastPage, .db-lastPage, .btnlist-bottom {
bottom: 50px !important;
padding: 0px 20px !important;
}
.btnlist-top {
top: 60px !important;
padding: 0px 10px !important;
height: 50px !important;
}
.btnlist-bottom {
height: 60px !important;
font-size: 20px !important;
}
#db-search input, #pl-search input {
height: 42px !important;
}
#playlist, #database {
padding: 120px 0px !important;
}
#playlist-entries li {
font-size: 24px !important;
}
#playlist-entries .pl-action {
font-size: 24px !important;
}
#database-entries li {
font-size: 24px !important;
}
#database-entries .db-action {
font-size: 24px !important;
}
.col-sm-10 {
width: 75% !important;
}
.col-sm-2 {
width: 25% !important;
}
.input-lg {
height: 60px !important;
font-size: 24px !important;
}
.help-block, .help-inline {
font-size: 18px !important;
}
}
Take care to adapt the first line to your needs:
- @-moz-document domain(runeaudio)
- @-moz-document domain(runeaudio.local)
- @-moz-document domain(192.168.0.40)
Frank