From 6c9c82948eef7a49b7940ce4c404722c0af6780a Mon Sep 17 00:00:00 2001 From: jr-k Date: Tue, 16 Jul 2024 17:06:37 +0200 Subject: [PATCH] node player groups wip --- data/www/css/compiled/main.css | 2 +- data/www/js/fleet/node-player-groups.js | 25 ++++ data/www/js/fleet/node-players.js | 9 ++ data/www/js/playlist/playlists.js | 8 +- data/www/scss/components/_explorer.scss | 63 +++++++- data/www/scss/components/_tiles.scss | 5 + data/www/scss/forms/_forms.scss | 5 + data/www/scss/main.scss | 2 +- data/www/scss/pages/_node-player.scss | 139 ++++++++++++++++++ data/www/scss/pages/_node_player.scss | 22 --- lang/en.json | 6 + lang/es.json | 6 + lang/fr.json | 6 + lang/it.json | 6 + src/controller/ContentController.py | 2 + src/controller/FleetNodePlayerController.py | 4 +- .../FleetNodePlayerGroupController.py | 42 ++++++ src/controller/PlaylistController.py | 2 + src/manager/NodePlayerManager.py | 6 +- src/manager/SlideManager.py | 19 ++- src/manager/VariableManager.py | 4 +- src/model/enum/OperatingSystem.py | 24 +++ views/base.jinja.html | 1 + .../component/explr-sidebar.jinja.html | 16 +- .../node-players/component/table.jinja.html | 33 +++++ views/fleet/node-players/list.jinja.html | 99 ++++++------- views/fleet/node-players/modal/add.jinja.html | 4 +- .../fleet/node-players/modal/edit.jinja.html | 16 +- .../player-group/component/edit.jinja.html | 42 +++--- .../player-group/component/table.jinja.html | 74 ---------- views/fleet/player-group/modal/add.jinja.html | 2 +- .../component/explr-sidebar.jinja.html | 14 +- views/slideshow/contents/list.jinja.html | 9 +- .../slides/component/table.jinja.html | 2 +- 34 files changed, 519 insertions(+), 200 deletions(-) create mode 100644 data/www/scss/pages/_node-player.scss delete mode 100644 data/www/scss/pages/_node_player.scss create mode 100644 views/fleet/node-players/component/table.jinja.html diff --git a/data/www/css/compiled/main.css b/data/www/css/compiled/main.css index f1a044f..a54d56b 100644 --- a/data/www/css/compiled/main.css +++ b/data/www/css/compiled/main.css @@ -1 +1 @@ -.info{color:#027bff!important}.bg-info{background-color:#027bff!important}.border-info{border-color:#027bff!important}.info-alt{color:#075cb7!important}.bg-info-alt{background-color:#075cb7!important}.border-info-alt{border-color:#075cb7!important}.success{color:#0eef5f!important}.bg-success{background-color:#0eef5f!important}.border-success{border-color:#0eef5f!important}.success-alt{color:#11a948!important}.bg-success-alt{background-color:#11a948!important}.border-success-alt{border-color:#11a948!important}.error{color:#ef0e5d!important}.bg-error{background-color:#ef0e5d!important}.border-error{border-color:#ef0e5d!important}.error-alt{color:#c20941!important}.bg-error-alt{background-color:#c20941!important}.border-error-alt{border-color:#c20941!important}.danger{color:#ef0e5d!important}.bg-danger{background-color:#ef0e5d!important}.border-danger{border-color:#ef0e5d!important}.danger-alt{color:#c20941!important}.bg-danger-alt{background-color:#c20941!important}.border-danger-alt{border-color:#c20941!important}.purple{color:#bc48ff!important}.bg-purple{background-color:#bc48ff!important}.border-purple{border-color:#bc48ff!important}.purple-alt{color:#692fbd!important}.bg-purple-alt{background-color:#692fbd!important}.border-purple-alt{border-color:#692fbd!important}.neutral{color:#464646!important}.bg-neutral{background-color:#464646!important}.border-neutral{border-color:#464646!important}.yellow{color:#e5a123!important}.bg-yellow{background-color:#e5a123!important}.border-yellow{border-color:#e5a123!important}.white{color:#fff!important}.bg-white{background-color:#fff!important}.border-white{border-color:#fff!important}.black{color:#000!important}.bg-black{background-color:#000!important}.border-black{border-color:#000!important}.youtube{color:#fd3c01!important}.bg-youtube{background-color:#fd3c01!important}.border-youtube{border-color:#fd3c01!important}.raspbian{color:#b61240!important}.bg-raspbian{background-color:#b61240!important}.border-raspbian{border-color:#b61240!important}.windows{color:#12a7e3!important}.bg-windows{background-color:#12a7e3!important}.border-windows{border-color:#12a7e3!important}.macos{color:#b3bcc2!important}.bg-macos{background-color:#b3bcc2!important}.border-macos{border-color:#b3bcc2!important}.debian{color:#cf084e!important}.bg-debian{background-color:#cf084e!important}.border-debian{border-color:#cf084e!important}.fedora{color:#52a2da!important}.bg-fedora{background-color:#52a2da!important}.border-fedora{border-color:#52a2da!important}.ubuntu{color:#d64514!important}.bg-ubuntu{background-color:#d64514!important}.border-ubuntu{border-color:#d64514!important}.suse{color:#6fb425!important}.bg-suse{background-color:#6fb425!important}.border-suse{border-color:#6fb425!important}.redhat{color:#c60200!important}.bg-redhat{background-color:#c60200!important}.border-redhat{border-color:#c60200!important}.centos{color:#9b4c88!important}.bg-centos{background-color:#9b4c88!important}.border-centos{border-color:#9b4c88!important}.other{color:#e5a123!important}.bg-other{background-color:#e5a123!important}.border-other{border-color:#e5a123!important}button.btn-info,.btn.btn-info{background:#027bff;box-shadow:0 2px #004a9b}button.btn-info:hover,.btn.btn-info:hover{box-shadow:0 2px 0 1px #004a9b inset}button.btn-info:focus,.btn.btn-info:focus{background:#004a9b}button.btn-wire-info,.btn.btn-wire-info{background:transparent;box-shadow:none;border:2px solid rgb(2,123,255);color:#fffc}button.btn-wire-info i.btn-match,.btn.btn-wire-info i.btn-match{color:#027bff}button.btn-wire-info:hover,.btn.btn-wire-info:hover{background:#027bff0d;border-color:#0063ce;color:#0063ce;box-shadow:none}button.btn-wire-info:focus,.btn.btn-wire-info:focus{border-color:#004a9b;background:transparent}button.btn-info-alt,.btn.btn-info-alt{background:#075cb7;box-shadow:0 2px #032b55}button.btn-info-alt:hover,.btn.btn-info-alt:hover{box-shadow:0 2px 0 1px #032b55 inset}button.btn-info-alt:focus,.btn.btn-info-alt:focus{background:#032b55}button.btn-wire-info-alt,.btn.btn-wire-info-alt{background:transparent;box-shadow:none;border:2px solid rgb(7,92,183);color:#fffc}button.btn-wire-info-alt i.btn-match,.btn.btn-wire-info-alt i.btn-match{color:#075cb7}button.btn-wire-info-alt:hover,.btn.btn-wire-info-alt:hover{background:#075cb70d;border-color:#054386;color:#054386;box-shadow:none}button.btn-wire-info-alt:focus,.btn.btn-wire-info-alt:focus{border-color:#032b55;background:transparent}button.btn-success,.btn.btn-success{background:#0eef5f;box-shadow:0 2px #088f39}button.btn-success:hover,.btn.btn-success:hover{box-shadow:0 2px 0 1px #088f39 inset}button.btn-success:focus,.btn.btn-success:focus{background:#088f39}button.btn-wire-success,.btn.btn-wire-success{background:transparent;box-shadow:none;border:2px solid rgb(14,239,95);color:#fffc}button.btn-wire-success i.btn-match,.btn.btn-wire-success i.btn-match{color:#0eef5f}button.btn-wire-success:hover,.btn.btn-wire-success:hover{background:#0eef5f0d;border-color:#0bbf4c;color:#0bbf4c;box-shadow:none}button.btn-wire-success:focus,.btn.btn-wire-success:focus{border-color:#088f39;background:transparent}button.btn-success-alt,.btn.btn-success-alt{background:#11a948;box-shadow:0 2px #084c21}button.btn-success-alt:hover,.btn.btn-success-alt:hover{box-shadow:0 2px 0 1px #084c21 inset}button.btn-success-alt:focus,.btn.btn-success-alt:focus{background:#084c21}button.btn-wire-success-alt,.btn.btn-wire-success-alt{background:transparent;box-shadow:none;border:2px solid rgb(17,169,72);color:#fffc}button.btn-wire-success-alt i.btn-match,.btn.btn-wire-success-alt i.btn-match{color:#11a948}button.btn-wire-success-alt:hover,.btn.btn-wire-success-alt:hover{background:#11a9480d;border-color:#0c7b34;color:#0c7b34;box-shadow:none}button.btn-wire-success-alt:focus,.btn.btn-wire-success-alt:focus{border-color:#084c21;background:transparent}button.btn-error,.btn.btn-error{background:#ef0e5d;box-shadow:0 2px #8f0838}button.btn-error:hover,.btn.btn-error:hover{box-shadow:0 2px 0 1px #8f0838 inset}button.btn-error:focus,.btn.btn-error:focus{background:#8f0838}button.btn-wire-error,.btn.btn-wire-error{background:transparent;box-shadow:none;border:2px solid rgb(239,14,93);color:#fffc}button.btn-wire-error i.btn-match,.btn.btn-wire-error i.btn-match{color:#ef0e5d}button.btn-wire-error:hover,.btn.btn-wire-error:hover{background:#ef0e5d0d;border-color:#bf0b4a;color:#bf0b4a;box-shadow:none}button.btn-wire-error:focus,.btn.btn-wire-error:focus{border-color:#8f0838;background:transparent}button.btn-error-alt,.btn.btn-error-alt{background:#c20941;box-shadow:0 2px #610420}button.btn-error-alt:hover,.btn.btn-error-alt:hover{box-shadow:0 2px 0 1px #610420 inset}button.btn-error-alt:focus,.btn.btn-error-alt:focus{background:#610420}button.btn-wire-error-alt,.btn.btn-wire-error-alt{background:transparent;box-shadow:none;border:2px solid rgb(194,9,65);color:#fffc}button.btn-wire-error-alt i.btn-match,.btn.btn-wire-error-alt i.btn-match{color:#c20941}button.btn-wire-error-alt:hover,.btn.btn-wire-error-alt:hover{background:#c209410d;border-color:#910731;color:#910731;box-shadow:none}button.btn-wire-error-alt:focus,.btn.btn-wire-error-alt:focus{border-color:#610420;background:transparent}button.btn-danger,.btn.btn-danger{background:#ef0e5d;box-shadow:0 2px #8f0838}button.btn-danger:hover,.btn.btn-danger:hover{box-shadow:0 2px 0 1px #8f0838 inset}button.btn-danger:focus,.btn.btn-danger:focus{background:#8f0838}button.btn-wire-danger,.btn.btn-wire-danger{background:transparent;box-shadow:none;border:2px solid rgb(239,14,93);color:#fffc}button.btn-wire-danger i.btn-match,.btn.btn-wire-danger i.btn-match{color:#ef0e5d}button.btn-wire-danger:hover,.btn.btn-wire-danger:hover{background:#ef0e5d0d;border-color:#bf0b4a;color:#bf0b4a;box-shadow:none}button.btn-wire-danger:focus,.btn.btn-wire-danger:focus{border-color:#8f0838;background:transparent}button.btn-danger-alt,.btn.btn-danger-alt{background:#c20941;box-shadow:0 2px #610420}button.btn-danger-alt:hover,.btn.btn-danger-alt:hover{box-shadow:0 2px 0 1px #610420 inset}button.btn-danger-alt:focus,.btn.btn-danger-alt:focus{background:#610420}button.btn-wire-danger-alt,.btn.btn-wire-danger-alt{background:transparent;box-shadow:none;border:2px solid rgb(194,9,65);color:#fffc}button.btn-wire-danger-alt i.btn-match,.btn.btn-wire-danger-alt i.btn-match{color:#c20941}button.btn-wire-danger-alt:hover,.btn.btn-wire-danger-alt:hover{background:#c209410d;border-color:#910731;color:#910731;box-shadow:none}button.btn-wire-danger-alt:focus,.btn.btn-wire-danger-alt:focus{border-color:#610420;background:transparent}button.btn-purple,.btn.btn-purple{background:#bc48ff;box-shadow:0 2px #8f00e1}button.btn-purple:hover,.btn.btn-purple:hover{box-shadow:0 2px 0 1px #8f00e1 inset}button.btn-purple:focus,.btn.btn-purple:focus{background:#8f00e1}button.btn-wire-purple,.btn.btn-wire-purple{background:transparent;box-shadow:none;border:2px solid rgb(188,72,255);color:#fffc}button.btn-wire-purple i.btn-match,.btn.btn-wire-purple i.btn-match{color:#bc48ff}button.btn-wire-purple:hover,.btn.btn-wire-purple:hover{background:#bc48ff0d;border-color:#a915ff;color:#a915ff;box-shadow:none}button.btn-wire-purple:focus,.btn.btn-wire-purple:focus{border-color:#8f00e1;background:transparent}button.btn-purple-alt,.btn.btn-purple-alt{background:#692fbd;box-shadow:0 2px #3c1b6b}button.btn-purple-alt:hover,.btn.btn-purple-alt:hover{box-shadow:0 2px 0 1px #3c1b6b inset}button.btn-purple-alt:focus,.btn.btn-purple-alt:focus{background:#3c1b6b}button.btn-wire-purple-alt,.btn.btn-wire-purple-alt{background:transparent;box-shadow:none;border:2px solid rgb(105,47,189);color:#fffc}button.btn-wire-purple-alt i.btn-match,.btn.btn-wire-purple-alt i.btn-match{color:#692fbd}button.btn-wire-purple-alt:hover,.btn.btn-wire-purple-alt:hover{background:#692fbd0d;border-color:#522594;color:#522594;box-shadow:none}button.btn-wire-purple-alt:focus,.btn.btn-wire-purple-alt:focus{border-color:#3c1b6b;background:transparent}button.btn-neutral,.btn.btn-neutral{background:#464646;box-shadow:0 2px #131313}button.btn-neutral:hover,.btn.btn-neutral:hover{box-shadow:0 2px 0 1px #131313 inset}button.btn-neutral:focus,.btn.btn-neutral:focus{background:#131313}button.btn-wire-neutral,.btn.btn-wire-neutral{background:transparent;box-shadow:none;border:2px solid rgb(70,70,70);color:#fffc}button.btn-wire-neutral i.btn-match,.btn.btn-wire-neutral i.btn-match{color:#464646}button.btn-wire-neutral:hover,.btn.btn-wire-neutral:hover{background:#4646460d;border-color:#2d2d2d;color:#2d2d2d;box-shadow:none}button.btn-wire-neutral:focus,.btn.btn-wire-neutral:focus{border-color:#131313;background:transparent}button.btn-yellow,.btn.btn-yellow{background:#e5a123;box-shadow:0 2px #916411}button.btn-yellow:hover,.btn.btn-yellow:hover{box-shadow:0 2px 0 1px #916411 inset}button.btn-yellow:focus,.btn.btn-yellow:focus{background:#916411}button.btn-wire-yellow,.btn.btn-wire-yellow{background:transparent;box-shadow:none;border:2px solid rgb(229,161,35);color:#fffc}button.btn-wire-yellow i.btn-match,.btn.btn-wire-yellow i.btn-match{color:#e5a123}button.btn-wire-yellow:hover,.btn.btn-wire-yellow:hover{background:#e5a1230d;border-color:#be8417;color:#be8417;box-shadow:none}button.btn-wire-yellow:focus,.btn.btn-wire-yellow:focus{border-color:#916411;background:transparent}button.btn-white,.btn.btn-white{background:#fff;box-shadow:0 2px #ccc}button.btn-white:hover,.btn.btn-white:hover{box-shadow:0 2px 0 1px #ccc inset}button.btn-white:focus,.btn.btn-white:focus{background:#ccc}button.btn-wire-white,.btn.btn-wire-white{background:transparent;box-shadow:none;border:2px solid rgb(255,255,255);color:#fffc}button.btn-wire-white i.btn-match,.btn.btn-wire-white i.btn-match{color:#fff}button.btn-wire-white:hover,.btn.btn-wire-white:hover{background:#ffffff0d;border-color:#e6e6e6;color:#e6e6e6;box-shadow:none}button.btn-wire-white:focus,.btn.btn-wire-white:focus{border-color:#ccc;background:transparent}button.btn-black,.btn.btn-black{background:#000;box-shadow:0 2px #000}button.btn-black:hover,.btn.btn-black:hover{box-shadow:0 2px 0 1px #000 inset}button.btn-black:focus,.btn.btn-black:focus{background:#000}button.btn-wire-black,.btn.btn-wire-black{background:transparent;box-shadow:none;border:2px solid rgb(0,0,0);color:#fffc}button.btn-wire-black i.btn-match,.btn.btn-wire-black i.btn-match{color:#000}button.btn-wire-black:hover,.btn.btn-wire-black:hover{background:#0000000d;border-color:#000;color:#000;box-shadow:none}button.btn-wire-black:focus,.btn.btn-wire-black:focus{border-color:#000;background:transparent}button.btn-youtube,.btn.btn-youtube{background:#fd3c01;box-shadow:0 2px #972401}button.btn-youtube:hover,.btn.btn-youtube:hover{box-shadow:0 2px 0 1px #972401 inset}button.btn-youtube:focus,.btn.btn-youtube:focus{background:#972401}button.btn-wire-youtube,.btn.btn-wire-youtube{background:transparent;box-shadow:none;border:2px solid rgb(253,60,1);color:#fffc}button.btn-wire-youtube i.btn-match,.btn.btn-wire-youtube i.btn-match{color:#fd3c01}button.btn-wire-youtube:hover,.btn.btn-wire-youtube:hover{background:#fd3c010d;border-color:#ca3001;color:#ca3001;box-shadow:none}button.btn-wire-youtube:focus,.btn.btn-wire-youtube:focus{border-color:#972401;background:transparent}button.btn-raspbian,.btn.btn-raspbian{background:#b61240;box-shadow:0 2px #59091f}button.btn-raspbian:hover,.btn.btn-raspbian:hover{box-shadow:0 2px 0 1px #59091f inset}button.btn-raspbian:focus,.btn.btn-raspbian:focus{background:#59091f}button.btn-wire-raspbian,.btn.btn-wire-raspbian{background:transparent;box-shadow:none;border:2px solid rgb(182,18,64);color:#fffc}button.btn-wire-raspbian i.btn-match,.btn.btn-wire-raspbian i.btn-match{color:#b61240}button.btn-wire-raspbian:hover,.btn.btn-wire-raspbian:hover{background:#b612400d;border-color:#880d30;color:#880d30;box-shadow:none}button.btn-wire-raspbian:focus,.btn.btn-wire-raspbian:focus{border-color:#59091f;background:transparent}button.btn-windows,.btn.btn-windows{background:#12a7e3;box-shadow:0 2px #0b6184}button.btn-windows:hover,.btn.btn-windows:hover{box-shadow:0 2px 0 1px #0b6184 inset}button.btn-windows:focus,.btn.btn-windows:focus{background:#0b6184}button.btn-wire-windows,.btn.btn-wire-windows{background:transparent;box-shadow:none;border:2px solid rgb(18,167,227);color:#fffc}button.btn-wire-windows i.btn-match,.btn.btn-wire-windows i.btn-match{color:#12a7e3}button.btn-wire-windows:hover,.btn.btn-wire-windows:hover{background:#12a7e30d;border-color:#0e84b4;color:#0e84b4;box-shadow:none}button.btn-wire-windows:focus,.btn.btn-wire-windows:focus{border-color:#0b6184;background:transparent}button.btn-macos,.btn.btn-macos{background:#b3bcc2;box-shadow:0 2px #7a8a95}button.btn-macos:hover,.btn.btn-macos:hover{box-shadow:0 2px 0 1px #7a8a95 inset}button.btn-macos:focus,.btn.btn-macos:focus{background:#7a8a95}button.btn-wire-macos,.btn.btn-wire-macos{background:transparent;box-shadow:none;border:2px solid rgb(179,188,194);color:#fffc}button.btn-wire-macos i.btn-match,.btn.btn-wire-macos i.btn-match{color:#b3bcc2}button.btn-wire-macos:hover,.btn.btn-wire-macos:hover{background:#b3bcc20d;border-color:#97a3ab;color:#97a3ab;box-shadow:none}button.btn-wire-macos:focus,.btn.btn-wire-macos:focus{border-color:#7a8a95;background:transparent}button.btn-debian,.btn.btn-debian{background:#cf084e;box-shadow:0 2px #6d0429}button.btn-debian:hover,.btn.btn-debian:hover{box-shadow:0 2px 0 1px #6d0429 inset}button.btn-debian:focus,.btn.btn-debian:focus{background:#6d0429}button.btn-wire-debian,.btn.btn-wire-debian{background:transparent;box-shadow:none;border:2px solid rgb(207,8,78);color:#fffc}button.btn-wire-debian i.btn-match,.btn.btn-wire-debian i.btn-match{color:#cf084e}button.btn-wire-debian:hover,.btn.btn-wire-debian:hover{background:#cf084e0d;border-color:#9e063b;color:#9e063b;box-shadow:none}button.btn-wire-debian:focus,.btn.btn-wire-debian:focus{border-color:#6d0429;background:transparent}button.btn-fedora,.btn.btn-fedora{background:#52a2da;box-shadow:0 2px #236ea3}button.btn-fedora:hover,.btn.btn-fedora:hover{box-shadow:0 2px 0 1px #236ea3 inset}button.btn-fedora:focus,.btn.btn-fedora:focus{background:#236ea3}button.btn-wire-fedora,.btn.btn-wire-fedora{background:transparent;box-shadow:none;border:2px solid rgb(82,162,218);color:#fffc}button.btn-wire-fedora i.btn-match,.btn.btn-wire-fedora i.btn-match{color:#52a2da}button.btn-wire-fedora:hover,.btn.btn-wire-fedora:hover{background:#52a2da0d;border-color:#2c8bcd;color:#2c8bcd;box-shadow:none}button.btn-wire-fedora:focus,.btn.btn-wire-fedora:focus{border-color:#236ea3;background:transparent}button.btn-ubuntu,.btn.btn-ubuntu{background:#d64514;box-shadow:0 2px #79270b}button.btn-ubuntu:hover,.btn.btn-ubuntu:hover{box-shadow:0 2px 0 1px #79270b inset}button.btn-ubuntu:focus,.btn.btn-ubuntu:focus{background:#79270b}button.btn-wire-ubuntu,.btn.btn-wire-ubuntu{background:transparent;box-shadow:none;border:2px solid rgb(214,69,20);color:#fffc}button.btn-wire-ubuntu i.btn-match,.btn.btn-wire-ubuntu i.btn-match{color:#d64514}button.btn-wire-ubuntu:hover,.btn.btn-wire-ubuntu:hover{background:#d645140d;border-color:#a73610;color:#a73610;box-shadow:none}button.btn-wire-ubuntu:focus,.btn.btn-wire-ubuntu:focus{border-color:#79270b;background:transparent}button.btn-suse,.btn.btn-suse{background:#6fb425;box-shadow:0 2px #3b5f14}button.btn-suse:hover,.btn.btn-suse:hover{box-shadow:0 2px 0 1px #3b5f14 inset}button.btn-suse:focus,.btn.btn-suse:focus{background:#3b5f14}button.btn-wire-suse,.btn.btn-wire-suse{background:transparent;box-shadow:none;border:2px solid rgb(111,180,37);color:#fffc}button.btn-wire-suse i.btn-match,.btn.btn-wire-suse i.btn-match{color:#6fb425}button.btn-wire-suse:hover,.btn.btn-wire-suse:hover{background:#6fb4250d;border-color:#558a1c;color:#558a1c;box-shadow:none}button.btn-wire-suse:focus,.btn.btn-wire-suse:focus{border-color:#3b5f14;background:transparent}button.btn-redhat,.btn.btn-redhat{background:#c60200;box-shadow:0 2px #600100}button.btn-redhat:hover,.btn.btn-redhat:hover{box-shadow:0 2px 0 1px #600100 inset}button.btn-redhat:focus,.btn.btn-redhat:focus{background:#600100}button.btn-wire-redhat,.btn.btn-wire-redhat{background:transparent;box-shadow:none;border:2px solid rgb(198,2,0);color:#fffc}button.btn-wire-redhat i.btn-match,.btn.btn-wire-redhat i.btn-match{color:#c60200}button.btn-wire-redhat:hover,.btn.btn-wire-redhat:hover{background:#c602000d;border-color:#930100;color:#930100;box-shadow:none}button.btn-wire-redhat:focus,.btn.btn-wire-redhat:focus{border-color:#600100;background:transparent}button.btn-centos,.btn.btn-centos{background:#9b4c88;box-shadow:0 2px #572a4c}button.btn-centos:hover,.btn.btn-centos:hover{box-shadow:0 2px 0 1px #572a4c inset}button.btn-centos:focus,.btn.btn-centos:focus{background:#572a4c}button.btn-wire-centos,.btn.btn-wire-centos{background:transparent;box-shadow:none;border:2px solid rgb(155,76,136);color:#fffc}button.btn-wire-centos i.btn-match,.btn.btn-wire-centos i.btn-match{color:#9b4c88}button.btn-wire-centos:hover,.btn.btn-wire-centos:hover{background:#9b4c880d;border-color:#793b6a;color:#793b6a;box-shadow:none}button.btn-wire-centos:focus,.btn.btn-wire-centos:focus{border-color:#572a4c;background:transparent}button.btn-other,.btn.btn-other{background:#e5a123;box-shadow:0 2px #916411}button.btn-other:hover,.btn.btn-other:hover{box-shadow:0 2px 0 1px #916411 inset}button.btn-other:focus,.btn.btn-other:focus{background:#916411}button.btn-wire-other,.btn.btn-wire-other{background:transparent;box-shadow:none;border:2px solid rgb(229,161,35);color:#fffc}button.btn-wire-other i.btn-match,.btn.btn-wire-other i.btn-match{color:#e5a123}button.btn-wire-other:hover,.btn.btn-wire-other:hover{background:#e5a1230d;border-color:#be8417;color:#be8417;box-shadow:none}button.btn-wire-other:focus,.btn.btn-wire-other:focus{border-color:#916411;background:transparent}@font-face{font-family:Sixtyfour;src:url(../../webfonts/Sixtyfour-Regular.ttf) format("truetype")}*{font-family:Roboto,Arial,"sans-serif";margin:0;padding:0;box-sizing:border-box}html{background-color:#111}body,html{height:100%;font-family:Arial,sans-serif}.container{display:flex;height:100vh}.horizontal{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;flex:1;align-self:stretch}.vertical{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;flex:1;align-self:stretch}main{flex:1;display:flex;flex-direction:column}main .main-container{display:flex;flex-direction:column;flex:1;overflow:hidden;align-self:stretch}main .main-container .top-content{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;padding:10px 10px 10px 15px;background:transparent;border-bottom:1px solid #222}main .main-container .top-content h1{color:#fff;font-weight:600;font-size:24px}main .main-container .top-content .top-actions{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}main .main-container .top-content .top-actions.align-right{justify-content:flex-end;margin-right:10px}main .main-container .top-content .top-actions .explr-selection-actions+.btn,main .main-container .top-content .top-actions .btn:first-child{margin-left:0!important}main .main-container .top-content .top-actions .btn,main .main-container .top-content .top-actions button{margin-left:10px}main .main-container .bottom-content{display:flex;flex-direction:row;align-self:stretch;justify-content:flex-start;align-items:flex-start;flex:1;overflow-y:auto;background:radial-gradient(circle at 0% 53%,rgba(239,14,93,.8) 10%,transparent 45%),radial-gradient(circle at 135% 53%,rgba(2,123,255,.8) 10%,transparent 95%),radial-gradient(circle at 50% 80%,rgba(14,239,95,.8) 40%,transparent 95%)}main .main-container .bottom-content .page-content{flex:2;overflow-y:auto;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;background:#000c;padding:5px}main .main-container .bottom-content .page-content .inner{flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 10px 40px;background:#111;align-self:stretch}main .main-container .bottom-content .page-panel{flex:1;overflow-y:auto;align-self:stretch;background:#111;border-top:none}main .main-container .bottom-content .page-panel.left-panel{border-right:1px solid #222;border-left:none}main .main-container .bottom-content .page-panel.left-panel.explr-explorer{flex:.5;overflow-y:auto;padding:0;background:#111;box-shadow:1px 1px .5px .5px inset #0003;max-width:250px}main .main-container .bottom-content .page-panel.right-panel{border-left:1px solid #222;border-right:none}.invisible{visibility:hidden!important}.hidden{display:none!important}.tac{text-align:center!important}.tar{text-align:right!important}a{text-decoration:none}.normal{font-weight:400!important}.bold{font-weight:700!important}.col{display:flex;flex:1;flex-direction:column;align-self:stretch}main .context-bar{padding:10px;position:sticky;top:0;z-index:1000;max-height:80px;border-bottom:1px solid #222;display:flex;flex-direction:row;align-items:center}main .context-bar .context-menu{flex:1}main .context-bar .context-menu .inner{display:flex}main .context-bar .context-menu .inner ul.pills{margin:0}main .context-bar .context-divider{width:1px;height:100%;background:#222;margin-left:20px;margin-right:20px}main .context-bar .contex-tail{margin-right:20px}main .context-bar .context-user{display:flex;margin-right:20px}main .context-bar .context-user .trigger{color:#fff}main .context-bar .context-user .trigger .avatar{width:32px;height:32px;border-radius:4px;background:#aaa;margin-right:10px;display:flex;flex-direction:row;justify-content:center;align-items:center;text-align:center;font-weight:700;font-size:14px;border:1px solid #444;color:#000}main .context-bar .context-user .trigger i{margin-top:-5px;margin-left:10px}menu{width:300px;background:#111;overflow-y:auto;overflow-x:visible;padding:20px;z-index:2000;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;border-right:1px solid #222;min-width:64px}menu h1.logo{margin:40px 0 0 10px;align-self:stretch;display:flex}menu h1.logo a{text-align:center;text-shadow:0px 0 0 #fff,0px 2px 0 #444,0 0px 0 rgb(14,239,95),-0px 0 0 rgb(2,123,255),0 -0px 0 rgb(239,14,93);text-decoration:none;background:linear-gradient(90deg,#a0a0a0 0,#bebebe 46%,#dcdcdc);-webkit-background-clip:text;color:transparent;flex:1;font-family:Sixtyfour,Work Sans,Arial,"sans-serif";align-self:stretch;padding-right:3px;font-size:20px;text-transform:uppercase;transition:all .55s cubic-bezier(.19,1,.22,1);display:flex;flex-direction:row;justify-content:center;align-items:center;position:relative}menu h1.logo a img{flex-shrink:0;width:30px;margin-right:10px;position:absolute;left:5px;transition:all .55s cubic-bezier(.19,1,.22,1)}menu h1.logo a img.after{opacity:0}menu:hover h1.logo a{text-align:center;text-shadow:3px 0 0 #fff,3px 2px 0 #444,0 3px 0 rgb(14,239,95),-3px 0 0 rgb(2,123,255),0 -3px 0 rgb(239,14,93);text-decoration:none;background:linear-gradient(90deg,#a0a0a0 0,#bebebe 46%,#dcdcdc);-webkit-background-clip:text;color:transparent}menu:hover h1.logo a img.before{opacity:0}menu:hover h1.logo a img.after{animation-duration:.2s;animation-name:logotouch}menu nav{display:flex;align-self:stretch;flex:1}menu nav ul{margin:60px 0 20px;flex:1;align-self:flex-start;display:flex;flex-direction:column;list-style:none}menu nav ul li{align-self:stretch;overflow:hidden;position:relative;transition:all .55s cubic-bezier(.19,1,.22,1);margin:10px 0;border-radius:4px}menu nav ul li a{color:#ffffffe6;font-size:16px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;flex:1;padding-top:5px;padding-bottom:5px;padding-left:10px}menu nav ul li a i{color:#fff;opacity:.2;background:transparent;display:flex;justify-content:center;align-items:center;align-self:stretch;padding:10px;width:40px;border-radius:4px;text-align:center;margin-right:20px}menu nav ul li:after{background:#fff;content:"";height:195px;left:-200px;opacity:.2;position:absolute;top:-50px;transform:rotate(35deg);transition:all .55s cubic-bezier(.19,1,.22,1);width:50px;z-index:-2;cursor:pointer}menu nav ul li.active a{color:#027bff;font-weight:700}menu nav ul li.active a i{opacity:1;background:#ffffffe6;background:#017bff}menu nav ul li:hover{background:#027bff}menu nav ul li:hover:after{z-index:2;left:120%;transition:all .55s cubic-bezier(.19,1,.22,1)}menu nav ul li:hover a{color:#fff;font-weight:700}menu nav ul li:hover a i{color:#fff;opacity:1}menu footer{background:#ffffff03;padding:20px 0;display:flex;flex-direction:row;align-self:stretch;text-align:center;justify-content:center}menu footer p{color:#444}menu footer p.version a{color:#777;font-weight:700}.dropdown{position:relative;display:flex;align-self:stretch}.dropdown.dropdown-show ul.dropdown-menu{display:flex;flex-direction:column}.dropdown .trigger{cursor:pointer;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;flex:1}.dropdown ul.dropdown-menu{position:absolute;top:100%;left:0;display:none;background-color:#222;box-shadow:0 8px 16px #0003;z-index:1000;list-style-type:none;margin:0;overflow:hidden;border-radius:4px}.dropdown ul.dropdown-menu li{padding:8px 16px;cursor:pointer;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;transition:all .55s cubic-bezier(.19,1,.22,1)}.dropdown ul.dropdown-menu li.danger:hover{background-color:#ef0e5d}.dropdown ul.dropdown-menu li:hover{background-color:#027bff}.dropdown ul.dropdown-menu li a{padding:8px 16px 8px 8px;color:#fff;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch}.dropdown ul.dropdown-menu li a i{margin-right:15px}@keyframes logotouch{0%{opacity:0}50%{opacity:1}to{opacity:0;left:27px}}button,.btn{position:relative;padding:10px 10px 8px;font-size:14px;color:#fff;cursor:pointer;border:none;border-radius:4px;background:#027bff;box-shadow:0 2px #004a9b;font-weight:700;letter-spacing:-.5px;margin-top:-2px}button i.icon-left,.btn i.icon-left{margin-right:5px}button:hover,.btn:hover{box-shadow:0 2px 0 1px #004a9b inset;color:#fffc}button:focus,.btn:focus{background:#004a9b;color:#ffffff80;box-shadow:none}button.btn-neutral,.btn.btn-neutral{color:#aaa;background:#464646;box-shadow:0 2px #2d2d2d;border:1px solid transparent}button.btn-neutral:hover,.btn.btn-neutral:hover{box-shadow:0 2px 0 1px #222 inset;background:#2d2d2d}button.btn-neutral:focus,.btn.btn-neutral:focus{background:#131313;border:1px solid #AAA}button .btn-wire-neutral,.btn .btn-wire-neutral{background:transparent;border:2px solid rgb(70,70,70);color:#fffc;box-shadow:none}button .btn-wire-neutral:hover,.btn .btn-wire-neutral:hover{background:#4646460d;border-color:#2d2d2d;color:#2d2d2d;box-shadow:none}button .btn-wire-neutral:focus,.btn .btn-wire-neutral:focus{border-color:#131313;background:transparent}button.btn-naked,.btn.btn-naked{background:transparent;box-shadow:none;border:1px solid transparent}button.btn-naked:hover,.btn.btn-naked:hover{box-shadow:0 2px 0 1px #222 inset;background:#2d2d2d}button.btn-naked:focus,.btn.btn-naked:focus{background:#131313;border:1px solid #AAA}button i.main,.btn i.main{font-size:18px}button sup,button sub,.btn sup,.btn sub{position:absolute;top:-4px;right:-4px;background:#777;border-bottom:2px solid rgb(70,70,70);color:#000;border-radius:4px;width:16px;height:16px;text-align:center;display:flex;justify-content:center;align-items:center;padding-top:2px;padding-bottom:1px}button sup i,button sub i,.btn sup i,.btn sub i{color:#fff;font-size:10px}.alert{padding:20px;align-self:stretch;display:flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px}.alert a{color:inherit;margin-left:4px;margin-right:4px;text-decoration:underline}.alert-info{color:#027bff;background:#027bff33}.alert-success{color:#0eef5f;background:#0eef5f33}.alert-danger,.alert-error{color:#ef0e5d;background:#ef0e5d33}.alert i{margin-right:13px}ul.explr-tree{height:100%!important}ul.explr-tree li span{color:#555;font-size:13px;padding-left:5px;cursor:pointer}ul.explr-tree li span.explr-plus,ul.explr-tree li span.explr-minus{z-index:1}ul.explr-tree li span.explr-plus:hover,ul.explr-tree li span.explr-minus:hover{color:#aaa}ul.explr-tree li a{color:#fff;padding-right:80px}ul.explr-tree li a:hover{color:#fff}ul.explr-tree li a.active{background:#ffffff1a;border-radius:4px;font-weight:700;text-decoration:underline;margin-left:35px;padding-left:5px;margin-right:10px}.explr-selection-actions{display:none;flex-direction:row;justify-content:flex-end;align-items:center;flex:1}.explr-selection-actions button{display:none}body.explr-selection-actionable .explr-selection-actions,body.explr-selection-actionable.explr-selection-folder .explr-selection-actions button.explr-selection-folder,body.explr-selection-actionable.explr-selection-entity .explr-selection-actions button.explr-selection-entity{display:flex}ul.explr-dirview{display:flex;flex-direction:row;flex-wrap:wrap}ul.explr-dirview li{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;flex-shrink:0;margin:18px;min-width:90px;min-height:104px;padding-top:5px;border:1px solid transparent;border-radius:4px}ul.explr-dirview li.renaming a span{display:none}ul.explr-dirview li.renaming a form{display:block}ul.explr-dirview li.highlight-drop{border:1px dotted rgba(2,123,255,.4);background:#027bff4d}ul.explr-dirview li.highlight-clicked{border:1px dotted rgba(255,255,255,.2);background:#ffffff1a}ul.explr-dirview li a{color:#bbb;text-decoration:none;flex:1;text-align:center;font-size:12px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;max-width:84px}ul.explr-dirview li a i{font-size:64px;margin-bottom:12px;border-radius:8px}ul.explr-dirview li a input{width:100%;padding:0 3px}ul.explr-dirview li a input:focus{outline:none}ul.explr-dirview li a:hover{opacity:.8}ul.explr-dirview li a form{display:none}ul.explr-dirview li.new-folder a{color:#027bff}ul.explr-dirview li.new-folder a form{display:block}ul.explr-dirview .ui-draggable-dragging{z-index:20}ul.explr-dirview .ui-draggable-dragging a{opacity:1!important}.modal-explr-picker h2{margin-top:0}.modal-explr-picker .explr-tree{width:400px;max-height:300px;overflow:auto;background:#222;padding:10px 20px;border-radius:4px;margin-top:15px}.content-explr-picker{cursor:pointer}ul.pills{background:#222;padding:6px 4px 5px;box-shadow:1px 1px .5px .5px inset #0003;border:1px solid #222;border-radius:4px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;list-style:none;margin:0}ul.pills li.divider{margin:0 20px;width:1px;height:100%;background:#333}ul.pills li:hover a{opacity:.9}ul.pills li a{border-radius:4px;display:flex;flex-direction:row;justify-content:center;align-items:center;color:#fff;overflow:hidden;padding-right:30px;text-align:center;background:#0003;margin-right:5px;transition:all .25s cubic-bezier(.19,1,.22,1)}ul.pills li a span{display:flex;justify-content:center;align-items:center;margin-right:20px;height:42px;background:#0003;width:42px}ul.pills li.active a{color:#333;background:#fff;font-weight:700}ul.pills li:hover a{color:#fff;background:#027bff}ul.pills li:last-child a{margin-right:0}.breadcrumb-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;border-bottom:1px solid #222;background:transparent;padding:10px}.breadcrumb-container ul.breadcrumb{background:#222;padding:6px 4px 5px;box-shadow:1px 1px .5px .5px inset #0003;border:1px solid #222;border-radius:4px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;list-style:none;margin:0}.breadcrumb-container ul.breadcrumb li.divider{margin:0 5px}.breadcrumb-container ul.breadcrumb li.divider i{color:#aaa}.breadcrumb-container ul.breadcrumb li span,.breadcrumb-container ul.breadcrumb li a{border-radius:4px;display:flex;flex-direction:row;justify-content:center;align-items:center;color:#fff;text-align:center;padding:0 3px}.breadcrumb-container ul.breadcrumb li span i,.breadcrumb-container ul.breadcrumb li a i{margin-right:5px}.breadcrumb-container ul.breadcrumb li:hover a{color:#fff;background:#027bff}.breadcrumb-container ul.breadcrumb li:last-child a{margin-right:0}.pickers,.modals{position:fixed;background:#0006;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10000}.pickers.pickers .modals-outer .modals-inner .modal h2,.modals.pickers .modals-outer .modals-inner .modal h2{font-size:14px;line-height:18px;display:flex;margin-bottom:5px;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;color:#666}.pickers .modals-outer,.modals .modals-outer{min-width:464px;display:flex;flex-direction:column;overflow:auto;padding-bottom:2px}.pickers .modals-outer .modals-inner,.modals .modals-outer .modals-inner{background:#111;border-radius:10px;color:#333;padding:40px;box-shadow:0 2px #222;border:1px solid #222}.pickers .modals-outer .modals-inner .modal h2,.modals .modals-outer .modals-inner .modal h2{padding:0;margin:0 0 30px;font-weight:400;color:#999}.pickers .modals-outer .modals-inner .modal h3,.modals .modals-outer .modals-inner .modal h3{align-self:stretch;margin:0;font-size:14px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;color:#fff;padding-bottom:10px;text-decoration:none}.pickers .modals-outer .modals-inner .modal h3.divide,.modals .modals-outer .modals-inner .modal h3.divide{border-top:1px solid #222;margin-top:20px;padding-top:20px}#toast{visibility:hidden;min-width:250px;margin-left:-125px;background-color:#333;color:#fff;text-align:center;border-radius:4px;padding:16px;position:fixed;z-index:1;left:50%;bottom:30px;font-size:17px;border:2px dashed #222}#toast.show{visibility:visible;-webkit-animation:fadein .5s,fadeout .5s 2.5s;animation:fadein .5s,fadeout .5s 2.5s}@-webkit-keyframes fadein{0%{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@keyframes fadein{0%{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@-webkit-keyframes fadeout{0%{bottom:30px;opacity:1}to{bottom:0;opacity:0}}@keyframes fadeout{0%{bottom:30px;opacity:1}to{bottom:0;opacity:0}}table.panes{flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;align-self:stretch}table.panes tbody{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;align-self:stretch;margin:1px 1px 28px;background:#111;border-radius:4px;border:4px solid rgba(255,255,255,.05)}table.panes tbody:hover,table.panes tbody:hover tr.title-item{border-color:#027bff0d}table.panes tbody tr{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;padding:8px 18px;background:#222}table.panes tbody tr:nth-child(odd){background-color:#111}table.panes tbody tr:nth-child(odd) td.description{color:#ffffffb3}table.panes tbody tr:nth-child(2n){background-color:#141414}table.panes tbody tr td{color:#888;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex:1;font-size:14px}table.panes tbody tr td.vertical{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}table.panes tbody tr td.description{align-self:stretch}table.panes tbody tr td.value{flex:0;margin-left:20px;word-break:break-all;flex-basis:auto}table.panes tbody tr td.value i.icon-legend{font-size:10px;margin-right:10px}table.panes tbody tr td.value i.icon-value{padding:2px 2px 1px;border-radius:2px;width:16px;text-align:center}table.panes tbody tr.title-item{border-bottom:1px solid #222}table.panes tbody tr.title-item td{color:#027bffe6;font-size:16px;font-weight:700}table.panes tbody tr.title-item td i{margin-right:10px}table.panes tbody tr.title-item td .more{flex:1;text-align:right;font-size:12px;color:#888;font-weight:400;font-style:italic}table.panes tbody tr.variable-item{cursor:pointer}table.panes tbody tr.variable-item:hover{background-color:#027bff0d}table.panes tbody tr.variable-item:hover td{font-weight:700;color:#fff}table.panes tbody tr.variable-item:hover td i.icon-legend{color:#fff}table.panes tbody tr.variable-item:hover td span,table.panes tbody tr.variable-item:hover td i.icon-value{background-color:#ffffff4d;color:#fff}table.panes tbody tr.variable-item:hover td.description{color:#027bff}.tiles{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;align-self:stretch}.tiles .tiles-inner{display:flex;flex:1;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;align-self:stretch;padding:2px}.tiles .tiles-inner .tile-item{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;background:#222;align-self:stretch;color:#fff;margin:1px;padding:15px 10px 15px 15px}.tiles .tiles-inner .tile-item:hover,.tiles .tiles-inner .tile-item.active{background:#111}.tiles .tiles-inner .tile-item:hover:hover,.tiles .tiles-inner .tile-item.active:hover{opacity:1}.tiles .tiles-inner .tile-item.disabled .tile-tail .head-icon i{color:#444}.tiles .tiles-inner .tile-item .tile-tail{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;margin-left:10px}.tiles .tiles-inner .tile-item .tile-tail .head-icon{flex:1}.tiles .tiles-inner .tile-item .tile-tail .head-icon i{font-size:6px;color:#fff;opacity:.8;display:flex}.tiles .tiles-inner .tile-item .tile-tail .status-icons{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.tiles .tiles-inner .tile-item .tile-tail .status-icons i{font-size:16px;margin-left:10px}.tiles .tiles-inner .tile-item .tile-body{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;font-size:15px;font-weight:400;letter-spacing:.8px;line-height:22px;margin:0;flex-wrap:nowrap}.tiles .tiles-inner .tile-item .tile-metrics{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin:0}.tiles .tiles-inner .tile-item .tile-metrics .foot-span{opacity:.8;font-size:13px;font-family:Courier New}span.empty{background:#e5a1234d;color:#e5a123;text-transform:lowercase;border-radius:2px;padding:2px 4px;font-weight:700}.inner-empty{display:flex;flex:1;flex-direction:column;align-self:stretch;justify-content:center;align-items:center}.inner-empty i{font-size:90px;opacity:.3;text-shadow:0 -1px #333,0 0px .5px #444}.toggle{position:relative;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}.toggle input{display:none}.toggle input:checked+label{background:#027bff;border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 2px #222 inset}.toggle input:checked+label:after{content:"";display:block;border-radius:50%;margin-left:21px;width:18px;height:18px;transition:.2s;background:#9bcbff;box-shadow:0 2px #0063ce}.toggle label{width:44px;height:26px;border-radius:15px;background:#222;cursor:pointer;border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 2px #111 inset}.toggle label:after{content:"";display:block;border-radius:50%;width:18px;height:18px;margin:3px;background:#777;box-shadow:0 2px #000000e6;transition:.2s}.form-holder{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;align-self:stretch}.form-holder form{max-width:434px}form{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;align-self:stretch}form .alert{padding:8px 15px;font-size:14px;margin:0 0 25px}.form-group{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;align-self:stretch;width:100%;flex:1;margin-bottom:20px}.form-group label{flex:1;font-size:12px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;color:#666}.form-group label.btn-upload{color:#fff;font-size:14px;flex:0;flex-basis:auto;margin-top:5px}.form-group label.btn-upload input[type=file]{display:none}.form-group label.btn-upload input[type=text]{margin-bottom:2px;padding-left:0;margin-left:10px}.form-group label.btn-upload i{margin-left:3px;margin-right:10px}.form-group .widget{margin-top:10px;align-self:stretch;display:flex;flex-direction:row}.form-group .widget .btn{margin-left:10px}.form-group .widget.widget-unit select,.form-group .widget.widget-unit input{flex-grow:0;background:none;box-shadow:none;border:none;border-bottom:1px solid #333;border-radius:0;max-width:80px;padding-left:0;color:#fff;text-align:center}.form-group .widget.widget-unit span{font-size:12px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;margin-left:5px;color:#555}.form-group .widget div{color:#ffffffb3;font-size:14px}.form-group .widget select,.form-group .widget input,.form-group .widget textarea{outline:none;padding:8px 0 5px 8px;border-radius:2px;border:1px solid rgba(255,255,255,.05);flex:1;background:#555;box-shadow:0 2px 1px #444,0 4px 2px #333 inset;color:#ddd;font-size:14px}.form-group .widget select.input-naked,.form-group .widget select.disabled,.form-group .widget select[disabled],.form-group .widget input.input-naked,.form-group .widget input.disabled,.form-group .widget input[disabled],.form-group .widget textarea.input-naked,.form-group .widget textarea.disabled,.form-group .widget textarea[disabled]{color:#555;background:none;box-shadow:none;border:none;border-bottom:1px solid #333;border-radius:0}.form-group .widget select.disabled,.form-group .widget select[disabled],.form-group .widget input.disabled,.form-group .widget input[disabled],.form-group .widget textarea.disabled,.form-group .widget textarea[disabled]{border:none;background:#000;border-radius:4px}.form-group.tab-select{border-bottom:1px solid #444;display:flex;flex-direction:row;position:relative;height:48px;padding:48px 0 0;flex:0;flex-basis:auto}.form-group.tab-select .widget{height:49px;margin-top:0;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;position:absolute;top:0;left:0;border-bottom:2px solid rgb(2,123,255);color:#027bff}.form-group.tab-select .widget select{border:none;background:none;box-shadow:none;padding:10px 35px 10px 10px;margin:0;color:inherit;appearance:none;-moz-appearance:none;-webkit-appearance:none;text-align:left;font-weight:700;cursor:pointer;border-radius:4px 4px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;z-index:2}.form-group.tab-select .widget i{margin-left:10px;margin-right:0}.form-group.tab-select .widget i.triangle{margin-top:-4px;margin-left:0;position:absolute;right:10px}.form-group.form-group-horizontal{margin:10px 0 20px;flex-direction:row;justify-content:flex-start;align-items:center}.form-group.form-group-horizontal .widget{margin:0;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}.actions{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;align-self:stretch;margin:20px 0 0}.actions.actions-intermediate{margin:0}.actions button{margin-left:25px}.actions.actions-left{justify-content:flex-start}.actions.actions-left .btn{margin-left:0;margin-right:25px}.actions.actions-right{justify-content:flex-end}.actions.actions-right .btn{margin-left:10px;margin-right:0}.actions.actions-center{justify-content:center}.actions.actions-center .btn{margin-left:0;margin-right:0}.view-content-list main .main-container .content-object-input{margin-bottom:6px}.view-content-edit main .main-container .bottom-content .page-content{flex:1}.view-content-edit main .main-container .bottom-content .page-content .form-holder{margin:20px 20px 20px 10px;flex:1}.view-content-edit main .main-container .bottom-content .page-panel.right-panel{flex:2;align-self:stretch;display:flex;flex-direction:column;overflow:hidden;justify-content:flex-start;align-items:center;padding:20px}.view-content-edit main .main-container .bottom-content .page-panel.right-panel h3{color:#fff;padding:10px 10px 10px 0;margin-bottom:20px;font-size:16px;align-self:stretch;margin-left:-8px}.view-content-edit main .main-container .bottom-content .page-panel.right-panel h3 span{border-width:1px;border-style:solid;border-radius:4px;padding:4px 10px;margin-left:5px}.view-content-edit main .main-container .bottom-content .page-panel.right-panel h3 i{font-size:16px}.view-content-edit main .main-container .bottom-content .page-panel.right-panel .iframe-wrapper{display:flex;flex-direction:column;width:100%;position:relative;padding-top:56.25%;overflow:hidden;border-radius:4px;outline:4px solid rgba(255,255,255,.1)}.view-content-edit main .main-container .bottom-content .page-panel.right-panel .iframe-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.view-logs-list main .main-container .bottom-content .page-content .inner{padding-top:8px;padding-bottom:8px}.view-logs-list main .main-container .bottom-content .page-content .logs{flex:1;display:flex;flex-direction:column;align-self:stretch}.view-logs-list main .main-container .bottom-content .page-content .logs pre{flex:1;background:#000000e6;border:1px solid rgba(70,70,70,.5);border-radius:4px;font-family:monospace;color:#f2f2f2;padding:20px;overflow:auto;align-self:stretch}.view-node-player-edit main .main-container .bottom-content .page-content{flex:1}.view-node-player-edit main .main-container .bottom-content .page-content .form-holder{margin:20px 20px 20px 10px}.view-playlist-list main .main-container p{font-size:12px;line-height:18px;display:flex;margin-bottom:5px;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;color:#666}.view-playlist-list main .main-container .modal-playlist-qrcode h2{text-align:center}.view-playlist-list main .main-container .modal-playlist-qrcode .qrcode-pic{text-align:center;display:flex;flex-direction:row;justify-content:center;align-items:center}.view-playlist-list main .main-container .modal-playlist-qrcode .qrcode-pic img{border:4px solid #555;border-radius:4px}.view-playlist-list main .main-container .modal-slide h2{font-size:20px}.view-playlist-list main .main-container .modal-slide input[disabled]{color:#aaa}.view-playlist-list main .main-container .modal-slide .slide-schedule-group select,.view-playlist-list main .main-container .modal-slide .slide-schedule-end-group select{margin-right:5px}.view-playlist-list main .main-container .modal-slide .slide-schedule-group select,.view-playlist-list main .main-container .modal-slide .slide-schedule-group input,.view-playlist-list main .main-container .modal-slide .slide-schedule-end-group select,.view-playlist-list main .main-container .modal-slide .slide-schedule-end-group input{font-size:12px;max-width:50%}.view-playlist-list main .main-container .modal-slide .slide-schedule-group select.datetimepicker,.view-playlist-list main .main-container .modal-slide .slide-schedule-group input.datetimepicker,.view-playlist-list main .main-container .modal-slide .slide-schedule-end-group select.datetimepicker,.view-playlist-list main .main-container .modal-slide .slide-schedule-end-group input.datetimepicker{margin-left:5px;padding-left:0}.view-playlist-list main .main-container .bottom-content .page-content{flex:1}.view-playlist-list main .main-container .bottom-content .page-content.with-right-panel{flex:.5}.view-playlist-list main .main-container .bottom-content .page-content .inner{padding:0}.view-playlist-list main .main-container .bottom-content .page-content .inner h3{font-size:16px;font-weight:500;color:#ddd;text-decoration:none;margin:0 0 20px}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder{margin:20px 20px 20px 10px;flex:1}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder .form-holder{margin:20px 0 0}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder .form-holder form{max-width:initial}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder .form-holder .form-group{flex-grow:0;margin-bottom:5px}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder .preview-holder .form-group{flex-grow:0;margin-bottom:0}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder h4{font-size:14px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;color:#fff;padding-bottom:10px;text-decoration:none}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder h4.divide{border-top:1px solid #222;margin-top:20px;padding-top:20px}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder .qrcode-pic{margin-top:10px}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder .qrcode-pic img{border:1px dashed #555;padding:5px;border-radius:4px}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder .preview{background:#000;border:1px solid rgba(255,255,255,.3);border-radius:4px;justify-content:center;align-items:center;align-self:stretch;display:flex;margin:10px 0 20px;height:300px}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder .preview iframe{flex:1;align-self:stretch}.view-playlist-list main .main-container .bottom-content .page-content .inner .slides-holder{align-self:stretch;border-right:1px solid #222;margin:20px 10px 20px 20px;padding-right:20px;flex:1.3}.view-playlist-list main .main-container .bottom-content .page-panel.left-panel{flex:.3;max-width:initial;justify-content:center;align-items:center;display:flex}.view-player-group-list main .main-container p{font-size:12px;line-height:18px;display:flex;margin-bottom:5px;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;color:#666}.view-player-group-list main .main-container .bottom-content .page-content{flex:1}.view-player-group-list main .main-container .bottom-content .page-content .inner{padding:0}.view-player-group-list main .main-container .bottom-content .page-content .inner h3{font-size:16px;font-weight:500;color:#ddd;text-decoration:none;margin:0 0 20px}.view-player-group-list main .main-container .bottom-content .page-content .inner .node-player-group-holder{margin:20px 20px 20px 10px;flex:1}.view-player-group-list main .main-container .bottom-content .page-content .inner .node-player-group-holder .form-holder{margin:20px 0 0}.view-player-group-list main .main-container .bottom-content .page-content .inner .node-player-group-holder .form-holder form{max-width:initial}.view-player-group-list main .main-container .bottom-content .page-content .inner .node-player-group-holder .form-holder .form-group{flex-grow:0;margin-bottom:15px}.view-player-group-list main .main-container .bottom-content .page-content .inner .node-player-group-holder .preview-holder .form-group{flex-grow:0;margin-bottom:0}.view-player-group-list main .main-container .bottom-content .page-content .inner .node-player-group-holder h4{font-size:14px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;color:#fff;padding-bottom:10px;text-decoration:none}.view-player-group-list main .main-container .bottom-content .page-content .inner .node-player-group-holder h4.divide{border-top:1px solid #222;margin-top:20px;padding-top:20px}.view-player-group-list main .main-container .bottom-content .page-content .inner .node-player-group-holder .preview{background:#000;border:1px solid rgba(255,255,255,.3);border-radius:4px;justify-content:center;align-items:center;align-self:stretch;display:flex;margin:10px 0 20px;height:300px}.view-player-group-list main .main-container .bottom-content .page-content .inner .node-player-group-holder .preview iframe{flex:1;align-self:stretch}.view-player-group-list main .main-container .bottom-content .page-content .inner .players-holder{align-self:stretch;border-right:1px solid #222;margin:20px 10px 20px 20px;padding-right:20px;flex:1.3}.view-player-group-list main .main-container .bottom-content .page-panel.left-panel{flex:.3;max-width:initial;justify-content:center;align-items:center;display:flex}.view-playlist-list main .main-container .slides-holder ul.slides{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;align-self:stretch;margin:10px 0 0;border:1px dashed #222;border-radius:4px;padding:10px}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;margin:0 0 2px}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item.disabled .infos .title{color:#333}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item.disabled .infos .type i{color:#333!important}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item.disabled .body{opacity:0}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .sort{display:flex;flex-direction:column;justify-content:center;align-items:center}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .sort a{color:#999;font-size:10px;padding:10px;cursor:move}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .sort a:hover{color:#027bff}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .infos{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;color:#aaa;font-size:12px;margin-right:5px;flex:1;max-width:120px;background:#000;border:1px solid #333;border-radius:4px;padding:3px 7px}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .infos:hover .title{color:#fff}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .infos .title{display:block;word-break:break-all;font-size:13px;color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .infos .type{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;color:#aaa;font-size:12px;margin-right:5px}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .body{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;margin:0 10px;background:#1b1b1b;padding:10px;align-self:stretch;flex:1;border-radius:4px;font-size:13px;color:#fff}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .body .range{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;flex:1}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .body .range .start{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;margin-bottom:8px}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .body .range .end{display:flex;flex-direction:row;justify-content:flex-start;align-items:center}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .tail{display:flex;flex-direction:row;justify-content:center;align-items:center}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .tail a{color:#fff}.view-plugins-list main .main-container .bottom-content .page-content .inner{padding:10px}.view-settings-list main .main-container .bottom-content .page-content .inner{padding:10px}.view-sysinfo-list main .main-container .bottom-content .page-content .inner{padding:10px} +.info{color:#027bff!important}.bg-info{background-color:#027bff!important}.border-info{border-color:#027bff!important}.info-alt{color:#075cb7!important}.bg-info-alt{background-color:#075cb7!important}.border-info-alt{border-color:#075cb7!important}.success{color:#0eef5f!important}.bg-success{background-color:#0eef5f!important}.border-success{border-color:#0eef5f!important}.success-alt{color:#11a948!important}.bg-success-alt{background-color:#11a948!important}.border-success-alt{border-color:#11a948!important}.error{color:#ef0e5d!important}.bg-error{background-color:#ef0e5d!important}.border-error{border-color:#ef0e5d!important}.error-alt{color:#c20941!important}.bg-error-alt{background-color:#c20941!important}.border-error-alt{border-color:#c20941!important}.danger{color:#ef0e5d!important}.bg-danger{background-color:#ef0e5d!important}.border-danger{border-color:#ef0e5d!important}.danger-alt{color:#c20941!important}.bg-danger-alt{background-color:#c20941!important}.border-danger-alt{border-color:#c20941!important}.purple{color:#bc48ff!important}.bg-purple{background-color:#bc48ff!important}.border-purple{border-color:#bc48ff!important}.purple-alt{color:#692fbd!important}.bg-purple-alt{background-color:#692fbd!important}.border-purple-alt{border-color:#692fbd!important}.neutral{color:#464646!important}.bg-neutral{background-color:#464646!important}.border-neutral{border-color:#464646!important}.yellow{color:#e5a123!important}.bg-yellow{background-color:#e5a123!important}.border-yellow{border-color:#e5a123!important}.white{color:#fff!important}.bg-white{background-color:#fff!important}.border-white{border-color:#fff!important}.black{color:#000!important}.bg-black{background-color:#000!important}.border-black{border-color:#000!important}.youtube{color:#fd3c01!important}.bg-youtube{background-color:#fd3c01!important}.border-youtube{border-color:#fd3c01!important}.raspbian{color:#b61240!important}.bg-raspbian{background-color:#b61240!important}.border-raspbian{border-color:#b61240!important}.windows{color:#12a7e3!important}.bg-windows{background-color:#12a7e3!important}.border-windows{border-color:#12a7e3!important}.macos{color:#b3bcc2!important}.bg-macos{background-color:#b3bcc2!important}.border-macos{border-color:#b3bcc2!important}.debian{color:#cf084e!important}.bg-debian{background-color:#cf084e!important}.border-debian{border-color:#cf084e!important}.fedora{color:#52a2da!important}.bg-fedora{background-color:#52a2da!important}.border-fedora{border-color:#52a2da!important}.ubuntu{color:#d64514!important}.bg-ubuntu{background-color:#d64514!important}.border-ubuntu{border-color:#d64514!important}.suse{color:#6fb425!important}.bg-suse{background-color:#6fb425!important}.border-suse{border-color:#6fb425!important}.redhat{color:#c60200!important}.bg-redhat{background-color:#c60200!important}.border-redhat{border-color:#c60200!important}.centos{color:#9b4c88!important}.bg-centos{background-color:#9b4c88!important}.border-centos{border-color:#9b4c88!important}.other{color:#e5a123!important}.bg-other{background-color:#e5a123!important}.border-other{border-color:#e5a123!important}button.btn-info,.btn.btn-info{background:#027bff;box-shadow:0 2px #004a9b}button.btn-info:hover,.btn.btn-info:hover{box-shadow:0 2px 0 1px #004a9b inset}button.btn-info:focus,.btn.btn-info:focus{background:#004a9b}button.btn-wire-info,.btn.btn-wire-info{background:transparent;box-shadow:none;border:2px solid rgb(2,123,255);color:#fffc}button.btn-wire-info i.btn-match,.btn.btn-wire-info i.btn-match{color:#027bff}button.btn-wire-info:hover,.btn.btn-wire-info:hover{background:#027bff0d;border-color:#0063ce;color:#0063ce;box-shadow:none}button.btn-wire-info:focus,.btn.btn-wire-info:focus{border-color:#004a9b;background:transparent}button.btn-info-alt,.btn.btn-info-alt{background:#075cb7;box-shadow:0 2px #032b55}button.btn-info-alt:hover,.btn.btn-info-alt:hover{box-shadow:0 2px 0 1px #032b55 inset}button.btn-info-alt:focus,.btn.btn-info-alt:focus{background:#032b55}button.btn-wire-info-alt,.btn.btn-wire-info-alt{background:transparent;box-shadow:none;border:2px solid rgb(7,92,183);color:#fffc}button.btn-wire-info-alt i.btn-match,.btn.btn-wire-info-alt i.btn-match{color:#075cb7}button.btn-wire-info-alt:hover,.btn.btn-wire-info-alt:hover{background:#075cb70d;border-color:#054386;color:#054386;box-shadow:none}button.btn-wire-info-alt:focus,.btn.btn-wire-info-alt:focus{border-color:#032b55;background:transparent}button.btn-success,.btn.btn-success{background:#0eef5f;box-shadow:0 2px #088f39}button.btn-success:hover,.btn.btn-success:hover{box-shadow:0 2px 0 1px #088f39 inset}button.btn-success:focus,.btn.btn-success:focus{background:#088f39}button.btn-wire-success,.btn.btn-wire-success{background:transparent;box-shadow:none;border:2px solid rgb(14,239,95);color:#fffc}button.btn-wire-success i.btn-match,.btn.btn-wire-success i.btn-match{color:#0eef5f}button.btn-wire-success:hover,.btn.btn-wire-success:hover{background:#0eef5f0d;border-color:#0bbf4c;color:#0bbf4c;box-shadow:none}button.btn-wire-success:focus,.btn.btn-wire-success:focus{border-color:#088f39;background:transparent}button.btn-success-alt,.btn.btn-success-alt{background:#11a948;box-shadow:0 2px #084c21}button.btn-success-alt:hover,.btn.btn-success-alt:hover{box-shadow:0 2px 0 1px #084c21 inset}button.btn-success-alt:focus,.btn.btn-success-alt:focus{background:#084c21}button.btn-wire-success-alt,.btn.btn-wire-success-alt{background:transparent;box-shadow:none;border:2px solid rgb(17,169,72);color:#fffc}button.btn-wire-success-alt i.btn-match,.btn.btn-wire-success-alt i.btn-match{color:#11a948}button.btn-wire-success-alt:hover,.btn.btn-wire-success-alt:hover{background:#11a9480d;border-color:#0c7b34;color:#0c7b34;box-shadow:none}button.btn-wire-success-alt:focus,.btn.btn-wire-success-alt:focus{border-color:#084c21;background:transparent}button.btn-error,.btn.btn-error{background:#ef0e5d;box-shadow:0 2px #8f0838}button.btn-error:hover,.btn.btn-error:hover{box-shadow:0 2px 0 1px #8f0838 inset}button.btn-error:focus,.btn.btn-error:focus{background:#8f0838}button.btn-wire-error,.btn.btn-wire-error{background:transparent;box-shadow:none;border:2px solid rgb(239,14,93);color:#fffc}button.btn-wire-error i.btn-match,.btn.btn-wire-error i.btn-match{color:#ef0e5d}button.btn-wire-error:hover,.btn.btn-wire-error:hover{background:#ef0e5d0d;border-color:#bf0b4a;color:#bf0b4a;box-shadow:none}button.btn-wire-error:focus,.btn.btn-wire-error:focus{border-color:#8f0838;background:transparent}button.btn-error-alt,.btn.btn-error-alt{background:#c20941;box-shadow:0 2px #610420}button.btn-error-alt:hover,.btn.btn-error-alt:hover{box-shadow:0 2px 0 1px #610420 inset}button.btn-error-alt:focus,.btn.btn-error-alt:focus{background:#610420}button.btn-wire-error-alt,.btn.btn-wire-error-alt{background:transparent;box-shadow:none;border:2px solid rgb(194,9,65);color:#fffc}button.btn-wire-error-alt i.btn-match,.btn.btn-wire-error-alt i.btn-match{color:#c20941}button.btn-wire-error-alt:hover,.btn.btn-wire-error-alt:hover{background:#c209410d;border-color:#910731;color:#910731;box-shadow:none}button.btn-wire-error-alt:focus,.btn.btn-wire-error-alt:focus{border-color:#610420;background:transparent}button.btn-danger,.btn.btn-danger{background:#ef0e5d;box-shadow:0 2px #8f0838}button.btn-danger:hover,.btn.btn-danger:hover{box-shadow:0 2px 0 1px #8f0838 inset}button.btn-danger:focus,.btn.btn-danger:focus{background:#8f0838}button.btn-wire-danger,.btn.btn-wire-danger{background:transparent;box-shadow:none;border:2px solid rgb(239,14,93);color:#fffc}button.btn-wire-danger i.btn-match,.btn.btn-wire-danger i.btn-match{color:#ef0e5d}button.btn-wire-danger:hover,.btn.btn-wire-danger:hover{background:#ef0e5d0d;border-color:#bf0b4a;color:#bf0b4a;box-shadow:none}button.btn-wire-danger:focus,.btn.btn-wire-danger:focus{border-color:#8f0838;background:transparent}button.btn-danger-alt,.btn.btn-danger-alt{background:#c20941;box-shadow:0 2px #610420}button.btn-danger-alt:hover,.btn.btn-danger-alt:hover{box-shadow:0 2px 0 1px #610420 inset}button.btn-danger-alt:focus,.btn.btn-danger-alt:focus{background:#610420}button.btn-wire-danger-alt,.btn.btn-wire-danger-alt{background:transparent;box-shadow:none;border:2px solid rgb(194,9,65);color:#fffc}button.btn-wire-danger-alt i.btn-match,.btn.btn-wire-danger-alt i.btn-match{color:#c20941}button.btn-wire-danger-alt:hover,.btn.btn-wire-danger-alt:hover{background:#c209410d;border-color:#910731;color:#910731;box-shadow:none}button.btn-wire-danger-alt:focus,.btn.btn-wire-danger-alt:focus{border-color:#610420;background:transparent}button.btn-purple,.btn.btn-purple{background:#bc48ff;box-shadow:0 2px #8f00e1}button.btn-purple:hover,.btn.btn-purple:hover{box-shadow:0 2px 0 1px #8f00e1 inset}button.btn-purple:focus,.btn.btn-purple:focus{background:#8f00e1}button.btn-wire-purple,.btn.btn-wire-purple{background:transparent;box-shadow:none;border:2px solid rgb(188,72,255);color:#fffc}button.btn-wire-purple i.btn-match,.btn.btn-wire-purple i.btn-match{color:#bc48ff}button.btn-wire-purple:hover,.btn.btn-wire-purple:hover{background:#bc48ff0d;border-color:#a915ff;color:#a915ff;box-shadow:none}button.btn-wire-purple:focus,.btn.btn-wire-purple:focus{border-color:#8f00e1;background:transparent}button.btn-purple-alt,.btn.btn-purple-alt{background:#692fbd;box-shadow:0 2px #3c1b6b}button.btn-purple-alt:hover,.btn.btn-purple-alt:hover{box-shadow:0 2px 0 1px #3c1b6b inset}button.btn-purple-alt:focus,.btn.btn-purple-alt:focus{background:#3c1b6b}button.btn-wire-purple-alt,.btn.btn-wire-purple-alt{background:transparent;box-shadow:none;border:2px solid rgb(105,47,189);color:#fffc}button.btn-wire-purple-alt i.btn-match,.btn.btn-wire-purple-alt i.btn-match{color:#692fbd}button.btn-wire-purple-alt:hover,.btn.btn-wire-purple-alt:hover{background:#692fbd0d;border-color:#522594;color:#522594;box-shadow:none}button.btn-wire-purple-alt:focus,.btn.btn-wire-purple-alt:focus{border-color:#3c1b6b;background:transparent}button.btn-neutral,.btn.btn-neutral{background:#464646;box-shadow:0 2px #131313}button.btn-neutral:hover,.btn.btn-neutral:hover{box-shadow:0 2px 0 1px #131313 inset}button.btn-neutral:focus,.btn.btn-neutral:focus{background:#131313}button.btn-wire-neutral,.btn.btn-wire-neutral{background:transparent;box-shadow:none;border:2px solid rgb(70,70,70);color:#fffc}button.btn-wire-neutral i.btn-match,.btn.btn-wire-neutral i.btn-match{color:#464646}button.btn-wire-neutral:hover,.btn.btn-wire-neutral:hover{background:#4646460d;border-color:#2d2d2d;color:#2d2d2d;box-shadow:none}button.btn-wire-neutral:focus,.btn.btn-wire-neutral:focus{border-color:#131313;background:transparent}button.btn-yellow,.btn.btn-yellow{background:#e5a123;box-shadow:0 2px #916411}button.btn-yellow:hover,.btn.btn-yellow:hover{box-shadow:0 2px 0 1px #916411 inset}button.btn-yellow:focus,.btn.btn-yellow:focus{background:#916411}button.btn-wire-yellow,.btn.btn-wire-yellow{background:transparent;box-shadow:none;border:2px solid rgb(229,161,35);color:#fffc}button.btn-wire-yellow i.btn-match,.btn.btn-wire-yellow i.btn-match{color:#e5a123}button.btn-wire-yellow:hover,.btn.btn-wire-yellow:hover{background:#e5a1230d;border-color:#be8417;color:#be8417;box-shadow:none}button.btn-wire-yellow:focus,.btn.btn-wire-yellow:focus{border-color:#916411;background:transparent}button.btn-white,.btn.btn-white{background:#fff;box-shadow:0 2px #ccc}button.btn-white:hover,.btn.btn-white:hover{box-shadow:0 2px 0 1px #ccc inset}button.btn-white:focus,.btn.btn-white:focus{background:#ccc}button.btn-wire-white,.btn.btn-wire-white{background:transparent;box-shadow:none;border:2px solid rgb(255,255,255);color:#fffc}button.btn-wire-white i.btn-match,.btn.btn-wire-white i.btn-match{color:#fff}button.btn-wire-white:hover,.btn.btn-wire-white:hover{background:#ffffff0d;border-color:#e6e6e6;color:#e6e6e6;box-shadow:none}button.btn-wire-white:focus,.btn.btn-wire-white:focus{border-color:#ccc;background:transparent}button.btn-black,.btn.btn-black{background:#000;box-shadow:0 2px #000}button.btn-black:hover,.btn.btn-black:hover{box-shadow:0 2px 0 1px #000 inset}button.btn-black:focus,.btn.btn-black:focus{background:#000}button.btn-wire-black,.btn.btn-wire-black{background:transparent;box-shadow:none;border:2px solid rgb(0,0,0);color:#fffc}button.btn-wire-black i.btn-match,.btn.btn-wire-black i.btn-match{color:#000}button.btn-wire-black:hover,.btn.btn-wire-black:hover{background:#0000000d;border-color:#000;color:#000;box-shadow:none}button.btn-wire-black:focus,.btn.btn-wire-black:focus{border-color:#000;background:transparent}button.btn-youtube,.btn.btn-youtube{background:#fd3c01;box-shadow:0 2px #972401}button.btn-youtube:hover,.btn.btn-youtube:hover{box-shadow:0 2px 0 1px #972401 inset}button.btn-youtube:focus,.btn.btn-youtube:focus{background:#972401}button.btn-wire-youtube,.btn.btn-wire-youtube{background:transparent;box-shadow:none;border:2px solid rgb(253,60,1);color:#fffc}button.btn-wire-youtube i.btn-match,.btn.btn-wire-youtube i.btn-match{color:#fd3c01}button.btn-wire-youtube:hover,.btn.btn-wire-youtube:hover{background:#fd3c010d;border-color:#ca3001;color:#ca3001;box-shadow:none}button.btn-wire-youtube:focus,.btn.btn-wire-youtube:focus{border-color:#972401;background:transparent}button.btn-raspbian,.btn.btn-raspbian{background:#b61240;box-shadow:0 2px #59091f}button.btn-raspbian:hover,.btn.btn-raspbian:hover{box-shadow:0 2px 0 1px #59091f inset}button.btn-raspbian:focus,.btn.btn-raspbian:focus{background:#59091f}button.btn-wire-raspbian,.btn.btn-wire-raspbian{background:transparent;box-shadow:none;border:2px solid rgb(182,18,64);color:#fffc}button.btn-wire-raspbian i.btn-match,.btn.btn-wire-raspbian i.btn-match{color:#b61240}button.btn-wire-raspbian:hover,.btn.btn-wire-raspbian:hover{background:#b612400d;border-color:#880d30;color:#880d30;box-shadow:none}button.btn-wire-raspbian:focus,.btn.btn-wire-raspbian:focus{border-color:#59091f;background:transparent}button.btn-windows,.btn.btn-windows{background:#12a7e3;box-shadow:0 2px #0b6184}button.btn-windows:hover,.btn.btn-windows:hover{box-shadow:0 2px 0 1px #0b6184 inset}button.btn-windows:focus,.btn.btn-windows:focus{background:#0b6184}button.btn-wire-windows,.btn.btn-wire-windows{background:transparent;box-shadow:none;border:2px solid rgb(18,167,227);color:#fffc}button.btn-wire-windows i.btn-match,.btn.btn-wire-windows i.btn-match{color:#12a7e3}button.btn-wire-windows:hover,.btn.btn-wire-windows:hover{background:#12a7e30d;border-color:#0e84b4;color:#0e84b4;box-shadow:none}button.btn-wire-windows:focus,.btn.btn-wire-windows:focus{border-color:#0b6184;background:transparent}button.btn-macos,.btn.btn-macos{background:#b3bcc2;box-shadow:0 2px #7a8a95}button.btn-macos:hover,.btn.btn-macos:hover{box-shadow:0 2px 0 1px #7a8a95 inset}button.btn-macos:focus,.btn.btn-macos:focus{background:#7a8a95}button.btn-wire-macos,.btn.btn-wire-macos{background:transparent;box-shadow:none;border:2px solid rgb(179,188,194);color:#fffc}button.btn-wire-macos i.btn-match,.btn.btn-wire-macos i.btn-match{color:#b3bcc2}button.btn-wire-macos:hover,.btn.btn-wire-macos:hover{background:#b3bcc20d;border-color:#97a3ab;color:#97a3ab;box-shadow:none}button.btn-wire-macos:focus,.btn.btn-wire-macos:focus{border-color:#7a8a95;background:transparent}button.btn-debian,.btn.btn-debian{background:#cf084e;box-shadow:0 2px #6d0429}button.btn-debian:hover,.btn.btn-debian:hover{box-shadow:0 2px 0 1px #6d0429 inset}button.btn-debian:focus,.btn.btn-debian:focus{background:#6d0429}button.btn-wire-debian,.btn.btn-wire-debian{background:transparent;box-shadow:none;border:2px solid rgb(207,8,78);color:#fffc}button.btn-wire-debian i.btn-match,.btn.btn-wire-debian i.btn-match{color:#cf084e}button.btn-wire-debian:hover,.btn.btn-wire-debian:hover{background:#cf084e0d;border-color:#9e063b;color:#9e063b;box-shadow:none}button.btn-wire-debian:focus,.btn.btn-wire-debian:focus{border-color:#6d0429;background:transparent}button.btn-fedora,.btn.btn-fedora{background:#52a2da;box-shadow:0 2px #236ea3}button.btn-fedora:hover,.btn.btn-fedora:hover{box-shadow:0 2px 0 1px #236ea3 inset}button.btn-fedora:focus,.btn.btn-fedora:focus{background:#236ea3}button.btn-wire-fedora,.btn.btn-wire-fedora{background:transparent;box-shadow:none;border:2px solid rgb(82,162,218);color:#fffc}button.btn-wire-fedora i.btn-match,.btn.btn-wire-fedora i.btn-match{color:#52a2da}button.btn-wire-fedora:hover,.btn.btn-wire-fedora:hover{background:#52a2da0d;border-color:#2c8bcd;color:#2c8bcd;box-shadow:none}button.btn-wire-fedora:focus,.btn.btn-wire-fedora:focus{border-color:#236ea3;background:transparent}button.btn-ubuntu,.btn.btn-ubuntu{background:#d64514;box-shadow:0 2px #79270b}button.btn-ubuntu:hover,.btn.btn-ubuntu:hover{box-shadow:0 2px 0 1px #79270b inset}button.btn-ubuntu:focus,.btn.btn-ubuntu:focus{background:#79270b}button.btn-wire-ubuntu,.btn.btn-wire-ubuntu{background:transparent;box-shadow:none;border:2px solid rgb(214,69,20);color:#fffc}button.btn-wire-ubuntu i.btn-match,.btn.btn-wire-ubuntu i.btn-match{color:#d64514}button.btn-wire-ubuntu:hover,.btn.btn-wire-ubuntu:hover{background:#d645140d;border-color:#a73610;color:#a73610;box-shadow:none}button.btn-wire-ubuntu:focus,.btn.btn-wire-ubuntu:focus{border-color:#79270b;background:transparent}button.btn-suse,.btn.btn-suse{background:#6fb425;box-shadow:0 2px #3b5f14}button.btn-suse:hover,.btn.btn-suse:hover{box-shadow:0 2px 0 1px #3b5f14 inset}button.btn-suse:focus,.btn.btn-suse:focus{background:#3b5f14}button.btn-wire-suse,.btn.btn-wire-suse{background:transparent;box-shadow:none;border:2px solid rgb(111,180,37);color:#fffc}button.btn-wire-suse i.btn-match,.btn.btn-wire-suse i.btn-match{color:#6fb425}button.btn-wire-suse:hover,.btn.btn-wire-suse:hover{background:#6fb4250d;border-color:#558a1c;color:#558a1c;box-shadow:none}button.btn-wire-suse:focus,.btn.btn-wire-suse:focus{border-color:#3b5f14;background:transparent}button.btn-redhat,.btn.btn-redhat{background:#c60200;box-shadow:0 2px #600100}button.btn-redhat:hover,.btn.btn-redhat:hover{box-shadow:0 2px 0 1px #600100 inset}button.btn-redhat:focus,.btn.btn-redhat:focus{background:#600100}button.btn-wire-redhat,.btn.btn-wire-redhat{background:transparent;box-shadow:none;border:2px solid rgb(198,2,0);color:#fffc}button.btn-wire-redhat i.btn-match,.btn.btn-wire-redhat i.btn-match{color:#c60200}button.btn-wire-redhat:hover,.btn.btn-wire-redhat:hover{background:#c602000d;border-color:#930100;color:#930100;box-shadow:none}button.btn-wire-redhat:focus,.btn.btn-wire-redhat:focus{border-color:#600100;background:transparent}button.btn-centos,.btn.btn-centos{background:#9b4c88;box-shadow:0 2px #572a4c}button.btn-centos:hover,.btn.btn-centos:hover{box-shadow:0 2px 0 1px #572a4c inset}button.btn-centos:focus,.btn.btn-centos:focus{background:#572a4c}button.btn-wire-centos,.btn.btn-wire-centos{background:transparent;box-shadow:none;border:2px solid rgb(155,76,136);color:#fffc}button.btn-wire-centos i.btn-match,.btn.btn-wire-centos i.btn-match{color:#9b4c88}button.btn-wire-centos:hover,.btn.btn-wire-centos:hover{background:#9b4c880d;border-color:#793b6a;color:#793b6a;box-shadow:none}button.btn-wire-centos:focus,.btn.btn-wire-centos:focus{border-color:#572a4c;background:transparent}button.btn-other,.btn.btn-other{background:#e5a123;box-shadow:0 2px #916411}button.btn-other:hover,.btn.btn-other:hover{box-shadow:0 2px 0 1px #916411 inset}button.btn-other:focus,.btn.btn-other:focus{background:#916411}button.btn-wire-other,.btn.btn-wire-other{background:transparent;box-shadow:none;border:2px solid rgb(229,161,35);color:#fffc}button.btn-wire-other i.btn-match,.btn.btn-wire-other i.btn-match{color:#e5a123}button.btn-wire-other:hover,.btn.btn-wire-other:hover{background:#e5a1230d;border-color:#be8417;color:#be8417;box-shadow:none}button.btn-wire-other:focus,.btn.btn-wire-other:focus{border-color:#916411;background:transparent}@font-face{font-family:Sixtyfour;src:url(../../webfonts/Sixtyfour-Regular.ttf) format("truetype")}*{font-family:Roboto,Arial,"sans-serif";margin:0;padding:0;box-sizing:border-box}html{background-color:#111}body,html{height:100%;font-family:Arial,sans-serif}.container{display:flex;height:100vh}.horizontal{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;flex:1;align-self:stretch}.vertical{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;flex:1;align-self:stretch}main{flex:1;display:flex;flex-direction:column}main .main-container{display:flex;flex-direction:column;flex:1;overflow:hidden;align-self:stretch}main .main-container .top-content{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;padding:10px 10px 10px 15px;background:transparent;border-bottom:1px solid #222}main .main-container .top-content h1{color:#fff;font-weight:600;font-size:24px}main .main-container .top-content .top-actions{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}main .main-container .top-content .top-actions.align-right{justify-content:flex-end;margin-right:10px}main .main-container .top-content .top-actions .explr-selection-actions+.btn,main .main-container .top-content .top-actions .btn:first-child{margin-left:0!important}main .main-container .top-content .top-actions .btn,main .main-container .top-content .top-actions button{margin-left:10px}main .main-container .bottom-content{display:flex;flex-direction:row;align-self:stretch;justify-content:flex-start;align-items:flex-start;flex:1;overflow-y:auto;background:radial-gradient(circle at 0% 53%,rgba(239,14,93,.8) 10%,transparent 45%),radial-gradient(circle at 135% 53%,rgba(2,123,255,.8) 10%,transparent 95%),radial-gradient(circle at 50% 80%,rgba(14,239,95,.8) 40%,transparent 95%)}main .main-container .bottom-content .page-content{flex:2;overflow-y:auto;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;background:#000c;padding:5px}main .main-container .bottom-content .page-content .inner{flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 10px 40px;background:#111;align-self:stretch}main .main-container .bottom-content .page-panel{flex:1;overflow-y:auto;align-self:stretch;background:#111;border-top:none}main .main-container .bottom-content .page-panel.left-panel{border-right:1px solid #222;border-left:none}main .main-container .bottom-content .page-panel.left-panel.explr-explorer{flex:.5;overflow-y:auto;padding:0;background:#111;box-shadow:1px 1px .5px .5px inset #0003;max-width:250px}main .main-container .bottom-content .page-panel.right-panel{border-left:1px solid #222;border-right:none}.invisible{visibility:hidden!important}.hidden{display:none!important}.tac{text-align:center!important}.tar{text-align:right!important}a{text-decoration:none}.normal{font-weight:400!important}.bold{font-weight:700!important}.col{display:flex;flex:1;flex-direction:column;align-self:stretch}main .context-bar{padding:10px;position:sticky;top:0;z-index:1000;max-height:80px;border-bottom:1px solid #222;display:flex;flex-direction:row;align-items:center}main .context-bar .context-menu{flex:1}main .context-bar .context-menu .inner{display:flex}main .context-bar .context-menu .inner ul.pills{margin:0}main .context-bar .context-divider{width:1px;height:100%;background:#222;margin-left:20px;margin-right:20px}main .context-bar .contex-tail{margin-right:20px}main .context-bar .context-user{display:flex;margin-right:20px}main .context-bar .context-user .trigger{color:#fff}main .context-bar .context-user .trigger .avatar{width:32px;height:32px;border-radius:4px;background:#aaa;margin-right:10px;display:flex;flex-direction:row;justify-content:center;align-items:center;text-align:center;font-weight:700;font-size:14px;border:1px solid #444;color:#000}main .context-bar .context-user .trigger i{margin-top:-5px;margin-left:10px}menu{width:300px;background:#111;overflow-y:auto;overflow-x:visible;padding:20px;z-index:2000;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;border-right:1px solid #222;min-width:64px}menu h1.logo{margin:40px 0 0 10px;align-self:stretch;display:flex}menu h1.logo a{text-align:center;text-shadow:0px 0 0 #fff,0px 2px 0 #444,0 0px 0 rgb(14,239,95),-0px 0 0 rgb(2,123,255),0 -0px 0 rgb(239,14,93);text-decoration:none;background:linear-gradient(90deg,#a0a0a0 0,#bebebe 46%,#dcdcdc);-webkit-background-clip:text;color:transparent;flex:1;font-family:Sixtyfour,Work Sans,Arial,"sans-serif";align-self:stretch;padding-right:3px;font-size:20px;text-transform:uppercase;transition:all .55s cubic-bezier(.19,1,.22,1);display:flex;flex-direction:row;justify-content:center;align-items:center;position:relative}menu h1.logo a img{flex-shrink:0;width:30px;margin-right:10px;position:absolute;left:5px;transition:all .55s cubic-bezier(.19,1,.22,1)}menu h1.logo a img.after{opacity:0}menu:hover h1.logo a{text-align:center;text-shadow:3px 0 0 #fff,3px 2px 0 #444,0 3px 0 rgb(14,239,95),-3px 0 0 rgb(2,123,255),0 -3px 0 rgb(239,14,93);text-decoration:none;background:linear-gradient(90deg,#a0a0a0 0,#bebebe 46%,#dcdcdc);-webkit-background-clip:text;color:transparent}menu:hover h1.logo a img.before{opacity:0}menu:hover h1.logo a img.after{animation-duration:.2s;animation-name:logotouch}menu nav{display:flex;align-self:stretch;flex:1}menu nav ul{margin:60px 0 20px;flex:1;align-self:flex-start;display:flex;flex-direction:column;list-style:none}menu nav ul li{align-self:stretch;overflow:hidden;position:relative;transition:all .55s cubic-bezier(.19,1,.22,1);margin:10px 0;border-radius:4px}menu nav ul li a{color:#ffffffe6;font-size:16px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;flex:1;padding-top:5px;padding-bottom:5px;padding-left:10px}menu nav ul li a i{color:#fff;opacity:.2;background:transparent;display:flex;justify-content:center;align-items:center;align-self:stretch;padding:10px;width:40px;border-radius:4px;text-align:center;margin-right:20px}menu nav ul li:after{background:#fff;content:"";height:195px;left:-200px;opacity:.2;position:absolute;top:-50px;transform:rotate(35deg);transition:all .55s cubic-bezier(.19,1,.22,1);width:50px;z-index:-2;cursor:pointer}menu nav ul li.active a{color:#027bff;font-weight:700}menu nav ul li.active a i{opacity:1;background:#ffffffe6;background:#017bff}menu nav ul li:hover{background:#027bff}menu nav ul li:hover:after{z-index:2;left:120%;transition:all .55s cubic-bezier(.19,1,.22,1)}menu nav ul li:hover a{color:#fff;font-weight:700}menu nav ul li:hover a i{color:#fff;opacity:1}menu footer{background:#ffffff03;padding:20px 0;display:flex;flex-direction:row;align-self:stretch;text-align:center;justify-content:center}menu footer p{color:#444}menu footer p.version a{color:#777;font-weight:700}.dropdown{position:relative;display:flex;align-self:stretch}.dropdown.dropdown-show ul.dropdown-menu{display:flex;flex-direction:column}.dropdown .trigger{cursor:pointer;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;flex:1}.dropdown ul.dropdown-menu{position:absolute;top:100%;left:0;display:none;background-color:#222;box-shadow:0 8px 16px #0003;z-index:1000;list-style-type:none;margin:0;overflow:hidden;border-radius:4px}.dropdown ul.dropdown-menu li{padding:8px 16px;cursor:pointer;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;transition:all .55s cubic-bezier(.19,1,.22,1)}.dropdown ul.dropdown-menu li.danger:hover{background-color:#ef0e5d}.dropdown ul.dropdown-menu li:hover{background-color:#027bff}.dropdown ul.dropdown-menu li a{padding:8px 16px 8px 8px;color:#fff;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch}.dropdown ul.dropdown-menu li a i{margin-right:15px}@keyframes logotouch{0%{opacity:0}50%{opacity:1}to{opacity:0;left:27px}}button,.btn{position:relative;padding:10px 10px 8px;font-size:14px;color:#fff;cursor:pointer;border:none;border-radius:4px;background:#027bff;box-shadow:0 2px #004a9b;font-weight:700;letter-spacing:-.5px;margin-top:-2px}button i.icon-left,.btn i.icon-left{margin-right:5px}button:hover,.btn:hover{box-shadow:0 2px 0 1px #004a9b inset;color:#fffc}button:focus,.btn:focus{background:#004a9b;color:#ffffff80;box-shadow:none}button.btn-neutral,.btn.btn-neutral{color:#aaa;background:#464646;box-shadow:0 2px #2d2d2d;border:1px solid transparent}button.btn-neutral:hover,.btn.btn-neutral:hover{box-shadow:0 2px 0 1px #222 inset;background:#2d2d2d}button.btn-neutral:focus,.btn.btn-neutral:focus{background:#131313;border:1px solid #AAA}button .btn-wire-neutral,.btn .btn-wire-neutral{background:transparent;border:2px solid rgb(70,70,70);color:#fffc;box-shadow:none}button .btn-wire-neutral:hover,.btn .btn-wire-neutral:hover{background:#4646460d;border-color:#2d2d2d;color:#2d2d2d;box-shadow:none}button .btn-wire-neutral:focus,.btn .btn-wire-neutral:focus{border-color:#131313;background:transparent}button.btn-naked,.btn.btn-naked{background:transparent;box-shadow:none;border:1px solid transparent}button.btn-naked:hover,.btn.btn-naked:hover{box-shadow:0 2px 0 1px #222 inset;background:#2d2d2d}button.btn-naked:focus,.btn.btn-naked:focus{background:#131313;border:1px solid #AAA}button i.main,.btn i.main{font-size:18px}button sup,button sub,.btn sup,.btn sub{position:absolute;top:-4px;right:-4px;background:#777;border-bottom:2px solid rgb(70,70,70);color:#000;border-radius:4px;width:16px;height:16px;text-align:center;display:flex;justify-content:center;align-items:center;padding-top:2px;padding-bottom:1px}button sup i,button sub i,.btn sup i,.btn sub i{color:#fff;font-size:10px}.alert{padding:20px;align-self:stretch;display:flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px}.alert a{color:inherit;margin-left:4px;margin-right:4px;text-decoration:underline}.alert-info{color:#027bff;background:#027bff33}.alert-success{color:#0eef5f;background:#0eef5f33}.alert-danger,.alert-error{color:#ef0e5d;background:#ef0e5d33}.alert i{margin-right:13px}ul.explr-tree{height:100%!important}ul.explr-tree li{position:relative}ul.explr-tree li span{color:#555;font-size:13px;padding-left:5px;cursor:pointer}ul.explr-tree li span.explr-plus,ul.explr-tree li span.explr-minus{z-index:1}ul.explr-tree li span.explr-plus:hover,ul.explr-tree li span.explr-minus:hover{color:#aaa}ul.explr-tree li i.main{font-size:14px}ul.explr-tree li sup,ul.explr-tree li sub{position:absolute;top:0;left:5px;background:#777;border-bottom:2px solid rgb(70,70,70);color:#000;border-radius:4px;text-align:center;display:flex;justify-content:center;align-items:center;padding-top:2px;padding-bottom:1px}ul.explr-tree li sup i,ul.explr-tree li sub i{color:#fff;font-size:4px!important;margin-bottom:0}ul.explr-tree li a{color:#fff;padding-right:80px}ul.explr-tree li a:hover{color:#fff}ul.explr-tree li a.active{background:#ffffff1a;border-radius:4px;font-weight:700;text-decoration:underline;margin-left:35px;padding-left:5px;margin-right:10px}.explr-selection-actions{display:none;flex-direction:row;justify-content:flex-end;align-items:center;flex:1}.explr-selection-actions button{display:none}body.explr-selection-actionable .explr-selection-actions,body.explr-selection-actionable.explr-selection-folder .explr-selection-actions button.explr-selection-folder,body.explr-selection-actionable.explr-selection-entity .explr-selection-actions button.explr-selection-entity{display:flex}ul.explr-dirview{display:flex;flex-direction:row;flex-wrap:wrap}ul.explr-dirview li{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;flex-shrink:0;margin:18px;min-width:90px;min-height:104px;padding-top:5px;border:1px solid transparent;border-radius:4px}ul.explr-dirview li.renaming a span{display:none}ul.explr-dirview li.renaming a form{display:block}ul.explr-dirview li.highlight-drop{border:1px dotted rgba(2,123,255,.4);background:#027bff4d}ul.explr-dirview li.highlight-clicked{border:1px dotted rgba(255,255,255,.2);background:#ffffff1a}ul.explr-dirview li a{color:#bbb;text-decoration:none;flex:1;text-align:center;font-size:12px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;max-width:84px;position:relative}ul.explr-dirview li a i{font-size:64px;margin-bottom:12px;border-radius:8px}ul.explr-dirview li a sup,ul.explr-dirview li a sub{position:absolute;top:0;right:-12px;background:#777;border-bottom:2px solid rgb(70,70,70);color:#000;border-radius:4px;width:16px;height:16px;text-align:center;display:flex;justify-content:center;align-items:center;padding-top:2px;padding-bottom:1px}ul.explr-dirview li a sup i,ul.explr-dirview li a sub i{color:#fff;font-size:10px;margin-bottom:0}ul.explr-dirview li a input{width:100%;padding:0 3px}ul.explr-dirview li a input:focus{outline:none}ul.explr-dirview li a:hover{opacity:.8}ul.explr-dirview li a form{display:none}ul.explr-dirview li.new-folder a{color:#027bff}ul.explr-dirview li.new-folder a form{display:block}ul.explr-dirview .ui-draggable-dragging{z-index:20}ul.explr-dirview .ui-draggable-dragging a{opacity:1!important}.modal-explr-picker h2{margin-top:0}.modal-explr-picker .explr-tree{width:400px;max-height:300px;overflow:auto;background:#222;padding:10px 20px;border-radius:4px;margin-top:15px}.content-explr-picker{cursor:pointer}ul.pills{background:#222;padding:6px 4px 5px;box-shadow:1px 1px .5px .5px inset #0003;border:1px solid #222;border-radius:4px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;list-style:none;margin:0}ul.pills li.divider{margin:0 20px;width:1px;height:100%;background:#333}ul.pills li:hover a{opacity:.9}ul.pills li a{border-radius:4px;display:flex;flex-direction:row;justify-content:center;align-items:center;color:#fff;overflow:hidden;padding-right:30px;text-align:center;background:#0003;margin-right:5px;transition:all .25s cubic-bezier(.19,1,.22,1)}ul.pills li a span{display:flex;justify-content:center;align-items:center;margin-right:20px;height:42px;background:#0003;width:42px}ul.pills li.active a{color:#333;background:#fff;font-weight:700}ul.pills li:hover a{color:#fff;background:#027bff}ul.pills li:last-child a{margin-right:0}.breadcrumb-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;border-bottom:1px solid #222;background:transparent;padding:10px}.breadcrumb-container ul.breadcrumb{background:#222;padding:6px 4px 5px;box-shadow:1px 1px .5px .5px inset #0003;border:1px solid #222;border-radius:4px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;list-style:none;margin:0}.breadcrumb-container ul.breadcrumb li.divider{margin:0 5px}.breadcrumb-container ul.breadcrumb li.divider i{color:#aaa}.breadcrumb-container ul.breadcrumb li span,.breadcrumb-container ul.breadcrumb li a{border-radius:4px;display:flex;flex-direction:row;justify-content:center;align-items:center;color:#fff;text-align:center;padding:0 3px}.breadcrumb-container ul.breadcrumb li span i,.breadcrumb-container ul.breadcrumb li a i{margin-right:5px}.breadcrumb-container ul.breadcrumb li:hover a{color:#fff;background:#027bff}.breadcrumb-container ul.breadcrumb li:last-child a{margin-right:0}.pickers,.modals{position:fixed;background:#0006;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10000}.pickers.pickers .modals-outer .modals-inner .modal h2,.modals.pickers .modals-outer .modals-inner .modal h2{font-size:14px;line-height:18px;display:flex;margin-bottom:5px;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;color:#666}.pickers .modals-outer,.modals .modals-outer{min-width:464px;display:flex;flex-direction:column;overflow:auto;padding-bottom:2px}.pickers .modals-outer .modals-inner,.modals .modals-outer .modals-inner{background:#111;border-radius:10px;color:#333;padding:40px;box-shadow:0 2px #222;border:1px solid #222}.pickers .modals-outer .modals-inner .modal h2,.modals .modals-outer .modals-inner .modal h2{padding:0;margin:0 0 30px;font-weight:400;color:#999}.pickers .modals-outer .modals-inner .modal h3,.modals .modals-outer .modals-inner .modal h3{align-self:stretch;margin:0;font-size:14px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;color:#fff;padding-bottom:10px;text-decoration:none}.pickers .modals-outer .modals-inner .modal h3.divide,.modals .modals-outer .modals-inner .modal h3.divide{border-top:1px solid #222;margin-top:20px;padding-top:20px}#toast{visibility:hidden;min-width:250px;margin-left:-125px;background-color:#333;color:#fff;text-align:center;border-radius:4px;padding:16px;position:fixed;z-index:1;left:50%;bottom:30px;font-size:17px;border:2px dashed #222}#toast.show{visibility:visible;-webkit-animation:fadein .5s,fadeout .5s 2.5s;animation:fadein .5s,fadeout .5s 2.5s}@-webkit-keyframes fadein{0%{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@keyframes fadein{0%{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@-webkit-keyframes fadeout{0%{bottom:30px;opacity:1}to{bottom:0;opacity:0}}@keyframes fadeout{0%{bottom:30px;opacity:1}to{bottom:0;opacity:0}}table.panes{flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;align-self:stretch}table.panes tbody{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;align-self:stretch;margin:1px 1px 28px;background:#111;border-radius:4px;border:4px solid rgba(255,255,255,.05)}table.panes tbody:hover,table.panes tbody:hover tr.title-item{border-color:#027bff0d}table.panes tbody tr{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;padding:8px 18px;background:#222}table.panes tbody tr:nth-child(odd){background-color:#111}table.panes tbody tr:nth-child(odd) td.description{color:#ffffffb3}table.panes tbody tr:nth-child(2n){background-color:#141414}table.panes tbody tr td{color:#888;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex:1;font-size:14px}table.panes tbody tr td.vertical{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}table.panes tbody tr td.description{align-self:stretch}table.panes tbody tr td.value{flex:0;margin-left:20px;word-break:break-all;flex-basis:auto}table.panes tbody tr td.value i.icon-legend{font-size:10px;margin-right:10px}table.panes tbody tr td.value i.icon-value{padding:2px 2px 1px;border-radius:2px;width:16px;text-align:center}table.panes tbody tr.title-item{border-bottom:1px solid #222}table.panes tbody tr.title-item td{color:#027bffe6;font-size:16px;font-weight:700}table.panes tbody tr.title-item td i{margin-right:10px}table.panes tbody tr.title-item td .more{flex:1;text-align:right;font-size:12px;color:#888;font-weight:400;font-style:italic}table.panes tbody tr.variable-item{cursor:pointer}table.panes tbody tr.variable-item:hover{background-color:#027bff0d}table.panes tbody tr.variable-item:hover td{font-weight:700;color:#fff}table.panes tbody tr.variable-item:hover td i.icon-legend{color:#fff}table.panes tbody tr.variable-item:hover td span,table.panes tbody tr.variable-item:hover td i.icon-value{background-color:#ffffff4d;color:#fff}table.panes tbody tr.variable-item:hover td.description{color:#027bff}.tiles{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;align-self:stretch}.tiles .tiles-inner{display:flex;flex:1;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;align-self:stretch;padding:2px}.tiles .tiles-inner .tile-item{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;background:#222;align-self:stretch;color:#fff;margin:1px;padding:15px 10px 15px 15px;border-radius:4px;border-bottom:1px solid transparent}.tiles .tiles-inner .tile-item:hover,.tiles .tiles-inner .tile-item.active{background:#111;border-left:4px solid rgb(2,123,255);border-radius:4px;border-bottom:2px solid #171717}.tiles .tiles-inner .tile-item:hover:hover,.tiles .tiles-inner .tile-item.active:hover{opacity:1}.tiles .tiles-inner .tile-item.disabled .tile-tail .head-icon i{color:#444}.tiles .tiles-inner .tile-item .tile-tail{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;margin-left:10px}.tiles .tiles-inner .tile-item .tile-tail .head-icon{flex:1}.tiles .tiles-inner .tile-item .tile-tail .head-icon i{font-size:6px;color:#fff;opacity:.8;display:flex}.tiles .tiles-inner .tile-item .tile-tail .status-icons{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.tiles .tiles-inner .tile-item .tile-tail .status-icons i{font-size:16px;margin-left:10px}.tiles .tiles-inner .tile-item .tile-body{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;font-size:15px;font-weight:400;letter-spacing:.8px;line-height:22px;margin:0;flex-wrap:nowrap}.tiles .tiles-inner .tile-item .tile-metrics{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin:0}.tiles .tiles-inner .tile-item .tile-metrics .foot-span{opacity:.8;font-size:13px;font-family:Courier New}span.empty{background:#e5a1234d;color:#e5a123;text-transform:lowercase;border-radius:2px;padding:2px 4px;font-weight:700}.inner-empty{display:flex;flex:1;flex-direction:column;align-self:stretch;justify-content:center;align-items:center}.inner-empty i{font-size:90px;opacity:.3;text-shadow:0 -1px #333,0 0px .5px #444}.toggle{position:relative;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}.toggle input{display:none}.toggle input:checked+label{background:#027bff;border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 2px #222 inset}.toggle input:checked+label:after{content:"";display:block;border-radius:50%;margin-left:21px;width:18px;height:18px;transition:.2s;background:#9bcbff;box-shadow:0 2px #0063ce}.toggle label{width:44px;height:26px;border-radius:15px;background:#222;cursor:pointer;border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 2px #111 inset}.toggle label:after{content:"";display:block;border-radius:50%;width:18px;height:18px;margin:3px;background:#777;box-shadow:0 2px #000000e6;transition:.2s}.form-holder{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;align-self:stretch}.form-holder form{max-width:434px}form{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;align-self:stretch}form .alert{padding:8px 15px;font-size:14px;margin:0 0 25px}.form-group{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;align-self:stretch;width:100%;flex:1;margin-bottom:20px}.form-group label{flex:1;font-size:12px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;color:#666}.form-group label.btn-upload{color:#fff;font-size:14px;flex:0;flex-basis:auto;margin-top:5px}.form-group label.btn-upload input[type=file]{display:none}.form-group label.btn-upload input[type=text]{margin-bottom:2px;padding-left:0;margin-left:10px}.form-group label.btn-upload i{margin-left:3px;margin-right:10px}.form-group .widget{margin-top:10px;align-self:stretch;display:flex;flex-direction:row}.form-group .widget .btn{margin-left:10px}.form-group .widget.widget-unit select,.form-group .widget.widget-unit input{flex-grow:0;background:none;box-shadow:none;border:none;border-bottom:1px solid #333;border-radius:0;max-width:80px;padding-left:0;color:#fff;text-align:center}.form-group .widget.widget-unit span{font-size:12px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;margin-left:5px;color:#555}.form-group .widget div{color:#ffffffb3;font-size:14px}.form-group .widget select,.form-group .widget input,.form-group .widget textarea{outline:none;padding:8px 0 5px 8px;border-radius:2px;border:1px solid rgba(255,255,255,.05);flex:1;background:#555;box-shadow:0 2px 1px #444,0 4px 2px #333 inset;color:#ddd;font-size:14px}.form-group .widget select.input-naked,.form-group .widget select.disabled,.form-group .widget select[disabled],.form-group .widget input.input-naked,.form-group .widget input.disabled,.form-group .widget input[disabled],.form-group .widget textarea.input-naked,.form-group .widget textarea.disabled,.form-group .widget textarea[disabled]{color:#555;background:none;box-shadow:none;border:none;border-bottom:1px solid #333;border-radius:0}.form-group .widget select.input-naked,.form-group .widget input.input-naked,.form-group .widget textarea.input-naked{padding-left:0;color:#bbb}.form-group .widget select.disabled,.form-group .widget select[disabled],.form-group .widget input.disabled,.form-group .widget input[disabled],.form-group .widget textarea.disabled,.form-group .widget textarea[disabled]{border:none;background:#000;border-radius:4px}.form-group.tab-select{border-bottom:1px solid #444;display:flex;flex-direction:row;position:relative;height:48px;padding:48px 0 0;flex:0;flex-basis:auto}.form-group.tab-select .widget{height:49px;margin-top:0;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;position:absolute;top:0;left:0;border-bottom:2px solid rgb(2,123,255);color:#027bff}.form-group.tab-select .widget select{border:none;background:none;box-shadow:none;padding:10px 35px 10px 10px;margin:0;color:inherit;appearance:none;-moz-appearance:none;-webkit-appearance:none;text-align:left;font-weight:700;cursor:pointer;border-radius:4px 4px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;z-index:2}.form-group.tab-select .widget i{margin-left:10px;margin-right:0}.form-group.tab-select .widget i.triangle{margin-top:-4px;margin-left:0;position:absolute;right:10px}.form-group.form-group-horizontal{margin:10px 0 20px;flex-direction:row;justify-content:flex-start;align-items:center}.form-group.form-group-horizontal .widget{margin:0;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}.actions{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;align-self:stretch;margin:20px 0 0}.actions.actions-intermediate{margin:0}.actions button{margin-left:25px}.actions.actions-left{justify-content:flex-start}.actions.actions-left .btn{margin-left:0;margin-right:25px}.actions.actions-right{justify-content:flex-end}.actions.actions-right .btn{margin-left:10px;margin-right:0}.actions.actions-center{justify-content:center}.actions.actions-center .btn{margin-left:0;margin-right:0}.view-content-list main .main-container .content-object-input{margin-bottom:6px}.view-content-edit main .main-container .bottom-content .page-content{flex:1}.view-content-edit main .main-container .bottom-content .page-content .form-holder{margin:20px 20px 20px 10px;flex:1}.view-content-edit main .main-container .bottom-content .page-panel.right-panel{flex:2;align-self:stretch;display:flex;flex-direction:column;overflow:hidden;justify-content:flex-start;align-items:center;padding:20px}.view-content-edit main .main-container .bottom-content .page-panel.right-panel h3{color:#fff;padding:10px 10px 10px 0;margin-bottom:20px;font-size:16px;align-self:stretch;margin-left:-8px}.view-content-edit main .main-container .bottom-content .page-panel.right-panel h3 span{border-width:1px;border-style:solid;border-radius:4px;padding:4px 10px;margin-left:5px}.view-content-edit main .main-container .bottom-content .page-panel.right-panel h3 i{font-size:16px}.view-content-edit main .main-container .bottom-content .page-panel.right-panel .iframe-wrapper{display:flex;flex-direction:column;width:100%;position:relative;padding-top:56.25%;overflow:hidden;border-radius:4px;outline:4px solid rgba(255,255,255,.1)}.view-content-edit main .main-container .bottom-content .page-panel.right-panel .iframe-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.view-logs-list main .main-container .bottom-content .page-content .inner{padding-top:8px;padding-bottom:8px}.view-logs-list main .main-container .bottom-content .page-content .logs{flex:1;display:flex;flex-direction:column;align-self:stretch}.view-logs-list main .main-container .bottom-content .page-content .logs pre{flex:1;background:#000000e6;border:1px solid rgba(70,70,70,.5);border-radius:4px;font-family:monospace;color:#f2f2f2;padding:20px;overflow:auto;align-self:stretch}.view-node-player-edit main .main-container .bottom-content .page-content{flex:1}.view-node-player-edit main .main-container .bottom-content .page-content .form-holder{margin:20px 20px 20px 10px}.view-player-group-list main .main-container .players-holder ul.players{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;align-self:stretch;margin:10px 0 0;border:1px dashed #222;border-radius:4px;padding:10px}.view-player-group-list main .main-container .players-holder ul.players li.player-item{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;margin:0 0 2px}.view-player-group-list main .main-container .players-holder ul.players li.player-item .head{display:flex;flex-direction:column;justify-content:center;align-items:center;color:#999;font-size:10px;padding:10px;cursor:default}.view-player-group-list main .main-container .players-holder ul.players li.player-item:hover .infos .title{color:#fff}.view-player-group-list main .main-container .players-holder ul.players li.player-item .infos{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;color:#aaa;font-size:12px;margin-right:5px;flex:1;max-width:120px;background:#000;border:1px solid #333;border-radius:4px;padding:3px 7px}.view-player-group-list main .main-container .players-holder ul.players li.player-item .infos .title{display:block;word-break:break-all;font-size:13px;color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.view-player-group-list main .main-container .players-holder ul.players li.player-item .infos .type{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;color:#aaa;font-size:12px;margin-right:5px}.view-player-group-list main .main-container .players-holder ul.players li.player-item .body{display:block;flex-direction:row;justify-content:flex-start;align-items:center;margin:0 10px;background:#1b1b1b;padding:10px;align-self:stretch;flex:1;border-radius:4px;color:#ccc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px;font-size:12px}.view-player-group-list main .main-container .players-holder ul.players li.player-item .body span{opacity:.5;margin-right:7px;font-size:10px}.view-player-group-list main .main-container .players-holder ul.players li.player-item .tail{display:flex;flex-direction:row;justify-content:center;align-items:center}.view-player-group-list main .main-container .players-holder ul.players li.player-item .tail a{color:#fff}.view-playlist-list main .main-container p{font-size:12px;line-height:18px;display:flex;margin-bottom:5px;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;color:#666}.view-playlist-list main .main-container .modal-playlist-qrcode h2{text-align:center}.view-playlist-list main .main-container .modal-playlist-qrcode .qrcode-pic{text-align:center;display:flex;flex-direction:row;justify-content:center;align-items:center}.view-playlist-list main .main-container .modal-playlist-qrcode .qrcode-pic img{border:4px solid #555;border-radius:4px}.view-playlist-list main .main-container .modal-slide h2{font-size:20px}.view-playlist-list main .main-container .modal-slide input[disabled]{color:#aaa}.view-playlist-list main .main-container .modal-slide .slide-schedule-group select,.view-playlist-list main .main-container .modal-slide .slide-schedule-end-group select{margin-right:5px}.view-playlist-list main .main-container .modal-slide .slide-schedule-group select,.view-playlist-list main .main-container .modal-slide .slide-schedule-group input,.view-playlist-list main .main-container .modal-slide .slide-schedule-end-group select,.view-playlist-list main .main-container .modal-slide .slide-schedule-end-group input{font-size:12px;max-width:50%}.view-playlist-list main .main-container .modal-slide .slide-schedule-group select.datetimepicker,.view-playlist-list main .main-container .modal-slide .slide-schedule-group input.datetimepicker,.view-playlist-list main .main-container .modal-slide .slide-schedule-end-group select.datetimepicker,.view-playlist-list main .main-container .modal-slide .slide-schedule-end-group input.datetimepicker{margin-left:5px;padding-left:0}.view-playlist-list main .main-container .bottom-content .page-content{flex:1}.view-playlist-list main .main-container .bottom-content .page-content.with-right-panel{flex:.5}.view-playlist-list main .main-container .bottom-content .page-content .inner{padding:0}.view-playlist-list main .main-container .bottom-content .page-content .inner h3{font-size:16px;font-weight:500;color:#ddd;text-decoration:none;margin:0 0 20px}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder{margin:20px 20px 20px 10px;flex:1}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder .form-holder{margin:20px 0 0}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder .form-holder form{max-width:initial}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder .form-holder .form-group{flex-grow:0;margin-bottom:5px}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder .preview-holder .form-group{flex-grow:0;margin-bottom:0}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder h4{font-size:14px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;color:#fff;padding-bottom:10px;text-decoration:none}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder h4.divide{border-top:1px solid #222;margin-top:20px;padding-top:20px}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder .qrcode-pic{margin-top:10px}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder .qrcode-pic img{border:1px dashed #555;padding:5px;border-radius:4px}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder .preview{background:#000;border:1px solid rgba(255,255,255,.3);border-radius:4px;justify-content:center;align-items:center;align-self:stretch;display:flex;margin:10px 0 20px;height:300px}.view-playlist-list main .main-container .bottom-content .page-content .inner .playlist-holder .preview iframe{flex:1;align-self:stretch}.view-playlist-list main .main-container .bottom-content .page-content .inner .slides-holder{align-self:stretch;border-right:1px solid #222;margin:20px 10px 20px 20px;padding-right:20px;flex:1.3}.view-playlist-list main .main-container .bottom-content .page-panel.left-panel{flex:.3;max-width:initial;justify-content:center;align-items:center;display:flex}.view-player-group-list main .main-container p{font-size:12px;line-height:18px;display:flex;margin-bottom:5px;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;color:#666}.view-player-group-list main .main-container .bottom-content .page-content{flex:1}.view-player-group-list main .main-container .bottom-content .page-content .inner{padding:0}.view-player-group-list main .main-container .bottom-content .page-content .inner h3{font-size:16px;font-weight:500;color:#ddd;text-decoration:none;margin:0 0 20px}.view-player-group-list main .main-container .bottom-content .page-content .inner .node-player-group-holder{margin:20px 20px 20px 10px;flex:1}.view-player-group-list main .main-container .bottom-content .page-content .inner .node-player-group-holder .form-holder{margin:20px 0 0}.view-player-group-list main .main-container .bottom-content .page-content .inner .node-player-group-holder .form-holder form{max-width:initial}.view-player-group-list main .main-container .bottom-content .page-content .inner .node-player-group-holder .form-holder .form-group{flex-grow:0;margin-bottom:15px}.view-player-group-list main .main-container .bottom-content .page-content .inner .node-player-group-holder .preview-holder .form-group{flex-grow:0;margin-bottom:0}.view-player-group-list main .main-container .bottom-content .page-content .inner .node-player-group-holder h4{font-size:14px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;color:#fff;padding-bottom:10px;text-decoration:none}.view-player-group-list main .main-container .bottom-content .page-content .inner .node-player-group-holder h4.divide{border-top:1px solid #222;margin-top:20px;padding-top:20px}.view-player-group-list main .main-container .bottom-content .page-content .inner .node-player-group-holder .preview{background:#000;border:1px solid rgba(255,255,255,.3);border-radius:4px;justify-content:center;align-items:center;align-self:stretch;display:flex;margin:10px 0 20px;height:300px}.view-player-group-list main .main-container .bottom-content .page-content .inner .node-player-group-holder .preview iframe{flex:1;align-self:stretch}.view-player-group-list main .main-container .bottom-content .page-content .inner .players-holder{align-self:stretch;border-right:1px solid #222;margin:20px 10px 20px 20px;padding-right:20px;flex:1.3}.view-player-group-list main .main-container .bottom-content .page-panel.left-panel{flex:.3;max-width:initial;justify-content:center;align-items:center;display:flex}.view-playlist-list main .main-container .slides-holder ul.slides{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;align-self:stretch;margin:10px 0 0;border:1px dashed #222;border-radius:4px;padding:10px}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;margin:0 0 2px}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item.disabled .infos .title{color:#333}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item.disabled .infos .type i{color:#333!important}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item.disabled .body{opacity:0}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .sort{display:flex;flex-direction:column;justify-content:center;align-items:center}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .sort a{color:#999;font-size:10px;padding:10px;cursor:move}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .sort a:hover{color:#027bff}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .infos{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;color:#aaa;font-size:12px;margin-right:5px;flex:1;max-width:120px;background:#000;border:1px solid #333;border-radius:4px;padding:3px 7px}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .infos:hover .title{color:#fff}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .infos .title{display:block;word-break:break-all;font-size:13px;color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .infos .type{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;color:#aaa;font-size:12px;margin-right:5px}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .body{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;margin:0 10px;background:#1b1b1b;padding:10px;align-self:stretch;flex:1;border-radius:4px;font-size:13px;color:#fff}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .body .range{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;flex:1}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .body .range .start{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;margin-bottom:8px}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .body .range .end{display:flex;flex-direction:row;justify-content:flex-start;align-items:center}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .tail{display:flex;flex-direction:row;justify-content:center;align-items:center}.view-playlist-list main .main-container .slides-holder ul.slides li.slide-item .tail a{color:#fff}.view-plugins-list main .main-container .bottom-content .page-content .inner{padding:10px}.view-settings-list main .main-container .bottom-content .page-content .inner{padding:10px}.view-sysinfo-list main .main-container .bottom-content .page-content .inner{padding:10px} diff --git a/data/www/js/fleet/node-player-groups.js b/data/www/js/fleet/node-player-groups.js index 5a47eab..7418680 100644 --- a/data/www/js/fleet/node-player-groups.js +++ b/data/www/js/fleet/node-player-groups.js @@ -19,5 +19,30 @@ jQuery(document).ready(function ($) { $(this).remove(); }); + $(document).on('click', '.node-player-group-player-assign', function () { + const route = $(this).attr('data-route'); + showPickers('modal-node-player-explr-picker', function(node_player) { + if (!node_player.group_id || (node_player.group_id && confirm(l.js_fleet_node_player_assign_confirmation))) { + document.location.href = route.replace('__id__', node_player.id); + } + }); + }); + + $(document).on('click', '.node-player-group-unassign-player', function () { + if (confirm(l.js_fleet_node_player_delete_confirmation)) { + const $item = $(this).parents('.player-item:eq(0)'); + $item.remove(); + $.ajax({ + method: 'DELETE', + url: $(this).attr('data-route'), + headers: {'Content-Type': 'application/json'}, + success: function(response) { + $('.node-player-group-item-'+response.group_id+' .players-counter').text(response.pcounter); + } + }); + } + }); + + main(); }); diff --git a/data/www/js/fleet/node-players.js b/data/www/js/fleet/node-players.js index 1841fea..51b024e 100644 --- a/data/www/js/fleet/node-players.js +++ b/data/www/js/fleet/node-players.js @@ -11,6 +11,15 @@ jQuery(document).ready(function ($) { $('#node-player-edit-name').val(nodePlayer.name); $('#node-player-edit-host').val(nodePlayer.host); $('#node-player-edit-id').val(nodePlayer.id); + $('#node-player-edit-group-label').val(nodePlayer.group_label); + $('.group-edit-link').attr('href', 'javascript:void(0);'); + $('.form-group-for-group-id').addClass('hidden'); + + if (nodePlayer.group_id) { + $('.form-group-for-group-id').removeClass('hidden'); + $('.group-edit-link').attr('href', $('.group-edit-link').attr('data-route').replace('__id__', nodePlayer.group_id)); + } + inputOperatingSystemUpdate(); }; diff --git a/data/www/js/playlist/playlists.js b/data/www/js/playlist/playlists.js index e164296..0ec379a 100644 --- a/data/www/js/playlist/playlists.js +++ b/data/www/js/playlist/playlists.js @@ -1,11 +1,11 @@ jQuery(document).ready(function ($) { const main = function () { - const qrcodeElement = document.getElementById('qrcode'); + const $qrcode = $('#qrcode'); - if (qrcodeElement) { - new QRCode(qrcodeElement, { - text: qrcodeElement.attributes['data-qrcode-payload'].value, + if ($qrcode.length) { + new QRCode($qrcode.get(0), { + text: $qrcode.attr('data-qrcode-payload'), width: 128, height: 128, colorDark: '#222', diff --git a/data/www/scss/components/_explorer.scss b/data/www/scss/components/_explorer.scss index ce9aa44..6c17930 100644 --- a/data/www/scss/components/_explorer.scss +++ b/data/www/scss/components/_explorer.scss @@ -2,6 +2,8 @@ ul.explr-tree { height: 100% !important; li { + position: relative; + span { color: #555; font-size: 13px; @@ -18,6 +20,33 @@ ul.explr-tree { } } + i.main { + font-size: 14px; + } + + sup, + sub { + position: absolute; + top: 0; + left: 5px; + background: #777; + border-bottom: 2px solid $neutralGrey; + color: black; + border-radius: $baseRadius; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + padding-top: 2px; + padding-bottom: 1px; + + i { + color: white; + font-size: 4px !important; + margin-bottom: 0; + } + } + a { color: $white; padding-right: 80px; @@ -41,10 +70,10 @@ ul.explr-tree { .explr-selection-actions { display: none; - flex-direction: row; - justify-content: flex-end; - align-items: center; - flex: 1; + flex-direction: row; + justify-content: flex-end; + align-items: center; + flex: 1; button { display: none; @@ -125,6 +154,7 @@ ul.explr-dirview { justify-content: flex-start; align-items: center; max-width: 84px; + position: relative; i { font-size: 64px; @@ -132,6 +162,31 @@ ul.explr-dirview { border-radius: 8px; } + sup, + sub { + position: absolute; + top: 0; + right: -12px; + background: #777; + border-bottom: 2px solid $neutralGrey; + color: black; + border-radius: $baseRadius; + width: 16px; + height: 16px; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + padding-top: 2px; + padding-bottom: 1px; + + i { + color: white; + font-size: 10px; + margin-bottom: 0; + } + } + input { width: 100%; padding: 0 3px; diff --git a/data/www/scss/components/_tiles.scss b/data/www/scss/components/_tiles.scss index aadaedc..867f06a 100644 --- a/data/www/scss/components/_tiles.scss +++ b/data/www/scss/components/_tiles.scss @@ -30,10 +30,15 @@ color: $white; margin: 1px; padding: 15px 10px 15px 15px; + border-radius: $baseRadius; + border-bottom: 1px solid transparent; &:hover, &.active { background: #111; + border-left: 4px solid $seaBlue; + border-radius: $baseRadius; + border-bottom: 2px solid #171717; &:hover { opacity: 1; diff --git a/data/www/scss/forms/_forms.scss b/data/www/scss/forms/_forms.scss index b16c2ae..b5423bc 100644 --- a/data/www/scss/forms/_forms.scss +++ b/data/www/scss/forms/_forms.scss @@ -136,6 +136,11 @@ form { border-radius: 0; } + &.input-naked { + padding-left: 0; + color: #BBB; + } + &.disabled, &[disabled] { border: none; diff --git a/data/www/scss/main.scss b/data/www/scss/main.scss index c00f11b..9e40ab7 100644 --- a/data/www/scss/main.scss +++ b/data/www/scss/main.scss @@ -36,7 +36,7 @@ // Import pages styles @import 'pages/content'; @import 'pages/logs'; -@import 'pages/node_player'; +@import 'pages/node-player'; @import 'pages/playlist'; @import 'pages/player-group'; @import 'pages/slideshow'; diff --git a/data/www/scss/pages/_node-player.scss b/data/www/scss/pages/_node-player.scss new file mode 100644 index 0000000..8092dde --- /dev/null +++ b/data/www/scss/pages/_node-player.scss @@ -0,0 +1,139 @@ + +.view-node-player-list main .main-container { + +} + +.view-node-player-edit main .main-container { + + .bottom-content { + .page-content { + flex: 1; + + .form-holder { + margin: 20px 20px 20px 10px; + } + } + } +} + +.view-player-group-list main .main-container { + + .players-holder { + + ul.players { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + align-self: stretch; + margin: 10px 0 0 0; + border: 1px dashed #222; + border-radius: 4px; + padding: 10px; + + li.player-item { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + align-self: stretch; + margin: 0 0 2px 0; + + .head { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: #999; + font-size: 10px; + padding: 10px; + cursor: default; + } + + + &:hover { + .infos .title { + color: white; + } + } + + .infos { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + color: #AAA; + font-size: 12px; + margin-right: 5px; + flex: 1; + max-width: 120px; + background: $black; + border: 1px solid #333; + border-radius: $baseRadius; + padding: 3px 7px; + + .title { + display: block; + word-break: break-all; + font-size: 13px; + color: #AAA; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .type { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + color: #AAA; + font-size: 12px; + margin-right: 5px; + } + } + + .body { + display: block; + flex-direction: row; + justify-content: flex-start; + align-items: center; + margin: 0 10px 0 10px; + background: #1B1B1B; + padding: 10px; + align-self: stretch; + flex: 1; + border-radius: $baseRadius; + color: #CCC; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 360px; + font-size: 12px; + + span { + opacity: 0.5; + margin-right: 7px; + font-size: 10px; + } + } + + .tail { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + + a { + color: white; + } + } + } + } + } +} + + + + diff --git a/data/www/scss/pages/_node_player.scss b/data/www/scss/pages/_node_player.scss deleted file mode 100644 index 5043c0f..0000000 --- a/data/www/scss/pages/_node_player.scss +++ /dev/null @@ -1,22 +0,0 @@ - -.view-node-player-list main .main-container { - -} - -.view-node-player-edit main .main-container { - - .bottom-content { - .page-content { - flex: 1; - - .form-holder { - margin: 20px 20px 20px 10px; - } - } - } -} - - - - - diff --git a/lang/en.json b/lang/en.json index d1c00ec..f8c9b01 100644 --- a/lang/en.json +++ b/lang/en.json @@ -111,8 +111,13 @@ "fleet_node_player_form_label_operating_system": "OS", "fleet_node_player_form_button_cancel": "Cancel", "js_fleet_node_player_delete_confirmation": "Are you sure?", + "js_fleet_node_player_assign_confirmation": "This player is already assigned to a group and will be replaced by your selection, are you sure?", "fleet_node_player_group_page_title": "Playgroups", + "fleet_node_player_group_page_about": "About playgroup", + "fleet_node_player_group_page_player_management": "Playgroup elements", + "fleet_node_player_group_page_player_management_desc": "You can add, modify, delete players from this list. The playlist associated with this playgroup will be played on all players.", "fleet_node_player_group_button_add": "Add Playgroup", + "fleet_node_player_group_assign_player": "Assign a player", "fleet_node_player_group_panel_active": "Active Playgroups", "fleet_node_player_group_panel_empty": "Currently, there are no playgroup. %link% now.", "fleet_node_player_group_panel_th_name": "Name", @@ -233,6 +238,7 @@ "common_folder_not_empty_error": "Folder isn't empty, you must delete its content first", "common_copied": "Element copied in clipboard!", "common_host_placeholder": "raspberrypi.local or 192.168.1.85", + "common_reachable_at": "Host", "logout": "Logout", "login_error_not_found": "Bad credentials", "login_error_bad_credentials": "Bad credentials", diff --git a/lang/es.json b/lang/es.json index a9dddef..1b843d6 100644 --- a/lang/es.json +++ b/lang/es.json @@ -111,8 +111,13 @@ "fleet_node_player_form_label_operating_system": "OS", "fleet_node_player_form_button_cancel": "Cancelar", "js_fleet_node_player_delete_confirmation": "¿Estás seguro?", + "js_fleet_node_player_assign_confirmation": "Este jugador ya está asignado a un grupo y será reemplazado por tu selección, ¿estás seguro?", "fleet_node_player_group_page_title": "Playgroups", + "fleet_node_player_group_page_about": "Acerca del playgroup", + "fleet_node_player_group_page_player_management": "Elementos del playgroup", + "fleet_node_player_group_page_player_management_desc": "Puedes agregar, modificar y eliminar jugadores de esta lista. La playlist asociada con este playgroup se reproducirá en todos los jugadores.", "fleet_node_player_group_button_add": "Agregar Playgroup", + "fleet_node_player_group_assign_player": "Asignar un jugador", "fleet_node_player_group_panel_active": "Playgroup activos", "fleet_node_player_group_panel_empty": "Actualmente, no hay playgroup. %link% ahora.", "fleet_node_player_group_panel_th_name": "Nombre", @@ -233,6 +238,7 @@ "common_folder_not_empty_error": "La carpeta no está vacía, primero debes eliminar su contenido", "common_copied": "¡Elemento copiado!", "common_host_placeholder": "raspberrypi.local o 192.168.1.85", + "common_reachable_at": "Host", "logout": "Cerrar sesión", "login_error_not_found": "Credenciales incorrectas", "login_error_bad_credentials": "Credenciales incorrectas", diff --git a/lang/fr.json b/lang/fr.json index 65f7db2..5f3114d 100644 --- a/lang/fr.json +++ b/lang/fr.json @@ -112,8 +112,13 @@ "fleet_node_player_form_label_operating_system": "OS", "fleet_node_player_form_button_cancel": "Annuler", "js_fleet_node_player_delete_confirmation": "Êtes-vous sûr ?", + "js_fleet_node_player_assign_confirmation": "Ce lecteur est déjà assigné à un groupe et va être remplacé par votre sélection, êtes-vous sûr ?", "fleet_node_player_group_page_title": "Playgroups", + "fleet_node_player_group_page_about": "À propos du playgroup", + "fleet_node_player_group_page_player_management": "Elements du playgroup", + "fleet_node_player_group_page_player_management_desc": "Vous pouvez ajouter, modifier, supprimer les lecteurs depuis cette liste. La playlist associée à ce playgroup sera jouée sur tous les lecteurs.", "fleet_node_player_group_button_add": "Ajouter un Playgroup", + "fleet_node_player_group_assign_player": "Assigner un lecteur", "fleet_node_player_group_panel_active": "Playgroups", "fleet_node_player_group_panel_empty": "Actuellement, il n'y a pas de playgroup. %link% maintenant.", "fleet_node_player_group_panel_th_name": "Nom", @@ -234,6 +239,7 @@ "common_folder_not_empty_error": "Le dossier n'est pas vide, vous devez d'abord supprimer son contenu", "common_copied": "Element copié !", "common_host_placeholder": "raspberrypi.local ou 192.168.1.85", + "common_reachable_at": "Hôte", "logout": "Déconnexion", "login_error_not_found": "Identifiants invalides", "login_error_bad_credentials": "Identifiants invalides", diff --git a/lang/it.json b/lang/it.json index 6d0d5ad..6d23c0b 100644 --- a/lang/it.json +++ b/lang/it.json @@ -111,8 +111,13 @@ "fleet_node_player_form_label_operating_system": "OS", "fleet_node_player_form_button_cancel": "Cancella", "js_fleet_node_player_delete_confirmation": "Sei sicuro?", + "js_fleet_node_player_assign_confirmation": "Questo giocatore è già assegnato a un gruppo e verrà sostituito dalla tua selezione, sei sicuro?", "fleet_node_player_group_page_title": "Playgroups", + "fleet_node_player_group_page_about": "Informazioni sul playgroup", + "fleet_node_player_group_page_player_management": "Elementi del playgroup", + "fleet_node_player_group_page_player_management_desc": "Puoi aggiungere, modificare, eliminare giocatori da questo elenco. La playlist associata a questo playgroup verrà riprodotta su tutti i giocatori.", "fleet_node_player_group_button_add": "Aggiungi Playgroup", + "fleet_node_player_group_assign_player": "Assegna un giocatore", "fleet_node_player_group_panel_active": "Playgroup attivi", "fleet_node_player_group_panel_empty": "Attualmente, non ci sono playgroup. %link% adesso.", "fleet_node_player_group_panel_th_name": "Nome", @@ -233,6 +238,7 @@ "common_folder_not_empty_error": "La cartella non è vuota, devi prima eliminarne il contenuto", "common_copied": "Elemento copiato!", "common_host_placeholder": "raspberrypi.local o 192.168.1.85", + "common_reachable_at": "Host", "logout": "Logout", "login_error_not_found": "Credenziali errate", "login_error_bad_credentials": "Credenziali errate", diff --git a/src/controller/ContentController.py b/src/controller/ContentController.py index c914b74..88251ce 100644 --- a/src/controller/ContentController.py +++ b/src/controller/ContentController.py @@ -33,11 +33,13 @@ class ContentController(ObController): self._model_store.variable().update_by_name('last_pillmenu_slideshow', 'slideshow_content_list') working_folder_path = self._model_store.variable().get_one_by_name('last_folder_content').as_string() working_folder = self._model_store.folder().get_one_by_path(path=working_folder_path, entity=FolderEntity.CONTENT) + slides_with_content = self._model_store.slide().get_all_indexed(attribute='content_id', multiple=True) return render_template( 'slideshow/contents/list.jinja.html', foldered_contents=self._model_store.content().get_all_indexed('folder_id', multiple=True), folders_tree=self._model_store.folder().get_folder_tree(FolderEntity.CONTENT), + slides_with_content=slides_with_content, working_folder_path=working_folder_path, working_folder=working_folder, working_folder_children=self._model_store.folder().get_children(folder=working_folder, entity=FolderEntity.CONTENT, sort='created_at', ascending=False), diff --git a/src/controller/FleetNodePlayerController.py b/src/controller/FleetNodePlayerController.py index 0d96117..66c855f 100644 --- a/src/controller/FleetNodePlayerController.py +++ b/src/controller/FleetNodePlayerController.py @@ -36,9 +36,11 @@ class FleetNodePlayerController(ObController): self._model_store.variable().update_by_name('last_pillmenu_fleet', 'fleet_node_player_list') working_folder_path = self._model_store.variable().get_one_by_name('last_folder_node_player').as_string() working_folder = self._model_store.folder().get_one_by_path(path=working_folder_path, entity=FolderEntity.NODE_PLAYER) + return render_template( 'fleet/node-players/list.jinja.html', - node_players=self._model_store.node_player().get_all_indexed('folder_id', multiple=True), + foldered_node_players=self._model_store.node_player().get_all_indexed('folder_id', multiple=True), + groups=self._model_store.node_player_group().get_all_labels_indexed(), folders_tree=self._model_store.folder().get_folder_tree(FolderEntity.NODE_PLAYER), working_folder_path=working_folder_path, working_folder=working_folder, diff --git a/src/controller/FleetNodePlayerGroupController.py b/src/controller/FleetNodePlayerGroupController.py index 343b7cd..8ec0828 100644 --- a/src/controller/FleetNodePlayerGroupController.py +++ b/src/controller/FleetNodePlayerGroupController.py @@ -24,6 +24,8 @@ class FleetNodePlayerGroupController(ObController): self._app.add_url_rule('/fleet/node-player-group/add', 'fleet_node_player_group_add', self.guard_fleet(self._auth(self.fleet_node_player_group_add)), methods=['POST']) self._app.add_url_rule('/fleet/node-player-group/save', 'fleet_node_player_group_save', self.guard_fleet(self._auth(self.fleet_node_player_group_save)), methods=['POST']) self._app.add_url_rule('/fleet/node-player-group/delete/', 'fleet_node_player_group_delete', self.guard_fleet(self._auth(self.fleet_node_player_group_delete)), methods=['GET']) + self._app.add_url_rule('/fleet/node-player-group/unassign-player', 'fleet_node_player_group_unassign_player', self._auth(self.fleet_node_player_group_unassign_player), methods=['DELETE']) + self._app.add_url_rule('/fleet/node-player-group/assign-player//', 'fleet_node_player_group_assign_player', self._auth(self.fleet_node_player_group_assign_player), methods=['GET']) def fleet_node_player_group(self): return redirect(url_for('fleet_node_player_group_list', player_group_id=0)) @@ -85,3 +87,43 @@ class FleetNodePlayerGroupController(ObController): self._model_store.node_player_group().delete(player_group_id) return redirect(url_for('fleet_node_player_group')) + + def fleet_node_player_group_unassign_player(self, node_player_id: int = 0): + node_player_id = request.form['id'] if 'id' in request.form else node_player_id + node_player = self._model_store.node_player().get(node_player_id) + + if not node_player: + return redirect(url_for('fleet_node_player_group')) + + group_id = node_player.group_id + + self._model_store.node_player().update_form( + id=node_player.id, + group_id=False, + ) + self._post_update() + pcounter = self._model_store.node_player_group().get_player_counters_by_player_groups(group_id=group_id) + + return jsonify({'status': 'ok', 'pcounter': pcounter, 'group_id': group_id}) + + def fleet_node_player_group_assign_player(self, player_group_id: int = 0, player_id: int = 0): + node_player_group = self._model_store.node_player().get(player_group_id) + + if not node_player_group: + return redirect(url_for('fleet_node_player_group')) + + node_player = self._model_store.node_player().get(player_id) + + if not node_player: + return redirect(url_for('fleet_node_player_group_list', player_group_id=node_player_group.id)) + + self._model_store.node_player().update_form( + id=node_player.id, + group_id=node_player_group.id, + ) + self._post_update() + + return redirect(url_for('fleet_node_player_group_list', player_group_id=node_player_group.id)) + + def _post_update(self): + pass diff --git a/src/controller/PlaylistController.py b/src/controller/PlaylistController.py index 11a6059..7e82c07 100644 --- a/src/controller/PlaylistController.py +++ b/src/controller/PlaylistController.py @@ -35,6 +35,7 @@ class PlaylistController(ObController): durations = self._model_store.playlist().get_durations_by_playlists() working_folder_path = self._model_store.variable().get_one_by_name('last_folder_content').as_string() working_folder = self._model_store.folder().get_one_by_path(path=working_folder_path, entity=FolderEntity.CONTENT) + slides_with_content = self._model_store.slide().get_all_indexed(attribute='content_id', multiple=True) if not current_playlist and len(playlists) > 0: current_playlist = None @@ -45,6 +46,7 @@ class PlaylistController(ObController): current_playlist=current_playlist, playlists=playlists, durations=durations, + slides_with_content=slides_with_content, slides=self._model_store.slide().get_slides(playlist_id=current_playlist.id) if current_playlist else [], foldered_contents=self._model_store.content().get_all_indexed('folder_id', multiple=True), contents={content.id: {"id": content.id, "name": content.name, "type": content.type.value} for content in self._model_store.content().get_contents()}, diff --git a/src/manager/NodePlayerManager.py b/src/manager/NodePlayerManager.py index bec52d0..f61ef2e 100644 --- a/src/manager/NodePlayerManager.py +++ b/src/manager/NodePlayerManager.py @@ -113,17 +113,17 @@ class NodePlayerManager(ModelManager): def post_delete(self, node_player_id: str) -> str: return node_player_id - def update_form(self, id: int, name: str, host: Optional[str] = None, operating_system: Optional[OperatingSystem] = None, group_id: Optional[int] = None) -> NodePlayer: + def update_form(self, id: int, name: Optional[str] = None, host: Optional[str] = None, operating_system: Optional[OperatingSystem] = None, group_id: Optional[int] = None) -> NodePlayer: node_player = self.get(id) if not node_player: return form = { - "name": name, + "name": name if name else node_player.name, "host": host if host else node_player.host, "operating_system": operating_system.value if operating_system else node_player.operating_system.value, - "group_id": group_id if group_id else node_player.group_id + "group_id": None if group_id is False else group_id if group_id else node_player.group_id } self._db.update_by_id(self.TABLE_NAME, id, self.pre_update(form)) diff --git a/src/manager/SlideManager.py b/src/manager/SlideManager.py index 201ec5e..577a946 100644 --- a/src/manager/SlideManager.py +++ b/src/manager/SlideManager.py @@ -66,6 +66,20 @@ class SlideManager(ModelManager): def get_all(self, sort: bool = False) -> List[Slide]: return self.hydrate_list(self._db.get_all(self.TABLE_NAME, sort="position" if sort else None)) + def get_all_indexed(self, attribute: str = 'id', multiple=False) -> Dict[str, Slide]: + index = {} + + for item in self.get_slides(): + id = getattr(item, attribute) + if multiple: + if id not in index: + index[id] = [] + index[id].append(item) + else: + index[id] = item + + return index + def forget_for_user(self, user_id: int): slides = self.get_by("created_by = '{}' or updated_by = '{}'".format(user_id, user_id)) edits_slides = self.user_manager.forget_user_for_entity(slides, user_id) @@ -83,7 +97,10 @@ class SlideManager(ModelManager): query = "{} {}".format(query, "AND playlist_id = {}".format(playlist_id)) if content_id: - query = "{} {}".format(query, "AND content_id = {}".format(content_id)) + if isinstance(content_id, bool): + query = "{} {}".format(query, "AND content_id IS NOT NULL") + else: + query = "{} {}".format(query, "AND content_id = {}".format(content_id)) return self.get_by(query=query, sort="position") diff --git a/src/manager/VariableManager.py b/src/manager/VariableManager.py index 801a48d..6d4ed6e 100644 --- a/src/manager/VariableManager.py +++ b/src/manager/VariableManager.py @@ -137,8 +137,8 @@ class VariableManager: {"name": "last_pillmenu_configuration", "value": "settings_variable_list", "type": VariableType.STRING, "editable": False, "description": None}, {"name": "last_pillmenu_fleet", "value": "fleet_node_player_list", "type": VariableType.STRING, "editable": False, "description": None}, {"name": "last_pillmenu_security", "value": "auth_user_list", "type": VariableType.STRING, "editable": False, "description": None}, - {"name": "last_folder_content", "value": FOLDER_ROOT_PATH, "type": VariableType.STRING, "editable": False, "description": self.t('settings_variable_desc_ro_last_folder_content')}, - {"name": "last_folder_node_player", "value": FOLDER_ROOT_PATH, "type": VariableType.STRING, "editable": False, "description": self.t('settings_variable_desc_ro_last_folder_node_player')}, + {"name": "last_folder_content", "value": FOLDER_ROOT_PATH, "type": VariableType.STRING, "editable": False, "description": None}, + {"name": "last_folder_node_player", "value": FOLDER_ROOT_PATH, "type": VariableType.STRING, "editable": False, "description": None}, {"name": "last_restart", "value": time.time(), "type": VariableType.TIMESTAMP, "editable": False, "description": self.t('settings_variable_desc_ro_editable')}, {"name": "last_slide_update", "value": time.time(), "type": VariableType.TIMESTAMP, "editable": False, "description": self.t('settings_variable_desc_ro_last_slide_update')}, {"name": "refresh_player_request", "value": time.time(), "type": VariableType.TIMESTAMP, "editable": False, "description": self.t('settings_variable_desc_ro_refresh_player_request')}, diff --git a/src/model/enum/OperatingSystem.py b/src/model/enum/OperatingSystem.py index 28764cb..b5ada1e 100644 --- a/src/model/enum/OperatingSystem.py +++ b/src/model/enum/OperatingSystem.py @@ -38,3 +38,27 @@ class OperatingSystem(Enum): return 'fa-display' return 'fa-server' + + def get_color_icon(value: Enum) -> str: + if value == OperatingSystem.RASPBIAN: + return 'raspbian' + elif value == OperatingSystem.WINDOWS: + return 'windows' + elif value == OperatingSystem.MACOS: + return 'apple' + elif value == OperatingSystem.DEBIAN: + return 'debian' + elif value == OperatingSystem.FEDORA: + return 'fedora' + elif value == OperatingSystem.UBUNTU: + return 'ubuntu' + elif value == OperatingSystem.SUSE: + return 'suse' + elif value == OperatingSystem.REDHAT: + return 'redhat' + elif value == OperatingSystem.CENTOS: + return 'centos' + elif value == OperatingSystem.OTHER: + return 'other' + + return 'white' diff --git a/views/base.jinja.html b/views/base.jinja.html index 4e94a1c..73e1011 100755 --- a/views/base.jinja.html +++ b/views/base.jinja.html @@ -241,6 +241,7 @@ 'js_slideshow_content_delete_confirmation': '{{ l.js_slideshow_content_delete_confirmation }}', 'js_fleet_node_player_group_delete_confirmation': '{{ l.js_fleet_node_player_group_delete_confirmation }}', 'js_fleet_node_player_delete_confirmation': '{{ l.js_fleet_node_player_delete_confirmation }}', + 'js_fleet_node_player_assign_confirmation': '{{ l.js_fleet_node_player_assign_confirmation }}', 'js_auth_user_delete_confirmation': '{{ l.js_auth_user_delete_confirmation }}', 'js_sysinfo_restart_confirmation': '{{ l.js_sysinfo_restart_confirmation }}', 'js_sysinfo_restart_loading': '{{ l.js_sysinfo_restart_loading }}', diff --git a/views/fleet/node-players/component/explr-sidebar.jinja.html b/views/fleet/node-players/component/explr-sidebar.jinja.html index 3813175..3daeeff 100644 --- a/views/fleet/node-players/component/explr-sidebar.jinja.html +++ b/views/fleet/node-players/component/explr-sidebar.jinja.html @@ -3,7 +3,8 @@ {% set has_children = folder.children or node_player_children %}
  • - {{ folder.name }} @@ -15,9 +16,18 @@ {% endfor %} {% for node_player in node_player_children %} {% set icon = enum_operating_system.get_fa_icon(node_player.operating_system) %} + {% set color = enum_operating_system.get_color_icon(node_player.operating_system) %}
  • - - + + {% if node_player.group_id %} + + + + {% endif %} + {{ node_player.name }}
    • diff --git a/views/fleet/node-players/component/table.jinja.html b/views/fleet/node-players/component/table.jinja.html new file mode 100644 index 0000000..926fa37 --- /dev/null +++ b/views/fleet/node-players/component/table.jinja.html @@ -0,0 +1,33 @@ +
      + {% for player in players %} +
    • +
      + +
      +
      +
      + {% set icon = enum_operating_system.get_fa_icon(player.operating_system) %} + {% set color = enum_operating_system.get_color_icon(player.operating_system) %} + +
      +
      + {{ truncate(player.name|default(l.common_empty), 30, '...') }} +
      +
      +
      + {{ l.common_reachable_at }}: {{ player.host }} +
      + +
      + + + +
      +
      • + {% else %} +
      + +
      + {% endfor %} +
    \ No newline at end of file diff --git a/views/fleet/node-players/list.jinja.html b/views/fleet/node-players/list.jinja.html index 85e99e5..cb8f498 100644 --- a/views/fleet/node-players/list.jinja.html +++ b/views/fleet/node-players/list.jinja.html @@ -21,9 +21,9 @@ {% block page %}
    -{#

    #} -{# {{ l.fleet_node_player_page_title }}#} -{#

    #} + {#

    #} + {# {{ l.fleet_node_player_page_title }}#} + {#

    #}
    {{ HOOK(H_FLEET_NODE_PLAYER_TOOLBAR_ACTIONS_START) }} @@ -36,14 +36,18 @@ {{ l.common_new_folder }} -
    - -
    @@ -68,44 +72,16 @@
    - {% macro render_folder(folder) %} - {% set node_player_children = node_players[folder.id]|default([]) %} - {% set has_children = folder.children or node_player_children %} - -
  • - - {{ folder.name }} - - - {% if has_children %} -
      - {% for child in folder.children %} - {{ render_folder(child) }} - {% endfor %} - {% for node_player in node_player_children %} - {% set icon = enum_operating_system.get_fa_icon(node_player.operating_system) %} - {% set color = node_player.operating_system.value %} -
    • - - - {{ node_player.name }} - -
      • - {% endfor %} -
    - {% endif %} -
    • - {% endmacro %} - - + {% with use_href=True %} + {% include 'fleet/node-players/component/explr-sidebar.jinja.html' %} + {% endwith %}
    -
    @@ -141,15 +117,17 @@
    - +
    {% set parent_path = '/'.join(working_folder_path.rstrip('/').split('/')[:-1]) %} {% if parent_path %} -
  • - +
  • + .. @@ -158,29 +136,40 @@ {% for folder in working_folder_children %} {% set folder_path = working_folder_path ~ '/' ~ folder.name %} -
  • - +
  • + {{ truncate(folder.name, 25, '...') }}
    - - + +
    • {% endfor %} - {% for node_player in node_players[working_folder.id|default(None)]|default([]) %} + {% for node_player in foldered_node_players[working_folder.id|default(None)]|default([]) %} {% set icon = enum_operating_system.get_fa_icon(node_player.operating_system) %} {% set color = node_player.operating_system.value %} -
  • - - + {% set group_label = groups[node_player.group_id]|default(l.common_empty) %} +
  • + + + {% if node_player.group_id %} + + + + {% endif %} {{ truncate(node_player.name, 25, '...') }}
    - - + +
    • diff --git a/views/fleet/node-players/modal/add.jinja.html b/views/fleet/node-players/modal/add.jinja.html index a204a14..84f0857 100644 --- a/views/fleet/node-players/modal/add.jinja.html +++ b/views/fleet/node-players/modal/add.jinja.html @@ -17,7 +17,9 @@ + + + + +
    +
    +
    - +
    @@ -40,7 +43,7 @@
    - {% for playlist_id, playlist_name in playlists.items() %}
    +
    {% set preview_url = request.scheme ~ '://' ~ request.headers.get('host') ~ url_for('player_use', playlist_slug_or_id=current_player_group.playlist_id) %} diff --git a/views/fleet/player-group/component/table.jinja.html b/views/fleet/player-group/component/table.jinja.html index 4050193..8bdabbb 100644 --- a/views/fleet/player-group/component/table.jinja.html +++ b/views/fleet/player-group/component/table.jinja.html @@ -1,77 +1,3 @@ -{##} -{# #} -{# #} -{# #} -{# {% if AUTH_ENABLED %}#} -{# #} -{# {% endif %}#} -{# {% if PLAYLIST_ENABLED %}#} -{# #} -{# {% endif %}#} -{# #} -{# #} -{# #} -{# #} -{# #} -{# #} -{# #} -{##} -{# {% for node_player_group in node_player_groups %}#} -{# #} -{# #} -{# {% if AUTH_ENABLED %}#} -{# #} -{# {% endif %}#} -{# #} -{# #} -{# #} -{# {% endfor %}#} -{# #} -{#
    {{ l.fleet_node_player_group_panel_th_name }}#} -{# #} -{# {{ l.fleet_node_player_group_panel_th_playlist }}{{ l.fleet_node_player_group_panel_th_activity }}
    #} -{# {{ l.fleet_node_player_group_panel_empty|replace(#} -{# '%link%',#} -{# (''~l.fleet_node_player_group_button_add~'')|safe#} -{# ) }}#} -{#
    #} -{#
    #} -{# {% if node_player_group.id %}#} -{#
    {{ node_player_group.id }}
    #} -{# {% else %}#} -{#
    #} -{# {% endif %}#} -{##} -{# #} -{# {{ node_player_group.name }}#} -{#
    #} -{#     		#} -{# {% if node_player_group.id %}#} -{# {% set creator = track_created(node_player_group) %}#} -{# {% if creator.username %}#} -{# #} -{# {{ creator.username }}#} -{# #} -{# {% endif %}#} -{# {% endif %}#} -{# #} -{# {% if node_player_group.playlist_id and playlists[node_player_group.playlist_id] %}#} -{# {{ playlists[node_player_group.playlist_id] }}#} -{# {% else %}#} -{# {{ l.common_default_playlist }}#} -{# {% endif %}#} -{# #} -{# {% if node_player_group.id %}#} -{# #} -{# #} -{# #} -{# #} -{# #} -{# #} -{# {% endif %}#} -{#
    #} - -
    {% for node_player_group in node_player_groups %} diff --git a/views/fleet/player-group/modal/add.jinja.html b/views/fleet/player-group/modal/add.jinja.html index 39c9e2e..19abf02 100644 --- a/views/fleet/player-group/modal/add.jinja.html +++ b/views/fleet/player-group/modal/add.jinja.html @@ -14,7 +14,7 @@
    - {% for playlist_id, playlist_name in playlists.items() %} {% endfor %} diff --git a/views/slideshow/contents/component/explr-sidebar.jinja.html b/views/slideshow/contents/component/explr-sidebar.jinja.html index 0481b4d..877b815 100644 --- a/views/slideshow/contents/component/explr-sidebar.jinja.html +++ b/views/slideshow/contents/component/explr-sidebar.jinja.html @@ -3,7 +3,8 @@ {% set has_children = folder.children or content_children %}
  • - {{ folder.name }} @@ -14,11 +15,20 @@ {{ render_folder(child) }} {% endfor %} {% for content in content_children %} + {% set slides = slides_with_content[content.id]|default([]) %} {% set icon = enum_content_type.get_fa_icon(content.type) %} {% set color = enum_content_type.get_color_icon(content.type) %}
  • - + {% if slides|length > 0 %} + + + + {% endif %} + {{ content.name }}
    • diff --git a/views/slideshow/contents/list.jinja.html b/views/slideshow/contents/list.jinja.html index 593fcc7..d4af6a9 100644 --- a/views/slideshow/contents/list.jinja.html +++ b/views/slideshow/contents/list.jinja.html @@ -22,9 +22,9 @@ {% block page %}
    -{#

    #} -{# {{ l.slideshow_content_page_title }}#} -{#

    #} + {#

    #} + {# {{ l.slideshow_content_page_title }}#} + {#

    #}
    {{ HOOK(H_SLIDESHOW_CONTENT_TOOLBAR_ACTIONS_START) }} @@ -46,7 +46,8 @@ -