misc/theme-flexcolor: automated style sweep and wording

This commit is contained in:
Franco Fichtner 2025-10-27 11:26:30 +01:00
parent 818440296f
commit dcb2e4d7f1
4 changed files with 79 additions and 80 deletions

View file

@ -1,6 +1,6 @@
PLUGIN_NAME= theme-flexcolor
PLUGIN_VERSION= 1.0
PLUGIN_COMMENT= OPNsense theme with 3 different color schemes (black as default, light and darklight)
PLUGIN_COMMENT= Theme with 3 different color schemes: black as default, light and dark-light
PLUGIN_MAINTAINER= iengels@web.de
PLUGIN_NO_ABI= yes

View file

@ -369,4 +369,3 @@ div {
align-items: center;
justify-content: center;
}

View file

@ -687,7 +687,7 @@ img {
.img-thumbnail {
padding: 4px;
line-height: 1.428571429;
background-color: var(--pback);
background-color: var(--pback);
border: 1px solid var(--stdborderaccent);
border-radius: 3px;
-webkit-transition: all 0.2s ease-in-out;
@ -845,7 +845,7 @@ a.text-warning:hover {
a.text-danger:hover {
color: var(--dangerhover); }
.bg-primary {
color: var(--pfore);
color: var(--pfore);
}
.bg-primary {
background-color: var(--pback); }
@ -990,7 +990,7 @@ code {
kbd {
padding: 2px 4px;
font-size: 90%;
color: var(--pfore);
color: var(--pfore);
background-color: var(--pback);
border-radius: 3px;
box-shadow: inset 0 -1px 0 rgba(61, 61, 61, 0.25); }
@ -1827,7 +1827,7 @@ th {
vertical-align: bottom; }
.table > caption + thead > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > th,
.table > thead:first-child > tr:first-child > td {
@ -2079,7 +2079,7 @@ input[type=color] {
font-size: 14px;
line-height: 1.428571429;
color: var(--txtboxfore);
background-color: var(--txtboxback);
background-color: var(--txtboxback);
background-image: none;
border: 1px solid var(--txtboxborder);
border-radius: 3px;
@ -2661,7 +2661,7 @@ select[multiple].input-lg,
color: var(--dfbtnforeactive);
background-color: var(--dfbtnbackactive);
border-color: var(--dfbtnborderactive);
background-image: none;
background-image: none;
outline: 0;
-webkit-box-shadow: var(--btnshadow1), var(--btnshadow2);
box-shadow: var(--btnshadow1), var(--btnshadow2); }
@ -2884,7 +2884,7 @@ tbody.collapse.in {
font-size: 14px;
text-align: left;
color: var(--txtboxfore);
background-color: var(--txtboxback);
background-color: var(--txtboxback);
border: 1px solid var(--txtboxborder);
background-clip: padding-box; }
.dropdown-menu.pull-right {
@ -2907,14 +2907,14 @@ tbody.collapse.in {
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { /* Listenfeld Liste drüberstreichen */
text-decoration: none;
color: var(--txtboxforehover);
background-color: var(--txtboxbackhover);
background-color: var(--txtboxbackhover);
border: 1px solid var(--txtboxborderhover);
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { /*Listenfeld Liste atkiviert */
color: var(--txtboxforeactive);
color: var(--txtboxforeactive);
background-color: var(--txtboxbackactive);
border-color: var(--txtboxborderactive);
border-color: var(--txtboxborderactive);
text-decoration: none;
outline: 0;
}
@ -3034,10 +3034,10 @@ tbody.collapse.in {
border-top-left-radius: 0; }
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
outline: 0;
color: var(--dfbtnfore);
background-color: var(--dfbtnback); }
.btn-group > .btn + .dropdown-toggle {
padding-left: 8px;
padding-right: 8px; }
@ -3273,7 +3273,7 @@ tbody.collapse.in {
.nav-pills > li > a {
border-radius: 0; }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
color: var(--pfore);
color: var(--pfore);
background-color: var(--primary); }
.nav-stacked > li {
float: none; }
@ -3317,7 +3317,7 @@ tbody.collapse.in {
.nav-tabs-justified > .active > a, .nav-tabs.nav-justified > .active > a,
.nav-tabs-justified > .active > a:hover,
.nav-tabs-justified > .active > a:focus {
border-bottom-color: var(--stdborderfore);
border-bottom-color: var(--stdborderfore);
}
}
@ -3478,7 +3478,7 @@ tbody.collapse.in {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px; }
@ -3624,7 +3624,7 @@ tbody.collapse.in {
color: var(--stdborder);
background-color: transparent; }
.navbar-default .navbar-toggle {
border-color: var(--sback);
border-color: var(--sback);
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: var(--sdbaractback); }
@ -3669,17 +3669,17 @@ tbody.collapse.in {
.navbar-inverse .navbar-brand {
color: var(--pforemuted); }
.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {
color: var(--pforeinverse);
color: var(--pforeinverse);
background-color: transparent; }
.navbar-inverse .navbar-text {
color: var(--pforemuted); }
.navbar-inverse .navbar-nav > li > a {
color: var(--pforemuted); }
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
color: var(--pforeinverse);
color: var(--pforeinverse);
background-color: transparent; }
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
color: var(--pforeinverse);
color: var(--pforeinverse);
background-color:var(--pbackinverse); }
.navbar-inverse .navbar-nav > .disabled > a, .navbar-inverse .navbar-nav > .disabled > a:hover, .navbar-inverse .navbar-nav > .disabled > a:focus {
color: var(--stdborder);
@ -3689,14 +3689,14 @@ tbody.collapse.in {
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
background-color: var(--navbarinverse); }
.navbar-inverse .navbar-toggle .icon-bar {
background-color: var(--pbackinverse);
background-color: var(--pbackinverse);
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: var(--stdborderinverse); }
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
background-color:var(--pbackinverse);
color: var(--pforeinverse);
color: var(--pforeinverse);
}
@media (max-width: 767px) {
.navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
@ -3709,11 +3709,11 @@ tbody.collapse.in {
color: var(--pforeinverse);
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
color: var(--pforeinverse);
color: var(--pforeinverse);
background-color: transparent;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
color: var(--pforeinverse);
color: var(--pforeinverse);
background-color:var(--pbackinverse);
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
@ -3724,12 +3724,12 @@ tbody.collapse.in {
.navbar-inverse .navbar-link {
color: var(--pforeinverse); }
.navbar-inverse .navbar-link:hover {
color: var(--pforeinversehover);
color: var(--pforeinversehover);
}
.navbar-inverse .btn-link {
color: var(--pforeinverse); }
.navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:focus {
color: var(--pforeinversehover);
color: var(--pforeinversehover);
}
.navbar-inverse .btn-link[disabled]:hover, .navbar-inverse .btn-link[disabled]:focus, fieldset[disabled] .navbar-inverse .btn-link:hover, fieldset[disabled] .navbar-inverse .btn-link:focus {
color: var(--pforemuted); }
@ -3762,7 +3762,7 @@ tbody.collapse.in {
line-height: 1.428571429;
text-decoration: none;
color: var(--primary);
background-color: var(--pback);
background-color: var(--pback);
border: 1px solid var(--sdbaractback);
margin-left: -1px; }
.pagination > li:first-child > a,
@ -3785,7 +3785,7 @@ tbody.collapse.in {
.pagination > .active > span:hover,
.pagination > .active > span:focus {
z-index: 2;
color: var(--pforeinverse);
color: var(--pforeinverse);
background-color: var(--primary);
border-color: var(--primary);
cursor: default; }
@ -3796,7 +3796,7 @@ tbody.collapse.in {
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
color: var(--pforemuted);
background-color: var(--pback);
background-color: var(--pback);
border-color: var(--sdbaractback);
cursor: not-allowed; }
.pagination-lg > li > a,
@ -3839,7 +3839,7 @@ tbody.collapse.in {
.pager li > span {
display: inline-block;
padding: 5px 14px;
background-color: var(--pback);
background-color: var(--pback);
border: 1px solid var(--sdbaractback);
border-radius: 15px; }
.pager li > a:hover,
@ -3857,7 +3857,7 @@ tbody.collapse.in {
.pager .disabled > a:focus,
.pager .disabled > span {
color: var(--pforemuted);
background-color: var(--pbackmuted);
background-color: var(--pbackmuted);
cursor: not-allowed; }
.label {
display: inline;
@ -3865,7 +3865,7 @@ tbody.collapse.in {
font-size: 75%;
font-weight: bold;
line-height: 1;
color: var(--pfore);
color: var(--pfore);
text-align: center;
white-space: nowrap;
vertical-align: baseline;
@ -3876,7 +3876,7 @@ tbody.collapse.in {
position: relative;
top: -1px; }
a.label:hover, a.label:focus {
color: var(--pforehover);
color: var(--pforehover);
text-decoration: none;
cursor: pointer; }
.label-default {
@ -3928,12 +3928,12 @@ a.label:hover, a.label:focus {
padding: 1px 5px; }
a.list-group-item.active > .badge, .nav-pills > .active > a > .badge {
color: var(--primary);
background-color: var(--pback);
background-color: var(--pback);
}
.nav-pills > li > a > .badge {
margin-left: 3px; }
a.badge:hover, a.badge:focus {
color: var(--pforehover);
color: var(--pforehover);
text-decoration: none;
cursor: pointer; }
.jumbotron {
@ -3974,7 +3974,7 @@ a.badge:hover, a.badge:focus {
padding: 4px;
margin-bottom: 20px;
line-height: 1.428571429;
background-color: var(--pback);
background-color: var(--pback);
border: 1px solid var(--sdbaractback);
border-radius: 3px;
-webkit-transition: all 0.2s ease-in-out;
@ -4001,7 +4001,7 @@ a.thumbnail.active {
padding: 15px;
margin-bottom: 20px;
border: 2px solid transparent;
border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 var(--boxshadow), 0 1px 0 var(--boxshadow);
box-shadow: inset 0 1px 0 var(--boxshadow), 0 1px 0 var(--boxshadow); }
.alert h4 {
@ -4175,10 +4175,10 @@ a.list-group-item .list-group-item-heading {
color: var(--sdbarfore) !important; }
a.list-group-item:hover, a.list-group-item:focus {
color: var(--sdbarhoverfore);
background: var(--sdbarhoverback);
background: var(--sdbarhoverback);
text-decoration: none; }
a.list-group-item:hover:before, a.list-group-item:focus:before {
background: var(--sdbarhoverback);
background: var(--sdbarhoverback);
content: "";
height: 42px;
left: 0;
@ -4231,7 +4231,7 @@ a.list-group-item-success:hover, a.list-group-item-success:focus {
color: var(--successhover);
background-color: var(--pback); }
a.list-group-item-success.active, a.list-group-item-success.active:hover, a.list-group-item-success.active:focus {
color: var(--pfore);
color: var(--pfore);
background-color: var(--success);
border-color: var(--pfore); }
.list-group-item-info {
@ -4245,7 +4245,7 @@ a.list-group-item-info:hover, a.list-group-item-info:focus {
color: var(--infohover);
background-color: var(--pback); }
a.list-group-item-info.active, a.list-group-item-info.active:hover, a.list-group-item-info.active:focus {
color: var(--pfore);
color: var(--pfore);
background-color: var(--info);
border-color: var(--pfore); }
.list-group-item-warning {
@ -4259,7 +4259,7 @@ a.list-group-item-warning:hover, a.list-group-item-warning:focus {
color: var(--warninghover);
background-color: var(--pback); }
a.list-group-item-warning.active, a.list-group-item-warning.active:hover, a.list-group-item-warning.active:focus {
color: var(--pfore);
color: var(--pfore);
background-color: var(--warning);
border-color: var(--pfore); }
.list-group-item-danger {
@ -4273,7 +4273,7 @@ a.list-group-item-danger:hover, a.list-group-item-danger:focus {
color: var(--dangerhover);
background-color: var(--pback); }
a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-group-item-danger.active:focus {
color: var(--pfore);
color: var(--pfore);
background-color: var(--danger);
border-color: var(--pfore); }
.list-group-item-heading {
@ -4284,14 +4284,14 @@ a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-g
line-height: 1.3; }
.panel {
margin-bottom: 20px;
background-color: var(--panelbody);
background-color: var(--panelbody);
border: 1px solid transparent;
border-radius: 3px;
-webkit-box-shadow: 0 1px 1px var(--boxshadow);
box-shadow: 0 1px 1px var(--boxshadow); }
.panel-body {
color: var(--panelinfo);
padding: 15px;
padding: 15px;
background-color: var(--panelbody); }
.panel-body:before, .panel-body:after {
content: " ";
@ -4302,7 +4302,7 @@ a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-g
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-right-radius: 2px;
border-top-left-radius: 2px;
border-top-left-radius: 2px;
background-color: var(--panelheading); }
.panel-heading > .dropdown .dropdown-toggle {
color: var(--panelheadingfore); }
@ -4471,7 +4471,7 @@ a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-g
.panel-primary {
border-color: var(--stdborder); }
.panel-primary > .panel-heading {
color: var(--panelheadingfore);
color: var(--panelheadingfore);
background-color: var(--panelheading);
border-color: var(--stdborder); }
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
@ -4663,7 +4663,7 @@ button.close {
.modal-body {
color: var(--bsbodyfore) !important;
position: relative;
padding: 15px;
padding: 15px;
background-color: var(--bsbodyback); }
.modal-footer {
padding: 15px;
@ -4734,7 +4734,7 @@ button.close {
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: var(--pbackinverse);
color: var(--pbackinverse);
text-align: center;
text-decoration: none;
background-color: var(--pforeinverse);
@ -4798,7 +4798,7 @@ button.close {
max-width: 276px;
padding: 1px;
text-align: left;
background-color: var(--pback);
background-color: var(--pback);
background-clip: padding-box;
border: 1px solid var(--stdborder);
border-radius: 6px;
@ -4850,7 +4850,7 @@ button.close {
bottom: 1px;
margin-left: -10px;
border-bottom-width: 0;
border-top-color: var(--pback);
border-top-color: var(--pback);
}
.popover.right > .arrow
{
@ -4866,7 +4866,7 @@ button.close {
left: 1px;
bottom: -10px;
border-left-width: 0;
border-right-color: var(--stdborder);
border-right-color: var(--stdborder);
}
.popover.bottom > .arrow
{
@ -4882,7 +4882,7 @@ button.close {
top: 1px;
margin-left: -10px;
border-top-width: 0;
border-bottom-color: var(--stdborder);
border-bottom-color: var(--stdborder);
}
.popover.left > .arrow
{
@ -4897,7 +4897,7 @@ button.close {
content: " ";
right: 1px;
border-right-width: 0;
border-left-color: var(--stdborder);
border-left-color: var(--stdborder);
bottom: -10px; }
.carousel {
position: relative; }
@ -4949,7 +4949,7 @@ button.close {
opacity: 0.5;
filter: alpha(opacity=50);
font-size: 20px;
color: var(--pfore);
color: var(--pfore);
text-align: center;
text-shadow: 0 1px 2px var(--rgb50); }
.carousel-control.left {
@ -4968,7 +4968,7 @@ button.close {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFEF8026", endColorstr="#80000000", GradientType=1); }
.carousel-control:hover, .carousel-control:focus {
outline: 0;
color: var(--pforehover);
color: var(--pforehover);
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90); }
@ -5014,7 +5014,7 @@ button.close {
height: 10px;
margin: 1px;
text-indent: -999px;
border: 1px solid var(--stdborder);
border: 1px solid var(--stdborder);
border-radius: 10px;
cursor: pointer;
background-color: var(--highlighted) \9 ;
@ -5023,7 +5023,7 @@ button.close {
margin: 0;
width: 12px;
height: 12px;
background-color: var(--pback);
background-color: var(--pback);
}
.carousel-caption {
@ -5034,7 +5034,7 @@ button.close {
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: var(--pfore);
color: var(--pfore);
text-align: center;
text-shadow: 0 1px 2px var(--rgb50); }
.carousel-caption .btn {
@ -5342,7 +5342,7 @@ html, body {
font-family: "SourceSansProRegular";
scrollbar-width: thin;
scrollbar-color: var(--scbarcolor);
background-color: var(--pageback);
background-color: var(--pageback);
}
body {
@ -5350,7 +5350,7 @@ body {
min-width: 320px; }
.widget-sort-handle {
touch-action: none; }
.widgetdiv .content-box-head {
background: var(--sback) !important;
color: var(--sfore) !important;
@ -5359,15 +5359,15 @@ body {
padding-right: 1px !important;
padding-left: 5px !important;
min-height: 25px !important; }
.widgetdiv .content-box-head .btn-group .btn {
color: var(--sfore) !important;
background: none;
border: 1px solid var(--stdborder); }
.widgetdiv .content-box-head .btn-group .btn .glyphicon {
color: var(--stdborder) !important; }
.widgetdiv .content-box-head .list-inline li > h3 {
padding-top: 4px; }
.page-head { /* Seite Kopf (Funktion nicht klar) */
@ -5408,7 +5408,7 @@ body {
min-height: calc(100% - 64px);
padding: 15px 0 73px; }
.page-side { /* Seitenleiste Hintergrundfarbe */
background: var(--pageback);
background: var(--pageback);
border-right: 1px solid var(--pageborder);
border-top: 1px solid var(--pageborder);
border-bottom: 1px solid var(--pageborder);
@ -5433,11 +5433,11 @@ body {
width: 100%;
z-index: 2; }
section.page-content-main div.tab-content { /* Umrandung Boxen */
border: 1px solid var(--pageborder) !important;
border: 1px solid var(--pageborder) !important;
border-radius: 4px;}
.content-box {
background: var(--contentboxback);
background: var(--contentboxback);
border: 1px solid var(--stdborder);
border-radius: 4px; }
.content-box-main {
@ -5502,7 +5502,7 @@ div.content-box.wizard div img {
font-size: 12px; }
.login-modal-container {
color: var(--loginboxfore);
background: var(--loginboxback);
background: var(--loginboxback);
max-width: 400px;
margin: 100px auto 15px auto;
border: 1px solid var(--stdborder);
@ -5630,7 +5630,7 @@ main.page-content.col-lg-12 {
#navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapsing, #navigation.col-sidebar-left > div > nav > #mainmenu > div > div.collapse.in > div.collapsing {
display: none; }
button.toggle-sidebar {
color: var(--pagefore);
color: var(--pagefore);
background-color: var(--pageback);
font-size: 14px;
border: none;
@ -5646,11 +5646,11 @@ button.toggle-sidebar {
ul.nav > li.dropdown > ul.dropdown-menu > li > a {
padding: 3px 10px; }
section.page-content-main ul + div.tab-content { /* Umrandung Tab-Navigation */
border: 1px solid var(--stdborderprimary) !important;
border: 1px solid var(--stdborderprimary) !important;
outline: 0;
-webkit-box-shadow: (--btnshadow1), var(--btnshadow2);
box-shadow: (--btnshadow1), var(--btnshadow2); }
.nav-tabs {
margin-right: 1px;
border-bottom: 1px solid transparent; }
@ -5670,7 +5670,7 @@ ul.nav > li.dropdown > ul.dropdown-menu > li > a {
margin-right: 0px; }
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
color: var(--navtabforehover);
color: var(--navtabforehover);
background: var(--navtabbackhover);
border-right: 1px solid var(--navtabborderhover);
border-top: 1px solid var(--navtabborderhover);
@ -5684,13 +5684,13 @@ ul.nav > li.dropdown > ul.dropdown-menu > li > a {
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: var(--navtabforeactive);
background: var(--navtabbackactive) !important;
background: var(--navtabbackactive) !important;
border-right: 1px solid var(--navtabborderactive);
border-top: 1px solid var(--navtabborderactive);
border-left: 1px solid var(--navtabborderactive);
border-bottom: 1px solid var(--navtabborderactive);
border-radius: 0px;
border-top-right-radius: 10px;
border-bottom: 1px solid var(--navtabborderactive);
border-radius: 0px;
border-top-right-radius: 10px;
outline: 0;
-webkit-box-shadow: var(--btnshadow1), var(--btnshadow2);
box-shadow: var(--btnshadow1), var(--btnshadow2); }
@ -5698,7 +5698,7 @@ ul.nav > li.dropdown > ul.dropdown-menu > li > a {
background-color: var(--navtabbackactive);
color: var(--navtabforeactive);
border-right: 1px var(--navtabborderactive);
border-color: 1px var(--navtabborderactive);
border-color: 1px var(--navtabborderactive);
outline: 0;
-webkit-box-shadow: var(--btnshadow1), var(--btnshadow2);
box-shadow: var(--btnshadow1), var(--btnshadow2);}
@ -5706,7 +5706,7 @@ ul.nav > li.dropdown > ul.dropdown-menu > li > a {
.nav-tabs > li > a.visible-lg-inline-block.pull-right {
background-color: var(--navtabbackactive);
color: var(--navtabforeactive);
border-color: 1px solid var(--navtabborderactive);
border-color: 1px solid var(--navtabborderactive);
outline: 0;
-webkit-box-shadow: var(--btnshadow1), var(--btnshadow2);
box-shadow: var(--btnshadow1), var(--btnshadow2);}

View file

@ -8,7 +8,7 @@
cursor: text;
border-radius: 3px;
border: 1px solid var(--txtboxborder);
background-color: var(--txtboxback);
background-color: var(--txtboxback);
color: var(--txtboxfore);
}