增加Feed列表
parent
706e051d2e
commit
5b707ec169
@ -0,0 +1,7 @@
|
||||
<?php
|
||||
$magicWords = [
|
||||
'en' => [
|
||||
'htmldetails' => [0, 'htmldetails'],
|
||||
'htmlsummary' => [0, 'htmlsummary'],
|
||||
],
|
||||
];
|
||||
Binary file not shown.
@ -1,10 +1,10 @@
|
||||
## 预览卡片设计
|
||||
```html
|
||||
<previewCard>
|
||||
[[链接1]]
|
||||
[[链接2]]
|
||||
</previewCard>
|
||||
<previewCard>
|
||||
<categorytree mode="pages" depth="1" hideroot="on" showcount="on" />
|
||||
</previewCard>
|
||||
```
|
||||
## 预览卡片设计
|
||||
```html
|
||||
<previewCard>
|
||||
[[链接1]]
|
||||
[[链接2]]
|
||||
</previewCard>
|
||||
<previewCard>
|
||||
<categorytree mode="pages" depth="1" hideroot="on" showcount="on" />
|
||||
</previewCard>
|
||||
```
|
||||
|
||||
@ -1,107 +1,155 @@
|
||||
{
|
||||
"name": "Isekai Discover Box",
|
||||
"namemsg": "isekai-widgets",
|
||||
"author": "Hyperzlib",
|
||||
"version": "1.0.2",
|
||||
"url": "https://github.com/Isekai-Project/mediawiki-extension-IsekaiWidgets",
|
||||
"descriptionmsg": "isekai-widgets-desc",
|
||||
"license-name": "GPL-2.0-or-later",
|
||||
"type": "parserhook",
|
||||
"MessagesDirs": {
|
||||
"IsekaiWidgets": [
|
||||
"i18n"
|
||||
]
|
||||
},
|
||||
"AutoloadNamespaces": {
|
||||
"Isekai\\Widgets\\": "includes"
|
||||
},
|
||||
"Hooks": {
|
||||
"ParserFirstCallInit": "Isekai\\Widgets\\Widgets::onParserSetup"
|
||||
},
|
||||
"ResourceModules": {
|
||||
"ext.isekai.widgets.global": {
|
||||
"styles": [
|
||||
"ext.isekai.alert.less"
|
||||
]
|
||||
},
|
||||
"ext.isekai.createPage": {
|
||||
"scripts": [
|
||||
"createPage/ext.isekai.createPage.js",
|
||||
"createPage/ext.isekai.createPage.base.js"
|
||||
],
|
||||
"styles": [
|
||||
"createPage/ext.isekai.createPage.base.less"
|
||||
],
|
||||
"dependencies": [
|
||||
"oojs-ui-core"
|
||||
],
|
||||
"targets": [
|
||||
"desktop",
|
||||
"mobile"
|
||||
],
|
||||
"messages": [
|
||||
"isekai-createpage-page-title",
|
||||
"isekai-createpage-create-page-button",
|
||||
"isekai-createpage-page-exists",
|
||||
"isekai-createpage-title-empty",
|
||||
"isekai-createpage-redirecting"
|
||||
]
|
||||
},
|
||||
"ext.isekai.discover": {
|
||||
"scripts": [
|
||||
"discover/ext.isekai.discover.js",
|
||||
"discover/ext.isekai.discover.base.js"
|
||||
],
|
||||
"styles": [
|
||||
"discover/ext.isekai.discover.base.less"
|
||||
],
|
||||
"dependencies": [
|
||||
"oojs",
|
||||
"oojs-ui-core",
|
||||
"oojs-ui.styles.icons-interactions"
|
||||
],
|
||||
"targets": [
|
||||
"desktop",
|
||||
"mobile"
|
||||
],
|
||||
"messages": [
|
||||
"isekai-discover-change-btn",
|
||||
"isekai-discover-readmore-btn",
|
||||
"isekai-discover-error-cannotload"
|
||||
]
|
||||
},
|
||||
"ext.isekai.previewCard": {
|
||||
"scripts": [
|
||||
"previewCard/ext.isekai.previewCard.js"
|
||||
],
|
||||
"styles": [
|
||||
"previewCard/ext.isekai.previewCard.less"
|
||||
],
|
||||
"targets": [
|
||||
"desktop",
|
||||
"mobile"
|
||||
],
|
||||
"messages": [
|
||||
|
||||
]
|
||||
},
|
||||
"ext.isekai.tile": {
|
||||
"scripts": [
|
||||
"tile/tile.js"
|
||||
],
|
||||
"styles": [
|
||||
"tile/tile.css",
|
||||
"tile/style.less"
|
||||
],
|
||||
"targets": [
|
||||
"desktop",
|
||||
"mobile"
|
||||
]
|
||||
}
|
||||
},
|
||||
"ResourceFileModulePaths": {
|
||||
"localBasePath": "modules",
|
||||
"remoteExtPath": "IsekaiWidgets/modules"
|
||||
},
|
||||
"manifest_version": 1
|
||||
{
|
||||
"name": "Isekai Discover Box",
|
||||
"namemsg": "isekai-widgets",
|
||||
"author": "Hyperzlib",
|
||||
"version": "1.0.2",
|
||||
"url": "https://github.com/Isekai-Project/mediawiki-extension-IsekaiWidgets",
|
||||
"descriptionmsg": "isekai-widgets-desc",
|
||||
"license-name": "GPL-2.0-or-later",
|
||||
"type": "parserhook",
|
||||
"requires": {
|
||||
"MediaWiki": ">= 1.34.0"
|
||||
},
|
||||
"MessagesDirs": {
|
||||
"IsekaiWidgets": [
|
||||
"i18n"
|
||||
]
|
||||
},
|
||||
"ExtensionMessagesFiles": {
|
||||
"IsekaiWidgetsMagic": "IsekaiWidgets.i18n.php"
|
||||
},
|
||||
"AutoloadNamespaces": {
|
||||
"Isekai\\Widgets\\": "includes"
|
||||
},
|
||||
"Hooks": {
|
||||
"ParserFirstCallInit": "Isekai\\Widgets\\Widgets::onParserSetup",
|
||||
"BeforePageDisplay": "Isekai\\Widgets\\Widgets::onLoad"
|
||||
},
|
||||
"ResourceModules": {
|
||||
"ext.isekai.widgets.global": {
|
||||
"styles": [
|
||||
"ext.isekai.widgets.global.less"
|
||||
]
|
||||
},
|
||||
"ext.isekai.createPage": {
|
||||
"scripts": [
|
||||
"createPage/ext.isekai.createPage.js",
|
||||
"createPage/ext.isekai.createPage.base.js"
|
||||
],
|
||||
"styles": [
|
||||
"createPage/ext.isekai.createPage.base.less"
|
||||
],
|
||||
"dependencies": [
|
||||
"oojs-ui-core"
|
||||
],
|
||||
"targets": [
|
||||
"desktop",
|
||||
"mobile"
|
||||
],
|
||||
"messages": [
|
||||
"isekai-createpage-page-title",
|
||||
"isekai-createpage-create-page-button",
|
||||
"isekai-createpage-page-exists",
|
||||
"isekai-createpage-title-empty",
|
||||
"isekai-createpage-redirecting"
|
||||
]
|
||||
},
|
||||
"ext.isekai.discover": {
|
||||
"scripts": [
|
||||
"discover/ext.isekai.discover.js",
|
||||
"discover/ext.isekai.discover.base.js"
|
||||
],
|
||||
"styles": [
|
||||
"discover/ext.isekai.discover.base.less"
|
||||
],
|
||||
"dependencies": [
|
||||
"oojs",
|
||||
"oojs-ui-core",
|
||||
"oojs-ui.styles.icons-interactions"
|
||||
],
|
||||
"targets": [
|
||||
"desktop",
|
||||
"mobile"
|
||||
],
|
||||
"messages": [
|
||||
"isekai-discover-change-btn",
|
||||
"isekai-discover-readmore-btn",
|
||||
"isekai-discover-error-cannotload"
|
||||
]
|
||||
},
|
||||
"ext.isekai.feedList": {
|
||||
"es6": true,
|
||||
"scripts": [
|
||||
"feedList/ext.isekai.feedList.js"
|
||||
],
|
||||
"styles": [
|
||||
"feedList/ext.isekai.feedList.less"
|
||||
],
|
||||
"dependencies": [
|
||||
"vue"
|
||||
],
|
||||
"targets": [
|
||||
"desktop",
|
||||
"mobile"
|
||||
],
|
||||
"messages": [
|
||||
|
||||
]
|
||||
},
|
||||
"ext.isekai.previewCard": {
|
||||
"scripts": [
|
||||
"previewCard/ext.isekai.previewCard.js"
|
||||
],
|
||||
"styles": [
|
||||
"previewCard/ext.isekai.previewCard.less"
|
||||
],
|
||||
"targets": [
|
||||
"desktop",
|
||||
"mobile"
|
||||
],
|
||||
"messages": [
|
||||
|
||||
]
|
||||
},
|
||||
"ext.isekai.tile": {
|
||||
"scripts": [
|
||||
"tile/tile.js"
|
||||
],
|
||||
"styles": [
|
||||
"tile/tile.css",
|
||||
"tile/style.less"
|
||||
],
|
||||
"targets": [
|
||||
"desktop",
|
||||
"mobile"
|
||||
]
|
||||
},
|
||||
"ext.isekai.collapse": {
|
||||
"scripts": [
|
||||
"ext.isekai.collapse.js"
|
||||
],
|
||||
"styles": [
|
||||
"ext.isekai.collapse.less"
|
||||
],
|
||||
"targets": [
|
||||
"desktop",
|
||||
"mobile"
|
||||
]
|
||||
}
|
||||
},
|
||||
"ResourceFileModulePaths": {
|
||||
"localBasePath": "modules",
|
||||
"remoteExtPath": "IsekaiWidgets/modules"
|
||||
},
|
||||
"attributes": {
|
||||
"CodeMirror": {
|
||||
"TagModes": {
|
||||
"tilegroup": "text/mediawiki",
|
||||
"exfont": "text/mediawiki",
|
||||
"details": "text/mediawiki",
|
||||
"summary": "text/mediawiki"
|
||||
}
|
||||
}
|
||||
},
|
||||
"manifest_version": 2
|
||||
}
|
||||
@ -1,27 +1,27 @@
|
||||
{
|
||||
"isekai-widgets": "Isekai Widgets",
|
||||
"isekai-widgets-desc": "Some custom widgets uses on Isekai Wiki",
|
||||
|
||||
"isekai-createpage-page-title": "Title for new page",
|
||||
"isekai-createpage-create-page": "Create page",
|
||||
"isekai-createpage-create-page-button": "Create",
|
||||
"isekai-createpage-page-exists": "A page with the same name already exists. Please use another name.",
|
||||
"isekai-createpage-title-empty": "Please input title.",
|
||||
"isekai-createpage-redirecting": "Redirecting, please wait...",
|
||||
|
||||
"isekai-discover-langcode": "en",
|
||||
"isekai-discover-randompage": "Random Page",
|
||||
"isekai-discover-loading": "Loading...",
|
||||
"isekai-discover-change-btn": "Another",
|
||||
"isekai-discover-readmore-btn": "Detail",
|
||||
"isekai-discover-error-cannotload": "Cannot load page from server.",
|
||||
|
||||
"isekai-fontface-error-invalid-params": "Please specify src and name attributes.",
|
||||
"isekai-fontface-error-font-name-invalid": "Font name cannot contain special characters.",
|
||||
"isekai-fontface-error-font-not-exists": "Font file \"$1\" not exists.",
|
||||
"isekai-fontface-error-font-already-defined": "Font \"$1\" already imported, please check.",
|
||||
|
||||
"isekai-font-error-invalid-params": "Please specify name attributes.",
|
||||
"isekai-font-error-font-name-invalid": "Font name cannot contain special characters.",
|
||||
"isekai-font-error-font-not-imported": "Font \"$1\" not imported."
|
||||
{
|
||||
"isekai-widgets": "Isekai Widgets",
|
||||
"isekai-widgets-desc": "Some custom widgets uses on Isekai Wiki",
|
||||
|
||||
"isekai-createpage-page-title": "Title for new page",
|
||||
"isekai-createpage-create-page": "Create page",
|
||||
"isekai-createpage-create-page-button": "Create",
|
||||
"isekai-createpage-page-exists": "A page with the same name already exists. Please use another name.",
|
||||
"isekai-createpage-title-empty": "Please input title.",
|
||||
"isekai-createpage-redirecting": "Redirecting, please wait...",
|
||||
|
||||
"isekai-discover-langcode": "en",
|
||||
"isekai-discover-randompage": "Random Page",
|
||||
"isekai-discover-loading": "Loading...",
|
||||
"isekai-discover-change-btn": "Another",
|
||||
"isekai-discover-readmore-btn": "Detail",
|
||||
"isekai-discover-error-cannotload": "Cannot load page from server.",
|
||||
|
||||
"isekai-fontface-error-invalid-params": "Please specify src and name attributes.",
|
||||
"isekai-fontface-error-font-name-invalid": "Font name cannot contain special characters.",
|
||||
"isekai-fontface-error-font-not-exists": "Font file \"$1\" not exists.",
|
||||
"isekai-fontface-error-font-already-defined": "Font \"$1\" already imported, please check.",
|
||||
|
||||
"isekai-font-error-invalid-params": "Please specify name attributes.",
|
||||
"isekai-font-error-font-name-invalid": "Font name cannot contain special characters.",
|
||||
"isekai-font-error-font-not-imported": "Font \"$1\" not imported."
|
||||
}
|
||||
@ -1,17 +1,17 @@
|
||||
{
|
||||
"isekai-widgets-desc": "異世界ウィキで使用するカスタムウィジェットたち",
|
||||
|
||||
"isekai-createpage-page-title": "新しいページの名",
|
||||
"isekai-createpage-create-page": "ページを新規作成",
|
||||
"isekai-createpage-create-page-button": "作成",
|
||||
"isekai-createpage-page-exists": "同じタイトルのページが既に存在します。変更してください。",
|
||||
"isekai-createpage-title-empty": "おタイトルを入力してください",
|
||||
"isekai-createpage-redirecting": "ジャンプしてお待ちください...",
|
||||
|
||||
"isekai-discover-langcode": "ja",
|
||||
"isekai-discover-randompage": "おまかせ表示",
|
||||
"isekai-discover-loading": "読み込み中...",
|
||||
"isekai-discover-change-btn": "変える",
|
||||
"isekai-discover-readmore-btn": "開く",
|
||||
"isekai-discover-error-cannotload": "サーバからのページを読み取りに失敗しま。"
|
||||
{
|
||||
"isekai-widgets-desc": "異世界ウィキで使用するカスタムウィジェットたち",
|
||||
|
||||
"isekai-createpage-page-title": "新しいページの名",
|
||||
"isekai-createpage-create-page": "ページを新規作成",
|
||||
"isekai-createpage-create-page-button": "作成",
|
||||
"isekai-createpage-page-exists": "同じタイトルのページが既に存在します。変更してください。",
|
||||
"isekai-createpage-title-empty": "おタイトルを入力してください",
|
||||
"isekai-createpage-redirecting": "ジャンプしてお待ちください...",
|
||||
|
||||
"isekai-discover-langcode": "ja",
|
||||
"isekai-discover-randompage": "おまかせ表示",
|
||||
"isekai-discover-loading": "読み込み中...",
|
||||
"isekai-discover-change-btn": "変える",
|
||||
"isekai-discover-readmore-btn": "開く",
|
||||
"isekai-discover-error-cannotload": "サーバからのページを読み取りに失敗しました。"
|
||||
}
|
||||
@ -1,27 +1,29 @@
|
||||
{
|
||||
"isekai-widgets": "异世界百科 小部件",
|
||||
"isekai-widgets-desc": "在异世界百科上使用的一些小部件",
|
||||
|
||||
"isekai-createpage-page-title": "页面标题",
|
||||
"isekai-createpage-create-page": "新建页面",
|
||||
"isekai-createpage-create-page-button": "创建",
|
||||
"isekai-createpage-page-exists": "已有相同名字的页面存在，换一个名字吧。",
|
||||
"isekai-createpage-title-empty": "请填写标题",
|
||||
"isekai-createpage-redirecting": "正在跳转，请稍后……",
|
||||
|
||||
"isekai-discover-langcode": "zh",
|
||||
"isekai-discover-randompage": "随机页面",
|
||||
"isekai-discover-loading": "加载中……",
|
||||
"isekai-discover-change-btn": "换一个",
|
||||
"isekai-discover-readmore-btn": "查看",
|
||||
"isekai-discover-error-cannotload": "无法从服务器加载数据",
|
||||
|
||||
"isekai-fontface-error-invalid-params": "请提供src和name参数。",
|
||||
"isekai-fontface-error-font-name-invalid": "字体名中不能包含特殊字符。",
|
||||
"isekai-fontface-error-font-not-exists": "字体文件 \"$1\" 不存在。",
|
||||
"isekai-fontface-error-font-already-defined": "字体 \"$1\" 已引用，请检查重复引用。",
|
||||
|
||||
"isekai-font-error-invalid-params": "请提供name参数。",
|
||||
"isekai-font-error-font-name-invalid": "字体名中不能包含特殊字符。",
|
||||
"isekai-font-error-font-not-imported": "未导入字体: \"$1\"。"
|
||||
{
|
||||
"isekai-widgets": "异世界百科 小部件",
|
||||
"isekai-widgets-desc": "在异世界百科上使用的一些小部件",
|
||||
|
||||
"isekai-createpage-page-title": "页面标题",
|
||||
"isekai-createpage-create-page": "新建页面",
|
||||
"isekai-createpage-create-page-button": "创建",
|
||||
"isekai-createpage-page-exists": "已有相同名字的页面存在，换一个名字吧。",
|
||||
"isekai-createpage-title-empty": "请填写标题",
|
||||
"isekai-createpage-redirecting": "正在跳转，请稍后……",
|
||||
|
||||
"isekai-discover-langcode": "zh",
|
||||
"isekai-discover-randompage": "随机页面",
|
||||
"isekai-discover-loading": "加载中……",
|
||||
"isekai-discover-change-btn": "换一个",
|
||||
"isekai-discover-readmore-btn": "查看",
|
||||
"isekai-discover-error-cannotload": "无法从服务器加载数据",
|
||||
|
||||
"isekai-feed-list-title": "最近更新",
|
||||
|
||||
"isekai-fontface-error-invalid-params": "请提供src和name参数。",
|
||||
"isekai-fontface-error-font-name-invalid": "字体名中不能包含特殊字符。",
|
||||
"isekai-fontface-error-font-not-exists": "字体文件 \"$1\" 不存在。",
|
||||
"isekai-fontface-error-font-already-defined": "字体 \"$1\" 已引用，请检查重复引用。",
|
||||
|
||||
"isekai-font-error-invalid-params": "请提供name参数。",
|
||||
"isekai-font-error-font-name-invalid": "字体名中不能包含特殊字符。",
|
||||
"isekai-font-error-font-not-imported": "未导入字体: \"$1\"。"
|
||||
}
|
||||
@ -1,27 +1,27 @@
|
||||
{
|
||||
"isekai-widgets": "異世界百科 小部件",
|
||||
"isekai-widgets-desc": "在異世界百科上使用的一些小部件",
|
||||
|
||||
"isekai-createpage-page-title": "頁面標題",
|
||||
"isekai-createpage-create-page": "建立頁面",
|
||||
"isekai-createpage-create-page-button": "創建",
|
||||
"isekai-createpage-page-exists": "已有相同名字的頁面存在，換一個名字吧。",
|
||||
"isekai-createpage-title-empty": "请填写标题",
|
||||
"isekai-createpage-redirecting": "正在跳轉，請稍後……",
|
||||
|
||||
"isekai-discover-langcode": "zh",
|
||||
"isekai-discover-randompage": "隨機頁面",
|
||||
"isekai-discover-loading": "讀取中……",
|
||||
"isekai-discover-change-btn": "換一個",
|
||||
"isekai-discover-readmore-btn": "詳情",
|
||||
"isekai-discover-error-cannotload": "無法從伺服器讀取數據",
|
||||
|
||||
"isekai-fontface-error-invalid-params": "請提供src和name參數。",
|
||||
"isekai-fontface-error-font-name-invalid": "字體名中不能包含特殊字元。",
|
||||
"isekai-fontface-error-font-not-exists": "字體檔案 \"$1\" 不存在。",
|
||||
"isekai-fontface-error-font-already-defined": "字體 \"$1\" 已被引用，請檢查重複引用。",
|
||||
|
||||
"isekai-font-error-invalid-params": "請提供name參數。",
|
||||
"isekai-font-error-font-name-invalid": "字體名中不能包含特殊字元。",
|
||||
"isekai-font-error-font-not-imported": "未導入字體: \"$1\"。"
|
||||
{
|
||||
"isekai-widgets": "異世界百科 小部件",
|
||||
"isekai-widgets-desc": "在異世界百科上使用的一些小部件",
|
||||
|
||||
"isekai-createpage-page-title": "頁面標題",
|
||||
"isekai-createpage-create-page": "建立頁面",
|
||||
"isekai-createpage-create-page-button": "創建",
|
||||
"isekai-createpage-page-exists": "已有相同名字的頁面存在，換一個名字吧。",
|
||||
"isekai-createpage-title-empty": "请填写标题",
|
||||
"isekai-createpage-redirecting": "正在跳轉，請稍後……",
|
||||
|
||||
"isekai-discover-langcode": "zh",
|
||||
"isekai-discover-randompage": "隨機頁面",
|
||||
"isekai-discover-loading": "讀取中……",
|
||||
"isekai-discover-change-btn": "換一個",
|
||||
"isekai-discover-readmore-btn": "詳情",
|
||||
"isekai-discover-error-cannotload": "無法從伺服器讀取數據",
|
||||
|
||||
"isekai-fontface-error-invalid-params": "請提供src和name參數。",
|
||||
"isekai-fontface-error-font-name-invalid": "字體名中不能包含特殊字元。",
|
||||
"isekai-fontface-error-font-not-exists": "字體檔案 \"$1\" 不存在。",
|
||||
"isekai-fontface-error-font-already-defined": "字體 \"$1\" 已被引用，請檢查重複引用。",
|
||||
|
||||
"isekai-font-error-invalid-params": "請提供name參數。",
|
||||
"isekai-font-error-font-name-invalid": "字體名中不能包含特殊字元。",
|
||||
"isekai-font-error-font-not-imported": "未導入字體: \"$1\"。"
|
||||
}
|
||||
@ -1,17 +1,17 @@
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
class CreatePageWidget {
|
||||
public static function getHtml(){
|
||||
ob_start();
|
||||
include(dirname(__DIR__) . '/modules/createPage/ext.isekai.createPage.tpl');
|
||||
$template = ob_get_clean();
|
||||
return [$template, "markerType" => 'nowiki'];
|
||||
}
|
||||
|
||||
public static function create($text, $params, $parser, $frame){
|
||||
$parser->getOutput()->addModules('ext.isekai.createPage');
|
||||
|
||||
return self::getHtml();
|
||||
}
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
class CreatePageWidget {
|
||||
public static function getHtml(){
|
||||
ob_start();
|
||||
include(dirname(__DIR__) . '/modules/createPage/ext.isekai.createPage.tpl');
|
||||
$template = ob_get_clean();
|
||||
return [$template, "markerType" => 'nowiki'];
|
||||
}
|
||||
|
||||
public static function create($text, $params, $parser, $frame){
|
||||
$parser->getOutput()->addModules('ext.isekai.createPage');
|
||||
|
||||
return self::getHtml();
|
||||
}
|
||||
}
|
||||
@ -1,17 +1,17 @@
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
class DiscoverWidget {
|
||||
public static function getHtml(){
|
||||
ob_start();
|
||||
include(dirname(__DIR__) . '/modules/discover/ext.isekai.discover.tpl');
|
||||
$template = ob_get_clean();
|
||||
return [$template, "markerType" => 'nowiki'];
|
||||
}
|
||||
|
||||
public static function create($text, $params, \Parser $parser, $frame){
|
||||
$parser->getOutput()->addModules('ext.isekai.discover');
|
||||
|
||||
return self::getHtml();
|
||||
}
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
class DiscoverWidget {
|
||||
public static function getHtml(){
|
||||
ob_start();
|
||||
include(dirname(__DIR__) . '/modules/discover/ext.isekai.discover.tpl');
|
||||
$template = ob_get_clean();
|
||||
return [$template, "markerType" => 'nowiki'];
|
||||
}
|
||||
|
||||
public static function create($text, $params, \Parser $parser, $frame){
|
||||
$parser->getOutput()->addModules('ext.isekai.discover');
|
||||
|
||||
return self::getHtml();
|
||||
}
|
||||
}
|
||||
@ -1,39 +1,39 @@
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
use Html;
|
||||
|
||||
class ExtraFontWidget {
|
||||
public static function create($text, $params, $parser, $frame){
|
||||
$existsFonts = $parser->extIsekaiWidgetsCache->get('extraFonts', INF, []);
|
||||
|
||||
$content = $text = $frame->expand($text);
|
||||
if (!isset($params['name']) || empty($params['name'])) {
|
||||
return '<span class="error">' . wfMessage('isekai-font-error-invalid-params')->parse() . '</span>' . $content;
|
||||
}
|
||||
|
||||
$fontName = 'extra-' . $params['name'];
|
||||
if (preg_match('/[`~!@#$%^&*()+=<>?:"{}|,.\/;\'\\\\\[\]]\r\n/', $fontName)) {
|
||||
return '<span class="error">' .
|
||||
wfMessage('isekai-font-error-font-name-invalid')->parse() .
|
||||
'</span>' .
|
||||
$content;
|
||||
}
|
||||
|
||||
$existsFonts = $parser->extIsekaiWidgetsCache->get('extraFonts', INF, []);
|
||||
if (!isset($existsFonts[$fontName])) {
|
||||
return '<span class="error">' .
|
||||
wfMessage('isekai-font-error-font-not-imported', $params['name'])->parse() .
|
||||
'</span>' .
|
||||
$content;
|
||||
}
|
||||
$fontId = $existsFonts[$fontName];
|
||||
|
||||
return [
|
||||
Html::rawElement('span', [
|
||||
'class' => 'isekai-extra-font font-' . $fontId,
|
||||
], $content),
|
||||
"markerType" => 'nowiki'
|
||||
];
|
||||
}
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
use Html;
|
||||
|
||||
class ExtraFontWidget {
|
||||
public static function create($text, $params, $parser, $frame){
|
||||
$existsFonts = $parser->extIsekaiWidgetsCache->get('extraFonts', INF, []);
|
||||
|
||||
$content = $text = $parser->recursiveTagParse($text, $frame);
|
||||
if (!isset($params['name']) || empty($params['name'])) {
|
||||
return '<span class="error">' . wfMessage('isekai-font-error-invalid-params')->parse() . '</span>' . $content;
|
||||
}
|
||||
|
||||
$fontName = 'extra-' . $params['name'];
|
||||
if (preg_match('/[`~!@#$%^&*()+=<>?:"{}|,.\/;\'\\\\\[\]]\r\n/', $fontName)) {
|
||||
return '<span class="error">' .
|
||||
wfMessage('isekai-font-error-font-name-invalid')->parse() .
|
||||
'</span>' .
|
||||
$content;
|
||||
}
|
||||
|
||||
$existsFonts = $parser->extIsekaiWidgetsCache->get('extraFonts', INF, []);
|
||||
if (!isset($existsFonts[$fontName])) {
|
||||
return '<span class="error">' .
|
||||
wfMessage('isekai-font-error-font-not-imported', $params['name'])->parse() .
|
||||
'</span>' .
|
||||
$content;
|
||||
}
|
||||
$fontId = $existsFonts[$fontName];
|
||||
|
||||
return [
|
||||
Html::rawElement('span', [
|
||||
'class' => 'isekai-extra-font font-' . $fontId,
|
||||
], $content),
|
||||
"markerType" => 'nowiki'
|
||||
];
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
class FeedListWidget {
|
||||
public static function getHtml(){
|
||||
ob_start();
|
||||
include(dirname(__DIR__) . '/modules/feedList/ext.isekai.feedList.tpl');
|
||||
$template = ob_get_clean();
|
||||
return [$template, "markerType" => 'nowiki'];
|
||||
}
|
||||
|
||||
public static function create($text, $params, \Parser $parser, $frame){
|
||||
$parser->getOutput()->addModules('ext.isekai.feedList');
|
||||
|
||||
return self::getHtml();
|
||||
}
|
||||
}
|
||||
@ -1,53 +1,53 @@
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
use Title;
|
||||
use MediaWiki\MediaWikiServices;
|
||||
|
||||
class FontFaceWidget {
|
||||
/**
|
||||
* @param string $text
|
||||
* @param array $params
|
||||
* @param \Parser $parser
|
||||
* @param \PPFrame $frame
|
||||
*/
|
||||
public static function create($text, $params, $parser, $frame){
|
||||
if (!isset($params['src']) || !isset($params['name']) ||
|
||||
empty($params['src']) || empty($params['name'])) {
|
||||
return '<span class="error">' . wfMessage('isekai-fontface-error-invalid-params')->parse() . '</span>';
|
||||
}
|
||||
|
||||
$service = MediaWikiServices::getInstance();
|
||||
|
||||
$fontName = 'extra-' . $params['name'];
|
||||
$existsFonts = $parser->extIsekaiWidgetsCache->get('extraFonts', INF, []);
|
||||
if (isset($existsFonts[$fontName])) {
|
||||
return '<span class="error">' .
|
||||
wfMessage('isekai-fontface-error-font-already-defined', $params['name'])->parse() .
|
||||
'</span>';
|
||||
}
|
||||
if (preg_match('/[`~!@#$%^&*()+=<>?:"{}|,.\/;\'\\\\\[\]]\r\n/', $fontName)) {
|
||||
return '<span class="error">' .
|
||||
wfMessage('isekai-fontface-error-font-name-invalid')->parse() .
|
||||
'</span>';
|
||||
}
|
||||
|
||||
$title = Title::newFromText($params['src'], NS_FILE);
|
||||
$file = $service->getRepoGroup()->findFile($title);
|
||||
if (!$file) {
|
||||
return '<span class="error">' .
|
||||
wfMessage('isekai-fontface-error-font-not-exists', $params['src'])->parse() .
|
||||
'</span>';
|
||||
}
|
||||
|
||||
$fontUrl = $file->getUrl();
|
||||
$fontId = substr(Utils::safeBase64Encode(md5($fontName, true)), 0, 8);
|
||||
$css = "<style>@font-face{src: url('{$fontUrl}');font-family:'{$fontName}'}" .
|
||||
".isekai-extra-font.font-{$fontId}{font-family:'{$fontName}'}</style>";
|
||||
|
||||
$existsFonts[$fontName] = $fontId;
|
||||
$existsFonts = $parser->extIsekaiWidgetsCache->set('extraFonts', $existsFonts);
|
||||
|
||||
return [$css, "markerType" => 'nowiki'];
|
||||
}
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
use Title;
|
||||
use MediaWiki\MediaWikiServices;
|
||||
|
||||
class FontFaceWidget {
|
||||
/**
|
||||
* @param string $text
|
||||
* @param array $params
|
||||
* @param \Parser $parser
|
||||
* @param \PPFrame $frame
|
||||
*/
|
||||
public static function create($text, $params, $parser, $frame) {
|
||||
if (!isset($params['src']) || !isset($params['name']) ||
|
||||
empty($params['src']) || empty($params['name'])) {
|
||||
return '<span class="error">' . wfMessage('isekai-fontface-error-invalid-params')->parse() . '</span>';
|
||||
}
|
||||
|
||||
$service = MediaWikiServices::getInstance();
|
||||
|
||||
$fontName = 'extra-' . $params['name'];
|
||||
$existsFonts = $parser->extIsekaiWidgetsCache->get('extraFonts', INF, []);
|
||||
if (isset($existsFonts[$fontName])) {
|
||||
return '<span class="error">' .
|
||||
wfMessage('isekai-fontface-error-font-already-defined', $params['name'])->parse() .
|
||||
'</span>';
|
||||
}
|
||||
if (preg_match('/[`~!@#$%^&*()+=<>?:"{}|,.\/;\'\\\\\[\]]\r\n/', $fontName)) {
|
||||
return '<span class="error">' .
|
||||
wfMessage('isekai-fontface-error-font-name-invalid')->parse() .
|
||||
'</span>';
|
||||
}
|
||||
|
||||
$title = Title::newFromText($params['src'], NS_FILE);
|
||||
$file = $service->getRepoGroup()->findFile($title);
|
||||
if (!$file) {
|
||||
return '<span class="error">' .
|
||||
wfMessage('isekai-fontface-error-font-not-exists', $params['src'])->parse() .
|
||||
'</span>';
|
||||
}
|
||||
|
||||
$fontUrl = $file->getUrl();
|
||||
$fontId = substr(Utils::safeBase64Encode(md5($fontName, true)), 0, 8);
|
||||
$css = "<span><style>@font-face{src: url('{$fontUrl}');font-family:'{$fontName}'}" .
|
||||
".isekai-extra-font.font-{$fontId}{font-family:'{$fontName}'}</style></span>";
|
||||
|
||||
$existsFonts[$fontName] = $fontId;
|
||||
$existsFonts = $parser->extIsekaiWidgetsCache->set('extraFonts', $existsFonts);
|
||||
|
||||
return [$css, "markerType" => 'nowiki'];
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
use Html;
|
||||
|
||||
class Html5Widget {
|
||||
public static function createDetails(string $text, array $args, \Parser $parser, \PPFrame $frame) {
|
||||
$parser->getOutput()->addModules('ext.isekai.collapse');
|
||||
$allowedAttr = ['class'];
|
||||
$htmlArgs = array_filter($args, function($k) use($allowedAttr) {
|
||||
return in_array($k, $allowedAttr);
|
||||
}, ARRAY_FILTER_USE_KEY);
|
||||
|
||||
$content = '';
|
||||
if ($text) {
|
||||
$content = Utils::makeParagraph($parser->recursiveTagParse($text, $frame), true);
|
||||
}
|
||||
|
||||
return [Html::rawElement('details', $htmlArgs, $content), "markerType" => 'nowiki'];
|
||||
}
|
||||
|
||||
public static function createSummary(string $text, array $args, \Parser $parser, \PPFrame $frame) {
|
||||
$allowedAttr = ['class'];
|
||||
$htmlArgs = array_filter($args, function($k) use($allowedAttr) {
|
||||
return in_array($k, $allowedAttr);
|
||||
}, ARRAY_FILTER_USE_KEY);
|
||||
|
||||
$content = '';
|
||||
if ($text) {
|
||||
$content = $parser->recursiveTagParse($text, $frame);
|
||||
}
|
||||
|
||||
return [Html::rawElement('summary', $htmlArgs, $content), "markerType" => 'nowiki'];
|
||||
}
|
||||
}
|
||||
@ -1,27 +1,27 @@
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
class PreviewCardWidget {
|
||||
public static function getHtml($variables){
|
||||
extract($variables);
|
||||
ob_start();
|
||||
include(dirname(__DIR__) . '/modules/previewCard/ext.isekai.previewCard.html');
|
||||
$template = ob_get_clean();
|
||||
return [$template, "markerType" => 'nowiki'];
|
||||
}
|
||||
|
||||
public static function create($text, $params, $parser, $frame){
|
||||
$parser->getOutput()->addModules('ext.isekai.previewCard');
|
||||
|
||||
$titleChunk = explode('/', $text);
|
||||
$len = count($titleChunk);
|
||||
$displayTitle = $titleChunk[$len - 1];
|
||||
unset($titleChunk[$len - 1]);
|
||||
$path = implode('/', $titleChunk);
|
||||
return self::getHtml([
|
||||
'title' => $text,
|
||||
'displayTitle' => $displayTitle,
|
||||
'path' => $path,
|
||||
]);
|
||||
}
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
class PreviewCardWidget {
|
||||
public static function getHtml($variables){
|
||||
extract($variables);
|
||||
ob_start();
|
||||
include(dirname(__DIR__) . '/modules/previewCard/ext.isekai.previewCard.tpl');
|
||||
$template = ob_get_clean();
|
||||
return [$template, "markerType" => 'nowiki'];
|
||||
}
|
||||
|
||||
public static function create($text, $params, $parser, $frame){
|
||||
$parser->getOutput()->addModules('ext.isekai.previewCard');
|
||||
|
||||
$titleChunk = explode('/', $text);
|
||||
$len = count($titleChunk);
|
||||
$displayTitle = $titleChunk[$len - 1];
|
||||
unset($titleChunk[$len - 1]);
|
||||
$path = implode('/', $titleChunk);
|
||||
return self::getHtml([
|
||||
'title' => $text,
|
||||
'displayTitle' => $displayTitle,
|
||||
'path' => $path,
|
||||
]);
|
||||
}
|
||||
}
|
||||
@ -1,94 +1,94 @@
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
use Html;
|
||||
|
||||
class TileGroupWidget {
|
||||
private $content = '';
|
||||
private $size = [];
|
||||
private $title = false;
|
||||
private $attributes = [];
|
||||
private $classes = [];
|
||||
private $styles = [];
|
||||
|
||||
public function __construct($args){
|
||||
$this->parseArgs($args);
|
||||
}
|
||||
|
||||
public static function create(string $text, array $args, \Parser $parser, \PPFrame $frame){
|
||||
$content = $parser->recursiveTagParse($text, $frame);
|
||||
|
||||
$args['content'] = $content;
|
||||
|
||||
$tileGroup = new TileGroupWidget($args);
|
||||
return [$tileGroup->getHtml(), "markerType" => 'nowiki'];
|
||||
}
|
||||
|
||||
private function parseArgs($args){
|
||||
$allowedArgs = ['content', 'size', 'title', 'class', 'style'];
|
||||
|
||||
if(isset($args['content'])){
|
||||
$this->content = $args['content'];
|
||||
}
|
||||
|
||||
if(isset($args['size'])){
|
||||
$this->size = explode(' ', str_replace('size-', '', $args['size']));
|
||||
}
|
||||
|
||||
if(isset($args['title'])){
|
||||
$this->title = $args['title'];
|
||||
}
|
||||
|
||||
if(isset($args['class'])){
|
||||
$this->classes = explode(' ', $args['class']);
|
||||
}
|
||||
|
||||
if(isset($args['style'])){
|
||||
$this->classes = explode(' ', $args['style']);
|
||||
}
|
||||
|
||||
foreach($args as $name => $arg){
|
||||
if(!in_array($name, $allowedArgs) && substr($name, 0, 2) !== 'on'){
|
||||
$this->attributes[$name] = $arg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private function getSizeArgs(array &$element){
|
||||
if(!empty($this->size)){
|
||||
$sizeAttr = [];
|
||||
foreach($this->size as $size){
|
||||
$sizeAttr[] = 'size-' . $size;
|
||||
}
|
||||
$element['class'] = array_merge($element['class'], $sizeAttr);
|
||||
}
|
||||
}
|
||||
|
||||
private function getTitleArgs(array &$element){
|
||||
if($this->title){
|
||||
$element['data-group-title'] = $this->title;
|
||||
}
|
||||
}
|
||||
|
||||
public function getHtml(){
|
||||
$element = array_merge($this->attributes, [
|
||||
'class' => array_merge($this->classes, ['tiles-grid', 'tiles-group']),
|
||||
'style' => $this->styles,
|
||||
]);
|
||||
|
||||
$this->getSizeArgs($element);
|
||||
$this->getTitleArgs($element);
|
||||
|
||||
if(!empty($element['class'])){
|
||||
$element['class'] = implode(' ', $element['class']);
|
||||
} else {
|
||||
unset($element['class']);
|
||||
}
|
||||
if(!empty($element['style'])){
|
||||
$element['style'] = implode('; ', $element['style']) . ';';
|
||||
} else {
|
||||
unset($element['style']);
|
||||
}
|
||||
return Html::rawElement('div', $element, $this->content);
|
||||
}
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
use Html;
|
||||
|
||||
class TileGroupWidget {
|
||||
private $content = '';
|
||||
private $size = [];
|
||||
private $title = false;
|
||||
private $attributes = [];
|
||||
private $classes = [];
|
||||
private $styles = [];
|
||||
|
||||
public function __construct($args){
|
||||
$this->parseArgs($args);
|
||||
}
|
||||
|
||||
public static function create(string $text, array $args, \Parser $parser, \PPFrame $frame){
|
||||
$content = $parser->recursiveTagParse($text, $frame);
|
||||
|
||||
$args['content'] = $content;
|
||||
|
||||
$tileGroup = new TileGroupWidget($args);
|
||||
return [$tileGroup->getHtml(), "markerType" => 'nowiki'];
|
||||
}
|
||||
|
||||
private function parseArgs($args){
|
||||
$allowedArgs = ['content', 'size', 'title', 'class', 'style'];
|
||||
|
||||
if(isset($args['content'])){
|
||||
$this->content = $args['content'];
|
||||
}
|
||||
|
||||
if(isset($args['size'])){
|
||||
$this->size = explode(' ', str_replace('size-', '', $args['size']));
|
||||
}
|
||||
|
||||
if(isset($args['title'])){
|
||||
$this->title = $args['title'];
|
||||
}
|
||||
|
||||
if(isset($args['class'])){
|
||||
$this->classes = explode(' ', $args['class']);
|
||||
}
|
||||
|
||||
if(isset($args['style'])){
|
||||
$this->classes = explode(' ', $args['style']);
|
||||
}
|
||||
|
||||
foreach($args as $name => $arg){
|
||||
if(!in_array($name, $allowedArgs) && substr($name, 0, 2) !== 'on'){
|
||||
$this->attributes[$name] = $arg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private function getSizeArgs(array &$element){
|
||||
if(!empty($this->size)){
|
||||
$sizeAttr = [];
|
||||
foreach($this->size as $size){
|
||||
$sizeAttr[] = 'size-' . $size;
|
||||
}
|
||||
$element['class'] = array_merge($element['class'], $sizeAttr);
|
||||
}
|
||||
}
|
||||
|
||||
private function getTitleArgs(array &$element){
|
||||
if($this->title){
|
||||
$element['data-group-title'] = $this->title;
|
||||
}
|
||||
}
|
||||
|
||||
public function getHtml(){
|
||||
$element = array_merge($this->attributes, [
|
||||
'class' => array_merge($this->classes, ['tiles-grid', 'tiles-group']),
|
||||
'style' => $this->styles,
|
||||
]);
|
||||
|
||||
$this->getSizeArgs($element);
|
||||
$this->getTitleArgs($element);
|
||||
|
||||
if(!empty($element['class'])){
|
||||
$element['class'] = implode(' ', $element['class']);
|
||||
} else {
|
||||
unset($element['class']);
|
||||
}
|
||||
if(!empty($element['style'])){
|
||||
$element['style'] = implode('; ', $element['style']) . ';';
|
||||
} else {
|
||||
unset($element['style']);
|
||||
}
|
||||
return Html::rawElement('div', $element, $this->content);
|
||||
}
|
||||
}
|
||||
@ -1,216 +1,217 @@
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
use Html;
|
||||
use MediaWiki\MediaWikiServices;
|
||||
use Title;
|
||||
|
||||
class TileWidget {
|
||||
private $size = 'medium';
|
||||
private $icon = false;
|
||||
private $title = '';
|
||||
private $href = '';
|
||||
private $badge = false;
|
||||
private $color = false;
|
||||
private $cover = false;
|
||||
private $images = [];
|
||||
private $grid = false;
|
||||
|
||||
private $attributes = [];
|
||||
|
||||
public function __construct($args, $content){
|
||||
$this->content = $content;
|
||||
$this->parseArgs($args);
|
||||
}
|
||||
|
||||
public static function create(string $text, array $args, \Parser $parser, \PPFrame $frame){
|
||||
$parser->getOutput()->addModules('ext.isekai.tile');
|
||||
|
||||
$content = '';
|
||||
if ($text) {
|
||||
$content = $frame->expand($text);
|
||||
|
||||
$title = preg_replace('/\[\[.*?\]\]/', '', $content);
|
||||
$title = preg_replace('/<img .*?src="(?<src>.*?)".*?srcset="(?<srcset>.*?)"[^\>]+>/', '', $title);
|
||||
$title = strip_tags(trim($title));
|
||||
$args['title'] = $title;
|
||||
}
|
||||
|
||||
$tile = new TileWidget($args, $content);
|
||||
return [$tile->toHtml(), 'markerType' => 'nowiki'];
|
||||
}
|
||||
|
||||
private function parseArgs($args){
|
||||
$allowedArgs = ['size', 'icon', 'title', 'cover', 'badge', 'color', 'href', 'grid'];
|
||||
|
||||
foreach($args as $name => $arg){
|
||||
if(in_array($name, $allowedArgs)){
|
||||
$this->$name = $arg;
|
||||
} elseif(substr($name, 0, 2) !== 'on'){
|
||||
$this->attributes[$name] = $arg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private function getSizeArgs(array &$element, array &$content){
|
||||
$element['data-size'] = $this->size;
|
||||
$element['class'][] = 'tile-' . $this->size;
|
||||
}
|
||||
|
||||
private function getColorArgs(array &$element, array &$content){
|
||||
if($this->color){
|
||||
if(substr($this->color, 0, 1) == '#' || substr($this->color, 0, 3) == 'rgb'){
|
||||
$element['style'][] = 'background-color: ' . $this->color;
|
||||
} else {
|
||||
$color = str_replace($this->color, 'bg-', '');
|
||||
$element['class'][] = 'bg-' . $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private function getTitleArgs(array &$element, array &$content){
|
||||
if(!empty($this->title)){
|
||||
$content[] = Html::element('span', [
|
||||
'class' => ['branding-bar'],
|
||||
], $this->title);
|
||||
$element['data-title'] = $this->title;
|
||||
}
|
||||
}
|
||||
|
||||
private function getCoverArgs(array &$element, array &$content){
|
||||
$element['data-cover'] = $this->cover;
|
||||
}
|
||||
|
||||
private function getHrefArgs(array &$element, array &$content){
|
||||
if(substr($this->href, 0, 2) == '[[' && substr($this->href, -2, 2) == ']]'){ //内部链接
|
||||
$titleText = substr($this->href, 2, strlen($this->href) - 4);
|
||||
$title = Title::newFromText($titleText);
|
||||
$href = $title->getLocalURL();
|
||||
} else {
|
||||
$href = $this->href;
|
||||
}
|
||||
$element['href'] = $href;
|
||||
}
|
||||
|
||||
private function getIconArgs(array &$element, array &$content){
|
||||
if($this->icon){
|
||||
if(is_string($this->icon)){
|
||||
if(preg_match('/\.[a-zA-Z0-9]{3,4}$/', $this->icon)){
|
||||
//图片图标
|
||||
$iconSrc = $this->icon;
|
||||
$type = 'image';
|
||||
} else {
|
||||
$iconSrc = explode(' ', $this->icon);
|
||||
$type = 'class';
|
||||
}
|
||||
} else {
|
||||
$type = 'class';
|
||||
$iconSrc = $this->icon;
|
||||
}
|
||||
|
||||
if($type == 'class'){
|
||||
$content[] = Html::element('span', [
|
||||
'class' => array_merge($iconSrc, ['icon']),
|
||||
]);
|
||||
} elseif($type == 'image'){
|
||||
$content[] = Html::element('img', [
|
||||
'src' => $iconSrc,
|
||||
'class' => ['icon'],
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private function getBadgeArgs(array &$element, array &$content){
|
||||
if($this->badge){
|
||||
$content[] = Html::element('span', [
|
||||
'class' => ['badge-bottom'],
|
||||
], strval($this->badge));
|
||||
}
|
||||
}
|
||||
|
||||
private function getImagesArgs(array &$element, array &$content){
|
||||
/*$service = MediaWikiServices::getInstance();
|
||||
$this->images = [];
|
||||
// 提取wikitext图片
|
||||
preg_match_all('/\[\[(?<title>.+?:.+?)(\|.*?)?\]\]/', $this->content, $matches);
|
||||
if (isset($matches['title']) && !empty($matches['title'])) {
|
||||
foreach ($matches['title'] as $titleText) {
|
||||
$title = Title::newFromText($titleText);
|
||||
if ($title->inNamespace(NS_FILE)) {
|
||||
$file = $service->getRepoGroup()->findFile($title);
|
||||
$thumb = $file->getUrl();
|
||||
$this->images[] = $thumb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 提取html图片
|
||||
preg_match_all('/<img .*?src="(?<src>.*?)".*?srcset="(?<srcset>.*?)"[^\>]+>/', $this->content, $matches);
|
||||
if (isset($matches['src']) && !empty($matches['src'])) {
|
||||
$this->images = array_merge($this->images, $matches['src']);
|
||||
}*/
|
||||
|
||||
if(!empty($this->images)){
|
||||
$element['data-effect'] = 'image-set';
|
||||
foreach($this->images as $image){
|
||||
$content[] = Html::element('img', [
|
||||
'src' => $image,
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private function getGridArgs(array &$element, array &$content){
|
||||
if($this->grid){
|
||||
$grid = explode(' ', $this->grid);
|
||||
$element['class'][] = 'col-' . $grid[0];
|
||||
if(count($grid) > 1){
|
||||
$element['class'][] = 'row-' . $grid[1];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public function toHtml(){
|
||||
$element = array_merge($this->attributes, [
|
||||
'data-role' => 'tile',
|
||||
]);
|
||||
$content = [];
|
||||
|
||||
if(isset($element['class'])){
|
||||
$element['class'] = explode(' ', $element['class']);
|
||||
} else {
|
||||
$element['class'] = [];
|
||||
}
|
||||
if(isset($element['style'])){
|
||||
$element['style'] = explode(' ', $element['style']);
|
||||
} else {
|
||||
$element['style'] = [];
|
||||
}
|
||||
|
||||
$this->getSizeArgs($element, $content);
|
||||
$this->getColorArgs($element, $content);
|
||||
$this->getIconArgs($element, $content);
|
||||
$this->getTitleArgs($element, $content);
|
||||
$this->getCoverArgs($element, $content);
|
||||
$this->getHrefArgs($element, $content);
|
||||
$this->getBadgeArgs($element, $content);
|
||||
$this->getImagesArgs($element, $content);
|
||||
$this->getGridArgs($element, $content);
|
||||
|
||||
$content = implode('', $content);
|
||||
|
||||
if(!empty($element['class'])){
|
||||
$element['class'] = implode(' ', $element['class']);
|
||||
} else {
|
||||
unset($element['class']);
|
||||
}
|
||||
if(!empty($element['style'])){
|
||||
$element['style'] = implode('; ', $element['style']) . ';';
|
||||
} else {
|
||||
unset($element['style']);
|
||||
}
|
||||
|
||||
return Html::rawElement('a', $element, $content);
|
||||
}
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
use Html;
|
||||
use MediaWiki\MediaWikiServices;
|
||||
use Title;
|
||||
|
||||
class TileWidget {
|
||||
private $size = 'medium';
|
||||
private $icon = false;
|
||||
private $title = '';
|
||||
private $href = '';
|
||||
private $badge = false;
|
||||
private $color = false;
|
||||
private $cover = false;
|
||||
private $images = [];
|
||||
private $grid = false;
|
||||
|
||||
private $attributes = [];
|
||||
|
||||
public function __construct($args, $content){
|
||||
$this->content = $content;
|
||||
$this->parseArgs($args);
|
||||
}
|
||||
|
||||
public static function create(string $text, array $args, \Parser $parser, \PPFrame $frame){
|
||||
$parser->getOutput()->addModules('ext.isekai.tile');
|
||||
|
||||
$content = '';
|
||||
if ($text) {
|
||||
$content = $frame->expand($text);
|
||||
|
||||
$title = preg_replace('/\[\[.*?\]\]/', '', $content);
|
||||
$title = preg_replace('/<img .*?src="(?<src>.*?)".*?srcset="(?<srcset>.*?)"[^\>]+>/', '', $title);
|
||||
$title = strip_tags(trim($title));
|
||||
$args['title'] = $title;
|
||||
}
|
||||
|
||||
$tile = new TileWidget($args, $content);
|
||||
return [$tile->toHtml(), 'markerType' => 'nowiki'];
|
||||
}
|
||||
|
||||
private function parseArgs($args){
|
||||
$allowedArgs = ['size', 'icon', 'title', 'cover', 'badge', 'color', 'href', 'grid'];
|
||||
|
||||
foreach($args as $name => $arg){
|
||||
if(in_array($name, $allowedArgs)){
|
||||
$this->$name = $arg;
|
||||
} elseif(substr($name, 0, 2) !== 'on'){
|
||||
$this->attributes[$name] = $arg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private function getSizeArgs(array &$element, array &$content){
|
||||
$element['data-size'] = $this->size;
|
||||
$element['class'][] = 'tile-' . $this->size;
|
||||
}
|
||||
|
||||
private function getColorArgs(array &$element, array &$content){
|
||||
if($this->color){
|
||||
if(substr($this->color, 0, 1) == '#' || substr($this->color, 0, 3) == 'rgb'){
|
||||
$element['style'][] = 'background-color: ' . $this->color;
|
||||
} else {
|
||||
$color = str_replace($this->color, 'bg-', '');
|
||||
$element['class'][] = 'bg-' . $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private function getTitleArgs(array &$element, array &$content){
|
||||
if(!empty($this->title)){
|
||||
$content[] = Html::element('span', [
|
||||
'class' => ['branding-bar'],
|
||||
], $this->title);
|
||||
$element['data-title'] = $this->title;
|
||||
}
|
||||
}
|
||||
|
||||
private function getCoverArgs(array &$element, array &$content){
|
||||
$element['data-cover'] = $this->cover;
|
||||
}
|
||||
|
||||
private function getHrefArgs(array &$element, array &$content){
|
||||
if(substr($this->href, 0, 2) == '[[' && substr($this->href, -2, 2) == ']]'){ //内部链接
|
||||
$titleText = substr($this->href, 2, strlen($this->href) - 4);
|
||||
$title = Title::newFromText($titleText);
|
||||
$href = $title->getLocalURL();
|
||||
} else {
|
||||
$href = $this->href;
|
||||
}
|
||||
$element['href'] = $href;
|
||||
}
|
||||
|
||||
private function getIconArgs(array &$element, array &$content){
|
||||
if($this->icon){
|
||||
if(is_string($this->icon)){
|
||||
if(preg_match('/\.[a-zA-Z0-9]{3,4}$/', $this->icon)){
|
||||
//图片图标
|
||||
$iconSrc = $this->icon;
|
||||
$type = 'image';
|
||||
} else {
|
||||
$iconSrc = explode(' ', $this->icon);
|
||||
$type = 'class';
|
||||
}
|
||||
} else {
|
||||
$type = 'class';
|
||||
$iconSrc = $this->icon;
|
||||
}
|
||||
|
||||
if($type == 'class'){
|
||||
$content[] = Html::element('span', [
|
||||
'class' => array_merge($iconSrc, ['icon']),
|
||||
]);
|
||||
} elseif($type == 'image'){
|
||||
$content[] = Html::element('img', [
|
||||
'src' => $iconSrc,
|
||||
'class' => ['icon'],
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private function getBadgeArgs(array &$element, array &$content){
|
||||
if($this->badge){
|
||||
$content[] = Html::element('span', [
|
||||
'class' => ['badge-bottom'],
|
||||
], strval($this->badge));
|
||||
}
|
||||
}
|
||||
|
||||
private function getImagesArgs(array &$element, array &$content){
|
||||
$service = MediaWikiServices::getInstance();
|
||||
$this->images = [];
|
||||
// 提取wikitext图片
|
||||
preg_match_all('/\[\[(?<title>.+?:.+?)(\|.*?)?\]\]/', $this->content, $matches);
|
||||
if (isset($matches['title']) && !empty($matches['title'])) {
|
||||
foreach ($matches['title'] as $titleText) {
|
||||
$title = Title::newFromText($titleText);
|
||||
if ($title->inNamespace(NS_FILE)) {
|
||||
$file = $service->getRepoGroup()->findFile($title);
|
||||
$thumb = $file->getUrl();
|
||||
$this->images[] = $thumb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 提取html图片
|
||||
preg_match_all('/<img .*?src="(?<src>.*?)".*?srcset="(?<srcset>.*?)"[^\>]+>/', $this->content, $matches);
|
||||
if (isset($matches['src']) && !empty($matches['src'])) {
|
||||
$this->images = array_merge($this->images, $matches['src']);
|
||||
}
|
||||
|
||||
if(!empty($this->images)){
|
||||
$element['data-effect'] = 'image-set';
|
||||
foreach($this->images as $image){
|
||||
$content[] = Html::element('img', [
|
||||
'src' => $image,
|
||||
'style' => 'display: none'
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private function getGridArgs(array &$element, array &$content){
|
||||
if($this->grid){
|
||||
$grid = explode(' ', $this->grid);
|
||||
$element['class'][] = 'col-' . $grid[0];
|
||||
if(count($grid) > 1){
|
||||
$element['class'][] = 'row-' . $grid[1];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public function toHtml(){
|
||||
$element = array_merge($this->attributes, [
|
||||
'data-role' => 'tile',
|
||||
]);
|
||||
$content = [];
|
||||
|
||||
if(isset($element['class'])){
|
||||
$element['class'] = explode(' ', $element['class']);
|
||||
} else {
|
||||
$element['class'] = [];
|
||||
}
|
||||
if(isset($element['style'])){
|
||||
$element['style'] = explode(' ', $element['style']);
|
||||
} else {
|
||||
$element['style'] = [];
|
||||
}
|
||||
|
||||
$this->getSizeArgs($element, $content);
|
||||
$this->getColorArgs($element, $content);
|
||||
$this->getIconArgs($element, $content);
|
||||
$this->getTitleArgs($element, $content);
|
||||
$this->getCoverArgs($element, $content);
|
||||
$this->getHrefArgs($element, $content);
|
||||
$this->getBadgeArgs($element, $content);
|
||||
$this->getImagesArgs($element, $content);
|
||||
$this->getGridArgs($element, $content);
|
||||
|
||||
$content = implode('', $content);
|
||||
|
||||
if(!empty($element['class'])){
|
||||
$element['class'] = implode(' ', $element['class']);
|
||||
} else {
|
||||
unset($element['class']);
|
||||
}
|
||||
if(!empty($element['style'])){
|
||||
$element['style'] = implode('; ', $element['style']) . ';';
|
||||
} else {
|
||||
unset($element['style']);
|
||||
}
|
||||
|
||||
return Html::rawElement('a', $element, $content);
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,35 @@
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
class Utils {
|
||||
public static function safeBase64Encode($input) {
|
||||
return str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($input));
|
||||
}
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
class Utils {
|
||||
public static function safeBase64Encode($input) {
|
||||
return str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($input));
|
||||
}
|
||||
|
||||
public static function makeParagraph($text, $hasUniq = false) {
|
||||
$text = str_replace("\r\n", "\n", $text);
|
||||
if (strpos($text, "\n\n") === false) {
|
||||
return $text;
|
||||
}
|
||||
$prepend = "";
|
||||
$append = "";
|
||||
if ($hasUniq) {
|
||||
$splitPoint = strpos($text, "\n", 1) + 1;
|
||||
$prepend = substr($text, 0, $splitPoint);
|
||||
$text = substr($text, $splitPoint);
|
||||
}
|
||||
preg_match("/(\<\/div[^\>]*?\>|\n)+$/", $text, $matches);
|
||||
if (count($matches) > 0) {
|
||||
$append = $matches[0];
|
||||
$text = substr($text, 0, -1 * strlen($append));
|
||||
$tagNum = substr_count($append, '</div');
|
||||
preg_match('/^(\<div[^\>]*?\>){' . $tagNum . '}/', $text, $matches);
|
||||
if (count($matches) > 0) {
|
||||
$prepend .= $matches[0];
|
||||
$text = substr($text, strlen($matches[0]));
|
||||
}
|
||||
}
|
||||
$lines = explode("\n\n", $text);
|
||||
return $prepend . "<p>" . implode("</p>\n<p>", $lines) . "</p>" . $append;
|
||||
}
|
||||
}
|
||||
@ -1,21 +1,35 @@
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
use MapCacheLRU;
|
||||
|
||||
class Widgets {
|
||||
public static function onParserSetup(&$parser){
|
||||
$parser->extIsekaiWidgetsCache = new MapCacheLRU( 100 ); // 100 is arbitrary
|
||||
|
||||
$parser->setHook('createpage', CreatePageWidget::class . '::create');
|
||||
$parser->setHook('discoverbox', DiscoverWidget::class . '::create');
|
||||
$parser->setHook('previewcard', PreviewCardWidget::class . '::create');
|
||||
|
||||
$parser->setHook('tile', TileWidget::class . '::create');
|
||||
$parser->setHook('tilegroup', TileGroupWidget::class . '::create');
|
||||
|
||||
$parser->setHook('fontface', FontFaceWidget::class . '::create');
|
||||
$parser->setHook('exfont', ExtraFontWidget::class . '::create');
|
||||
return true;
|
||||
}
|
||||
<?php
|
||||
namespace Isekai\Widgets;
|
||||
|
||||
use MapCacheLRU;
|
||||
use Parser;
|
||||
|
||||
class Widgets {
|
||||
/**
|
||||
* @param \Parser $parser
|
||||
*/
|
||||
public static function onParserSetup(&$parser){
|
||||
$parser->extIsekaiWidgetsCache = new MapCacheLRU( 100 ); // 100 is arbitrary
|
||||
|
||||
$parser->setHook('createpage', [CreatePageWidget::class, 'create']);
|
||||
$parser->setHook('discoverbox', [DiscoverWidget::class, 'create']);
|
||||
$parser->setHook('feedlist', [FeedListWidget::class, 'create']);
|
||||
$parser->setHook('previewcard', [PreviewCardWidget::class, 'create']);
|
||||
|
||||
$parser->setHook('tile', [TileWidget::class, 'create']);
|
||||
$parser->setHook('tilegroup', [TileGroupWidget::class, 'create']);
|
||||
|
||||
$parser->setHook('fontface', [FontFaceWidget::class, 'create']);
|
||||
$parser->setHook('exfont', [ExtraFontWidget::class, 'create']);
|
||||
|
||||
$parser->setHook('details', [Html5Widget::class, 'createDetails']);
|
||||
$parser->setHook('summary', [Html5Widget::class, 'createSummary']);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
public static function onLoad(\OutputPage $outputPage) {
|
||||
$outputPage->addModuleStyles("ext.isekai.widgets.global");
|
||||
$outputPage->addModuleStyles("ext.isekai.collapse");
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,8 @@
|
||||
$(function(){
|
||||
if($('.isekai-create-page').length > 0){
|
||||
var CreatePageWidget = isekai.ui.CreatePageWidget;
|
||||
$('.isekai-create-page').each(function(){
|
||||
new CreatePageWidget($(this));
|
||||
});
|
||||
}
|
||||
$(function(){
|
||||
if($('.isekai-create-page').length > 0){
|
||||
var CreatePageWidget = isekai.ui.CreatePageWidget;
|
||||
$('.isekai-create-page').each(function(){
|
||||
new CreatePageWidget($(this));
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -1,67 +1,67 @@
|
||||
@height: 2.25em;
|
||||
@text-size: 0.95em;
|
||||
|
||||
.isekai-create-page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
background-clip: border-box;
|
||||
border: 1px solid rgba(0,0,0,.125);
|
||||
border-radius: .25rem;
|
||||
|
||||
.card-header {
|
||||
padding: .75rem 1.25rem;
|
||||
margin-bottom: 0;
|
||||
background-color: rgba(0,0,0,.03);
|
||||
border-bottom: 1px solid rgba(0,0,0,.125);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:first-child {
|
||||
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
|
||||
}
|
||||
|
||||
.card-header-text {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
@media(max-width: 360px){
|
||||
.card-header-text {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 1em 0 0.75em 1em;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1 1 auto;
|
||||
padding: 0.25em;
|
||||
font-size: 1.25em;
|
||||
|
||||
.card-content {
|
||||
overflow-y: auto;
|
||||
padding: 1em 0.5em;
|
||||
margin: 0 0.4em;
|
||||
min-height: @height;
|
||||
font-size: @text-size;
|
||||
|
||||
.oo-ui-fieldLayout-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.oo-ui-fieldLayout-messages {
|
||||
margin: 0.5em 0 0 0.5em;
|
||||
}
|
||||
|
||||
.oo-ui-actionFieldLayout.oo-ui-fieldLayout-align-top {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@height: 2.25em;
|
||||
@text-size: 0.95em;
|
||||
|
||||
.isekai-create-page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
background-clip: border-box;
|
||||
border: 1px solid rgba(0,0,0,.125);
|
||||
border-radius: .25rem;
|
||||
|
||||
.card-header {
|
||||
padding: .75rem 1.25rem;
|
||||
margin-bottom: 0;
|
||||
background-color: rgba(0,0,0,.03);
|
||||
border-bottom: 1px solid rgba(0,0,0,.125);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:first-child {
|
||||
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
|
||||
}
|
||||
|
||||
.card-header-text {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
@media(max-width: 360px){
|
||||
.card-header-text {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 1em 0 0.75em 1em;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1 1 auto;
|
||||
padding: 0.25em;
|
||||
font-size: 1.25em;
|
||||
|
||||
.card-content {
|
||||
overflow-y: auto;
|
||||
padding: 1em 0.5em;
|
||||
margin: 0 0.4em;
|
||||
min-height: @height;
|
||||
font-size: @text-size;
|
||||
|
||||
.oo-ui-fieldLayout-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.oo-ui-fieldLayout-messages {
|
||||
margin: 0.5em 0 0 0.5em;
|
||||
}
|
||||
|
||||
.oo-ui-actionFieldLayout.oo-ui-fieldLayout-align-top {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,10 @@
|
||||
<div class="isekai-create-page">
|
||||
<div class="card-header">
|
||||
<span class="card-header-text"><?php echo wfMessage('isekai-createpage-create-page')->parse(); ?></span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="isekai-create-page">
|
||||
<div class="card-header">
|
||||
<span class="card-header-text"><?php echo wfMessage('isekai-createpage-create-page')->parse(); ?></span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,8 +1,8 @@
|
||||
$(function(){
|
||||
if($('.isekai-discover').length > 0){
|
||||
var DiscoverWidget = isekai.ui.DiscoverWidget;
|
||||
$('.isekai-discover').each(function(){
|
||||
new DiscoverWidget($(this));
|
||||
});
|
||||
}
|
||||
$(function(){
|
||||
if($('.isekai-discover').length > 0){
|
||||
var DiscoverWidget = isekai.ui.DiscoverWidget;
|
||||
$('.isekai-discover').each(function(){
|
||||
new DiscoverWidget($(this));
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -1,146 +1,147 @@
|
||||
@height: 20em;
|
||||
@text-size: 0.85em;
|
||||
|
||||
.discover-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
background-clip: border-box;
|
||||
border: 1px solid rgba(0,0,0,.125);
|
||||
border-radius: .25rem;
|
||||
|
||||
.card-header {
|
||||
padding: .75rem 1.25rem;
|
||||
margin-bottom: 0;
|
||||
background-color: rgba(0,0,0,.03);
|
||||
border-bottom: 1px solid rgba(0,0,0,.125);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:first-child {
|
||||
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
|
||||
}
|
||||
|
||||
.card-header-text {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 1em 0 0.75em 1em;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1 1 auto;
|
||||
padding: 0.25em;
|
||||
font-size: 1.25em;
|
||||
|
||||
.loading {
|
||||
width: 100%;
|
||||
height: @height;
|
||||
font-size: @text-size;
|
||||
margin-top: 1px;
|
||||
display: flex;
|
||||
|
||||
.spinner {
|
||||
margin: auto;
|
||||
padding: 2em;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
height: @height;
|
||||
overflow-y: auto;
|
||||
border-top: 1px solid #ccc;
|
||||
padding: 0 0.6em;
|
||||
margin: 0 0.4em;
|
||||
font-size: @text-size;
|
||||
}
|
||||
}
|
||||
|
||||
&.discover-card-zh {
|
||||
.card-header {
|
||||
@media(max-width: 410px){
|
||||
.card-header-buttons {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 380px){
|
||||
.card-header-buttons {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 360px){
|
||||
.card-header-text {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 350px){
|
||||
.card-header-text {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
margin-left: 0;
|
||||
margin-top: 0.8em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
& {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.discover-card-en {
|
||||
.card-header {
|
||||
@media(max-width: 500px){
|
||||
.card-header-text {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 430px){
|
||||
.card-header-text {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
margin-left: 0;
|
||||
margin-top: 0.8em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
& {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 350px){
|
||||
.card-header-text {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@height: 20rem;
|
||||
@text-size: 0.85rem;
|
||||
|
||||
.discover-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
background-clip: border-box;
|
||||
border: 1px solid rgba(0,0,0,.125);
|
||||
border-radius: .25rem;
|
||||
|
||||
.card-header {
|
||||
height: 2.25rem;
|
||||
padding: .75rem 1.25rem;
|
||||
margin-bottom: 0;
|
||||
background-color: rgba(0,0,0,.03);
|
||||
border-bottom: 1px solid rgba(0,0,0,.125);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:first-child {
|
||||
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
|
||||
}
|
||||
|
||||
.card-header-text {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 1rem 0 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1 1 auto;
|
||||
padding: 0.25rem;
|
||||
font-size: 1.25rem;
|
||||
|
||||
.loading {
|
||||
width: 100%;
|
||||
height: @height;
|
||||
font-size: @text-size;
|
||||
margin-top: 1px;
|
||||
display: flex;
|
||||
|
||||
.spinner {
|
||||
margin: auto;
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
height: @height;
|
||||
overflow-y: auto;
|
||||
border-top: 1px solid #ccc;
|
||||
padding: 0 0.6rem;
|
||||
margin: 0 0.4rem;
|
||||
font-size: @text-size;
|
||||
}
|
||||
}
|
||||
|
||||
&.discover-card-zh {
|
||||
.card-header {
|
||||
@media(max-width: 410px){
|
||||
.card-header-buttons {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 380px){
|
||||
.card-header-buttons {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 360px){
|
||||
.card-header-text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 350px){
|
||||
.card-header-text {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
margin-left: 0;
|
||||
margin-top: 0.8rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
& {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.discover-card-en {
|
||||
.card-header {
|
||||
@media(max-width: 500px){
|
||||
.card-header-text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 430px){
|
||||
.card-header-text {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
margin-left: 0;
|
||||
margin-top: 0.8rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
& {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 350px){
|
||||
.card-header-text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,104 +1,104 @@
|
||||
@height: 20em;
|
||||
@text-size: 0.85em;
|
||||
|
||||
.discover-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
background-clip: border-box;
|
||||
border: 1px solid rgba(0,0,0,.125);
|
||||
border-radius: .25rem;
|
||||
|
||||
.card-header {
|
||||
padding: .75rem 1.25rem;
|
||||
margin-bottom: 0;
|
||||
background-color: rgba(0,0,0,.03);
|
||||
border-bottom: 1px solid rgba(0,0,0,.125);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:first-child {
|
||||
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
|
||||
}
|
||||
|
||||
.card-header-text {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media(max-width: 500px){
|
||||
.card-header-text {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 430px){
|
||||
.card-header-text {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
margin-left: 0;
|
||||
margin-top: 0.8em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
& {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 350px){
|
||||
.card-header-text {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 1em 0 0.75em 1em;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1 1 auto;
|
||||
padding: 0.25em;
|
||||
font-size: 1.25em;
|
||||
|
||||
.loading {
|
||||
width: 100%;
|
||||
height: @height;
|
||||
font-size: @text-size;
|
||||
margin-top: 1px;
|
||||
display: flex;
|
||||
|
||||
.spinner {
|
||||
margin: auto;
|
||||
padding: 2em;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
height: @height;
|
||||
overflow-y: auto;
|
||||
border-top: 1px solid #ccc;
|
||||
padding: 0 0.6em;
|
||||
margin: 0 0.4em;
|
||||
font-size: @text-size;
|
||||
}
|
||||
}
|
||||
@height: 20em;
|
||||
@text-size: 0.85em;
|
||||
|
||||
.discover-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
background-clip: border-box;
|
||||
border: 1px solid rgba(0,0,0,.125);
|
||||
border-radius: .25rem;
|
||||
|
||||
.card-header {
|
||||
padding: .75rem 1.25rem;
|
||||
margin-bottom: 0;
|
||||
background-color: rgba(0,0,0,.03);
|
||||
border-bottom: 1px solid rgba(0,0,0,.125);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:first-child {
|
||||
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
|
||||
}
|
||||
|
||||
.card-header-text {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media(max-width: 500px){
|
||||
.card-header-text {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 430px){
|
||||
.card-header-text {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
margin-left: 0;
|
||||
margin-top: 0.8em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
& {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 350px){
|
||||
.card-header-text {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 1em 0 0.75em 1em;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1 1 auto;
|
||||
padding: 0.25em;
|
||||
font-size: 1.25em;
|
||||
|
||||
.loading {
|
||||
width: 100%;
|
||||
height: @height;
|
||||
font-size: @text-size;
|
||||
margin-top: 1px;
|
||||
display: flex;
|
||||
|
||||
.spinner {
|
||||
margin: auto;
|
||||
padding: 2em;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
height: @height;
|
||||
overflow-y: auto;
|
||||
border-top: 1px solid #ccc;
|
||||
padding: 0 0.6em;
|
||||
margin: 0 0.4em;
|
||||
font-size: @text-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,13 +1,13 @@
|
||||
<div class="isekai-discover discover-card discover-card-<?php echo wfMessage('isekai-discover-langcode')->parse(); ?>">
|
||||
<div class="card-header">
|
||||
<span class="card-header-text" data-msg="isekai-discover-randompage"><?php echo wfMessage('isekai-discover-randompage')->parse(); ?></span>
|
||||
<span class="card-header-buttons"></span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title" data-msg="isekai-discover-loading"><?php echo wfMessage('isekai-discover-loading')->parse(); ?></div>
|
||||
<div class="loading">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
<div class="card-content" style="display: none;"></div>
|
||||
</div>
|
||||
<div class="isekai-discover discover-card discover-card-<?=wfMessage('isekai-discover-langcode')->parse()?>">
|
||||
<div class="card-header">
|
||||
<span class="card-header-text" data-msg="isekai-discover-randompage"><?=wfMessage('isekai-discover-randompage')->parse()?></span>
|
||||
<span class="card-header-buttons"></span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title" data-msg="isekai-discover-loading"><?=wfMessage('isekai-discover-loading')->parse()?></div>
|
||||
<div class="loading">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
<div class="card-content" style="display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,33 @@
|
||||
(function($) {
|
||||
$('.isekai-collapse').addClass('animate')
|
||||
$('.isekai-collapse .isekai-collapse-title').on('click', '', function(e) {
|
||||
e.preventDefault();
|
||||
var titleElem = $(this);
|
||||
var containerElem = titleElem.parent('.isekai-collapse');
|
||||
var contentElem = containerElem.find('.isekai-collapse-content');
|
||||
if (containerElem.prop('open')) { // 需要收起
|
||||
var collapsedHeight = titleElem.outerHeight();
|
||||
var expandedHeight = collapsedHeight + contentElem.outerHeight();
|
||||
containerElem.css('height', expandedHeight);
|
||||
console.log('expandedHeight', expandedHeight);
|
||||
requestAnimationFrame(function() {
|
||||
console.log('collapsedHeight', collapsedHeight);
|
||||
containerElem.addClass('closing').css('height', collapsedHeight);
|
||||
setTimeout(function() {
|
||||
containerElem.prop('open', false).removeClass('closing'); //.css('height', 'auto');
|
||||
}, 260);
|
||||
});
|
||||
} else { // 需要展开
|
||||
containerElem.prop('open', true);
|
||||
var collapsedHeight = titleElem.outerHeight();
|
||||
containerElem.css('height', collapsedHeight);
|
||||
requestAnimationFrame(function() {
|
||||
var expandedHeight = collapsedHeight + contentElem.outerHeight();
|
||||
containerElem.css('height', expandedHeight);
|
||||
/*setTimeout(function() {
|
||||
containerElem.css('height', 'auto');
|
||||
}, 260);*/
|
||||
});
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
@ -0,0 +1,64 @@
|
||||
.isekai-collapse {
|
||||
width: 50%;
|
||||
background: #fff;
|
||||
margin-bottom: .5rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.animate {
|
||||
overflow-y: hidden;
|
||||
will-change: height;
|
||||
transition: height 250ms ease-in-out;
|
||||
}
|
||||
|
||||
.isekai-collapse-title {
|
||||
padding: 1rem;
|
||||
display: block;
|
||||
background-color: #f7f7f7;
|
||||
padding-left: 2.2rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: black;
|
||||
font-size: 1rem;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
border-width: 0.4rem;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent transparent #000;
|
||||
position: absolute;
|
||||
top: 1.32rem;
|
||||
left: 1.2rem;
|
||||
transform: rotate(0);
|
||||
transform-origin: 0.2rem 50%;
|
||||
will-change: transform;
|
||||
transition: transform 250ms ease;
|
||||
}
|
||||
|
||||
&::-webkit-details-marker {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.isekai-collapse-content {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
&[open] > .isekai-collapse-title:before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
&.closing[open] > .isekai-collapse-title:before {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
.isekai-indent > .isekai-collapse {
|
||||
padding-left: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
@ -1,18 +1,18 @@
|
||||
.isekai-row {
|
||||
display: flex;
|
||||
|
||||
.isekai-col {
|
||||
width: 100%;
|
||||
|
||||
@media(min-width: 851px){
|
||||
& {
|
||||
width: 50%;
|
||||
margin-left: 1em;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.isekai-row {
|
||||
display: flex;
|
||||
|
||||
.isekai-col {
|
||||
width: 100%;
|
||||
|
||||
@media(min-width: 851px){
|
||||
& {
|
||||
width: 50%;
|
||||
margin-left: 1em;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
.isekai-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
background-clip: border-box;
|
||||
border: 1px solid rgba(0,0,0,.125);
|
||||
border-radius: .25rem;
|
||||
|
||||
.card-header {
|
||||
padding: .75rem 1.25rem;
|
||||
margin-bottom: 0;
|
||||
background-color: rgba(0,0,0,.03);
|
||||
border-bottom: 1px solid rgba(0,0,0,.125);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:first-child {
|
||||
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
|
||||
}
|
||||
|
||||
.card-header-text {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 1rem 0 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1 1 auto;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.card-body-fluid {
|
||||
flex: 1 1 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media(max-width: 360px){
|
||||
.card-header-text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,92 @@
|
||||
@feed-list-height: 24rem;
|
||||
|
||||
.isekai-feed-list-card > .card-header {
|
||||
height: 2.25rem;
|
||||
}
|
||||
|
||||
#isekai-feed-list {
|
||||
margin: 0;
|
||||
height: @feed-list-height;
|
||||
overflow-y: auto;
|
||||
display: none;
|
||||
|
||||
&.mounted {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loading {
|
||||
width: 100%;
|
||||
height: 99.5%;
|
||||
height: calc(100% - 2px); // fix: overflow because of border
|
||||
margin-top: 1px;
|
||||
display: flex;
|
||||
|
||||
.spinner {
|
||||
margin: auto;
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.isekai-list {
|
||||
margin: 0 !important;
|
||||
padding: 0 0 0.5rem 0 !important;
|
||||
list-style: none;
|
||||
background-color: transparent;
|
||||
|
||||
.isekai-list-item {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
min-height: 3rem;
|
||||
padding: 0 1rem;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid rgba(0,0,0,.12);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0,0,0,.08);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.isekai-list-item-content {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
padding-top: 0.875rem;
|
||||
padding-bottom: 0.875rem;
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.isekai-list-item-title~.isekai-list-item-text {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.isekai-list-item-text {
|
||||
font-size: 0.875rem;
|
||||
opacity: 0.54;
|
||||
-webkit-line-clamp: 1;
|
||||
height: 1.25rem;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
<div class="isekai-card isekai-feed-list-card">
|
||||
<div class="card-header">
|
||||
<span class="card-header-text"><?=wfMessage('isekai-feed-list-title')->parse()?></span>
|
||||
</div>
|
||||
<div class="card-body-fluid">
|
||||
<div id="isekai-feed-list" :class="{ mounted: 'mounted' }">
|
||||
<div v-if="loading" class="loading">
|
||||
<div class="spinner">
|
||||
<div class="oo-ui-widget oo-ui-widget-enabled oo-ui-progressBarWidget-indeterminate oo-ui-progressBarWidget" aria-disabled="false" role="progressbar" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="oo-ui-progressBarWidget-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul v-else class="isekai-list">
|
||||
<a class="isekai-list-item" v-for="(feedItem, index) in feedList" :key="index" :href="feedItem.url">
|
||||
<div class="isekai-list-item-content">
|
||||
<div class="isekai-list-item-title">{{ feedItem.title }}</div>
|
||||
<div class="isekai-list-item-text">{{ feedItem.description }}</div>
|
||||
</div>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,96 +1,96 @@
|
||||
$(function(){
|
||||
var cardList = [];
|
||||
$('.isekai-preview-card').each(function(){
|
||||
//点击动画
|
||||
var animating = false;
|
||||
var mouseUp = false;
|
||||
var cardElem = $(this);
|
||||
cardElem.on('mousedown', function(){
|
||||
cardElem.addClass('mousedown');
|
||||
mouseUp = false;
|
||||
animating = true;
|
||||
setTimeout(() => {
|
||||
if(mouseUp){
|
||||
cardElem.removeClass('mousedown');
|
||||
}
|
||||
animating = false;
|
||||
}, 150);
|
||||
}).on('mouseup', function(){
|
||||
if(animating){
|
||||
mouseUp = true;
|
||||
} else {
|
||||
cardElem.removeClass('mousedown');
|
||||
}
|
||||
});
|
||||
//获取页面列表
|
||||
var pageTitle = cardElem.attr('data-title');
|
||||
if(pageTitle){
|
||||
cardList.push({
|
||||
title: pageTitle,
|
||||
element: cardElem,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//加载页面信息
|
||||
var titleList = [];
|
||||
var pageInfoList = {};
|
||||
cardList.forEach((item) => {
|
||||
var title = item.title;
|
||||
if(titleList.indexOf(title) === -1){
|
||||
titleList.push(title);
|
||||
}
|
||||
});
|
||||
var api = new mw.Api();
|
||||
|
||||
function setPreviews(pageInfoList){
|
||||
cardList.forEach((item) => {
|
||||
var title = item.title;
|
||||
var elem = item.element;
|
||||
//移除加载动画
|
||||
elem.find('.loading').remove();
|
||||
//查找数据
|
||||
if(title in pageInfoList){
|
||||
var info = pageInfoList[title];
|
||||
if(info.thumbnail){ //有缩略图
|
||||
elem.addClass('card-media');
|
||||
elem.find('.card-img').attr('src', info.thumbnail.source).show();
|
||||
}
|
||||
|
||||
console.log(info);
|
||||
elem.find('.card-content').text(info.extract);
|
||||
} else {
|
||||
elem.find('.card-content').text('页面不存在');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
api.get({
|
||||
action: 'query',
|
||||
prop: ['info', 'extracts', 'pageimages', 'revisions', 'info'],
|
||||
formatversion: 2,
|
||||
redirects: true,
|
||||
exintro: true,
|
||||
exchars: 150,
|
||||
explaintext: true,
|
||||
piprop: 'thumbnail',
|
||||
pithumbsize: 640,
|
||||
pilicense: 'any',
|
||||
rvprop: 'timestamp',
|
||||
inprop: 'url',
|
||||
titles: titleList,
|
||||
smaxage: 300,
|
||||
maxage: 300,
|
||||
uselang: 'content',
|
||||
}).done((data) => {
|
||||
if(data.query && data.query.pages && data.query.pages.length > 0){
|
||||
let pages = data.query.pages;
|
||||
pages.forEach((page) => {
|
||||
if(!page.missing){
|
||||
pageInfoList[page.title] = page;
|
||||
}
|
||||
});
|
||||
setPreviews(pageInfoList);
|
||||
}
|
||||
});
|
||||
$(function(){
|
||||
var cardList = [];
|
||||
$('.isekai-preview-card').each(function(){
|
||||
//点击动画
|
||||
var animating = false;
|
||||
var mouseUp = false;
|
||||
var cardElem = $(this);
|
||||
cardElem.on('mousedown', function(){
|
||||
cardElem.addClass('mousedown');
|
||||
mouseUp = false;
|
||||
animating = true;
|
||||
setTimeout(() => {
|
||||
if(mouseUp){
|
||||
cardElem.removeClass('mousedown');
|
||||
}
|
||||
animating = false;
|
||||
}, 150);
|
||||
}).on('mouseup', function(){
|
||||
if(animating){
|
||||
mouseUp = true;
|
||||
} else {
|
||||
cardElem.removeClass('mousedown');
|
||||
}
|
||||
});
|
||||
//获取页面列表
|
||||
var pageTitle = cardElem.attr('data-title');
|
||||
if(pageTitle){
|
||||
cardList.push({
|
||||
title: pageTitle,
|
||||
element: cardElem,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//加载页面信息
|
||||
var titleList = [];
|
||||
var pageInfoList = {};
|
||||
cardList.forEach((item) => {
|
||||
var title = item.title;
|
||||
if(titleList.indexOf(title) === -1){
|
||||
titleList.push(title);
|
||||
}
|
||||
});
|
||||
var api = new mw.Api();
|
||||
|
||||
function setPreviews(pageInfoList){
|
||||
cardList.forEach((item) => {
|
||||
var title = item.title;
|
||||
var elem = item.element;
|
||||
//移除加载动画
|
||||
elem.find('.loading').remove();
|
||||
//查找数据
|
||||
if(title in pageInfoList){
|
||||
var info = pageInfoList[title];
|
||||
if(info.thumbnail){ //有缩略图
|
||||
elem.addClass('card-media');
|
||||
elem.find('.card-img').attr('src', info.thumbnail.source).show();
|
||||
}
|
||||
|
||||
console.log(info);
|
||||
elem.find('.card-content').text(info.extract);
|
||||
} else {
|
||||
elem.find('.card-content').text('页面不存在');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
api.get({
|
||||
action: 'query',
|
||||
prop: ['info', 'extracts', 'pageimages', 'revisions', 'info'],
|
||||
formatversion: 2,
|
||||
redirects: true,
|
||||
exintro: true,
|
||||
exchars: 150,
|
||||
explaintext: true,
|
||||
piprop: 'thumbnail',
|
||||
pithumbsize: 640,
|
||||
pilicense: 'any',
|
||||
rvprop: 'timestamp',
|
||||
inprop: 'url',
|
||||
titles: titleList,
|
||||
smaxage: 300,
|
||||
maxage: 300,
|
||||
uselang: 'content',
|
||||
}).done((data) => {
|
||||
if(data.query && data.query.pages && data.query.pages.length > 0){
|
||||
let pages = data.query.pages;
|
||||
pages.forEach((page) => {
|
||||
if(!page.missing){
|
||||
pageInfoList[page.title] = page;
|
||||
}
|
||||
});
|
||||
setPreviews(pageInfoList);
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -1,119 +1,119 @@
|
||||
@text-size: 1em;
|
||||
|
||||
.isekai-preview-card-wrapper {
|
||||
padding: .5rem;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
width: 33.3333%;
|
||||
}
|
||||
}
|
||||
|
||||
.isekai-preview-card {
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
background-clip: border-box;
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
transform: scale(1);
|
||||
transition: box-shadow 0.25s cubic-bezier(.4,0,.2,1), transform 0.15s cubic-bezier(.4,0,.2,1);
|
||||
will-change: box-shadow, transform;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
|
||||
.card-header {
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.card-header-title {
|
||||
padding: 1rem 1.2rem;
|
||||
|
||||
.card-header-title-text {
|
||||
font-weight: bold;
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.2rem;
|
||||
}
|
||||
|
||||
.card-header-subtitle-text {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.6rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1 1 auto;
|
||||
|
||||
.card-content {
|
||||
padding: 0rem 1rem 1.5rem;
|
||||
font-size: @text-size;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
|
||||
.loader {
|
||||
animation: isekai-spin 1s infinite linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-media {
|
||||
.card-header {
|
||||
.card-header-title {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
background: rgba(0,0,0,.2);
|
||||
padding: 1.4rem 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.card-img {
|
||||
max-height: 15rem;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.card-content {
|
||||
padding: 1rem 1rem 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mousedown {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes isekai-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@text-size: 1em;
|
||||
|
||||
.isekai-preview-card-wrapper {
|
||||
padding: .5rem;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
width: 33.3333%;
|
||||
}
|
||||
}
|
||||
|
||||
.isekai-preview-card {
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
background-clip: border-box;
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
transform: scale(1);
|
||||
transition: box-shadow 0.25s cubic-bezier(.4,0,.2,1), transform 0.15s cubic-bezier(.4,0,.2,1);
|
||||
will-change: box-shadow, transform;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
|
||||
.card-header {
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.card-header-title {
|
||||
padding: 1rem 1.2rem;
|
||||
|
||||
.card-header-title-text {
|
||||
font-weight: bold;
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.2rem;
|
||||
}
|
||||
|
||||
.card-header-subtitle-text {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.6rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header-buttons {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1 1 auto;
|
||||
|
||||
.card-content {
|
||||
padding: 0rem 1rem 1.5rem;
|
||||
font-size: @text-size;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
|
||||
.loader {
|
||||
animation: isekai-spin 1s infinite linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-media {
|
||||
.card-header {
|
||||
.card-header-title {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
background: rgba(0,0,0,.2);
|
||||
padding: 1.4rem 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.card-img {
|
||||
max-height: 15rem;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.card-content {
|
||||
padding: 1rem 1rem 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mousedown {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes isekai-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<div class="isekai-preview-card-wrapper">
|
||||
<div class="isekai-preview-card card-media" data-title="<?php echo $title; ?>">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">
|
||||
<div class="card-header-title-text"><?php echo $displayTitle; ?></div>
|
||||
<div class="card-header-subtitle-text"><?php echo $path; ?></div>
|
||||
</div>
|
||||
<img class="card-img" style="display: none;">
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-content">
|
||||
<div class="loading">
|
||||
<svg version="1.1" class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
|
||||
<path fill="#0088dd" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="isekai-preview-card-wrapper">
|
||||
<div class="isekai-preview-card card-media" data-title="<?=$title?>">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">
|
||||
<div class="card-header-title-text"><?=$displayTitle?></div>
|
||||
<div class="card-header-subtitle-text"><?=$path?></div>
|
||||
</div>
|
||||
<img class="card-img" style="display: none;">
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-content">
|
||||
<div class="loading">
|
||||
<svg version="1.1" class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
|
||||
<path fill="#0088dd" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,21 +1,21 @@
|
||||
a {
|
||||
&.tile-small,
|
||||
&.tile-medium,
|
||||
&.tile-wide,
|
||||
&.tile-large,
|
||||
&.tile-app {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.tiles-group {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.tiles-group::before {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.tiles-group[data-group-title] {
|
||||
margin-top: 3em;
|
||||
a {
|
||||
&.tile-small,
|
||||
&.tile-medium,
|
||||
&.tile-wide,
|
||||
&.tile-large,
|
||||
&.tile-app {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.tiles-group {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.tiles-group::before {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.tiles-group[data-group-title] {
|
||||
margin-top: 3em;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,145 +1,145 @@
|
||||
const registerModule = require('../moduleRegister');
|
||||
|
||||
class DiscoverWidget {
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
const registerModule = require('../moduleRegister');
|
||||
|
||||
class DiscoverWidget {
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
registerModule('ui.DiscoverWidget', DiscoverWidget);
|
||||
@ -1,19 +1,19 @@
|
||||
function register(namespace, func) {
|
||||
let nsList = namespace.split('.');
|
||||
|
||||
if(!('isekai' in window)){
|
||||
window.isekai = {};
|
||||
}
|
||||
|
||||
let obj = window.isekai;
|
||||
for(var i = 0; i < nsList.length - 1; i ++){
|
||||
let ns = nsList[i];
|
||||
if(!(ns in obj)){
|
||||
obj[ns] = {};
|
||||
}
|
||||
obj = obj[ns];
|
||||
}
|
||||
obj[nsList[i]] = func;
|
||||
}
|
||||
|
||||
function register(namespace, func) {
|
||||
let nsList = namespace.split('.');
|
||||
|
||||
if(!('isekai' in window)){
|
||||
window.isekai = {};
|
||||
}
|
||||
|
||||
let obj = window.isekai;
|
||||
for(var i = 0; i < nsList.length - 1; i ++){
|
||||
let ns = nsList[i];
|
||||
if(!(ns in obj)){
|
||||
obj[ns] = {};
|
||||
}
|
||||
obj = obj[ns];
|
||||
}
|
||||
obj[nsList[i]] = func;
|
||||
}
|
||||
|
||||
module.exports = register;
|
||||
@ -1,27 +1,27 @@
|
||||
const registerModule = require('../moduleRegister');
|
||||
|
||||
class PreviewCardWidget {
|
||||
constructor(dom) {
|
||||
this.baseDom = dom;
|
||||
this.pageName = null;
|
||||
this.api = new mw.Api();
|
||||
|
||||
this.loaded = false;
|
||||
|
||||
this.initDom();
|
||||
}
|
||||
|
||||
initDom() {
|
||||
this.pageName = this.baseDom.attr('data-title');
|
||||
|
||||
this.title = this.baseDom.find('card-title');
|
||||
}
|
||||
|
||||
load() {
|
||||
if(this.loaded) return;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const registerModule = require('../moduleRegister');
|
||||
|
||||
class PreviewCardWidget {
|
||||
constructor(dom) {
|
||||
this.baseDom = dom;
|
||||
this.pageName = null;
|
||||
this.api = new mw.Api();
|
||||
|
||||
this.loaded = false;
|
||||
|
||||
this.initDom();
|
||||
}
|
||||
|
||||
initDom() {
|
||||
this.pageName = this.baseDom.attr('data-title');
|
||||
|
||||
this.title = this.baseDom.find('card-title');
|
||||
}
|
||||
|
||||
load() {
|
||||
if(this.loaded) return;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
registerModule('ui.PreviewCardWidget', PreviewCardWidget);
|
||||
@ -1,63 +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');
|
||||
|
||||
@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');
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,314 +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;
|
||||
@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;
|
||||
|
||||
@ -1,482 +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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue