// $Id$
|
|
// This file contains rules for colors, consolidated from the tiki_base less files. They're moved here so that theme variables can provide values for them.
|
|
//@import "_bs3-bs4-transition.scss";
|
|
//@import "_tiki-variables.scss";
|
|
$imagePathToImgDir: "../../../img/";
|
|
@import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/_mixins.scss"; //
|
|
//@import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/_variables.scss";
|
|
@import "../../default/scss/variables";
|
|
|
|
.topbar { margin-bottom: $tiki-topbar-row-margin-bottom; }
|
|
|
|
// Background color for navbar collapse dropdowns (Tiki's aren't .dropdown li).
|
|
//.navbar-collapse.collapse.in {
|
|
// background: $navbar-dark-bg;
|
|
//}
|
|
|
|
|
|
//.layout_social,
|
|
//.layout_social_modules {
|
|
.navbar-dark > a,
|
|
.navbar-dark .cssmenu_horiz > li > a {
|
|
color: $navbar-dark-color;
|
|
&:hover {
|
|
color: $navbar-dark-hover-color;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
.navbar-dark .sitetitle a {
|
|
color: $navbar-dark-brand-color;
|
|
&:hover {
|
|
color: $navbar-dark-hover-color;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
//}
|
|
|
|
// tiki-boxes_and_panels.less
|
|
.warning a,
|
|
.warning a:link,
|
|
.warning a:visited {
|
|
color: $yellow; // $alert-warning-text; // #b93c2e
|
|
}
|
|
|
|
// h3 heading in modules
|
|
.module h3.card-title { font-size: $tiki-module-h3-card-title-font-size; }
|
|
|
|
// tiki-calendar.less - tiki-calendar_calmode.tpl, mod-calendar_new.tpl
|
|
.calhighlight {
|
|
color: $white; // Todo $state-info-text;
|
|
background: $cyan; // Todo $state-info-bg;
|
|
> a { color: $white; }
|
|
}
|
|
|
|
//fullcalendar.js
|
|
a.fc-event:hover {
|
|
color: $tooltip-color;
|
|
}
|
|
|
|
// tiki-categories.less - tiki-jquery.js
|
|
// /* Fancy filter */
|
|
.filter {
|
|
.fancyfilter {
|
|
border: thin solid $primary; /*black*/;
|
|
.token {
|
|
background: $body-bg;
|
|
border: 1px solid $gray-200;
|
|
font-size: 11px;
|
|
padding: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// tiki-comments.less - tiki-jquery.js
|
|
.note-list .postbody-title {
|
|
background: $body-bg; // /*#ccc*/
|
|
color: $body-color; // /*#000*/
|
|
}
|
|
|
|
// Comments moderation - comment.tpl, tiki-list_comments.tpl
|
|
.post-approved-n {
|
|
border-left: 3px dotted $success; // blue
|
|
}
|
|
|
|
.post-approved-r {
|
|
border-left: 3px double $warning; // red
|
|
}
|
|
|
|
.post-approved-r .content * {
|
|
background: url('#{$imagePathToImgDir}icons/dots.gif');
|
|
}
|
|
|
|
.dropdown-menu {
|
|
color: $dropdown-header-color;
|
|
}
|
|
|
|
//
|
|
#topbar_modules_social .form-control { margin-top: 0.5rem; }
|
|
|
|
// from tiki-cssmenus.less
|
|
.cssmenu_horiz ul li,
|
|
.cssmenu_vert ul li,
|
|
.cssmenu_horiz ul ul li,
|
|
.cssmenu_vert ul ul li {
|
|
// background: $dropdown-bg;
|
|
}
|
|
|
|
.cssmenu_horiz > li:hover,
|
|
.cssmenu_horiz > li.sfHover,
|
|
.cssmenu_vert > li:hover,
|
|
.cssmenu_vert > li.sfHover {
|
|
// background: $dropdown-link-hover-bg;
|
|
// /* only transition out, not in */
|
|
-webkit-transition: none;
|
|
-moz-transition: none;
|
|
-o-transition: none;
|
|
transition: none;
|
|
}
|
|
|
|
//.cssmenu_horiz > li:hover,
|
|
//.cssmenu_horiz > li.sfHover,
|
|
.topbar .nav > li > a:hover,
|
|
.topbar .nav > li > a:focus {
|
|
background: $tiki-cssmenu_horiz_li_hover_bg;
|
|
}
|
|
|
|
.cssmenu_horiz ul,
|
|
.cssmenu_vert ul {
|
|
border: $tiki-cssmenu_ul_border; // $dropdown-border-color;
|
|
}
|
|
|
|
.cssmenu_horiz ul li a,
|
|
.cssmenu_vert ul li a,
|
|
.cssmenu_horiz ul li button.btn-link.link-list,
|
|
.cssmenu_vert ul li button.btn-link.link-list {
|
|
background: $tiki-cssmenu_ul_li_a_bg; // $dropdown-bg;
|
|
color: $tiki-cssmenu_ul_li_a_color; // $dropdown-link-color;
|
|
// padding-top: ; (tiki-cssmenus.less edited to conform to BS dropdown-link top and bottom padding - 3px.)
|
|
// padding-bottom: ;
|
|
}
|
|
|
|
|
|
.cssmenu_horiz ul li button.btn-link.link-list,
|
|
.cssmenu_vert ul li button.btn-link.link-list {
|
|
width: 100%;
|
|
border-radius: 0px;
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
.cssmenu_horiz > ul > li:hover > a,
|
|
.cssmenu_vert > ul > li:hover > a,
|
|
.cssmenu_horiz > ul > li:hover > form > button.btn-link.link-list,
|
|
.cssmenu_vert > ul > li:hover > form > button.btn-link.link-list {
|
|
color: $tiki-cssmenu_ul_li_hover_a_color; // $dropdown-link-hover-color;
|
|
background: $tiki-cssmenu_ul_li_hover_a_bg; // $dropdown-link-hover-bg;
|
|
}
|
|
|
|
// styling for both css and generated arrows
|
|
.sf-arrows .sf-with-ul:after {
|
|
border: 5px solid transparent;
|
|
border-top-color: $link-color; // $dropdown-link-color; // /* edit this to suit design (no rgba in IE8) */
|
|
}
|
|
|
|
// styling for right-facing arrows
|
|
.cssmenu_vert.sf-arrows li > .sf-with-ul:after {
|
|
border-color: transparent;
|
|
border-left-color: $link-color; /* edit this to suit design (no rgba in IE8) */
|
|
}
|
|
|
|
.sf-arrows ul .sf-with-ul:after,
|
|
.cssmenu_vert.sf-arrows ul > li > .sf-with-ul:after {
|
|
border-color: transparent;
|
|
border-left-color: $dropdown-link-color; /* edit this to suit design (no rgba in IE8) */
|
|
}
|
|
|
|
.sf-arrows ul li > .sf-with-ul:focus:after,
|
|
.sf-arrows ul li:hover > .sf-with-ul:after,
|
|
.sf-arrows ul .sfHover > .sf-with-ul:after {
|
|
border-color: transparent;
|
|
border-left-color: $dropdown-link-hover-color;
|
|
}
|
|
|
|
.cssmenu_vert.sf-arrows li > .sf-with-ul:focus:after,
|
|
.cssmenu_vert.sf-arrows li:hover > .sf-with-ul:after,
|
|
.cssmenu_vert.sf-arrows .sfHover > .sf-with-ul:after {
|
|
border-color: transparent;
|
|
border-left-color: $dropdown-link-hover-color; // white;
|
|
}
|
|
|
|
// Rules for conforming to div.topbar (navbar) instance - Commented out pending color organization of navbar options.
|
|
//.topbar,
|
|
// //.topbar .cssmenu_horiz ul,
|
|
//.topbar .navbar-default .navbar-nav > li,
|
|
//.topbar .nav > li {
|
|
// background: $topbar_bg; // $navbar-dark-bg;
|
|
// color: $topbar_color; // $navbar-dark-color;
|
|
// > a {
|
|
// color: $topbar_link_color; // $navbar-dark-link-color;
|
|
// // background: $navbar-dark-link-bg;
|
|
// padding-top: $topbar_link_padding_top; // $navbar-padding-y;
|
|
// padding-bottom: $topbar_link_padding_bottom; // $navbar-padding-y;
|
|
// }
|
|
// > a:hover,
|
|
// > a:focus {
|
|
// color: $topbar_link_hover_color; // $navbar-dark-hover-color;
|
|
// }
|
|
//}
|
|
|
|
.topbar .cssmenu_horiz ul {
|
|
background: $dropdown-bg;
|
|
}
|
|
|
|
.topbar .cssmenu_horiz.sf-arrows > .menuSection0 > .sf-with-ul:after {
|
|
border: 5px solid transparent;
|
|
border-top-color: $navbar-dark-color; // $dropdown-link-color; // /* edit this to suit design (no rgba in IE8) */
|
|
}
|
|
|
|
.topbar .cssmenu_horiz.sf-arrows > .menuSection0:hover > .sf-with-ul:after,
|
|
.topbar .cssmenu_horiz.sf-arrows > .menuSection0.sfhover > .sf-with-ul:after {
|
|
border-top-color: $navbar-dark-hover-color;
|
|
}
|
|
|
|
// Used for action icons dropdown - This seems to be .dropdown-header now, and is a Bootstrap variable (GC-L August 2022)
|
|
//.dropdown-menu .dropdown-title,
|
|
//.dropdown-menu li label {
|
|
// color: $dropdown-title-color;
|
|
//}
|
|
|
|
// To override The dropdown menu text-align: left that (wrongly) ensures proper alignment if parent has it changed (e.g., modal footer)
|
|
.dropdown-menu {
|
|
text-align: start !important;
|
|
}
|
|
|
|
// tiki-file_galleries.less
|
|
.thumbinfosothers {
|
|
color: $gray-200; // #888
|
|
}
|
|
|
|
table.treetable.objectperms td.added {
|
|
background-color: $success; // #dfd
|
|
}
|
|
|
|
table.treetable.objectperms td.removed {
|
|
background-color: $warning; // #fdd
|
|
}
|
|
|
|
// tiki-js.js, browse_file_gallery.tpl
|
|
//.thumbnailcontener {
|
|
// border: solid 1px $thumbnail-border; // #d3d3d3
|
|
//}
|
|
|
|
// jquery-tiki/files.js
|
|
.progressBarInProgress {
|
|
background-color: $info;
|
|
color: $white;
|
|
}
|
|
|
|
.progressBarComplete {
|
|
background-color: $success;
|
|
color: $white;
|
|
}
|
|
|
|
.progressBarError {
|
|
background-color: $warning;
|
|
color: $white;
|
|
}
|
|
|
|
.progressContainer {
|
|
border: solid 1px $modal-content-border-color;
|
|
background-color: $modal-content-bg;
|
|
}
|
|
|
|
// tiki-forums.less
|
|
//* Forum filter collapsible panel. Adds +/-*/
|
|
.filter-panel-heading a:after {
|
|
color: $gray-500;
|
|
}
|
|
|
|
// tiki-maps.less
|
|
.olControlMousePosition {
|
|
background: rgba(0, 0, 0, 0.75);
|
|
color: $body-bg; // #fff
|
|
}
|
|
|
|
.olControlScaleLineTop,
|
|
.olControlScaleLineBottom {
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.ui-selectmenu-icon {
|
|
background-color: inherit;
|
|
border: solid 5px transparent !important;
|
|
-webkit-box-shadow: -5px 0 5px 2px rgba(0, 0, 0, .1), -1px 0 0 rgba(0, 0, 0, .1), -2px 0 0 rgba(255, 255, 255, .25);
|
|
box-shadow: -5px 0 5px 2px rgba(0, 0, 0, .1), -1px 0 0 rgba(0, 0, 0, .1), -2px 0 0 rgba(255, 255, 255, .25);
|
|
}
|
|
|
|
// tiki-minor_features.less
|
|
.dirsitetrail {
|
|
color: $breadcrumb-bg; // lightgray
|
|
}
|
|
|
|
.dirsitecats {
|
|
color: $breadcrumb-bg; // lightgray
|
|
}
|
|
|
|
#resultzone > div:hover {
|
|
background: $success;
|
|
}
|
|
|
|
// tiki-miscellaneous_global.less
|
|
.searchresults blockquote em,
|
|
.highlight,
|
|
.btn-primary.highlight a,
|
|
.btn-primary a.highlight {
|
|
background: $danger;
|
|
color: $white;
|
|
border-color: darken($danger, 10%);
|
|
}
|
|
|
|
.btn-primary.highlight:hover {
|
|
background: darken($danger, 15%);
|
|
}
|
|
|
|
.btn.active {
|
|
&.btn-link {
|
|
color: darken($link-color, 5%);
|
|
text-decoration: underline;
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
&:hover {
|
|
color: $link-hover-color;
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Smarty {button} maeks .btn-default but sometimes .btn-link is added by hand. Actually Smarty {button} probably should make just .btn.
|
|
.btn-primary.btn-link,
|
|
.btn-primary.btn-link:hover {
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.btn-primary:focus {
|
|
color: color-yiq($primary);
|
|
}
|
|
|
|
// Ajax, jquery. etc.
|
|
// Ajax Loading Overlay
|
|
#ajaxLoadingBG {
|
|
background: transparent url('#{$imagePathToImgDir}overlay-light.png');
|
|
}
|
|
|
|
#ajaxLoading {
|
|
color: $gray-300;
|
|
background: transparent url('#{$imagePathToImgDir}loading-light.gif') no-repeat 50% 50%;
|
|
}
|
|
|
|
// cookie consent style
|
|
//#cookie_consent_div {
|
|
// padding: $alert-padding-x $alert-padding-y;
|
|
// border: 1px solid darken($info, 10%);
|
|
// color: $white;
|
|
// background-color: $info;
|
|
//}
|
|
|
|
//#cookie_consent_div.banner {
|
|
// padding: $alert-padding-x $alert-padding-y;
|
|
// border: 1px solid $info;
|
|
//}
|
|
|
|
#cookie_consent_div .description a {
|
|
color: adjust-hue($primary, 30%);
|
|
font-weight: bold;
|
|
}
|
|
|
|
// print mode only - to make sure print templates will use and print on seamless white bg color
|
|
html#print,
|
|
body.print * { // wiki page print view
|
|
background: #ffffff;
|
|
color: #000000;
|
|
}
|
|
|
|
body.fullscreen {
|
|
background: #ffffff;
|
|
}
|
|
|
|
.attention {
|
|
color: $danger;
|
|
}
|
|
|
|
#debugconsole {
|
|
background: rgba(lighten($body-bg, 30%), 0.9); // Todo - what's the way to specify backgrounds?
|
|
color: rgba($navbar-light-color, 0.9);
|
|
border: 2px solid rgba($navbar-light-color, 0.9);
|
|
}
|
|
|
|
#debugconsole form {
|
|
color: rgba($navbar-light-color, 0.9);
|
|
}
|
|
|
|
#debugconsole a {
|
|
color: rgba($navbar-light-color, 0.9);
|
|
}
|
|
|
|
#debugconsole a.btn {
|
|
color: rgba($navbar-light-color, 0.9);
|
|
}
|
|
|
|
// /* Icons */
|
|
a.icon,
|
|
img.icon {
|
|
background: transparent;
|
|
}
|
|
|
|
div #metadata fieldset.tabcontent, div #metadata div.tabs {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.openid_url {
|
|
background: #ffffff url('#{$imagePathToImgDir}icons/login-OpenID-bg.gif') 1px 1px no-repeat;
|
|
}
|
|
|
|
// Input fields auto-fill/
|
|
// Webkit-based browser specific (Google Chrome, Chromium, etc.)
|
|
input:-webkit-autofill {
|
|
background-color: $input-bg !important; /* needs important because Chrome has it already important */
|
|
background-image: none !important;
|
|
color: $input-color !important; /* the Google guys forgot the number-one rule... when they specify background they should specify forgeround color too ;) */
|
|
}
|
|
|
|
// ColorBox
|
|
#cboxTitle {
|
|
background-color: $body-bg;
|
|
}
|
|
|
|
#captchaImg {
|
|
border: 1px solid $border-color;
|
|
}
|
|
|
|
// tiki-modal_and_managestream.less
|
|
form.simple label.error {
|
|
background: url('#{$imagePathToImgDir}icons/error.png') no-repeat 0 4px;
|
|
color: $danger;
|
|
}
|
|
|
|
form.simple label .warning {
|
|
color: $danger;
|
|
}
|
|
|
|
.tiki-modal .mask {
|
|
background-color: $body-bg;
|
|
}
|
|
|
|
.ui-dialog {
|
|
background: $body-bg;
|
|
color: $body-color;
|
|
}
|
|
|
|
.cssmenu_horiz ul li.selected a,
|
|
.cssmenu_vert ul li.selected a,
|
|
.cssmenu_horiz ul li a:hover,
|
|
.cssmenu_vert ul li a:hover,
|
|
.cssmenu_horiz ul li.selected button.btn-link.link-list,
|
|
.cssmenu_vert ul li.selected button.btn-link.link-list,
|
|
.cssmenu_horiz ul li button.btn-link.link-list:hover,
|
|
.cssmenu_vert ul li button.btn-link.link-list:hover {
|
|
text-decoration: none;
|
|
color: $dropdown-link-hover-color;
|
|
background-color: $dropdown-link-hover-bg;
|
|
}
|
|
|
|
|
|
|
|
// tiki-modules.less
|
|
.box-quickadmin .cssmenu_horiz ul li {
|
|
background-color: $body-bg;
|
|
}
|
|
|
|
.box-switch_lang .box-data img.highlight {
|
|
border: .1em solid $danger;
|
|
}
|
|
|
|
.box-switch_lang .box-data .highlight {
|
|
border: .1em solid $danger;
|
|
}
|
|
|
|
.box-switch_lang .flags .highlight {
|
|
border: solid 1px $info;
|
|
}
|
|
|
|
//div.cvsup { Why specify a color for this? a) It's just module content. b) The color context may not be clear so causes problems. -- g_c-l
|
|
// color: $gray-300;
|
|
//}
|
|
|
|
//.fixed-top,
|
|
//.layout_social .topbar_modules,
|
|
//.layout_social_modules .topbar_modules {
|
|
// h1.sitetitle > a,
|
|
// h2.sitesubtitle {
|
|
// color: $navbar-dark-color;
|
|
// }
|
|
// .navbar-inverse .navbar-collapse,
|
|
// .navbar-inverse .navbar-form,
|
|
// .navbar-inverse {
|
|
// border-color: transparent;
|
|
// }
|
|
//}
|
|
|
|
.navbar-light {
|
|
.dropdown-toggle,
|
|
a.nav-link.dropdown-toggle,
|
|
h1.sitetitle a,
|
|
h2.sitesubtitle,
|
|
.cssmenu_horiz .menuLevel0 > a {
|
|
color: $navbar-light-color
|
|
}
|
|
}
|
|
|
|
.navbar-dark {
|
|
.dropdown-toggle,
|
|
a.nav-link.dropdown-toggle,
|
|
h1.sitetitle a,
|
|
h2.sitesubtitle,
|
|
.cssmenu_horiz .menuLevel0 > a {
|
|
color: $navbar-dark-color
|
|
}
|
|
}
|
|
|
|
// Cancelling the hardcoded direction of the padding in the navbar set at vendor_bundled/vendor/twbs/bootstrap/scss/_navbar.scss line:71
|
|
// Padding (any) is not needed in LTR and padding-left is not wanted in RTL languages
|
|
|
|
.navbar-nav {
|
|
padding: 0;
|
|
}
|
|
|
|
// tiki-mytiki.less
|
|
// /***** Messages *****/
|
|
.prio1,
|
|
.prio2,
|
|
.prio3,
|
|
.prio4,
|
|
.prio5 {
|
|
// border: 1px solid $panel-default-border;
|
|
}
|
|
|
|
.prio5 {
|
|
// background: inherit;
|
|
color: $body-color;
|
|
a { color: $body-color; }
|
|
}
|
|
|
|
.prio4 {
|
|
// background: $success;
|
|
color: $success;
|
|
// border: $success;
|
|
a {
|
|
color: $success;
|
|
}
|
|
}
|
|
|
|
.prio3 {
|
|
// background: $info;
|
|
color: $info;
|
|
// border: 1px solid $info;
|
|
a {
|
|
color: $info;
|
|
}
|
|
}
|
|
|
|
.prio2 {
|
|
// background: $warning;
|
|
color: $warning;
|
|
// border: $warning;
|
|
a {
|
|
color: $warning;
|
|
}
|
|
|
|
}
|
|
|
|
.prio1 {
|
|
// background: $danger;
|
|
color: $danger;
|
|
// border: $danger;
|
|
a {
|
|
color: $danger;
|
|
}
|
|
}
|
|
|
|
.messureadflag {
|
|
background: $gray-500;
|
|
}
|
|
|
|
.messureadhead {
|
|
background: $gray-500;
|
|
}
|
|
|
|
.messureadbody {
|
|
background: $gray-300;
|
|
}
|
|
|
|
.readlink {
|
|
color: $body-color; // black;
|
|
}
|
|
|
|
// /* webmail & groupmail */
|
|
.webmail_item {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.webmail_list .odd {
|
|
background: $table-accent-bg;
|
|
}
|
|
|
|
// extra small buttons
|
|
.webmail_list .btn {
|
|
padding: 0.2rem 0.4rem;
|
|
font-size: 0.7rem;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.webmail_list .webmail_read {
|
|
}
|
|
|
|
.webmail_list .webmail_replied {
|
|
}
|
|
|
|
.webmail_list .webmail_taken {
|
|
}
|
|
|
|
.webmail_message {
|
|
}
|
|
|
|
.webmail_message_headers {
|
|
}
|
|
|
|
.webmail_message_headers th {
|
|
}
|
|
|
|
// tiki-sheets.less
|
|
.tiki_sheet table td {
|
|
// /* override .tabcontent table td */
|
|
border: 1px solid $border-color;
|
|
}
|
|
|
|
// /* odd and even classes for tr, td, and li */
|
|
.odd {
|
|
background: $table-bg;
|
|
color: $body-color;
|
|
}
|
|
|
|
.even {
|
|
background: $table-accent-bg;
|
|
color: $body-color;
|
|
}
|
|
|
|
// odd checkbox columns
|
|
.objectperms .checkBoxHeader:nth-of-type(odd) > div > label,
|
|
.objectperms td.checkBoxCell:nth-of-type(odd),
|
|
.objectperms .checkBoxHeader:nth-of-type(odd) > .checkBoxLabel { background: $tiki-table-column-bg-odd; }
|
|
|
|
// tiki-toolbars.less
|
|
.helptool-admin {
|
|
// /* right justified section of toolbars */
|
|
border-left: medium double $gray-200;
|
|
}
|
|
|
|
.toolbar-list {
|
|
border-left: medium double $gray-200;
|
|
}
|
|
|
|
.toolbars-picker {
|
|
// /* colours, smilies etc */
|
|
background: $body-bg;
|
|
border: thin solid $body-color;
|
|
color: $body-color;
|
|
}
|
|
|
|
.toolbars-picker a {
|
|
border: 1px solid $body-bg;
|
|
color: $body-color;
|
|
}
|
|
|
|
.toolbars-picker a:hover {
|
|
border: 1px solid $danger;
|
|
background: $gray-300;
|
|
color: $body-color;
|
|
}
|
|
|
|
// /* New Toolbars */
|
|
.textarea-toolbar > div,
|
|
.textarea-toolbar > ul {
|
|
background-color: $gray-200;
|
|
border: outset 1px $gray-200;
|
|
}
|
|
|
|
a.toolbar,
|
|
li.toolbar {
|
|
/* each tool button */
|
|
border: none;
|
|
background: transparent;
|
|
color: $body-color;
|
|
text-shadow: 1px 1px 4px rgba(0,0,0,.2);
|
|
}
|
|
|
|
a.toolbar:hover,
|
|
li.toolbar:hover {
|
|
color: lighten($body-color, 25%);
|
|
text-shadow: -1px -1px 4px rgba(0,0,0,.2);
|
|
}
|
|
|
|
a.toolbar:active,
|
|
li.toolbar:active {
|
|
color: $danger;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,.5);
|
|
}
|
|
|
|
|
|
|
|
// tiki-translation.less
|
|
#intertrans-indicator {
|
|
background-color: $tiki-intertrans_background;
|
|
color: $success;
|
|
}
|
|
|
|
#intertrans-form {
|
|
background-color: $card-bg;
|
|
border: 1px solid $card-border-color;
|
|
color: $body-color;
|
|
}
|
|
|
|
#edit_translations tr.last {
|
|
border-bottom: 2px solid $success;
|
|
}
|
|
|
|
ul.all_languages > li {
|
|
border: 1px solid $success;
|
|
}
|
|
|
|
// /* mouseover plugin */
|
|
.plugin-mouseover {
|
|
background: $popover-bg;
|
|
border: 1px solid $popover-border-color;
|
|
}
|
|
|
|
// /* wikiplugin_tracker */
|
|
.mandatory_note {
|
|
color: $danger;
|
|
}
|
|
|
|
// /* page contribution by author / wikiplugin_author */
|
|
.author0 {
|
|
color: $success;
|
|
}
|
|
|
|
.author1 {
|
|
color: $info;
|
|
}
|
|
|
|
.author2 {
|
|
color: $info;
|
|
}
|
|
|
|
.author3 {
|
|
color: $danger;
|
|
}
|
|
|
|
.author4 {
|
|
color: adjust-hue($success, 50);
|
|
}
|
|
|
|
.author5 {
|
|
color: adjust-hue($info, 70);
|
|
}
|
|
|
|
.author6 {
|
|
color: adjust-hue($warning, 50);
|
|
}
|
|
|
|
.author7 {
|
|
color: adjust-hue($danger, 50);
|
|
}
|
|
|
|
.author8 {
|
|
color: adjust-hue($success, 100);
|
|
}
|
|
|
|
.author9 {
|
|
color: adjust-hue($info, 100);
|
|
}
|
|
|
|
.author10 {
|
|
color: adjust-hue($warning, 100);
|
|
}
|
|
|
|
.author11 {
|
|
color: adjust-hue($danger, 100);
|
|
}
|
|
|
|
.author12 {
|
|
color: adjust-hue($success, 170);
|
|
}
|
|
|
|
.author13 {
|
|
color: adjust-hue($info, 140);
|
|
}
|
|
|
|
.author14 {
|
|
color: adjust-hue($warning, 160);
|
|
}
|
|
|
|
.author15 {
|
|
color: adjust-hue($danger, 160);
|
|
}
|
|
|
|
.structuremenu .menuSection {
|
|
border-left: 1px dotted $gray-500;
|
|
}
|
|
|
|
// /* Inline CkEditor */
|
|
.cke_editable:hover {
|
|
outline: $gray-500 dotted 1px;
|
|
}
|
|
|
|
// /* Background for CKEditor */
|
|
.tiki .cke_wysiwyg_frame,
|
|
.tiki .cke_wysiwyg_div {
|
|
background: $tiki-editor-bg; // $body-bg;
|
|
color: $tiki-editor-text-color; // $body-color;
|
|
}
|
|
|
|
.tiki_plugin {
|
|
background-color: transparent; // /* was #f8f8f8; */
|
|
border: 1px solid $gray-300;
|
|
}
|
|
|
|
.unsavedChangesInEditor {
|
|
border: 1px solid;
|
|
border-color: $warning;
|
|
}
|
|
|
|
// /* Auto TOC */
|
|
.autotoc > .nav {
|
|
background: $card-bg;
|
|
border: 1px solid $card-border-color;
|
|
border-radius: $border-radius;
|
|
}
|
|
|
|
.autotoc * {
|
|
color: $link-color;
|
|
}
|
|
|
|
.autotoc .nav > li > a:hover,
|
|
.autotoc .nav .nav > li > a:hover {
|
|
color: $link-hover-color;
|
|
// background: $navbar-dark-link-hover-bg;
|
|
}
|
|
|
|
.plugin-form-float {
|
|
background: $body-bg;
|
|
color: $body-color;
|
|
border: solid 2px $body-color;
|
|
}
|
|
|
|
// /* CKeditor contrast */
|
|
body.wikitext {
|
|
background: $body-bg;
|
|
color: $body-color;
|
|
}
|
|
|
|
.editable-inline {
|
|
padding-right: 20px;
|
|
display: inline-block;
|
|
.icon {
|
|
font-size: small;
|
|
}
|
|
}
|
|
|
|
.editable-inline.loaded {
|
|
background: $popover-bg;
|
|
padding: 6px;
|
|
border: 1px solid #eee;
|
|
border-radius: 4px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.editable-inline.failure {
|
|
.icon {
|
|
opacity: 50%;
|
|
}
|
|
}
|
|
|
|
.editable-inline.modified {
|
|
border: solid 2px $danger;
|
|
padding: 2px;
|
|
}
|
|
|
|
.editable-inline.unsaved {
|
|
border: solid 2px $danger;
|
|
}
|
|
|
|
.structure_select .cssmenu_horiz ul li {
|
|
border: 1px solid $gray-500;
|
|
}
|
|
|
|
// .admintoclevel .actions input {
|
|
// border: solid 1px $gray-500;
|
|
// }
|
|
|
|
// /* Fullscreen textareas */
|
|
.TextArea-fullscreen,
|
|
.CodeMirror-fullscreen {
|
|
&, & .edit-zone-footer {
|
|
background-color: $body-bg;
|
|
}
|
|
}
|
|
|
|
.TextArea-fullscreen .actions,
|
|
.CodeMirror-fullscreen .actions {
|
|
background-color: $body-bg;
|
|
border-top: $gray-300 1px solid;
|
|
}
|
|
|
|
// /* Autosave Preview handle */
|
|
#autosave_preview {
|
|
background-color: $body-bg;
|
|
color: $body-color;
|
|
}
|
|
|
|
#autosave_preview_grippy {
|
|
background-color: $gray-300;
|
|
background-image: url('#{$imagePathToImgDir}icons/shading.png');
|
|
}
|
|
|
|
// /* Namespace styling */
|
|
.wiki .namespace {
|
|
background: $gray-300;
|
|
}
|
|
|
|
.site_report a {
|
|
border-left: 1px solid $gray-500;
|
|
border-right: 1px solid $gray-500;
|
|
}
|
|
|
|
.quotebody {
|
|
border-left: 2px solid $gray-300;
|
|
}
|
|
|
|
// /* wikiplugin tracker */
|
|
.mandatory_star {
|
|
color: $danger;
|
|
font-size: 120%;
|
|
}
|
|
|
|
.trackerplugindesc {
|
|
color: $gray-800;
|
|
}
|
|
|
|
.charCount {
|
|
color: $gray-800;
|
|
}
|
|
|
|
// /* img plugin */ wikiplugin_img.php, article.tpl
|
|
.imgbox {
|
|
border: 1px solid $popover-border-color;
|
|
background-color: $popover-bg;
|
|
}
|
|
|
|
// /* wikiplugin_carousel v3 */
|
|
.ic_button {
|
|
border: 2px solid $pagination-border-color;
|
|
}
|
|
|
|
.ic_active {
|
|
border: 2px solid $pagination-active-border-color;
|
|
}
|
|
|
|
//.ic_caption { Commented pending color organization of navbar options.
|
|
// background: $navbar-dark-bg;
|
|
// color: $navbar-dark-color;
|
|
//}
|
|
|
|
.wp-cookie-consent-required {
|
|
color: $danger;
|
|
}
|
|
|
|
.wp-sign {
|
|
color: $tooltip-color;
|
|
background-color: $tooltip-bg;
|
|
a,
|
|
a:visited {
|
|
color: adjust-hue($tooltip-color, 30%);
|
|
&:hover {
|
|
color: adjust-hue($tooltip-color, 45%);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// /* TOC */
|
|
.toc {
|
|
border-top: 1px dotted $gray-300;
|
|
border-bottom: 1px dotted $gray-300;
|
|
}
|
|
|
|
// /* Wiki diff styles */
|
|
.diff td {
|
|
border: 1px solid $gray-700;
|
|
}
|
|
|
|
.diff div {
|
|
border-top: 1px solid $gray-300;
|
|
}
|
|
|
|
.diffadded {
|
|
background: $success;
|
|
color: lighten($success,50%);
|
|
}
|
|
|
|
.diffdeleted {
|
|
background: $danger;
|
|
color: lighten($danger,50%);
|
|
}
|
|
|
|
.diffadded a,
|
|
.diffadded a:hover {
|
|
color: lighten($success,100%);
|
|
}
|
|
|
|
.diffdeleted a,
|
|
.diffdeleted a:hover {
|
|
color: lighten($danger,100%);
|
|
}
|
|
|
|
.diffinldel {
|
|
background: $warning;
|
|
}
|
|
|
|
.diffbody {
|
|
background: $gray-200;
|
|
color: $gray-700;
|
|
}
|
|
|
|
.diffchar {
|
|
color: lighten($danger, 50%);
|
|
}
|
|
|
|
.diffadded .diffchar {
|
|
color: lighten($success, 50%);
|
|
}
|
|
|
|
//.searchresults blockquote em.hlt1,
|
|
//.searchresults blockquote em.hlt6,
|
|
//.highlight_word_0 {
|
|
// color: $success;
|
|
// background: $success;
|
|
//}
|
|
|
|
//.searchresults blockquote em.hlt2,
|
|
//.searchresults blockquote em.hlt7,
|
|
//.highlight_word_1 {
|
|
// color: $info;
|
|
// background: $info-;
|
|
//}
|
|
|
|
//.searchresults blockquote em.hlt3,
|
|
//.searchresults blockquote em.hlt8,
|
|
//.highlight_word_2 {
|
|
// color: $panel-warning-text;
|
|
// background: $warning;
|
|
//}
|
|
|
|
//.searchresults blockquote em.hlt4,
|
|
//.searchresults blockquote em.hlt9,
|
|
//.highlight_word_3 {
|
|
// color: $panel-danger-text;
|
|
// background: $danger;
|
|
//}
|
|
|
|
//.searchresults blockquote em.hlt5,
|
|
//.searchresults blockquote em.hlt10,
|
|
//.highlight_word_4 {
|
|
// color: adjust-hue($panel-danger-text, 20);
|
|
// background: adjust-hue($danger, 20);
|
|
//}
|
|
|
|
/* Structures drill-down menu */
|
|
div.drillshow {
|
|
border: 1px solid $gray-300;
|
|
}
|
|
|
|
// Breadcrumb
|
|
.breadcrumb {
|
|
font-style: $tiki-breadcrumb-font-style; // italic;
|
|
// font-size: $breadcrumb-font-size; // 90%; Defined by Bootstrap variable
|
|
// display: $breadcrumb-display; // block;
|
|
}
|
|
|
|
.nav-breadcrumb {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
|
|
// jQuery-UI
|
|
.tiki .ui-widget-content,
|
|
span.plugin-mouseover {
|
|
background: $modal-content-bg;
|
|
color: $body-color;
|
|
border: 1px solid $modal-content-border-color;
|
|
}
|
|
|
|
.tiki .ui-widget-header {
|
|
background: $modal-content-bg;
|
|
color: $body-color;
|
|
border-color: $modal-content-border-color;
|
|
}
|
|
|
|
.tiki .ui-dialog-content {
|
|
background: $modal-content-bg;
|
|
color: $body-color;
|
|
select,
|
|
input,
|
|
optgroup,
|
|
textarea {
|
|
background: $input-bg;
|
|
color: $input-color;
|
|
}
|
|
}
|
|
|
|
.tiki .ui-widget button {
|
|
background: $light; // $btn-primary-bg; Temporary comment out May 2022 - Gary
|
|
color: $dark; // $btn-primary-color;
|
|
}
|
|
|
|
.tiki.tiki-listpages {
|
|
.ui-widget.ui-widget-content {
|
|
border: 1px solid $border-color;
|
|
background: $input-bg;
|
|
color: $input-color;
|
|
.ui-menu-item-wrapper {
|
|
padding: 0.25rem 0.25rem 0.25rem 1.5rem;
|
|
}
|
|
.ui-state-active {
|
|
margin: 0;
|
|
background: $link-color;
|
|
color: white;
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Example: tracker field type "icon". Bootstrap modal with jquery-ui contents
|
|
.tiki .modal-content .ui-state-default { color: $tiki-modal-link-color; }
|
|
.tiki .modal-content .ui-state-hover:hover
|
|
//.tiki .modal-content .ui-state-focus,
|
|
//.tiki .modal-content .ui-widget-content .ui-state-focus,
|
|
//.tiki .modal-content .ui-widget-content .ui-state-focus:hover
|
|
{ color: $tiki-modal-link-hover-color; }
|
|
|
|
|
|
// To correct login dropdown color
|
|
.dropdown-menu { color: $dropdown-link-color; }
|
|
|
|
.tiki .col1 .table-responsive .table { // border should be on the table itself, not the containing div - g_c-l
|
|
border: 1px solid $table-border-color; // Changed from $card-border-color; why not use closest class?
|
|
}
|
|
|
|
//
|
|
|
|
.codecaption {
|
|
display: inline-block;
|
|
color: $code-color;
|
|
background: $code-bg;
|
|
border: 1px solid lighten($code-color, 60%);
|
|
border-bottom: none;
|
|
padding: 2px 9.5px;
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
code,
|
|
pre.codelisting {
|
|
background: $code-bg;
|
|
border: $border-width solid transparent;
|
|
padding: $kbd-padding-y $kbd-padding-x;
|
|
}
|
|
code {
|
|
color: $code-color;
|
|
}
|
|
pre.codelisting {
|
|
color: $kbd-bg;
|
|
border-color: $border-color;
|
|
border-radius: $border-radius;
|
|
}
|
|
pre.codelisting code {
|
|
color: inherit;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
// edit menu contextual icons
|
|
.edit-menu {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 2px;
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
.edit-menu { display: none; }
|
|
.navbar-default:hover .edit-menu { display: block; }
|
|
}
|
|
|
|
@include media-breakpoint-down(xs) {
|
|
.navbar-default .edit-menu { top: 48px; }
|
|
}
|
|
|
|
// Make hierarchical arrangement of admin options more clear
|
|
.adminoptionboxchild {
|
|
border-bottom: 1px solid $hr-color;
|
|
legend {
|
|
font-size: $tiki-secondary-legend-font-size;
|
|
}
|
|
}
|
|
|
|
// Make links in highlighted adminoptions visible with nice contrast
|
|
div.highlight.adminoptionbox a {
|
|
color: color-contrast($danger) !important; // returns color contrast to danger color
|
|
}
|
|
|
|
// Admin navbar switch
|
|
|
|
input[type="checkbox"].preffilter-toggle-round + label {
|
|
background-color: $gray-300;
|
|
}
|
|
|
|
input[type="checkbox"].preffilter-toggle-round + label:before {
|
|
color: $input-color;
|
|
background-color: $input-bg;
|
|
border-color: darken($input-bg, 10%);
|
|
}
|
|
|
|
input[type="checkbox"].preffilter-toggle-round + label:after {
|
|
}
|
|
|
|
// Method based on https://codepen.io/davidhalford/pen/wlDxL
|
|
input[type="checkbox"].preffilter-toggle-round:checked + label:before {
|
|
background-color: $success;
|
|
border-color: darken($primary, 10%);
|
|
$n: $success;
|
|
$color-brightness: round((red($n) * 299) + (green($n) * 587) + (blue($n) * 114) / 1000);
|
|
$light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000);
|
|
|
|
@if abs($color-brightness) < ($light-color/2){
|
|
color: white;
|
|
}
|
|
|
|
@else {
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
//jQuery-ui
|
|
.tiki .ui-widget {
|
|
font-family: $font-family-base;
|
|
font-size: $font-size-base;
|
|
}
|
|
|
|
// Hack to give .btn-secondary color to the "Files" button in tiki-page_bar.tpl.
|
|
.btn-primary.btn-files {
|
|
@include button-variant($secondary, $secondary, $secondary);
|
|
}
|
|
|
|
// code for the design of the checkbox for interactive translation
|
|
|
|
.intertrans {
|
|
.switch {
|
|
display: inline-block;
|
|
width: 40px;
|
|
height: 20px;
|
|
margin: 6px;
|
|
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
transform: translateY(50%);
|
|
position: relative;
|
|
input {
|
|
display: none;
|
|
}
|
|
}
|
|
.slider {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
|
|
border-radius: 30px;
|
|
//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
|
|
box-shadow: 0 0 0 2px $tiki-color_pigeon_post_approx, 0 0 4px $tiki-color_bright_gray_approx;
|
|
cursor: pointer;
|
|
border: 4px solid transparent;
|
|
overflow: hidden;
|
|
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
|
|
transition: .4s;
|
|
&:before {
|
|
position: absolute;
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
background: $tiki-color_picton_blue_approx;
|
|
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
|
|
border-radius: 30px;
|
|
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
transform: translateX(-30px);
|
|
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
|
|
transition: .4s;
|
|
}
|
|
}
|
|
input:checked + .slider {
|
|
//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
|
|
box-shadow: 0 0 0 2px $tiki-color_gray_suit_approx,0 0 2px $tiki-color_zircon_approx;
|
|
&:before {
|
|
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
transform: translateX(0px);
|
|
background: $tiki-color_pizazz_approx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.permission_table {
|
|
.form-row {
|
|
margin-left: 0; margin-right: 0;
|
|
> .col { padding-left: 15px; padding-right: 15px; }
|
|
}
|
|
}
|
|
|
|
.tiki-admin_modules {
|
|
.t_navbar .btn {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: breakpoint-max(sm)) {
|
|
.navbar-nav {
|
|
padding: 0 15px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.tiki-view_tracker, .tiki-admin_tracker_fields, .tiki-lastchanges,
|
|
.tiki-admin_survey_questions, .tiki-assignuser, .tiki_user_messages,
|
|
.tiki-view_banner {
|
|
.t_navbar {
|
|
.btn-group > .btn:not(.dropdown-toggle),
|
|
&.btn-group > .btn:not(.dropdown-toggle) {
|
|
margin-right: 5px;
|
|
margin-bottom: 5px;
|
|
border-radius: 0.25rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
#pagehistory .multi {
|
|
.input-group-append {
|
|
display: block;
|
|
margin: 0 !important;
|
|
.btn {
|
|
width: 100%;
|
|
margin-top: 5px;
|
|
border-radius: 0.25rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.t_navbar {
|
|
.btn-group { display: inline-block; }
|
|
}
|
|
|
|
.tiki-admin_menu_options {
|
|
#preview_code { white-space: normal; }
|
|
}
|
|
|
|
.tiki-wizard_admin {
|
|
#wizardBody {
|
|
margin-top: 2em;
|
|
.media { display: block; margin-top: 1.5rem; }
|
|
}
|
|
}
|
|
|
|
.tiki-page_contribution {
|
|
.wikitext { word-break: break-word; }
|
|
}
|
|
|
|
.nav-breadcrumb {
|
|
display: block;
|
|
.breadcrumb {
|
|
width: 100%;
|
|
& + form { display: block !important; }
|
|
}
|
|
}
|
|
|
|
.tiki-edit_translation, .tiki-edit_structure {
|
|
.ui-dialog { width: 100% !important; }
|
|
}
|
|
|
|
#page-data.col-sm-9 { padding-left: 0; padding-right: 0; }
|
|
.syslog-table textarea { min-height: 5.5em; }
|
|
.tiki .ui-dialog { width: 80vw !important; }
|
|
}
|
|
|
|
blockquote {
|
|
color: $blockquote-color; // #7a7a7a;
|
|
border-left: .25rem solid $blockquote-left-border-color; //#e5e5e5;
|
|
}
|
|
|
|
.to-translate{
|
|
color : $danger;
|
|
}
|
|
|
|
// Smartmenus megamenu
|
|
.dropdown-menu.mega-menu a { color: $dropdown-link-color; }
|
|
a.dropdown-item { color: $dropdown-link-color; }
|
|
|
|
// Navbar background color consistency
|
|
.bg-light-parent {
|
|
background: $light;
|
|
}
|
|
.bg-dark-parent {
|
|
background: $dark;
|
|
}
|