* 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]
This commit is contained in:
oldkid 2025-02-20 07:44:03 +01:00
parent c95e4ee78f
commit 6a2df62429
6 changed files with 753 additions and 449 deletions

View file

@ -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,9 +2970,7 @@ p.wall-item-announce,
padding-left: 10px !important;
padding-right: 10px !important;
}
.media hr,
aside hr,
section hr {
.media hr, aside hr, section hr {
border-color: var(--nav-bg);
}
/* keep mentions and tags from spilling out */
@ -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;

View file

@ -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';

View file

@ -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;

View file

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

View file

@ -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;

View file

@ -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;