[frio] Make settings/addon look like settings/display

view/theme/frio/css/style.css

@@ -2678,6 +2678,53 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
     margin-left: 20px;
 }
 
+/* Emulates Bootstrap display */
+.settings-block {
+	margin: 0 -15px 5px;
+	color: #333;
+	background-color: rgba(255,255,255,0.95);
+	border-radius: 4px;
+	padding: 10px 15px;
+	box-shadow: 0 0 3px #dadada;
+    -webkit-box-shadow: 0 0 3px #dadada;
+    -moz-box-shadow: 0 0 3px #dadada;
+}
+
+.settings-block.fakelink, .settings-block > .fakelink {
+	padding: 10px 25px;
+	display: block;
+}
+.settings-block > .fakelink {
+	margin: -10px -15px 10px -15px;
+	border-radius: 4px 4px 0 0;
+}
+
+.settings-block.fakelink:hover, .settings-block > .fakelink:hover {
+	color: $link_hover_color;
+}
+.settings-block.fakelink > h3, .settings-block > .fakelink > h3 {
+	margin: 0;
+	padding: 0;
+	color: $link_color;
+	font-size: 18px;
+}
+
+.fakelink > h3:before {
+	padding-right: 10px;
+}
+.settings-block.fakelink > h3:before {
+	font-family: FontAwesome;
+    content: "\f0da"; /* Right Plain Pointer */
+}
+.settings-block > .fakelink > h3:before {
+	font-family: FontAwesome;
+    content: "\f0d7"; /* Bottom Plain Pointer */
+}
+
+h3.connector {
+	line-height: 40px;
+}
+
 /* Intro Notifications */
 ul.notif-network-list {
     margin-left: -15px;

view/theme/frio/templates/settings/addons.tpl

@@ -0,0 +1,12 @@
+<div class="generic-page-wrapper">
+	{{* include the title template for the settings title *}}
+	{{include file="section_title.tpl" title=$title}}
+
+	<form action="settings/addon" method="post" autocomplete="off">
+	<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
+
+	{{$settings_addons}}
+
+	</form>
+
+</div>