From 0d0402a3e96ed904b22af0b4517a6ecb87298000 Mon Sep 17 00:00:00 2001 From: Matthew Nitschke Date: Fri, 30 Dec 2022 14:42:50 -0700 Subject: [PATCH 1/4] minor style updates to the property inspector --- .../manifest.json | 2 +- .../pi/css/sdpi.css | 589 +++++++++--------- .../pi/index.html | 3 +- 3 files changed, 289 insertions(+), 305 deletions(-) diff --git a/src/com.genericmale.sonos.sdPlugin/manifest.json b/src/com.genericmale.sonos.sdPlugin/manifest.json index 1d7e958..9fb0b2b 100644 --- a/src/com.genericmale.sonos.sdPlugin/manifest.json +++ b/src/com.genericmale.sonos.sdPlugin/manifest.json @@ -5,7 +5,7 @@ "Description": "Control your Sonos Speakers.", "Name": "Sonos", "Icon": "sonos", - "URL": "https://github.com/GenericMale/streamdeck-spotify", + "URL": "https://github.com/GenericMale/streamdeck-sonos", "Version": "1.0.0", "Category": "Sonos", "CategoryIcon": "images/plugin_category", diff --git a/src/com.genericmale.sonos.sdPlugin/pi/css/sdpi.css b/src/com.genericmale.sonos.sdPlugin/pi/css/sdpi.css index c9ebafe..c6b7e24 100644 --- a/src/com.genericmale.sonos.sdPlugin/pi/css/sdpi.css +++ b/src/com.genericmale.sonos.sdPlugin/pi/css/sdpi.css @@ -1,6 +1,6 @@ :root { - --sdpi-bgcolor: #2D2D2D; - --sdpi-background: #3D3D3D; + --sdpi-bgcolor: #2d2d2d; + --sdpi-background: #3d3d3d; --sdpi-color: #d8d8d8; --sdpi-bordercolor: #3a3a3a; --sdpi-buttonbordercolor: #969696; @@ -11,8 +11,8 @@ } html { - --sdpi-bgcolor: #2D2D2D; - --sdpi-background: #3D3D3D; + --sdpi-bgcolor: #2d2d2d; + --sdpi-background: #3d3d3d; --sdpi-color: #d8d8d8; --sdpi-bordercolor: #3a3a3a; --sdpi-buttonbordercolor: #969696; @@ -23,17 +23,17 @@ html { height: 100%; width: 100%; overflow: hidden; - touch-action:none; + touch-action: none; } -html, body { - --sdpi-bgcolor: #2D2D2D; - --sdpi-background: #3D3D3D; - --sdpi-color: #d8d8d8; - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +html, +body { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; font-size: 9pt; - background-color: var(--sdpi-bgcolor); - color: #9a9a9a; + background-color: var(--sdpi-bgcolor); + color: #9a9a9a; } body { @@ -52,7 +52,8 @@ mark { color: var(--sdpi-color); } -hr, hr2 { +hr, +hr2 { -webkit-margin-before: 1em; -webkit-margin-after: 1em; border-style: none; @@ -62,32 +63,33 @@ hr, hr2 { hr2, .sdpi-heading { - display: flex; - flex-basis: 100%; - align-items: center; - color: inherit; - font-size: 9pt; - margin: 8px 0px; + display: flex; + flex-basis: 100%; + align-items: center; + color: inherit; + font-size: 9pt; + margin: 8px 0px; } .sdpi-heading::before, .sdpi-heading::after { - content: ""; - flex-grow: 1; - background: var(--sdpi-background); - height: 1px; - font-size: 0px; - line-height: 0px; - margin: 0px 16px; + content: ""; + flex-grow: 1; + background: var(--sdpi-background); + height: 1px; + font-size: 0px; + line-height: 0px; + margin: 0px 16px; } hr2 { height: 2px; } -hr, hr2 { - margin-left:16px; - margin-right:16px; +hr, +hr2 { + margin-left: 16px; + margin-right: 16px; } .sdpi-item-value, @@ -100,8 +102,6 @@ button { letter-spacing: var(--sdpi-letterspacing); } - - .win .sdpi-item-value, .win option, .win input, @@ -134,6 +134,7 @@ meter::-webkit-meter-bar:active { border-radius: 3px; background: #222222; } + ::-webkit-progress-value:active, meter::-webkit-meter-optimum-value:active { background: #99f; @@ -160,7 +161,6 @@ progress.full { background-color: transparent; } - .sdpi-item[type="progress"] { margin-top: 4px !important; margin-bottom: 12px; @@ -173,13 +173,13 @@ progress.full { .tabs { /** - * Setting display to flex makes this container lay - * out its children using flexbox, the exact same - * as in the above "Stepper input" example. - */ + * Setting display to flex makes this container lay + * out its children using flexbox, the exact same + * as in the above "Stepper input" example. + */ display: flex; - border-bottom: 1px solid #D7DBDD; + border-bottom: 1px solid #d7dbdd; } .tab { @@ -207,7 +207,7 @@ input[type="button"], input[type="submit"], input[type="reset"], input[type="file"], -input[type=file]::-webkit-file-upload-button, +input[type="file"]::-webkit-file-upload-button, button, select { color: var(--sdpi-color); @@ -222,7 +222,7 @@ input[type="button"], input[type="submit"], input[type="reset"], input[type="file"], -input[type=file]::-webkit-file-upload-button, +input[type="file"]::-webkit-file-upload-button, button { border: 1pt solid var(--sdpi-buttonbordercolor); border-radius: var(--sdpi-borderradius); @@ -232,8 +232,8 @@ button { margin-right: 8px; } -input[type=number]::-webkit-inner-spin-button, -input[type=number]::-webkit-outer-spin-button { +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } @@ -258,15 +258,14 @@ option { .sdpi-item { display: flex; flex-direction: row; - min-height: 32px; align-items: center; - margin-top: 2px; + margin-top: 4px; max-width: 344px; - /* -webkit-user-drag: none; */ + -webkit-user-drag: none; } .sdpi-item:first-child { - margin-top:-1px; + margin-top: -1px; } .sdpi-item:last-child { @@ -279,11 +278,9 @@ option { } .sdpi-item > *:not(.sdpi-item-label.empty):not(meter) { - min-height: 26px; padding: 0px 4px 0px 4px; } - .sdpi-item-group { padding: 0 !important; } @@ -345,18 +342,18 @@ table > caption { .sdpi-item-label { text-align: right; flex: none; - width: 94px; + width: 90px; padding-right: 4px; font-weight: 600; -webkit-user-select: none; } .win .sdpi-item-label, -.sdpi-item-label > small{ +.sdpi-item-label > small { font-weight: normal; } -.sdpi-item-label:after { +.sdpi-item-label:not(.info):after { content: ": "; } @@ -368,7 +365,7 @@ table > caption { .sdpi-item-value { flex: 1 0 0; /* flex-grow: 1; - flex-shrink: 0; */ + flex-shrink: 0; */ margin-right: 14px; margin-left: 4px; justify-content: space-evenly; @@ -403,11 +400,10 @@ ul.sdpi-item-value, ol.sdpi-item-value, .sdpi-item-value > dl, .sdpi-item-value > ul, -.sdpi-item-value > ol -{ +.sdpi-item-value > ol { list-style-type: none; list-style-position: outside; - margin-left: -4px; + margin-left: -4px; margin-right: -4px; padding: 4px; border: 1px solid var(--sdpi-bordercolor); @@ -428,11 +424,13 @@ ol.sdpi-item-value, .two-items li { display: flex; -} +} + .two-items li > *:first-child { flex: 0 0 50%; text-align: left; } + .two-items.thirtyseventy li > *:first-child { flex: 0 0 30%; } @@ -441,6 +439,7 @@ ol.sdpi-item-value, .sdpi-item-value > ol[listtype="none"] { list-style-type: none; } + ol.sdpi-item-value[type="decimal"], .sdpi-item-value > ol[type="decimal"] { list-style-type: decimal; @@ -475,15 +474,15 @@ tr:nth-child(even), .sdpi-item-value > ul > li:nth-child(even), .sdpi-item-value > ol > li:nth-child(even), li:nth-child(even) { - background-color: rgba(0,0,0,.2) + background-color: rgba(0, 0, 0, 0.2); } td:hover, .sdpi-item-value > ul > li:hover:nth-child(even), .sdpi-item-value > ol > li:hover:nth-child(even), li:hover:nth-child(even), -li:hover { - background-color: rgba(255,255,255,.1); +li:hover { + background-color: rgba(255, 255, 255, 0.1); } td.selected, @@ -527,7 +526,7 @@ td:last-child { .sdpi-item-child.full, .sdpi-item-child.full > *, .full > .sdpi-item-child, -.full > .sdpi-item-child > *{ +.full > .sdpi-item-child > * { display: flex; flex: 1 1 0; margin-bottom: 4px; @@ -542,7 +541,7 @@ td:last-child { } ::-webkit-calendar-picker-indicator:focus, -input[type=file]::-webkit-file-upload-button:focus, +input[type="file"]::-webkit-file-upload-button:focus, button:focus, textarea:focus, input:focus, @@ -569,19 +568,15 @@ details * { font-weight: normal; } -details *:not(summary) { - margin-left: 13px -} - details.message { padding: 4px 18px 4px 12px; } -/*details.message summary { +details.message summary { font-size: 10pt; font-weight: 600; min-height: 18px; -}*/ +} details.message:first-child { margin-top: 4px; @@ -590,12 +585,12 @@ details.message:first-child { } details.message h1 { - text-align: left; + text-align: left; } -/*.message > summary::-webkit-details-marker { +.message > summary::-webkit-details-marker { display: none; -}*/ +} .info20, .question, @@ -611,6 +606,7 @@ details.message h1 { .info { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23999' d='M10,18 C5.581722,18 2,14.418278 2,10 C2,5.581722 5.581722,2 10,2 C14.418278,2 18,5.581722 18,10 C18,14.418278 14.418278,18 10,18 Z M10,8 C9.44771525,8 9,8.42137906 9,8.94117647 L9,14.0588235 C9,14.5786209 9.44771525,15 10,15 C10.5522847,15 11,14.5786209 11,14.0588235 L11,8.94117647 C11,8.42137906 10.5522847,8 10,8 Z M10,5 C9.44771525,5 9,5.44082732 9,5.98461538 L9,6.01538462 C9,6.55917268 9.44771525,7 10,7 C10.5522847,7 11,6.55917268 11,6.01538462 L11,5.98461538 C11,5.44082732 10.5522847,5 10,5 Z'/%3E%3C/svg%3E%0A"); + height: 16px; } .info2 { @@ -618,8 +614,10 @@ details.message h1 { } .sdpi-more-info { - background-image: linear-gradient(to right, #00000000 0%,#00000040 80%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon fill='%23999' points='4 7 8 7 8 5 12 8 8 11 8 9 4 9'/%3E%3C/svg%3E%0A"); + background-image: linear-gradient(to right, #00000000 0%, #00000040 80%), + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon fill='%23999' points='4 7 8 7 8 5 12 8 8 11 8 9 4 9'/%3E%3C/svg%3E%0A"); } + .caution { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23999' fill-rule='evenodd' d='M9.03952676,0.746646542 C9.57068894,-0.245797319 10.4285735,-0.25196227 10.9630352,0.746646542 L19.7705903,17.2030214 C20.3017525,18.1954653 19.8777595,19 18.8371387,19 L1.16542323,19 C0.118729947,19 -0.302490098,18.2016302 0.231971607,17.2030214 L9.03952676,0.746646542 Z M10,2.25584053 L1.9601405,17.3478261 L18.04099,17.3478261 L10,2.25584053 Z M10,5.9375 C10.531043,5.9375 10.9615385,6.37373537 10.9615385,6.91185897 L10.9615385,11.6923077 C10.9615385,12.2304313 10.531043,12.6666667 10,12.6666667 C9.46895697,12.6666667 9.03846154,12.2304313 9.03846154,11.6923077 L9.03846154,6.91185897 C9.03846154,6.37373537 9.46895697,5.9375 10,5.9375 Z M10,13.4583333 C10.6372516,13.4583333 11.1538462,13.9818158 11.1538462,14.6275641 L11.1538462,14.6641026 C11.1538462,15.3098509 10.6372516,15.8333333 10,15.8333333 C9.36274837,15.8333333 8.84615385,15.3098509 8.84615385,14.6641026 L8.84615385,14.6275641 C8.84615385,13.9818158 9.36274837,13.4583333 10,13.4583333 Z'/%3E%3C/svg%3E%0A"); } @@ -628,13 +626,12 @@ details.message h1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23999' d='M10,18 C5.581722,18 2,14.418278 2,10 C2,5.581722 5.581722,2 10,2 C14.418278,2 18,5.581722 18,10 C18,14.418278 14.418278,18 10,18 Z M6.77783203,7.65332031 C6.77783203,7.84798274 6.85929281,8.02888914 7.0222168,8.19604492 C7.18514079,8.36320071 7.38508996,8.44677734 7.62207031,8.44677734 C8.02409055,8.44677734 8.29703704,8.20768468 8.44091797,7.72949219 C8.59326248,7.27245865 8.77945854,6.92651485 8.99951172,6.69165039 C9.2195649,6.45678594 9.56233491,6.33935547 10.027832,6.33935547 C10.4256205,6.33935547 10.7006836,6.37695313 11.0021973,6.68847656 C11.652832,7.53271484 10.942627,8.472229 10.3750916,9.1321106 C9.80755615,9.79199219 8.29492188,11.9897461 10.027832,12.1347656 C10.4498423,12.1700818 10.7027991,11.9147157 10.7832031,11.4746094 C11.0021973,9.59857178 13.1254883,8.82415771 13.1254883,7.53271484 C13.1254883,7.07568131 12.9974785,6.65250846 12.7414551,6.26318359 C12.4854317,5.87385873 12.1225609,5.56600048 11.652832,5.33959961 C11.1831031,5.11319874 10.6414419,5 10.027832,5 C9.36767248,5 8.79004154,5.13541531 8.29492187,5.40625 C7.79980221,5.67708469 7.42317837,6.01879677 7.16503906,6.43139648 C6.90689975,6.8439962 6.77783203,7.25130007 6.77783203,7.65332031 Z M10.0099668,15 C10.2713191,15 10.5016601,14.9108147 10.7009967,14.7324415 C10.9003332,14.5540682 11,14.3088087 11,13.9966555 C11,13.7157177 10.9047629,13.4793767 10.7142857,13.2876254 C10.5238086,13.0958742 10.2890379,13 10.0099668,13 C9.72646591,13 9.48726565,13.0958742 9.2923588,13.2876254 C9.09745196,13.4793767 9,13.7157177 9,13.9966555 C9,14.313268 9.10077419,14.5596424 9.30232558,14.735786 C9.50387698,14.9119295 9.73975502,15 10.0099668,15 Z'/%3E%3C/svg%3E%0A"); } - .sdpi-more-info { position: fixed; left: 0px; right: 0px; bottom: 0px; - min-height:16px; + min-height: 16px; padding-right: 16px; text-align: right; -webkit-touch-callout: none; @@ -647,6 +644,16 @@ details.message h1 { color: var(--sdpi-color); } +.sdpi-more-info-button { + display: flex; + align-self: right; + margin-left: auto; + position: fixed; + right: 17px; + bottom: 0px; + user-select: none; +} + .sdpi-bottom-bar { display: flex; align-self: right; @@ -666,17 +673,6 @@ details.message h1 { height: 20px !important; } - -.sdpi-more-info-button { - display: flex; - align-self: right; - margin-left: auto; - position: fixed; - right: 17px; - bottom: 0px; - user-select: none; -} - details a { background-position: right !important; min-height: 24px; @@ -685,7 +681,6 @@ details a { padding-right: 28px; } - input:not([type="range"]), textarea { -webkit-appearance: none; @@ -696,17 +691,19 @@ textarea { border: none; margin-top: 2px; margin-bottom: 2px; - /*min-width: 219px;*/ + min-width: 219px; } textarea + label { display: flex; - justify-content: flex-end + justify-content: flex-end; } + input[type="radio"], input[type="checkbox"] { display: none; } + input[type="radio"] + label, input[type="checkbox"] + label { font-size: 9pt; @@ -716,7 +713,7 @@ input[type="checkbox"] + label { -webkit-user-select: none; } -input[type="radio"] + label:after, +input[type="radio"] + label:after, input[type="checkbox"] + label:after { content: " " !important; } @@ -730,13 +727,13 @@ input[type="checkbox"] + label:after { margin-top: 4px; } -.sdpi-item[type="checkbox"] .sdpi-item-child, +.sdpi-item[type="checkbox"] .sdpi-item-child, .sdpi-item[type="radio"] .sdpi-item-child { display: inline-block; } -.sdpi-item[type="range"] .sdpi-item-value, -.sdpi-item[type="meter"] .sdpi-item-child, +.sdpi-item[type="range"] .sdpi-item-value, +.sdpi-item[type="meter"] .sdpi-item-child, .sdpi-item[type="progress"] .sdpi-item-child { display: flex; } @@ -745,8 +742,8 @@ input[type="checkbox"] + label:after { min-height: 26px; } -.sdpi-item[type="range"] .sdpi-item-value span, -.sdpi-item[type="meter"] .sdpi-item-child span, +.sdpi-item[type="range"] .sdpi-item-value span, +.sdpi-item[type="meter"] .sdpi-item-child span, .sdpi-item[type="progress"] .sdpi-item-child span { margin-top: -2px; min-width: 8px; @@ -757,7 +754,7 @@ input[type="checkbox"] + label:after { user-select: none; } -.sdpi-item[type="range"] .sdpi-item-value span { +.sdpi-item[type="range"] .sdpi-item-value span { margin-top: 7px; text-align: right; } @@ -765,17 +762,16 @@ input[type="checkbox"] + label:after { span + input[type="range"] { display: flex; max-width: 168px; - } -.sdpi-item[type="range"] .sdpi-item-value span:first-child, -.sdpi-item[type="meter"] .sdpi-item-child span:first-child, +.sdpi-item[type="range"] .sdpi-item-value span:first-child, +.sdpi-item[type="meter"] .sdpi-item-child span:first-child, .sdpi-item[type="progress"] .sdpi-item-child span:first-child { margin-right: 4px; } -.sdpi-item[type="range"] .sdpi-item-value span:last-child, -.sdpi-item[type="meter"] .sdpi-item-child span:last-child, +.sdpi-item[type="range"] .sdpi-item-value span:last-child, +.sdpi-item[type="meter"] .sdpi-item-child span:last-child, .sdpi-item[type="progress"] .sdpi-item-child span:last-child { margin-left: 4px; } @@ -784,7 +780,7 @@ span + input[type="range"] { transform: rotate(180deg); } -.sdpi-item[type="meter"] .sdpi-item-child meter + span:last-child { +.sdpi-item[type="meter"] .sdpi-item-child meter + span:last-child { margin-left: -10px; } @@ -808,6 +804,7 @@ details > h4 { legend { display: none; } + .sdpi-item-value > textarea { padding: 0px; width: 219px; @@ -826,7 +823,7 @@ input[type="checkbox"] + label span { vertical-align: middle; background: var(--sdpi-background); cursor: pointer; - border: 1px solid rgb(0,0,0,.2); + border: 1px solid rgb(0, 0, 0, 0.2); } input[type="radio"] + label span { @@ -839,7 +836,7 @@ input[type="checkbox"]:checked + label span { background-image: url(check.svg); background-repeat: no-repeat; background-position: center center; - border: 1px solid rgb(0,0,0,.4); + border: 1px solid rgb(0, 0, 0, 0.4); } input[type="radio"]:active:checked + label span, @@ -870,23 +867,24 @@ input[type="range"] { } /* -input[type="range"], -input[type="range"]::-webkit-slider-runnable-track, -input[type="range"]::-webkit-slider-thumb { - -webkit-appearance: none; -} -*/ + input[type="range"], + input[type="range"]::-webkit-slider-runnable-track, + input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + } + */ input[type="range"]::-webkit-slider-runnable-track { height: 5px; background: #979797; border-radius: 3px; - padding:0px !important; + padding: 0px !important; border: 1px solid var(--sdpi-background); } input[type="range"]::-webkit-slider-thumb { position: relative; + -webkit-appearance: none; background-color: var(--sdpi-color); width: 12px; height: 12px; @@ -894,17 +892,22 @@ input[type="range"]::-webkit-slider-thumb { margin-top: -5px; border: none; } -input[type="range" i]{ + +input[type="range" i] { margin: 0; } input[type="range"]::-webkit-slider-thumb::before { position: absolute; content: ""; - height: 5px; /* equal to height of runnable track or 1 less */ - width: 500px; /* make this bigger than the widest range input element */ - left: -502px; /* this should be -2px - width */ - top: 8px; /* don't change this */ + height: 5px; + /* equal to height of runnable track or 1 less */ + width: 500px; + /* make this bigger than the widest range input element */ + left: -502px; + /* this should be -2px - width */ + top: 8px; + /* don't change this */ background: #77f; } @@ -933,7 +936,8 @@ textarea { } textarea { - width: 219px; /*98%;*/ + width: 219px; + /*98%;*/ height: 96%; min-height: 6em; resize: none; @@ -942,8 +946,7 @@ textarea { /* CAROUSEL */ -.sdpi-item[type="carousel"]{ - +.sdpi-item[type="carousel"] { } .sdpi-item.card-carousel-wrapper, @@ -951,7 +954,6 @@ textarea { padding: 0; } - .card-carousel-wrapper { display: flex; align-items: center; @@ -965,9 +967,11 @@ textarea { justify-content: center; width: 278px; } + .card-carousel--overflow-container { overflow: hidden; } + .card-carousel--nav__left, .card-carousel--nav__right { /* display: inline-block; */ @@ -979,28 +983,35 @@ textarea { margin: 0 4px; transition: transform 150ms linear; } + .card-carousel--nav__left[disabled], .card-carousel--nav__right[disabled] { opacity: 0.2; border-color: black; } + .card-carousel--nav__left { transform: rotate(-135deg); } + .card-carousel--nav__left:active { transform: rotate(-135deg) scale(0.85); } + .card-carousel--nav__right { transform: rotate(45deg); } + .card-carousel--nav__right:active { transform: rotate(45deg) scale(0.85); } + .card-carousel-cards { display: flex; transition: transform 150ms ease-out; transform: translatex(0px); } + .card-carousel-cards .card-carousel--card { margin: 0 5px; cursor: pointer; @@ -1009,12 +1020,15 @@ textarea { border-radius: 4px; z-index: 3; } + .xxcard-carousel-cards .card-carousel--card:first-child { margin-left: 0; } + .xxcard-carousel-cards .card-carousel--card:last-child { margin-right: 0; } + .card-carousel-cards .card-carousel--card img { vertical-align: bottom; border-top-left-radius: 4px; @@ -1022,9 +1036,11 @@ textarea { transition: opacity 150ms linear; width: 60px; } + .card-carousel-cards .card-carousel--card img:hover { opacity: 0.5; } + .card-carousel-cards .card-carousel--card--footer { border-top: 0; max-width: 80px; @@ -1033,6 +1049,7 @@ textarea { height: 100%; flex-direction: column; } + .card-carousel-cards .card-carousel--card--footer p { padding: 3px 0; margin: 0; @@ -1041,6 +1058,7 @@ textarea { font-weight: 500; color: #2c3e50; } + .card-carousel-cards .card-carousel--card--footer p:nth-of-type(2) { font-size: 12px; font-weight: 300; @@ -1048,7 +1066,6 @@ textarea { color: #666a73; } - h1 { font-size: 1.3em; font-weight: 500; @@ -1056,31 +1073,43 @@ h1 { margin-bottom: 12px; } -::-webkit-datetime-edit { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +::-webkit-datetime-edit { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; background: url(elg_calendar_inv.svg) no-repeat left center; padding-right: 1em; padding-left: 25px; background-position: 4px 0px; - } -::-webkit-datetime-edit-fields-wrapper { - - } -::-webkit-datetime-edit-text { padding: 0 0.3em; } -::-webkit-datetime-edit-month-field { } -::-webkit-datetime-edit-day-field {} -::-webkit-datetime-edit-year-field {} -::-webkit-inner-spin-button { - +} + +::-webkit-datetime-edit-fields-wrapper { +} + +::-webkit-datetime-edit-text { + padding: 0 0.3em; +} + +::-webkit-datetime-edit-month-field { +} + +::-webkit-datetime-edit-day-field { +} + +::-webkit-datetime-edit-year-field { +} + +::-webkit-inner-spin-button { /* display: none; */ - } -::-webkit-calendar-picker-indicator { +} + +::-webkit-calendar-picker-indicator { background: transparent; - font-size: 17px; + font-size: 17px; } ::-webkit-calendar-picker-indicator:focus { - background-color: rgba(0,0,0,0.2); + background-color: rgba(0, 0, 0, 0.2); } input[type="date"] { @@ -1093,42 +1122,42 @@ input[type="date"] { } input::-webkit-datetime-edit { - -webkit-flex: 1; - -webkit-user-modify: read-only !important; - display: inline-block; - min-width: 0; - overflow: hidden; + -webkit-flex: 1; + -webkit-user-modify: read-only !important; + display: inline-block; + min-width: 0; + overflow: hidden; } /* -input::-webkit-datetime-edit-fields-wrapper { - -webkit-user-modify: read-only !important; - display: inline-block; - padding: 1px 0; - white-space: pre; - -} -*/ + input::-webkit-datetime-edit-fields-wrapper { + -webkit-user-modify: read-only !important; + display: inline-block; + padding: 1px 0; + white-space: pre; + + } + */ /* -input[type="date"] { - background-color: red; - outline: none; -} - -input[type="date"]::-webkit-clear-button { - font-size: 18px; - height: 30px; - position: relative; -} - -input[type="date"]::-webkit-inner-spin-button { - height: 28px; -} - -input[type="date"]::-webkit-calendar-picker-indicator { - font-size: 15px; -} */ + input[type="date"] { + background-color: red; + outline: none; + } + + input[type="date"]::-webkit-clear-button { + font-size: 18px; + height: 30px; + position: relative; + } + + input[type="date"]::-webkit-inner-spin-button { + height: 28px; + } + + input[type="date"]::-webkit-calendar-picker-indicator { + font-size: 15px; + } */ input[type="file"] { opacity: 0; @@ -1142,8 +1171,8 @@ input[type="file"] { input[type="file"] + span { display: flex; - flex: 0 1 auto; - background-color: #0000ff50; + flex: 0 1 auto; + background-color: #0000ff50; } label.sdpi-file-label { @@ -1156,7 +1185,7 @@ label.sdpi-file-label { padding: 0px 4px; margin: auto; margin-right: 0px; - float:right; + float: right; } .sdpi-file-label > label:active, @@ -1164,17 +1193,22 @@ label.sdpi-file-label { label.sdpi-file-label:active, label.sdpi-file-info:active, input[type="file"]::-webkit-file-upload-button:active, -button:active { +button:active { background-color: var(--sdpi-color); - color:#303030; + color: #303030; } -input:required:invalid, input:focus:invalid { - background: var(--sdpi-background) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIHZpZXdCb3g9IjAgMCA5IDkiPgogICAgPHBhdGggZmlsbD0iI0Q4RDhEOCIgZD0iTTQuNSwwIEM2Ljk4NTI4MTM3LC00LjU2NTM4NzgyZS0xNiA5LDIuMDE0NzE4NjMgOSw0LjUgQzksNi45ODUyODEzNyA2Ljk4NTI4MTM3LDkgNC41LDkgQzIuMDE0NzE4NjMsOSAzLjA0MzU5MTg4ZS0xNiw2Ljk4NTI4MTM3IDAsNC41IEMtMy4wNDM1OTE4OGUtMTYsMi4wMTQ3MTg2MyAyLjAxNDcxODYzLDQuNTY1Mzg3ODJlLTE2IDQuNSwwIFogTTQsMSBMNCw2IEw1LDYgTDUsMSBMNCwxIFogTTQuNSw4IEM0Ljc3NjE0MjM3LDggNSw3Ljc3NjE0MjM3IDUsNy41IEM1LDcuMjIzODU3NjMgNC43NzYxNDIzNyw3IDQuNSw3IEM0LjIyMzg1NzYzLDcgNCw3LjIyMzg1NzYzIDQsNy41IEM0LDcuNzc2MTQyMzcgNC4yMjM4NTc2Myw4IDQuNSw4IFoiLz4KICA8L3N2Zz4) no-repeat 98% center; +input:required:invalid, +input:focus:invalid { + background: var(--sdpi-background) + url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIHZpZXdCb3g9IjAgMCA5IDkiPgogICAgPHBhdGggZmlsbD0iI0Q4RDhEOCIgZD0iTTQuNSwwIEM2Ljk4NTI4MTM3LC00LjU2NTM4NzgyZS0xNiA5LDIuMDE0NzE4NjMgOSw0LjUgQzksNi45ODUyODEzNyA2Ljk4NTI4MTM3LDkgNC41LDkgQzIuMDE0NzE4NjMsOSAzLjA0MzU5MTg4ZS0xNiw2Ljk4NTI4MTM3IDAsNC41IEMtMy4wNDM1OTE4OGUtMTYsMi4wMTQ3MTg2MyAyLjAxNDcxODYzLDQuNTY1Mzg3ODJlLTE2IDQuNSwwIFogTTQsMSBMNCw2IEw1LDYgTDUsMSBMNCwxIFogTTQuNSw4IEM0Ljc3NjE0MjM3LDggNSw3Ljc3NjE0MjM3IDUsNy41IEM1LDcuMjIzODU3NjMgNC43NzYxNDIzNyw3IDQuNSw3IEM0LjIyMzg1NzYzLDcgNCw3LjIyMzg1NzYzIDQsNy41IEM0LDcuNzc2MTQyMzcgNC4yMjM4NTc2Myw4IDQuNSw4IFoiLz4KICA8L3N2Zz4) + no-repeat 98% center; } input:required:valid { - background: var(--sdpi-background) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIHZpZXdCb3g9IjAgMCA5IDkiPjxwb2x5Z29uIGZpbGw9IiNEOEQ4RDgiIHBvaW50cz0iNS4yIDEgNi4yIDEgNi4yIDcgMy4yIDcgMy4yIDYgNS4yIDYiIHRyYW5zZm9ybT0icm90YXRlKDQwIDQuNjc3IDQpIi8+PC9zdmc+) no-repeat 98% center; + background: var(--sdpi-background) + url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIHZpZXdCb3g9IjAgMCA5IDkiPjxwb2x5Z29uIGZpbGw9IiNEOEQ4RDgiIHBvaW50cz0iNS4yIDEgNi4yIDEgNi4yIDcgMy4yIDcgMy4yIDYgNS4yIDYiIHRyYW5zZm9ybT0icm90YXRlKDQwIDQuNjc3IDQpIi8+PC9zdmc+) + no-repeat 98% center; } .tooltip, @@ -1182,45 +1216,46 @@ input:required:valid { :title { color: yellow; } -/* -[title]:hover { - display: flex; - align-items: center; - justify-content: center; -} - -[title]:hover::after { - content: ''; - position: absolute; - bottom: -1000px; - left: 8px; - display: none; - color: #fff; - border: 8px solid transparent; - border-bottom: 8px solid #000; -} -[title]:hover::before { - content: attr(title); +/* + [title]:hover { display: flex; + align-items: center; justify-content: center; - align-self: center; - padding: 6px 12px; - border-radius: 5px; - background: rgba(0,0,0,0.8); - color: var(--sdpi-color); - font-size: 9pt; - font-family: sans-serif; - opacity: 1; + } + + [title]:hover::after { + content: ''; position: absolute; - height: auto; + bottom: -1000px; + left: 8px; + display: none; + color: #fff; + border: 8px solid transparent; + border-bottom: 8px solid #000; + } - text-align: center; - bottom: 2px; - z-index: 100; - box-shadow: 0px 3px 6px rgba(0, 0, 0, .5); -} -*/ + [title]:hover::before { + content: attr(title); + display: flex; + justify-content: center; + align-self: center; + padding: 6px 12px; + border-radius: 5px; + background: rgba(0,0,0,0.8); + color: var(--sdpi-color); + font-size: 9pt; + font-family: sans-serif; + opacity: 1; + position: absolute; + height: auto; + + text-align: center; + bottom: 2px; + z-index: 100; + box-shadow: 0px 3px 6px rgba(0, 0, 0, .5); + } + */ .sdpi-item-group.file { width: 232px; @@ -1244,13 +1279,12 @@ input:required:valid { background-color: var(--sdpi-background); } - ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } ::-webkit-scrollbar-thumb { @@ -1271,24 +1305,25 @@ a { align-content: space-evenly; } -input[type=range] { +input[type="range"] { + -webkit-appearance: none; /* background-color: green; */ - height:6px; + height: 6px; margin-top: 12px; z-index: 0; overflow: visible; } /* -input[type="range"]::-webkit-slider-thumb { - -webkit-appearance: none; - background-color: var(--sdpi-color); - width: 12px; - height: 12px; - border-radius: 20px; - margin-top: -6px; - border: none; -} */ + input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + background-color: var(--sdpi-color); + width: 12px; + height: 12px; + border-radius: 20px; + margin-top: -6px; + border: none; + } */ :-webkit-slider-thumb { -webkit-appearance: none; @@ -1319,9 +1354,9 @@ input[type="range"]::-webkit-slider-thumb { } .rangeLabel { - position:absolute; - font-weight:normal; - margin-top:22px; + position: absolute; + font-weight: normal; + margin-top: 22px; } :disabled { @@ -1344,10 +1379,10 @@ select option:disabled { } /* debug -div { - background-color: rgba(64,128,255,0.2); -} -*/ + div { + background-color: rgba(64,128,255,0.2); + } + */ .one-line { min-height: 1.5em; @@ -1475,9 +1510,11 @@ div { .icon-brighter { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%23999' fill-rule='evenodd'%3E%3Ccircle cx='10' cy='10' r='4'/%3E%3Cpath d='M14.8532861,7.77530426 C14.7173255,7.4682615 14.5540843,7.17599221 14.3666368,6.90157083 L16.6782032,5.5669873 L17.1782032,6.4330127 L14.8532861,7.77530426 Z M10.5,4.5414007 C10.2777625,4.51407201 10.051423,4.5 9.82179677,4.5 C9.71377555,4.5 9.60648167,4.50311409 9.5,4.50925739 L9.5,2 L10.5,2 L10.5,4.5414007 Z M5.38028092,6.75545367 C5.18389364,7.02383457 5.01124349,7.31068015 4.86542112,7.61289977 L2.82179677,6.4330127 L3.32179677,5.5669873 L5.38028092,6.75545367 Z M4.86542112,12.3871002 C5.01124349,12.6893198 5.18389364,12.9761654 5.38028092,13.2445463 L3.32179677,14.4330127 L2.82179677,13.5669873 L4.86542112,12.3871002 Z M9.5,15.4907426 C9.60648167,15.4968859 9.71377555,15.5 9.82179677,15.5 C10.051423,15.5 10.2777625,15.485928 10.5,15.4585993 L10.5,18 L9.5,18 L9.5,15.4907426 Z M14.3666368,13.0984292 C14.5540843,12.8240078 14.7173255,12.5317385 14.8532861,12.2246957 L17.1782032,13.5669873 L16.6782032,14.4330127 L14.3666368,13.0984292 Z'/%3E%3C/g%3E%3C/svg%3E"); } + .icon-darker { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%23999' fill-rule='evenodd'%3E%3Cpath d='M10 14C7.790861 14 6 12.209139 6 10 6 7.790861 7.790861 6 10 6 12.209139 6 14 7.790861 14 10 14 12.209139 12.209139 14 10 14zM10 13C11.6568542 13 13 11.6568542 13 10 13 8.34314575 11.6568542 7 10 7 8.34314575 7 7 8.34314575 7 10 7 11.6568542 8.34314575 13 10 13zM14.8532861 7.77530426C14.7173255 7.4682615 14.5540843 7.17599221 14.3666368 6.90157083L16.6782032 5.5669873 17.1782032 6.4330127 14.8532861 7.77530426zM10.5 4.5414007C10.2777625 4.51407201 10.051423 4.5 9.82179677 4.5 9.71377555 4.5 9.60648167 4.50311409 9.5 4.50925739L9.5 2 10.5 2 10.5 4.5414007zM5.38028092 6.75545367C5.18389364 7.02383457 5.01124349 7.31068015 4.86542112 7.61289977L2.82179677 6.4330127 3.32179677 5.5669873 5.38028092 6.75545367zM4.86542112 12.3871002C5.01124349 12.6893198 5.18389364 12.9761654 5.38028092 13.2445463L3.32179677 14.4330127 2.82179677 13.5669873 4.86542112 12.3871002zM9.5 15.4907426C9.60648167 15.4968859 9.71377555 15.5 9.82179677 15.5 10.051423 15.5 10.2777625 15.485928 10.5 15.4585993L10.5 18 9.5 18 9.5 15.4907426zM14.3666368 13.0984292C14.5540843 12.8240078 14.7173255 12.5317385 14.8532861 12.2246957L17.1782032 13.5669873 16.6782032 14.4330127 14.3666368 13.0984292z'/%3E%3C/g%3E%3C/svg%3E"); } + .icon-warmer { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%23999' fill-rule='evenodd'%3E%3Cpath d='M12.3247275 11.4890349C12.0406216 11.0007637 11.6761954 10.5649925 11.2495475 10.1998198 11.0890394 9.83238991 11 9.42659309 11 9 11 7.34314575 12.3431458 6 14 6 15.6568542 6 17 7.34314575 17 9 17 10.6568542 15.6568542 12 14 12 13.3795687 12 12.8031265 11.8116603 12.3247275 11.4890349zM17.6232392 11.6692284C17.8205899 11.4017892 17.9890383 11.1117186 18.123974 10.8036272L20.3121778 12.0669873 19.8121778 12.9330127 17.6232392 11.6692284zM18.123974 7.19637279C17.9890383 6.88828142 17.8205899 6.5982108 17.6232392 6.33077158L19.8121778 5.0669873 20.3121778 5.9330127 18.123974 7.19637279zM14.5 4.52746439C14.3358331 4.50931666 14.1690045 4.5 14 4.5 13.8309955 4.5 13.6641669 4.50931666 13.5 4.52746439L13.5 2 14.5 2 14.5 4.52746439zM13.5 13.4725356C13.6641669 13.4906833 13.8309955 13.5 14 13.5 14.1690045 13.5 14.3358331 13.4906833 14.5 13.4725356L14.5 16 13.5 16 13.5 13.4725356zM14 11C15.1045695 11 16 10.1045695 16 9 16 7.8954305 15.1045695 7 14 7 12.8954305 7 12 7.8954305 12 9 12 10.1045695 12.8954305 11 14 11zM9.5 11C10.6651924 11.4118364 11.5 12.5 11.5 14 11.5 16 10 17.5 8 17.5 6 17.5 4.5 16 4.5 14 4.5 12.6937812 5 11.5 6.5 11L6.5 7 9.5 7 9.5 11z'/%3E%3Cpath d='M12,14 C12,16.209139 10.209139,18 8,18 C5.790861,18 4,16.209139 4,14 C4,12.5194353 4.80439726,11.2267476 6,10.5351288 L6,4 C6,2.8954305 6.8954305,2 8,2 C9.1045695,2 10,2.8954305 10,4 L10,10.5351288 C11.1956027,11.2267476 12,12.5194353 12,14 Z M11,14 C11,12.6937812 10.1651924,11.5825421 9,11.1707057 L9,4 C9,3.44771525 8.55228475,3 8,3 C7.44771525,3 7,3.44771525 7,4 L7,11.1707057 C5.83480763,11.5825421 5,12.6937812 5,14 C5,15.6568542 6.34314575,17 8,17 C9.65685425,17 11,15.6568542 11,14 Z'/%3E%3C/g%3E%3C/svg%3E"); } @@ -1491,7 +1528,8 @@ div { } .icon-help-line { - background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23999' fill-rule='evenodd'%3E%3Cpath d='M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-1a9 9 0 1 0 0-18 9 9 0 0 0 0 18z'/%3E%3Cpath d='M10.848 12.307l.02 1.578H8.784v-1.597c0-1.753 1.186-2.278 2.474-2.901h-.02c.756-.39 1.533-.78 1.574-1.948.041-1.226-1.043-2.414-3.006-2.414-1.41 0-2.474.798-3.128 2.083L5 6.193C5.88 4.402 7.474 3 9.805 3 13.118 3 15.04 5.161 15 7.478c-.061 2.318-1.595 3.019-2.883 3.68-.654.332-1.268.604-1.268 1.15zM9.805 14.47c.798 0 1.35.525 1.35 1.285 0 .603-.552 1.246-1.35 1.246-.715 0-1.288-.643-1.288-1.246 0-.76.573-1.285 1.288-1.285z' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");} + background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23999' fill-rule='evenodd'%3E%3Cpath d='M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-1a9 9 0 1 0 0-18 9 9 0 0 0 0 18z'/%3E%3Cpath d='M10.848 12.307l.02 1.578H8.784v-1.597c0-1.753 1.186-2.278 2.474-2.901h-.02c.756-.39 1.533-.78 1.574-1.948.041-1.226-1.043-2.414-3.006-2.414-1.41 0-2.474.798-3.128 2.083L5 6.193C5.88 4.402 7.474 3 9.805 3 13.118 3 15.04 5.161 15 7.478c-.061 2.318-1.595 3.019-2.883 3.68-.654.332-1.268.604-1.268 1.15zM9.805 14.47c.798 0 1.35.525 1.35 1.285 0 .603-.552 1.246-1.35 1.246-.715 0-1.288-.643-1.288-1.246 0-.76.573-1.285 1.288-1.285z' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E"); +} .icon-help-fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23999'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M8.368 7.189H5C5 3.5 7.668 2 10.292 2 13.966 2 16 4.076 16 7.012c0 3.754-3.849 3.136-3.849 5.211v1.656H8.455v-1.832c0-2.164 1.4-2.893 2.778-3.6.437-.242 1.006-.574 1.006-1.236 0-2.208-3.871-2.142-3.871-.022zM10.25 18a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5z'/%3E%3C/g%3E%3C/svg%3E"); @@ -1520,22 +1558,21 @@ div { } /** - CONTROL-CENTER STYLES -*/ + CONTROL-CENTER STYLES + */ input[type="range"].colorbrightness::-webkit-slider-runnable-track, input[type="range"].colortemperature::-webkit-slider-runnable-track { height: 8px; background: #979797; border-radius: 4px; - background-image: linear-gradient(to right,#94d0ec, #ffb165); + background-image: linear-gradient(to right, #94d0ec, #ffb165); } input[type="range"].colorbrightness::-webkit-slider-runnable-track { background-color: #efefef; - background-image: linear-gradient(to right, black , rgba(0,0,0,0)); + background-image: linear-gradient(to right, black, rgba(0, 0, 0, 0)); } - input[type="range"].colorbrightness::-webkit-slider-thumb, input[type="range"].colortemperature::-webkit-slider-thumb { width: 16px; @@ -1546,23 +1583,23 @@ input[type="range"].colortemperature::-webkit-slider-thumb { box-shadow: 0px 0px 1px #000000; border: 1px solid #d8d8d8; } -.sdpi-info-label { - display: inline-block; - user-select: none; - position: absolute; - height: 15px; - width: auto; - text-align: center; - border-radius: 4px; - min-width: 44px; - max-width: 80px; - background: white; - font-size: 11px; - color: black; - z-index: 1000; - box-shadow: 0px 0px 12px rgba(0,0,0,.8); - padding: 2px; +.sdpi-info-label { + display: inline-block; + user-select: none; + position: absolute; + height: 15px; + width: auto; + text-align: center; + border-radius: 4px; + min-width: 44px; + max-width: 80px; + background: white; + font-size: 11px; + color: black; + z-index: 1000; + box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.8); + padding: 2px; } .sdpi-info-label.hidden { @@ -1575,57 +1612,3 @@ input[type="range"].colortemperature::-webkit-slider-thumb { opacity: 1; transition: opacity 0.25s ease-out; } - - - - -/*--------- context menu ----------*/ - -.context-menu { - display: none; - position: absolute; - z-index: 10; - padding: 12px 0; - width: 120px; - background-color: #3D3D3D; - border: solid 1px #dfdfdf; - box-shadow: 1px 1px 2px #cfcfcf; -} - -.context-menu--active { - display: block; -} - -.context-menu__items { - list-style: none; - margin: 0; - padding: 0; - overflow-y: auto; -} - -.context-menu__item { - display: block; - margin-bottom: 4px; - background-color: #3D3D3D !important; -} - -.context-menu__item:last-child { - margin-bottom: 0; -} - -.context-menu__link { - display: block; - padding: 4px 12px; - color: #ffff; - text-decoration: none; - white-space: nowrap; -} - -.context-menu__link:hover { - color: #fff; - background-color: #0066aa; -} - -.context-menu_message{ - cursor: default; -} diff --git a/src/com.genericmale.sonos.sdPlugin/pi/index.html b/src/com.genericmale.sonos.sdPlugin/pi/index.html index e4ff05b..95625f9 100644 --- a/src/com.genericmale.sonos.sdPlugin/pi/index.html +++ b/src/com.genericmale.sonos.sdPlugin/pi/index.html @@ -29,7 +29,8 @@
-
+
+
Obtaining Speaker IP Address

Sonos Desktop App

Help -> About My Sonos System... From b389e4474c30932c38dc6a89ac6dee7760809337 Mon Sep 17 00:00:00 2001 From: Matthew Nitschke Date: Fri, 30 Dec 2022 14:48:38 -0700 Subject: [PATCH 2/4] reverted format --- .../pi/css/sdpi.css | 583 +++++++++--------- 1 file changed, 299 insertions(+), 284 deletions(-) diff --git a/src/com.genericmale.sonos.sdPlugin/pi/css/sdpi.css b/src/com.genericmale.sonos.sdPlugin/pi/css/sdpi.css index c6b7e24..f2e8a5e 100644 --- a/src/com.genericmale.sonos.sdPlugin/pi/css/sdpi.css +++ b/src/com.genericmale.sonos.sdPlugin/pi/css/sdpi.css @@ -1,6 +1,6 @@ :root { - --sdpi-bgcolor: #2d2d2d; - --sdpi-background: #3d3d3d; + --sdpi-bgcolor: #2D2D2D; + --sdpi-background: #3D3D3D; --sdpi-color: #d8d8d8; --sdpi-bordercolor: #3a3a3a; --sdpi-buttonbordercolor: #969696; @@ -11,8 +11,8 @@ } html { - --sdpi-bgcolor: #2d2d2d; - --sdpi-background: #3d3d3d; + --sdpi-bgcolor: #2D2D2D; + --sdpi-background: #3D3D3D; --sdpi-color: #d8d8d8; --sdpi-bordercolor: #3a3a3a; --sdpi-buttonbordercolor: #969696; @@ -23,17 +23,17 @@ html { height: 100%; width: 100%; overflow: hidden; - touch-action: none; + touch-action:none; } -html, -body { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol"; +html, body { + --sdpi-bgcolor: #2D2D2D; + --sdpi-background: #3D3D3D; + --sdpi-color: #d8d8d8; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 9pt; - background-color: var(--sdpi-bgcolor); - color: #9a9a9a; + background-color: var(--sdpi-bgcolor); + color: #9a9a9a; } body { @@ -52,8 +52,7 @@ mark { color: var(--sdpi-color); } -hr, -hr2 { +hr, hr2 { -webkit-margin-before: 1em; -webkit-margin-after: 1em; border-style: none; @@ -63,33 +62,32 @@ hr2 { hr2, .sdpi-heading { - display: flex; - flex-basis: 100%; - align-items: center; - color: inherit; - font-size: 9pt; - margin: 8px 0px; + display: flex; + flex-basis: 100%; + align-items: center; + color: inherit; + font-size: 9pt; + margin: 8px 0px; } .sdpi-heading::before, .sdpi-heading::after { - content: ""; - flex-grow: 1; - background: var(--sdpi-background); - height: 1px; - font-size: 0px; - line-height: 0px; - margin: 0px 16px; + content: ""; + flex-grow: 1; + background: var(--sdpi-background); + height: 1px; + font-size: 0px; + line-height: 0px; + margin: 0px 16px; } hr2 { height: 2px; } -hr, -hr2 { - margin-left: 16px; - margin-right: 16px; +hr, hr2 { + margin-left:16px; + margin-right:16px; } .sdpi-item-value, @@ -102,6 +100,8 @@ button { letter-spacing: var(--sdpi-letterspacing); } + + .win .sdpi-item-value, .win option, .win input, @@ -134,7 +134,6 @@ meter::-webkit-meter-bar:active { border-radius: 3px; background: #222222; } - ::-webkit-progress-value:active, meter::-webkit-meter-optimum-value:active { background: #99f; @@ -161,6 +160,7 @@ progress.full { background-color: transparent; } + .sdpi-item[type="progress"] { margin-top: 4px !important; margin-bottom: 12px; @@ -173,13 +173,13 @@ progress.full { .tabs { /** - * Setting display to flex makes this container lay - * out its children using flexbox, the exact same - * as in the above "Stepper input" example. - */ + * Setting display to flex makes this container lay + * out its children using flexbox, the exact same + * as in the above "Stepper input" example. + */ display: flex; - border-bottom: 1px solid #d7dbdd; + border-bottom: 1px solid #D7DBDD; } .tab { @@ -207,7 +207,7 @@ input[type="button"], input[type="submit"], input[type="reset"], input[type="file"], -input[type="file"]::-webkit-file-upload-button, +input[type=file]::-webkit-file-upload-button, button, select { color: var(--sdpi-color); @@ -222,7 +222,7 @@ input[type="button"], input[type="submit"], input[type="reset"], input[type="file"], -input[type="file"]::-webkit-file-upload-button, +input[type=file]::-webkit-file-upload-button, button { border: 1pt solid var(--sdpi-buttonbordercolor); border-radius: var(--sdpi-borderradius); @@ -232,8 +232,8 @@ button { margin-right: 8px; } -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } @@ -261,11 +261,11 @@ option { align-items: center; margin-top: 4px; max-width: 344px; - -webkit-user-drag: none; + /* -webkit-user-drag: none; */ } .sdpi-item:first-child { - margin-top: -1px; + margin-top:-1px; } .sdpi-item:last-child { @@ -281,6 +281,7 @@ option { padding: 0px 4px 0px 4px; } + .sdpi-item-group { padding: 0 !important; } @@ -349,11 +350,11 @@ table > caption { } .win .sdpi-item-label, -.sdpi-item-label > small { +.sdpi-item-label > small{ font-weight: normal; } -.sdpi-item-label:not(.info):after { +.sdpi-item-label:after { content: ": "; } @@ -365,7 +366,7 @@ table > caption { .sdpi-item-value { flex: 1 0 0; /* flex-grow: 1; - flex-shrink: 0; */ + flex-shrink: 0; */ margin-right: 14px; margin-left: 4px; justify-content: space-evenly; @@ -400,10 +401,11 @@ ul.sdpi-item-value, ol.sdpi-item-value, .sdpi-item-value > dl, .sdpi-item-value > ul, -.sdpi-item-value > ol { +.sdpi-item-value > ol +{ list-style-type: none; list-style-position: outside; - margin-left: -4px; + margin-left: -4px; margin-right: -4px; padding: 4px; border: 1px solid var(--sdpi-bordercolor); @@ -424,13 +426,11 @@ ol.sdpi-item-value, .two-items li { display: flex; -} - +} .two-items li > *:first-child { flex: 0 0 50%; text-align: left; } - .two-items.thirtyseventy li > *:first-child { flex: 0 0 30%; } @@ -439,7 +439,6 @@ ol.sdpi-item-value, .sdpi-item-value > ol[listtype="none"] { list-style-type: none; } - ol.sdpi-item-value[type="decimal"], .sdpi-item-value > ol[type="decimal"] { list-style-type: decimal; @@ -474,15 +473,15 @@ tr:nth-child(even), .sdpi-item-value > ul > li:nth-child(even), .sdpi-item-value > ol > li:nth-child(even), li:nth-child(even) { - background-color: rgba(0, 0, 0, 0.2); + background-color: rgba(0,0,0,.2) } td:hover, .sdpi-item-value > ul > li:hover:nth-child(even), .sdpi-item-value > ol > li:hover:nth-child(even), li:hover:nth-child(even), -li:hover { - background-color: rgba(255, 255, 255, 0.1); +li:hover { + background-color: rgba(255,255,255,.1); } td.selected, @@ -526,7 +525,7 @@ td:last-child { .sdpi-item-child.full, .sdpi-item-child.full > *, .full > .sdpi-item-child, -.full > .sdpi-item-child > * { +.full > .sdpi-item-child > *{ display: flex; flex: 1 1 0; margin-bottom: 4px; @@ -541,7 +540,7 @@ td:last-child { } ::-webkit-calendar-picker-indicator:focus, -input[type="file"]::-webkit-file-upload-button:focus, +input[type=file]::-webkit-file-upload-button:focus, button:focus, textarea:focus, input:focus, @@ -568,15 +567,19 @@ details * { font-weight: normal; } +details *:not(summary) { + margin-left: 13px +} + details.message { padding: 4px 18px 4px 12px; } -details.message summary { +/*details.message summary { font-size: 10pt; font-weight: 600; min-height: 18px; -} +}*/ details.message:first-child { margin-top: 4px; @@ -585,12 +588,12 @@ details.message:first-child { } details.message h1 { - text-align: left; + text-align: left; } -.message > summary::-webkit-details-marker { +/*.message > summary::-webkit-details-marker { display: none; -} +}*/ .info20, .question, @@ -606,7 +609,6 @@ details.message h1 { .info { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23999' d='M10,18 C5.581722,18 2,14.418278 2,10 C2,5.581722 5.581722,2 10,2 C14.418278,2 18,5.581722 18,10 C18,14.418278 14.418278,18 10,18 Z M10,8 C9.44771525,8 9,8.42137906 9,8.94117647 L9,14.0588235 C9,14.5786209 9.44771525,15 10,15 C10.5522847,15 11,14.5786209 11,14.0588235 L11,8.94117647 C11,8.42137906 10.5522847,8 10,8 Z M10,5 C9.44771525,5 9,5.44082732 9,5.98461538 L9,6.01538462 C9,6.55917268 9.44771525,7 10,7 C10.5522847,7 11,6.55917268 11,6.01538462 L11,5.98461538 C11,5.44082732 10.5522847,5 10,5 Z'/%3E%3C/svg%3E%0A"); - height: 16px; } .info2 { @@ -614,10 +616,8 @@ details.message h1 { } .sdpi-more-info { - background-image: linear-gradient(to right, #00000000 0%, #00000040 80%), - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon fill='%23999' points='4 7 8 7 8 5 12 8 8 11 8 9 4 9'/%3E%3C/svg%3E%0A"); + background-image: linear-gradient(to right, #00000000 0%,#00000040 80%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon fill='%23999' points='4 7 8 7 8 5 12 8 8 11 8 9 4 9'/%3E%3C/svg%3E%0A"); } - .caution { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23999' fill-rule='evenodd' d='M9.03952676,0.746646542 C9.57068894,-0.245797319 10.4285735,-0.25196227 10.9630352,0.746646542 L19.7705903,17.2030214 C20.3017525,18.1954653 19.8777595,19 18.8371387,19 L1.16542323,19 C0.118729947,19 -0.302490098,18.2016302 0.231971607,17.2030214 L9.03952676,0.746646542 Z M10,2.25584053 L1.9601405,17.3478261 L18.04099,17.3478261 L10,2.25584053 Z M10,5.9375 C10.531043,5.9375 10.9615385,6.37373537 10.9615385,6.91185897 L10.9615385,11.6923077 C10.9615385,12.2304313 10.531043,12.6666667 10,12.6666667 C9.46895697,12.6666667 9.03846154,12.2304313 9.03846154,11.6923077 L9.03846154,6.91185897 C9.03846154,6.37373537 9.46895697,5.9375 10,5.9375 Z M10,13.4583333 C10.6372516,13.4583333 11.1538462,13.9818158 11.1538462,14.6275641 L11.1538462,14.6641026 C11.1538462,15.3098509 10.6372516,15.8333333 10,15.8333333 C9.36274837,15.8333333 8.84615385,15.3098509 8.84615385,14.6641026 L8.84615385,14.6275641 C8.84615385,13.9818158 9.36274837,13.4583333 10,13.4583333 Z'/%3E%3C/svg%3E%0A"); } @@ -626,12 +626,13 @@ details.message h1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23999' d='M10,18 C5.581722,18 2,14.418278 2,10 C2,5.581722 5.581722,2 10,2 C14.418278,2 18,5.581722 18,10 C18,14.418278 14.418278,18 10,18 Z M6.77783203,7.65332031 C6.77783203,7.84798274 6.85929281,8.02888914 7.0222168,8.19604492 C7.18514079,8.36320071 7.38508996,8.44677734 7.62207031,8.44677734 C8.02409055,8.44677734 8.29703704,8.20768468 8.44091797,7.72949219 C8.59326248,7.27245865 8.77945854,6.92651485 8.99951172,6.69165039 C9.2195649,6.45678594 9.56233491,6.33935547 10.027832,6.33935547 C10.4256205,6.33935547 10.7006836,6.37695313 11.0021973,6.68847656 C11.652832,7.53271484 10.942627,8.472229 10.3750916,9.1321106 C9.80755615,9.79199219 8.29492188,11.9897461 10.027832,12.1347656 C10.4498423,12.1700818 10.7027991,11.9147157 10.7832031,11.4746094 C11.0021973,9.59857178 13.1254883,8.82415771 13.1254883,7.53271484 C13.1254883,7.07568131 12.9974785,6.65250846 12.7414551,6.26318359 C12.4854317,5.87385873 12.1225609,5.56600048 11.652832,5.33959961 C11.1831031,5.11319874 10.6414419,5 10.027832,5 C9.36767248,5 8.79004154,5.13541531 8.29492187,5.40625 C7.79980221,5.67708469 7.42317837,6.01879677 7.16503906,6.43139648 C6.90689975,6.8439962 6.77783203,7.25130007 6.77783203,7.65332031 Z M10.0099668,15 C10.2713191,15 10.5016601,14.9108147 10.7009967,14.7324415 C10.9003332,14.5540682 11,14.3088087 11,13.9966555 C11,13.7157177 10.9047629,13.4793767 10.7142857,13.2876254 C10.5238086,13.0958742 10.2890379,13 10.0099668,13 C9.72646591,13 9.48726565,13.0958742 9.2923588,13.2876254 C9.09745196,13.4793767 9,13.7157177 9,13.9966555 C9,14.313268 9.10077419,14.5596424 9.30232558,14.735786 C9.50387698,14.9119295 9.73975502,15 10.0099668,15 Z'/%3E%3C/svg%3E%0A"); } + .sdpi-more-info { position: fixed; left: 0px; right: 0px; bottom: 0px; - min-height: 16px; + min-height:16px; padding-right: 16px; text-align: right; -webkit-touch-callout: none; @@ -644,16 +645,6 @@ details.message h1 { color: var(--sdpi-color); } -.sdpi-more-info-button { - display: flex; - align-self: right; - margin-left: auto; - position: fixed; - right: 17px; - bottom: 0px; - user-select: none; -} - .sdpi-bottom-bar { display: flex; align-self: right; @@ -673,6 +664,17 @@ details.message h1 { height: 20px !important; } + +.sdpi-more-info-button { + display: flex; + align-self: right; + margin-left: auto; + position: fixed; + right: 17px; + bottom: 0px; + user-select: none; +} + details a { background-position: right !important; min-height: 24px; @@ -681,6 +683,7 @@ details a { padding-right: 28px; } + input:not([type="range"]), textarea { -webkit-appearance: none; @@ -691,19 +694,17 @@ textarea { border: none; margin-top: 2px; margin-bottom: 2px; - min-width: 219px; + /*min-width: 219px;*/ } textarea + label { display: flex; - justify-content: flex-end; + justify-content: flex-end } - input[type="radio"], input[type="checkbox"] { display: none; } - input[type="radio"] + label, input[type="checkbox"] + label { font-size: 9pt; @@ -713,7 +714,7 @@ input[type="checkbox"] + label { -webkit-user-select: none; } -input[type="radio"] + label:after, +input[type="radio"] + label:after, input[type="checkbox"] + label:after { content: " " !important; } @@ -727,13 +728,13 @@ input[type="checkbox"] + label:after { margin-top: 4px; } -.sdpi-item[type="checkbox"] .sdpi-item-child, +.sdpi-item[type="checkbox"] .sdpi-item-child, .sdpi-item[type="radio"] .sdpi-item-child { display: inline-block; } -.sdpi-item[type="range"] .sdpi-item-value, -.sdpi-item[type="meter"] .sdpi-item-child, +.sdpi-item[type="range"] .sdpi-item-value, +.sdpi-item[type="meter"] .sdpi-item-child, .sdpi-item[type="progress"] .sdpi-item-child { display: flex; } @@ -742,8 +743,8 @@ input[type="checkbox"] + label:after { min-height: 26px; } -.sdpi-item[type="range"] .sdpi-item-value span, -.sdpi-item[type="meter"] .sdpi-item-child span, +.sdpi-item[type="range"] .sdpi-item-value span, +.sdpi-item[type="meter"] .sdpi-item-child span, .sdpi-item[type="progress"] .sdpi-item-child span { margin-top: -2px; min-width: 8px; @@ -754,7 +755,7 @@ input[type="checkbox"] + label:after { user-select: none; } -.sdpi-item[type="range"] .sdpi-item-value span { +.sdpi-item[type="range"] .sdpi-item-value span { margin-top: 7px; text-align: right; } @@ -762,16 +763,17 @@ input[type="checkbox"] + label:after { span + input[type="range"] { display: flex; max-width: 168px; + } -.sdpi-item[type="range"] .sdpi-item-value span:first-child, -.sdpi-item[type="meter"] .sdpi-item-child span:first-child, +.sdpi-item[type="range"] .sdpi-item-value span:first-child, +.sdpi-item[type="meter"] .sdpi-item-child span:first-child, .sdpi-item[type="progress"] .sdpi-item-child span:first-child { margin-right: 4px; } -.sdpi-item[type="range"] .sdpi-item-value span:last-child, -.sdpi-item[type="meter"] .sdpi-item-child span:last-child, +.sdpi-item[type="range"] .sdpi-item-value span:last-child, +.sdpi-item[type="meter"] .sdpi-item-child span:last-child, .sdpi-item[type="progress"] .sdpi-item-child span:last-child { margin-left: 4px; } @@ -780,7 +782,7 @@ span + input[type="range"] { transform: rotate(180deg); } -.sdpi-item[type="meter"] .sdpi-item-child meter + span:last-child { +.sdpi-item[type="meter"] .sdpi-item-child meter + span:last-child { margin-left: -10px; } @@ -804,7 +806,6 @@ details > h4 { legend { display: none; } - .sdpi-item-value > textarea { padding: 0px; width: 219px; @@ -823,7 +824,7 @@ input[type="checkbox"] + label span { vertical-align: middle; background: var(--sdpi-background); cursor: pointer; - border: 1px solid rgb(0, 0, 0, 0.2); + border: 1px solid rgb(0,0,0,.2); } input[type="radio"] + label span { @@ -836,7 +837,7 @@ input[type="checkbox"]:checked + label span { background-image: url(check.svg); background-repeat: no-repeat; background-position: center center; - border: 1px solid rgb(0, 0, 0, 0.4); + border: 1px solid rgb(0,0,0,.4); } input[type="radio"]:active:checked + label span, @@ -867,24 +868,23 @@ input[type="range"] { } /* - input[type="range"], - input[type="range"]::-webkit-slider-runnable-track, - input[type="range"]::-webkit-slider-thumb { - -webkit-appearance: none; - } - */ +input[type="range"], +input[type="range"]::-webkit-slider-runnable-track, +input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; +} +*/ input[type="range"]::-webkit-slider-runnable-track { height: 5px; background: #979797; border-radius: 3px; - padding: 0px !important; + padding:0px !important; border: 1px solid var(--sdpi-background); } input[type="range"]::-webkit-slider-thumb { position: relative; - -webkit-appearance: none; background-color: var(--sdpi-color); width: 12px; height: 12px; @@ -892,22 +892,17 @@ input[type="range"]::-webkit-slider-thumb { margin-top: -5px; border: none; } - -input[type="range" i] { +input[type="range" i]{ margin: 0; } input[type="range"]::-webkit-slider-thumb::before { position: absolute; content: ""; - height: 5px; - /* equal to height of runnable track or 1 less */ - width: 500px; - /* make this bigger than the widest range input element */ - left: -502px; - /* this should be -2px - width */ - top: 8px; - /* don't change this */ + height: 5px; /* equal to height of runnable track or 1 less */ + width: 500px; /* make this bigger than the widest range input element */ + left: -502px; /* this should be -2px - width */ + top: 8px; /* don't change this */ background: #77f; } @@ -936,8 +931,7 @@ textarea { } textarea { - width: 219px; - /*98%;*/ + width: 219px; /*98%;*/ height: 96%; min-height: 6em; resize: none; @@ -946,7 +940,8 @@ textarea { /* CAROUSEL */ -.sdpi-item[type="carousel"] { +.sdpi-item[type="carousel"]{ + } .sdpi-item.card-carousel-wrapper, @@ -954,6 +949,7 @@ textarea { padding: 0; } + .card-carousel-wrapper { display: flex; align-items: center; @@ -967,11 +963,9 @@ textarea { justify-content: center; width: 278px; } - .card-carousel--overflow-container { overflow: hidden; } - .card-carousel--nav__left, .card-carousel--nav__right { /* display: inline-block; */ @@ -983,35 +977,28 @@ textarea { margin: 0 4px; transition: transform 150ms linear; } - .card-carousel--nav__left[disabled], .card-carousel--nav__right[disabled] { opacity: 0.2; border-color: black; } - .card-carousel--nav__left { transform: rotate(-135deg); } - .card-carousel--nav__left:active { transform: rotate(-135deg) scale(0.85); } - .card-carousel--nav__right { transform: rotate(45deg); } - .card-carousel--nav__right:active { transform: rotate(45deg) scale(0.85); } - .card-carousel-cards { display: flex; transition: transform 150ms ease-out; transform: translatex(0px); } - .card-carousel-cards .card-carousel--card { margin: 0 5px; cursor: pointer; @@ -1020,15 +1007,12 @@ textarea { border-radius: 4px; z-index: 3; } - .xxcard-carousel-cards .card-carousel--card:first-child { margin-left: 0; } - .xxcard-carousel-cards .card-carousel--card:last-child { margin-right: 0; } - .card-carousel-cards .card-carousel--card img { vertical-align: bottom; border-top-left-radius: 4px; @@ -1036,11 +1020,9 @@ textarea { transition: opacity 150ms linear; width: 60px; } - .card-carousel-cards .card-carousel--card img:hover { opacity: 0.5; } - .card-carousel-cards .card-carousel--card--footer { border-top: 0; max-width: 80px; @@ -1049,7 +1031,6 @@ textarea { height: 100%; flex-direction: column; } - .card-carousel-cards .card-carousel--card--footer p { padding: 3px 0; margin: 0; @@ -1058,7 +1039,6 @@ textarea { font-weight: 500; color: #2c3e50; } - .card-carousel-cards .card-carousel--card--footer p:nth-of-type(2) { font-size: 12px; font-weight: 300; @@ -1066,6 +1046,7 @@ textarea { color: #666a73; } + h1 { font-size: 1.3em; font-weight: 500; @@ -1073,43 +1054,31 @@ h1 { margin-bottom: 12px; } -::-webkit-datetime-edit { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol"; +::-webkit-datetime-edit { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background: url(elg_calendar_inv.svg) no-repeat left center; padding-right: 1em; padding-left: 25px; background-position: 4px 0px; -} - -::-webkit-datetime-edit-fields-wrapper { -} - -::-webkit-datetime-edit-text { - padding: 0 0.3em; -} - -::-webkit-datetime-edit-month-field { -} - -::-webkit-datetime-edit-day-field { -} - -::-webkit-datetime-edit-year-field { -} - -::-webkit-inner-spin-button { + } +::-webkit-datetime-edit-fields-wrapper { + + } +::-webkit-datetime-edit-text { padding: 0 0.3em; } +::-webkit-datetime-edit-month-field { } +::-webkit-datetime-edit-day-field {} +::-webkit-datetime-edit-year-field {} +::-webkit-inner-spin-button { + /* display: none; */ -} - -::-webkit-calendar-picker-indicator { + } +::-webkit-calendar-picker-indicator { background: transparent; - font-size: 17px; + font-size: 17px; } ::-webkit-calendar-picker-indicator:focus { - background-color: rgba(0, 0, 0, 0.2); + background-color: rgba(0,0,0,0.2); } input[type="date"] { @@ -1122,42 +1091,42 @@ input[type="date"] { } input::-webkit-datetime-edit { - -webkit-flex: 1; - -webkit-user-modify: read-only !important; - display: inline-block; - min-width: 0; - overflow: hidden; + -webkit-flex: 1; + -webkit-user-modify: read-only !important; + display: inline-block; + min-width: 0; + overflow: hidden; } /* - input::-webkit-datetime-edit-fields-wrapper { - -webkit-user-modify: read-only !important; - display: inline-block; - padding: 1px 0; - white-space: pre; - - } - */ +input::-webkit-datetime-edit-fields-wrapper { + -webkit-user-modify: read-only !important; + display: inline-block; + padding: 1px 0; + white-space: pre; + +} +*/ /* - input[type="date"] { - background-color: red; - outline: none; - } - - input[type="date"]::-webkit-clear-button { - font-size: 18px; - height: 30px; - position: relative; - } - - input[type="date"]::-webkit-inner-spin-button { - height: 28px; - } - - input[type="date"]::-webkit-calendar-picker-indicator { - font-size: 15px; - } */ +input[type="date"] { + background-color: red; + outline: none; +} + +input[type="date"]::-webkit-clear-button { + font-size: 18px; + height: 30px; + position: relative; +} + +input[type="date"]::-webkit-inner-spin-button { + height: 28px; +} + +input[type="date"]::-webkit-calendar-picker-indicator { + font-size: 15px; +} */ input[type="file"] { opacity: 0; @@ -1171,8 +1140,8 @@ input[type="file"] { input[type="file"] + span { display: flex; - flex: 0 1 auto; - background-color: #0000ff50; + flex: 0 1 auto; + background-color: #0000ff50; } label.sdpi-file-label { @@ -1185,7 +1154,7 @@ label.sdpi-file-label { padding: 0px 4px; margin: auto; margin-right: 0px; - float: right; + float:right; } .sdpi-file-label > label:active, @@ -1193,22 +1162,17 @@ label.sdpi-file-label { label.sdpi-file-label:active, label.sdpi-file-info:active, input[type="file"]::-webkit-file-upload-button:active, -button:active { +button:active { background-color: var(--sdpi-color); - color: #303030; + color:#303030; } -input:required:invalid, -input:focus:invalid { - background: var(--sdpi-background) - url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIHZpZXdCb3g9IjAgMCA5IDkiPgogICAgPHBhdGggZmlsbD0iI0Q4RDhEOCIgZD0iTTQuNSwwIEM2Ljk4NTI4MTM3LC00LjU2NTM4NzgyZS0xNiA5LDIuMDE0NzE4NjMgOSw0LjUgQzksNi45ODUyODEzNyA2Ljk4NTI4MTM3LDkgNC41LDkgQzIuMDE0NzE4NjMsOSAzLjA0MzU5MTg4ZS0xNiw2Ljk4NTI4MTM3IDAsNC41IEMtMy4wNDM1OTE4OGUtMTYsMi4wMTQ3MTg2MyAyLjAxNDcxODYzLDQuNTY1Mzg3ODJlLTE2IDQuNSwwIFogTTQsMSBMNCw2IEw1LDYgTDUsMSBMNCwxIFogTTQuNSw4IEM0Ljc3NjE0MjM3LDggNSw3Ljc3NjE0MjM3IDUsNy41IEM1LDcuMjIzODU3NjMgNC43NzYxNDIzNyw3IDQuNSw3IEM0LjIyMzg1NzYzLDcgNCw3LjIyMzg1NzYzIDQsNy41IEM0LDcuNzc2MTQyMzcgNC4yMjM4NTc2Myw4IDQuNSw4IFoiLz4KICA8L3N2Zz4) - no-repeat 98% center; +input:required:invalid, input:focus:invalid { + background: var(--sdpi-background) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIHZpZXdCb3g9IjAgMCA5IDkiPgogICAgPHBhdGggZmlsbD0iI0Q4RDhEOCIgZD0iTTQuNSwwIEM2Ljk4NTI4MTM3LC00LjU2NTM4NzgyZS0xNiA5LDIuMDE0NzE4NjMgOSw0LjUgQzksNi45ODUyODEzNyA2Ljk4NTI4MTM3LDkgNC41LDkgQzIuMDE0NzE4NjMsOSAzLjA0MzU5MTg4ZS0xNiw2Ljk4NTI4MTM3IDAsNC41IEMtMy4wNDM1OTE4OGUtMTYsMi4wMTQ3MTg2MyAyLjAxNDcxODYzLDQuNTY1Mzg3ODJlLTE2IDQuNSwwIFogTTQsMSBMNCw2IEw1LDYgTDUsMSBMNCwxIFogTTQuNSw4IEM0Ljc3NjE0MjM3LDggNSw3Ljc3NjE0MjM3IDUsNy41IEM1LDcuMjIzODU3NjMgNC43NzYxNDIzNyw3IDQuNSw3IEM0LjIyMzg1NzYzLDcgNCw3LjIyMzg1NzYzIDQsNy41IEM0LDcuNzc2MTQyMzcgNC4yMjM4NTc2Myw4IDQuNSw4IFoiLz4KICA8L3N2Zz4) no-repeat 98% center; } input:required:valid { - background: var(--sdpi-background) - url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIHZpZXdCb3g9IjAgMCA5IDkiPjxwb2x5Z29uIGZpbGw9IiNEOEQ4RDgiIHBvaW50cz0iNS4yIDEgNi4yIDEgNi4yIDcgMy4yIDcgMy4yIDYgNS4yIDYiIHRyYW5zZm9ybT0icm90YXRlKDQwIDQuNjc3IDQpIi8+PC9zdmc+) - no-repeat 98% center; + background: var(--sdpi-background) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIHZpZXdCb3g9IjAgMCA5IDkiPjxwb2x5Z29uIGZpbGw9IiNEOEQ4RDgiIHBvaW50cz0iNS4yIDEgNi4yIDEgNi4yIDcgMy4yIDcgMy4yIDYgNS4yIDYiIHRyYW5zZm9ybT0icm90YXRlKDQwIDQuNjc3IDQpIi8+PC9zdmc+) no-repeat 98% center; } .tooltip, @@ -1216,46 +1180,45 @@ input:required:valid { :title { color: yellow; } - /* - [title]:hover { +[title]:hover { + display: flex; + align-items: center; + justify-content: center; +} + +[title]:hover::after { + content: ''; + position: absolute; + bottom: -1000px; + left: 8px; + display: none; + color: #fff; + border: 8px solid transparent; + border-bottom: 8px solid #000; +} + +[title]:hover::before { + content: attr(title); display: flex; - align-items: center; justify-content: center; - } - - [title]:hover::after { - content: ''; + align-self: center; + padding: 6px 12px; + border-radius: 5px; + background: rgba(0,0,0,0.8); + color: var(--sdpi-color); + font-size: 9pt; + font-family: sans-serif; + opacity: 1; position: absolute; - bottom: -1000px; - left: 8px; - display: none; - color: #fff; - border: 8px solid transparent; - border-bottom: 8px solid #000; - } + height: auto; - [title]:hover::before { - content: attr(title); - display: flex; - justify-content: center; - align-self: center; - padding: 6px 12px; - border-radius: 5px; - background: rgba(0,0,0,0.8); - color: var(--sdpi-color); - font-size: 9pt; - font-family: sans-serif; - opacity: 1; - position: absolute; - height: auto; - - text-align: center; - bottom: 2px; - z-index: 100; - box-shadow: 0px 3px 6px rgba(0, 0, 0, .5); - } - */ + text-align: center; + bottom: 2px; + z-index: 100; + box-shadow: 0px 3px 6px rgba(0, 0, 0, .5); +} +*/ .sdpi-item-group.file { width: 232px; @@ -1279,12 +1242,13 @@ input:required:valid { background-color: var(--sdpi-background); } + ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); } ::-webkit-scrollbar-thumb { @@ -1305,25 +1269,24 @@ a { align-content: space-evenly; } -input[type="range"] { - -webkit-appearance: none; +input[type=range] { /* background-color: green; */ - height: 6px; + height:6px; margin-top: 12px; z-index: 0; overflow: visible; } /* - input[type="range"]::-webkit-slider-thumb { - -webkit-appearance: none; - background-color: var(--sdpi-color); - width: 12px; - height: 12px; - border-radius: 20px; - margin-top: -6px; - border: none; - } */ +input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + background-color: var(--sdpi-color); + width: 12px; + height: 12px; + border-radius: 20px; + margin-top: -6px; + border: none; +} */ :-webkit-slider-thumb { -webkit-appearance: none; @@ -1354,9 +1317,9 @@ input[type="range"] { } .rangeLabel { - position: absolute; - font-weight: normal; - margin-top: 22px; + position:absolute; + font-weight:normal; + margin-top:22px; } :disabled { @@ -1379,10 +1342,10 @@ select option:disabled { } /* debug - div { - background-color: rgba(64,128,255,0.2); - } - */ +div { + background-color: rgba(64,128,255,0.2); +} +*/ .one-line { min-height: 1.5em; @@ -1510,11 +1473,9 @@ select option:disabled { .icon-brighter { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%23999' fill-rule='evenodd'%3E%3Ccircle cx='10' cy='10' r='4'/%3E%3Cpath d='M14.8532861,7.77530426 C14.7173255,7.4682615 14.5540843,7.17599221 14.3666368,6.90157083 L16.6782032,5.5669873 L17.1782032,6.4330127 L14.8532861,7.77530426 Z M10.5,4.5414007 C10.2777625,4.51407201 10.051423,4.5 9.82179677,4.5 C9.71377555,4.5 9.60648167,4.50311409 9.5,4.50925739 L9.5,2 L10.5,2 L10.5,4.5414007 Z M5.38028092,6.75545367 C5.18389364,7.02383457 5.01124349,7.31068015 4.86542112,7.61289977 L2.82179677,6.4330127 L3.32179677,5.5669873 L5.38028092,6.75545367 Z M4.86542112,12.3871002 C5.01124349,12.6893198 5.18389364,12.9761654 5.38028092,13.2445463 L3.32179677,14.4330127 L2.82179677,13.5669873 L4.86542112,12.3871002 Z M9.5,15.4907426 C9.60648167,15.4968859 9.71377555,15.5 9.82179677,15.5 C10.051423,15.5 10.2777625,15.485928 10.5,15.4585993 L10.5,18 L9.5,18 L9.5,15.4907426 Z M14.3666368,13.0984292 C14.5540843,12.8240078 14.7173255,12.5317385 14.8532861,12.2246957 L17.1782032,13.5669873 L16.6782032,14.4330127 L14.3666368,13.0984292 Z'/%3E%3C/g%3E%3C/svg%3E"); } - .icon-darker { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%23999' fill-rule='evenodd'%3E%3Cpath d='M10 14C7.790861 14 6 12.209139 6 10 6 7.790861 7.790861 6 10 6 12.209139 6 14 7.790861 14 10 14 12.209139 12.209139 14 10 14zM10 13C11.6568542 13 13 11.6568542 13 10 13 8.34314575 11.6568542 7 10 7 8.34314575 7 7 8.34314575 7 10 7 11.6568542 8.34314575 13 10 13zM14.8532861 7.77530426C14.7173255 7.4682615 14.5540843 7.17599221 14.3666368 6.90157083L16.6782032 5.5669873 17.1782032 6.4330127 14.8532861 7.77530426zM10.5 4.5414007C10.2777625 4.51407201 10.051423 4.5 9.82179677 4.5 9.71377555 4.5 9.60648167 4.50311409 9.5 4.50925739L9.5 2 10.5 2 10.5 4.5414007zM5.38028092 6.75545367C5.18389364 7.02383457 5.01124349 7.31068015 4.86542112 7.61289977L2.82179677 6.4330127 3.32179677 5.5669873 5.38028092 6.75545367zM4.86542112 12.3871002C5.01124349 12.6893198 5.18389364 12.9761654 5.38028092 13.2445463L3.32179677 14.4330127 2.82179677 13.5669873 4.86542112 12.3871002zM9.5 15.4907426C9.60648167 15.4968859 9.71377555 15.5 9.82179677 15.5 10.051423 15.5 10.2777625 15.485928 10.5 15.4585993L10.5 18 9.5 18 9.5 15.4907426zM14.3666368 13.0984292C14.5540843 12.8240078 14.7173255 12.5317385 14.8532861 12.2246957L17.1782032 13.5669873 16.6782032 14.4330127 14.3666368 13.0984292z'/%3E%3C/g%3E%3C/svg%3E"); } - .icon-warmer { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%23999' fill-rule='evenodd'%3E%3Cpath d='M12.3247275 11.4890349C12.0406216 11.0007637 11.6761954 10.5649925 11.2495475 10.1998198 11.0890394 9.83238991 11 9.42659309 11 9 11 7.34314575 12.3431458 6 14 6 15.6568542 6 17 7.34314575 17 9 17 10.6568542 15.6568542 12 14 12 13.3795687 12 12.8031265 11.8116603 12.3247275 11.4890349zM17.6232392 11.6692284C17.8205899 11.4017892 17.9890383 11.1117186 18.123974 10.8036272L20.3121778 12.0669873 19.8121778 12.9330127 17.6232392 11.6692284zM18.123974 7.19637279C17.9890383 6.88828142 17.8205899 6.5982108 17.6232392 6.33077158L19.8121778 5.0669873 20.3121778 5.9330127 18.123974 7.19637279zM14.5 4.52746439C14.3358331 4.50931666 14.1690045 4.5 14 4.5 13.8309955 4.5 13.6641669 4.50931666 13.5 4.52746439L13.5 2 14.5 2 14.5 4.52746439zM13.5 13.4725356C13.6641669 13.4906833 13.8309955 13.5 14 13.5 14.1690045 13.5 14.3358331 13.4906833 14.5 13.4725356L14.5 16 13.5 16 13.5 13.4725356zM14 11C15.1045695 11 16 10.1045695 16 9 16 7.8954305 15.1045695 7 14 7 12.8954305 7 12 7.8954305 12 9 12 10.1045695 12.8954305 11 14 11zM9.5 11C10.6651924 11.4118364 11.5 12.5 11.5 14 11.5 16 10 17.5 8 17.5 6 17.5 4.5 16 4.5 14 4.5 12.6937812 5 11.5 6.5 11L6.5 7 9.5 7 9.5 11z'/%3E%3Cpath d='M12,14 C12,16.209139 10.209139,18 8,18 C5.790861,18 4,16.209139 4,14 C4,12.5194353 4.80439726,11.2267476 6,10.5351288 L6,4 C6,2.8954305 6.8954305,2 8,2 C9.1045695,2 10,2.8954305 10,4 L10,10.5351288 C11.1956027,11.2267476 12,12.5194353 12,14 Z M11,14 C11,12.6937812 10.1651924,11.5825421 9,11.1707057 L9,4 C9,3.44771525 8.55228475,3 8,3 C7.44771525,3 7,3.44771525 7,4 L7,11.1707057 C5.83480763,11.5825421 5,12.6937812 5,14 C5,15.6568542 6.34314575,17 8,17 C9.65685425,17 11,15.6568542 11,14 Z'/%3E%3C/g%3E%3C/svg%3E"); } @@ -1528,8 +1489,7 @@ select option:disabled { } .icon-help-line { - background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23999' fill-rule='evenodd'%3E%3Cpath d='M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-1a9 9 0 1 0 0-18 9 9 0 0 0 0 18z'/%3E%3Cpath d='M10.848 12.307l.02 1.578H8.784v-1.597c0-1.753 1.186-2.278 2.474-2.901h-.02c.756-.39 1.533-.78 1.574-1.948.041-1.226-1.043-2.414-3.006-2.414-1.41 0-2.474.798-3.128 2.083L5 6.193C5.88 4.402 7.474 3 9.805 3 13.118 3 15.04 5.161 15 7.478c-.061 2.318-1.595 3.019-2.883 3.68-.654.332-1.268.604-1.268 1.15zM9.805 14.47c.798 0 1.35.525 1.35 1.285 0 .603-.552 1.246-1.35 1.246-.715 0-1.288-.643-1.288-1.246 0-.76.573-1.285 1.288-1.285z' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E"); -} + background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23999' fill-rule='evenodd'%3E%3Cpath d='M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-1a9 9 0 1 0 0-18 9 9 0 0 0 0 18z'/%3E%3Cpath d='M10.848 12.307l.02 1.578H8.784v-1.597c0-1.753 1.186-2.278 2.474-2.901h-.02c.756-.39 1.533-.78 1.574-1.948.041-1.226-1.043-2.414-3.006-2.414-1.41 0-2.474.798-3.128 2.083L5 6.193C5.88 4.402 7.474 3 9.805 3 13.118 3 15.04 5.161 15 7.478c-.061 2.318-1.595 3.019-2.883 3.68-.654.332-1.268.604-1.268 1.15zM9.805 14.47c.798 0 1.35.525 1.35 1.285 0 .603-.552 1.246-1.35 1.246-.715 0-1.288-.643-1.288-1.246 0-.76.573-1.285 1.288-1.285z' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");} .icon-help-fill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23999'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M8.368 7.189H5C5 3.5 7.668 2 10.292 2 13.966 2 16 4.076 16 7.012c0 3.754-3.849 3.136-3.849 5.211v1.656H8.455v-1.832c0-2.164 1.4-2.893 2.778-3.6.437-.242 1.006-.574 1.006-1.236 0-2.208-3.871-2.142-3.871-.022zM10.25 18a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5z'/%3E%3C/g%3E%3C/svg%3E"); @@ -1558,21 +1518,22 @@ select option:disabled { } /** - CONTROL-CENTER STYLES - */ + CONTROL-CENTER STYLES +*/ input[type="range"].colorbrightness::-webkit-slider-runnable-track, input[type="range"].colortemperature::-webkit-slider-runnable-track { height: 8px; background: #979797; border-radius: 4px; - background-image: linear-gradient(to right, #94d0ec, #ffb165); + background-image: linear-gradient(to right,#94d0ec, #ffb165); } input[type="range"].colorbrightness::-webkit-slider-runnable-track { background-color: #efefef; - background-image: linear-gradient(to right, black, rgba(0, 0, 0, 0)); + background-image: linear-gradient(to right, black , rgba(0,0,0,0)); } + input[type="range"].colorbrightness::-webkit-slider-thumb, input[type="range"].colortemperature::-webkit-slider-thumb { width: 16px; @@ -1583,23 +1544,23 @@ input[type="range"].colortemperature::-webkit-slider-thumb { box-shadow: 0px 0px 1px #000000; border: 1px solid #d8d8d8; } - .sdpi-info-label { - display: inline-block; - user-select: none; - position: absolute; - height: 15px; - width: auto; - text-align: center; - border-radius: 4px; - min-width: 44px; - max-width: 80px; - background: white; - font-size: 11px; - color: black; - z-index: 1000; - box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.8); - padding: 2px; + display: inline-block; + user-select: none; + position: absolute; + height: 15px; + width: auto; + text-align: center; + border-radius: 4px; + min-width: 44px; + max-width: 80px; + background: white; + font-size: 11px; + color: black; + z-index: 1000; + box-shadow: 0px 0px 12px rgba(0,0,0,.8); + padding: 2px; + } .sdpi-info-label.hidden { @@ -1612,3 +1573,57 @@ input[type="range"].colortemperature::-webkit-slider-thumb { opacity: 1; transition: opacity 0.25s ease-out; } + + + + +/*--------- context menu ----------*/ + +.context-menu { + display: none; + position: absolute; + z-index: 10; + padding: 12px 0; + width: 120px; + background-color: #3D3D3D; + border: solid 1px #dfdfdf; + box-shadow: 1px 1px 2px #cfcfcf; +} + +.context-menu--active { + display: block; +} + +.context-menu__items { + list-style: none; + margin: 0; + padding: 0; + overflow-y: auto; +} + +.context-menu__item { + display: block; + margin-bottom: 4px; + background-color: #3D3D3D !important; +} + +.context-menu__item:last-child { + margin-bottom: 0; +} + +.context-menu__link { + display: block; + padding: 4px 12px; + color: #ffff; + text-decoration: none; + white-space: nowrap; +} + +.context-menu__link:hover { + color: #fff; + background-color: #0066aa; +} + +.context-menu_message{ + cursor: default; +} From 34d421565e7f273d33d12696ff39fcde17b4d234 Mon Sep 17 00:00:00 2001 From: Matthew Nitschke Date: Fri, 30 Dec 2022 14:53:14 -0700 Subject: [PATCH 3/4] fixed info styles --- src/com.genericmale.sonos.sdPlugin/pi/css/sdpi.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/com.genericmale.sonos.sdPlugin/pi/css/sdpi.css b/src/com.genericmale.sonos.sdPlugin/pi/css/sdpi.css index f2e8a5e..f184424 100644 --- a/src/com.genericmale.sonos.sdPlugin/pi/css/sdpi.css +++ b/src/com.genericmale.sonos.sdPlugin/pi/css/sdpi.css @@ -354,7 +354,7 @@ table > caption { font-weight: normal; } -.sdpi-item-label:after { +.sdpi-item-label:not(.info):after { content: ": "; } @@ -609,6 +609,7 @@ details.message h1 { .info { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23999' d='M10,18 C5.581722,18 2,14.418278 2,10 C2,5.581722 5.581722,2 10,2 C14.418278,2 18,5.581722 18,10 C18,14.418278 14.418278,18 10,18 Z M10,8 C9.44771525,8 9,8.42137906 9,8.94117647 L9,14.0588235 C9,14.5786209 9.44771525,15 10,15 C10.5522847,15 11,14.5786209 11,14.0588235 L11,8.94117647 C11,8.42137906 10.5522847,8 10,8 Z M10,5 C9.44771525,5 9,5.44082732 9,5.98461538 L9,6.01538462 C9,6.55917268 9.44771525,7 10,7 C10.5522847,7 11,6.55917268 11,6.01538462 L11,5.98461538 C11,5.44082732 10.5522847,5 10,5 Z'/%3E%3C/svg%3E%0A"); + height: 16px; } .info2 { From 7ec559c2f13ecd30a0047285a745fa5b4f9f029c Mon Sep 17 00:00:00 2001 From: Matthew Nitschke Date: Fri, 30 Dec 2022 15:04:28 -0700 Subject: [PATCH 4/4] fixed info icon for 'Supported Music Services' detail --- src/com.genericmale.sonos.sdPlugin/pi/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/com.genericmale.sonos.sdPlugin/pi/index.html b/src/com.genericmale.sonos.sdPlugin/pi/index.html index 95625f9..6bbc782 100644 --- a/src/com.genericmale.sonos.sdPlugin/pi/index.html +++ b/src/com.genericmale.sonos.sdPlugin/pi/index.html @@ -149,7 +149,8 @@

Sonos Mobile App

-
+
+
Supported Music Services

Spotify

Tidal