Webpack App

").addClass("img -js-img-"+i).css("background-image", "url("+temp[rnd_index].src+")"); + element.prepend(div); + temp.splice(rnd_index, 1); + } + + var a = [0, 1, 4, 3, 2]; + + $.setInterval(function(){ + var temp = that.images.slice(); + var colors = Colors.colors(Colors.PALETTES.ALL), bg; + bg = colors[$.random(0, colors.length - 1)]; + + element.css("background-color", bg); + + for(var i = 0; i < a.length; i++) { + var rnd_index = $.random(0, temp.length - 1); + var div = element.find(".-js-img-"+a[i]); + switchImage(div, temp[rnd_index].src, i); + temp.splice(rnd_index, 1); + } + + a = a.reverse(); + }, 5000); + } + }; + + this._runEffects = function(){ + var o = this.options; + + if (this.effectInterval === false) this.effectInterval = $.setInterval(function(){ + var current, next; + + current = $(this.slides[this.currentSlide]); + + this.currentSlide++; + if (this.currentSlide === this.slides.length) { + this.currentSlide = 0; + } + + next = this.slides[this.currentSlide]; + + if (o.effect === "animate-slide-up") FrameAnimation.slideUp($(current), $(next), o.effectDuration); + if (o.effect === "animate-slide-down") FrameAnimation.slideDown($(current), $(next), o.effectDuration); + if (o.effect === "animate-slide-left") FrameAnimation.slideLeft($(current), $(next), o.effectDuration); + if (o.effect === "animate-slide-right") FrameAnimation.slideRight($(current), $(next), o.effectDuration); + if (o.effect === "animate-fade") FrameAnimation.fade($(current), $(next), o.effectDuration); + + }, o.effectInterval); + }; + + this._stopEffects = function(){ + $.clearInterval(this.effectInterval); + this.effectInterval = false; + }; + + this.resize = function(){ + var ratio = 1; + var padding = 0; + var grid = this.element.parent('.tiles-grid'); + var gridWidth = 0; + if(grid.length > 0){ + gridWidth = grid.width(); + } + + if(this.options.size == 'wide'){ + ratio = 0.5; + } + + //修正长宽比 + var height = this.element.width() * ratio - padding; + //this.element.height(height); + + if(this.hasIcon){ + var fontSize = height * 0.33; + var iconDom = this.element.find('.icon'); + iconDom.css('font-size', fontSize + 'px'); + + if(this.hasBranding){ //计算与标签的重叠 + var iconBottom = (height + fontSize) / 2; + + var brandingTop = height - this.element.find('.branding-bar').outerHeight(); + var overlap = iconBottom - brandingTop + (height * 0.1); + if(overlap > 0){ + iconDom.css('padding-bottom', overlap + 'px'); + } + } + } + } + + this._setCover = function(to, src, pos){ + if (!Utils.isValue(pos)) { + pos = this.options.coverPosition; + } + to.css({ + backgroundImage: "url("+src+")", + backgroundSize: "cover", + backgroundRepeat: "no-repeat", + backgroundPosition: pos + }); + }; + + this._createEvents = function(){ + var element = this.element, o = this.options; + + element.on('mousedown touchstart', function(e){ + var tile = $(this); + var dim = {w: element.width(), h: element.height()}; + var X = Utils.pageXY(e).x - tile.offset().left, + Y = Utils.pageXY(e).y - tile.offset().top; + var side; + + if (Utils.isRightMouse(e) === false) { + + if (X < dim.w * 1 / 3 && (Y < dim.h * 1 / 2 || Y > dim.h * 1 / 2)) { + side = 'left'; + } else if (X > dim.w * 2 / 3 && (Y < dim.h * 1 / 2 || Y > dim.h * 1 / 2)) { + side = 'right'; + } else if (X > dim.w * 1 / 3 && X < dim.w * 2 / 3 && Y > dim.h / 2) { + side = 'bottom'; + } else { + side = "top"; + } + + if (o.canTransform === true) tile.addClass("transform-" + side); + + if (o.target !== null) { + setTimeout(function(){ + document.location.href = o.target; + }, 100); + } + + Utils.exec(o.onClick, [side], element[0]); + element.trigger("click", { + side: side + }); + } + }); + + element.on('mouseup touchend mouseleave', function(){ + $(this) + .removeClass("transform-left") + .removeClass("transform-right") + .removeClass("transform-top") + .removeClass("transform-bottom"); + }); + + $(window).on('resize', this._fixSizeCallback); + $(this._fixSizeCallback); + }; + + this.destroy = function(){ + var element = this.element; + + element.off('mousedown touchstart'); + + element.off('mouseup touchend mouseleave'); + + $(window).off('resize', this._fixSizeCallback); + + this._stopEffects(); + }; + + this.init(options, element); + }; + + function getElementOptions(element){ + var options = {}; + $.each(element[0].attributes, function (index, attribute){ + if(attribute.name.startsWith('data-')){ + options[attribute.name.substr(5)] = attribute.value; + } + }); + + return options; + } + + $.fn.extend({ + tile: function(action, ...args){ + var result; + this.each(function(){ + var element = $(this); + if(element.attr('data-role') !== 'tile'){ + throw new Error('This element isn\'t a tile element'); + } + + var tileObj = element.data('tile'); + if(action == 'init'){ + if(tileObj){ + throw new Error('Tile already inited.'); + } + + var options = args[0] || {}; + options = $.extend({}, options, getElementOptions(element)); + tileObj = new Tile(options, element); + element.data('tile', tileObj); + } else { + if(!tileObj){ + throw new Error('Tile not inited.'); + } + + if(!tileObj[action]){ + throw new Error('Method: ' + action + ' not exists.'); + } + + result = tileObj[action].apply(tileObj, ...args); + } + }); + + if(result == undefined){ + return this; + } else { + return result; + } + } + }); + + function resizeGrid(){ + $('.tiles-grid').each(function(){ + var dom = $(this); + var width = dom.width(); + var gridSize = width / 4 - GRID_GAP; + dom.css({ + gridTemplateColumns: 'repeat(4, ' + gridSize + 'px)', + gridAutoRows: gridSize + 'px', + }); + }); + } + + $('*[data-role="tile"]').tile('init'); + $(window).resize(resizeGrid); + $(resizeGrid); + + function onCollapseDivChange(mutationsList){ + mutationsList.forEach((item) => { + if(item.type == 'attributes' && item.attributeName == 'class'){ + $('*[data-role="tile"]').tile('resize'); + resizeGrid(); + } + }); + } + + if($('body').hasClass('skin-minerva')){ + $('#mw-content-text .collapsible-block').each(function(){ + var dom = $(this); + if(dom.find('*[data-role="tile"]').length > 0){ //存在tile，监听这个dom + var observer = new MutationObserver(onCollapseDivChange); + observer.observe(dom[0], { + attributes: true, + }); + } + }); + } +})(jQuery); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..b3fa8c7 --- /dev/null +++ b/package.json @@ -0,0 +1,26 @@ +{ + "name": "isekai-discover", + "version": "1.0.0", + "description": "My webpack project", + "scripts": { + "build": "webpack", + "start": "webpack-dev-server" + }, + "devDependencies": { + "@babel/core": "^7.7.2", + "@babel/preset-env": "^7.7.1", + "babel-loader": "^8.0.6", + "babel-plugin-syntax-dynamic-import": "^6.18.0", + "css-loader": "^3.2.0", + "html-webpack-plugin": "^3.2.0", + "less": "^3.9.0", + "less-loader": "^5.0.0", + "style-loader": "^1.0.0", + "webpack": "^4.41.2", + "webpack-cli": "^3.3.10", + "webpack-dev-server": "^3.9.0" + }, + "dependencies": { + "scss-loader": "0.0.1" + } +} diff --git a/src/createPage/ext.isekai.createPage.js b/src/createPage/ext.isekai.createPage.js new file mode 100644 index 0000000..6027007 --- /dev/null +++ b/src/createPage/ext.isekai.createPage.js @@ -0,0 +1,108 @@ +class CreatePagePanel { + constructor(dom) { + this.baseDom = dom; + this.pageUrl = null; + this.api = new mw.Api(); + + this.hasError = false; + + this.initDom(); + } + + initDom() { + this.pageNameInput = new OO.ui.TextInputWidget({ + placeholder: mw.message('isekai-createpage-page-title').parse(), + }); + this.pageNameInput.on('enter', this.createPage.bind(this)); + this.pageNameInput.on('change', this.onPageNameChange.bind(this)); + + this.createButton = new OO.ui.ButtonWidget({ + label: mw.message('isekai-createpage-create-page-button').parse(), + flags: [ + 'primary', + 'progressive' + ] + }); + this.createButton.on('click', this.createPage.bind(this)); + + this.formGroup = new OO.ui.ActionFieldLayout(this.pageNameInput, this.createButton, { + align: 'top' + }); + this.baseDom.find('.card-body .card-content').append(this.formGroup.$element); + } + + createPage() { + let title = this.pageNameInput.getValue(); + if (this.hasError) { + this.clearError(); //清除errors + } + if (title.trim().length > 0) { + this.createButton.setDisabled(true); + this.pageExists(title).then((exists) => { + if (exists) { + this.createButton.setDisabled(false); + this.setError(mw.message('isekai-createpage-page-exists').parse()); //提示页面已经存在 + } else { + let targetUrl = mw.util.getUrl(title, { veaction: 'edit' }); + this.formGroup.setSuccess([ + mw.message('isekai-createpage-redirecting').parse() + ]); //提示正在跳转 + location.href = targetUrl; + } + }); + } else { + this.setError(mw.message('isekai-createpage-title-empty').parse()); + } + } + + onPageNameChange() { + if (this.hasError) { + this.clearError(); + } + + let value = this.pageNameInput.getValue(); + if (value.indexOf('：') !== -1 || value.indexOf('`') !== -1) { + let range = this.pageNameInput.getRange(); + value = value.replace(/：/g, ':').replace(/`/g, '·'); + this.pageNameInput.setValue(value); + this.pageNameInput.selectRange(range.from, range.to); + } + } + + setError(msg) { + this.formGroup.setErrors([msg]); //提示页面已经存在 + this.hasError = true; + } + + clearError() { + this.formGroup.setErrors([]); + this.hasError = false; + } + + pageExists(title) { + return new Promise((resolve, reject) => { + this.api.get({ + action: 'query', + titles: title, + }).done((data) => { + if (data.query && data.query.pages) { + if (data.query.pages["-1"]) { + resolve(false); + } else { + resolve(true); + } + } else { + resolve(false); + } + }).fail(reject); + }); + } + + setTitle(title) { + this.title.text(title); + } +} +if (!global.isekai) { + global.isekai = {}; +} +global.isekai.CreatePagePanel = CreatePagePanel; \ No newline at end of file diff --git a/src/discover/ext.isekai.discover.js b/src/discover/ext.isekai.discover.js new file mode 100644 index 0000000..f427e54 --- /dev/null +++ b/src/discover/ext.isekai.discover.js @@ -0,0 +1,145 @@ +class Discover { + constructor(dom){ + this.baseDom = dom; + this.pageUrl = null; + this.api = new mw.Api(); + + this.initDom(); + this.refreshPage(); + } + + initDom(){ + this.reloadButton = new OO.ui.ButtonWidget({ + icon: 'reload', + label: mw.message('isekai-discover-change-btn').parse(), + }); + this.reloadButton.on('click', this.refreshPage.bind(this)); + + this.readMoreButton = new OO.ui.ButtonWidget({ + icon: 'ellipsis', + label: mw.message('isekai-discover-readmore-btn').parse(), + flags: [ + 'primary', + 'progressive' + ] + }); + this.readMoreButton.on('click', this.showMore.bind(this)); + + this.loadingBar = new OO.ui.ProgressBarWidget({ + progress: false, + }); + this.baseDom.find('.card-body .loading .spinner').append(this.loadingBar.$element); + + this.buttonGroup = new OO.ui.ButtonGroupWidget({ + items: [this.reloadButton, this.readMoreButton] + }); + this.baseDom.find('.card-header .card-header-buttons').append(this.buttonGroup.$element); + this.loading = this.baseDom.find('.card-body .loading'); + this.title = this.baseDom.find('.card-body .card-title'); + this.contentContainer = this.baseDom.find('.card-body .card-content'); + } + + showMore(){ + if(this.pageUrl){ //页面存在就跳转 + window.open(this.pageUrl); + } + } + + refreshPage(){ + this.pageUrl = null; + this.clearContent(); + this.showLoading(); + this.getRandomPage().then((title) => { + this.loadPage(title); + }); + } + + setTitle(title){ + this.title.text(title); + } + + showLoading(){ + this.loading.show(); + this.contentContainer.hide(); + } + + hideLoading(){ + this.loading.hide(); + this.contentContainer.show(); + } + + clearContent(){ + this.contentContainer.children().remove(); + } + + setContent(dom){ + this.hideLoading(); + this.clearContent(); + this.contentContainer.append(dom); + } + + showError(msg){ + let errorMsg = new OO.ui.MessageWidget( { + type: 'error', + label: msg, + }); + + this.setContent(errorMsg.$element); + } + + getRandomPage(){ + return new Promise((resolve, reject) => { + this.api.get({ + action: 'query', + list: 'random', + rnlimit: 1, + rnnamespace: 0, + }).done((data) => { + if(data.query && data.query.random && data.query.random.length > 0){ + let title = data.query.random[0].title; + this.setTitle(title); + resolve(title); + } else if(data.error){ + this.showError(data.error.info); + } else { + this.showError(mw.message('isekai-discover-error-cannotload').parse()); + } + }); + }); + } + + parseHTMLString(txt) { + try { + let parser = new DOMParser(); + let xmlDoc = parser.parseFromString(txt, "text/html"); + return xmlDoc; + } catch(e) { + console.error(e.message); + } + return null; + } + + loadPage(title){ + let url = mw.util.getUrl(title); + this.pageUrl = url; + if(url.indexOf('?') >= 0){ + url += '&'; + } else { + url += '?' + } + url += 'action=render'; + $.get(url, (str) => { + let dom = $(this.parseHTMLString(str)); + let content = dom.find('.mw-parser-output'); + if(content.length > 0){ + //删除目录 + content.find('.toc').remove(); + this.setContent(content); + } + }, 'html'); + } +} +if(!global.isekai){ + global.isekai = {}; +} +global.isekai.Discover = Discover; \ No newline at end of file diff --git a/src/tile/include/default-icons.less b/src/tile/include/default-icons.less new file mode 100644 index 0000000..38ae71d --- /dev/null +++ b/src/tile/include/default-icons.less @@ -0,0 +1,63 @@ +@playIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/play.svg'); +@loopIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/loop.svg'); +@stopIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/stop.svg'); +@pauseIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/pause.svg'); +@muteIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/volume-mute.svg'); +@volumeLowIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/volume-low.svg'); +@volumeMediumIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/volume-medium.svg'); +@volumeHighIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/volume-high.svg'); +@enlargeIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/enlarge.svg'); +@shrinkIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/shrink.svg'); +@playlistIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/list.svg'); +@nextIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/next.svg'); +@prevIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/prev.svg'); +@firstIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/first.svg'); +@lastIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/last.svg'); +@forwardIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/forward.svg'); +@backwardIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/backward.svg'); +@shareIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/share.svg'); +@equalizerIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/equalizer.svg'); +@ejectIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/eject.svg'); +@shuffleIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/shuffle.svg'); +@randomIconLight: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/light/dice.svg'); + +@playIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/play.svg'); +@loopIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/loop.svg'); +@stopIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/stop.svg'); +@pauseIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/pause.svg'); +@muteIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/volume-mute.svg'); +@volumeLowIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/volume-low.svg'); +@volumeMediumIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/volume-medium.svg'); +@volumeHighIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/volume-high.svg'); +@enlargeIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/enlarge.svg'); +@shrinkIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/shrink.svg'); +@playlistIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/list.svg'); +@nextIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/next.svg'); +@prevIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/prev.svg'); +@firstIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/first.svg'); +@lastIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/last.svg'); +@forwardIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/forward.svg'); +@backwardIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/backward.svg'); +@shareIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/share.svg'); +@equalizerIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/equalizer.svg'); +@ejectIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/eject.svg'); +@shuffleIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/shuffle.svg'); +@randomIconDark: data-uri('image/svg+xml;charset=UTF-8', 'source/images/media/dark/dice.svg'); + +@checkIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/checkmark.svg'); +@crossIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/cross.svg'); +@searchIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/search.svg'); +@eyeIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/eye.svg'); +@plusIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/plus.svg'); +@minusIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/minus.svg'); +@helpIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/help.svg'); +@leftArrowIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/arrow-left.svg'); +@rightArrowIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/arrow-right.svg'); +@calendarIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/calendar.svg'); +@clockIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/clock.svg'); +@menuIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/menu.svg'); +@uploadIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/upload.svg'); +@pencilIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/pencil.svg'); +@chevronLeftIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/chevron-left.svg'); +@chevronRightIcon: data-uri('image/svg+xml;charset=UTF-8', 'source/images/apps/chevron-right.svg'); + diff --git a/src/tile/include/mixins.less b/src/tile/include/mixins.less new file mode 100644 index 0000000..24f59c5 --- /dev/null +++ b/src/tile/include/mixins.less @@ -0,0 +1,538 @@ +@import (once) "vars"; + +.show-element() { + //display: initial; + opacity: 1; + .scale(1); +} + +.hide-element() { + .scale(0); + opacity: 0; + //display: none; +} + +.debug() { + outline: 1px dotted red!important; + min-width: 1px; + min-height: 1px; +} + +.clear() { + &::after { + display: block; + clear: both; + content: ""; + } +} + +.set-relative() { + display: block; + position: relative; +} + +.set-absolute() { + position: absolute; +} + +.set-flex() { + display: flex; +} + +.reset-list() { + list-style: none inside; + margin: 0; + padding: 0; + position: relative; +} + +.px2rem(@attr: width; @size: 16) { + .get-values(length(@size)); + .get-values(@s, @i: 1) when (@i =< length(@size)) { + @current_value: extract(@size, @i); + + & when not(@current_value = 0) { + @{attr}+_: unit( @current_value / 16, rem ); + } + + & when (@current_value = 0) { + @{attr}+_: 0; + } + + .get-values(@s, @i + 1); + } +} + +.rem2px(@attr: width; @size: 16) { + .get-values(length(@size)); + .get-values(@s, @i: 1) when (@i =< length(@size)) { + @current_value: extract(@size, @i); + + & when not(@current_value = 0) { + @{attr}+_: unit( 16 * @current_value, px ); + } + + & when (@current_value = 0) { + @{attr}+_: 0; + } + + .get-values(@s, @i + 1); + } +} + +.pt2px(@attr: width; @size: 16) { + .get-values(length(@size)); + .get-values(@s, @i: 1) when (@i =< length(@size)) { + @current_value: extract(@size, @i); + + & when not(@current_value = 0) { + @{attr}+_: unit( round(@current_value * 1.333333) , px ); + } + + & when (@current_value = 0) { + @{attr}+_: 0; + } + + .get-values(@s, @i + 1); + } +} + +.px2pt(@attr: width; @size: 16) { + .get-values(length(@size)); + .get-values(@s, @i: 1) when (@i =< length(@size)) { + @current_value: extract(@size, @i); + + & when not(@current_value = 0) { + @{attr}+_: unit( round(.75 * @current_value), pt ); + } + + & when (@current_value = 0) { + @{attr}+_: 0; + } + + .get-values(@s, @i + 1); + } +} + +.pt2rem(@attr: width; @size: 16){ + .get-values(length(@size)); + .get-values(@s, @i: 1) when (@i =< length(@size)) { + @current_value: extract(@size, @i); + + & when not(@current_value = 0) { + @{attr}+_: unit( round(@current_value * 1.333333 / 16), rem ); + } + + & when (@current_value = 0) { + @{attr}+_: 0; + } + + .get-values(@s, @i + 1); + } +} + +.rem2pt(@attr: width; @size: 16){ + .get-values(length(@size)); + .get-values(@s, @i: 1) when (@i =< length(@size)) { + @current_value: extract(@size, @i); + + & when not(@current_value = 0) { + @{attr}+_: unit( round(.75 * 16 * @current_value), pt ); + } + + & when (@current_value = 0) { + @{attr}+_: 0; + } + + .get-values(@s, @i + 1); + } +} + +.square(@size: 0, @unit) { + width: unit(@size, @unit); + height: unit(@size, @unit); +} + +.circle(@size: 0, @unit) { + width: unit(@size, @unit); + height: unit(@size, @unit); + border-radius: 50%; +} + +.halo() { + &::after { + display: block; + content: ""; + position: absolute; + .circle(3.125, rem); + background-color: rgba(187, 187, 187, 0.5); + opacity: .3; + top: 50%; + left: 50%; + .px2rem(margin-top, -25px); + .px2rem(margin-left, -25px); + } +} + +.animate(@params){ + animation: @params; +} + +.transition-scheme(@t) { + transition: @t; +} + +.collapse() { + overflow: hidden; + max-height: 0; + transition: @transition-collapse; + position: relative; +} + +.expand() { + max-height: 1000px !important; + transition: @transition-collapse !important; + transition-duration: 1s !important; + overflow: visible!important; +} + +.perspective(@perspective) { + transform+_: perspective(@perspective); +} +.rotate(@degrees) { + transform+_: rotate(@degrees); +} +.rotateX(@degrees) { + transform+_: rotateX(@degrees); +} +.rotateY(@degrees) { + transform+_: rotateY(@degrees); +} +.rotateZ(@degrees) { + transform+_: rotateZ(@degrees); +} +.scale(@ratio) { + transform+_: scale(@ratio); +} +.scaleX(@ratio) { + transform+_: scaleX(@ratio); +} +.scaleY(@ratio) { + transform+_: scaleY(@ratio); +} +.translate(@x: 0, @y: 0) { + transform+_: translate(@x, @y); +} +.skew(@x: 0, @y: 0) { + transform+_: skew(@x, @y); +} +.skewX(@x: 0) { + transform+_: skewX(@x); +} +.skewY(@y: 0) { + transform+_: skewY(@y); +} +.translate3d(@x: 0, @y: 0, @z: 0) { + transform+_: translate3d(@x, @y, @z); +} + +.transformOrigin(@origin) { + transform-origin: @origin; +} + +.transition(@time: 1s, @func: ease, @target: all){ + transition: @target @time @func; +} + +.translateX(@x: 0) { + transform+_: translateX(@x); +} +.translateY(@y: 0) { + transform+_: translateY(@y); +} + +.shadow(@x, @y, @blur, @stretch, @color, @alpha: .4){ + box-shadow+: @x @y @blur @stretch rgba(red(@color), green(@color), blue(@color), @alpha); +} + +.default-shadow() { + //.shadow(2px, 2px, 5px, 0, @black); + box-shadow: 2px 2px 2px 0 rgba(red(@ribbonDropdownShadow), green(@ribbonDropdownShadow), blue(@ribbonDropdownShadow), .7), + -.5px 0 1px 0 rgba(red(@ribbonDropdownShadow), green(@ribbonDropdownShadow), blue(@ribbonDropdownShadow), .7); +} + +.win-shadow(){ + box-shadow+: 0 0 5px 0 rgba(0, 0, 0, 0.3); +} + +.shadow(@size) when (@size = 0) { + box-shadow: none; +} + +.shadow(@size) when (@size = 1) { + box-shadow+: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26); +} + +.shadow(@size) when (@size = 2) { + box-shadow+: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2); +} + +.shadow(@size) when (@size = 3) { + box-shadow+: 0 17px 50px 0 rgba(0, 0, 0, 0.19), 0 12px 15px 0 rgba(0, 0, 0, 0.24); +} + +.shadow(@size) when (@size = 4) { + box-shadow+: 0 25px 55px 0 rgba(0, 0, 0, 0.21), 0 16px 28px 0 rgba(0, 0, 0, 0.22); +} + +.shadow(@size) when (@size = 5) { + box-shadow+: 0 40px 77px 0 rgba(0, 0, 0, 0.22), 0 27px 24px 0 rgba(0, 0, 0, 0.2); +} + +.shadow-right() { + box-shadow+: 5px 0 7px -6px rgba(0,0,0,0.75); +} + +.shadow-left() { + box-shadow+: -5px 0 7px -6px rgba(0,0,0,0.75); +} + +.text-ellipsis() { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.focus-show(@color){ + box-shadow+: 0 0 0 3px rgba(red(@color), green(@color), blue(@color), 0.45); +} + +.neb(@size: 1rem, @shift: .625rem) { + &::before { + display: block; + position: absolute; + content: ""; + width: @size; + height: @size; + background-color: inherit; + border: 1px solid transparent; + border-right-color: inherit; + border-bottom-color: inherit; + } + + &.neb-s { + &::before { + top: 100%; + left: 50%; + .translateX(-50%); + .translateY(-50%); + .rotate(45deg); + } + } + + &.neb-sw { + &::before { + top: 100%; + left: @shift; + .translateY(-50%); + .rotate(45deg); + } + } + + &.neb-se { + &::before { + top: 100%; + right: @shift; + .translateY(-50%); + .rotate(45deg); + } + } + + &.neb-n { + &::before { + top: 0; + left: 50%; + .translateX(-50%); + .translateY(-50%); + .rotate(-135deg); + } + } + + &.neb-nw { + &::before { + top: 0; + left: @shift; + .translateY(-50%); + .rotate(-135deg); + } + } + + &.neb-ne { + &::before { + top: 0; + right: @shift; + .translateY(-50%); + .rotate(-135deg); + } + } + + &.neb-en { + &::before { + top: @shift; + right: 0; + .translateX(50%); + .rotate(-45deg); + } + } + + &.neb-e { + &::before { + top: 50%; + right: 0; + .translateX(50%); + .translateY(-50%); + .rotate(-45deg); + } + } + + &.neb-es { + &::before { + bottom: @shift; + right: 0; + .translateX(50%); + .rotate(-45deg); + } + } + + &.neb-wn { + &::before { + top: @shift; + left: 0; + .translateX(-50%); + .rotate(135deg); + } + } + + &.neb-w { + &::before { + top: 50%; + left: 0; + .translateX(-50%); + .translateY(-50%); + .rotate(135deg); + } + } + + &.neb-ws { + &::before { + bottom: @shift; + left: 0; + .translateX(-50%); + .rotate(135deg); + } + } +} + +.neb2(@size: 1rem; @shift: .625rem; @color: @white){ + &::before { + display: block; + content: ""; + width: 0; + height: 0; + border-style: solid; + position: absolute; + } + + &.neb-s { + &::before { + border-width: @size @size 0 @size; + border-color: @color transparent transparent transparent; + top: 100%; + left: 50%; + .translateX(-50%); + .translateY(-50%); + } + } + + &.neb-n { + &::before { + border-width: 0 @size @size @size; + border-color: transparent transparent @color transparent; + top: 0; + left: 50%; + .translateX(-50%); + .translateY(-50%); + } + } + + &.neb-e { + &::before { + border-width: @size 0 @size @size; + border-color: transparent transparent transparent @color; + top: 50%; + right: 0; + .translateX(50%); + .translateY(-50%); + } + } + + &.neb-w { + &::before { + border-width: @size @size @size 0; + border-color: transparent @color transparent transparent; + top: 50%; + left: 0; + .translateX(-50%); + .translateY(-50%); + } + } +} + +.toggle() { + position: relative; + cursor: pointer; + padding-right: 1.5rem!important; + user-select: none; + + &::before { + display: block; + position: absolute; + vertical-align: middle; + color: transparent; + font-size: 0; + content: ""; + .px2rem(height, 5px); + .px2rem(width, 5px); + background-color: @transparent ; + border-left: 1px solid; + border-bottom: 1px solid; + border-color: @dark; + top: 50%; + left: 100%; + margin-left: -1rem; + margin-top: -.1625rem; + z-index: 2; + transform: rotate(-45deg); + transition: @transition-short; + transform-origin: center center 1px; + } +} + +.hideElement(@el){ + @{el} { + width: 1px; + height: 1px; + position: absolute; + top: 0; + left: 0; + opacity: 0; + } +} + +.hideScrollBars() { + &::-webkit-scrollbar { + display: none!important; + } + -ms-overflow-style: -ms-autohiding-scrollbar; + overflow: -moz-scrollbars-none; +} \ No newline at end of file diff --git a/src/tile/include/vars.less b/src/tile/include/vars.less new file mode 100644 index 0000000..284eb58 --- /dev/null +++ b/src/tile/include/vars.less @@ -0,0 +1,314 @@ +@unitSize: 4px; + +// Fonts +@fontName: -apple-system, system-ui, BlinkMacSystemFont, + "Segoe UI", "Roboto", "Ubuntu", + "Helvetica Neue", sans-serif; + +@fontSize: @unitSize * 4; + + +// Colors +@lightenValue: 15%; +@darkenValue: 15%; + +@transparent: transparent; + +@brandColor1: #2ac4f4; +@brandColor2: #004d6f; + +@black: #000000; +@white: #ffffff; +@dark: #1d1d1d; +@light: #f8f8f8; +@gray: #bebebe; +@grayBlue: #607d8b; +@grayWhite: #f5f5f5; +@grayMouse: #455a64; + +@lime: #a4c400; +@green: #60a917; +@emerald: #008a00; +@blue: #00AFF0; +@teal: #00aba9; +@cyan: #1ba1e2; +@cobalt: #0050ef; +@indigo: #6a00ff; +@violet: #aa00ff; +@pink: #dc4fad; +@magenta: #d80073; +@crimson: #a20025; +@red: #CE352C; +@orange: #fa6800; +@amber: #f0a30a; +@yellow: #fff000; +@brown: #825a2c; +@olive: #6d8764; +@steel: #647687; +@mauve: #76608a; +@taupe: #87794e; + +@lightLime: lighten(@lime, @lightenValue); +@lightGreen: lighten(@green, @lightenValue); +@lightEmerald: lighten(@emerald, @lightenValue); +@lightBlue: lighten(@blue, @lightenValue); +@lightTeal: lighten(@teal, @lightenValue); +@lightCyan: lighten(@cyan, @lightenValue); +@lightCobalt: lighten(@cobalt, @lightenValue); +@lightIndigo: lighten(@indigo, @lightenValue); +@lightViolet: lighten(@violet, @lightenValue); +@lightPink: lighten(@pink, @lightenValue); +@lightMagenta: lighten(@magenta, @lightenValue); +@lightCrimson: lighten(@crimson, @lightenValue); +@lightRed: lighten(@red, @lightenValue); +@lightOrange: lighten(@orange, @lightenValue); +@lightAmber: lighten(@amber, @lightenValue); +@lightYellow: lighten(@yellow, @lightenValue); +@lightBrown: lighten(@brown, @lightenValue); +@lightOlive: lighten(@olive, @lightenValue); +@lightSteel: lighten(@steel, @lightenValue); +@lightMauve: lighten(@mauve, @lightenValue); +@lightTaupe: lighten(@taupe, @lightenValue); +@lightGray: lighten(@gray, @lightenValue); +@lightGrayBlue: lighten(@grayBlue, @lightenValue); + + +@darkLime: darken(@lime, @darkenValue); +@darkGreen: darken(@green, @darkenValue); +@darkEmerald: darken(@emerald, @darkenValue); +@darkBlue: darken(@blue, @darkenValue); +@darkTeal: darken(@teal, @darkenValue); +@darkCyan: darken(@cyan, @darkenValue); +@darkCobalt: darken(@cobalt, @darkenValue); +@darkIndigo: darken(@indigo, @darkenValue); +@darkViolet: darken(@violet, @darkenValue); +@darkPink: darken(@pink, @darkenValue); +@darkMagenta: darken(@magenta, @darkenValue); +@darkCrimson: darken(@crimson, @darkenValue); +@darkRed: darken(@red, @darkenValue); +@darkOrange: darken(@orange, @darkenValue); +@darkAmber: darken(@amber, @darkenValue); +@darkYellow: darken(@yellow, @darkenValue); +@darkBrown: darken(@brown, @darkenValue); +@darkOlive: darken(@olive, @darkenValue); +@darkSteel: darken(@steel, @darkenValue); +@darkMauve: darken(@mauve, @darkenValue); +@darkTaupe: darken(@taupe, @darkenValue); +@darkGray: darken(@gray, @darkenValue); +@darkGrayBlue: darken(@grayBlue, @darkenValue); + +@colorList: black, white, dark, light, grayBlue, grayWhite, grayMouse, brandColor1, brandColor2, + lime, green, emerald, blue, teal, cyan, cobalt, indigo, violet, pink, magenta, crimson, red, orange, amber, yellow, brown, olive, steel, mauve, taupe, gray, + lightLime, lightGreen, lightEmerald, lightBlue, lightTeal, lightCyan, lightCobalt, lightIndigo, lightViolet, lightPink, lightMagenta, lightCrimson, lightRed, lightOrange, lightAmber, lightYellow, lightBrown, lightOlive, lightSteel, lightMauve, lightTaupe, lightGray, lightGrayBlue, + darkLime, darkGreen, darkEmerald, darkBlue, darkTeal, darkCyan, darkCobalt, darkIndigo, darkViolet, darkPink, darkMagenta, darkCrimson, darkRed, darkOrange, darkAmber, darkYellow, darkBrown, darkOlive, darkSteel, darkMauve, darkTaupe, darkGray, darkGrayBlue; + +@colorListLength: length(@colorList); + +// Body +@bodyColor: lighten(@black, 13%); + +// Hover +@hoverBackground: rgba(red(@dark), green(@dark), blue(@dark), .1); +@hoverBackground2: rgba(red(@dark), green(@dark), blue(@dark), .5); +@hoverBackgroundLight3: rgba(red(@white), green(@white), blue(@white), .3); +@hoverBackgroundLight2: rgba(red(@white), green(@white), blue(@white), .2); +@hoverBackgroundLight1: rgba(red(@white), green(@white), blue(@white), .1); +@hoverBackgroundLight: rgba(red(@white), green(@white), blue(@white), .01); + +// Appbar +@appBarBackground: @brandColor2; +@appBarBackgroundActive: lighten(@brandColor2, 10%); +@appBarColor: @white; + +// Taskbar +@taskBarBackground: #053046; +@taskBarItemHover: rgba(red(@white), green(@white), blue(@white), .1); +@taskBarItemActive: rgba(red(@white), green(@white), blue(@white), .3); + +// Form and Inputs +@inputBorder: #d9d9d9; +@checkBackground: darken(@inputBorder, 10%); + +// Disabled +@disabledBackground: #e9e9e9; +@disabledBorder: #e9e9e9; +@disabledColor: lighten(@dark, 50%); + +// Borders +@borderRadius: .25rem; +@borderColor: darken(@light, 10%); + +// Links +@linkColor: #0366d6; +@linkColorHover: #0056b3; + + +// Accent colors +@primaryColor: #0366d6; +@secondaryColor: @grayBlue; +@successColor: @green; +@alertColor: @red; +@warningColor: @lightOrange; +@yellowColor: #ffe484; +@infoColor: @lightCyan; +@darkColor: lighten(@dark, 20%); +@lightColor: @light; +@brand1Color: @brandColor1; +@brand2Color: @brandColor2; + +@accentColors: primary, secondary, success, alert, warning, yellow, info, dark, light; +@buttonPredefinedTypes: primary, secondary, success, alert, warning, yellow, info, dark, light, brand1, brand2; +@buttonPredefinedTypesLength: length(@buttonPredefinedTypes); + +// Z-index +@zindex-selectedCheck: 100; +@zindex-absolute: 500; +@zindex-dropdown: 1000; +@zindex-sticky: 1020; +@zindex-fixed: 1030; +@zindex-modal-backdrop: 1040; +@zindex-modal: 1050; +@zindex-popover: 1060; +@zindex-tooltip: 1070; +@zindex-top: 1080; +@zindex-notify: 1085; +@zindex-charms: 1090; +@zindex-overlay: 2000; +@zindex-fullscreen: 2147483647; + + +// Percents breakpoints +@percentBreakpointsList: 25, 50, 75, 100; +@percentBreakpointsLength: length(@percentBreakpointsList); + +// Tiles +@tileBaseSize: 25%; +@tileApp: 44px 44px; +@tileSmall: 70px 70px; +@tileMedium: 150px 150px; +@tileWide: 310px 150px; +@tileLarge: 310px 310px; +@tileMargin: 5px; +@tileCellSize: extract(@tileMedium, 1); +@tileOutlineColor: rgba(red(@dark), green(@dark), blue(@dark), .1); +@tileTransformPerspective: 500px; +@tileTransformRotate: 0.138372rad; +@tileSize: extract(@tileMedium, 1); + + +// Media breakpoints +@fs: 0; +@xs: 360px; +@sm: 576px; +@ld: 640px; +@md: 768px; +@lg: 992px; +@xl: 1200px; +@xxl: 1452px; + +@mediaBreakpointListMobile: fs, sm, md, lg, xl, xxl; +@mediaBreakpointListMobile2: sm, md, lg, xl, xxl; +@mediaBreakpointListMobile3: xs, sm, ld, md, lg, xl, xxl; +@mediaBreakpointListDesktop: xxl, xl, lg, md, sm, fs; +@mediaBreakpointListDesktop2: xxl, xl, lg, md, sm; +@mediaBreakpointListDesktop3: xxl, xl, lg, md, ld, sm, xs; + +@mediaBreakpointListMobileLength: length(@mediaBreakpointListMobile); +@mediaBreakpointListMobile2Length: length(@mediaBreakpointListMobile2); +@mediaBreakpointListMobile3Length: length(@mediaBreakpointListMobile3); +@mediaBreakpointListDesktopLength: length(@mediaBreakpointListDesktop); +@mediaBreakpointListDesktop2Length: length(@mediaBreakpointListDesktop2); +@mediaBreakpointListDesktop3Length: length(@mediaBreakpointListDesktop3); + +@percents: 25, 33, 50, 75, 100; +@percentsLength: length(@percents); + +// Transition +@transition-speed: .3s; +@transition-short: all .15s ease-in-out; +@transition-base: all .3s ease-in-out; +@transition-long: all 1s ease-in-out; +@transition-margin: margin .3s ease-in-out; +@transition-fade: opacity .15s linear; +@transition-color: color .3s linear; +@transition-collapse: max-height .3s ease; +@transition-width: width .3s ease; +@transition-left: left .3s ease; +@transition-right: right .3s ease; +@transition-top: top .3s ease; +@transition-bottom: bottom .3s ease; +@transition-transform: transform .3s ease; + +// Grid +@gridColumns12: 12; +@gridGapSize: 12px; +@gridCellBaseSize: 8.333335%; + +// Windows +@winBorderSize: .5rem; +@winBorderColor: #6badf6; +@winBorderColorInactive: #ebebeb; +@winDialogContentBackground: #ededed; +@winFlatBackgroundColor: #ffffff; +@winFlatBorderColor: #e9e9e9; +@winFlatSystemButtonHoverBackground: #cde6f7; +@winFlatSystemButtonActiveBackground: #92c0e0; +@winFlatSystemButtonActiveColor: #2a8dd4; +@winFlatSystemButtonRestColor: #777777; +@winCloseButtonColor: #c75050; +@winCloseButtonActiveColor: #e04343; +@winCloseButtonInActiveColor: #bcbcbc; +@winCaptionBackground: #3c6478; +@winCaptionColor: @white; + +@streamerItemWidth: 224px; +@streamerTimelineImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAAATCAYAAACJKwFWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2OWY4NzBhNi0zODU3LWFmNDEtYWMzZS03YzlkOTcxZjMxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEREMzg4NkJBQjkyMTFFN0JDQTVFMzg4RUE0RDc4RkQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEREMzg4NkFBQjkyMTFFN0JDQTVFMzg4RUE0RDc4RkQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6YzEyZGQ1NjktNmM3YS0yZTQ2LTg2MmQtZWY3OGU5MmQ4NWY2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY5Zjg3MGE2LTM4NTctYWY0MS1hYzNlLTdjOWQ5NzFmMzE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv3rUTMAAAIHSURBVHja7Jq/S0JRHMWfpj37oSA8qikIImioIaghaHDrD2hqaG4R6i8paGksh2iIQGhoCYewocChhkDEoAjsx5IGDZV2Ll6huXvoKZwPHHwuh3O/737f03tvpNVqeUKIcIiYBiwUCoe4LhH8FqAadO/oE0BT0AUh0xxUhyqOPklohpRpFvqEbh194tA8dGX9XJi2fteE8S1CN1DD0WcSSpHmpslUhl4dfcahMeiSMTdj9qKYyWR2/uKA5v39dd1OUNebOAKtQtuEQa5Bd9C5o4+pVRbaImRagd6hU4LXJinTMjQMHZEymfn05eizBE1AOUKmDegAeiY8PE0z7xIyZaP2op/0Rk1AaYKPeQP6pEyD9inqyigx05B9ozLG5ttPV5I2FwPf1suVFGlsnUwBwSdt5zmD/qh+hQsRHmpAIdSAQqgBhRBqQCHUgEKIfyBG9jP7SD4pV5KYibFs3EfMZJbWu+0I0oDH24ZI2nq5krD3j5UpTvDxiZnoDWg2Ot8IPmbjfI+UqQo9EXw+vPZJCgYn0HeXNeCjx9vfKtt6uVIjPqhMpjrBx5ykqXRrA1ZJPg3P/RhTh2OSzwu0T/J66MJfQ2dEL1adisRMOZJPyeMcjdN/QCHCRg0ohBpQCDWgECKkBgxUip4k4rVXLiMqRU8SdBowr1r0JE2vvbTeVCl6kvyPAAMASGlSBhr76A8AAAAASUVORK5CYII="; + +@activityRingTime: 4000ms; +@activityRingSize: 32px; +@activityColor: @white; +@activityColorDark: @darkGray; +@activityRingRotate: -14deg; +@activityRingTimeMute: 30; + +@hintBackground: rgba(255, 252, 192, 1); +@hintColor: @dark; + +@mpStep: 4; +@mpUnit: px; + +@playerInactiveColor: #555555; +@playerActiveColor: @green; +@playerHoverColor: @white; +@playerControlsBackground: rgba(34, 34, 34, 0.5); + +@ribbonMenuStaticBackground: #1979ca; +@ribbonMenuBackground: #ffffff; +@ribbonMenuActiveBackground: #f5f6f7; +@ribbonMenuBorder: #dadbdc; +@ribbonMenuItemBorder: #a4cef9; +@ribbonMenuItemActiveBorder: #1979ca; +@ribbonMenuItemHoverBackground: rgba(red(#a4cef9), green(#a4cef9), blue(#a4cef9), .2); +@ribbonMenuItemActiveBackground: rgba(red(#a4cef9), green(#a4cef9), blue(#a4cef9), .8); +@ribbonDropdownBackground: #fbfcfd; +@ribbonDropdownDivider: #dcddde; +@ribbonDropdownShadow: #e3e4e5; + +@inputHeight: 36px; + +@input-lx: 50px; +@input-sx: 28px; + +@badgeFontSize: 12px; + +@johnDoe: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAUABQAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A+t+KKPxo/GgA70Yo/Gj8aADFH4VesdC1HUl3WtjcXCf344yV/PGKW+0HUtNXddWNzbp/fkjIX88YoAofhR+FH40fjQAfhR+FH40fjQAUUUUAFepeAPh5D9li1LVYhK8g3Q27j5VXszDuT6f5HA+FtOXVvEWn2rjMcko3j1UckfkDX0MBgYHAoARVCKFUBVHAA6ClZQwKkZBGCDS0UAec+Pvh3BJay6lpUQimjBeW3QYVx3Kjsfbv/PyqvpuvnvxfpqaT4l1C1QbY0lJUDsrfMB+RoAyKKKKACiiigDa8GXq6f4p02eQgIJQpJ7Bvlz+tfQP4V8yDg17P4A8cw65ZxWV5IE1KMbfmP+uA7j39R+NAHaUfhSUUAL+FeA+OL1NQ8WalNGQU83YCO+0Bf6V6b498cQ6BZyWlrIJNSkXaApz5QP8AEff0FeKk5OTyTQAUUUUAH40fjRU1naTX93DbQIXmlYIijuTQBc0Dw/eeI74W1mm49XkbhUHqTXsHhz4eaXoCpI8YvbscmaYZAP8Asr0H8/etHwv4cg8M6XHaxANIfmllxy7dz9PStigA/Gk/GlooA5bxJ8PdL19XkWMWd43PnwjGT/tL0P8AP3rx/X/D954cvjbXibT1SReVceoNfRFZHijw5B4m0uS1lAWQfNFLjlG7H6etAHz5+NH41NeWk1hdzW06FJonKMp7EGoaACvQfhBowudTudRkXK2y7I8j+Nup/Afzrz6vafhRaCDwmkgHM8zufwO3/wBloA7Kiij8KACkpaSgBaSj8KKAPJvi/owttTttRjXC3K7JMf3l6H8R/KvPq9p+K1qJ/CbyEcwTI4P1O3/2avFqAP/Z"; + +// animation +@defaultPerspective: 600px; +@defaultAnimationSpeed: .3s; + +// additional; colors +@ribbedSize: 20px; +@ribbedAlpha: .15; +@ribbedAngle: -45deg; +@alpha: .1; diff --git a/src/tile/tile.less b/src/tile/tile.less new file mode 100644 index 0000000..0c9b280 --- /dev/null +++ b/src/tile/tile.less @@ -0,0 +1,482 @@ +/* Please use node.js "less" module to complie this less */ +/* 请使用node.js的“less”模块来编译本less */ +@import (once) "./include/vars"; +@import (once) "./include/mixins"; + +.tile-small, +.tile-medium, +.tile-wide, +.tile-large, +.tile-app { + display: block; + background-color: @cyan; + color: @white; + width: extract(@tileMedium, 1); + height: extract(@tileMedium, 2); + box-shadow: inset 0 0 1px #FFFFCC; + cursor: pointer; + position: relative; + overflow: hidden; + user-select: none; + max-width: none!important; +} + +.tile { + &-small { + width: extract(@tileSmall, 1); + height: extract(@tileSmall, 2); + } + &-medium { + width: extract(@tileMedium, 1); + height: extract(@tileMedium, 2); + } + &-wide { + width: extract(@tileWide, 1); + height: extract(@tileWide, 2); + } + &-large { + width: extract(@tileLarge, 1); + height: extract(@tileLarge, 2); + } + &-app { + width: extract(@tileApp, 1); + height: extract(@tileApp, 2); + } +} + +.tile-small, +.tile-medium, +.tile-wide, +.tile-large, +.tile-app { + .icon { + max-width: 33%; + height: 33%; + position: absolute; + top: 50%; + left: 50%; + .translateY(-50%); + .translateX(-50%); + /*font-size: 50px;*/ + /*line-height: 50px;*/ + z-index: 2; + } + + .branding-bar { + height: 32px; + line-height: 32px; + position: absolute; + left: 0; + bottom: 0; + right: 0; + padding: 0 10px 5px; + font-size: .875rem; + font-weight: 500; + .text-ellipsis(); + z-index: 2; + } + + .badge-top, .badge-bottom { + position: absolute; + display: block; + padding: 4px 8px; + font-size: 12px; + text-align: center; + background-color: @hoverBackground; + z-index: 2; + } + + .badge-bottom { + right: 10px; + bottom: 0; + } + + .badge-top { + top: 10px; + right: 10px; + } + + &:hover { + outline: @tileOutlineColor solid 4px; + } +} + +.tile { + &-small { + .icon { + max-width: 50%; + font-size: 35px; + line-height: 35px; + } + + /*.branding-bar { + display: none; + }*/ + } + &-large { + .icon { + font-size: 102px; + line-height: 102px; + } + } + &-app { + .icon { + max-width: 75%; + height: 75%; + } + } +} + +.tile-small, +.tile-medium, +.tile-wide, +.tile-large, +.tile-app { + &.transform-right { + .transformOrigin(left 50%); + .perspective(@tileTransformPerspective)!important; + .rotateY(@tileTransformRotate)!important; + + &.tile-small { + .perspective(@tileTransformPerspective)!important; + .rotateY(@tileTransformRotate * 2)!important; + } + + &.tile-wide { + .perspective(@tileTransformPerspective)!important; + .rotateY(@tileTransformRotate / 2)!important; + } + + &.tile-large { + .perspective(@tileTransformPerspective)!important; + .rotateY(@tileTransformRotate / 3)!important; + } + } + + &.transform-left { + .transformOrigin(right 50%); + .perspective(@tileTransformPerspective)!important; + .rotateY(-@tileTransformRotate)!important; + + &.tile-small { + .perspective(@tileTransformPerspective)!important; + .rotateY(-@tileTransformRotate * 2)!important; + } + + &.tile-wide { + .perspective(@tileTransformPerspective)!important; + .rotateY(-@tileTransformRotate / 2)!important; + } + + &.tile-large { + .perspective(@tileTransformPerspective)!important; + .rotateY(-@tileTransformRotate / 3)!important; + } + } + + &.transform-top { + .transformOrigin(50% bottom); + .perspective(@tileTransformPerspective)!important; + .rotateX(@tileTransformRotate)!important; + + &.tile-small { + .perspective(@tileTransformPerspective)!important; + .rotateX(@tileTransformRotate * 2)!important; + } + + &.tile-wide { + .perspective(@tileTransformPerspective)!important; + .rotateX(@tileTransformRotate / 2)!important; + } + + &.tile-large { + .perspective(@tileTransformPerspective)!important; + .rotateX(@tileTransformRotate / 3)!important; + } + } + + &.transform-bottom { + .transformOrigin(50% top); + .perspective(@tileTransformPerspective)!important; + .rotateX(-@tileTransformRotate)!important; + + &.tile-small { + .perspective(@tileTransformPerspective)!important; + .rotateX(-@tileTransformRotate * 2)!important; + } + + &.tile-wide { + .perspective(@tileTransformPerspective)!important; + .rotateX(-@tileTransformRotate / 2)!important; + } + + &.tile-large { + .perspective(@tileTransformPerspective)!important; + .rotateX(-@tileTransformRotate / 3)!important; + } + } +} + + +.tiles-grid { + position: relative; + display: grid; + grid-template-columns: repeat(auto-fit, (@tileBaseSize - 1%)); + /*grid-template-rows: repeat(auto-fit, (@tileBaseSize - 1%));*/ + grid-gap: 5px; + + .tile-small { + height: 100%; + width: 100%; + grid-column: span 1; + grid-row: span 1; + } + + .tile-medium { + height: 100%; + width: 100%; + grid-column: span 2; + grid-row: span 2; + } + + .tile-wide { + height: 100%; + width: 100%; + grid-column: span 4; + grid-row: span 2; + } + + .tile-large { + height: 100%; + width: 100%; + grid-column: span 4; + grid-row: span 4; + } + + /*.tile-small::before, + .tile-medium::before, + .tile-large::before { + content: ''; + padding-bottom: 100%; + display: block; + } + + .tile-wide::before { + content: ''; + padding-bottom: 50%; + display: block; + }*/ +} + +.tiles-grid { + .create-tiles-cells(@i: 1, @k: 1) when (@k <= @i) { + + .tile-small.col-@{k} { + grid-column: @k / span 1; + } + + .tile-medium.col-@{k} { + grid-column: @k / span 2; + } + + .tile-wide.col-@{k} { + grid-column: @k / span 4; + } + + .tile-large.col-@{k} { + grid-column: @k / span 4; + } + + .tile-small.row-@{k} { + grid-row: @k / span 1; + } + + .tile-medium.row-@{k} { + grid-row: @k / span 2; + } + + .tile-wide.row-@{k} { + grid-row: @k / span 4; + } + + .tile-large.row-@{k} { + grid-row: @k / span 4; + } + + .create-tiles-cells(@i; @k + 1); + } + .create-tiles-cells(12); +} + +.tiles-grid { + &.size-half { + width: 50%; + } + + .create-tiles-grid-size(@i: 1, @k: 1) when (@k <= @i) { + &.size-@{k} { + width: (100% * @k / 12); + } + + .create-tiles-grid-size(@i; @k + 1); + } + .create-tiles-grid-size(12); +} + +.tiles-grid { + each(@mediaBreakpointListMobile, .(@m) { + @media screen and (min-width: @@m) { + each(range(12), .(@k) { + .col-@{m}-@{k} { + grid-column: @k; + } + .row-@{m}-@{k} { + grid-row: @k; + } + }) + each(range(12), .(@k) { + &.size-@{m}-@{k} { + width: (100% * @k / 12); + } + }) + } + }) +} + +.tiles-group { + width: 100%; + float: left; + overflow: visible; + + &::before { + content: attr(data-group-title); + display: block; + position: absolute; + left: 0; + top: -36px; + height: 1.5em; + line-height: 1.5em; + z-index: 1; + color: inherit; + } +} + +// Tiles effects +[class*=tile-] { + &.image-set { + .img { + width: 25%; + height: 50%; + display: block; + float: left; + border: 1px solid @dark; + background-size: cover; + + &:nth-child(1) { + width: 50%; + height: 100%; + } + } + + background-size: contain; + background-position: center; + } + + .slide { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + display: block; + } + + [class*=slide-] { + width: 100%; + height: 100%; + position: absolute; + transition: @transition-base; + } + + .slide-front { + top: 0; + left: 0; + } + + &.effect-hover-slide-up, &.effect-hover-zoom-up { + + .slide-back { + top: 100%; + left: 0; + } + + &:hover { + .slide-front { + .translateY(-100%); + } + .slide-back { + top: 0; + } + } + } + + &.effect-hover-slide-down, &.effect-hover-zoom-down { + .slide-back { + top: 0; + left: 0; + .translateY(-100%); + } + + &:hover { + .slide-front { + top: 100%; + } + .slide-back { + .translateY(0); + } + } + } + + &.effect-hover-slide-left, &.effect-hover-zoom-left { + .slide-back { + top: 0; + left: 100%; + } + + &:hover { + .slide-front { + .translateX(-100%); + } + .slide-back { + left: 0; + } + } + } + + &.effect-hover-slide-right, &.effect-hover-zoom-right { + .slide-back { + top: 0; + left: 0; + .translateX(-100%); + } + + &:hover { + .slide-front { + left: 100%; + } + .slide-back { + .translateX(0); + } + } + } + + &.effect-hover-zoom-up, &.effect-hover-zoom-down, &.effect-hover-zoom-left, &.effect-hover-zoom-right { + &:hover { + .slide-front { + left: 0; + top: 0; + .scale(2); + } + } + } +} diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..b716a7c --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,97 @@ +const path = require('path'); +const webpack = require('webpack'); + +/* + * SplitChunksPlugin is enabled by default and replaced + * deprecated CommonsChunkPlugin. It automatically identifies modules which + * should be splitted of chunk by heuristics using module duplication count and + * module category (i. e. node_modules). And splits the chunks… + * + * It is safe to remove "splitChunks" from the generated configuration + * and was added as an educational example. + * + * https://webpack.js.org/plugins/split-chunks-plugin/ + * + */ + +const HtmlWebpackPlugin = require('html-webpack-plugin'); + +/* + * We've enabled HtmlWebpackPlugin for you! This generates a html + * page for you when you compile webpack, which will make you start + * developing and prototyping faster. + * + * https://github.com/jantimon/html-webpack-plugin + * + */ + +module.exports = { + mode: 'production', + entry: { + 'createPage': './src/createPage/ext.isekai.createPage.js', + 'discover': './src/discover/ext.isekai.discover.js', + }, + + output: { + filename: '[name]/ext.isekai.[name].js', + path: path.resolve(__dirname, 'modules') + }, + + plugins: [new webpack.ProgressPlugin(), new HtmlWebpackPlugin()], + + module: { + rules: [ + { + test: /.(js|jsx)$/, + include: [path.resolve(__dirname, 'src')], + loader: 'babel-loader', + + options: { + plugins: ['syntax-dynamic-import'], + + presets: [ + [ + '@babel/preset-env', + { + modules: false + } + ] + ] + } + }, + { + test: /.(scss)$/, + use: [{ + loader: 'css-loader', + }, + { + loader: 'sass-loader', + }], + }, + { + test: /.(less)$/, + loader: 'less-loader', + } + ] + }, + + optimization: { + splitChunks: { + cacheGroups: { + vendors: { + priority: -10, + test: /[\\/]node_modules[\\/]/ + } + }, + + chunks: 'async', + minChunks: 1, + minSize: 30000, + name: true + } + }, + + devServer: { + open: true + } +};