// $Id: _tiki-miscellaneous_global.scss 68997 2019-02-07 23:01:01Z pom2ter $
//****** 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%);
// }

.tiki .mx--15px {
  margin-left: -15px;
  margin-right: -15px;
}

// 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: flex;
	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] .form-group .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;
}

// 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) {
	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;
}

// 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: $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: "" }
