├── .gitattributes ├── resources ├── actionIcon.png ├── pluginIcon.png ├── actionIcon@2x.png ├── pluginIcon@2x.png ├── readme │ ├── streamdeck.png │ ├── documentation.png │ ├── serviceselect.png │ ├── streamdeckstore.png │ ├── integration-logo.png │ ├── propertyinspector.png │ ├── webhooks-connect.png │ └── completetriggerfields.png ├── actionDefaultImage.png └── actionDefaultImage@2x.png ├── pi ├── caret.svg ├── main_pi.html ├── main_pi.js └── sdpi.css ├── plugin ├── main.html └── main.js ├── LICENSE ├── manifest.json └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | pi/sdpi.css linguist-vendored 2 | pi/caret.svg linguist-vendored 3 | -------------------------------------------------------------------------------- /resources/actionIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobimori/streamdeck-ifttt/HEAD/resources/actionIcon.png -------------------------------------------------------------------------------- /resources/pluginIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobimori/streamdeck-ifttt/HEAD/resources/pluginIcon.png -------------------------------------------------------------------------------- /resources/actionIcon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobimori/streamdeck-ifttt/HEAD/resources/actionIcon@2x.png -------------------------------------------------------------------------------- /resources/pluginIcon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobimori/streamdeck-ifttt/HEAD/resources/pluginIcon@2x.png -------------------------------------------------------------------------------- /resources/readme/streamdeck.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobimori/streamdeck-ifttt/HEAD/resources/readme/streamdeck.png -------------------------------------------------------------------------------- /resources/actionDefaultImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobimori/streamdeck-ifttt/HEAD/resources/actionDefaultImage.png -------------------------------------------------------------------------------- /resources/actionDefaultImage@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobimori/streamdeck-ifttt/HEAD/resources/actionDefaultImage@2x.png -------------------------------------------------------------------------------- /resources/readme/documentation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobimori/streamdeck-ifttt/HEAD/resources/readme/documentation.png -------------------------------------------------------------------------------- /resources/readme/serviceselect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobimori/streamdeck-ifttt/HEAD/resources/readme/serviceselect.png -------------------------------------------------------------------------------- /resources/readme/streamdeckstore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobimori/streamdeck-ifttt/HEAD/resources/readme/streamdeckstore.png -------------------------------------------------------------------------------- /resources/readme/integration-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobimori/streamdeck-ifttt/HEAD/resources/readme/integration-logo.png -------------------------------------------------------------------------------- /resources/readme/propertyinspector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobimori/streamdeck-ifttt/HEAD/resources/readme/propertyinspector.png -------------------------------------------------------------------------------- /resources/readme/webhooks-connect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobimori/streamdeck-ifttt/HEAD/resources/readme/webhooks-connect.png -------------------------------------------------------------------------------- /resources/readme/completetriggerfields.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tobimori/streamdeck-ifttt/HEAD/resources/readme/completetriggerfields.png -------------------------------------------------------------------------------- /pi/caret.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /plugin/main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | de.tobimori.streamdeck.ifttt 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /pi/main_pi.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | de.tobimori.streamdeck.ifttt.pi 7 | 8 | 9 | 10 | 11 | 12 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-2020 Tobias Möritz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "Actions": [ 3 | { 4 | "Icon": "resources/actionIcon", 5 | "Name": "IFTTT", 6 | "States": [ 7 | { 8 | "Image": "resources/actionDefaultImage", 9 | "TitleAlignment": "bottom", 10 | "FontSize": "10" 11 | } 12 | ], 13 | "SupportedInMultiActions": true, 14 | "Tooltip": "If Stream Deck button pressed, then...", 15 | "UUID": "de.tobimori.streamdeck.ifttt.action" 16 | } 17 | ], 18 | "SDKVersion": 2, 19 | "Author": "tobimori", 20 | "CodePath": "plugin/main.html", 21 | "Description": "Easily integrate the Elgato Stream Deck in your IFTTT setup and control smart home devices.", 22 | "Name": "IFTTT", 23 | "Icon": "resources/pluginIcon", 24 | "PropertyInspectorPath": "pi/main_pi.html", 25 | "URL": "https://moeritz.cc", 26 | "Version": "2.0", 27 | "OS": [ 28 | { 29 | "Platform": "mac", 30 | "MinimumVersion" : "10.11" 31 | }, 32 | { 33 | "Platform": "windows", 34 | "MinimumVersion" : "10" 35 | } 36 | ], 37 | "Software": 38 | { 39 | "MinimumVersion" : "4.1" 40 | } 41 | } -------------------------------------------------------------------------------- /plugin/main.js: -------------------------------------------------------------------------------- 1 | let websocket = null, 2 | pluginUUID = null; 3 | makerkey = ""; 4 | 5 | function connectElgatoStreamDeckSocket(inPort, inPluginUUID, inRegisterEvent, inInfo) { 6 | pluginUUID = inPluginUUID; 7 | 8 | // Open the web socket 9 | websocket = new WebSocket("ws://localhost:" + inPort); 10 | 11 | websocket.onopen = function () { 12 | // WebSocket is connected, register the plugin 13 | const json = { 14 | "event": inRegisterEvent, 15 | "uuid": inPluginUUID 16 | }; 17 | 18 | websocket.send(JSON.stringify(json)); 19 | }; 20 | 21 | websocket.onmessage = function (evt) { 22 | // Received message from Stream Deck 23 | const jsonObj = JSON.parse(evt.data); 24 | console.log(jsonObj); 25 | 26 | if (jsonObj['event'] == "keyUp") { 27 | let eventname = ""; 28 | if (jsonObj.payload.settings != null && jsonObj.payload.settings.hasOwnProperty('eventname')) { 29 | eventname = jsonObj.payload.settings["eventname"]; 30 | } 31 | 32 | if (eventname == "" || makerkey == "") { 33 | const json = { 34 | "event": "showAlert", 35 | "context": jsonObj.context, 36 | }; 37 | websocket.send(JSON.stringify(json)); 38 | } else { 39 | const request = new XMLHttpRequest(); 40 | request.open("GET", 'https://maker.ifttt.com/trigger/' + eventname + '/with/key/' + makerkey); 41 | request.send(); 42 | }; 43 | 44 | } else if (jsonObj['event'] == "didReceiveGlobalSettings") { 45 | if (jsonObj.payload.settings != null && jsonObj.payload.settings.hasOwnProperty('makerkey')) { 46 | makerkey = jsonObj.payload.settings["makerkey"]; 47 | } 48 | 49 | } else if (jsonObj['event'] == "keyDown") { 50 | const json = { 51 | "event": "getGlobalSettings", 52 | "context": pluginUUID 53 | }; 54 | 55 | websocket.send(JSON.stringify(json)); 56 | } 57 | }; 58 | }; -------------------------------------------------------------------------------- /pi/main_pi.js: -------------------------------------------------------------------------------- 1 | let websocket = null, 2 | uuid = null, 3 | actionInfo = {}; 4 | 5 | function connectElgatoStreamDeckSocket(inPort, inPropertyInspectorUUID, inRegisterEvent, inInfo, inActionInfo) { 6 | 7 | uuid = inPropertyInspectorUUID; 8 | actionInfo = JSON.parse(inActionInfo); 9 | 10 | websocket = new WebSocket('ws://localhost:' + inPort); 11 | 12 | websocket.onopen = function() 13 | { 14 | // WebSocket is connected, register the Property Inspector 15 | let json = { 16 | "event": inRegisterEvent, 17 | "uuid": inPropertyInspectorUUID 18 | }; 19 | websocket.send(JSON.stringify(json)); 20 | 21 | json = { 22 | "event": "getSettings", 23 | "context": uuid, 24 | }; 25 | websocket.send(JSON.stringify(json)); 26 | 27 | json = { 28 | "event": "getGlobalSettings", 29 | "context": uuid, 30 | }; 31 | websocket.send(JSON.stringify(json)); 32 | }; 33 | 34 | websocket.onmessage = function (evt) { 35 | // Received message from Stream Deck 36 | const jsonObj = JSON.parse(evt.data); 37 | if (jsonObj.event === 'didReceiveSettings') { 38 | const payload = jsonObj.payload.settings; 39 | 40 | document.getElementById('eventname').value = payload.eventname; 41 | 42 | if(document.getElementById('eventname').value == "undefined") { 43 | document.getElementById('eventname').value = ""; 44 | } 45 | } 46 | if (jsonObj.event === 'didReceiveGlobalSettings') { 47 | const payload = jsonObj.payload.settings; 48 | 49 | document.getElementById('makerkey').value = payload.makerkey; 50 | 51 | if(document.getElementById('makerkey').value == "undefined") { 52 | document.getElementById('makerkey').value = ""; 53 | } 54 | 55 | const el = document.querySelector('.sdpi-wrapper'); 56 | el && el.classList.remove('hidden'); 57 | } 58 | }; 59 | 60 | } 61 | 62 | function updateEventName() { 63 | if (websocket && (websocket.readyState === 1)) { 64 | let payload = {}; 65 | payload.eventname = document.getElementById('eventname').value; 66 | const json = { 67 | "event": "setSettings", 68 | "context": uuid, 69 | "payload": payload 70 | }; 71 | websocket.send(JSON.stringify(json)); 72 | console.log(json) 73 | } 74 | } 75 | 76 | function updateMakerKey() { 77 | if (websocket && (websocket.readyState === 1)) { 78 | let payload = {}; 79 | payload.makerkey = document.getElementById('makerkey').value; 80 | const json = { 81 | "event": "setGlobalSettings", 82 | "context": uuid, 83 | "payload": payload 84 | }; 85 | websocket.send(JSON.stringify(json)); 86 | console.log(json) 87 | } 88 | } 89 | 90 | function openPage(site) { 91 | if (websocket && (websocket.readyState === 1)) { 92 | const json = { 93 | 'event': 'openUrl', 94 | 'payload': { 95 | 'url': 'https://' + site 96 | } 97 | }; 98 | websocket.send(JSON.stringify(json)); 99 | } 100 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | IFTTT for Elgato Stream Deck 3 |

4 |

5 | macOS supported 6 | Windows supported 7 | Over 13.000 downloads 8 | 9 | Follow @tobimori on Twitter 10 | 11 | 12 | Meet on Discord 13 | 14 |

15 | 16 |

17 | Easily integrate the Elgato Stream Deck in your IFTTT setup and control smart home devices. 18 |

19 | 20 | ___ 21 | 22 | # 📝 Guide 23 | 24 | > If you know how IFTTT Webhooks work, this tutorial is rather obsolete for you. Just enter the Event Name and the Maker Key in the property inspector of your action and you'll be ready to go. 25 | 26 | Download the integration from the Stream Deck Store. 27 | 28 | ![](resources/readme/streamdeckstore.png) 29 | 30 | Navigate to IFTTT's website, [IFTTT.com](https://ifttt.com). Create a new account if you haven't done that yet. Then, visit the [Webhooks service site](https://ifttt.com/maker_webhooks) and connect your account by clicking on "Connect". 31 | 32 | ![](resources/readme/webhooks-connect.png) 33 | 34 | Drag and drop the IFTTT button action from the actions list to the canvas area. After selecting it, you'll see two important settings in the property inspector. 35 | 36 | The Event Name setting defines the Event that will be called on IFTTT. *We'll get to that later.* 37 | 38 | ![](resources/readme/streamdeck.png) 39 | 40 | The Maker Key is an access key for your IFTTT account. To get your Maker Key, go on the [Webhooks service site](https://ifttt.com/maker_webhooks) and click on Documentation. You'll find your Maker Key right there. You only need to set this once, the key is saved for all actions. 41 | 42 | ![](resources/readme/documentation.png) 43 | 44 | Copy the Maker Key into the property inspector. Then, go back to the IFTTT page and create a new applet. This is how actions are called on IFTTT. 45 | 46 | Click on "[+] this" and search for Webhooks. 47 | 48 | ![](resources/readme/serviceselect.png) 49 | 50 | Select the "Receive a web request" trigger and enter the decided Event Name for this applet. This also needs to be entered in the property inspector of your action. If two applets have the same Event Name, they will both trigger when pressing the corresponding stream deck button. 51 | 52 | ![](resources/readme/completetriggerfields.png) 53 | 54 | Click on create trigger and switch into the Elgato Stream Deck software. Enter the Event Name in the property inspector. Your property inspector panel now should look like this. 55 | 56 | ![](resources/readme/propertyinspector.png) 57 | 58 | You can now switch back to IFTTT's page and choose the action service like you want. Examples for this are controlling LIFX lamps or resuming your Sonos speaker. 59 | 60 | **Have fun with your new Smart home-enabled Stream Deck!** 61 | 62 | # 📞 Help 63 | 64 | Feel free to ask your questions on the [Elgato Discord Server](https://discord.com/invite/elgato). Please use GitHub Issues for reporting bugs. 65 | 66 | # 📄 License 67 | 68 | streamdeck-ifttt is licensed under the [MIT License](LICENSE). 69 | -------------------------------------------------------------------------------- /pi/sdpi.css: -------------------------------------------------------------------------------- 1 | html { 2 | --sdpi-bgcolor: #2D2D2D; 3 | --sdpi-background: #3D3D3D; 4 | --sdpi-color: #d8d8d8; 5 | --sdpi-bordercolor: #3a3a3a; 6 | --sdpi-borderradius: 0px; 7 | --sdpi-width: 224px; 8 | --sdpi-fontweight: 600; 9 | --sdpi-letterspacing: -0.25pt; 10 | height: 100%; 11 | width: 100%; 12 | overflow: hidden; 13 | } 14 | 15 | html, body { 16 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 17 | font-size: 9pt; 18 | background-color: var(--sdpi-bgcolor); 19 | color: #9a9a9a; 20 | } 21 | 22 | body { 23 | height: 100%; 24 | padding: 0; 25 | overflow-x: hidden; 26 | overflow-y: auto; 27 | margin: 0; 28 | -webkit-overflow-scrolling: touch; 29 | -webkit-text-size-adjust: 100%; 30 | -webkit-font-smoothing: antialiased; 31 | } 32 | 33 | mark { 34 | background-color: var(--sdpi-bgcolor); 35 | color: var(--sdpi-color); 36 | } 37 | 38 | .hidden { 39 | display: none; 40 | } 41 | 42 | hr, hr2 { 43 | -webkit-margin-before: 1em; 44 | -webkit-margin-after: 1em; 45 | border-style: none; 46 | background: var(--sdpi-background); 47 | height: 1px; 48 | } 49 | 50 | hr2, 51 | .sdpi-heading { 52 | display: flex; 53 | flex-basis: 100%; 54 | align-items: center; 55 | color: inherit; 56 | font-size: 9pt; 57 | margin: 8px 0px; 58 | } 59 | 60 | .sdpi-heading::before, 61 | .sdpi-heading::after { 62 | content: ""; 63 | flex-grow: 1; 64 | background: var(--sdpi-background); 65 | height: 1px; 66 | font-size: 0px; 67 | line-height: 0px; 68 | margin: 0px 16px; 69 | } 70 | 71 | hr2 { 72 | height: 2px; 73 | } 74 | 75 | hr, hr2 { 76 | margin-left:16px; 77 | margin-right:16px; 78 | } 79 | 80 | .sdpi-item-value, 81 | option, 82 | input, 83 | select, 84 | button { 85 | font-size: 10pt; 86 | font-weight: var(--sdpi-fontweight); 87 | letter-spacing: var(--sdpi-letterspacing); 88 | } 89 | 90 | 91 | 92 | .win .sdpi-item-value, 93 | .win option, 94 | .win input, 95 | .win select, 96 | .win button { 97 | font-size: 11px; 98 | font-style: normal; 99 | letter-spacing: inherit; 100 | font-weight: 100; 101 | } 102 | 103 | .win button { 104 | font-size: 12px; 105 | } 106 | 107 | ::-webkit-progress-value, 108 | meter::-webkit-meter-optimum-value { 109 | border-radius: 2px; 110 | /* background: linear-gradient(#ccf, #99f 20%, #77f 45%, #77f 55%, #cdf); */ 111 | } 112 | 113 | ::-webkit-progress-bar, 114 | meter::-webkit-meter-bar { 115 | border-radius: 3px; 116 | background: var(--sdpi-background); 117 | } 118 | 119 | ::-webkit-progress-bar:active, 120 | meter::-webkit-meter-bar:active { 121 | border-radius: 3px; 122 | background: #222222; 123 | } 124 | ::-webkit-progress-value:active, 125 | meter::-webkit-meter-optimum-value:active { 126 | background: #99f; 127 | } 128 | 129 | progress, 130 | progress.sdpi-item-value { 131 | min-height: 5px !important; 132 | height: 5px; 133 | background-color: #303030; 134 | } 135 | 136 | progress { 137 | margin-top: 8px !important; 138 | margin-bottom: 8px !important; 139 | } 140 | 141 | .full progress, 142 | progress.full { 143 | margin-top: 3px !important; 144 | } 145 | 146 | ::-webkit-progress-inner-element { 147 | background-color: transparent; 148 | } 149 | 150 | 151 | .sdpi-item[type="progress"] { 152 | margin-top: 4px !important; 153 | margin-bottom: 12px; 154 | min-height: 15px; 155 | } 156 | 157 | .sdpi-item-child.full:last-child { 158 | margin-bottom: 4px; 159 | } 160 | 161 | .tabs { 162 | /** 163 | * Setting display to flex makes this container lay 164 | * out its children using flexbox, the exact same 165 | * as in the above "Stepper input" example. 166 | */ 167 | display: flex; 168 | 169 | border-bottom: 1px solid #D7DBDD; 170 | } 171 | 172 | .tab { 173 | cursor: pointer; 174 | padding: 5px 30px; 175 | color: #16a2d7; 176 | font-size: 9pt; 177 | border-bottom: 2px solid transparent; 178 | } 179 | 180 | .tab.is-tab-selected { 181 | border-bottom-color: #4ebbe4; 182 | } 183 | 184 | select { 185 | -webkit-appearance: none; 186 | -moz-appearance: none; 187 | -o-appearance: none; 188 | appearance: none; 189 | background: url(caret.svg) no-repeat 97% center; 190 | } 191 | 192 | label.sdpi-file-label, 193 | input[type="button"], 194 | input[type="submit"], 195 | input[type="reset"], 196 | input[type="file"], 197 | input[type=file]::-webkit-file-upload-button, 198 | button, 199 | select { 200 | color: var(--sdpi-color); 201 | border: 1pt solid #303030; 202 | font-size: 8pt; 203 | background-color: var(--sdpi-background); 204 | border-radius: var(--sdpi-borderradius); 205 | } 206 | 207 | label.sdpi-file-label, 208 | input[type="button"], 209 | input[type="submit"], 210 | input[type="reset"], 211 | input[type="file"], 212 | input[type=file]::-webkit-file-upload-button, 213 | button { 214 | border: 1pt solid var(--sdpi-color); 215 | border-radius: var(--sdpi-borderradius); 216 | min-height: 23px !important; 217 | height: 23px !important; 218 | margin-right: 8px; 219 | } 220 | 221 | input[type=number]::-webkit-inner-spin-button, 222 | input[type=number]::-webkit-outer-spin-button { 223 | -webkit-appearance: none; 224 | margin: 0; 225 | } 226 | 227 | input[type="file"] { 228 | border-radius: var(--sdpi-borderradius); 229 | max-width: 220px; 230 | } 231 | 232 | option { 233 | height: 1.5em; 234 | padding: 4px; 235 | } 236 | 237 | /* SDPI */ 238 | 239 | .sdpi-wrapper { 240 | overflow-x: hidden; 241 | } 242 | 243 | .sdpi-item { 244 | display: flex; 245 | flex-direction: row; 246 | min-height: 32px; 247 | align-items: center; 248 | margin-top: 2px; 249 | max-width: 344px; 250 | } 251 | 252 | .sdpi-item:first-child { 253 | margin-top:1px; 254 | } 255 | 256 | .sdpi-item:last-child { 257 | margin-bottom: 0px; 258 | } 259 | 260 | .sdpi-item > *:not(.sdpi-item-label):not(meter):not(details) { 261 | min-height: 26px; 262 | padding: 0px 4px 0px 4px; 263 | } 264 | 265 | .sdpi-item > *:not(.sdpi-item-label.empty):not(meter) { 266 | min-height: 26px; 267 | padding: 0px 4px 0px 4px; 268 | } 269 | 270 | 271 | .sdpi-item-group { 272 | padding: 0 !important; 273 | } 274 | 275 | meter.sdpi-item-value { 276 | margin-left: 6px; 277 | } 278 | 279 | .sdpi-item[type="group"] { 280 | display: block; 281 | margin-top: 12px; 282 | margin-bottom: 12px; 283 | /* border: 1px solid white; */ 284 | flex-direction: unset; 285 | text-align: left; 286 | } 287 | 288 | .sdpi-item[type="group"] > .sdpi-item-label, 289 | .sdpi-item[type="group"].sdpi-item-label { 290 | width: 96%; 291 | text-align: left; 292 | font-weight: 700; 293 | margin-bottom: 4px; 294 | padding-left: 4px; 295 | } 296 | 297 | dl, 298 | ul, 299 | ol { 300 | -webkit-margin-before: 0px; 301 | -webkit-margin-after: 4px; 302 | -webkit-padding-start: 1em; 303 | max-height: 90px; 304 | overflow-y: scroll; 305 | cursor: pointer; 306 | user-select: none; 307 | } 308 | 309 | table.sdpi-item-value, 310 | dl.sdpi-item-value, 311 | ul.sdpi-item-value, 312 | ol.sdpi-item-value { 313 | -webkit-margin-before: 4px; 314 | -webkit-margin-after: 8px; 315 | -webkit-padding-start: 1em; 316 | width: var(--sdpi-width); 317 | text-align: center; 318 | } 319 | 320 | table > caption { 321 | margin: 2px; 322 | } 323 | 324 | .list, 325 | .sdpi-item[type="list"] { 326 | align-items: baseline; 327 | } 328 | 329 | .sdpi-item-label { 330 | text-align: right; 331 | flex: none; 332 | width: 94px; 333 | padding-right: 4px; 334 | font-weight: 600; 335 | -webkit-user-select: none; 336 | } 337 | 338 | .win .sdpi-item-label, 339 | .sdpi-item-label > small{ 340 | font-weight: normal; 341 | } 342 | 343 | .sdpi-item-label:after { 344 | content: ": "; 345 | } 346 | 347 | .sdpi-item-label.empty:after { 348 | content: ""; 349 | } 350 | 351 | .sdpi-test, 352 | .sdpi-item-value { 353 | flex: 1 0 0; 354 | /* flex-grow: 1; 355 | flex-shrink: 0; */ 356 | margin-right: 14px; 357 | margin-left: 4px; 358 | justify-content: space-evenly; 359 | } 360 | 361 | canvas.sdpi-item-value { 362 | max-width: 144px; 363 | max-height: 144px; 364 | width: 144px; 365 | height: 144px; 366 | margin: 0 auto; 367 | cursor: pointer; 368 | } 369 | 370 | input.sdpi-item-value { 371 | margin-left: 5px; 372 | } 373 | 374 | .sdpi-item-value button, 375 | button.sdpi-item-value { 376 | margin-left: 7px; 377 | margin-right: 19px; 378 | } 379 | 380 | .sdpi-item-value.range { 381 | margin-left: 0px; 382 | } 383 | 384 | table, 385 | dl.sdpi-item-value, 386 | ul.sdpi-item-value, 387 | ol.sdpi-item-value, 388 | .sdpi-item-value > dl, 389 | .sdpi-item-value > ul, 390 | .sdpi-item-value > ol 391 | { 392 | list-style-type: none; 393 | list-style-position: outside; 394 | margin-left: -4px; 395 | margin-right: -4px; 396 | padding: 4px; 397 | border: 1px solid var(--sdpi-bordercolor); 398 | } 399 | 400 | dl.sdpi-item-value, 401 | ul.sdpi-item-value, 402 | ol.sdpi-item-value, 403 | .sdpi-item-value > ol { 404 | list-style-type: none; 405 | list-style-position: inside; 406 | margin-left: 5px; 407 | margin-right: 12px; 408 | padding: 4px !important; 409 | } 410 | 411 | ol.sdpi-item-value, 412 | .sdpi-item-value > ol[listtype="none"] { 413 | list-style-type: none; 414 | } 415 | ol.sdpi-item-value[type="decimal"], 416 | .sdpi-item-value > ol[type="decimal"] { 417 | list-style-type: decimal; 418 | } 419 | 420 | ol.sdpi-item-value[type="decimal-leading-zero"], 421 | .sdpi-item-value > ol[type="decimal-leading-zero"] { 422 | list-style-type: decimal-leading-zero; 423 | } 424 | 425 | ol.sdpi-item-value[type="lower-alpha"], 426 | .sdpi-item-value > ol[type="lower-alpha"] { 427 | list-style-type: lower-alpha; 428 | } 429 | 430 | ol.sdpi-item-value[type="upper-alpha"], 431 | .sdpi-item-value > ol[type="upper-alpha"] { 432 | list-style-type: upper-alpha; 433 | } 434 | 435 | ol.sdpi-item-value[type="upper-roman"], 436 | .sdpi-item-value > ol[type="upper-roman"] { 437 | list-style-type: upper-roman; 438 | } 439 | 440 | ol.sdpi-item-value[type="lower-roman"], 441 | .sdpi-item-value > ol[type="lower-roman"] { 442 | list-style-type: upper-roman; 443 | } 444 | 445 | tr:nth-child(even), 446 | .sdpi-item-value > ul > li:nth-child(even), 447 | .sdpi-item-value > ol > li:nth-child(even), 448 | li:nth-child(even) { 449 | background-color: rgba(0,0,0,.2) 450 | } 451 | 452 | td:hover, 453 | .sdpi-item-value > ul > li:hover:nth-child(even), 454 | .sdpi-item-value > ol > li:hover:nth-child(even), 455 | li:hover:nth-child(even), 456 | li:hover { 457 | background-color: rgba(255,255,255,.1); 458 | } 459 | 460 | td.selected, 461 | td.selected:hover, 462 | li.selected:hover, 463 | li.selected { 464 | color: white; 465 | background-color: #77f; 466 | } 467 | 468 | tr { 469 | border: 1px solid var(--sdpi-bordercolor); 470 | } 471 | 472 | td { 473 | border-right: 1px solid var(--sdpi-bordercolor); 474 | -webkit-user-select: none; 475 | } 476 | 477 | tr:last-child, 478 | td:last-child { 479 | border: none; 480 | } 481 | 482 | .sdpi-item-value.select, 483 | .sdpi-item-value > select { 484 | margin-right: 13px; 485 | margin-left: 4px; 486 | } 487 | 488 | .sdpi-item-child, 489 | .sdpi-item-group > .sdpi-item > input[type="color"] { 490 | margin-top: 0.4em; 491 | margin-right: 4px; 492 | } 493 | 494 | .full, 495 | .full *, 496 | .sdpi-item-value.full, 497 | .sdpi-item-child > full > *, 498 | .sdpi-item-child.full, 499 | .sdpi-item-child.full > *, 500 | .full > .sdpi-item-child, 501 | .full > .sdpi-item-child > *{ 502 | display: flex; 503 | flex: 1 1 0; 504 | margin-bottom: 4px; 505 | margin-left: 0px; 506 | width: 100%; 507 | 508 | justify-content: space-evenly; 509 | } 510 | 511 | .sdpi-item-group > .sdpi-item > input[type="color"] { 512 | margin-top: 0px; 513 | } 514 | 515 | ::-webkit-calendar-picker-indicator:focus, 516 | input[type=file]::-webkit-file-upload-button:focus, 517 | button:focus, 518 | textarea:focus, 519 | input:focus, 520 | select:focus, 521 | option:focus, 522 | details:focus, 523 | summary:focus, 524 | .custom-select select { 525 | outline: none; 526 | } 527 | 528 | summary { 529 | cursor: default; 530 | -webkit-user-select: none; 531 | } 532 | 533 | .pointer, 534 | summary .pointer { 535 | cursor: pointer; 536 | } 537 | 538 | details.message { 539 | padding: 4px 18px 4px 12px; 540 | } 541 | 542 | details.message summary { 543 | font-size: 10pt; 544 | font-weight: 600; 545 | min-height: 18px; 546 | } 547 | 548 | details.message:first-child { 549 | margin-top: 4px; 550 | margin-left: 0; 551 | padding-left: 106px; 552 | } 553 | 554 | details.message h1 { 555 | text-align: left; 556 | } 557 | 558 | .message > summary::-webkit-details-marker { 559 | display: none; 560 | } 561 | 562 | .info20, 563 | .question, 564 | .caution, 565 | .info { 566 | background-repeat: no-repeat; 567 | background-position: 70px center; 568 | } 569 | 570 | .info20 { 571 | 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,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 Z M10,8 C8.8954305,8 8,8.84275812 8,9.88235294 L8,16.1176471 C8,17.1572419 8.8954305,18 10,18 C11.1045695,18 12,17.1572419 12,16.1176471 L12,9.88235294 C12,8.84275812 11.1045695,8 10,8 Z M10,3 C8.8954305,3 8,3.88165465 8,4.96923077 L8,5.03076923 C8,6.11834535 8.8954305,7 10,7 C11.1045695,7 12,6.11834535 12,5.03076923 L12,4.96923077 C12,3.88165465 11.1045695,3 10,3 Z'/%3E%3C/svg%3E%0A"); 572 | } 573 | 574 | .info { 575 | 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"); 576 | } 577 | 578 | .info2 { 579 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Cpath fill='%23999' d='M7.5,15 C3.35786438,15 0,11.6421356 0,7.5 C0,3.35786438 3.35786438,0 7.5,0 C11.6421356,0 15,3.35786438 15,7.5 C15,11.6421356 11.6421356,15 7.5,15 Z M7.5,2 C6.67157287,2 6,2.66124098 6,3.47692307 L6,3.52307693 C6,4.33875902 6.67157287,5 7.5,5 C8.32842705,5 9,4.33875902 9,3.52307693 L9,3.47692307 C9,2.66124098 8.32842705,2 7.5,2 Z M5,6 L5,7.02155172 L6,7 L6,12 L5,12.0076778 L5,13 L10,13 L10,12 L9,12.0076778 L9,6 L5,6 Z'/%3E%3C/svg%3E%0A"); 580 | } 581 | 582 | .sdpi-more-info { 583 | 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"); 584 | } 585 | .caution { 586 | 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"); 587 | } 588 | 589 | .question { 590 | 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"); 591 | } 592 | 593 | 594 | .sdpi-more-info { 595 | position: fixed; 596 | left: 0px; 597 | right: 0px; 598 | bottom: 0px; 599 | min-height:16px; 600 | padding-right: 16px; 601 | text-align: right; 602 | -webkit-touch-callout: none; 603 | cursor: pointer; 604 | user-select: none; 605 | background-position: right center; 606 | background-repeat: no-repeat; 607 | border-radius: var(--sdpi-borderradius); 608 | text-decoration: none; 609 | color: var(--sdpi-color); 610 | } 611 | 612 | .sdpi-more-info-button { 613 | display: flex; 614 | align-self: right; 615 | margin-left: auto; 616 | position: fixed; 617 | right: 17px; 618 | bottom: 0px; 619 | } 620 | 621 | details a { 622 | background-position: right !important; 623 | min-height: 24px; 624 | display: inline-block; 625 | line-height: 24px; 626 | padding-right: 28px; 627 | } 628 | input:not([type="range"]), 629 | textarea { 630 | -webkit-appearance: none; 631 | background: var(--sdpi-background); 632 | color: var(--sdpi-color); 633 | font-weight: normal; 634 | font-size: 9pt; 635 | border: none; 636 | margin-top: 2px; 637 | margin-bottom: 2px; 638 | } 639 | 640 | textarea + label { 641 | display: flex; 642 | justify-content: flex-end 643 | } 644 | input[type="radio"], 645 | input[type="checkbox"] { 646 | display: none; 647 | } 648 | input[type="radio"] + label, 649 | input[type="checkbox"] + label { 650 | font-size: 9pt; 651 | color: var(--sdpi-color); 652 | font-weight: normal; 653 | margin-right: 8px; 654 | -webkit-user-select: none; 655 | } 656 | 657 | input[type="radio"] + label:after, 658 | input[type="checkbox"] + label:after { 659 | content: " " !important; 660 | } 661 | 662 | .sdpi-item[type="radio"] > .sdpi-item-value, 663 | .sdpi-item[type="checkbox"] > .sdpi-item-value { 664 | padding-top: 2px; 665 | } 666 | 667 | .sdpi-item[type="checkbox"] > .sdpi-item-value > * { 668 | margin-top: 4px; 669 | } 670 | 671 | .sdpi-item[type="checkbox"] .sdpi-item-child, 672 | .sdpi-item[type="radio"] .sdpi-item-child { 673 | display: inline-block; 674 | } 675 | 676 | .sdpi-item[type="range"] .sdpi-item-value, 677 | .sdpi-item[type="meter"] .sdpi-item-child, 678 | .sdpi-item[type="progress"] .sdpi-item-child { 679 | display: flex; 680 | } 681 | 682 | .sdpi-item[type="range"] .sdpi-item-value { 683 | min-height: 26px; 684 | } 685 | 686 | .sdpi-item[type="range"] .sdpi-item-value span, 687 | .sdpi-item[type="meter"] .sdpi-item-child span, 688 | .sdpi-item[type="progress"] .sdpi-item-child span { 689 | margin-top: -2px; 690 | min-width: 8px; 691 | text-align: right; 692 | user-select: none; 693 | cursor: pointer; 694 | } 695 | 696 | .sdpi-item[type="range"] .sdpi-item-value span { 697 | margin-top: 7px; 698 | text-align: right; 699 | } 700 | 701 | span + input[type="range"] { 702 | display: flex; 703 | max-width: 168px; 704 | 705 | } 706 | 707 | .sdpi-item[type="range"] .sdpi-item-value span:first-child, 708 | .sdpi-item[type="meter"] .sdpi-item-child span:first-child, 709 | .sdpi-item[type="progress"] .sdpi-item-child span:first-child { 710 | margin-right: 4px; 711 | } 712 | 713 | .sdpi-item[type="range"] .sdpi-item-value span:last-child, 714 | .sdpi-item[type="meter"] .sdpi-item-child span:last-child, 715 | .sdpi-item[type="progress"] .sdpi-item-child span:last-child { 716 | margin-left: 4px; 717 | } 718 | 719 | .reverse { 720 | transform: rotate(180deg); 721 | } 722 | 723 | .sdpi-item[type="meter"] .sdpi-item-child meter + span:last-child { 724 | margin-left: -10px; 725 | } 726 | 727 | .sdpi-item[type="progress"] .sdpi-item-child meter + span:last-child { 728 | margin-left: -14px; 729 | } 730 | 731 | .sdpi-item[type="radio"] > .sdpi-item-value > * { 732 | margin-top: 2px; 733 | } 734 | 735 | details { 736 | padding: 8px 18px 8px 12px; 737 | min-width: 86px; 738 | } 739 | 740 | details > h4 { 741 | border-bottom: 1px solid var(--sdpi-bordercolor); 742 | } 743 | 744 | legend { 745 | display: none; 746 | } 747 | .sdpi-item-value > textarea { 748 | padding: 0px; 749 | width: 227px; 750 | margin-left: 1px; 751 | } 752 | 753 | input[type="radio"] + label span, 754 | input[type="checkbox"] + label span { 755 | display: inline-block; 756 | width: 16px; 757 | height: 16px; 758 | margin: 2px 4px 2px 0; 759 | border-radius: 3px; 760 | vertical-align: middle; 761 | background: var(--sdpi-background); 762 | cursor: pointer; 763 | border: 1px solid rgb(0,0,0,.2); 764 | } 765 | 766 | input[type="radio"] + label span { 767 | border-radius: 100%; 768 | } 769 | 770 | input[type="radio"]:checked + label span, 771 | input[type="checkbox"]:checked + label span { 772 | background-color: #77f; 773 | background-image: url(check.svg); 774 | background-repeat: no-repeat; 775 | background-position: center center; 776 | border: 1px solid rgb(0,0,0,.4); 777 | } 778 | 779 | input[type="radio"]:active:checked + label span, 780 | input[type="radio"]:active + label span, 781 | input[type="checkbox"]:active:checked + label span, 782 | input[type="checkbox"]:active + label span { 783 | background-color: #303030; 784 | } 785 | 786 | input[type="radio"]:checked + label span { 787 | background-image: url(rcheck.svg); 788 | } 789 | 790 | 791 | /* 792 | input[type="radio"] + label span { 793 | background: url(buttons.png) -38px top no-repeat; 794 | } 795 | 796 | input[type="radio"]:checked + label span { 797 | background: url(buttons.png) -57px top no-repeat; 798 | } 799 | */ 800 | 801 | input[type="range"] { 802 | width: var(--sdpi-width); 803 | height: 30px; 804 | overflow: hidden; 805 | cursor: pointer; 806 | background: transparent !important; 807 | } 808 | 809 | .sdpi-item > input[type="range"] { 810 | margin-left: 8px; 811 | max-width: var(--sdpi-width); 812 | width: var(--sdpi-width); 813 | padding: 0px; 814 | } 815 | 816 | /* 817 | input[type="range"], 818 | input[type="range"]::-webkit-slider-runnable-track, 819 | input[type="range"]::-webkit-slider-thumb { 820 | -webkit-appearance: none; 821 | } 822 | */ 823 | 824 | input[type="range"]::-webkit-slider-runnable-track { 825 | height: 5px; 826 | background: #979797; 827 | border-radius: 3px; 828 | padding:0px !important; 829 | border: 1px solid var(--sdpi-background); 830 | } 831 | 832 | input[type="range"]::-webkit-slider-thumb { 833 | position: relative; 834 | -webkit-appearance: none; 835 | background-color: var(--sdpi-color); 836 | width: 12px; 837 | height: 12px; 838 | border-radius: 20px; 839 | margin-top: -5px; 840 | border: none; 841 | 842 | } 843 | input[type="range" i]{ 844 | margin: 0; 845 | } 846 | 847 | input[type="range"]::-webkit-slider-thumb::before { 848 | position: absolute; 849 | content: ""; 850 | height: 5px; /* equal to height of runnable track or 1 less */ 851 | width: 500px; /* make this bigger than the widest range input element */ 852 | left: -502px; /* this should be -2px - width */ 853 | top: 8px; /* don't change this */ 854 | background: #77f; 855 | } 856 | 857 | input[type="color"] { 858 | min-width: 32px; 859 | min-height: 32px; 860 | width: 32px; 861 | height: 32px; 862 | padding: 0; 863 | background-color: var(--sdpi-bgcolor); 864 | flex: none; 865 | } 866 | 867 | ::-webkit-color-swatch { 868 | min-width: 24px; 869 | } 870 | 871 | textarea { 872 | height: 3em; 873 | word-break: break-word; 874 | line-height: 1.5em; 875 | } 876 | 877 | .textarea { 878 | padding: 0px !important; 879 | } 880 | 881 | textarea { 882 | width: 221px; /*98%;*/ 883 | height: 96%; 884 | min-height: 6em; 885 | resize: none; 886 | border-radius: var(--sdpi-borderradius); 887 | } 888 | 889 | /* CAROUSEL */ 890 | 891 | .sdpi-item[type="carousel"]{ 892 | 893 | } 894 | 895 | .sdpi-item.card-carousel-wrapper, 896 | .sdpi-item > .card-carousel-wrapper { 897 | padding: 0; 898 | } 899 | 900 | 901 | .card-carousel-wrapper { 902 | display: flex; 903 | align-items: center; 904 | justify-content: center; 905 | margin: 12px auto; 906 | color: #666a73; 907 | } 908 | 909 | .card-carousel { 910 | display: flex; 911 | justify-content: center; 912 | width: 278px; 913 | } 914 | .card-carousel--overflow-container { 915 | overflow: hidden; 916 | } 917 | .card-carousel--nav__left, 918 | .card-carousel--nav__right { 919 | /* display: inline-block; */ 920 | width: 12px; 921 | height: 12px; 922 | border-top: 2px solid #42b883; 923 | border-right: 2px solid #42b883; 924 | cursor: pointer; 925 | margin: 0 4px; 926 | transition: transform 150ms linear; 927 | } 928 | .card-carousel--nav__left[disabled], 929 | .card-carousel--nav__right[disabled] { 930 | opacity: 0.2; 931 | border-color: black; 932 | } 933 | .card-carousel--nav__left { 934 | transform: rotate(-135deg); 935 | } 936 | .card-carousel--nav__left:active { 937 | transform: rotate(-135deg) scale(0.85); 938 | } 939 | .card-carousel--nav__right { 940 | transform: rotate(45deg); 941 | } 942 | .card-carousel--nav__right:active { 943 | transform: rotate(45deg) scale(0.85); 944 | } 945 | .card-carousel-cards { 946 | display: flex; 947 | transition: transform 150ms ease-out; 948 | transform: translatex(0px); 949 | } 950 | .card-carousel-cards .card-carousel--card { 951 | margin: 0 5px; 952 | cursor: pointer; 953 | /* box-shadow: 0 4px 15px 0 rgba(40, 44, 53, 0.06), 0 2px 2px 0 rgba(40, 44, 53, 0.08); */ 954 | background-color: #fff; 955 | border-radius: 4px; 956 | z-index: 3; 957 | } 958 | .xxcard-carousel-cards .card-carousel--card:first-child { 959 | margin-left: 0; 960 | } 961 | .xxcard-carousel-cards .card-carousel--card:last-child { 962 | margin-right: 0; 963 | } 964 | .card-carousel-cards .card-carousel--card img { 965 | vertical-align: bottom; 966 | border-top-left-radius: 4px; 967 | border-top-right-radius: 4px; 968 | transition: opacity 150ms linear; 969 | width: 60px; 970 | } 971 | .card-carousel-cards .card-carousel--card img:hover { 972 | opacity: 0.5; 973 | } 974 | .card-carousel-cards .card-carousel--card--footer { 975 | border-top: 0; 976 | max-width: 80px; 977 | overflow: hidden; 978 | display: flex; 979 | height: 100%; 980 | flex-direction: column; 981 | } 982 | .card-carousel-cards .card-carousel--card--footer p { 983 | padding: 3px 0; 984 | margin: 0; 985 | margin-bottom: 2px; 986 | font-size: 15px; 987 | font-weight: 500; 988 | color: #2c3e50; 989 | } 990 | .card-carousel-cards .card-carousel--card--footer p:nth-of-type(2) { 991 | font-size: 12px; 992 | font-weight: 300; 993 | padding: 6px; 994 | color: #666a73; 995 | } 996 | 997 | 998 | h1 { 999 | font-size: 1.3em; 1000 | font-weight: 500; 1001 | text-align: center; 1002 | margin-bottom: 12px; 1003 | } 1004 | 1005 | ::-webkit-datetime-edit { 1006 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 1007 | background: url(elg_calendar_inv.svg) no-repeat left center; 1008 | padding-right: 1em; 1009 | padding-left: 25px; 1010 | background-position: 4px 0px; 1011 | } 1012 | ::-webkit-datetime-edit-fields-wrapper { 1013 | 1014 | } 1015 | ::-webkit-datetime-edit-text { padding: 0 0.3em; } 1016 | ::-webkit-datetime-edit-month-field { } 1017 | ::-webkit-datetime-edit-day-field {} 1018 | ::-webkit-datetime-edit-year-field {} 1019 | ::-webkit-inner-spin-button { 1020 | 1021 | /* display: none; */ 1022 | } 1023 | ::-webkit-calendar-picker-indicator { 1024 | background: transparent; 1025 | font-size: 17px; 1026 | } 1027 | 1028 | ::-webkit-calendar-picker-indicator:focus { 1029 | background-color: rgba(0,0,0,0.2); 1030 | } 1031 | 1032 | input[type="date"] { 1033 | -webkit-align-items: center; 1034 | display: -webkit-inline-flex; 1035 | font-family: monospace; 1036 | overflow: hidden; 1037 | padding: 0; 1038 | -webkit-padding-start: 1px; 1039 | } 1040 | 1041 | input::-webkit-datetime-edit { 1042 | -webkit-flex: 1; 1043 | -webkit-user-modify: read-only !important; 1044 | display: inline-block; 1045 | min-width: 0; 1046 | overflow: hidden; 1047 | } 1048 | 1049 | /* 1050 | input::-webkit-datetime-edit-fields-wrapper { 1051 | -webkit-user-modify: read-only !important; 1052 | display: inline-block; 1053 | padding: 1px 0; 1054 | white-space: pre; 1055 | 1056 | } 1057 | */ 1058 | 1059 | /* 1060 | input[type="date"] { 1061 | background-color: red; 1062 | outline: none; 1063 | } 1064 | 1065 | input[type="date"]::-webkit-clear-button { 1066 | font-size: 18px; 1067 | height: 30px; 1068 | position: relative; 1069 | } 1070 | 1071 | input[type="date"]::-webkit-inner-spin-button { 1072 | height: 28px; 1073 | } 1074 | 1075 | input[type="date"]::-webkit-calendar-picker-indicator { 1076 | font-size: 15px; 1077 | } */ 1078 | 1079 | input[type="file"] { 1080 | opacity: 0; 1081 | display: none; 1082 | } 1083 | 1084 | .sdpi-item > input[type="file"] { 1085 | opacity: 1; 1086 | display: flex; 1087 | } 1088 | 1089 | input[type="file"] + span { 1090 | display: flex; 1091 | flex: 0 1 auto; 1092 | background-color: #0000ff50; 1093 | } 1094 | 1095 | label.sdpi-file-label { 1096 | cursor: pointer; 1097 | user-select: none; 1098 | display: inline-block; 1099 | min-height: 21px !important; 1100 | height: 21px !important; 1101 | line-height: 20px; 1102 | padding: 0px 4px; 1103 | margin: auto; 1104 | margin-right: 0px; 1105 | float:right; 1106 | } 1107 | 1108 | .sdpi-file-label > label:active, 1109 | .sdpi-file-label.file:active, 1110 | label.sdpi-file-label:active, 1111 | label.sdpi-file-info:active, 1112 | input[type="file"]::-webkit-file-upload-button:active, 1113 | button:active { 1114 | background-color: var(--sdpi-color); 1115 | color:#303030; 1116 | } 1117 | 1118 | 1119 | input:required:invalid, input:focus:invalid { 1120 | background: var(--sdpi-background) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIHZpZXdCb3g9IjAgMCA5IDkiPgogICAgPHBhdGggZmlsbD0iI0Q4RDhEOCIgZD0iTTQuNSwwIEM2Ljk4NTI4MTM3LC00LjU2NTM4NzgyZS0xNiA5LDIuMDE0NzE4NjMgOSw0LjUgQzksNi45ODUyODEzNyA2Ljk4NTI4MTM3LDkgNC41LDkgQzIuMDE0NzE4NjMsOSAzLjA0MzU5MTg4ZS0xNiw2Ljk4NTI4MTM3IDAsNC41IEMtMy4wNDM1OTE4OGUtMTYsMi4wMTQ3MTg2MyAyLjAxNDcxODYzLDQuNTY1Mzg3ODJlLTE2IDQuNSwwIFogTTQsMSBMNCw2IEw1LDYgTDUsMSBMNCwxIFogTTQuNSw4IEM0Ljc3NjE0MjM3LDggNSw3Ljc3NjE0MjM3IDUsNy41IEM1LDcuMjIzODU3NjMgNC43NzYxNDIzNyw3IDQuNSw3IEM0LjIyMzg1NzYzLDcgNCw3LjIyMzg1NzYzIDQsNy41IEM0LDcuNzc2MTQyMzcgNC4yMjM4NTc2Myw4IDQuNSw4IFoiLz4KICA8L3N2Zz4) no-repeat 98% center; 1121 | } 1122 | 1123 | input:required:valid { 1124 | background: var(--sdpi-background) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIHZpZXdCb3g9IjAgMCA5IDkiPjxwb2x5Z29uIGZpbGw9IiNEOEQ4RDgiIHBvaW50cz0iNS4yIDEgNi4yIDEgNi4yIDcgMy4yIDcgMy4yIDYgNS4yIDYiIHRyYW5zZm9ybT0icm90YXRlKDQwIDQuNjc3IDQpIi8+PC9zdmc+) no-repeat 98% center; 1125 | } 1126 | 1127 | .tooltip, 1128 | :tooltip, 1129 | :title { 1130 | color: yellow; 1131 | } 1132 | 1133 | [title]:hover { 1134 | display: flex; 1135 | align-items: center; 1136 | justify-content: center; 1137 | } 1138 | 1139 | [title]:hover::after { 1140 | content: ''; 1141 | position: absolute; 1142 | bottom: -1000px; 1143 | left: 8px; 1144 | display: none; 1145 | color: #fff; 1146 | border: 8px solid transparent; 1147 | border-bottom: 8px solid #000; 1148 | } 1149 | [title]:hover::before { 1150 | content: attr(title); 1151 | display: flex; 1152 | justify-content: center; 1153 | align-self: center; 1154 | padding: 6px 12px; 1155 | border-radius: 5px; 1156 | background: rgba(0,0,0,0.8); 1157 | color: var(--sdpi-color); 1158 | font-size: 9pt; 1159 | font-family: sans-serif; 1160 | opacity: 1; 1161 | position: absolute; 1162 | height: auto; 1163 | /* width: 50%; 1164 | left: 35%; */ 1165 | text-align: center; 1166 | bottom: 2px; 1167 | z-index: 100; 1168 | box-shadow: 0px 3px 6px rgba(0, 0, 0, .5); 1169 | /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */ 1170 | } 1171 | 1172 | .sdpi-item-group.file { 1173 | width: 232px; 1174 | display: flex; 1175 | align-items: center; 1176 | } 1177 | 1178 | .sdpi-file-info { 1179 | overflow-wrap: break-word; 1180 | word-wrap: break-word; 1181 | hyphens: auto; 1182 | 1183 | min-width: 132px; 1184 | max-width: 144px; 1185 | max-height: 32px; 1186 | margin-top: 0px; 1187 | margin-left: 5px; 1188 | display: inline-block; 1189 | overflow: hidden; 1190 | padding: 6px 4px; 1191 | background-color: var(--sdpi-background); 1192 | } 1193 | 1194 | 1195 | ::-webkit-scrollbar { 1196 | width: 8px; 1197 | } 1198 | 1199 | ::-webkit-scrollbar-track { 1200 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 1201 | } 1202 | 1203 | ::-webkit-scrollbar-thumb { 1204 | background-color: #999999; 1205 | outline: 1px solid slategrey; 1206 | border-radius: 8px; 1207 | } 1208 | 1209 | a { 1210 | color: #7397d2; 1211 | } 1212 | 1213 | .testcontainer { 1214 | display: flex; 1215 | background-color: #0000ff20; 1216 | max-width: 400px; 1217 | height: 200px; 1218 | align-content: space-evenly; 1219 | } 1220 | 1221 | input[type=range] { 1222 | -webkit-appearance: none; 1223 | /* background-color: green; */ 1224 | height:6px; 1225 | margin-top: 12px; 1226 | z-index: 0; 1227 | overflow: visible; 1228 | } 1229 | 1230 | /* 1231 | input[type="range"]::-webkit-slider-thumb { 1232 | -webkit-appearance: none; 1233 | background-color: var(--sdpi-color); 1234 | width: 12px; 1235 | height: 12px; 1236 | border-radius: 20px; 1237 | margin-top: -6px; 1238 | border: none; 1239 | } */ 1240 | 1241 | :-webkit-slider-thumb { 1242 | -webkit-appearance: none; 1243 | background-color: var(--sdpi-color); 1244 | width: 16px; 1245 | height: 16px; 1246 | border-radius: 20px; 1247 | margin-top: -6px; 1248 | border: 1px solid #999999; 1249 | } 1250 | 1251 | .sdpi-item[type="range"] .sdpi-item-group { 1252 | display: flex; 1253 | flex-direction: column; 1254 | } 1255 | 1256 | .xxsdpi-item[type="range"] .sdpi-item-group input { 1257 | max-width: 204px; 1258 | } 1259 | 1260 | .sdpi-item[type="range"] .sdpi-item-group span { 1261 | margin-left: 0px !important; 1262 | } 1263 | 1264 | .sdpi-item[type="range"] .sdpi-item-group > .sdpi-item-child { 1265 | display: flex; 1266 | flex-direction: row; 1267 | } 1268 | 1269 | :disabled { 1270 | color: #993333; 1271 | } 1272 | 1273 | select, 1274 | select option { 1275 | color: var(--sdpi-color); 1276 | } 1277 | 1278 | select.disabled, 1279 | select option:disabled { 1280 | color: #fd9494; 1281 | font-style: italic; 1282 | } 1283 | 1284 | .runningAppsContainer { 1285 | display: none; 1286 | } 1287 | 1288 | /* debug 1289 | div { 1290 | background-color: rgba(64,128,255,0.2); 1291 | } 1292 | */ 1293 | 1294 | .min80 > .sdpi-item-child { 1295 | min-width: 80px; 1296 | } 1297 | 1298 | .min100 > .sdpi-item-child { 1299 | min-width: 100px; 1300 | } 1301 | 1302 | .min120 > .sdpi-item-child { 1303 | min-width: 120px; 1304 | } 1305 | 1306 | .min140 > .sdpi-item-child { 1307 | min-width: 140px; 1308 | } 1309 | 1310 | .min160 > .sdpi-item-child { 1311 | min-width: 160px; 1312 | } 1313 | 1314 | .min200 > .sdpi-item-child { 1315 | min-width: 200px; 1316 | } 1317 | 1318 | .max40 { 1319 | flex-basis: 40%; 1320 | flex-grow: 0; 1321 | } 1322 | 1323 | .max30 { 1324 | flex-basis: 30%; 1325 | flex-grow: 0; 1326 | } 1327 | 1328 | .max20 { 1329 | flex-basis: 20%; 1330 | flex-grow: 0; 1331 | } 1332 | 1333 | .up20 { 1334 | margin-top: -20px; 1335 | } 1336 | 1337 | .alignCenter { 1338 | align-items: center; 1339 | } 1340 | 1341 | .alignTop { 1342 | align-items: flex-start; 1343 | } 1344 | 1345 | .alignBaseline { 1346 | align-items: baseline; 1347 | } 1348 | 1349 | .noMargins, 1350 | .noMargins *, 1351 | .noInnerMargins * { 1352 | margin: 0; 1353 | padding: 0; 1354 | } 1355 | 1356 | 1357 | /** 1358 | input[type=range].vVertical { 1359 | -webkit-appearance: none; 1360 | background-color: green; 1361 | margin-left: -60px; 1362 | width: 100px; 1363 | height:6px; 1364 | margin-top: 0px; 1365 | transform:rotate(90deg); 1366 | z-index: 0; 1367 | overflow: visible; 1368 | } 1369 | 1370 | input[type=range].vHorizon { 1371 | -webkit-appearance: none; 1372 | background-color: pink; 1373 | height: 10px; 1374 | width:200px; 1375 | 1376 | } 1377 | 1378 | .test2 { 1379 | background-color: #00ff0020; 1380 | display: flex; 1381 | } 1382 | 1383 | 1384 | .vertical.sdpi-item[type="range"] .sdpi-item-value { 1385 | display: block; 1386 | } 1387 | 1388 | 1389 | .vertical.sdpi-item:first-child, 1390 | .vertical { 1391 | margin-top: 12px; 1392 | margin-bottom: 16px; 1393 | } 1394 | .vertical > .sdpi-item-value { 1395 | margin-right: 16px; 1396 | } 1397 | 1398 | .vertical .sdpi-item-group { 1399 | width: 100%; 1400 | display: flex; 1401 | justify-content: space-evenly; 1402 | } 1403 | 1404 | .vertical input[type=range] { 1405 | height: 100px; 1406 | width: 21px; 1407 | -webkit-appearance: slider-vertical; 1408 | display: flex; 1409 | flex-flow: column; 1410 | } 1411 | 1412 | .vertical input[type="range"]::-webkit-slider-runnable-track { 1413 | height: auto; 1414 | width: 5px; 1415 | } 1416 | 1417 | .vertical input[type="range"]::-webkit-slider-thumb { 1418 | margin-top: 0px; 1419 | margin-left: -6px; 1420 | } 1421 | 1422 | .vertical .sdpi-item-value { 1423 | flex-flow: column; 1424 | align-items: flex-start; 1425 | } 1426 | 1427 | .vertical.sdpi-item[type="range"] .sdpi-item-value { 1428 | align-items: center; 1429 | margin-right: 16px; 1430 | text-align: center; 1431 | } 1432 | 1433 | .vertical.sdpi-item[type="range"] .sdpi-item-value span, 1434 | .vertical input[type="range"] .sdpi-item-value span { 1435 | text-align: center; 1436 | margin: 4px 0px; 1437 | } 1438 | */ 1439 | 1440 | /* 1441 | .file { 1442 | box-sizing: border-box; 1443 | display: block; 1444 | overflow: hidden; 1445 | padding: 10px; 1446 | position: relative; 1447 | text-indent: 100%; 1448 | white-space: nowrap; 1449 | height: 190px; 1450 | width: 160px; 1451 | } 1452 | .file::before { 1453 | content: ""; 1454 | display: block; 1455 | position: absolute; 1456 | top: 10px; 1457 | left: 10px; 1458 | height: 170px; 1459 | width: 140px; 1460 | } 1461 | .file::after { 1462 | content: ""; 1463 | height: 90px; 1464 | width: 90px; 1465 | position: absolute; 1466 | right: 0; 1467 | bottom: 0; 1468 | overflow: visible; 1469 | } 1470 | 1471 | .list--files { 1472 | display: flex; 1473 | flex-wrap: wrap; 1474 | justify-content: center; 1475 | margin: auto; 1476 | padding: 30px 0; 1477 | width: 630px; 1478 | } 1479 | .list--files > li { 1480 | margin: 0; 1481 | padding: 15px; 1482 | } 1483 | 1484 | .type-document::before { 1485 | background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxNDBweCIgaGVpZ2h0PSIxNzBweCIgdmlld0JveD0iMCAwIDE0MCAxNzAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0E3QTlBQyIgZD0iTTAsMHYxNzBoMTQwVjBIMHogTTEzMCwxNjBIMTBWMTBoMTIwVjE2MHogTTExMCw0MEgzMFYzMGg4MFY0MHogTTExMCw2MEgzMFY1MGg4MFY2MHogTTExMCw4MEgzMFY3MGg4MFY4MHoNCiAgIE0xMTAsMTAwSDMwVjkwaDgwVjEwMHogTTExMCwxMjBIMzB2LTEwaDgwVjEyMHogTTkwLDE0MEgzMHYtMTBoNjBWMTQweiIvPg0KPC9zdmc+); 1486 | } 1487 | 1488 | .type-image { 1489 | height: 160px; 1490 | } 1491 | .type-image::before { 1492 | background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczphPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlU1ZHVmlld2VyRXh0ZW5zaW9ucy8zLjAvIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxNDBweCIgaGVpZ2h0PSIxNDBweCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE0MCAxNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQogIDxwYXRoIGZpbGw9IiNBN0E5QUMiIGQ9Ik0wLDB2MTQwaDE0MFYwSDB6IE0xMzAsMTMwSDEwVjEwaDEyMFYxMzB6Ii8+DQogIDxwb2x5Z29uIGZpbGw9IiNFNkU3RTgiIHBvaW50cz0iOTAsMTEwIDQwLDQwIDEwLDgwIDEwLDEzMCA5MCwxMzAgICIvPg0KICA8cG9seWdvbiBmaWxsPSIjRDFEM0Q0IiBwb2ludHM9IjEwLDEzMCA1MCw5MCA2MCwxMDAgMTAwLDYwIDEzMCwxMzAgICIvPg0KPC9nPg0KPC9zdmc+); 1493 | height: 140px; 1494 | } 1495 | 1496 | .state-synced::after { 1497 | background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczphPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlU1ZHVmlld2VyRXh0ZW5zaW9ucy8zLjAvIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5MHB4IiBoZWlnaHQ9IjkwcHgiIHZpZXdCb3g9IjAgMCA5MCA5MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTAgOTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQogIDxjaXJjbGUgZmlsbD0iIzAwQTY1MSIgY3g9IjQ1IiBjeT0iNDUiIHI9IjQ1Ii8+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yMCw0NUwyMCw0NWMtMi44LDIuOC0yLjgsNy4yLDAsMTBsMTAuMSwxMC4xYzIuNywyLjcsNy4yLDIuNyw5LjksMEw3MCwzNWMyLjgtMi44LDIuOC03LjIsMC0xMGwwLDANCiAgICBjLTIuOC0yLjgtNy4yLTIuOC0xMCwwTDM1LDUwbC01LTVDMjcuMiw0Mi4yLDIyLjgsNDIuMiwyMCw0NXoiLz4NCjwvZz4NCjwvc3ZnPg==); 1498 | } 1499 | 1500 | .state-deleted::after { 1501 | background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczphPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlU1ZHVmlld2VyRXh0ZW5zaW9ucy8zLjAvIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5MHB4IiBoZWlnaHQ9IjkwcHgiIHZpZXdCb3g9IjAgMCA5MCA5MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTAgOTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQogIDxjaXJjbGUgZmlsbD0iI0VEMUMyNCIgY3g9IjQ1IiBjeT0iNDUiIHI9IjQ1Ii8+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik02NSwyNUw2NSwyNWMtMi44LTIuOC03LjItMi44LTEwLDBMNDUsMzVMMzUsMjVjLTIuOC0yLjgtNy4yLTIuOC0xMCwwbDAsMGMtMi44LDIuOC0yLjgsNy4yLDAsMTBsMTAsMTANCiAgICBMMjUsNTVjLTIuOCwyLjgtMi44LDcuMiwwLDEwbDAsMGMyLjgsMi44LDcuMiwyLjgsMTAsMGwxMC0xMGwxMCwxMGMyLjgsMi44LDcuMiwyLjgsMTAsMGwwLDBjMi44LTIuOCwyLjgtNy4yLDAtMTBMNTUsNDVsMTAtMTANCiAgICBDNjcuOCwzMi4yLDY3LjgsMjcuOCw2NSwyNXoiLz4NCjwvZz4NCjwvc3ZnPg==); 1502 | } 1503 | .state-deleted::before { 1504 | opacity: .25; 1505 | } 1506 | 1507 | .state-locked::after { 1508 | background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczphPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlU1ZHVmlld2VyRXh0ZW5zaW9ucy8zLjAvIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5MHB4IiBoZWlnaHQ9IjkwcHgiIHZpZXdCb3g9IjAgMCA5MCA5MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTAgOTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQogIDxjaXJjbGUgZmlsbD0iIzU4NTk1QiIgY3g9IjQ1IiBjeT0iNDUiIHI9IjQ1Ii8+DQogIDxyZWN0IHg9IjIwIiB5PSI0MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjMwIi8+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0zMi41LDQ2LjVjLTIuOCwwLTUtMi4yLTUtNVYyOWMwLTkuNiw3LjktMTcuNSwxNy41LTE3LjVTNjIuNSwxOS40LDYyLjUsMjljMCwyLjgtMi4yLDUtNSw1cy01LTIuMi01LTUNCiAgICBjMC00LjEtMy40LTcuNS03LjUtNy41cy03LjUsMy40LTcuNSw3LjV2MTIuNUMzNy41LDQ0LjMsMzUuMyw0Ni41LDMyLjUsNDYuNXoiLz4NCjwvZz4NCjwvc3ZnPg==); 1509 | } 1510 | 1511 | 1512 | 1513 | html { 1514 | --fheight: 95px; 1515 | --fwidth: 80px; 1516 | --fspacing: 5px; 1517 | --ftotalwidth: 315px; 1518 | --bgsize: 50%; 1519 | --bgsize2: cover; 1520 | --bgsize3: contain; 1521 | } 1522 | 1523 | ul { 1524 | list-style: none; 1525 | } 1526 | 1527 | 1528 | .file { 1529 | height: var(--fheight); 1530 | width: var(--fwidth); 1531 | } 1532 | .file::before { 1533 | content: ""; 1534 | display: block; 1535 | position: absolute; 1536 | top: var(--fspacing); 1537 | left: var(--fspacing); 1538 | height: calc(var(--fheight) - var(--fspacing)*2); 1539 | width: calc(var(--fwidth) - var(--fspacing)*2); 1540 | } 1541 | .file::after { 1542 | content: ""; 1543 | height: calc(var(--fheight)/2); 1544 | width: calc(var(--fheight)/2); 1545 | position: absolute; 1546 | right: 0; 1547 | bottom: 0; 1548 | overflow: visible; 1549 | } 1550 | 1551 | .list--files { 1552 | display: flex; 1553 | flex-wrap: wrap; 1554 | justify-content: center; 1555 | margin: auto; 1556 | padding: calc(var(--fspacing)*3) 0; 1557 | width: var(--ftotalwidth); 1558 | } 1559 | .list--files > li { 1560 | margin: 0; 1561 | padding: var(--fspacing); 1562 | } 1563 | 1564 | .type-document::before { 1565 | background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxNDBweCIgaGVpZ2h0PSIxNzBweCIgdmlld0JveD0iMCAwIDE0MCAxNzAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0E3QTlBQyIgZD0iTTAsMHYxNzBoMTQwVjBIMHogTTEzMCwxNjBIMTBWMTBoMTIwVjE2MHogTTExMCw0MEgzMFYzMGg4MFY0MHogTTExMCw2MEgzMFY1MGg4MFY2MHogTTExMCw4MEgzMFY3MGg4MFY4MHoNCiAgIE0xMTAsMTAwSDMwVjkwaDgwVjEwMHogTTExMCwxMjBIMzB2LTEwaDgwVjEyMHogTTkwLDE0MEgzMHYtMTBoNjBWMTQweiIvPg0KPC9zdmc+); 1566 | height: calc(var(--fheight) - var(--fspacing)*2); 1567 | background-size: var(--bgsize2); 1568 | background-repeat: no-repeat; 1569 | } 1570 | 1571 | .type-image { 1572 | height: var(--fwidth); 1573 | height: calc(var(--fheight) - var(--fspacing)*2); 1574 | } 1575 | .type-image::before { 1576 | background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczphPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlU1ZHVmlld2VyRXh0ZW5zaW9ucy8zLjAvIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxNDBweCIgaGVpZ2h0PSIxNDBweCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE0MCAxNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQogIDxwYXRoIGZpbGw9IiNBN0E5QUMiIGQ9Ik0wLDB2MTQwaDE0MFYwSDB6IE0xMzAsMTMwSDEwVjEwaDEyMFYxMzB6Ii8+DQogIDxwb2x5Z29uIGZpbGw9IiNFNkU3RTgiIHBvaW50cz0iOTAsMTEwIDQwLDQwIDEwLDgwIDEwLDEzMCA5MCwxMzAgICIvPg0KICA8cG9seWdvbiBmaWxsPSIjRDFEM0Q0IiBwb2ludHM9IjEwLDEzMCA1MCw5MCA2MCwxMDAgMTAwLDYwIDEzMCwxMzAgICIvPg0KPC9nPg0KPC9zdmc+); 1577 | height: calc(var(--fheight) - var(--fspacing)*2); 1578 | background-size: var(--bgsize3); 1579 | background-repeat: no-repeat; 1580 | } 1581 | 1582 | .state-synced::after { 1583 | background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczphPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlU1ZHVmlld2VyRXh0ZW5zaW9ucy8zLjAvIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5MHB4IiBoZWlnaHQ9IjkwcHgiIHZpZXdCb3g9IjAgMCA5MCA5MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTAgOTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQogIDxjaXJjbGUgZmlsbD0iIzAwQTY1MSIgY3g9IjQ1IiBjeT0iNDUiIHI9IjQ1Ii8+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yMCw0NUwyMCw0NWMtMi44LDIuOC0yLjgsNy4yLDAsMTBsMTAuMSwxMC4xYzIuNywyLjcsNy4yLDIuNyw5LjksMEw3MCwzNWMyLjgtMi44LDIuOC03LjIsMC0xMGwwLDANCiAgICBjLTIuOC0yLjgtNy4yLTIuOC0xMCwwTDM1LDUwbC01LTVDMjcuMiw0Mi4yLDIyLjgsNDIuMiwyMCw0NXoiLz4NCjwvZz4NCjwvc3ZnPg==); 1584 | background-size: var(--bgsize); 1585 | background-repeat: no-repeat; 1586 | background-position: bottom right; 1587 | } 1588 | 1589 | .state-deleted::after { 1590 | background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczphPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlU1ZHVmlld2VyRXh0ZW5zaW9ucy8zLjAvIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5MHB4IiBoZWlnaHQ9IjkwcHgiIHZpZXdCb3g9IjAgMCA5MCA5MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTAgOTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQogIDxjaXJjbGUgZmlsbD0iI0VEMUMyNCIgY3g9IjQ1IiBjeT0iNDUiIHI9IjQ1Ii8+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik02NSwyNUw2NSwyNWMtMi44LTIuOC03LjItMi44LTEwLDBMNDUsMzVMMzUsMjVjLTIuOC0yLjgtNy4yLTIuOC0xMCwwbDAsMGMtMi44LDIuOC0yLjgsNy4yLDAsMTBsMTAsMTANCiAgICBMMjUsNTVjLTIuOCwyLjgtMi44LDcuMiwwLDEwbDAsMGMyLjgsMi44LDcuMiwyLjgsMTAsMGwxMC0xMGwxMCwxMGMyLjgsMi44LDcuMiwyLjgsMTAsMGwwLDBjMi44LTIuOCwyLjgtNy4yLDAtMTBMNTUsNDVsMTAtMTANCiAgICBDNjcuOCwzMi4yLDY3LjgsMjcuOCw2NSwyNXoiLz4NCjwvZz4NCjwvc3ZnPg==); 1591 | background-size: var(--bgsize); 1592 | background-repeat: no-repeat; 1593 | background-position: bottom right; 1594 | } 1595 | .state-deleted::before { 1596 | opacity: .25; 1597 | } 1598 | 1599 | .state-locked::after { 1600 | background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczphPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlU1ZHVmlld2VyRXh0ZW5zaW9ucy8zLjAvIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5MHB4IiBoZWlnaHQ9IjkwcHgiIHZpZXdCb3g9IjAgMCA5MCA5MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTAgOTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQogIDxjaXJjbGUgZmlsbD0iIzU4NTk1QiIgY3g9IjQ1IiBjeT0iNDUiIHI9IjQ1Ii8+DQogIDxyZWN0IHg9IjIwIiB5PSI0MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjMwIi8+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0zMi41LDQ2LjVjLTIuOCwwLTUtMi4yLTUtNVYyOWMwLTkuNiw3LjktMTcuNSwxNy41LTE3LjVTNjIuNSwxOS40LDYyLjUsMjljMCwyLjgtMi4yLDUtNSw1cy01LTIuMi01LTUNCiAgICBjMC00LjEtMy40LTcuNS03LjUtNy41cy03LjUsMy40LTcuNSw3LjV2MTIuNUMzNy41LDQ0LjMsMzUuMyw0Ni41LDMyLjUsNDYuNXoiLz4NCjwvZz4NCjwvc3ZnPg==); 1601 | background-size: var(--bgsize); 1602 | background-repeat: no-repeat; 1603 | background-position: bottom right; 1604 | } 1605 | */ --------------------------------------------------------------------------------