Improved: Extension manager: new style (#4181)

* new HTML structure. Delete-button moved to slider

* Base template

* dark templates

* fix the position of the circle

* fixed HTML

* fix for netsurf

* Netsurf 2: check if it works

* fix phps

* Update details.phtml

* themes

* fix code smell

* Update adark.rtl.css

* Update dark.rtl.css

* fix code smell

* fix code smell

* fix empty line

* readonly mode

* Update template.rtl.css

* Update details.phtml

* Update disabled-light.svg

* optimized SVG files

* Update app/views/helpers/extension/details.phtml

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

17 files changed, 327 insertions, 0 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 52f24b915..8106b3a46 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -205,6 +205,15 @@ a.btn {
 	box-shadow: none;
 }
 
+/*=== switches */
+.switch.active {
+	background-color: #0062b7;
+}
+
+.switch.active:hover {
+	background-image: url('./icons/disabled-light.svg');
+}
+
 /*=== Navigation */
 .nav-list .nav-header,
 .nav-list .item {
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 9d949f76a..f1939a7be 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -205,6 +205,15 @@ a.btn {
 	box-shadow: none;
 }
 
+/*=== switches */
+.switch.active {
+	background-color: #0062b7;
+}
+
+.switch.active:hover {
+	background-image: url('./icons/disabled-light.svg');
+}
+
 /*=== Navigation */
 .nav-list .nav-header,
 .nav-list .item {
diff --git a/p/themes/Alternative-Dark/icons/disabled-light.svg b/p/themes/Alternative-Dark/icons/disabled-light.svg
new file mode 100644
index 000000000..8542db156
--- /dev/null
+++ b/p/themes/Alternative-Dark/icons/disabled-light.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+  <path fill="#bebebe" d="M45 764h1.031c.255.011.51.129.688.313l2.282 2.28 2.312-2.28c.266-.23.447-.3.688-.31h1v1c0 .286-.035.55-.25.75l-2.281 2.28 2.25 2.25c.188.19.28.45.28.72v1h-1c-.265 0-.53-.092-.718-.28L49 769.442l-2.281 2.28c-.188.19-.454.28-.72.28h-1v-1c0-.266.094-.531.282-.72l2.281-2.25-2.28-2.28a.906.906 0 0 1-.282-.75v-1z" color="#bebebe" style="block-progression:tb;text-indent:0;text-align:start;text-transform:none" transform="translate(-41 -760)"/>
+</svg>
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index f94a26b2b..56b293f80 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -238,6 +238,20 @@ a.btn {
 	background: #801;
 }
 
+/*=== switches */
+.switch {
+	background-color: #333;
+}
+
+.switch.active {
+	background-color: #6986b2;
+}
+
+.switch::before,
+.switch:hover::before {
+	background-color: black;
+}
+
 /*=== Navigation */
 .nav-list .nav-header,
 .nav-list .item {
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index fa7adfb06..1019c1c48 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -238,6 +238,20 @@ a.btn {
 	background: #801;
 }
 
+/*=== switches */
+.switch {
+	background-color: #333;
+}
+
+.switch.active {
+	background-color: #6986b2;
+}
+
+.switch::before,
+.switch:hover::before {
+	background-color: black;
+}
+
 /*=== Navigation */
 .nav-list .nav-header,
 .nav-list .item {
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 3822c7c35..52200ab88 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -249,6 +249,14 @@ a.btn {
 	background: #c0392b;
 }
 
+.switch.active {
+	background-color: #2980b9;
+}
+
+.switch.active:hover {
+	background-image: url('./icons/disabled-light.svg');
+}
+
 /*=== Navigation */
 .nav-list .nav-header,
 .nav-list .item {
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index ff9836b6d..7fa4b4ab2 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -249,6 +249,14 @@ a.btn {
 	background: #c0392b;
 }
 
+.switch.active {
+	background-color: #2980b9;
+}
+
+.switch.active:hover {
+	background-image: url('./icons/disabled-light.svg');
+}
+
 /*=== Navigation */
 .nav-list .nav-header,
 .nav-list .item {
diff --git a/p/themes/Flat/icons/disabled-light.svg b/p/themes/Flat/icons/disabled-light.svg
new file mode 100644
index 000000000..c46f71801
--- /dev/null
+++ b/p/themes/Flat/icons/disabled-light.svg
@@ -0,0 +1,3 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
+  <path style="block-progression:tb;text-indent:0;text-align:start;text-transform:none" d="M45 764h1.031c.255.011.51.129.688.313l2.282 2.28 2.312-2.28c.266-.23.447-.3.688-.31h1v1c0 .286-.035.55-.25.75l-2.281 2.28 2.25 2.25c.188.19.28.45.28.72v1h-1c-.265 0-.53-.092-.718-.28L49 769.442l-2.281 2.28c-.188.19-.454.28-.72.28h-1v-1c0-.266.094-.531.282-.72l2.281-2.25-2.28-2.28a.906.906 0 0 1-.282-.75v-1z" fill="#bebebe" color="#bebebe" transform="translate(-41 -760)"/>
+</svg>
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index f06dd9e8a..53fc593e7 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -1039,6 +1039,10 @@ a.btn {
 	text-shadow: 0 0 10px #666;
 }
 
+.switch.active {
+	background-color: #d18114;
+}
+
 /*=== Navigation menu (for articles) */
 #nav_entries {
 	background: linear-gradient(180deg, #222 0%, #171717 100%) #222;
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index 6c512caf6..7ec1e75d0 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -1039,6 +1039,10 @@ a.btn {
 	text-shadow: 0 0 10px #666;
 }
 
+.switch.active {
+	background-color: #d18114;
+}
+
 /*=== Navigation menu (for articles) */
 #nav_entries {
 	background: linear-gradient(-180deg, #222 0%, #171717 100%) #222;
diff --git a/p/themes/Swage/icons/disabled-light.svg b/p/themes/Swage/icons/disabled-light.svg
new file mode 100644
index 000000000..c46f71801
--- /dev/null
+++ b/p/themes/Swage/icons/disabled-light.svg
@@ -0,0 +1,3 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
+  <path style="block-progression:tb;text-indent:0;text-align:start;text-transform:none" d="M45 764h1.031c.255.011.51.129.688.313l2.282 2.28 2.312-2.28c.266-.23.447-.3.688-.31h1v1c0 .286-.035.55-.25.75l-2.281 2.28 2.25 2.25c.188.19.28.45.28.72v1h-1c-.265 0-.53-.092-.718-.28L49 769.442l-2.281 2.28c-.188.19-.454.28-.72.28h-1v-1c0-.266.094-.531.282-.72l2.281-2.25-2.28-2.28a.906.906 0 0 1-.282-.75v-1z" fill="#bebebe" color="#bebebe" transform="translate(-41 -760)"/>
+</svg>
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index ab31b5de0..03b7be3b5 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -38,6 +38,14 @@ select:invalid {
 	clear: both;
 }
 
+.switch.active {
+	background-color: #0062be;
+}
+
+.switch.active:hover {
+	background-image: url('./icons/disabled-light.svg');
+}
+
 #nav_entries, .notification, #new-article, .aside, .header > .item.title, .stick.configure-feeds {
 	width: 231px;
 }
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index ea673b91d..65aa1f3a8 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -38,6 +38,14 @@ select:invalid {
 	clear: both;
 }
 
+.switch.active {
+	background-color: #0062be;
+}
+
+.switch.active:hover {
+	background-image: url('./icons/disabled-light.svg');
+}
+
 #nav_entries, .notification, #new-article, .aside, .header > .item.title, .stick.configure-feeds {
 	width: 231px;
 }
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index b6111788e..0a03a80d4 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -298,6 +298,102 @@ a.btn {
 	font-weight: bold;
 }
 
+/*=== switch */
+.switch {
+	margin: 0 0.5em;
+	padding: revert;
+	position: relative;
+	width: 3.5em;
+	height: 1.75em;
+	border: 0;
+	border-radius: 1em;
+	background-color: #ccc;
+	cursor: pointer;
+	box-sizing: content-box;
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-image: url('../icons/disabled.svg');
+	transition: background-position 0.5s;
+}
+
+.switch:not([disabled]):hover {
+	background-image: url('../icons/enabled.svg');
+	background-repeat: no-repeat;
+	background-position: right 7px center;
+}
+
+.switch.active {
+	background-color: rgb(133, 216, 133);
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-image: url('../icons/enabled.svg');
+}
+
+.switch.active:not([disabled]):hover {
+	background-position: left 7px center;
+	background-repeat: no-repeat;
+	background-image: url('../icons/disabled.svg');
+}
+
+@supports selector(.switch::before) {
+	.switch {
+		background-image: none;
+	}
+
+	.switch.active {
+		background-image: none;
+	}
+}
+
+/* ::before = circle */
+.switch::before {
+	content: "";
+	position: absolute;
+	left: 5px;
+	right: unset;
+	top: 0.2em;
+	width: 1.5em;
+	height: 1.5em;
+	background-color: #fff;
+	background-image: url('../icons/disabled.svg');
+	background-repeat: no-repeat;
+	background-position: center center;
+	border-radius: 50%;
+	transition: left 0.6s, right 0.6s;
+}
+
+.switch:not([disabled]):hover::before {
+	background-color: #eee;
+}
+
+.switch.active::before {
+	background-image: url('../icons/enabled.svg');
+	background-position: center center;
+	left: unset;
+	right: 5px;
+}
+
+.switch.active:not([disabled]):hover::before {
+	right: 8px;
+}
+
+/* ::after = background */
+.switch::after {
+	content: "";
+	position: absolute;
+	top: 50%;
+	right: 8px;
+	width: 12px;
+	height: 12px;
+	transform: translateY(-50%);
+}
+
+.switch.active::after {
+	width: 14px;
+	height: 14px;
+	left: 8px;
+}
+
 .btn:focus-visible,
 input[type="checkbox"]:focus-visible {
 	outline: 2px solid #ccc;
@@ -337,6 +433,23 @@ input[type="checkbox"]:focus-visible {
 	display: table-cell;
 }
 
+/*=== manage-list */
+.manage-list {
+	list-style: none;
+}
+
+.manage-list li {
+	line-height: 2;
+}
+
+.manage-list li * {
+	vertical-align: middle;
+}
+
+.manage-list .disabled {
+	font-style: italic;
+}
+
 /*=== Dropdown */
 .dropdown {
 	position: relative;
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index eeb4c69f5..fdf094b9c 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -298,6 +298,102 @@ a.btn {
 	font-weight: bold;
 }
 
+/*=== switch */
+.switch {
+	margin: 0 0.5em;
+	padding: revert;
+	position: relative;
+	width: 3.5em;
+	height: 1.75em;
+	border: 0;
+	border-radius: 1em;
+	background-color: #ccc;
+	cursor: pointer;
+	box-sizing: content-box;
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-image: url('../icons/disabled.svg');
+	transition: background-position 0.5s;
+}
+
+.switch:not([disabled]):hover {
+	background-image: url('../icons/enabled.svg');
+	background-repeat: no-repeat;
+	background-position: left 7px center;
+}
+
+.switch.active {
+	background-color: rgb(133, 216, 133);
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-image: url('../icons/enabled.svg');
+}
+
+.switch.active:not([disabled]):hover {
+	background-position: right 7px center;
+	background-repeat: no-repeat;
+	background-image: url('../icons/disabled.svg');
+}
+
+@supports selector(.switch::before) {
+	.switch {
+		background-image: none;
+	}
+
+	.switch.active {
+		background-image: none;
+	}
+}
+
+/* ::before = circle */
+.switch::before {
+	content: "";
+	position: absolute;
+	right: 5px;
+	left: unset;
+	top: 0.2em;
+	width: 1.5em;
+	height: 1.5em;
+	background-color: #fff;
+	background-image: url('../icons/disabled.svg');
+	background-repeat: no-repeat;
+	background-position: center center;
+	border-radius: 50%;
+	transition: right 0.6s, left 0.6s;
+}
+
+.switch:not([disabled]):hover::before {
+	background-color: #eee;
+}
+
+.switch.active::before {
+	background-image: url('../icons/enabled.svg');
+	background-position: center center;
+	right: unset;
+	left: 5px;
+}
+
+.switch.active:not([disabled]):hover::before {
+	left: 8px;
+}
+
+/* ::after = background */
+.switch::after {
+	content: "";
+	position: absolute;
+	top: 50%;
+	left: 8px;
+	width: 12px;
+	height: 12px;
+	transform: translateY(-50%);
+}
+
+.switch.active::after {
+	width: 14px;
+	height: 14px;
+	right: 8px;
+}
+
 .btn:focus-visible,
 input[type="checkbox"]:focus-visible {
 	outline: 2px solid #ccc;
@@ -337,6 +433,23 @@ input[type="checkbox"]:focus-visible {
 	display: table-cell;
 }
 
+/*=== manage-list */
+.manage-list {
+	list-style: none;
+}
+
+.manage-list li {
+	line-height: 2;
+}
+
+.manage-list li * {
+	vertical-align: middle;
+}
+
+.manage-list .disabled {
+	font-style: italic;
+}
+
 /*=== Dropdown */
 .dropdown {
 	position: relative;
diff --git a/p/themes/icons/disabled.svg b/p/themes/icons/disabled.svg
new file mode 100644
index 000000000..cc16ff83d
--- /dev/null
+++ b/p/themes/icons/disabled.svg
@@ -0,0 +1,3 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
+  <path style="block-progression:tb;text-indent:0;text-align:start;text-transform:none" d="M45 764h1.031c.255.011.51.129.688.313l2.282 2.28 2.312-2.28c.266-.23.447-.3.688-.31h1v1c0 .286-.035.55-.25.75l-2.281 2.28 2.25 2.25c.188.19.28.45.28.72v1h-1c-.265 0-.53-.092-.718-.28L49 769.442l-2.281 2.28c-.188.19-.454.28-.72.28h-1v-1c0-.266.094-.531.282-.72l2.281-2.25-2.28-2.28a.906.906 0 0 1-.282-.75v-1z" color="#bebebe" transform="translate(-41 -760)" fill="#666"/>
+</svg>
diff --git a/p/themes/icons/enabled.svg b/p/themes/icons/enabled.svg
new file mode 100644
index 000000000..dbdcfdbc6
--- /dev/null
+++ b/p/themes/icons/enabled.svg
@@ -0,0 +1,3 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
+  <path style="text-indent:0;text-align:start;text-transform:none" d="m195.221 751.057-.191.943v.031c-.011.255-.128.51-.313.688l-7.635 5.726-3.802-5.726a1.014 1.014 0 0 1-.281-.72l.095-.97.905-.03c.265.001.53.094.718.282l2.901 4.21 5.662-4.21a.909.909 0 0 1 .75-.281z" color="#bebebe" transform="rotate(-16.594 -2459.23 999.346)" fill="#666"/>
+</svg>