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.
583 lines
14 KiB
583 lines
14 KiB
// $Id$
|
|
//****** Misc. Global Classes (layout and style) ****/
|
|
// highlight on interface text to draw attention;
|
|
// also highlight on "button" links, e.g. if there are some comments it
|
|
// highlights the "button" link in #page-bar under the content of the wiki pages
|
|
|
|
// (this and the following color-related selectors are moved to _tiki-selectors.scss)
|
|
// .searchresults blockquote em,
|
|
// .highlight,
|
|
// .button.highlight a,
|
|
// .button a.highlight {
|
|
// background: $state-danger-bg;
|
|
// color: $state-danger-text;
|
|
// }
|
|
//
|
|
// .button a.highlight:hover {
|
|
// background: darken($state-danger-bg, 15%);
|
|
// }
|
|
// Negative margin to offset 0.75rem padding in row so, ex, backgrounds go full width (replaces .mx--15px)
|
|
.tiki .mx-n2point5 {
|
|
margin-left: ($spacer * -0.75);
|
|
margin-right: ($spacer * -0.75);
|
|
}
|
|
// Avoid long URLs overflow and wrap them into several lines instead
|
|
a {
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
// Since button background is actually applied to the link within the button, apply button highlight to same bg area as normal button state .
|
|
.button.highlight {
|
|
background: inherit;
|
|
}
|
|
|
|
// Highlight effect is just visual distinction, so no need for block element.
|
|
span.highlight {
|
|
padding: 0 .3em;
|
|
}
|
|
|
|
// Border and background should "shrinkwrap" to text size.
|
|
div.highlight {
|
|
display: inline-block;
|
|
}
|
|
|
|
// ...except for admin preference blocks
|
|
div.highlight.adminoptionbox {
|
|
display: block;
|
|
padding: 1rem;
|
|
margin-left: -1rem;
|
|
margin-right: -1rem;
|
|
}
|
|
|
|
.rating .highlight {
|
|
padding: inherit;
|
|
}
|
|
|
|
.ratingResultAvg {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.articletitle span.ratingResultAvg {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.rbox > div.highlight {
|
|
display: block;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.wikiactions .icon.highlight {
|
|
border-radius: .2rem;
|
|
width: 1.8rem;
|
|
padding: .2rem;
|
|
}
|
|
|
|
// Input fields with browse file type - fixes the button height glitch in FF
|
|
input[type="file"] {
|
|
height: auto;
|
|
}
|
|
|
|
// 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 ;) */
|
|
// }
|
|
|
|
// Support for orphans & widows on block level elements (useful when printing or when using columns of text)
|
|
// More info at https://css-tricks.com/almanac/properties/w/widows/
|
|
address,
|
|
blockquote,
|
|
dd,
|
|
dl,
|
|
dt,
|
|
h1, h2, h3, h4, h5, h6,
|
|
li,
|
|
nav,
|
|
noscript,
|
|
ol,
|
|
p,
|
|
pre,
|
|
ul {
|
|
widows: 3;
|
|
orphans: 3;
|
|
}
|
|
|
|
// Put together all the one-liners which should not display
|
|
#attzone,
|
|
#bottom_modules .box-rsslist br,
|
|
#comzone,
|
|
#edithelpzone,
|
|
#forumpost,
|
|
#polledit,
|
|
#pollzone,
|
|
#rules-copy-panel,
|
|
#tiki-clean a.editplugin,
|
|
.collapsed ul,
|
|
// .comment.archived,
|
|
.convene-no img,
|
|
.s5-slide a.editplugin,
|
|
.tabs br,
|
|
.wiki-edithelp,
|
|
.wpfade-div-plain,
|
|
form[name=editpageform] .mb-3 .tab-content .alert-warning {
|
|
display: none;
|
|
}
|
|
|
|
#attzoneopen,
|
|
#comzoneopen,
|
|
#pollopen,
|
|
.flex-column.collapsing, // to prevent jumpy behavior of flex-column collapsing sub-items in vertical menus
|
|
.all .comment.archived {
|
|
display: block;
|
|
}
|
|
|
|
// Ajax, jquery. etc.
|
|
// Ajax Loading Overlay
|
|
#ajaxLoadingBG {
|
|
display: none;
|
|
z-index: 9999;
|
|
position: absolute;
|
|
// background: transparent url('#{$imagePathToImgDir}overlay-light.png');
|
|
}
|
|
|
|
#ajaxLoading {
|
|
display: none;
|
|
z-index: 10000;
|
|
position: absolute;
|
|
text-align: center;
|
|
vertical-align: top;
|
|
height: 80px;
|
|
width: 220px;
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
// color: $gray-300;
|
|
// background: transparent url('#{$imagePathToImgDir}loading-light.gif') no-repeat 50% 50%;
|
|
}
|
|
|
|
// cookie consent style
|
|
#cookie_consent_div {
|
|
// padding: $alert-padding;
|
|
margin: 1em;
|
|
// border: 1px solid $alert-info-border;
|
|
// color: $alert-info-text;
|
|
// background-color: $alert-info-bg;
|
|
}
|
|
|
|
#cookie_consent_div.banner {
|
|
position: fixed;
|
|
// padding: $alert-padding;
|
|
margin: 0;
|
|
// border: 1px solid $alert-info-border;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1100;
|
|
}
|
|
|
|
#cookie_consent_div .description {
|
|
font-style: normal;
|
|
font-size: 1.1em;
|
|
// font-weight: bold;
|
|
}
|
|
|
|
// cookie settings module
|
|
.box-cookiesettings {
|
|
position: fixed;
|
|
}
|
|
|
|
.box-cookiesettings.none {
|
|
position: unset;
|
|
}
|
|
|
|
.box-cookiesettings.topleft {
|
|
left: 0;
|
|
top: 0;
|
|
border-bottom-right-radius: $border-radius;
|
|
}
|
|
|
|
.box-cookiesettings.topright {
|
|
right: 0;
|
|
top: 0;
|
|
border-bottom-left-radius: $border-radius;
|
|
}
|
|
|
|
.box-cookiesettings.bottomleft {
|
|
left: 0;
|
|
bottom: 0;
|
|
border-top-right-radius: $border-radius;
|
|
}
|
|
|
|
.box-cookiesettings.bottomright {
|
|
right: 0;
|
|
bottom: 0;
|
|
border-top-left-radius: $border-radius;
|
|
}
|
|
|
|
// print mode only - to make sure print templates will use and print on seamless white bg color
|
|
// html#print {
|
|
// background: #ffffff;
|
|
// color: #000000;
|
|
// }
|
|
|
|
body.db_error {
|
|
background: none;
|
|
}
|
|
|
|
body.fullscreen {
|
|
text-align: left;
|
|
// background: #ffffff;
|
|
}
|
|
|
|
#fullscreenbutton {
|
|
background-color: rgba(0, 0, 0, 0.25);
|
|
border-bottom-left-radius: 100%;
|
|
padding: 5px 5px 15px 15px;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 1040;
|
|
}
|
|
|
|
// When Fullscreen is activated, shift menu toggle button to the left to avoid overlapping the full-screen button
|
|
#fullscreenbutton ~ nav .navbar-toggle { right: 42px; }
|
|
|
|
#show-errors-button {
|
|
z-index: 1024;
|
|
}
|
|
|
|
#errors {
|
|
z-index: 1023;
|
|
}
|
|
|
|
// Misc. Global Classes (layout and style)
|
|
|
|
#edithelpzone code {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
// .attention {
|
|
// color: $alert-danger-text;
|
|
// }
|
|
|
|
// .openid_url {
|
|
// background: #ffffff url('#{$imagePath}icons/login-OpenID-bg.gif') 1px 1px no-repeat;
|
|
// }
|
|
|
|
.bannertext {
|
|
font-size: .95em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#debugconsole {
|
|
// background: $navbar-inverse-bg;
|
|
// color: $navbar-inverse-link-color;
|
|
padding: 5px;
|
|
// border: 2px solid $navbar-inverse-border;
|
|
font-size: 1em;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 20px;
|
|
width: 60%;
|
|
height: auto;
|
|
z-index: 1000;
|
|
}
|
|
|
|
// #debugconsole form {
|
|
// color: $navbar-inverse-link-active-bg;
|
|
// }
|
|
//
|
|
// #debugconsole a {
|
|
// color: $navbar-inverse-link-active-color;
|
|
// }
|
|
|
|
.cachedStatus,
|
|
.mini {
|
|
font-size: .9em;
|
|
}
|
|
|
|
/* Icons */
|
|
a.icon,
|
|
img.icon {
|
|
border: none;
|
|
// background: transparent;
|
|
}
|
|
|
|
//a .icon:not(.icon-help,.icon-reset) { Commented out because it made heading link icons much too large.
|
|
// font-size: 1.2em;
|
|
//}
|
|
|
|
.nav a .icon.icon-menuitem {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
// Anchor icon
|
|
a.tiki_anchor {
|
|
font-size: 60%;
|
|
opacity: 0;
|
|
}
|
|
|
|
h1:hover a.tiki_anchor,
|
|
h2:hover a.tiki_anchor,
|
|
h3:hover a.tiki_anchor,
|
|
h4:hover a.tiki_anchor,
|
|
h5:hover a.tiki_anchor,
|
|
h6:hover a.tiki_anchor {
|
|
opacity: 1;
|
|
}
|
|
|
|
// So a span can act like a link and avoid the width of a button (e.g., for action icons)
|
|
span.btn-link {
|
|
cursor: pointer;
|
|
}
|
|
|
|
// So form submit buttons with icons and text used in popover actions can look just like links
|
|
// .dropdown-item, Sorry but this is affecting *all* dropdown-items; scope should be narrowed. - G_C-L
|
|
.popover button.btn-link {
|
|
font-size: $popover-font-size;
|
|
}
|
|
|
|
// make "menu" icons fixed width
|
|
.popover .iconmenu .icon,
|
|
.popover a.link-list .icon,
|
|
.popover button.btn-link.link-list .icon,
|
|
.dropdown-item .icon,
|
|
.dropdown-item .iconmenu .icon,
|
|
.dropdown-item a.link-list .icon,
|
|
.dropdown-item button.btn-link.link-list .icon {
|
|
font-size: $popover-font-size;
|
|
text-align: center;
|
|
width: 1.25em;
|
|
}
|
|
|
|
.popover button.btn-link.link-list,
|
|
// .popover button.btn-link.link-list .icon, <- this broke the FontAwesome lock and unlock icons in templates/fgal_context_menu.tpl because of the font-weight: normal definition below
|
|
.dropdown-item button.btn-link.link-list,
|
|
.dropdown-item button.btn-link.link-list .icon {
|
|
text-transform: initial;
|
|
text-align: start;
|
|
font-weight: normal;
|
|
border: none;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.popover button.btn-link.link-list,
|
|
.dropdown-item button.btn-link.link-list {
|
|
vertical-align: top;
|
|
}
|
|
|
|
// Create whitespace below buttons when the row wraps added by Gary on July 31, 2018.
|
|
.t_navbar.mb-3 > .btn {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.t_navbar.btn-group {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
// div #metadata fieldset.tabcontent, div #metadata div.tabs {
|
|
// background-color: transparent;
|
|
// }
|
|
|
|
.magnify {
|
|
float: right;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
// Modal submit buttons need to be hidden to avoid blink
|
|
.modal-body div.submit {
|
|
display: none;
|
|
}
|
|
|
|
// ColorBox
|
|
// #cboxTitle {
|
|
// background-color: $body-bg;
|
|
// }
|
|
//
|
|
// #captchaImg {
|
|
// border: 1px solid $panel-default-border;
|
|
// }
|
|
|
|
/* fix for lists with empty dl items, e.g. tracker items
|
|
* thanks hayksaakian on https://github.com/twbs/bootstrap/issues/4062
|
|
* to be removed when we update to bs 3.2
|
|
*/
|
|
.dl-horizontal > dd:after {
|
|
display: table;
|
|
content: "";
|
|
clear: both;
|
|
}
|
|
|
|
//Title for bootstrap dropdowns that drop down upon hover
|
|
.dropdown-title {
|
|
text-align: center;
|
|
padding-right: 5px;
|
|
padding-left: 5px;
|
|
opacity: .75;
|
|
}
|
|
|
|
.jscal input[type=text] {
|
|
width: calc(100% - 26px);
|
|
display: inline-block;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
//date picker dropdowns
|
|
select.form-control.date {
|
|
padding: 0;
|
|
margin-left: 0;
|
|
width: auto;
|
|
display: inline;
|
|
}
|
|
|
|
//CSS-only Masonry Grid Layout for various items
|
|
.masonry {
|
|
-moz-column-count: auto;
|
|
-webkit-column-count: auto;
|
|
column-count: auto;
|
|
-moz-column-gap: 1.5rem;
|
|
-webkit-column-gap: 1.5rem;
|
|
column-gap: 1.5rem;
|
|
-moz-column-width: 21rem;
|
|
-webkit-column-width: 21rem;
|
|
column-width: 21rem;
|
|
font-size: 0; /* this is to prevent displaying of white space rendered by unwanted nbsp e.g. in plugin LIST */
|
|
}
|
|
.masonry > * {
|
|
display: inline-block;
|
|
font-size: initial; /* this is to reset the zero font size setting above */
|
|
width: 100%;
|
|
}
|
|
.masonry * {max-width: 100%}
|
|
.masonry > br, .masonry > .editplugin {display: none !important}
|
|
.masonry > * .img-fluid,
|
|
div[style*="text-align: center"] .img-fluid {margin: auto}
|
|
|
|
.masonry.nogaps {-moz-column-gap: 0; -webkit-column-gap: 0; column-gap: 0}
|
|
.masonry.nogaps > a, .masonry.nogaps > img, .masonry.nogaps img {display: block}
|
|
|
|
.masonry.flex-horiz {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
}
|
|
.masonry.flex-horiz > * {
|
|
-webkit-box-flex: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
margin: 0;
|
|
width: auto;
|
|
}
|
|
.masonry.flex-horiz * {
|
|
max-width: 100%;
|
|
}
|
|
|
|
//Social login buttons
|
|
.social-buttons {
|
|
margin: 0 auto;
|
|
width: 250px;
|
|
}
|
|
.btn.btn-social {
|
|
margin-bottom: $padding-y;
|
|
display: block;
|
|
}
|
|
.btn-social.btn-facebook {
|
|
@include button-variant(#ffffff, #3b5998, darken(#3b5998,5%)); //facebook blue is: #3b5998
|
|
}
|
|
.btn-social.btn-linkedin {
|
|
@include button-variant(#ffffff, #4875B4, darken(#4875B4,5%)); //linkeidn blue is: #4875B4
|
|
}
|
|
|
|
#col1 {
|
|
z-index: 1;
|
|
}
|
|
|
|
textarea.wikiedit {
|
|
z-index: 2;
|
|
}
|
|
|
|
.dropdown-menu > li > .btn { text-align: left; }
|
|
|
|
.modal-dialog #alert-wrapper .alert {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// Workaround for Firefox bug (https://bugzilla.mozilla.org/show_bug.cgi?id=504622) Todo remove when Firefox 53 is released
|
|
//@-moz-document url-prefix() {
|
|
// fieldset {
|
|
// display: table-cell;
|
|
// }
|
|
//}
|
|
|
|
// Reduce visual size of external link icon to a little over the x height of text
|
|
.tiki .wiki.external + .icon-link-external,
|
|
.tiki .wiki.external .icon-link-external {
|
|
font-size: 70%; margin-left: 1px;
|
|
}
|
|
|
|
.side-col-toggle { z-index: 2; }
|
|
.tiki .side-col-toggle + #col1 {
|
|
margin-top: $tiki-top-margin-compensation-for-side-col-toggle;
|
|
padding-top: $line-height-base;
|
|
}
|
|
|
|
div.categbar {
|
|
text-align: right;
|
|
clear: both;
|
|
}
|
|
|
|
// Special class to make semi-transparent elements and make them opaque on mouse over
|
|
.opacity50 {opacity: .5; transition: opacity 1s !important}
|
|
.opacity100, .opacity50:hover, .opacity50:focus {opacity: 1}
|
|
|
|
.sitelogo .btn {display: none}
|
|
.sitelogo:hover .btn {display: block}
|
|
|
|
// Special links in "More" button of page-bar
|
|
.dropdown-menu > .btn-link {
|
|
padding: 0.25rem 1.5rem;
|
|
}
|
|
|
|
// Auto unique-numbered ordered lists (for ordered lists wrapped in class="uol" wrapper (or when enabled globally) to generate unique "chapter like" numbering X.Y.Z)
|
|
.uol {
|
|
margin-left: 2rem;
|
|
}
|
|
.uol ol:not(.media-list), ol.uol {
|
|
counter-reset: item;
|
|
}
|
|
.uol ol:not(.media-list) > li { display: block; } // negative text-indent here simulates the common ol rendering indentation
|
|
.uol ol:not(.media-list) > li:before { content: counters(item, ".") ".\0000a0"; counter-increment: item; margin-left: -3rem; } // \0000a0 is nbsp Unicode escaped
|
|
.uol ol:not(.media-list) > li ol > li:before { content: counters(item, ".") "\0000a0"; counter-increment: item } // here we remove the last dot (looks better?)
|
|
|
|
.nouol ol > li { display: list-item; text-indent: 0 }
|
|
.nouol ol > li:before, .nouol ol > li ol > li:before { content: "" }
|
|
|
|
// default styling for <blockquote> element (#7093)
|
|
|
|
blockquote {
|
|
padding: .5rem 1rem;
|
|
margin: .8rem 0;
|
|
}
|
|
|
|
// Improve horizontal spacing of breadcrumb icons and separators
|
|
.breadcrumb-item { padding-right: 0.5rem;}
|
|
.breadcrumb .tips { padding-right: 0.5rem;}
|
|
|
|
// Vertical Smartmenus hack, until a proper solution is committed
|
|
// For a vertical menu, assign a bootstrap menu, type "horiz", and add "smartmenu_vert" as containing class.
|
|
.smartmenu_vert .navbar-nav { flex-direction: column; }
|
|
@media (min-width: 768px) {
|
|
.smartmenu_vert .navbar-nav .dropdown-menu { margin-left: 6rem !important; margin-top: -1.8rem !important; }
|
|
}
|
|
.smartmenu_vert .navbar, .smartmenu_vert .navbar.bg-light, .smartmenu_vert .navbar.bg-dark { background: transparent !important; }
|
|
.smartmenu_vert .navbar-nav:not(.sm-collapsible) .nav-link .sub-arrow {
|
|
margin-left: .255em;
|
|
vertical-align: .0em;
|
|
border-left: .3em solid;
|
|
border-top: .3em solid transparent;
|
|
border-bottom: .3em solid transparent;
|
|
}
|