light9 Changeset - bd443e4bff0d

Changeset - bd443e4bff0d

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

drewp@bigasterisk.com - 3 years ago 2022-06-02 18:50:45
drewp@bigasterisk.com

asco styling

2 files changed with 3 insertions and 4 deletions:

light9/ascoltami/index.html

light9/web/style.css

0 comments (0 inline, 0 general)

light9/ascoltami/index.html

➞

Show inline comments

 <!DOCTYPE html>
 <html>
   <head>
     <title>ascoltami on {{host}}</title>
     <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="./style.css" />
     <style>
       #cmd-go {
         min-width: 5em;
+      }
       .song-name {
         padding-left: 0.4em;
+      }
     </style>
   </head>
   <body>
     <h1>ascoltami on {{host}}</h1>
     <div class="songs"></div>
     <div class="dimStalled">
       <table>
         <tr>
           <td colspan="3"><strong>Song:</strong> <span id="currentSong"></span></td>
         </tr>
         <tr>
           <td><strong>Time:</strong> <span id="currentTime"></span></td>
           <td><strong>Left:</strong> <span id="leftTime"></span></td>
           <td><strong>Until autostop:</strong> <span id="leftAutoStopTime"></span></td>
         </tr>
         <tr>
           <td colspan="3">
             <strong>Update freq:</strong> requested <span id="updateReq"></span>, actual <span id="updateActual"></span> <strong>States:</strong>
             <span id="states"></span>
           </td>
         </tr>
       </table>
       <div class="timeRow">
         <div id="timeSlider"></div>
       </div>
     </div>
     <div class="commands">
       <button id="cmd-stop" class="playMode">
         <strong>Stop</strong>
         <div class="key">s</div>
       </button>
       <button id="cmd-play" class="playMode">
         <strong>Play</strong>
         <div class="key">p</div>
       </button>
       <button id="cmd-intro">
         <strong>Skip intro</strong>
         <div class="key">i</div>
       </button>

light9/web/style.css

➞

Show inline comments

 body {
     background: black;
     color: white;
     font-family: sans-serif;
+}
 h1 {
     margin: 0;
+}
 h2 {
     margin: 0;
     padding: 0;
     font-size: 100%;
+}
 ul {
     margin: 0;
+}
 a {
     color: rgb(97, 97, 255);
+}
 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;
+}
 .songs {
     -moz-column-width:205px;
     -webkit-column-width:205px;
     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,
 px -1px 0 #000,
                  -1px 1px 0 #000,
 px 1px 0 #000;
     white-space: nowrap;
+}
 button a {
     color: white;
+}
 .songs button:hover {
     color: black;
     background: #333;
+}
 .commands button {
     background: black;
     color: white;
     padding: 20px
+}
 .commands button.active {
     background: #a90707;
+}
 .key {
     color: #888;
+}
 div.keys {
     margin-top: 10px;
     padding: 5px;
+}
 .keyCap {
     color: #ccc;
     background: #525252;
     display: inline-block;
     border: 1px outset #b3b3b3;
     padding: 2px 3px;
@@ @@ -107,97 +106,97 @@ div.keys { @@
     padding: 10px;
     font-size: 200% !important;
     font-weight: bold;
     text-shadow: -1px -1px 0 #000,
 px -1px 0 #000,
                  -1px 1px 0 #000,
 px 1px 0 #000;
+}
 .dropTarget {
     padding: 10px 5px;
     border: 2px dashed gray;
     font-style: italic;
     color: rgb(78, 90, 107);
+}
 .dropTarget:hover {
     background: #1F1F0D;
+}
 .twoColList {
     -webkit-column-width: 24em;
+}
 .twoColList > li {
     margin-bottom: 13px;
+}
 .song {
     color: rgb(85, 221, 85);
+}
 .song:before {
     content: "♫";
     color: black;
     background: rgb(85, 221, 85);
     border-radius: 30%;
+}
 .effect:before {
     content: "⛖";
+}
 .song:before, .effect:before {
     margin-right: 3px;
     text-decoration: none !important;
     font-size: 140%;
+}
 /* ascoltami mini mode */
 @media (max-height: 600px) {
     .songs {
-        -webkit-column-width: 12em;
+       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;
+}
 .sub {
     display: inline-block;
     vertical-align: top;
+}
 .sub.local {
     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)));
+}
 .chase {
     background: rgb(75, 57, 72);
+}
 a button {
     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);

0 comments (0 inline, 0 general)