diff --git a/light9/web/style.css b/light9/web/style.css --- a/light9/web/style.css +++ b/light9/web/style.css @@ -1,220 +1,243 @@ -body { - background: black; - color: white; - font-family: sans-serif; +body { + background: black; + color: white; + font-family: sans-serif; } + h1 { - margin: 0; + margin: 0; } h2 { - margin: 0; - padding: 0; - font-size: 100%; + margin: 0; + padding: 0; + font-size: 100%; } + ul { - margin: 0; + margin: 0; } + a { - color: rgb(97, 97, 255); + color: rgb(97, 97, 255); } - -input[type=text] { - border: 1px inset rgb(177, 177, 177); - background: rgb(230, 230, 230); - padding: 3px; +input[type="text"] { + border: 1px inset rgb(177, 177, 177); + background: rgb(230, 230, 230); + padding: 3px; } + #status { - position: fixed; - bottom: 0px; - right: 0px; - background: rgba(0, 0, 0, 0.47); - padding-left: 6px; + position: fixed; + bottom: 0px; + right: 0px; + background: rgba(0, 0, 0, 0.47); + padding-left: 6px; } +.songs { + column-width: 15em; +} -.songs { - column-width: 15em; -} .songs button { - display: inline-block; - width: 15em; - height: 50px; - text-align: left; - background: black; - color: white; - margin: 2px; - font-size: 130% !important; - font-weight: bold; - text-shadow: -1px -1px 0 #000, - 1px -1px 0 #000, - -1px 1px 0 #000, - 1px 1px 0 #000; - white-space: nowrap; + display: inline-block; + width: 15em; + height: 50px; + text-align: left; + background: black; + color: white; + margin: 2px; + font-size: 130% !important; + font-weight: bold; + text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, + 1px 1px 0 #000; + white-space: nowrap; } + button a { - color: white; + color: white; } + .songs button:hover { - color: black; - background: #333; + color: black; + background: #333; } .commands button { - background: black; - color: white; - padding: 20px + background: black; + color: white; + padding: 20px; } + .commands button.active { - background: #a90707; + background: #a90707; } + .key { - color: #888; + color: #888; } div.keys { - margin-top: 10px; - padding: 5px; + margin-top: 10px; + padding: 5px; } .keyCap { - color: #ccc; - background: #525252; - display: inline-block; - border: 1px outset #b3b3b3; - padding: 2px 3px; - margin: 3px 0; - font-size: 16px; - box-shadow: 0.9px 0.9px 0px 2px #565656; - border-radius: 2px; + color: #ccc; + background: #525252; + display: inline-block; + border: 1px outset #b3b3b3; + padding: 2px 3px; + margin: 3px 0; + font-size: 16px; + box-shadow: 0.9px 0.9px 0px 2px #565656; + border-radius: 2px; } .currentSong button { - background: #a90707; + background: #a90707; } + .timeRow { - margin: 14px; + margin: 14px; } + .stalled { - opacity: .5; + opacity: 0.5; } + .num { - font-size: 27px; - color: rgb(233, 122, 122); - display: inline-block; - padding: 10px; - font-size: 200% !important; - font-weight: bold; - text-shadow: -1px -1px 0 #000, - 1px -1px 0 #000, - -1px 1px 0 #000, - 1px 1px 0 #000; + font-size: 27px; + color: rgb(233, 122, 122); + display: inline-block; + padding: 10px; + font-size: 200% !important; + font-weight: bold; + text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, + 1px 1px 0 #000; } .dropTarget { - padding: 10px 5px; - border: 2px dashed gray; - font-style: italic; - color: rgb(78, 90, 107); + padding: 10px 5px; + border: 2px dashed gray; + font-style: italic; + color: rgb(78, 90, 107); } + .dropTarget:hover { - background: #1F1F0D; + background: #1f1f0d; } + .twoColList { - -webkit-column-width: 24em; + -webkit-column-width: 24em; } + .twoColList > li { - margin-bottom: 13px; + margin-bottom: 13px; } .song { - color: rgb(85, 221, 85); + color: rgb(85, 221, 85); } + .song:before { - content: "♫"; - color: black; - background: rgb(85, 221, 85); - border-radius: 30%; + content: "♫"; + color: black; + background: rgb(85, 221, 85); + border-radius: 30%; } .effect:before { - content: "⛖"; + content: "⛖"; } -.song:before, .effect:before { - margin-right: 3px; - text-decoration: none !important; - font-size: 140%; +.song:before, +.effect:before { + margin-right: 3px; + text-decoration: none !important; + font-size: 140%; } /* ascoltami mini mode */ @media (max-height: 600px) { - .songs { - column-width: 15em; - } - .songs button { - font-size: initial; - height: initial; - width: 100%; - margin: initial; - border-width: 1px; - margin-bottom: 2px; - } - .num { - font-size: initial; - padding: initial; - } - .commands button { - padding: 5px; - } + .songs { + column-width: 15em; + } + .songs button { + font-size: initial; + height: initial; + width: 100%; + margin: initial; + border-width: 1px; + margin-bottom: 2px; + } + .num { + font-size: initial; + padding: initial; + } + .commands button { + padding: 5px; + } } /* subserver */ .vari { - color: white; + color: white; } .sub { - display: inline-block; - vertical-align: top; + display: inline-block; + vertical-align: top; } + .sub.local { - background: rgb(44, 44, 44); + background: rgb(44, 44, 44); } + .sub img { - width: 196px; - min-height: 40px; - margin: 0 6px; - background: -webkit-gradient(linear,right top,left bottom,color-stop(0,rgb(121, 120, 120)),color-stop(1,rgb(54, 54, 54))); + width: 196px; + min-height: 40px; + margin: 0 6px; + background: -webkit-gradient( + linear, + right top, + left bottom, + color-stop(0, rgb(121, 120, 120)), + color-stop(1, rgb(54, 54, 54)) + ); } + .chase { - background: rgb(75, 57, 72); + background: rgb(75, 57, 72); } a button { - font-size: 60%; + font-size: 60%; } + a.big { - background-color: #384052; - padding: 6px; - text-shadow: rgba(0, 0, 0, 0.48) -1px -1px 0px; - color: rgb(172, 172, 255); - font-size: 160%; - margin: 0px; - display: inline-block; - border-radius: 5px; + background-color: #384052; + padding: 6px; + text-shadow: rgba(0, 0, 0, 0.48) -1px -1px 0px; + color: rgb(172, 172, 255); + font-size: 160%; + margin: 0px; + display: inline-block; + border-radius: 5px; } table { - border-collapse: collapse; + border-collapse: collapse; } -table.borders td, table.borders th { - border: 1px solid #4a4a4a; - padding: 2px 8px; +table.borders td, +table.borders th { + border: 1px solid #4a4a4a; + padding: 2px 8px; } + hr { - width: 100%; - border-color: #1d3e1d; + width: 100%; + border-color: #1d3e1d; }