installed plugin FediEmbedi version 0.11.1
This commit is contained in:
Gitium
530
wp-content/plugins/fediembedi-master/assets/ElementQueries.js
Normal file
530
wp-content/plugins/fediembedi-master/assets/ElementQueries.js
Normal file
@ -0,0 +1,530 @@
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Copyright Marc J. Schmidt. See the LICENSE file at the top-level
|
||||
* directory of this distribution and at
|
||||
* https://github.com/marcj/css-element-queries/blob/master/LICENSE.
|
||||
*/
|
||||
(function (root, factory) {
|
||||
if (typeof define === "function" && define.amd) {
|
||||
define(['./ResizeSensor.js'], factory);
|
||||
} else if (typeof exports === "object") {
|
||||
module.exports = factory(require('./ResizeSensor.js'));
|
||||
} else {
|
||||
root.ElementQueries = factory(root.ResizeSensor);
|
||||
root.ElementQueries.listen();
|
||||
}
|
||||
}(typeof window !== 'undefined' ? window : this, function (ResizeSensor) {
|
||||
|
||||
/**
|
||||
*
|
||||
* @type {Function}
|
||||
* @constructor
|
||||
*/
|
||||
var ElementQueries = function () {
|
||||
//<style> element with our dynamically created styles
|
||||
var cssStyleElement;
|
||||
|
||||
//all rules found for element queries
|
||||
var allQueries = {};
|
||||
|
||||
//association map to identify which selector belongs to a element from the animationstart event.
|
||||
var idToSelectorMapping = [];
|
||||
|
||||
/**
|
||||
*
|
||||
* @param element
|
||||
* @returns {Number}
|
||||
*/
|
||||
function getEmSize(element) {
|
||||
if (!element) {
|
||||
element = document.documentElement;
|
||||
}
|
||||
var fontSize = window.getComputedStyle(element, null).fontSize;
|
||||
return parseFloat(fontSize) || 16;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get element size
|
||||
* @param {HTMLElement} element
|
||||
* @returns {Object} {width, height}
|
||||
*/
|
||||
function getElementSize(element) {
|
||||
if (!element.getBoundingClientRect) {
|
||||
return {
|
||||
width: element.offsetWidth,
|
||||
height: element.offsetHeight
|
||||
}
|
||||
}
|
||||
|
||||
var rect = element.getBoundingClientRect();
|
||||
return {
|
||||
width: Math.round(rect.width),
|
||||
height: Math.round(rect.height)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @copyright https://github.com/Mr0grog/element-query/blob/master/LICENSE
|
||||
*
|
||||
* @param {HTMLElement} element
|
||||
* @param {*} value
|
||||
* @returns {*}
|
||||
*/
|
||||
function convertToPx(element, value) {
|
||||
var numbers = value.split(/\d/);
|
||||
var units = numbers[numbers.length - 1];
|
||||
value = parseFloat(value);
|
||||
switch (units) {
|
||||
case "px":
|
||||
return value;
|
||||
case "em":
|
||||
return value * getEmSize(element);
|
||||
case "rem":
|
||||
return value * getEmSize();
|
||||
// Viewport units!
|
||||
// According to http://quirksmode.org/mobile/tableViewport.html
|
||||
// documentElement.clientWidth/Height gets us the most reliable info
|
||||
case "vw":
|
||||
return value * document.documentElement.clientWidth / 100;
|
||||
case "vh":
|
||||
return value * document.documentElement.clientHeight / 100;
|
||||
case "vmin":
|
||||
case "vmax":
|
||||
var vw = document.documentElement.clientWidth / 100;
|
||||
var vh = document.documentElement.clientHeight / 100;
|
||||
var chooser = Math[units === "vmin" ? "min" : "max"];
|
||||
return value * chooser(vw, vh);
|
||||
default:
|
||||
return value;
|
||||
// for now, not supporting physical units (since they are just a set number of px)
|
||||
// or ex/ch (getting accurate measurements is hard)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {HTMLElement} element
|
||||
* @param {String} id
|
||||
* @constructor
|
||||
*/
|
||||
function SetupInformation(element, id) {
|
||||
this.element = element;
|
||||
var key, option, elementSize, value, actualValue, attrValues, attrValue, attrName;
|
||||
|
||||
var attributes = ['min-width', 'min-height', 'max-width', 'max-height'];
|
||||
|
||||
/**
|
||||
* Extracts the computed width/height and sets to min/max- attribute.
|
||||
*/
|
||||
this.call = function () {
|
||||
// extract current dimensions
|
||||
elementSize = getElementSize(this.element);
|
||||
|
||||
attrValues = {};
|
||||
|
||||
for (key in allQueries[id]) {
|
||||
if (!allQueries[id].hasOwnProperty(key)) {
|
||||
continue;
|
||||
}
|
||||
option = allQueries[id][key];
|
||||
|
||||
value = convertToPx(this.element, option.value);
|
||||
|
||||
actualValue = option.property === 'width' ? elementSize.width : elementSize.height;
|
||||
attrName = option.mode + '-' + option.property;
|
||||
attrValue = '';
|
||||
|
||||
if (option.mode === 'min' && actualValue >= value) {
|
||||
attrValue += option.value;
|
||||
}
|
||||
|
||||
if (option.mode === 'max' && actualValue <= value) {
|
||||
attrValue += option.value;
|
||||
}
|
||||
|
||||
if (!attrValues[attrName]) attrValues[attrName] = '';
|
||||
if (attrValue && -1 === (' ' + attrValues[attrName] + ' ').indexOf(' ' + attrValue + ' ')) {
|
||||
attrValues[attrName] += ' ' + attrValue;
|
||||
}
|
||||
}
|
||||
|
||||
for (var k in attributes) {
|
||||
if (!attributes.hasOwnProperty(k)) continue;
|
||||
|
||||
if (attrValues[attributes[k]]) {
|
||||
this.element.setAttribute(attributes[k], attrValues[attributes[k]].substr(1));
|
||||
} else {
|
||||
this.element.removeAttribute(attributes[k]);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} element
|
||||
* @param {Object} id
|
||||
*/
|
||||
function setupElement(element, id) {
|
||||
if (!element.elementQueriesSetupInformation) {
|
||||
element.elementQueriesSetupInformation = new SetupInformation(element, id);
|
||||
}
|
||||
|
||||
if (!element.elementQueriesSensor) {
|
||||
element.elementQueriesSensor = new ResizeSensor(element, function () {
|
||||
element.elementQueriesSetupInformation.call();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Stores rules to the selector that should be applied once resized.
|
||||
*
|
||||
* @param {String} selector
|
||||
* @param {String} mode min|max
|
||||
* @param {String} property width|height
|
||||
* @param {String} value
|
||||
*/
|
||||
function queueQuery(selector, mode, property, value) {
|
||||
if (typeof(allQueries[selector]) === 'undefined') {
|
||||
allQueries[selector] = [];
|
||||
// add animation to trigger animationstart event, so we know exactly when a element appears in the DOM
|
||||
|
||||
var id = idToSelectorMapping.length;
|
||||
cssStyleElement.innerHTML += '\n' + selector + ' {animation: 0.1s element-queries;}';
|
||||
cssStyleElement.innerHTML += '\n' + selector + ' > .resize-sensor {min-width: '+id+'px;}';
|
||||
idToSelectorMapping.push(selector);
|
||||
}
|
||||
|
||||
allQueries[selector].push({
|
||||
mode: mode,
|
||||
property: property,
|
||||
value: value
|
||||
});
|
||||
}
|
||||
|
||||
function getQuery(container) {
|
||||
var query;
|
||||
if (document.querySelectorAll) query = (container) ? container.querySelectorAll.bind(container) : document.querySelectorAll.bind(document);
|
||||
if (!query && 'undefined' !== typeof $$) query = $$;
|
||||
if (!query && 'undefined' !== typeof jQuery) query = jQuery;
|
||||
|
||||
if (!query) {
|
||||
throw 'No document.querySelectorAll, jQuery or Mootools\'s $$ found.';
|
||||
}
|
||||
|
||||
return query;
|
||||
}
|
||||
|
||||
/**
|
||||
* If animationStart didn't catch a new element in the DOM, we can manually search for it
|
||||
*/
|
||||
function findElementQueriesElements(container) {
|
||||
var query = getQuery(container);
|
||||
|
||||
for (var selector in allQueries) if (allQueries.hasOwnProperty(selector)) {
|
||||
// find all elements based on the extract query selector from the element query rule
|
||||
var elements = query(selector, container);
|
||||
|
||||
for (var i = 0, j = elements.length; i < j; i++) {
|
||||
setupElement(elements[i], selector);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {HTMLElement} element
|
||||
*/
|
||||
function attachResponsiveImage(element) {
|
||||
var children = [];
|
||||
var rules = [];
|
||||
var sources = [];
|
||||
var defaultImageId = 0;
|
||||
var lastActiveImage = -1;
|
||||
var loadedImages = [];
|
||||
|
||||
for (var i in element.children) {
|
||||
if (!element.children.hasOwnProperty(i)) continue;
|
||||
|
||||
if (element.children[i].tagName && element.children[i].tagName.toLowerCase() === 'img') {
|
||||
children.push(element.children[i]);
|
||||
|
||||
var minWidth = element.children[i].getAttribute('min-width') || element.children[i].getAttribute('data-min-width');
|
||||
//var minHeight = element.children[i].getAttribute('min-height') || element.children[i].getAttribute('data-min-height');
|
||||
var src = element.children[i].getAttribute('data-src') || element.children[i].getAttribute('url');
|
||||
|
||||
sources.push(src);
|
||||
|
||||
var rule = {
|
||||
minWidth: minWidth
|
||||
};
|
||||
|
||||
rules.push(rule);
|
||||
|
||||
if (!minWidth) {
|
||||
defaultImageId = children.length - 1;
|
||||
element.children[i].style.display = 'block';
|
||||
} else {
|
||||
element.children[i].style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
lastActiveImage = defaultImageId;
|
||||
|
||||
function check() {
|
||||
var imageToDisplay = false, i;
|
||||
|
||||
for (i in children) {
|
||||
if (!children.hasOwnProperty(i)) continue;
|
||||
|
||||
if (rules[i].minWidth) {
|
||||
if (element.offsetWidth > rules[i].minWidth) {
|
||||
imageToDisplay = i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!imageToDisplay) {
|
||||
//no rule matched, show default
|
||||
imageToDisplay = defaultImageId;
|
||||
}
|
||||
|
||||
if (lastActiveImage !== imageToDisplay) {
|
||||
//image change
|
||||
|
||||
if (!loadedImages[imageToDisplay]) {
|
||||
//image has not been loaded yet, we need to load the image first in memory to prevent flash of
|
||||
//no content
|
||||
|
||||
var image = new Image();
|
||||
image.onload = function () {
|
||||
children[imageToDisplay].src = sources[imageToDisplay];
|
||||
|
||||
children[lastActiveImage].style.display = 'none';
|
||||
children[imageToDisplay].style.display = 'block';
|
||||
|
||||
loadedImages[imageToDisplay] = true;
|
||||
|
||||
lastActiveImage = imageToDisplay;
|
||||
};
|
||||
|
||||
image.src = sources[imageToDisplay];
|
||||
} else {
|
||||
children[lastActiveImage].style.display = 'none';
|
||||
children[imageToDisplay].style.display = 'block';
|
||||
lastActiveImage = imageToDisplay;
|
||||
}
|
||||
} else {
|
||||
//make sure for initial check call the .src is set correctly
|
||||
children[imageToDisplay].src = sources[imageToDisplay];
|
||||
}
|
||||
}
|
||||
|
||||
element.resizeSensorInstance = new ResizeSensor(element, check);
|
||||
check();
|
||||
}
|
||||
|
||||
function findResponsiveImages() {
|
||||
var query = getQuery();
|
||||
|
||||
var elements = query('[data-responsive-image],[responsive-image]');
|
||||
for (var i = 0, j = elements.length; i < j; i++) {
|
||||
attachResponsiveImage(elements[i]);
|
||||
}
|
||||
}
|
||||
|
||||
var regex = /,?[\s\t]*([^,\n]*?)((?:\[[\s\t]*?(?:min|max)-(?:width|height)[\s\t]*?[~$\^]?=[\s\t]*?"[^"]*?"[\s\t]*?])+)([^,\n\s\{]*)/mgi;
|
||||
var attrRegex = /\[[\s\t]*?(min|max)-(width|height)[\s\t]*?[~$\^]?=[\s\t]*?"([^"]*?)"[\s\t]*?]/mgi;
|
||||
|
||||
/**
|
||||
* @param {String} css
|
||||
*/
|
||||
function extractQuery(css) {
|
||||
var match, smatch, attrs, attrMatch;
|
||||
|
||||
css = css.replace(/'/g, '"');
|
||||
while (null !== (match = regex.exec(css))) {
|
||||
smatch = match[1] + match[3];
|
||||
attrs = match[2];
|
||||
|
||||
while (null !== (attrMatch = attrRegex.exec(attrs))) {
|
||||
queueQuery(smatch, attrMatch[1], attrMatch[2], attrMatch[3]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {CssRule[]|String} rules
|
||||
*/
|
||||
function readRules(rules) {
|
||||
var selector = '';
|
||||
|
||||
if (!rules) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ('string' === typeof rules) {
|
||||
rules = rules.toLowerCase();
|
||||
if (-1 !== rules.indexOf('min-width') || -1 !== rules.indexOf('max-width')) {
|
||||
extractQuery(rules);
|
||||
}
|
||||
} else {
|
||||
for (var i = 0, j = rules.length; i < j; i++) {
|
||||
if (1 === rules[i].type) {
|
||||
selector = rules[i].selectorText || rules[i].cssText;
|
||||
if (-1 !== selector.indexOf('min-height') || -1 !== selector.indexOf('max-height')) {
|
||||
extractQuery(selector);
|
||||
} else if (-1 !== selector.indexOf('min-width') || -1 !== selector.indexOf('max-width')) {
|
||||
extractQuery(selector);
|
||||
}
|
||||
} else if (4 === rules[i].type) {
|
||||
readRules(rules[i].cssRules || rules[i].rules);
|
||||
} else if (3 === rules[i].type) {
|
||||
if(rules[i].styleSheet.hasOwnProperty("cssRules")) {
|
||||
readRules(rules[i].styleSheet.cssRules);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var defaultCssInjected = false;
|
||||
|
||||
/**
|
||||
* Searches all css rules and setups the event listener to all elements with element query rules..
|
||||
*/
|
||||
this.init = function () {
|
||||
var animationStart = 'animationstart';
|
||||
if (typeof document.documentElement.style['webkitAnimationName'] !== 'undefined') {
|
||||
animationStart = 'webkitAnimationStart';
|
||||
} else if (typeof document.documentElement.style['MozAnimationName'] !== 'undefined') {
|
||||
animationStart = 'mozanimationstart';
|
||||
} else if (typeof document.documentElement.style['OAnimationName'] !== 'undefined') {
|
||||
animationStart = 'oanimationstart';
|
||||
}
|
||||
|
||||
document.body.addEventListener(animationStart, function (e) {
|
||||
var element = e.target;
|
||||
var styles = element && window.getComputedStyle(element, null);
|
||||
var animationName = styles && styles.getPropertyValue('animation-name');
|
||||
var requiresSetup = animationName && (-1 !== animationName.indexOf('element-queries'));
|
||||
|
||||
if (requiresSetup) {
|
||||
element.elementQueriesSensor = new ResizeSensor(element, function () {
|
||||
if (element.elementQueriesSetupInformation) {
|
||||
element.elementQueriesSetupInformation.call();
|
||||
}
|
||||
});
|
||||
|
||||
var sensorStyles = window.getComputedStyle(element.resizeSensor, null);
|
||||
var id = sensorStyles.getPropertyValue('min-width');
|
||||
id = parseInt(id.replace('px', ''));
|
||||
setupElement(e.target, idToSelectorMapping[id]);
|
||||
}
|
||||
});
|
||||
|
||||
if (!defaultCssInjected) {
|
||||
cssStyleElement = document.createElement('style');
|
||||
cssStyleElement.type = 'text/css';
|
||||
cssStyleElement.innerHTML = '[responsive-image] > img, [data-responsive-image] {overflow: hidden; padding: 0; } [responsive-image] > img, [data-responsive-image] > img {width: 100%;}';
|
||||
|
||||
//safari wants at least one rule in keyframes to start working
|
||||
cssStyleElement.innerHTML += '\n@keyframes element-queries { 0% { visibility: inherit; } }';
|
||||
document.getElementsByTagName('head')[0].appendChild(cssStyleElement);
|
||||
defaultCssInjected = true;
|
||||
}
|
||||
|
||||
for (var i = 0, j = document.styleSheets.length; i < j; i++) {
|
||||
try {
|
||||
if (document.styleSheets[i].href && 0 === document.styleSheets[i].href.indexOf('file://')) {
|
||||
console.warn("CssElementQueries: unable to parse local css files, " + document.styleSheets[i].href);
|
||||
}
|
||||
|
||||
readRules(document.styleSheets[i].cssRules || document.styleSheets[i].rules || document.styleSheets[i].cssText);
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
|
||||
findResponsiveImages();
|
||||
};
|
||||
|
||||
/**
|
||||
* Go through all collected rules (readRules()) and attach the resize-listener.
|
||||
* Not necessary to call it manually, since we detect automatically when new elements
|
||||
* are available in the DOM. However, sometimes handy for dirty DOM modifications.
|
||||
*
|
||||
* @param {HTMLElement} container only elements of the container are considered (document.body if not set)
|
||||
*/
|
||||
this.findElementQueriesElements = function (container) {
|
||||
findElementQueriesElements(container);
|
||||
};
|
||||
|
||||
this.update = function () {
|
||||
this.init();
|
||||
};
|
||||
};
|
||||
|
||||
ElementQueries.update = function () {
|
||||
ElementQueries.instance.update();
|
||||
};
|
||||
|
||||
/**
|
||||
* Removes all sensor and elementquery information from the element.
|
||||
*
|
||||
* @param {HTMLElement} element
|
||||
*/
|
||||
ElementQueries.detach = function (element) {
|
||||
if (element.elementQueriesSetupInformation) {
|
||||
//element queries
|
||||
element.elementQueriesSensor.detach();
|
||||
delete element.elementQueriesSetupInformation;
|
||||
delete element.elementQueriesSensor;
|
||||
|
||||
} else if (element.resizeSensorInstance) {
|
||||
//responsive image
|
||||
|
||||
element.resizeSensorInstance.detach();
|
||||
delete element.resizeSensorInstance;
|
||||
}
|
||||
};
|
||||
|
||||
ElementQueries.init = function () {
|
||||
if (!ElementQueries.instance) {
|
||||
ElementQueries.instance = new ElementQueries();
|
||||
}
|
||||
|
||||
ElementQueries.instance.init();
|
||||
};
|
||||
|
||||
var domLoaded = function (callback) {
|
||||
/* Mozilla, Chrome, Opera */
|
||||
if (document.addEventListener) {
|
||||
document.addEventListener('DOMContentLoaded', callback, false);
|
||||
}
|
||||
/* Safari, iCab, Konqueror */
|
||||
else if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
|
||||
var DOMLoadTimer = setInterval(function () {
|
||||
if (/loaded|complete/i.test(document.readyState)) {
|
||||
callback();
|
||||
clearInterval(DOMLoadTimer);
|
||||
}
|
||||
}, 10);
|
||||
}
|
||||
/* Other web browsers */
|
||||
else window.onload = callback;
|
||||
};
|
||||
|
||||
ElementQueries.findElementQueriesElements = function (container) {
|
||||
ElementQueries.instance.findElementQueriesElements(container);
|
||||
};
|
||||
|
||||
ElementQueries.listen = function () {
|
||||
domLoaded(ElementQueries.init);
|
||||
};
|
||||
|
||||
return ElementQueries;
|
||||
|
||||
}));
|
||||
354
wp-content/plugins/fediembedi-master/assets/ResizeSensor.js
Normal file
354
wp-content/plugins/fediembedi-master/assets/ResizeSensor.js
Normal file
@ -0,0 +1,354 @@
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Copyright Marc J. Schmidt. See the LICENSE file at the top-level
|
||||
* directory of this distribution and at
|
||||
* https://github.com/marcj/css-element-queries/blob/master/LICENSE.
|
||||
*/
|
||||
(function (root, factory) {
|
||||
if (typeof define === "function" && define.amd) {
|
||||
define(factory);
|
||||
} else if (typeof exports === "object") {
|
||||
module.exports = factory();
|
||||
} else {
|
||||
root.ResizeSensor = factory();
|
||||
}
|
||||
}(typeof window !== 'undefined' ? window : this, function () {
|
||||
|
||||
// Make sure it does not throw in a SSR (Server Side Rendering) situation
|
||||
if (typeof window === "undefined") {
|
||||
return null;
|
||||
}
|
||||
// https://github.com/Semantic-Org/Semantic-UI/issues/3855
|
||||
// https://github.com/marcj/css-element-queries/issues/257
|
||||
var globalWindow = typeof window != 'undefined' && window.Math == Math
|
||||
? window
|
||||
: typeof self != 'undefined' && self.Math == Math
|
||||
? self
|
||||
: Function('return this')();
|
||||
// Only used for the dirty checking, so the event callback count is limited to max 1 call per fps per sensor.
|
||||
// In combination with the event based resize sensor this saves cpu time, because the sensor is too fast and
|
||||
// would generate too many unnecessary events.
|
||||
var requestAnimationFrame = globalWindow.requestAnimationFrame ||
|
||||
globalWindow.mozRequestAnimationFrame ||
|
||||
globalWindow.webkitRequestAnimationFrame ||
|
||||
function (fn) {
|
||||
return globalWindow.setTimeout(fn, 20);
|
||||
};
|
||||
|
||||
/**
|
||||
* Iterate over each of the provided element(s).
|
||||
*
|
||||
* @param {HTMLElement|HTMLElement[]} elements
|
||||
* @param {Function} callback
|
||||
*/
|
||||
function forEachElement(elements, callback){
|
||||
var elementsType = Object.prototype.toString.call(elements);
|
||||
var isCollectionTyped = ('[object Array]' === elementsType
|
||||
|| ('[object NodeList]' === elementsType)
|
||||
|| ('[object HTMLCollection]' === elementsType)
|
||||
|| ('[object Object]' === elementsType)
|
||||
|| ('undefined' !== typeof jQuery && elements instanceof jQuery) //jquery
|
||||
|| ('undefined' !== typeof Elements && elements instanceof Elements) //mootools
|
||||
);
|
||||
var i = 0, j = elements.length;
|
||||
if (isCollectionTyped) {
|
||||
for (; i < j; i++) {
|
||||
callback(elements[i]);
|
||||
}
|
||||
} else {
|
||||
callback(elements);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get element size
|
||||
* @param {HTMLElement} element
|
||||
* @returns {Object} {width, height}
|
||||
*/
|
||||
function getElementSize(element) {
|
||||
if (!element.getBoundingClientRect) {
|
||||
return {
|
||||
width: element.offsetWidth,
|
||||
height: element.offsetHeight
|
||||
}
|
||||
}
|
||||
|
||||
var rect = element.getBoundingClientRect();
|
||||
return {
|
||||
width: Math.round(rect.width),
|
||||
height: Math.round(rect.height)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply CSS styles to element.
|
||||
*
|
||||
* @param {HTMLElement} element
|
||||
* @param {Object} style
|
||||
*/
|
||||
function setStyle(element, style) {
|
||||
Object.keys(style).forEach(function(key) {
|
||||
element.style[key] = style[key];
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Class for dimension change detection.
|
||||
*
|
||||
* @param {Element|Element[]|Elements|jQuery} element
|
||||
* @param {Function} callback
|
||||
*
|
||||
* @constructor
|
||||
*/
|
||||
var ResizeSensor = function(element, callback) {
|
||||
var lastAnimationFrame = 0;
|
||||
|
||||
/**
|
||||
*
|
||||
* @constructor
|
||||
*/
|
||||
function EventQueue() {
|
||||
var q = [];
|
||||
this.add = function(ev) {
|
||||
q.push(ev);
|
||||
};
|
||||
|
||||
var i, j;
|
||||
this.call = function(sizeInfo) {
|
||||
for (i = 0, j = q.length; i < j; i++) {
|
||||
q[i].call(this, sizeInfo);
|
||||
}
|
||||
};
|
||||
|
||||
this.remove = function(ev) {
|
||||
var newQueue = [];
|
||||
for(i = 0, j = q.length; i < j; i++) {
|
||||
if(q[i] !== ev) newQueue.push(q[i]);
|
||||
}
|
||||
q = newQueue;
|
||||
};
|
||||
|
||||
this.length = function() {
|
||||
return q.length;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {HTMLElement} element
|
||||
* @param {Function} resized
|
||||
*/
|
||||
function attachResizeEvent(element, resized) {
|
||||
if (!element) return;
|
||||
if (element.resizedAttached) {
|
||||
element.resizedAttached.add(resized);
|
||||
return;
|
||||
}
|
||||
|
||||
element.resizedAttached = new EventQueue();
|
||||
element.resizedAttached.add(resized);
|
||||
|
||||
element.resizeSensor = document.createElement('div');
|
||||
element.resizeSensor.dir = 'ltr';
|
||||
element.resizeSensor.className = 'resize-sensor';
|
||||
|
||||
var style = {
|
||||
pointerEvents: 'none',
|
||||
position: 'absolute',
|
||||
left: '0px',
|
||||
top: '0px',
|
||||
right: '0px',
|
||||
bottom: '0px',
|
||||
overflow: 'hidden',
|
||||
zIndex: '-1',
|
||||
visibility: 'hidden',
|
||||
maxWidth: '100%'
|
||||
};
|
||||
var styleChild = {
|
||||
position: 'absolute',
|
||||
left: '0px',
|
||||
top: '0px',
|
||||
transition: '0s',
|
||||
};
|
||||
|
||||
setStyle(element.resizeSensor, style);
|
||||
|
||||
var expand = document.createElement('div');
|
||||
expand.className = 'resize-sensor-expand';
|
||||
setStyle(expand, style);
|
||||
|
||||
var expandChild = document.createElement('div');
|
||||
setStyle(expandChild, styleChild);
|
||||
expand.appendChild(expandChild);
|
||||
|
||||
var shrink = document.createElement('div');
|
||||
shrink.className = 'resize-sensor-shrink';
|
||||
setStyle(shrink, style);
|
||||
|
||||
var shrinkChild = document.createElement('div');
|
||||
setStyle(shrinkChild, styleChild);
|
||||
setStyle(shrinkChild, { width: '200%', height: '200%' });
|
||||
shrink.appendChild(shrinkChild);
|
||||
|
||||
element.resizeSensor.appendChild(expand);
|
||||
element.resizeSensor.appendChild(shrink);
|
||||
element.appendChild(element.resizeSensor);
|
||||
|
||||
var computedStyle = window.getComputedStyle(element);
|
||||
var position = computedStyle ? computedStyle.getPropertyValue('position') : null;
|
||||
if ('absolute' !== position && 'relative' !== position && 'fixed' !== position && 'sticky' !== position) {
|
||||
element.style.position = 'relative';
|
||||
}
|
||||
|
||||
var dirty, rafId;
|
||||
var size = getElementSize(element);
|
||||
var lastWidth = 0;
|
||||
var lastHeight = 0;
|
||||
var initialHiddenCheck = true;
|
||||
lastAnimationFrame = 0;
|
||||
|
||||
var resetExpandShrink = function () {
|
||||
var width = element.offsetWidth;
|
||||
var height = element.offsetHeight;
|
||||
|
||||
expandChild.style.width = (width + 10) + 'px';
|
||||
expandChild.style.height = (height + 10) + 'px';
|
||||
|
||||
expand.scrollLeft = width + 10;
|
||||
expand.scrollTop = height + 10;
|
||||
|
||||
shrink.scrollLeft = width + 10;
|
||||
shrink.scrollTop = height + 10;
|
||||
};
|
||||
|
||||
var reset = function() {
|
||||
// Check if element is hidden
|
||||
if (initialHiddenCheck) {
|
||||
var invisible = element.offsetWidth === 0 && element.offsetHeight === 0;
|
||||
if (invisible) {
|
||||
// Check in next frame
|
||||
if (!lastAnimationFrame){
|
||||
lastAnimationFrame = requestAnimationFrame(function(){
|
||||
lastAnimationFrame = 0;
|
||||
|
||||
reset();
|
||||
});
|
||||
}
|
||||
|
||||
return;
|
||||
} else {
|
||||
// Stop checking
|
||||
initialHiddenCheck = false;
|
||||
}
|
||||
}
|
||||
|
||||
resetExpandShrink();
|
||||
};
|
||||
element.resizeSensor.resetSensor = reset;
|
||||
|
||||
var onResized = function() {
|
||||
rafId = 0;
|
||||
|
||||
if (!dirty) return;
|
||||
|
||||
lastWidth = size.width;
|
||||
lastHeight = size.height;
|
||||
|
||||
if (element.resizedAttached) {
|
||||
element.resizedAttached.call(size);
|
||||
}
|
||||
};
|
||||
|
||||
var onScroll = function() {
|
||||
size = getElementSize(element);
|
||||
dirty = size.width !== lastWidth || size.height !== lastHeight;
|
||||
|
||||
if (dirty && !rafId) {
|
||||
rafId = requestAnimationFrame(onResized);
|
||||
}
|
||||
|
||||
reset();
|
||||
};
|
||||
|
||||
var addEvent = function(el, name, cb) {
|
||||
if (el.attachEvent) {
|
||||
el.attachEvent('on' + name, cb);
|
||||
} else {
|
||||
el.addEventListener(name, cb);
|
||||
}
|
||||
};
|
||||
|
||||
addEvent(expand, 'scroll', onScroll);
|
||||
addEvent(shrink, 'scroll', onScroll);
|
||||
|
||||
// Fix for custom Elements
|
||||
lastAnimationFrame = requestAnimationFrame(reset);
|
||||
}
|
||||
|
||||
forEachElement(element, function(elem){
|
||||
attachResizeEvent(elem, callback);
|
||||
});
|
||||
|
||||
this.detach = function(ev) {
|
||||
// clean up the unfinished animation frame to prevent a potential endless requestAnimationFrame of reset
|
||||
if (!lastAnimationFrame) {
|
||||
window.cancelAnimationFrame(lastAnimationFrame);
|
||||
lastAnimationFrame = 0;
|
||||
}
|
||||
ResizeSensor.detach(element, ev);
|
||||
};
|
||||
|
||||
this.reset = function() {
|
||||
element.resizeSensor.resetSensor();
|
||||
};
|
||||
};
|
||||
|
||||
ResizeSensor.reset = function(element) {
|
||||
forEachElement(element, function(elem){
|
||||
elem.resizeSensor.resetSensor();
|
||||
});
|
||||
};
|
||||
|
||||
ResizeSensor.detach = function(element, ev) {
|
||||
forEachElement(element, function(elem){
|
||||
if (!elem) return;
|
||||
if(elem.resizedAttached && typeof ev === "function"){
|
||||
elem.resizedAttached.remove(ev);
|
||||
if(elem.resizedAttached.length()) return;
|
||||
}
|
||||
if (elem.resizeSensor) {
|
||||
if (elem.contains(elem.resizeSensor)) {
|
||||
elem.removeChild(elem.resizeSensor);
|
||||
}
|
||||
delete elem.resizeSensor;
|
||||
delete elem.resizedAttached;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if (typeof MutationObserver !== "undefined") {
|
||||
var observer = new MutationObserver(function (mutations) {
|
||||
for (var i in mutations) {
|
||||
if (mutations.hasOwnProperty(i)) {
|
||||
var items = mutations[i].addedNodes;
|
||||
for (var j = 0; j < items.length; j++) {
|
||||
if (items[j].resizeSensor) {
|
||||
ResizeSensor.reset(items[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function (event) {
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return ResizeSensor;
|
||||
|
||||
}));
|
||||
339
wp-content/plugins/fediembedi-master/assets/mastodon.css
Normal file
339
wp-content/plugins/fediembedi-master/assets/mastodon.css
Normal file
@ -0,0 +1,339 @@
|
||||
/* .scrollable {
|
||||
contain: strict;
|
||||
} */
|
||||
.scrollable {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
flex: 1 1 auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
will-change: transform;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 8px 10px 8px 68px;
|
||||
position: relative;
|
||||
min-height: 54px;
|
||||
border-bottom: 1px solid #c0cdd9;
|
||||
cursor: default;
|
||||
opacity: 1;
|
||||
-webkit-animation: fade .15s linear;
|
||||
animation: fade .15s linear;
|
||||
}
|
||||
.status .status__content p {
|
||||
font-family: inherit;
|
||||
}
|
||||
.status__prepend {
|
||||
margin-left: 68px;
|
||||
color: #444b5d;
|
||||
padding: 8px 0 2px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.status__prepend-icon-wrapper {
|
||||
left: -26px;
|
||||
position: absolute;
|
||||
}
|
||||
.fa-fw {
|
||||
width: 1.28571429em;
|
||||
text-align: center;
|
||||
}
|
||||
.fa {
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
.account__header {
|
||||
overflow: hidden;
|
||||
}
|
||||
.account__header__image {
|
||||
overflow: hidden;
|
||||
height: 145px;
|
||||
position: relative;
|
||||
background: #e6ebf0;
|
||||
}
|
||||
.account__header__info {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
.account__header__image img {
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.account__header__bar {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid #b3c3d1;
|
||||
}
|
||||
.account__header__tabs {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 7px 5px;
|
||||
margin-top: -55px;
|
||||
}
|
||||
.account__header__bar .avatar {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
width: 94px;
|
||||
margin-left: -2px;
|
||||
}
|
||||
.account__header__tabs .spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.account__header__tabs__buttons .button {
|
||||
margin: 0 8px;
|
||||
border: 1px solid;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
padding: 0px 16px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
.account__header__tabs__name {
|
||||
padding: 5px;
|
||||
}
|
||||
.account__header__bar .account__header__tabs__name h1 {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #000;
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.account__header__tabs__name h1 small {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #282c37;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.account__header__extra {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.account__header__bio {
|
||||
overflow: hidden;
|
||||
margin: 0 -5px;
|
||||
}
|
||||
.account__header__bio .account__header__content {
|
||||
padding: 20px 15px 5px;
|
||||
color: #000;
|
||||
}
|
||||
.account__header__bio .account__header__content p {
|
||||
font-family: inherit;
|
||||
}
|
||||
.account__header__content {
|
||||
color: #282c37;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
word-break: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.account__display-name,
|
||||
.detailed-status__application,
|
||||
.detailed-status__datetime,
|
||||
.detailed-status__display-name,
|
||||
.status__display-name,
|
||||
.status__relative-time {
|
||||
text-decoration: none;
|
||||
}
|
||||
.status__display-name {
|
||||
color: #444b5d;
|
||||
}
|
||||
.status__expand {
|
||||
width: 68px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.status__info {
|
||||
font-size: 15px;
|
||||
}
|
||||
.status__info .status__display-name {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
padding-right: 25px;
|
||||
}
|
||||
.status__avatar {
|
||||
height: 48px;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 48px;
|
||||
}
|
||||
.account__avatar {
|
||||
border-radius: 4px;
|
||||
background: transparent no-repeat;
|
||||
background-position: 50%;
|
||||
background-clip: padding-box;
|
||||
position: relative;
|
||||
}
|
||||
.account__avatar-overlay {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-size: 48px 48px;
|
||||
}
|
||||
.account__avatar-overlay-base {
|
||||
border-radius: 4px;
|
||||
background: transparent no-repeat;
|
||||
background-position: 50%;
|
||||
background-clip: padding-box;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-size: 36px 36px;
|
||||
}
|
||||
.account__avatar-overlay-overlay {
|
||||
border-radius: 4px;
|
||||
background: transparent no-repeat;
|
||||
background-position: 50%;
|
||||
background-clip: padding-box;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-size: 24px 24px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.display-name {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.display-name__account {
|
||||
font-size: 14px;
|
||||
}
|
||||
.account__display-name strong, .status__display-name strong {
|
||||
color: #000;
|
||||
}
|
||||
.display-name__html {
|
||||
font-weight: 500;
|
||||
}
|
||||
.notification__relative_time, .status__relative-time {
|
||||
color: #444b5d;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
}
|
||||
.status-card.compact {
|
||||
border-color: #ccd7e0;
|
||||
}
|
||||
.status-card {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
border: 1px solid #c0cdd9;
|
||||
border-radius: 4px;
|
||||
color: #444b5d;
|
||||
margin-top: 14px;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
.status-card.compact .status-card__image {
|
||||
flex: 0 0 60px;
|
||||
}
|
||||
.status-card__image {
|
||||
flex: 0 0 100px;
|
||||
background: #c0cdd9;
|
||||
position: relative;
|
||||
}
|
||||
.status-card__image-image {
|
||||
border-radius: 4px 0 0 4px;
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
}
|
||||
.status-card.compact .status-card__content {
|
||||
padding: 10px 8px 8px;
|
||||
}
|
||||
.status-card__content {
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
padding: 14px 14px 14px 8px;
|
||||
}
|
||||
.status-card__title {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
color: #282c37;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
.status-card__description {
|
||||
color: #282c37;
|
||||
}
|
||||
.status__wrapper[max-width~="350px"] .status-card__description {
|
||||
display: none;
|
||||
}
|
||||
.status-card__host {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.status__wrapper[max-width~="350px"] .status.status-public {
|
||||
padding: 8px 10px 8px 10px;
|
||||
}
|
||||
.status__wrapper[max-width~="350px"] .status__info {
|
||||
font-size: 1.8rem;
|
||||
margin-left: 60px;
|
||||
position: initial;
|
||||
}
|
||||
.status__wrapper[max-width~="350px"] .status__content {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.status__content .invisible {
|
||||
display: none;
|
||||
}
|
||||
.status__content .ellipsis:after {
|
||||
content: '\2026';
|
||||
}
|
||||
.status__content summary {
|
||||
background: #eee;
|
||||
border-radius: 5px;
|
||||
padding: 2px 8px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
.status__content span.invisible{
|
||||
display: none;
|
||||
}
|
||||
.status__content span.ellipsis:after{
|
||||
content: '\2026';
|
||||
}
|
||||
.status__content .media-gallery__item{
|
||||
margin: 1em 0;
|
||||
}
|
||||
video.media-gallery__item{
|
||||
max-width: 100%;
|
||||
}
|
||||
i.fa-retweet {
|
||||
background-image: url('../img/retoot.svg');
|
||||
background-position: 0 0;
|
||||
height: 19px;
|
||||
vertical-align: middle;
|
||||
width: 22px;
|
||||
color: #ccc;
|
||||
opacity: .75;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
157
wp-content/plugins/fediembedi-master/assets/peertube.css
Normal file
157
wp-content/plugins/fediembedi-master/assets/peertube.css
Normal file
@ -0,0 +1,157 @@
|
||||
/* .scrollable {
|
||||
contain: strict;
|
||||
} */
|
||||
.scrollable {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
flex: 1 1 auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
will-change: transform;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.peertube-timeline__header {
|
||||
width: 100vw;
|
||||
overflow-x: auto;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.actor,
|
||||
.actor-info {
|
||||
width: 100%;
|
||||
}
|
||||
.actor {
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.actor img {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
min-width: 80px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.actor .actor-info {
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.actor .actor-display-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
.actor .actor-info .actor-names .actor-display-name {
|
||||
font-size: 23px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.actor-info .actor-names .actor-name {
|
||||
margin-left: 7px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
font-size: 14px;
|
||||
color: #777272;
|
||||
}
|
||||
.video { margin-bottom: 1.5em; }
|
||||
.videos .video-miniature {
|
||||
padding-right: 0;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.video-thumbnail {
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
background-color: #ececec;
|
||||
-webkit-transition: -webkit-filter .2s;
|
||||
transition: -webkit-filter .2s ease;
|
||||
transition: filter .2s ease;
|
||||
transition: filter .2s ease,-webkit-filter .2s ease;
|
||||
}
|
||||
.videos .video-miniature .video-thumbnail {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
.videos .video-miniature .video-thumbnail img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.video-thumbnail .play-overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
opacity: 0;
|
||||
background-color: rgba(0,0,0,.7);
|
||||
}
|
||||
.video-thumbnail .play-overlay,
|
||||
.video-thumbnail .play-overlay .icon {
|
||||
-webkit-transition: .2s;
|
||||
transition: all .2s ease;
|
||||
}
|
||||
.video-thumbnail .play-overlay .icon {
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%,-50%) scale(.5);
|
||||
transform: translate(-50%,-50%) scale(.5);
|
||||
border-top: 13px solid transparent;
|
||||
border-bottom: 13px solid transparent;
|
||||
border-left: 18px solid rgba(255,255,255,.95);
|
||||
}
|
||||
.video-miniature .video-bottom {
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
}
|
||||
.video-thumbnail .video-thumbnail-duration-overlay {
|
||||
display: inline-block;
|
||||
background-color: rgba(0,0,0,.7);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
padding: 0 5px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.video-miniature-name{
|
||||
font-weight: 600;
|
||||
margin: 0 0 5px;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.video-miniature-created-at-views {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
.video-miniature-created-at-views .views::before {
|
||||
content: ' - '
|
||||
}
|
||||
.video-miniature-account {
|
||||
hite-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
font-size: 0.75em;
|
||||
color: #585858;
|
||||
}
|
||||
82
wp-content/plugins/fediembedi-master/assets/pixelfed.css
Normal file
82
wp-content/plugins/fediembedi-master/assets/pixelfed.css
Normal file
@ -0,0 +1,82 @@
|
||||
/* .scrollable {
|
||||
contain: strict;
|
||||
} */
|
||||
.scrollable {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
flex: 1 1 auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
will-change: transform;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/**
|
||||
* Pixelfed Styles
|
||||
*/
|
||||
.embed-card a {
|
||||
text-decoration: none;
|
||||
}
|
||||
a.card{
|
||||
border: none;
|
||||
}
|
||||
.card img {
|
||||
max-width: none;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.info-overlay {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info-overlay-text {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
.info-overlay .info-overlay-text {
|
||||
display: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.info-overlay:hover .info-overlay-text {
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.square {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.square:after {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
.square-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
}
|
||||
.embed-card .pixelfed-follow {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.pixelfed[max-width~="400px"] .pixelfed-meta .text-center{
|
||||
display: none;
|
||||
}
|
||||
.pixelfed[max-width~="350px"] .pixelfed-header{
|
||||
display: block!important;
|
||||
}
|
||||
.pixelfed[max-width~="350px"] .pixelfed-account{
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
.pixelfed[max-width~="350px"] .pixelfed-instance{
|
||||
float: right;
|
||||
clear: both;
|
||||
}
|
||||
Reference in New Issue
Block a user