mirror of
https://github.com/Oreolek/ifhub-skin.git
synced 2024-06-26 03:50:46 +03:00
Стили на <spoiler> вместе с заглушкой для IE
This commit is contained in:
parent
c5b672bff0
commit
fa5bc5b7af
|
@ -32,41 +32,6 @@ ol.classic {
|
||||||
.ls-nav--userbar > .ls-nav-item > a > img {
|
.ls-nav--userbar > .ls-nav-item > a > img {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Спойлер
|
|
||||||
* Modified by fedorov mich // 2014 // bSpoiler LS 1.0
|
|
||||||
**/
|
|
||||||
.spoiler-title {
|
|
||||||
color: #6da3bd;
|
|
||||||
border-bottom: 1px dashed;
|
|
||||||
font-weight: normal;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.spoiler-title:hover {
|
|
||||||
color: #4d7285;
|
|
||||||
}
|
|
||||||
.spoiler-body {
|
|
||||||
display: none;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
background: #f9f9f9;
|
|
||||||
margin-top: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.spoiler-title:before {
|
|
||||||
float: left;
|
|
||||||
content: " ";
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
margin-top: 2px;
|
|
||||||
display: block;
|
|
||||||
border: 0px solid red;
|
|
||||||
background: url(../images/spoiler.icon.png) no-repeat left top;
|
|
||||||
}
|
|
||||||
.spoiler-title.open:before {
|
|
||||||
background: url(../images/spoiler.icon.png) no-repeat left bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Главный поиск в шапке сайта - показывается по клику
|
* Главный поиск в шапке сайта - показывается по клику
|
||||||
**/
|
**/
|
||||||
|
|
|
@ -110,9 +110,71 @@
|
||||||
background: #eee;
|
background: #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1199px) {
|
||||||
|
.markItUp .markItUpContainer .markItUpEditor {
|
||||||
|
font-size: 12pt;
|
||||||
|
font-size: 1.2vmin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.markItUp .markItUpContainer .markItUpEditor {
|
||||||
|
font-size: 14pt;
|
||||||
|
font-size: 1.4vmin;
|
||||||
|
}
|
||||||
|
}
|
||||||
.markItUp .markItUpContainer .markItUpEditor {
|
.markItUp .markItUpContainer .markItUpEditor {
|
||||||
font-size: 12pt;
|
|
||||||
font-size: 1.6vmin;
|
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
font-family: "Fira Code","Anonymous Pro","PT Mono","IBM Plex Mono", "Noto Mono","Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter",monospace;
|
font-family: "Fira Code","Anonymous Pro","PT Mono","IBM Plex Mono", "Noto Mono","Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter",monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
font-weight: bold;
|
||||||
|
margin: -.5em -.5em 0;
|
||||||
|
padding: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Спойлер
|
||||||
|
* Modified by fedorov mich // 2014 // bSpoiler LS 1.0
|
||||||
|
**/
|
||||||
|
.spoiler-title {
|
||||||
|
color: #6da3bd;
|
||||||
|
text-decoration: underline 1px dashed;
|
||||||
|
font-weight: normal;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.spoiler-title:hover {
|
||||||
|
color: #4d7285;
|
||||||
|
}
|
||||||
|
.spoiler[open] .spoiler-title {
|
||||||
|
text-decoration: none;
|
||||||
|
margin-bottom: .5em;
|
||||||
|
}
|
||||||
|
.spoiler {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.spoiler[open] {
|
||||||
|
border: 1px solid #eee;
|
||||||
|
background: #f9f9f9;
|
||||||
|
}
|
||||||
|
.spoiler-title:before {
|
||||||
|
float: left;
|
||||||
|
content: " ";
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-top: 2px;
|
||||||
|
display: block;
|
||||||
|
border: 0px solid red;
|
||||||
|
background: url(../images/spoiler.icon.png) no-repeat left top;
|
||||||
|
}
|
||||||
|
.spoiler[open] .spoiler-title:before {
|
||||||
|
background: url(../images/spoiler.icon.png) no-repeat left bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* https://github.com/stationer/DetailsShim - заглушка <details> для старых браузеров */
|
||||||
|
details.details_shim_closed,
|
||||||
|
details.details_shim_open {display: block;}
|
||||||
|
details.details_shim_closed > * {display: none;}
|
||||||
|
details.details_shim_closed > summary,
|
||||||
|
details.details_shim_open > summary {display: block;}
|
||||||
|
details.details_shim_closed > summary:before {display: inline-block; content: "\25b6"; padding: 0 0.1em; margin-right: 0.4em; font-size: 0.9em;}
|
||||||
|
details.details_shim_open > summary:before {display: inline-block; content: "\25bc"; padding: 0; margin-right: 0.35em;}
|
||||||
|
|
|
@ -9,9 +9,131 @@ jQuery(document).ready(function($){
|
||||||
$(".search-icon").on('click touchstart', function(){
|
$(".search-icon").on('click touchstart', function(){
|
||||||
$(".main-search").toggle()
|
$(".main-search").toggle()
|
||||||
});
|
});
|
||||||
$('.spoiler-title').on('click touchstart', function(){
|
|
||||||
$(this).toggleClass('open');
|
|
||||||
$(this).parent().children('div.spoiler-body').toggle('normal');
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/* --- https://github.com/stationer/DetailsShim/blob/master/details-shim.js --- */
|
||||||
|
/**
|
||||||
|
* Enable proper operation of <details> tags in unsupportive browsers
|
||||||
|
*
|
||||||
|
* @param Details details element to shim
|
||||||
|
* @returns {boolean} false on error
|
||||||
|
*/
|
||||||
|
function details_shim(Details) {
|
||||||
|
// For backward compatibility, if no DOM Element is sent, call init()
|
||||||
|
if (!Details || !('nodeType' in Details) || !('tagName' in Details)) {
|
||||||
|
return details_shim.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
var Summary;
|
||||||
|
// If we were passed a details tag, find its summary tag
|
||||||
|
if ('details' == Details.tagName.toLowerCase()) {
|
||||||
|
// Assume first found summary tag is the corresponding summary tag
|
||||||
|
Summary = Details.getElementsByTagName('summary')[0];
|
||||||
|
|
||||||
|
// If we were passed a summary tag, find its details tag
|
||||||
|
} else if (!!Details.parentNode
|
||||||
|
&& 'summary' == Details.tagName.toLowerCase()
|
||||||
|
) {
|
||||||
|
Summary = Details;
|
||||||
|
Details = Summary.parentNode;
|
||||||
|
} else {
|
||||||
|
// An invalid parameter was passed for Details
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If the details tag is natively supported or already shimmed
|
||||||
|
if ('boolean' == typeof Details.open) {
|
||||||
|
// If native, remove custom classes
|
||||||
|
if (!Details.getAttribute('data-open')) {
|
||||||
|
Details.className = Details.className
|
||||||
|
.replace(/\bdetails_shim_open\b|\bdetails_shim_closed\b/g, ' ');
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set initial class according to `open` attribute
|
||||||
|
var state = Details.outerHTML
|
||||||
|
// OR older firefox doesn't have .outerHTML
|
||||||
|
|| new XMLSerializer().serializeToString(Details);
|
||||||
|
state = state.substring(0, state.indexOf('>'));
|
||||||
|
// Read: There is an open attribute, and it's not explicitly empty
|
||||||
|
state = (-1 != state.indexOf('open') && -1 == state.indexOf('open=""'))
|
||||||
|
? 'open'
|
||||||
|
: 'closed'
|
||||||
|
;
|
||||||
|
Details.setAttribute('data-open', state);
|
||||||
|
Details.className += ' details_shim_' + state;
|
||||||
|
|
||||||
|
// Add onclick handler to toggle visibility class
|
||||||
|
Summary.addEventListener
|
||||||
|
? Summary.addEventListener('click', function() { details_shim.toggle(Details); })
|
||||||
|
: Summary.attachEvent && Summary.attachEvent('onclick', function() { details_shim.toggle(Details); })
|
||||||
|
;
|
||||||
|
|
||||||
|
Object.defineProperty(Details, 'open', {
|
||||||
|
get: function() {
|
||||||
|
return 'open' == this.getAttribute('data-open');
|
||||||
|
},
|
||||||
|
set: function(state) {
|
||||||
|
details_shim.toggle(this, state);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// wrap text nodes in span to expose them to css
|
||||||
|
for (var j = 0; j < Details.childNodes.length; j++) {
|
||||||
|
if (Details.childNodes[j].nodeType == 3
|
||||||
|
&& /[^\s]/.test(Details.childNodes[j].data)
|
||||||
|
) {
|
||||||
|
var span = document.createElement('span');
|
||||||
|
var text = Details.childNodes[j];
|
||||||
|
Details.insertBefore(span, text);
|
||||||
|
Details.removeChild(text);
|
||||||
|
span.appendChild(text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} // details_shim()
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggle the open state of specified <details> tag
|
||||||
|
* @param Details The <details> tag to toggle
|
||||||
|
* @param state Optional override state
|
||||||
|
*/
|
||||||
|
details_shim.toggle = function(Details, state) {
|
||||||
|
// If state was not passed, seek current state
|
||||||
|
if ('undefined' === typeof state) {
|
||||||
|
// new state
|
||||||
|
state = Details.getAttribute('data-open') == 'open'
|
||||||
|
? 'closed'
|
||||||
|
: 'open'
|
||||||
|
;
|
||||||
|
} else {
|
||||||
|
// Sanitize the input, expect boolean, force string
|
||||||
|
// Expecting boolean means even 'closed' will result in an open
|
||||||
|
// This is the behavior of the natively supportive browsers
|
||||||
|
state = !!state ? 'open' : 'closed';
|
||||||
|
}
|
||||||
|
|
||||||
|
Details.setAttribute('data-open', state);
|
||||||
|
// replace previous open/close class
|
||||||
|
Details.className = Details.className
|
||||||
|
.replace(/\bdetails_shim_open\b|\bdetails_shim_closed\b/g, ' ')
|
||||||
|
+ ' details_shim_' + state;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Run details_shim() on each details tag
|
||||||
|
*/
|
||||||
|
details_shim.init = function() {
|
||||||
|
// Because <details> must include a <summary>,
|
||||||
|
// collecting <summary> tags collects *valid* <details> tags
|
||||||
|
var Summaries = document.getElementsByTagName('summary');
|
||||||
|
for (var i = 0; i < Summaries.length; i++) {
|
||||||
|
details_shim(Summaries[i]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Run details_shim.init() when the page loads
|
||||||
|
window.addEventListener
|
||||||
|
? window.addEventListener('load', details_shim.init, false)
|
||||||
|
: window.attachEvent && window.attachEvent('onload', details_shim.init)
|
||||||
|
;
|
||||||
|
|
Loading…
Reference in a new issue