* Hide horizontal rules for a cleaner look

* Minor style fixes for .panel-body and .help-block
* Removed box-shadow from .wall-item-comment-wrapper
* Added `$contentbg_transp` back as "Frio" default stylesheet slipstream needs it.
* Fixed Settings > Channels panel padding and Submit button alignment
* Redesigned Calculator Add-On [Issue #8]
* Fixed Compose text formatting rollover effect [Issue #9]

bookface_auto.css

@@ -304,7 +304,7 @@
 #content .nav > li > .btn-link:hover,
 #content .nav > li > .btn-link:focus {
 	background-color: var(--link-color);
-	color: white;
+	color: white !important;
 }
 	#topbar-first #nav-notifications-menu {
 		   border: 1px solid var(--background-color) !important;
@@ -484,6 +484,12 @@
 	  margin-left: 5px !important;
 	  margin-bottom: 20px !important;
 	}
+	#settings-channels .panel {
+		padding: 0 10px 10px 10px;
+	}
+		#settings-channels button {
+			float: right;
+		}
 	#adminpage button[type="sbumit"],
 	input[type="submit"],
 	input[name="page_logs"],
@@ -684,6 +690,9 @@
 				padding-left: 10px !important;
 				padding-right: 10px !important;
 			}
+  .media hr, aside hr, section hr {
+    border-color: var(--nav-bg);
+  }
        /* keep mentions and tags from spilling out */
        #profile-page .label,
        #profile-page .label a,
@@ -847,6 +856,7 @@
 	}
 		.wall-item-comment-wrapper {
 			border: none;
+			box-shadow: none;
 		}
 		.photo-comment-wrapper .btn-sm,
 		#profile-jot-wrapper .btn-sm,
@@ -961,6 +971,14 @@
 		#upload-photo:focus {
 			background-color: darkblue !important;
 		}
+    .panel-body {
+    	background-color: var(--nav-bg);
+    	border-radius: 10px;
+    	border-top: none !important;
+    }
+    .help-block {
+    	color: var(--font-color-darker);
+    }
     /* 	HIDE ATTACHMENT BUTTON */
     .fbswitcher [data-mode="attachment"] {
            display: var(--attach-file-button) !important;
@@ -1291,6 +1309,65 @@
 .advancedcontentfilter-content-wrapper pre {
 	margin-top: 20px;
 }
+/* calculator addon */
+.calc-content-wrapper table {
+	margin: 0 auto;
+	color: #333;
+}
+.calc-content-wrapper td[colspan='5']::after {
+  	content: ' ';
+	height: 50px;
+	width: 260px;
+	background-color: black;
+	display: block;
+}
+	.calc-content-wrapper input[type='button']{
+		appearance: none;
+		height: 50px;
+		width: 100%;
+		border: 1px solid #666;
+		color: white;
+		font-size: 18px;
+		font-weight: bold;
+		background-color: #999;
+		text-align: center;
+	}
+.calc-content-wrapper input[name='plus'],
+.calc-content-wrapper input[name='minus'],
+.calc-content-wrapper input[name='multiplication'],
+.calc-content-wrapper input[name='division'],
+.calc-content-wrapper input[name='enter']{
+	background-color: orange;
+}
+.calc-content-wrapper input[name='plus']{
+	padding-left: 10px;
+}
+.calc-content-wrapper input[name='multiplication']{
+	padding-left: 14px;
+}
+.calc-content-wrapper input[name='clear'],
+.calc-content-wrapper input[name='sqareroot'],
+.calc-content-wrapper input[name='squarex'],
+.calc-content-wrapper input[name='deg-rad'],
+.calc-content-wrapper input[name='rad-deg'],
+.calc-content-wrapper input[name='sine'],
+.calc-content-wrapper input[name='arcsine'],
+.calc-content-wrapper input[name='cosine'],
+.calc-content-wrapper input[name='arccosine']{
+	background-color: #666;
+}
+.calc-content-wrapper #display {
+	appearance: none !important;
+  	font-size: 36px;
+	font-weight: lighter;
+	text-align: right;
+	color: #eee;
+	background-color: #666;
+	border: none;
+	display: block;
+	width: 260px;
+	position: absolute;
+}
 /* MISCELLANEOUS STUFF */
 div#back-to-top {
 	bottom: 65px;
@@ -2464,7 +2541,7 @@ header #banner {
 #content .nav > li > .btn-link:hover,
 #content .nav > li > .btn-link:focus {
 	background-color: var(--link-color);
-	color: white;
+	color: white !important;
 }
 #topbar-first #nav-notifications-menu {
        border: 1px solid var(--background-color) !important;
@@ -2651,6 +2728,12 @@ header #banner {
 	  margin-left: 5px !important;
 	  margin-bottom: 20px !important;
 	}
+	#settings-channels .panel {
+		padding: 0 10px 10px 10px;
+	}
+		#settings-channels button {
+			float: right;
+		}
     #adminpage button[type="submit"],
     input[type="submit"],
 	input[name="page_logs"],
@@ -2887,11 +2970,9 @@ p.wall-item-announce,
                      padding-left: 10px !important;
                      padding-right: 10px !important;
               }
-        .media hr, 
+  .media hr, aside hr, section hr {
-        aside hr, 
+    border-color: var(--nav-bg);
-        section hr {
+  }
-        	border-color: var(--nav-bg);
-        }
        /* keep mentions and tags from spilling out */
        #profile-page .label,
        #profile-page .label a,
@@ -3055,6 +3136,7 @@ p.wall-item-announce,
 }
 	.wall-item-comment-wrapper {
 		border: none;
+		box-shadow: none;
 	}
 		.photo-comment-wrapper .btn-sm,
 		#profile-jot-wrapper .btn-sm,
@@ -3175,6 +3257,14 @@ p.wall-item-announce,
      #upload-photo:focus {
         background-color: darkblue !important;
     }
+    .panel-body {
+    	background-color: var(--nav-bg);
+    	border-radius: 10px;
+    	border-top: none !important;
+    }
+    .help-block {
+    	color: var(--font-color-darker);
+    }
     /* 	HIDE ATTACHMENT BUTTON */
     .fbswitcher [data-mode="attachment"] {
            display: var(--attach-file-button) !important;
@@ -3524,6 +3614,64 @@ aside .widget li:hover {
 .advancedcontentfilter-content-wrapper pre {
 	margin-top: 20px;
 }
+/* calculator addon */
+.calc-content-wrapper table {
+	margin: 0 auto;
+	color: #333;
+}
+.calc-content-wrapper td[colspan='5']::after {
+  	content: ' ';
+	height: 50px;
+	width: 260px;
+	background-color: black;
+	display: block;
+}
+	.calc-content-wrapper input[type='button']{
+		appearance: none;
+		height: 50px;
+		width: 100%;
+		border: 1px solid #666;
+		color: white;
+		font-size: 18px;
+		font-weight: bold;
+		background-color: #999;
+		text-align: center;
+	}
+.calc-content-wrapper input[name='plus'],
+.calc-content-wrapper input[name='minus'],
+.calc-content-wrapper input[name='multiplication'],
+.calc-content-wrapper input[name='division'],
+.calc-content-wrapper input[name='enter']{
+	background-color: orange;
+}
+.calc-content-wrapper input[name='plus']{
+	padding-left: 10px;
+}
+.calc-content-wrapper input[name='multiplication']{
+	padding-left: 14px;
+}
+.calc-content-wrapper input[name='clear'],
+.calc-content-wrapper input[name='sqareroot'],
+.calc-content-wrapper input[name='squarex'],
+.calc-content-wrapper input[name='deg-rad'],
+.calc-content-wrapper input[name='rad-deg'],
+.calc-content-wrapper input[name='sine'],
+.calc-content-wrapper input[name='arcsine'],
+.calc-content-wrapper input[name='cosine'],
+.calc-content-wrapper input[name='arccosine']{
+	background-color: #666;
+}
+.calc-content-wrapper #display {
+  font-size: 36px;
+	font-weight: lighter;
+	text-align: right;
+	color: #eee;
+	background-color: #666;
+	border: none;
+	display: block;
+	width: 260px;
+	position: absolute;
+}
 /* MISCELLANEOUS STUFF */
 div#back-to-top {
 	bottom: 65px;

bookface_auto.php

@@ -32,3 +32,4 @@ $link_color = ($customColor) ? '#'.$customColor->getHex() : '#'.$accentColor->ge
 $nav_icon_color = '#65686C';
 $font_color = '#313131';
 $font_color_darker = '#333';
+$contentbg_transp = '0';

bookface_dark.css

@@ -304,7 +304,7 @@ header #banner {
 #content .nav > li > .btn-link:hover,
 #content .nav > li > .btn-link:focus {
 	background-color: var(--link-color);
-	color: white;
+	color: white !important;
 }
 #topbar-first #nav-notifications-menu {
        border: 1px solid var(--background-color) !important;
@@ -484,6 +484,12 @@ header #banner {
 	  margin-left: 5px !important;
 	  margin-bottom: 20px !important;
 	}
+	#settings-channels .panel {
+		padding: 0 10px 10px 10px;
+	}
+		#settings-channels button {
+			float: right;
+		}
     #adminpage button[type="submit"],
     input[type="submit"],
 	input[name="page_logs"],
@@ -684,6 +690,9 @@ aside .widget,
                      padding-left: 10px !important;
                      padding-right: 10px !important;
               }
+  .media hr, aside hr, section hr {
+    border-color: var(--nav-bg);
+  }
        /* keep mentions and tags from spilling out */
        #profile-page .label,
        #profile-page .label a,
@@ -847,6 +856,7 @@ aside .widget,
 }
 	.wall-item-comment-wrapper {
 		border: none;
+		box-shadow: none;
 	}
 		.photo-comment-wrapper .btn-sm,
 		#profile-jot-wrapper .btn-sm,
@@ -961,6 +971,14 @@ aside .widget,
      #upload-photo:focus {
         background-color: darkblue !important;
     }
+    .panel-body {
+    	background-color: var(--nav-bg);
+    	border-radius: 10px;
+    	border-top: none !important;
+    }
+    .help-block {
+    	color: var(--font-color-darker);
+    }
     /* 	HIDE ATTACHMENT BUTTON */
     .fbswitcher [data-mode="attachment"] {
            display: var(--attach-file-button) !important;
@@ -1288,6 +1306,65 @@ aside .widget li:hover {
 .advancedcontentfilter-content-wrapper pre {
 	margin-top: 20px;
 }
+/* calculator addon */
+.calc-content-wrapper table {
+	margin: 0 auto;
+	color: #333;
+}
+.calc-content-wrapper td[colspan='5']::after {
+  	content: ' ';
+	height: 50px;
+	width: 260px;
+	background-color: black;
+	display: block;
+}
+	.calc-content-wrapper input[type='button']{
+		appearance: none;
+		height: 50px;
+		width: 100%;
+		border: 1px solid #666;
+		color: white;
+		font-size: 18px;
+		font-weight: bold;
+		background-color: #999;
+		text-align: center;
+	}
+.calc-content-wrapper input[name='plus'],
+.calc-content-wrapper input[name='minus'],
+.calc-content-wrapper input[name='multiplication'],
+.calc-content-wrapper input[name='division'],
+.calc-content-wrapper input[name='enter']{
+	background-color: orange;
+}
+.calc-content-wrapper input[name='plus']{
+	padding-left: 10px;
+}
+.calc-content-wrapper input[name='multiplication']{
+	padding-left: 14px;
+}
+.calc-content-wrapper input[name='clear'],
+.calc-content-wrapper input[name='sqareroot'],
+.calc-content-wrapper input[name='squarex'],
+.calc-content-wrapper input[name='deg-rad'],
+.calc-content-wrapper input[name='rad-deg'],
+.calc-content-wrapper input[name='sine'],
+.calc-content-wrapper input[name='arcsine'],
+.calc-content-wrapper input[name='cosine'],
+.calc-content-wrapper input[name='arccosine']{
+	background-color: #666;
+}
+.calc-content-wrapper #display {
+	appearance: none;
+  	font-size: 36px;
+	font-weight: lighter;
+	text-align: right;
+	color: #eee;
+	background-color: #666;
+	border: none;
+	display: block;
+	width: 260px;
+	position: absolute;
+}
 /* MISCELLANEOUS STUFF */
 div#back-to-top {
 	bottom: 65px;

bookface_dark.php

@@ -34,3 +34,4 @@ $nav_icon_color = '#B0B3B8';
 $font_color = '#cccccc';
 $font_color_darker = '#acacac';
 $font_color_lighter = '#444444';
+$contentbg_transp = '0';

bookface_light.css

@@ -304,7 +304,7 @@
 #content .nav > li > .btn-link:hover,
 #content .nav > li > .btn-link:focus {
 	background-color: var(--link-color);
-	color: white;
+	color: white !important;
 }
 	#topbar-first #nav-notifications-menu {
 		   border: 1px solid var(--background-color) !important;
@@ -484,6 +484,12 @@
 	  margin-left: 5px !important;
 	  margin-bottom: 20px !important;
 	}
+	#settings-channels .panel {
+		padding: 0 10px 10px 10px;
+	}
+		#settings-channels button {
+			float: right;
+		}
 	#adminpage button[type="sbumit"],
 	input[type="submit"],
 	input[name="page_logs"],
@@ -684,6 +690,9 @@
 				padding-left: 10px !important;
 				padding-right: 10px !important;
 			}
+  .media hr, aside hr, section hr {
+    border-color: var(--nav-bg);
+  }
        /* keep mentions and tags from spilling out */
        #profile-page .label,
        #profile-page .label a,
@@ -847,6 +856,7 @@
 	}
 		.wall-item-comment-wrapper {
 			border: none;
+			box-shadow: none;
 		}
 		.photo-comment-wrapper .btn-sm,
 		#profile-jot-wrapper .btn-sm,
@@ -961,6 +971,14 @@
 		#upload-photo:focus {
 			background-color: darkblue !important;
 		}
+    .panel-body {
+    	background-color: var(--nav-bg);
+    	border-radius: 10px;
+    	border-top: none !important;
+    }
+    .help-block {
+    	color: var(--font-color-darker);
+    }
     /* 	HIDE ATTACHMENT BUTTON */
     .fbswitcher [data-mode="attachment"] {
            display: var(--attach-file-button) !important;
@@ -1288,6 +1306,65 @@
 .advancedcontentfilter-content-wrapper pre {
 	margin-top: 20px;
 }
+/* calculator addon */
+.calc-content-wrapper table {
+	margin: 0 auto;
+	color: #333;
+}
+.calc-content-wrapper td[colspan='5']::after {
+  	content: ' ';
+	height: 50px;
+	width: 260px;
+	background-color: black;
+	display: block;
+}
+	.calc-content-wrapper input[type='button']{
+		appearance: none;
+		height: 50px;
+		width: 100%;
+		border: 1px solid #666;
+		color: white;
+		font-size: 18px;
+		font-weight: bold;
+		background-color: #999;
+		text-align: center;
+	}
+.calc-content-wrapper input[name='plus'],
+.calc-content-wrapper input[name='minus'],
+.calc-content-wrapper input[name='multiplication'],
+.calc-content-wrapper input[name='division'],
+.calc-content-wrapper input[name='enter']{
+	background-color: orange;
+}
+.calc-content-wrapper input[name='plus']{
+	padding-left: 10px;
+}
+.calc-content-wrapper input[name='multiplication']{
+	padding-left: 14px;
+}
+.calc-content-wrapper input[name='clear'],
+.calc-content-wrapper input[name='sqareroot'],
+.calc-content-wrapper input[name='squarex'],
+.calc-content-wrapper input[name='deg-rad'],
+.calc-content-wrapper input[name='rad-deg'],
+.calc-content-wrapper input[name='sine'],
+.calc-content-wrapper input[name='arcsine'],
+.calc-content-wrapper input[name='cosine'],
+.calc-content-wrapper input[name='arccosine']{
+	background-color: #666;
+}
+.calc-content-wrapper #display {
+	appearance: none;
+  	font-size: 36px;
+	font-weight: lighter;
+	text-align: right;
+	color: #eee;
+	background-color: #666;
+	border: none;
+	display: block;
+	width: 260px;
+	position: absolute;
+}
 /* MISCELLANEOUS STUFF */
 div#back-to-top {
 	bottom: 65px;

bookface_light.php

@@ -31,5 +31,5 @@ $link_color = ($customColor) ? '#'.$customColor->getHex() : '#'.$accentColor->li
 $nav_icon_color = '#65686C';
 $font_color = '#313131';
 $font_color_darker = '#333';
-
+$contentbg_transp = 100;