You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
556 lines
15 KiB
556 lines
15 KiB
// $Id$
|
|
// This file contains CSS (SCSS) that theme options have in common, mostly color variations from the parent theme.
|
|
// The file _variables-for-options.scss is used with this file. Theme options import these files and apply their variable definitions.
|
|
|
|
$imagePath: "../images/";
|
|
// body {
|
|
// background-image: url('#{$imagePath}bg.jpg');
|
|
|
|
#page-header {
|
|
h1,
|
|
h2,
|
|
h3 a,
|
|
a,
|
|
a:hover {
|
|
color: $top-color; //#f8f8f8; //#101010;
|
|
}
|
|
}
|
|
|
|
// This is reduced from the amount in tiki_base.css - maybe that needs to be changed, too.
|
|
body.layout_social.tiki.navbar-padding {
|
|
padding-top: 2.72rem;
|
|
padding-bottom: 0;
|
|
}
|
|
.middle_outer {
|
|
-webkit-box-shadow: inset 0 54px 0 0 $topbar-dark-bg;
|
|
-moz-box-shadow: inset 0 54px 0 0 $topbar-dark-bg;
|
|
box-shadow: inset 0 54px 0 0 $topbar-dark-bg;
|
|
}
|
|
|
|
.bg-dark {
|
|
background-color: $topbar-dark-bg !important;
|
|
color: $navbar-dark-color;
|
|
.btn-outline-info {
|
|
color: $bg-dark-info;
|
|
}
|
|
}
|
|
|
|
.btn-outline-dark {
|
|
color: $dark;
|
|
outline-color: $dark;
|
|
}
|
|
|
|
// Specific rules for page top and topbar colors
|
|
// Top - Light color
|
|
.layout_basic .page-header.navbar-light-parent.bg-light-parent, // Single-container layout -- Parent of the top module zone
|
|
.layout_basic .page-header .navbar.navbar-light.bg-light, // Single-container layout -- Menu itself in top zone
|
|
.layout_classic .page-header .navbar-light-parent.bg-light-parent, // Classic Tiki layout -- Parent of the top module zone
|
|
.layout_classic .page-header .navbar.navbar-light.bg-light, // Classic Tiki layout -- Navbar (menu) inside the top module zone
|
|
.layout_social header.navbar-light-parent.bg-light-parent, // Classic Bootstrap layout (fixed-top navbar) -- Complete header
|
|
.layout_social header.navbar.navbar-light.bg-light // Classic Bootstrap layout -- Menu itself
|
|
{ // nav.navbar-light.bg-light General instance
|
|
background-color: $top-light-bg !important;
|
|
color: $navbar-light-color;
|
|
a,
|
|
.btn.btn-link {
|
|
color: $navbar-light-link-color;
|
|
&:hover {
|
|
color: $navbar-light-link-hover-color;
|
|
}
|
|
}
|
|
}
|
|
// Topbar - light color
|
|
.layout_basic .topbar_modules.navbar-light.bg-light, // Topbar, which probably includes another nav menu
|
|
.layout_classic .topbar.navbar-light-parent.bg-light-parent, // Classic Tiki layout -- Parent of the topbar module zone
|
|
.layout_classic .topbar_modules.navbar-light.bg-light, // Classic Tiki layout -- Topbar module zone
|
|
.layout_classic .topbar_modules.navbar-light.bg-light, // Classic Tiki layout -- Navbar (menu) inside the topbar module zone
|
|
.layout_social .topbar-wrapper.navbar-light-parent.bg-light-parent, // Classic Bootstrap topbar wrapper
|
|
.layout_social .topbar.navbar-light, // Classic Bootstrap topbar zone parent
|
|
.layout_social .topbar .navbar-light.bg-light // Classic Bootstrap topbar zone menu itself
|
|
{ // nav.navbar-dark.bg-dark General instance
|
|
background-color: $topbar-light-bg !important;
|
|
color: $topbar-light-color;
|
|
a,
|
|
.btn.btn-link {
|
|
color: $navbar-light-link-color;
|
|
&:hover {
|
|
color: $navbar-light-link-hover-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Top - dark color
|
|
.layout_basic .page-header.navbar-dark-parent.bg-dark-parent, // Single-container layout -- Parent of the top module zone
|
|
.layout_basic .top_modules.navbar-dark-parent.bg-dark-parent, // Single-container layout -- Top module zone
|
|
.layout_basic .page-header .navbar.navbar-dark.bg-dark, // Single-container layout -- Menu itself in top zone
|
|
.layout_classic .page-header .navbar-dark-parent.bg-dark-parent, // Classic Tiki layout -- Parent of the top module zone
|
|
//.layout_classic .top_modules .navbar.navbar-dark.bg-dark, // Classic Tiki layout -- Navbar (menu) inside the top module zone
|
|
.layout_social header.navbar-dark.bg-dark, // Classic Bootstrap layout (fixed-top navbar) -- Complete header
|
|
.layout_social header.navbar-dark.bg-dark .navbar-dark.bg-dark // Classic Bootstrap layout -- Menu itself
|
|
{ // nav.navbar-dark.bg-dark General instance
|
|
background-color: $top-dark-bg !important;
|
|
color: $top-dark-color;
|
|
a,
|
|
.btn.btn-link {
|
|
color: $top-dark-link-color;
|
|
&:hover {
|
|
color: $navbar-dark-hover-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Topbar - dark color
|
|
.layout_basic .topbar_modules.navbar-dark.bg-dark, // Single Container layout -- Topbar, which probably includes another nav menu
|
|
.layout_basic .topbar_modules .navbar-dark.bg-dark, // Single Container layout -- Navbar (menu) inside the Topbar module zone
|
|
.layout_classic .topbar.navbar-dark-parent.bg-dark-parent, // Classic Tiki layout -- Parent of the topbar module zone
|
|
.layout_classic .topbar_modules.navbar-dark.bg-dark, // Classic Tiki layout -- Topbar module zone
|
|
.layout_classic .topbar_modules .navbar-dark.bg-dark, // Classic Tiki layout -- Navbar (menu) inside the topbar module zone
|
|
.layout_social .topbar-wrapper.navbar-dark-parent.bg-dark-parent, // Classic Bootstrap topbar wrapper
|
|
.layout_social .topbar.navbar-dark.bg-dark, // Classic Bootstrap topbar zone parent
|
|
.layout_social .topbar .navbar-dark.bg-dark // Classic Bootstrap topbar zone menu itself
|
|
{ // nav.navbar-dark.bg-dark General instance
|
|
background-color: $topbar-dark-bg !important;
|
|
color: $topbar-dark-color;
|
|
a,
|
|
.btn.btn-link {
|
|
color: $navbar-dark-link-color;
|
|
&:hover {
|
|
color: $navbar-dark-link-hover-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.layout_classic .top_modules .navbar.navbar-dark.bg-dark,
|
|
.layout_classic .top_modules .navbar.navbar-light.bg-light {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.sitelogo {
|
|
padding: 30px;
|
|
}
|
|
|
|
a,
|
|
.btn-link,
|
|
.page-link {
|
|
color: $link-color;
|
|
}
|
|
|
|
a:hover,
|
|
.btn-link:hover,
|
|
a:focus,
|
|
.btn-link:focus {
|
|
color: $link-hover-color;
|
|
}
|
|
|
|
.nav-tabs .nav-link {
|
|
color: $input-color;
|
|
background-color: $input-bg;
|
|
border-color: $input-border-top-color $input-border-left-color #ffffff;
|
|
}
|
|
|
|
|
|
hr {
|
|
border-top: 1px solid $hr-border-color;
|
|
}
|
|
|
|
.table th,
|
|
.table td {
|
|
border-top: 1px solid $table-border-color;
|
|
}
|
|
|
|
.table > thead > tr > th {
|
|
border-bottom: 2px solid $table-border-color;
|
|
}
|
|
|
|
.table > tbody + tbody {
|
|
border-top: 2px solid $table-border-color;
|
|
}
|
|
|
|
.table .table {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.table .table-bordered {
|
|
border: 1px solid $table-border-color;
|
|
}
|
|
|
|
.table .table-bordered th,
|
|
.table .table-bordered td {
|
|
border: 1px solid $table-border-color;
|
|
}
|
|
|
|
.table .table-striped > tbody > tr:nth-child(odd) > td,
|
|
.table .table-striped > tbody > tr:nth-child(odd) > th {
|
|
background-color: $table-accent-bg;
|
|
}
|
|
|
|
.table .table-hover > tbody > tr:hover > td,
|
|
.table .table-hover > tbody > tr:hover > th {
|
|
background-color: $table-hover-bg;
|
|
}
|
|
|
|
.form-control {
|
|
color: $input-color;
|
|
background-color: $input-bg;
|
|
background-image: none;
|
|
border: 1px solid $input-border-color;
|
|
}
|
|
|
|
.navbar-dark a,
|
|
.navbar-dark .navbar-brand,
|
|
.dropdown-item,
|
|
.dropdown-item a,
|
|
.dropdown-menu .tikihelp {
|
|
color: $navbar-dark-color;
|
|
}
|
|
|
|
.navbar-dark a:hover,
|
|
.navbar-dark .navbar-brand:hover,
|
|
.navbar-dark .navbar-brand:focus {
|
|
color: $navbar-dark-hover-color;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.navbar-dark a:hover,
|
|
.navbar-dark a:focus {
|
|
color: $navbar-dark-hover-color;
|
|
// background-color: $bg-dark-link-hover-bg;
|
|
}
|
|
|
|
.navbar-dark .active a,
|
|
.navbar-dark .active a:hover,
|
|
.navbar-dark .active a:focus {
|
|
color: $navbar-dark-active-color;
|
|
// background-color: #063065;
|
|
}
|
|
|
|
.navbar-dark .disabled a,
|
|
.navbar-dark .disabled a:hover,
|
|
.navbar-dark .disabled a:focus {
|
|
color: $navbar-dark-disabled-color;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.navbar-dark .navbar-toggle {
|
|
border-color: #dddddd;
|
|
}
|
|
|
|
.navbar-dark .navbar-toggle:hover,
|
|
.navbar-dark .navbar-toggle:focus {
|
|
background-color: #dddddd;
|
|
}
|
|
|
|
.navbar-dark .navbar-toggle .icon-bar {
|
|
background-color: #888888;
|
|
}
|
|
|
|
.navbar-dark .navbar-collapse,
|
|
.navbar-dark .navbar-form {
|
|
border-color: transparent;
|
|
}
|
|
nav:not(.topbar_modules,.top_modules) {
|
|
&.navbar-dark .open > a,
|
|
&.navbar-dark .open > a:hover,
|
|
&.navbar-dark .open > a:focus {
|
|
// background-color: #14899e;
|
|
color: $navbar-dark-color;
|
|
}
|
|
}
|
|
|
|
.navbar-dark .navbar-link:hover {
|
|
color: #f9f9f9;
|
|
}
|
|
|
|
.navbar .navbar {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
background-color: $dropdown-bg; //#005064;
|
|
border: 1px solid $dropdown-border-color; // rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.tiki .dropdown-item,
|
|
.tiki .dropdown-item a,
|
|
.tiki .dropdown-item .btn.btn-link {
|
|
color: $dropdown-link-color;
|
|
&:hover,
|
|
&:focus {
|
|
color: $dropdown-link-hover-color;
|
|
background: $dropdown-link-hover-bg;
|
|
}
|
|
&:active,
|
|
&.active {
|
|
color: $dropdown-link-hover-color;
|
|
background: $dropdown-link-active-bg;
|
|
}
|
|
&.disabled,
|
|
&:disabled {
|
|
color: $dropdown-link-disabled-color;
|
|
}
|
|
.dropdown-header {
|
|
color: $dropdown-header-color;
|
|
}
|
|
.dropdown-divider {
|
|
background: $dropdown-divider-bg;
|
|
}
|
|
}
|
|
|
|
// So form submit buttons with icons and text used in dropdown menus can look just like links
|
|
.cssmenu_horiz ul li button.btn-link.link-list,
|
|
.cssmenu_vert ul li button.btn-link.link-list {
|
|
background: $dropdown-bg;
|
|
color: $dropdown-link-color;
|
|
}
|
|
|
|
.cssmenu_horiz ul li button.btn-link.link-list:hover,
|
|
.cssmenu_vert ul li button.btn-link.link-list:hover {
|
|
color: $dropdown-link-hover-color;
|
|
background: $dropdown-link-hover-bg;
|
|
}
|
|
|
|
.dropdown-item.btn-link { color: #fff; }
|
|
|
|
.nav-pills > li.active > a,
|
|
.nav-pills > li.active > a:hover,
|
|
.nav-pills > li.active > a:focus {
|
|
color: #ffffff;
|
|
background-color: $nav-pills-link-active-bg; //#0b8a98;
|
|
}
|
|
|
|
// Pagination
|
|
.pagination > li > a:hover,
|
|
.pagination > li > span:hover,
|
|
.pagination > li > a:focus,
|
|
.pagination > li > span:focus {
|
|
color: $pagination-hover-color; //#18a3bb;
|
|
background-color: $pagination-hover-bg; //#eeeeee;
|
|
border-color: $pagination-hover-border-color; //#dddddd;
|
|
}
|
|
|
|
.pagination > .active > a,
|
|
.pagination > .active > span,
|
|
.pagination > .active > a:hover,
|
|
.pagination > .active > span:hover,
|
|
.pagination > .active > a:focus,
|
|
.pagination > .active > span:focus {
|
|
color: #ffffff;
|
|
background-color: $pagination-active-bg; //#0b8a98;
|
|
border-color: $pagination-active-border-color; //#0b8a98;
|
|
}
|
|
|
|
.pagination > .disabled > span,
|
|
.pagination > .disabled > span:hover,
|
|
.pagination > .disabled > span:focus,
|
|
.pagination > .disabled > a,
|
|
.pagination > .disabled > a:hover,
|
|
.pagination > .disabled > a:focus {
|
|
color: $pagination-disabled-color; //#999999;
|
|
background-color: $pagination-disabled-bg; //#ffffff;
|
|
border-color: $pagination-disabled-border-color; //#dddddd;
|
|
}
|
|
|
|
// Cards
|
|
.col2,
|
|
.col3 {
|
|
.card-header {
|
|
border-bottom: 1px solid $card-border-color;
|
|
}
|
|
}
|
|
|
|
header.page-header {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
border-bottom: none;
|
|
}
|
|
|
|
header.page-header a:not(.dropdown-item),
|
|
header.page-header a.btn-link {
|
|
color: $page-header-link-color; // This needs to be a variable because Kiwi uses black: $page-header-link-color.
|
|
}
|
|
|
|
.form-control, select,
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="file"],
|
|
input[type="email"],
|
|
input[type="search"],
|
|
input[type="number"],
|
|
input#login-pass,
|
|
textarea,
|
|
.adminoptionbox option {
|
|
color: $input-color;
|
|
background-color: $input-bg; //#ddf8f9;
|
|
// border-color: $input-border-top-color $input-border-right-color $input-border-bottom-color $input-border-left-color; //#b4f3fb #ffffff #ffffff #b4f3fb;
|
|
}
|
|
|
|
input[type="checkbox"].preffilter-toggle-round:checked + label::before {
|
|
background: darken($input-bg, 8%);
|
|
}
|
|
|
|
|
|
#footer {
|
|
background: black;
|
|
color: #f4f4f4;
|
|
padding: 1px 0 2px 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.footer {
|
|
border-top: 1px solid $footer-accent-color; //#19a5be;
|
|
border-bottom: 1px solid $footer-accent-color; //#19a5be;
|
|
}
|
|
|
|
.footer_liner {
|
|
.card {
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
.card-header {
|
|
color: #ffffff;
|
|
border-bottom: 1px dotted $footer-accent-color; //#19a5be;
|
|
}
|
|
legend,
|
|
a:not(.btn),
|
|
a:not(.btn):visited {
|
|
color: #a9a9a9; //$footer-accent-color; //#19a5be;
|
|
}
|
|
}
|
|
|
|
|
|
.nav-tabs .nav-link {
|
|
color: $nav-tabs-link-color; //#ffffff;
|
|
background-color: $nav-tabs-link-bg; // #0c8a99;
|
|
border-color: #dee2e6 #dee2e6 #ffffff;
|
|
}
|
|
|
|
.nav-tabs .nav-link.active,
|
|
.nav-tabs .nav-item.show .nav-link {
|
|
color: $nav-tabs-link-active-color; // #000;
|
|
background-color: $nav-tabs-link-active-bg; //#a8e2ec;
|
|
}
|
|
|
|
.topbar .cssmenu_horiz ul {
|
|
background: $dropdown-bg;
|
|
}
|
|
|
|
.blog-postbody-title h2.panel-title {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.postbody-title .card-title {
|
|
color: $postbody-title-card-title-color;
|
|
}
|
|
|
|
.siteloginbar_popup .dropdown-menu > li > a {
|
|
color: #ffffff;
|
|
}
|
|
|
|
header.header .sitetitle,
|
|
header.header .sitesubtitle {
|
|
text-shadow: none;
|
|
}
|
|
|
|
.searchresults blockquote em,
|
|
.highlight {
|
|
background: #f2dede;
|
|
color: #a94442;
|
|
border-color: #ebccd1;
|
|
}
|
|
|
|
.cssmenu_horiz li ul,
|
|
.cssmenu_vert li ul {
|
|
background-color: $dropdown-bg;
|
|
border: 1px solid $dropdown-border-color;
|
|
// border: 1px solid rgba(0, 0, 0, 0.15);
|
|
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
|
-webkit-background-clip: padding-box;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.cssmenu_horiz li ul > li > a,
|
|
.cssmenu_vert li ul > li > a {
|
|
padding: 3px 20px;
|
|
font-weight: normal;
|
|
color: #ffffff;
|
|
background: $dropdown-bg;
|
|
}
|
|
|
|
.cssmenu_horiz > li > a:hover,
|
|
.cssmenu_vert > li > a:hover,
|
|
.cssmenu_horiz ul > li > a:hover,
|
|
.cssmenu_vert ul > li > a:hover,
|
|
.cssmenu_horiz > li > a:focus,
|
|
.cssmenu_vert > li > a:focus,
|
|
.cssmenu_horiz ul > li > a:focus,
|
|
.cssmenu_vert ul > li > a:focus {
|
|
text-decoration: none;
|
|
color: $dropdown-link-hover-color;
|
|
background-color: $dropdown-link-hover-bg;
|
|
}
|
|
|
|
//.topbar .cssmenu_horiz li a:hover {
|
|
// background: #14899e;
|
|
//}
|
|
.topbar .navbar-nav > li > a,
|
|
.topbar .navbar > li > a,
|
|
.topbar .cssmenu_horiz > li > a {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.autotoc > .nav {
|
|
background: $autotoc-nav-bg; //#005064;
|
|
}
|
|
|
|
.autotoc * {
|
|
color: $autotoc-color; //#ffffff;
|
|
}
|
|
|
|
#autotoc .nav > li > a:hover,
|
|
#autotoc .nav .nav > li > a:hover,
|
|
#autotoc .nav > li > a:focus {
|
|
color: $autotoc-nav-li-link-hover-color; //#f2f2f2;
|
|
background: $autotoc-nav-li-link-hover-bg; //#2e1f39;
|
|
}
|
|
|
|
#autotoc .nav {
|
|
> li {
|
|
.active, &.open > a {
|
|
color: $autotoc-nav-li-link-hover-color;
|
|
background: $autotoc-nav-li-link-hover-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
#autotoc .nav .dropdown-item {
|
|
color: $autotoc-color;}
|
|
|
|
#col2 .card-title,
|
|
#col3 .card-title,
|
|
a.flipmoduletitle,
|
|
#col2 .card-secondary > .card-header a,
|
|
#col3 .card-secondary > .card-header a {
|
|
color: $side-column-heading-color; //#169FB6;
|
|
}
|
|
|
|
footer#footer {
|
|
.footer_liner {
|
|
border-top: 1px solid $footer_liner-border-color;
|
|
border-bottom: 1px solid $footer_liner-border-color;
|
|
.card-header {
|
|
border-bottom: 1px dotted $footer_liner-card-inner-border;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-dark {
|
|
color: $light;
|
|
background: $dark;
|
|
border-color: $dark;
|
|
}
|
|
|
|
.page-item.disabled,
|
|
.list-group-item.disabled {
|
|
color: $text-muted !important;
|
|
}
|