mirror of
https://git.beihong.wang/wangbeihong/blog-source.git
synced 2026-04-28 00:49:46 +08:00
initial
This commit is contained in:
root
22
usr/plugins/MarkdownParse/LICENSE.md
Executable file
22
usr/plugins/MarkdownParse/LICENSE.md
Executable file
@@ -0,0 +1,22 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) Taylor Otwell
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
|
||||
112
usr/plugins/MarkdownParse/Plugin.php
Executable file
112
usr/plugins/MarkdownParse/Plugin.php
Executable file
@@ -0,0 +1,112 @@
|
||||
<?php
|
||||
|
||||
namespace TypechoPlugin\MarkdownParse;
|
||||
|
||||
require_once 'phar://' . __DIR__ . '/vendor.phar/MarkdownParse.php';
|
||||
|
||||
use Typecho\Plugin\PluginInterface;
|
||||
use Typecho\Widget\Helper\Form;
|
||||
use Widget\Options;
|
||||
|
||||
/**
|
||||
* 符合 CommonMark 和 GFM（GitHub-Flavored Markdown）规范的 Markdown 解析插件，强大而丰富的功能助你在不同平台上展现一致的出色
|
||||
*
|
||||
* @author mrgeneral
|
||||
* @package MarkdownParse
|
||||
* @version 2.6.0
|
||||
* @link https://www.chengxiaobai.cn/
|
||||
*/
|
||||
class Plugin implements PluginInterface
|
||||
{
|
||||
const RADIO_VALUE_DISABLE = 0;
|
||||
const RADIO_VALUE_AUTO = 1;
|
||||
const RADIO_VALUE_FORCE = 2;
|
||||
|
||||
const CDN_SOURCE_DEFAULT = 'baomitu';
|
||||
const CDN_SOURCE_MERMAID = [
|
||||
'jsDelivr' => 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs',
|
||||
'cdnjs' => 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs',
|
||||
'baomitu' => 'https://lib.baomitu.com/mermaid/10.7.0/mermaid.esm.min.mjs'
|
||||
];
|
||||
const CDN_SOURCE_MATHJAX = [
|
||||
'jsDelivr' => 'https://cdn.jsdelivr.net/npm/mathjax/es5/tex-mml-chtml.min.js',
|
||||
'cdnjs' => 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js',
|
||||
'baomitu' => 'https://lib.baomitu.com/mathjax/latest/es5/tex-mml-chtml.min.js'
|
||||
];
|
||||
|
||||
public static function activate()
|
||||
{
|
||||
\Typecho\Plugin::factory('\Widget\Base\Contents')->markdown = [__CLASS__, 'parse'];
|
||||
\Typecho\Plugin::factory('\Widget\Base\Comments')->markdown = [__CLASS__, 'parse'];
|
||||
\Typecho\Plugin::factory('Widget_Archive')->footer = [__CLASS__, 'resourceLink'];
|
||||
}
|
||||
|
||||
public static function deactivate()
|
||||
{
|
||||
// TODO: Implement deactivate() method.
|
||||
}
|
||||
|
||||
public static function config(Form $form)
|
||||
{
|
||||
$elementToc = new Form\Element\Radio('is_available_toc', [self::RADIO_VALUE_DISABLE => _t('不解析'), self::RADIO_VALUE_AUTO => _t('解析')], self::RADIO_VALUE_AUTO, _t('是否解析 [TOC] 语法（符合 HTML 规范，无需 JS 支持）'), _t('开会后支持 [TOC] 语法来生成目录'));
|
||||
$form->addInput($elementToc);
|
||||
|
||||
$elementMermaid = new Form\Element\Radio('is_available_mermaid', [self::RADIO_VALUE_DISABLE => _t('不开启'), self::RADIO_VALUE_AUTO => _t('开启（按需加载）'), self::RADIO_VALUE_FORCE => _t('开启（每次加载，pjax 主题建议选择此选项）')], self::RADIO_VALUE_AUTO, _t('是否开启 Mermaid 支持（支持自动识别，按需渲染，无需担心引入冗余资源）'), _t('开启后支持解析并渲染 <a href="https://mermaid-js.github.io/mermaid/#/">Mermaid</a>'));
|
||||
$form->addInput($elementMermaid);
|
||||
|
||||
$elementMermaidTheme = new Form\Element\Radio('mermaid_theme', ['default' => _t('默认（default）'), 'neutral' => _t('墨水（neutral）'), 'dark' => _t('暗黑（dark）'), 'forest' => _t('森林绿（forest）')], 'default', _t('Mermaid 主题颜色'), _t('可以去这里 <a href="https://mermaid.live/edit">实时编辑器</a>调整主题配置看下效果'));
|
||||
$form->addInput($elementMermaidTheme);
|
||||
|
||||
$elementMathJax = new Form\Element\Radio('is_available_mathjax', [self::RADIO_VALUE_DISABLE => _t('不开启'), self::RADIO_VALUE_AUTO => _t('开启（按需加载）'), self::RADIO_VALUE_FORCE => _t('开启（每次加载，pjax 主题建议选择此选项）')], self::RADIO_VALUE_AUTO, _t('是否开启 MathJax 支持（支持自动识别，按需渲染，无需担心引入冗余资源）'), _t('开启后支持解析并渲染 <a href="https://www.mathjax.org/">MathJax</a>'));
|
||||
$form->addInput($elementMathJax);
|
||||
|
||||
$elementCDNSource = new Form\Element\Radio('cdn_source', array_combine(array_keys(self::CDN_SOURCE_MERMAID), array_map('_t', array_keys(self::CDN_SOURCE_MERMAID))), self::CDN_SOURCE_DEFAULT, _t('静态资源 CDN'), _t('jsDelivr 默认使用最新版本'));
|
||||
$form->addInput($elementCDNSource);
|
||||
|
||||
$elementInternalHosts = new Form\Element\Text('internal_hosts', null, '', _t('设置内部链接'), _t('默认为本站点地址，支持正则表达式("/(^|\.)example\.com$/")，多个可用英文逗号分隔。<br/>外部链接解析策略：默认在新窗口中打开，并加上 "noopener noreferrer" 属性'));
|
||||
$form->addInput($elementInternalHosts);
|
||||
|
||||
$elementHelper = new Form\Element\Radio('show_help_info', [], self::RADIO_VALUE_DISABLE, _t('<a href="https://www.chengxiaobai.cn/php/markdown-parser-library.html/">点击查看更新信息</a>'), _t('<a href="https://www.chengxiaobai.cn/record/markdown-concise-grammar-manual.html/">点击查看语法手册</a>'));
|
||||
$form->addInput($elementHelper);
|
||||
}
|
||||
|
||||
public static function personalConfig(Form $form)
|
||||
{
|
||||
// TODO: Implement personalConfig() method.
|
||||
}
|
||||
|
||||
public static function parse($text)
|
||||
{
|
||||
$markdownParser = MarkdownParse::getInstance();
|
||||
|
||||
$markdownParser->setIsTocEnable((bool)Options::alloc()->plugin('MarkdownParse')->is_available_toc);
|
||||
$markdownParser->setInternalHosts((string)Options::alloc()->plugin('MarkdownParse')->internal_hosts ?: parse_url(Options::alloc()->siteUrl, PHP_URL_HOST));
|
||||
|
||||
return $markdownParser->parse($text);
|
||||
}
|
||||
|
||||
public static function resourceLink()
|
||||
{
|
||||
$markdownParser = MarkdownParse::getInstance();
|
||||
$configMermaid = (int)Options::alloc()->plugin('MarkdownParse')->is_available_mermaid;
|
||||
$configLaTex = (int)Options::alloc()->plugin('MarkdownParse')->is_available_mathjax;
|
||||
$configCDN = (string)Options::alloc()->plugin('MarkdownParse')->cdn_source;
|
||||
$isAvailableMermaid = $configMermaid === self::RADIO_VALUE_FORCE || ($markdownParser->getIsNeedMermaid() && $configMermaid === self::RADIO_VALUE_AUTO);
|
||||
$isAvailableMathjax = $configLaTex === self::RADIO_VALUE_FORCE || ($markdownParser->getIsNeedLaTex() && $configLaTex === self::RADIO_VALUE_AUTO);
|
||||
|
||||
$resourceContent = '';
|
||||
|
||||
if ($isAvailableMermaid) {
|
||||
$resourceContent .= sprintf('<script type="module">import mermaid from "%s";',self::CDN_SOURCE_MERMAID[$configCDN] ?: self::CDN_SOURCE_MERMAID[self::CDN_SOURCE_DEFAULT]);
|
||||
$resourceContent .= sprintf('mermaid.initialize({ startOnLoad: true,theme:"%s"});</script>', (string)Options::alloc()->plugin('MarkdownParse')->mermaid_theme ?: 'default');
|
||||
}
|
||||
|
||||
if ($isAvailableMathjax) {
|
||||
$resourceContent .= '<script type="text/javascript">(function(){MathJax={loader: {load: [\'[tex]/gensymb\']},tex:{inlineMath:[[\'$\',\'$\'],[\'\\\\(\',\'\\\\)\']],packages: {\'[+]\': [\'gensymb\']}}}})();</script>';
|
||||
$resourceContent .= '<script defer src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=es6"></script>';
|
||||
$resourceContent .= sprintf('<script id="MathJax-script" defer type="text/javascript" src="%s"></script>', self::CDN_SOURCE_MATHJAX[$configCDN] ?: self::CDN_SOURCE_MATHJAX[self::CDN_SOURCE_DEFAULT]);
|
||||
}
|
||||
|
||||
echo $resourceContent;
|
||||
}
|
||||
}
|
||||
70
usr/plugins/MarkdownParse/README.md
Executable file
70
usr/plugins/MarkdownParse/README.md
Executable file
@@ -0,0 +1,70 @@
|
||||
Markdown Plugin for Typecho
|
||||
=========================
|
||||
|
||||
MarkdownParse 是一款基于 [league/commonmark](https://commonmark.thephpleague.com) 的 Typecho Markdown 解析插件，它的特色在于完美符合 [CommonMark](https://spec.commonmark.org) 和 GFM（[GitHub-Flavored Markdown](https://github.github.com/gfm/)）规范，不仅可以为你提供强大而丰富的功能，同时也能确保你的内容在不同平台上都能展现一致的出色效果。
|
||||
|
||||
本插件除了支持 CommonMark 和 GFM 规范内提到的功能（目录、表格、任务列表、脚标等等），MarkdownParse 还具有以下额外特性：
|
||||
|
||||
1. **Mermaid 语法支持：** 可以利用 Mermaid 语法轻松创建各种图表
|
||||
2. **MathJax 数学公式渲染：** 支持使用 MathJax 渲染数学公式
|
||||
3. **智能资源加载：** 根据实际渲染需求，能够智能识别是否加载渲染所需资源，无需担心引入冗余资源
|
||||
4. **图片延迟加载：** 支持浏览器原生的图片延迟加载技术，[MDN-Lazy loading](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading)
|
||||
5. **文本高亮：** 通过 `<mark>` HTML 标签实现文本高亮效果，[MDN-Mark](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark)
|
||||
|
||||
## 环境要求
|
||||
|
||||
* Typecho 1.2.0 or higher
|
||||
* PHP 8.1 or higher
|
||||
|
||||
## 安装
|
||||
|
||||
1. [下载这个插件](https://github.com/mrgeneralgoo/typecho-markdown/releases)
|
||||
2. 修改文件夹的名字为 "MarkdownParse"
|
||||
3. 添加到你的项目中并启用它
|
||||
|
||||
## 配置页面
|
||||
|
||||
|
||||
|
||||
## 报告问题
|
||||
|
||||
[你可以直接点击这里提出你的问题](https://github.com/mrgeneralgoo/typecho-markdown/issues/new)
|
||||
|
||||
## 语法示例
|
||||
|
||||
https://www.chengxiaobai.cn/record/markdown-concise-grammar-manual.html
|
||||
|
||||
------
|
||||
|
||||
MarkdownParse is a Typecho Markdown parsing plugin based on [league/commonmark](https://commonmark.thephpleague.com). Its feature lies in its perfect compliance with [CommonMark](https://spec.commonmark.org) and GFM ([GitHub-Flavored Markdown](https://github.github.com/gfm/)) specifications. It not only provides you with powerful and abundant functions, but also ensures consistent outstanding effects of your content on different platforms.
|
||||
|
||||
In addition to the functions mentioned in the CommonMark and GFM specifications (table of contents, tables, task lists, footnotes, etc.), MarkdownParse also has the following additional features:
|
||||
|
||||
1. **Mermaid syntax support:** Easily create various charts using Mermaid syntax
|
||||
2. **MathJax formula rendering:** Supports rendering mathematical formulas using MathJax
|
||||
3. **Intelligent resource loading:** According to actual rendering needs, it can intelligently identify whether to load required rendering resources without worrying about introducing redundant resources
|
||||
4. **Image lazy loading:** Supports native image lazy loading technology in browsers, [MDN-Lazy loading](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading)
|
||||
5. **Text highlight:** Realize text highlight effect through `<mark>` HTML tag, [MDN-Mark](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark)
|
||||
|
||||
## Requirements
|
||||
|
||||
* Typecho 1.2.0 or higher
|
||||
* PHP 8.1 or higher
|
||||
|
||||
## Installation
|
||||
|
||||
1. [Download this plugin](https://github.com/mrgeneralgoo/typecho-markdown/releases)
|
||||
2. Rename the folder to "MarkdownParse"
|
||||
3. Add it to your project and activate it
|
||||
|
||||
## Configuration
|
||||
|
||||
|
||||
|
||||
## Reporting Issues
|
||||
|
||||
[You can click here directly to create an issue](https://github.com/mrgeneralgoo/typecho-markdown/issues/new)
|
||||
|
||||
## Example
|
||||
|
||||
https://www.chengxiaobai.cn/record/markdown-concise-grammar-manual.html
|
||||
BIN
usr/plugins/MarkdownParse/vendor.phar
Executable file
BIN
usr/plugins/MarkdownParse/vendor.phar
Executable file
Binary file not shown.
BIN
usr/themes/HarmonyHues-backup-2026-03-03.tar.gz
Normal file
BIN
usr/themes/HarmonyHues-backup-2026-03-03.tar.gz
Normal file
Binary file not shown.
64
usr/themes/HarmonyHues/404.php
Executable file
64
usr/themes/HarmonyHues/404.php
Executable file
@@ -0,0 +1,64 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* 404页面
|
||||
*
|
||||
* @author 星语社长
|
||||
* @link https://biibii.cn
|
||||
* @update 2024-7-6 18:00:04
|
||||
*/
|
||||
if (! defined('__TYPECHO_ROOT_DIR__')) {
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
<?php $this->need('components/header.php'); ?>
|
||||
<style>
|
||||
.error-btn {
|
||||
color: var(--font-color-main);
|
||||
background-image: var(--gradient-45deg);
|
||||
box-shadow: var(--shadow-nav);
|
||||
border: var(--border-solid-main);
|
||||
border-radius: var(--border-radius-xlarge);
|
||||
}
|
||||
|
||||
.error-btn:hover {
|
||||
box-shadow: var(--shadow-inset-box);
|
||||
}
|
||||
</style>
|
||||
<main class="container my-5" style="height: calc(100vh - 260px);">
|
||||
<div class="card p-4">
|
||||
<div style="height: 15rem;">
|
||||
<svg viewBox="0 0 1877 1024" width="100%" height="100%">
|
||||
<path
|
||||
d="M1305.6 76.8l42.666667 25.6 69.12-41.813333-58.88 46.933333L1408 136.533333l42.666667-102.4zM1356.8 110.933333v34.133334l18.773333-22.186667z"
|
||||
fill="#D9D9D9"></path>
|
||||
<path
|
||||
d="M1860.266667 909.653333c0 46.933333-403.626667 71.68-911.36 71.68S17.066667 957.44 17.066667 909.653333C17.066667 862.72 431.786667 793.6 939.52 793.6S1860.266667 862.72 1860.266667 909.653333z"
|
||||
fill="#868DA0"></path>
|
||||
<path d="M1169.066667 802.133333l-221.866667 162.133334-253.44-165.546667L947.2 785.066667z" fill="#4D4D4D">
|
||||
</path>
|
||||
<path
|
||||
d="M742.4 281.6v477.866667c0 18.773333 15.36 34.133333 34.133333 34.133333h341.333334c18.773333 0 34.133333-15.36 34.133333-34.133333V281.6c0-18.773333-15.36-34.133333-34.133333-34.133333H776.533333c-18.773333 0-34.133333 15.36-34.133333 34.133333z m341.333333 443.733333H810.666667V315.733333h273.066666v409.6z"
|
||||
fill="#C9CCD6"></path>
|
||||
<path d="M1160.533333 563.2l-213.333333 93.866667v281.6l213.333333-136.533334z" fill="#BFBFBF">
|
||||
</path>
|
||||
<path d="M733.866667 563.2v238.933333l213.333333 136.533334V657.066667L733.866667 563.2z" fill="#A6A6A6">
|
||||
</path>
|
||||
<path d="M947.2 657.066667V512l213.333333 51.2z" fill="#737373"></path>
|
||||
<path
|
||||
d="M843.093333 762.026667L640 634.026667 733.866667 563.2l213.333333 93.866667zM855.893333 816.64l-3.413333-8.533333-2.56-1.706667-2.56 4.266667s-2.56-4.266667-3.413333-6.826667l-1.706667-0.853333c0 1.706667-0.853333 4.266667-0.853333 4.266666l-1.706667-5.973333-7.68-4.266667-5.973333 2.56-1.706667-6.826666-1.706667 6.826666-3.413333-9.386666-1.706667-0.853334-0.853333 3.413334v6.826666l-1.706667-3.413333-3.413333-9.386667-0.853333-1.706666v62.293333l51.2 34.133333v-67.413333l-2.56-1.706667-3.413334 4.266667zM1051.306667 762.026667l203.093333-128-93.866667-70.826667-213.333333 93.866667z"
|
||||
fill="#D9D9D9"></path>
|
||||
<path d="M947.2 657.066667L733.866667 563.2l213.333333-51.2z" fill="#8C8C8C"></path>
|
||||
<path
|
||||
d="M188.586667 733.866667H443.733333v136.533333c0 18.773333 15.36 34.133333 34.133334 34.133333s34.133333-15.36 34.133333-34.133333V733.866667h68.266667c18.773333 0 34.133333-15.36 34.133333-34.133334s-15.36-34.133333-34.133333-34.133333h-68.266667V204.8c0-18.773333-15.36-34.133333-34.133333-34.133333s-29.866667 17.066667-29.866667 17.066666l-290.133333 494.08c-9.386667 16.213333-4.266667 36.693333 11.946666 46.933334 9.386667 5.12 18.773333 5.12 18.773334 5.12z m58.026666-68.266667L443.733333 330.24V665.6H246.613333zM1297.92 733.866667H1553.066667v136.533333c0 18.773333 15.36 34.133333 34.133333 34.133333s34.133333-15.36 34.133333-34.133333V733.866667h68.266667c18.773333 0 34.133333-15.36 34.133333-34.133334s-15.36-34.133333-34.133333-34.133333h-68.266667V204.8c0-18.773333-15.36-34.133333-34.133333-34.133333s-29.866667 17.066667-29.866667 17.066666l-290.133333 494.08c-9.386667 16.213333-4.266667 36.693333 11.946667 46.933334 9.386667 5.12 18.773333 5.12 18.773333 5.12z m58.026667-68.266667L1553.066667 330.24V665.6h-197.12z"
|
||||
fill="#C9CCD6"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-center my-4">
|
||||
<h2>404 - <?php _e('页面没找到'); ?></h2>
|
||||
<p><?php _e('你想查看的页面已被转移或删除了'); ?></p>
|
||||
<a class="error-btn d-inline-block my-4 py-2 px-3" href="/" role="button" target="_self"><?php _e('回到首页'); ?></a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<?php $this->need('components/footer.php'); ?>
|
||||
97
usr/themes/HarmonyHues/Atheme.php
Executable file
97
usr/themes/HarmonyHues/Atheme.php
Executable file
@@ -0,0 +1,97 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* 关于主题
|
||||
*
|
||||
* @author 星语社长
|
||||
* @link https://biibii.cn
|
||||
* @update 2024-12-15 14:46:50
|
||||
* @package custom
|
||||
*/
|
||||
if (!defined('__TYPECHO_ROOT_DIR__')) {
|
||||
exit;
|
||||
}
|
||||
|
||||
$itemsArray = array(
|
||||
array('title' => '主题名称', 'content' => $this->title),
|
||||
array('title' => '主题作者', 'content' => '星语社长'),
|
||||
array('title' => '主题版本', 'content' => getVersion()),
|
||||
array('title' => '博客程序', 'content' => 'TYPECHO'),
|
||||
array('title' => '技术栈', 'content' => 'PHP、HTML、CSS、JS'),
|
||||
array('title' => '是否开放', 'content' => '<a href="https://github.com/wugeng20/HarmonyHuesTheme" target="_blank" title="HarmonyHues主题">GitHub下载</a>'),
|
||||
);
|
||||
|
||||
$this->need('components/header.php');
|
||||
?>
|
||||
<style type="text/css">
|
||||
.theme-main .theme-cover {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.theme-main .theme-text-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.theme-main .theme-text-content {
|
||||
font-size: 1.25rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
}
|
||||
</style>
|
||||
<!--主体st-->
|
||||
<main>
|
||||
<div class="container theme-main p-2">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-lg-12">
|
||||
<div class="p-1">
|
||||
<div class="card theme-cover">
|
||||
<img src="<?php echo getImgLink($this); ?>" class="img-fluid" alt="<?php $this->title() ?>">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php foreach ($itemsArray as $item): ?>
|
||||
<div class="col-6 col-lg-4">
|
||||
<div class="theme-item p-1">
|
||||
<div class="d-flex flex-column align-items-center card py-3">
|
||||
<span class="theme-text-title text-shadow-style font-weight-bold"><?php echo $item['title']; ?></span>
|
||||
<span class="theme-text-content"><?php echo $item['content']; ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<div class="col-lg-12">
|
||||
<!-- 文章内容st -->
|
||||
<!-- 文章st -->
|
||||
<div class="p-1 mt-2">
|
||||
<div class="post card card-body">
|
||||
<!-- 文章内容 -->
|
||||
<div class="post-content markdown-body" itemprop="articleBody"><?php $this->content(); ?></div>
|
||||
<!-- 版权声明 -->
|
||||
<div class="post-copyright mt-4 p-3">
|
||||
<div class="copyright-content">
|
||||
<div class="copyright-title">©版权申明</div>
|
||||
<p class="copyright-desc"><span class="ml-3"></span>- 本文由作者 <a
|
||||
href="<?php $this->author->permalink(); ?>"
|
||||
title="<?php $this->author(); ?>">@<?php $this->author(); ?></a>
|
||||
原创发布在<?php $this->options->title(); ?>站点。未经许可，禁止转载。</p>
|
||||
</div>
|
||||
<div class="copyright-svgname">
|
||||
<?php $this->options->svgName(); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 文章en -->
|
||||
<!--文章评论-->
|
||||
<?php $this->need('components/comments.php'); ?>
|
||||
<!-- 文章内容en -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!--主体end-->
|
||||
<?php $this->need('components/footer.php'); ?>
|
||||
52
usr/themes/HarmonyHues/README.md
Executable file
52
usr/themes/HarmonyHues/README.md
Executable file
@@ -0,0 +1,52 @@
|
||||
# [Typecho Harmony Hues](https://www.biibii.cn/ "Harmony Hues 主题")（和谐色调）主题
|
||||
|
||||
|
||||
|
||||
## 介绍
|
||||
|
||||
Typecho 主题-《HarmonyHues - 和谐色调》
|
||||
|
||||
- HarmonyHues主题的设计灵感源自自然界中的和谐之美
|
||||
- 这是一款类拟态风格的主题，为什么这样命名？（因为当时让GPT起几个简洁的主题名称，百度翻译一下-和谐色调，然后就选这个，后面才发现，来不及改了...）
|
||||
- 开发主题是为了简洁一点、自己开发能够更好的文章阅读和分享知识！（可以话来点 Star 支持一下）
|
||||
|
||||
主题预览链接：[BIIBII.CN](https://www.biibii.cn/)
|
||||
|
||||
## 功能
|
||||
|
||||
- 自适应布局（PC / 移动完美兼容）
|
||||
- 顶部导航栏多模式切换（全屏沉浸式 / Mini简约式）
|
||||
- 智能主题系统（深色模式 / 浅色模式 / 自动适配系统主题）
|
||||
- 视觉增强方案：支持图片懒加载 + 点击放大预览（Lightbox效果）
|
||||
- SEO优化：内置优化策略，轻松达成LightHouse 100分评级
|
||||
- 文章编辑：内置文章内插入视频、网盘下载、提示框、折叠框功能
|
||||
- 内置插件：代码高亮（支持多种语言）、回复邮件提醒、友情链接、sitemap、表情包等等（免插件）
|
||||
- 特色独立页面：我的装备、明信片留言等等
|
||||
- 特色侧边栏：时间一言、博客路牌、恶魔之眼、最新文章、最新评论等等
|
||||
- 持续更新支持，更多惊喜等你发现...
|
||||
|
||||
## 安装与食用
|
||||
|
||||
1. 下载主题压缩包，解压后上传至 Typecho 主题目录（`usr/themes/`）
|
||||
2. 【重要】把解压后的文件夹重命名为 `HarmonyHues`
|
||||
3. 登录 Typecho 后台，进入外观管理，启用主题即可
|
||||
4. 进入主题设置，根据需求进行配置
|
||||
|
||||
## 预览
|
||||
|
||||
|  |  |
|
||||
| ------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
|
||||
|
||||
## 联系
|
||||
|
||||
- 作者：[星语（G.E.N.G）](https://www.biibii.cn/about.html)
|
||||
- 官网：[BIIBII.CN](https://www.biibii.cn/)
|
||||
- 邮箱：[1431258805@qq.com](mailto:1431258805@qq.com)
|
||||
- 主题BUG反馈：[点击这里](https://www.biibii.cn/bugfeedback.html)
|
||||
|
||||
## 捐款
|
||||
|
||||
💖 开源之路充满挑战，每一份代码背后都是无数个日夜的坚持。如果您也珍视这个项目带来的价值，诚邀您以捐赠的方式为项目注入成长能量——您的每一份支持都将转化为更优质的功能、更稳定的维护和更长远的发展。
|
||||
|
||||
|  |  |
|
||||
| ---------------------------------------- | ------------------------------------------ |
|
||||
138
usr/themes/HarmonyHues/archive.php
Executable file
138
usr/themes/HarmonyHues/archive.php
Executable file
File diff suppressed because one or more lines are too long
549
usr/themes/HarmonyHues/assets/css/markdown-style.css
Executable file
549
usr/themes/HarmonyHues/assets/css/markdown-style.css
Executable file
@@ -0,0 +1,549 @@
|
||||
@charset "UTF-8";
|
||||
.markdown-body {
|
||||
word-break: break-all;
|
||||
/* table表格样式 */
|
||||
}
|
||||
|
||||
.markdown-body h1 {
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.markdown-body h1::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -0.15rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-image: linear-gradient(var(--color-primary-light-2), transparent);
|
||||
opacity: .5;
|
||||
border-radius: var(--border-radius-circle);
|
||||
transition: all .3s;
|
||||
z-index: -1;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.markdown-body h1::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
background-image: linear-gradient(var(--color-primary-light-1), transparent);
|
||||
opacity: .5;
|
||||
border-radius: var(--border-radius-circle);
|
||||
transition: all .3s;
|
||||
z-index: -1;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.markdown-body h1:hover::before {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.markdown-body h2 {
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.markdown-body h2::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -0.15rem;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
background-image: linear-gradient(var(--color-primary-light-2), transparent);
|
||||
opacity: .5;
|
||||
border-radius: var(--border-radius-circle);
|
||||
transition: all .3s;
|
||||
z-index: -1;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.markdown-body h2::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0.4375rem;
|
||||
height: 0.4375rem;
|
||||
background-image: linear-gradient(var(--color-primary-light-1), transparent);
|
||||
opacity: .5;
|
||||
border-radius: var(--border-radius-circle);
|
||||
transition: all .3s;
|
||||
z-index: -1;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.markdown-body h2:hover::before {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.markdown-body h3 {
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.markdown-body h3::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -0.15rem;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
background-image: linear-gradient(var(--color-primary-light-2), transparent);
|
||||
opacity: .5;
|
||||
border-radius: var(--border-radius-circle);
|
||||
transition: all .3s;
|
||||
z-index: -1;
|
||||
bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.markdown-body h3::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0.3125rem;
|
||||
height: 0.3125rem;
|
||||
background-image: linear-gradient(var(--color-primary-light-1), transparent);
|
||||
opacity: .5;
|
||||
border-radius: var(--border-radius-circle);
|
||||
transition: all .3s;
|
||||
z-index: -1;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.markdown-body h3:hover::before {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.markdown-body h4 {
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.markdown-body h5 {
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.markdown-body h6 {
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.markdown-body p {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.markdown-body a:not([data-fancybox]):not([data-links]):not([data-cloud]) {
|
||||
color: var(--color-primary);
|
||||
padding: 0 0.15rem;
|
||||
outline: 0;
|
||||
text-decoration: underline dotted 0.2ex;
|
||||
text-decoration-skip-ink: none;
|
||||
text-underline-offset: 0.5ex;
|
||||
-webkit-box-decoration-break: clone;
|
||||
box-decoration-break: clone;
|
||||
background: linear-gradient(var(--color-primary-light-5), var(--color-primary-light-5)) no-repeat bottom/100% 0;
|
||||
transition: background .3s;
|
||||
}
|
||||
|
||||
.markdown-body a:not([data-fancybox]):not([data-links]):not([data-cloud]):hover {
|
||||
text-decoration: underline;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.markdown-body blockquote,
|
||||
.markdown-body details,
|
||||
.markdown-body dl,
|
||||
.markdown-body ol,
|
||||
.markdown-body pre,
|
||||
.markdown-body table,
|
||||
.markdown-body ul {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.markdown-body ul,
|
||||
.markdown-body ol {
|
||||
padding-left: 2rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.markdown-body ul ul,
|
||||
.markdown-body ul ol,
|
||||
.markdown-body ol ul,
|
||||
.markdown-body ol ol {
|
||||
margin: 0;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.markdown-body ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.markdown-body ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.markdown-body img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
border-radius: var(--border-radius-base);
|
||||
object-fit: cover;
|
||||
cursor: zoom-in;
|
||||
cursor: -webkit-zoom-in;
|
||||
border: var(--border-solid-small);
|
||||
}
|
||||
|
||||
.markdown-body img.emoji-image {
|
||||
display: inline-block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.markdown-body blockquote {
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
line-height: 1.8;
|
||||
text-indent: 0;
|
||||
color: var(--font-color-main-transparent);
|
||||
border: var(--border-solid-small);
|
||||
border-radius: var(--border-radius-base);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.markdown-body blockquote:before, .markdown-body blockquote:after {
|
||||
position: absolute;
|
||||
font-family: Arial, serif;
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
color: var(--border-color-main);
|
||||
}
|
||||
|
||||
.markdown-body blockquote:before {
|
||||
content: "“";
|
||||
left: 1rem;
|
||||
top: -1.5rem;
|
||||
}
|
||||
|
||||
.markdown-body blockquote:after {
|
||||
content: "”";
|
||||
right: 1rem;
|
||||
bottom: -3rem;
|
||||
}
|
||||
|
||||
.markdown-body table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.markdown-body table th,
|
||||
.markdown-body table td {
|
||||
padding: 0.5rem 1rem;
|
||||
border-right: 1px solid rgba(230, 230, 240, 0.75);
|
||||
border-top: 1px solid rgba(230, 230, 240, 0.75);
|
||||
letter-spacing: 0;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.markdown-body table tr:nth-child(odd) {
|
||||
background-color: var(--overlay-color-light-1);
|
||||
}
|
||||
|
||||
.markdown-body table tr:nth-child(even) {
|
||||
background-color: var(--overlay-color-light-8);
|
||||
}
|
||||
|
||||
.markdown-body table tr:last-child th:first-child {
|
||||
border-left: 1px solid rgba(230, 230, 240, 0.75);
|
||||
border-top-left-radius: var(--border-radius-medium);
|
||||
}
|
||||
|
||||
.markdown-body table tr:last-child th:last-child {
|
||||
border-top-right-radius: var(--border-radius-medium);
|
||||
}
|
||||
|
||||
.markdown-body table tr:last-child td {
|
||||
border-bottom: 1px solid rgba(230, 230, 240, 0.75);
|
||||
}
|
||||
|
||||
.markdown-body table tr:last-child td:first-child {
|
||||
border-bottom-left-radius: var(--border-radius-medium);
|
||||
}
|
||||
|
||||
.markdown-body table tr:last-child td:last-child {
|
||||
border-bottom-right-radius: var(--border-radius-medium);
|
||||
}
|
||||
|
||||
.markdown-body table tr th {
|
||||
background-color: var(--bg-color-main-dark);
|
||||
color: var(--bg-color-main);
|
||||
}
|
||||
|
||||
.markdown-body table tr td:first-child {
|
||||
border-left: 1px solid rgba(230, 230, 240, 0.75);
|
||||
}
|
||||
|
||||
.markdown-body code:not([class^="lang-"]):not([class^="language-"]) {
|
||||
border-radius: 0.2rem;
|
||||
background-color: var(--color-primary-light-4);
|
||||
color: var(--color-primary);
|
||||
font-size: 1rem;
|
||||
padding: 0.15rem 0.3rem;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.markdown-body .pre-container {
|
||||
position: relative;
|
||||
border: var(--border-solid-small);
|
||||
border-radius: var(--border-radius-medium);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.markdown-body .pre-container .pre-header {
|
||||
position: relative;
|
||||
background-color: var(--bg-color-main);
|
||||
}
|
||||
|
||||
.markdown-body .pre-container .pre-header .pre-icon::before {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: var(--border-radius-circle);
|
||||
background: #fc625d;
|
||||
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.markdown-body .pre-container .pre-header .pre-copy {
|
||||
font-size: 0.85rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.markdown-body .pre-container pre {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
border-radius: unset;
|
||||
max-height: 30rem;
|
||||
}
|
||||
|
||||
.markdown-body .pre-container pre code {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.markdown-body .pre-container pre::-webkit-scrollbar {
|
||||
width: 4px !important;
|
||||
height: 4px !important;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.markdown-body hr {
|
||||
border: 0;
|
||||
padding: 0.15rem;
|
||||
background: repeating-linear-gradient(135deg, var(--border-color-main) 0px, var(--font-color-main-transparent) 1px, transparent 1px, transparent 6px);
|
||||
}
|
||||
|
||||
.markdown-body video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
border-radius: var(--border-radius-medium);
|
||||
border: var(--border-solid-small);
|
||||
}
|
||||
|
||||
.markdown-body iframe {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
border-radius: var(--border-radius-base);
|
||||
}
|
||||
|
||||
/* 短代码样式一些公共样式 */
|
||||
.short-code-card {
|
||||
position: relative;
|
||||
gap: 1rem;
|
||||
color: var(--font-color-main);
|
||||
text-decoration: none;
|
||||
width: 20rem;
|
||||
max-width: 100%;
|
||||
min-height: 4rem;
|
||||
overflow: hidden;
|
||||
margin: 1rem auto;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
background: var(--gradient-45deg);
|
||||
border-radius: var(--border-radius-medium);
|
||||
box-shadow: var(--shadow-box-small);
|
||||
border: var(--border-solid-small);
|
||||
}
|
||||
|
||||
.short-code-card:hover {
|
||||
box-shadow: var(--shadow-inset-box);
|
||||
}
|
||||
|
||||
.short-code-card img,
|
||||
.short-code-card svg {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin: 0;
|
||||
box-shadow: var(--shadow-nav);
|
||||
}
|
||||
|
||||
/* 短代码-文章Hint样式 */
|
||||
.hint-content {
|
||||
--hint-color: var(--success);
|
||||
--hint-bg: #e1efe5;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5rem;
|
||||
color: var(--hint-color);
|
||||
border: 1px solid var(--hint-bg);
|
||||
border-radius: var(--border-radius-base);
|
||||
background-color: var(--hint-bg);
|
||||
transition: all 0.3s ease-in-out;
|
||||
overflow: hidden;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.hint-content .iconfont {
|
||||
line-height: 2;
|
||||
color: var(--hint-color);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.hint-content.hint-info {
|
||||
--hint-color: var(--font-color-main);
|
||||
--hint-bg: #eee;
|
||||
}
|
||||
|
||||
.hint-content.hint-warning {
|
||||
--hint-color: var(--warning);
|
||||
--hint-bg: #fff7dc;
|
||||
}
|
||||
|
||||
.hint-content.hint-danger {
|
||||
--hint-color: var(--red);
|
||||
--hint-bg: #ffeaec;
|
||||
}
|
||||
|
||||
.hint-content:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
/* 短代码-文章链接样式 */
|
||||
.to-links-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.to-links-content a .to-links-text span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.to-links-content a .to-links-url,
|
||||
.to-links-content a .icon-lianjie {
|
||||
color: var(--font-color-muted);
|
||||
}
|
||||
|
||||
/* 短代码-网盘下载样式 */
|
||||
.cloud-download-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cloud-download-box .cloud-download-icon {
|
||||
flex-shrink: 0;
|
||||
background-color: var(--bg-color-main);
|
||||
border-radius: var(--border-radius-medium);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cloud-download-box .cloud-download-info {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cloud-download-box .cloud-download-info .cloud-download-title a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.cloud-download-box .cloud-download-info .cloud-download-password {
|
||||
display: inline-block;
|
||||
color: var(--font-color-main-light);
|
||||
}
|
||||
|
||||
.cloud-download-box .cloud-download-info .cloud-download-btn span {
|
||||
color: var(--font-color-main-transparent);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.cloud-download-box .cloud-download-info .cloud-download-btn a {
|
||||
background-color: var(--bg-color-primary);
|
||||
border-radius: var(--border-radius-medium);
|
||||
}
|
||||
|
||||
/* 折叠框样式 */
|
||||
.fold-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: var(--border-solid-small);
|
||||
background: var(--gradient-45deg);
|
||||
border-radius: var(--border-radius-medium);
|
||||
}
|
||||
|
||||
.fold-container .fold-header {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background: var(--widget-bg-gradient);
|
||||
}
|
||||
|
||||
.fold-container .fold-header::after {
|
||||
content: "+";
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.fold-container[open] .fold-header::after {
|
||||
content: "-";
|
||||
}
|
||||
1
usr/themes/HarmonyHues/assets/css/markdown-style.min.css
vendored
Executable file
1
usr/themes/HarmonyHues/assets/css/markdown-style.min.css
vendored
Executable file
File diff suppressed because one or more lines are too long
506
usr/themes/HarmonyHues/assets/css/markdown-style.scss
Executable file
506
usr/themes/HarmonyHues/assets/css/markdown-style.scss
Executable file
@@ -0,0 +1,506 @@
|
||||
// 变量
|
||||
$base-size: 0.25rem;
|
||||
$base-margin: 1rem;
|
||||
$base-font-size: 1rem;
|
||||
$base-line-height: 1.7;
|
||||
$base-font-weight: 700;
|
||||
$border-base: 1px solid rgba(230, 230, 240, .75);
|
||||
|
||||
// 定义一个 mixin 用于设置标题的公共样式
|
||||
@mixin heading-styles($size) {
|
||||
position: relative;
|
||||
margin-top: $base-margin;
|
||||
margin-bottom: $base-margin;
|
||||
font-size: $size * $base-font-size;
|
||||
font-weight: $base-font-weight;
|
||||
}
|
||||
|
||||
// 定义一个 mixin 用于设置标题前的装饰元素
|
||||
@mixin heading-decoration($width, $height, $bottom: 0) {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -0.15rem;
|
||||
width: $width;
|
||||
height: $height;
|
||||
background-image: linear-gradient(var(--color-primary-light-2), transparent);
|
||||
opacity: .5;
|
||||
border-radius: var(--border-radius-circle);
|
||||
transition: all .3s;
|
||||
z-index: -1;
|
||||
bottom: $bottom;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: $width / 4;
|
||||
height: $height / 4;
|
||||
background-image: linear-gradient(var(--color-primary-light-1), transparent);
|
||||
opacity: .5;
|
||||
border-radius: var(--border-radius-circle);
|
||||
transition: all .3s;
|
||||
z-index: -1;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
word-break: break-all; // 英文单词换行
|
||||
|
||||
// h标签
|
||||
h1 {
|
||||
@include heading-styles(2);
|
||||
@include heading-decoration($base-size * 8, $base-size * 8);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include heading-styles(1.5);
|
||||
@include heading-decoration($base-size * 7, $base-size * 7);
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include heading-styles(1.25);
|
||||
@include heading-decoration($base-size * 5, $base-size * 5, $base-size);
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include heading-styles(1.125);
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include heading-styles(1);
|
||||
}
|
||||
|
||||
h6 {
|
||||
@include heading-styles(0.875);
|
||||
}
|
||||
|
||||
// p标签
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: $base-font-size;
|
||||
line-height: $base-line-height;
|
||||
}
|
||||
|
||||
// 链接a标签
|
||||
a:not([data-fancybox]):not([data-links]):not([data-cloud]) {
|
||||
color: var(--color-primary);
|
||||
padding: 0 0.15rem;
|
||||
outline: 0;
|
||||
text-decoration: underline dotted 0.2ex;
|
||||
text-decoration-skip-ink: none;
|
||||
text-underline-offset: 0.5ex;
|
||||
-webkit-box-decoration-break: clone;
|
||||
box-decoration-break: clone;
|
||||
background: linear-gradient(var(--color-primary-light-5), var(--color-primary-light-5)) no-repeat bottom/100% 0;
|
||||
transition: background .3s;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote,
|
||||
details,
|
||||
dl,
|
||||
ol,
|
||||
pre,
|
||||
table,
|
||||
ul {
|
||||
margin-top: $base-size * 2;
|
||||
margin-bottom: $base-size * 2;
|
||||
}
|
||||
|
||||
// ul/ol标签
|
||||
ul,
|
||||
ol {
|
||||
padding-left: $base-size * 8;
|
||||
line-height: $base-line-height;
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 0;
|
||||
padding-left: $base-size * 4;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
// 图片img标签
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
margin-top: $base-size;
|
||||
margin-bottom: $base-size;
|
||||
border-radius: var(--border-radius-base);
|
||||
object-fit: cover;
|
||||
cursor: zoom-in;
|
||||
cursor: -webkit-zoom-in;
|
||||
border: var(--border-solid-small);
|
||||
|
||||
&.emoji-image {
|
||||
display: inline-block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 引用blockquote标签
|
||||
blockquote {
|
||||
position: relative;
|
||||
padding: $base-size * 8;
|
||||
line-height: 1.8;
|
||||
text-indent: 0;
|
||||
color: var(--font-color-main-transparent);
|
||||
border: var(--border-solid-small);
|
||||
border-radius: var(--border-radius-base);
|
||||
overflow: hidden;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
font-family: Arial, serif;
|
||||
font-size: $base-font-size * 4;
|
||||
font-weight: $base-font-weight;
|
||||
color: var(--border-color-main);
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "“";
|
||||
left: 1rem;
|
||||
top: -1.5rem;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "”";
|
||||
right: 1rem;
|
||||
bottom: -3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* table表格样式 */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: $base-size * 2 $base-size * 4;
|
||||
border-right: $border-base;
|
||||
border-top: $border-base;
|
||||
letter-spacing: 0;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:nth-child(odd) {
|
||||
background-color: var(--overlay-color-light-1);
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: var(--overlay-color-light-8);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
th {
|
||||
&:first-child {
|
||||
border-left: $border-base;
|
||||
border-top-left-radius: var(--border-radius-medium);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: var(--border-radius-medium);
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: $border-base;
|
||||
|
||||
&:first-child {
|
||||
border-bottom-left-radius: var(--border-radius-medium);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: var(--border-radius-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: var(--bg-color-main-dark);
|
||||
color: var(--bg-color-main);
|
||||
}
|
||||
|
||||
td {
|
||||
&:first-child {
|
||||
border-left: $border-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 代码code标签
|
||||
code:not([class^="lang-"]):not([class^="language-"]) {
|
||||
border-radius: 0.2rem;
|
||||
background-color: var(--color-primary-light-4);
|
||||
color: var(--color-primary);
|
||||
font-size: $base-font-size;
|
||||
padding: 0.15rem 0.3rem;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
// 代码pre标签
|
||||
.pre-container {
|
||||
position: relative;
|
||||
border: var(--border-solid-small);
|
||||
border-radius: var(--border-radius-medium);
|
||||
overflow: hidden;
|
||||
|
||||
.pre-header {
|
||||
position: relative;
|
||||
background-color: var(--bg-color-main);
|
||||
|
||||
.pre-icon::before {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: var(--border-radius-circle);
|
||||
background: #fc625d;
|
||||
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pre-copy {
|
||||
font-size: 0.85rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
border-radius: unset;
|
||||
max-height: $base-size * 120;
|
||||
|
||||
code {
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px !important;
|
||||
height: 4px !important;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// hr标签
|
||||
hr {
|
||||
border: 0;
|
||||
padding: 0.15rem;
|
||||
background: repeating-linear-gradient(135deg, var(--border-color-main) 0px, var(--font-color-main-transparent) 1px, transparent 1px, transparent 6px);
|
||||
}
|
||||
|
||||
// 视频video标签
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
border-radius: var(--border-radius-medium);
|
||||
border: var(--border-solid-small);
|
||||
}
|
||||
|
||||
// iframe标签
|
||||
iframe {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
border-radius: var(--border-radius-base);
|
||||
}
|
||||
}
|
||||
|
||||
/* 短代码样式一些公共样式 */
|
||||
.short-code-card {
|
||||
position: relative;
|
||||
gap: 1rem;
|
||||
color: var(--font-color-main);
|
||||
text-decoration: none;
|
||||
width: 20rem;
|
||||
max-width: 100%;
|
||||
min-height: 4rem;
|
||||
overflow: hidden;
|
||||
margin: 1rem auto;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
background: var(--gradient-45deg);
|
||||
border-radius: var(--border-radius-medium);
|
||||
box-shadow: var(--shadow-box-small);
|
||||
border: var(--border-solid-small);
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-inset-box);
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin: 0;
|
||||
box-shadow: var(--shadow-nav);
|
||||
}
|
||||
}
|
||||
|
||||
/* 短代码-文章Hint样式 */
|
||||
.hint-content {
|
||||
--hint-color: var(--success);
|
||||
--hint-bg: #e1efe5;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5rem;
|
||||
color: var(--hint-color);
|
||||
border: 1px solid var(--hint-bg);
|
||||
border-radius: var(--border-radius-base);
|
||||
background-color: var(--hint-bg);
|
||||
transition: all 0.3s ease-in-out;
|
||||
overflow: hidden;
|
||||
margin: 0.5rem 0;
|
||||
|
||||
// 图标样式
|
||||
.iconfont {
|
||||
line-height: 2;
|
||||
color: var(--hint-color);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// 不同类型提示框的样式
|
||||
&.hint-info {
|
||||
--hint-color: var(--font-color-main);
|
||||
--hint-bg: #eee;
|
||||
}
|
||||
|
||||
&.hint-warning {
|
||||
--hint-color: var(--warning);
|
||||
--hint-bg: #fff7dc;
|
||||
}
|
||||
|
||||
&.hint-danger {
|
||||
--hint-color: var(--red);
|
||||
--hint-bg: #ffeaec;
|
||||
}
|
||||
|
||||
// 鼠标悬停效果
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 短代码-文章链接样式 */
|
||||
.to-links-content {
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
.to-links-text span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.to-links-url,
|
||||
.icon-lianjie {
|
||||
color: var(--font-color-muted);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 短代码-网盘下载样式 */
|
||||
.cloud-download-box {
|
||||
position: relative;
|
||||
|
||||
.cloud-download-icon {
|
||||
flex-shrink: 0;
|
||||
background-color: var(--bg-color-main);
|
||||
border-radius: var(--border-radius-medium);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cloud-download-info {
|
||||
width: 100%;
|
||||
|
||||
.cloud-download-title a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.cloud-download-password {
|
||||
display: inline-block;
|
||||
color: var(--font-color-main-light);
|
||||
}
|
||||
|
||||
.cloud-download-btn span {
|
||||
color: var(--font-color-main-transparent);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.cloud-download-btn a {
|
||||
background-color: var(--bg-color-primary);
|
||||
border-radius: var(--border-radius-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 折叠框样式 */
|
||||
.fold-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: var(--border-solid-small);
|
||||
background: var(--gradient-45deg);
|
||||
border-radius: var(--border-radius-medium);
|
||||
|
||||
.fold-header {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background: var(--widget-bg-gradient);
|
||||
|
||||
&::after {
|
||||
content: "+";
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&[open] .fold-header::after {
|
||||
content: "-";
|
||||
}
|
||||
}
|
||||
551
usr/themes/HarmonyHues/assets/css/style.css
Executable file
551
usr/themes/HarmonyHues/assets/css/style.css
Executable file
@@ -0,0 +1,551 @@
|
||||
@charset "UTF-8";
|
||||
/* ------------------------------------ Harmony Hues主题 @author 星语社长 @link https://biibii.cn @update 2024-7-6 18:00:04 --------------------------------- */
|
||||
:root { /*基础样式*/ font-synthesis: style; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none; word-wrap: break-word; color: var(--font-color-main); /* 色调 */ /* 主色调：现代蓝色 */ --color-primary: #165DFF; /* 比主色调更深 */ --color-primary-dark-1: #0E42D2; /* 更深的色调 */ --color-primary-dark-2: #072A8A; /* 非常深的色调 */ --color-primary-dark-3: #041957; /* 比主色调稍浅 */ --color-primary-light-1: #4080FF; /* 浅一些的色调 */ --color-primary-light-2: #6AA1FF; /* 较浅的色调 */ --color-primary-light-3: #94BFFF; /* 更浅的色调 */ --color-primary-light-4: #BEDAFF; /* 非常浅的色调 */ --color-primary-light-5: #E8F3FF; /* 主背景色 */ --bg-color-main: #fff; /* 主背景色-黑 */ --bg-color-main-dark: #000; /* 页面背景色 */ --bg-color-body: #f6f7f9; /* 遮罩层浅色1 */ --overlay-color-light-1: rgba(255, 255, 255, 0.1); /* 遮罩层浅色2 */ --overlay-color-light-2: rgba(255, 255, 255, 0.2); /* 遮罩层浅色3 */ --overlay-color-light-3: rgba(255, 255, 255, 0.3); /* 遮罩层浅色4 */ --overlay-color-light-4: rgba(255, 255, 255, 0.4); /* 遮罩层浅色5 */ --overlay-color-light-5: rgba(255, 255, 255, 0.5); /* 遮罩层浅色8 */ --overlay-color-light-8: rgba(255, 255, 255, 0.8); /* 黑遮罩层浅色1 */ --overlay-color-dark-1: rgba(0, 0, 0, 0.1); /* 黑遮罩层浅色2 */ --overlay-color-dark-2: rgba(0, 0, 0, 0.2); /* 黑遮罩层浅色3 */ --overlay-color-dark-3: rgba(0, 0, 0, 0.3); /* 黑遮罩层浅色4 */ --overlay-color-dark-4: rgba(0, 0, 0, 0.4); /* 黑遮罩层浅色5 */ --overlay-color-dark-5: rgba(0, 0, 0, 0.5); /* 主字体颜色 */ --font-color-main: #333; /* 主字体颜色（浅色） */ --font-color-main-light: #6c757d; /* 主字体颜色（透明） */ --font-color-main-transparent: rgba(60, 60, 60, 0.7); /* 字体颜色（muted） */ --font-color-muted: #b2b2b2; /* 主边框颜色 */ --border-color-main: #e4e4e4; /* 主要背景色 */ --bg-color-primary: #f2f2f2; /* 次要背景色 */ --bg-color-secondary: #f5f5f5; /* 基础圆角大小 */ --border-radius-base: 8px; /* 小圆角大小 */ --border-radius-small: 5px; /* 中等圆角大小 */ --border-radius-medium: calc(var(--border-radius-small) * 2); /* 大圆角大小 */ --border-radius-large: calc(var(--border-radius-small) * 6); /* 超大圆角大小 */ --border-radius-xlarge: calc(var(--border-radius-small) * 20); /* 圆形圆角 */ --border-radius-circle: 50%; /* 固定导航栏高度 */ --height-nav-fixed: 80px; /* 页脚高度 */ --height-footer: 60px; /* 主背景滤镜 */ --backdrop-filter-main: saturate(180%) blur(20px); /* 主渐变透明背景 */ --gradient-primary-transparent: linear-gradient(0deg, var(--color-primary-light-4), transparent); /* 主题样式 */ /* 中等蓝色灰色 */ --color-blue-gray-medium: var(--color-primary); /* 浅色中等蓝色灰色 */ --color-blue-gray-medium-light: var(--color-primary-dark-3); /* 主阴影 */ --shadow-box-main: 8px 8px 15px 0 rgba(55, 99, 170, 0.1), -8px -8px 15px 0 var(--bg-color-main), inset 0 4px 15px 0 var(--overlay-color-light-5); /* 小阴影 */ --shadow-box-small: 5px 5px 12px 0 rgba(55, 99, 170, 0.1), -5px -5px 12px 0 var(--bg-color-main), inset 0 4px 10px 0 var(--overlay-color-light-5); /* 悬停阴影 */ --shadow-box-hover: 8px 8px 15px 0 rgba(55, 99, 170, 0.2), -8px -8px 15px 0 var(--bg-color-main); /* 0度渐变 */ --gradient-0deg: linear-gradient(0deg, var(--bg-color-body), #f8f8f8); /* 45度渐变 */ --gradient-45deg: linear-gradient(45deg, var(--bg-color-body), #f8f8f8); /* 工具背景渐变 */ --widget-bg-gradient: linear-gradient(-45deg, var(--bg-color-main), #f3f5f8); /* 主边框 */ --border-solid-main: 2px solid var(--bg-color-main); /* 小边框 */ --border-solid-small: 1px solid var(--bg-color-main); /* 导航栏阴影 */ --shadow-nav: 0 5px 12px 0 rgba(50, 98, 170, 0.1); /* 导航栏shadow */ --shadow-hover-nav: inset -8px -8px 16px var(--bg-color-body), inset 8px 8px 16px var(--bg-color-body), 8px 8px 16px rgba(0, 0, 0, 0.25); /* 内嵌阴影 */ --shadow-inset-box: inset -4px -4px 12px #f1f1f1, inset 4px 4px 12px #e2e2e2; /* 所有属性过渡效果 */ --transition-ease-all: all .3s ease 0s; }
|
||||
|
||||
:root[data-theme=dark] { --bg-color-main: #262626; --bg-color-main-dark: #fff; --bg-color-body: #222222; --overlay-color-light-1: rgba(0, 0, 0, 0.5); --overlay-color-light-2: #333333; --overlay-color-light-3: #4d4d4d; --overlay-color-light-4: #666666; --overlay-color-light-5: #2a2a2a; --overlay-color-light-8: #2e2e2e; --overlay-color-dark-1: #4d4d4d; --overlay-color-dark-2: rgba(255, 255, 255, 0.25); --overlay-color-dark-3: #808080; --overlay-color-dark-4: #999999; --overlay-color-dark-5: #b3b3b3; --font-color-main: #fff; --font-color-main-light: #b3b3b3; --font-color-main-transparent: rgba(220, 220, 220, 0.7); --font-color-muted: #757575; --border-color-main: #333; --bg-color-primary: #2C2C2C; --bg-color-secondary: #171717; --gradient-primary-transparent: linear-gradient(0deg, #333, rgba(0, 0, 0, 0.3)); --color-blue-gray-medium: var(--color-primary); --color-blue-gray-medium-light: var(--color-primary-dark-3); --shadow-box-main: 8px 8px 15px 0 rgba(0, 0, 0, 0.3), -8px -8px 15px 0 var(--bg-color-main), inset 0 4px 15px 0 var(--bg-color-body); --shadow-box-small: 5px 5px 12px 0 rgba(0, 0, 0, 0.3), -5px -5px 12px 0 var(--bg-color-main), inset 0 4px 10px 0 var(--bg-color-body); --shadow-box-hover: 8px 8px 15px 0 rgba(0, 0, 0, 0.4), -8px -8px 15px 0 var(--bg-color-main); --gradient-0deg: linear-gradient(0deg, var(--bg-color-body), var(--overlay-color-light-5)); --gradient-45deg: linear-gradient(45deg, var(--bg-color-body), var(--overlay-color-light-5)); --widget-bg-gradient: linear-gradient(-45deg, var(--bg-color-main), var(--bg-color-body)); --shadow-nav: 0 5px 12px 0 rgba(0, 0, 0, 0.3); --shadow-inset-box: inset -4px -4px 12px #1a1a1a, inset 4px 4px 12px #1e1e1e; }
|
||||
|
||||
/* 全局样式 */
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body { background-color: var(--bg-color-body) !important; }
|
||||
|
||||
ol, ul { list-style: none; margin: 0; }
|
||||
|
||||
*, *::before, *::after { font: inherit; color: inherit; padding: 0; margin: 0; border: 0; outline: 0; vertical-align: baseline; box-sizing: border-box; scroll-behavior: smooth; }
|
||||
|
||||
/* 去除a标签默认样式 */
|
||||
a { color: var(--font-color-main); cursor: pointer; text-decoration: none; transition: color 0.3s ease; }
|
||||
|
||||
a:link, a:visited, a:hover, a:active, a:focus { text-decoration: none; }
|
||||
|
||||
a:hover { color: var(--color-blue-gray-medium) !important; }
|
||||
|
||||
/*--------浏览器滚动条---------*/
|
||||
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
|
||||
::-webkit-scrollbar { -webkit-appearance: none; width: 0.5rem; height: 0.5rem; }
|
||||
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
::-webkit-scrollbar-track { background-color: #e4e4e4; }
|
||||
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
::-webkit-scrollbar-thumb { cursor: pointer; border-radius: 10px; background: #b2b2b2; -webkit-transition: color .3s ease; transition: color .3s ease; }
|
||||
|
||||
/* 指定滚动样式 */
|
||||
.scroll-cover { overflow: auto; }
|
||||
|
||||
.scroll-cover::-webkit-scrollbar { width: 2px !important; height: 2px !important; -webkit-appearance: none; appearance: none; }
|
||||
|
||||
.scroll-cover::-webkit-scrollbar-track { background-color: transparent; }
|
||||
|
||||
/*--------浏览器滚动条---------*/
|
||||
/*---输入公共样式---*/
|
||||
input, textarea, select { color: var(--font-color-main) !important; box-shadow: var(--shadow-inset-box) !important; background-color: transparent !important; border-radius: var(--border-radius-base) !important; border: var(--border-solid-small) !important; }
|
||||
|
||||
@media (max-width: 767.98px) { input, textarea, select { border: var(--border-solid-small) !important; } }
|
||||
|
||||
input:-webkit-autofill { transition: background-color 5000s ease-in-out 0s; -webkit-text-fill-color: var(--font-color-main) !important; }
|
||||
|
||||
button { color: var(--font-color-main) !important; }
|
||||
|
||||
button.btn:focus { box-shadow: var(--shadow-inset-box); }
|
||||
|
||||
img, video { width: 100%; height: 100%; object-fit: cover; }
|
||||
|
||||
:root[data-theme=dark] img, :root[data-theme=dark] video { filter: brightness(0.85); }
|
||||
|
||||
/* 名字svg样式 */
|
||||
.svg-name path { fill: var(--font-color-main); }
|
||||
|
||||
/* 文字边框 */
|
||||
.title-text-stroke { text-stroke: 1px var(--font-color-main); -webkit-text-stroke: 1px var(--font-color-main); -webkit-text-fill-color: transparent; }
|
||||
|
||||
/* 文字阴影 */
|
||||
.text-shadow-style { position: relative; --text-col: var(--bg-color-main); --text-show-col: var(--font-color-main); color: var(--text-col); text-shadow: 3px 3px 0 var(--text-show-col), -1px -1px 0 var(--text-show-col), 1px -1px 0 var(--text-show-col), -1px 1px 0 var(--text-show-col), 1px 1px 0 var(--text-show-col); }
|
||||
|
||||
.text-webkit-mask { opacity: 0.5; -webkit-mask: linear-gradient(var(--bg-color-main) 50%, transparent); mask: linear-gradient(var(--bg-color-main) 50%, transparent); }
|
||||
|
||||
/* 图标公共样式 */
|
||||
.iconfont { font-family: "iconfont" !important; color: var(--font-color-main); font-size: 1.5rem; font-style: normal; line-height: 1; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }
|
||||
|
||||
.iconfont:hover { color: var(--color-blue-gray-medium); }
|
||||
|
||||
/* 公共动画 */
|
||||
@keyframes fade-in-top { from { opacity: 0;
|
||||
transform: translateY(15px); }
|
||||
to { opacity: 1;
|
||||
transform: translateY(0); } }
|
||||
|
||||
@-webkit-keyframes fade-in-top { from { opacity: 0;
|
||||
-webkit-transform: translateY(15px); }
|
||||
to { opacity: 1;
|
||||
-webkit-transform: translateY(0); } }
|
||||
|
||||
.animated-signature path { stroke-dasharray: 2400; stroke-dashoffset: 2400; fill: transparent; animation: drawSignature 8s linear infinite both; -webkit-animation: drawSignature 8s linear infinite both; stroke-width: 2px; stroke: var(--font-color-main); }
|
||||
|
||||
img.lazy { background-color: var(--color-primary-light-5); filter: blur(25px); -webkit-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; }
|
||||
|
||||
img.loaded { background-color: transparent; filter: blur(0px); -webkit-transition: filter 1s linear, -webkit-filter 1s linear; transition: filter 1s linear, -webkit-filter 1s linear; }
|
||||
|
||||
@keyframes drawSignature { 0% { stroke-dashoffset: 2400; }
|
||||
15% { fill: transparent; }
|
||||
35%, 75% { stroke-dashoffset: 0;
|
||||
fill: var(--font-color-main); }
|
||||
90%, to { stroke-dashoffset: 2400;
|
||||
fill: transparent; } }
|
||||
|
||||
.view-image-lead img { width: auto; height: auto; }
|
||||
|
||||
/*---------- 导航栏样式st ----------*/
|
||||
/* 导航栏样式 */
|
||||
.navbar { position: fixed; z-index: 99; width: 100%; background-color: transparent; transition: var(--transition-ease-all); }
|
||||
|
||||
.navbar.nav-ui-one { background-image: radial-gradient(transparent 1px, var(--bg-color-main) 1px); background-size: 4px 4px; -webkit-backdrop-filter: saturate(50%) blur(5px); backdrop-filter: saturate(50%) blur(5px); -webkit-box-shadow: var(--shadow-nav) !important; box-shadow: var(--shadow-nav) !important; }
|
||||
|
||||
.navbar.nav-ui-two .navbar-box { background-image: radial-gradient(transparent 1px, var(--bg-color-main) 1px); background-size: 4px 4px; -webkit-backdrop-filter: saturate(50%) blur(5px); backdrop-filter: saturate(50%) blur(5px); -webkit-box-shadow: var(--shadow-nav) !important; box-shadow: var(--shadow-nav) !important; border: var(--border-solid-main); border-radius: var(--border-radius-medium); }
|
||||
|
||||
.navbar.active { box-shadow: var(--shadow-nav) !important; }
|
||||
|
||||
.navbar.nav-hidden { transform: translateY(-100%) !important; opacity: 0 !important; }
|
||||
|
||||
.navbar.nav-visible { transform: translateY(0) !important; opacity: 1 !important; }
|
||||
|
||||
.navbar-logo span { font-size: 1.5rem; }
|
||||
|
||||
.navbar-logo img { height: 40px; }
|
||||
|
||||
.nav-inner { position: relative; }
|
||||
|
||||
.nav-inner .nav-icon { display: inline-block; margin-left: 0.1rem; font-size: 0.8rem; transition: transform 0.3s; }
|
||||
|
||||
.nav-inner .nav-menu { gap: 1rem; }
|
||||
|
||||
.nav-inner .nav-item { position: relative; }
|
||||
|
||||
.nav-inner .nav-item .nav-a.active { color: var(--color-primary); text-shadow: 0 0.15rem 1rem var(--color-primary-light-1); }
|
||||
|
||||
.nav-inner .nav-item .nav-a.active .nav-icon { color: var(--color-blue-gray-medium); }
|
||||
|
||||
.nav-inner .nav-item > .sub-menu { position: absolute; left: -15%; opacity: 0; visibility: hidden; pointer-events: none; z-index: 9; transform: translateY(-15px); transition: all 0.3s ease; }
|
||||
|
||||
.nav-inner .nav-item:hover .nav-a { color: var(--color-blue-gray-medium); }
|
||||
|
||||
.nav-inner .nav-item:hover > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
|
||||
|
||||
.nav-inner .nav-item:hover .nav-icon { color: var(--color-blue-gray-medium); transform: rotate(-90deg); }
|
||||
|
||||
.nav-inner .sub-menu { white-space: nowrap; }
|
||||
|
||||
.nav-inner .sub-menu ul { background: var(--gradient-0deg); border-radius: var(--border-radius-base); white-space: nowrap; border: var(--border-solid-main); box-shadow: var(--shadow-hover-nav); overflow: hidden; }
|
||||
|
||||
.nav-inner .sub-menu ul li { position: relative; width: 100%; transition: all .3s; overflow: hidden; }
|
||||
|
||||
.nav-inner .sub-menu ul li > a { --nav-font-size: 20px; display: inline-block; transform: translateY(calc(-1 * var(--nav-font-size) * 1.5)); text-shadow: 0px calc(var(--nav-font-size) * 1.5) 0px var(--font-color-main); transition: transform 0.3s cubic-bezier(0.15, 1, 0.35, 1); }
|
||||
|
||||
.nav-inner .sub-menu ul li:hover > a { transform: translateY(0); }
|
||||
|
||||
.nav-inner .sub-menu ul li:hover, .nav-inner .sub-menu ul li.active { width: 100%; background-color: var(--bg-color-main); border-radius: var(--border-radius-medium); box-shadow: var(--shadow-box-hover); }
|
||||
|
||||
.navbar-icon { gap: 1rem; }
|
||||
|
||||
@media (max-width: 767.98px) { .navbar-icon { gap: 0.5rem; } }
|
||||
|
||||
.navbar-icon .iconfont { font-size: 1.35rem; }
|
||||
|
||||
/*滚动进度+回到顶部样式*/
|
||||
.back-to-top { display: flex; overflow: hidden; }
|
||||
|
||||
.back-to-top .nav-top-item { text-align: center; font-size: 0.8rem; width: 1.6rem; height: 1.6rem; line-height: 1.6rem; border-radius: var(--border-radius-xlarge); background: var(--font-color-main); color: var(--bg-color-main); transition: width 0.3s, display 0.3s; }
|
||||
|
||||
.back-to-top .nav-top-item.top-to-active { width: 5rem; }
|
||||
|
||||
.back-to-top .top-to-icon { display: none; }
|
||||
|
||||
.back-to-top:hover .top-to-icon { display: inline-block; }
|
||||
|
||||
.back-to-top:hover .top-to-text { display: none; }
|
||||
|
||||
.back-to-top:hover .nav-top-item { width: 5rem; }
|
||||
|
||||
/* ----》手机导航栏菜单 */
|
||||
#nav-components.mobile-aside { display: flex; flex-direction: column; position: fixed; width: 100%; max-height: 95vh; min-height: 70vh; opacity: 0; visibility: hidden; background-color: var(--bg-color-main); bottom: 0; z-index: 1000; transform: translateY(100%); transition: transform 1s cubic-bezier(0.3, 0.7, 0, 1), opacity 1s linear, visibility 1s linear; border-top-left-radius: var(--border-radius-medium); border-top-right-radius: var(--border-radius-medium); box-shadow: 0 -0.15rem 1.5rem 0.25rem var(--overlay-color-dark-1); }
|
||||
|
||||
#nav-components.mobile-aside.open { visibility: visible; opacity: 1; transform: translateY(0); }
|
||||
|
||||
#nav-components .back-box { display: inline-block; width: 3rem; height: 4px; border-radius: var(--border-radius-xlarge); background-color: var(--overlay-color-dark-3); }
|
||||
|
||||
#nav-components .mobile-close-btn { position: absolute; display: flex; right: 0; top: 0; width: 2rem; height: 2rem; background-color: var(--bg-color-body); border-radius: var(--border-radius-circle); align-items: center; justify-content: center; }
|
||||
|
||||
#nav-components .nav-menu > .nav-item { font-size: 1rem; color: var(--font-color-main); }
|
||||
|
||||
#nav-components .nav-menu .nav-a .iconfont { font-size: 1rem; }
|
||||
|
||||
#nav-components .nav-menu .nav-a .nav-icon { display: none; }
|
||||
|
||||
#nav-components .nav-menu .sub-menu { background-color: var(--bg-color-body); border-radius: var(--border-radius-medium); border-top-left-radius: 0; }
|
||||
|
||||
.nav-fixed { padding-top: var(--height-nav-fixed); }
|
||||
|
||||
@media (max-width: 767.98px) { .nav-fixed { padding-top: calc(var(--height-nav-fixed) - 1rem); } }
|
||||
|
||||
/*---------- 导航栏样式end ----------*/
|
||||
/*---------- 文章分类样式st ----------*/
|
||||
.category-box { position: relative; width: 100%; height: 12rem; max-height: 100%; overflow: hidden; }
|
||||
|
||||
.category-box .category-item { position: absolute; color: var(--bg-color-main); width: 100%; height: 100%; background-color: var(--overlay-color-dark-2); }
|
||||
|
||||
.category-box .category-item .category-info { width: 100%; height: 100%; }
|
||||
|
||||
.category-box .category-item .category-name { display: block; font-size: 1.15rem; font-weight: bold; }
|
||||
|
||||
.category-box .category-item .category-desc { display: block; font-size: 0.85rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; word-break: break-all; }
|
||||
|
||||
.category-box img { width: 100%; height: 100%; object-fit: cover; }
|
||||
|
||||
/*---------- 文章分类样式end ----------*/
|
||||
/*---------- 文章列表样式st ----------*/
|
||||
.post-list > div:nth-child(1) .post-item { animation-delay: 0.4s; }
|
||||
|
||||
.post-list > div:nth-child(2) .post-item { animation-delay: 0.4s; }
|
||||
|
||||
.post-list > div:nth-child(3) .post-item { animation-delay: 0.4s; }
|
||||
|
||||
.post-list > div:nth-child(4) .post-item { animation-delay: 0.6s; }
|
||||
|
||||
.post-list > div:nth-child(5) .post-item { animation-delay: 0.6s; }
|
||||
|
||||
.post-list > div:nth-child(6) .post-item { animation-delay: 0.6s; }
|
||||
|
||||
.post-list > div:nth-child(7) .post-item { animation-delay: 0.8s; }
|
||||
|
||||
.post-list > div:nth-child(8) .post-item { animation-delay: 0.8s; }
|
||||
|
||||
.post-list > div:nth-child(9) .post-item { animation-delay: 0.8s; }
|
||||
|
||||
@media (max-width: 767.98px) { .post-list > div:nth-child(1) .post-item { animation-delay: 0.4s; }
|
||||
.post-list > div:nth-child(2) .post-item { animation-delay: 0.4s; }
|
||||
.post-list > div:nth-child(3) .post-item { animation-delay: 0.6s; }
|
||||
.post-list > div:nth-child(4) .post-item { animation-delay: 0.6s; }
|
||||
.post-list > div:nth-child(5) .post-item { animation-delay: 0.8s; }
|
||||
.post-list > div:nth-child(6) .post-item { animation-delay: 0.8s; }
|
||||
.post-list > div:nth-child(7) .post-item { animation-delay: 1s; } }
|
||||
|
||||
.post-list .post-item { position: relative; min-width: 0; word-wrap: break-word; align-self: stretch; flex: 1 1 auto; overflow: hidden; border-radius: var(--border-radius-medium); border: var(--border-solid-main); box-shadow: var(--shadow-box-main); background: var(--gradient-0deg); background-clip: padding-box; opacity: 0; animation: fade-in-top 0.5s 0.3s forwards; -webkit-animation: fade-in-top 0.5s 0.3s forwards; }
|
||||
|
||||
.post-list .post-item:hover { background: var(--bg-color-main) !important; box-shadow: var(--shadow-box-hover); }
|
||||
|
||||
.post-list .post-item:hover .post-cover img { transform: scale(1.1); }
|
||||
|
||||
.post-list .post-item:hover .post-head > a { color: var(--color-blue-gray-medium) !important; }
|
||||
|
||||
.post-list .post-item .post-cover { position: relative; display: block; overflow: hidden; padding: 0; flex-shrink: 0; }
|
||||
|
||||
.post-list .post-item .post-cover::after { content: ""; display: block; padding-top: 60%; }
|
||||
|
||||
.post-list .post-item .post-cover img { width: 100%; height: 100%; transition: transform .3s ease-in-out; object-fit: cover; }
|
||||
|
||||
.post-list .post-item .post-cover a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 0; border-radius: inherit; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; background-clip: padding-box; }
|
||||
|
||||
.post-list .post-item .post-info { height: 100%; width: 100%; cursor: pointer; position: relative; overflow: hidden; gap: 0.5rem; }
|
||||
|
||||
.post-list .post-item .post-info .post-head > a { margin-bottom: 0.25rem; font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--font-color-main); transition: color .3s ease 0s; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; word-break: break-all; }
|
||||
|
||||
.post-list .post-item .post-info .post-meta-wrap { --font-color-main: var(--font-color-main-light); color: var(--font-color-main); }
|
||||
|
||||
.post-list .post-item .post-info .post-description { color: var(--font-color-main-transparent); font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; word-break: break-all; }
|
||||
|
||||
@media (max-width: 767.98px) { .post-list .post-item { box-shadow: var(--shadow-box-small); } }
|
||||
|
||||
/* -------------段落省略--------- */
|
||||
.author-content .author-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; word-break: break-all; }
|
||||
|
||||
.post-meta-wrap .author-name, .post-meta-wrap .post-meta { color: var(--font-color-main); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; word-break: break-all; }
|
||||
|
||||
@media (max-width: 767.98px) { .post-meta-wrap .author-name, .post-meta-wrap .post-meta { font-size: 0.8rem; } }
|
||||
|
||||
/*---------- 文章列表样式end ----------*/
|
||||
/*---------- 文章列表->分页str ----------*/
|
||||
.pagination { gap: 0.5rem; opacity: 0; animation: fade-in-top 0.5s 0.8s forwards; -webkit-animation: fade-in-top 0.5s 0.8s forwards; }
|
||||
|
||||
.pagination .page-item { width: 2rem; height: 2rem; }
|
||||
|
||||
.pagination .page-item .page-link { color: var(--font-color-main); background: var(--gradient-45deg); background-clip: padding-box; border: var(--border-solid-main); box-shadow: var(--shadow-box-small); }
|
||||
|
||||
.pagination .page-item.prev .iconfont, .pagination .page-item.next .iconfont { font-size: 0.9rem; }
|
||||
|
||||
.pagination .page-item.active .page-link, .pagination .page-item:hover .page-link { font-weight: bold; color: var(--color-primary-dark-1); background: var(--bg-color-main) !important; box-shadow: var(--shadow-box-main); }
|
||||
|
||||
/*---------- 文章列表分页end ----------*/
|
||||
/*---------- 侧边栏样式st ----------*/
|
||||
.hh-widget, .card { width: 100%; color: var(--font-color-main); border: var(--border-solid-main); border-radius: var(--border-radius-medium); box-shadow: var(--shadow-box-main); background: var(--gradient-45deg); background-clip: padding-box; }
|
||||
|
||||
.hh-widget:not(.no-animation), .card:not(.no-animation) { opacity: 0; animation: fade-in-top 0.5s 0.3s forwards; -webkit-animation: fade-in-top 0.5s 0.3s forwards; }
|
||||
|
||||
.main-sidebar .sidebar-sticky { top: 88px; z-index: 2 !important; transition: top 0.3s ease; }
|
||||
|
||||
.main-sidebar .sidebar-sticky.visible-top { top: 20px; }
|
||||
|
||||
.main-sidebar .widget-title { display: inline-block; font-size: 1rem; font-weight: 700; }
|
||||
|
||||
.main-sidebar .widget-title > .iconfont { font-size: 1.1rem; }
|
||||
|
||||
/*----------侧边栏样式end ----------*/
|
||||
/*----------底部样式st ----------*/
|
||||
.footer { color: var(--font-color-main); background-color: var(--bg-color-main); font-size: 14px; min-height: var(--height-footer); }
|
||||
|
||||
@media (max-width: 767.98px) { .footer .container { flex-direction: column; align-items: center; }
|
||||
.footer .footer-left { text-align: center; justify-content: center; } }
|
||||
|
||||
.footer .theme-toggle { margin: 0 auto; gap: 0.15rem; background: var(--bg-color-body); border-radius: var(--border-radius-xlarge); border: var(--border-solid-small); }
|
||||
|
||||
.footer .theme-toggle button { line-height: 1; background: transparent; border-radius: var(--border-radius-large); }
|
||||
|
||||
.footer .theme-toggle button.active, .footer .theme-toggle button:hover { background: var(--bg-color-main); }
|
||||
|
||||
.footer .theme-toggle .iconfont { font-size: 0.85rem; color: var(--font-color-main-light); }
|
||||
|
||||
.footer .social-info-list a { display: flex; width: 1.75rem; height: 1.75rem; background-color: var(--bg-color-main-dark); border-radius: var(--border-radius-circle); align-items: center; justify-content: center; transition: background-color 0.2s; }
|
||||
|
||||
.footer .social-info-list a i { color: var(--bg-color-main); font-size: 1rem; }
|
||||
|
||||
.footer .social-info-list a:hover { background-color: var(--bg-color-body); }
|
||||
|
||||
.footer .social-info-list a:hover i { color: var(--font-color-main); }
|
||||
|
||||
main > .container { min-height: calc(100vh - 6rem - var(--height-footer)); }
|
||||
|
||||
/*---------- 底部样式end ----------*/
|
||||
/*---------- 文章+页面-面包屑样式st ----------*/
|
||||
.breadcrumb { font-size: 0.85rem; background: none !important; opacity: 0; animation: fade-in-top 0.3s 0.2s forwards; -webkit-animation: fade-in-top 0.3s 0.2s forwards; }
|
||||
|
||||
.breadcrumb li a, .breadcrumb li span { color: var(--font-color-main-light); font-size: 0.8rem; line-height: 1; padding: 0.2rem 0.5rem; background: linear-gradient(to right, var(--bg-color-primary), var(--overlay-color-light-2)); border-radius: var(--border-radius-xlarge); border: var(--border-solid-small); border-bottom-left-radius: var(--border-radius-small); box-shadow: var(--shadow-box-small); }
|
||||
|
||||
.breadcrumb li span { color: var(--font-color-main); box-shadow: var(--shadow-inset-box); }
|
||||
|
||||
.breadcrumb li:hover a { box-shadow: var(--shadow-inset-box); }
|
||||
|
||||
.breadcrumb > li + li:before { opacity: .6; padding: 0 0.35rem; color: var(--font-color-main-transparent); content: "\003e"; }
|
||||
|
||||
/*---------- 文章+页面-面包屑样式end ----------*/
|
||||
/*---------- 文章内容样式end ----------*/
|
||||
.post-header .author-left, .post-header .author-right { --font-color-main: var(--font-color-main-transparent); color: var(--font-color-main) !important; }
|
||||
|
||||
.post-head, .post-content { color: var(--font-color-main); }
|
||||
|
||||
.post .iconfont { font-size: 1rem; }
|
||||
|
||||
/* 文章内容样式 */
|
||||
.post-content { position: relative; box-sizing: border-box; }
|
||||
|
||||
/* 文章版权样式 */
|
||||
.post-copyright { position: relative; font-size: 0.9rem; line-height: 1.8; color: var(--font-color-main); border-radius: var(--border-radius-medium); box-shadow: var(--shadow-inset-box); z-index: 1; border: var(--border-solid-small); }
|
||||
|
||||
.copyright-svgname { position: absolute; height: 3rem; top: 30%; right: 0; opacity: 0.9; z-index: -1; }
|
||||
|
||||
/* 文章结束样式 */
|
||||
.post-end { color: var(--border-color-main); }
|
||||
|
||||
.post-end::after, .post-end::before { content: ''; background: var(--border-color-main); max-width: 50%; height: 0.05rem; margin: 0 1rem; flex: 1; }
|
||||
|
||||
/* 文章标签样式 */
|
||||
.category-and-tags { gap: 0.5rem; }
|
||||
|
||||
.category-and-tags a { font-size: 0.75rem; color: var(--font-color-main-transparent); padding: 0.25rem 0.5rem; border-radius: var(--border-radius-large); border: var(--border-solid-main); background-color: var(--bg-color-secondary); }
|
||||
|
||||
.category-and-tags a:hover { background: var(--border-color-main); }
|
||||
|
||||
.category-and-tags .post-tags { gap: 0.5rem; }
|
||||
|
||||
.category-and-tags .post-tags a { padding: 0.15rem 0.5rem 0.15rem 0.15rem; }
|
||||
|
||||
.category-and-tags .post-tags a::before { content: '#'; display: inline-flex; margin-right: 0.25rem; background-color: var(--bg-color-main); width: 20px; height: 20px; line-height: 20px; font-weight: 700; justify-content: center; border-radius: var(--border-radius-large); }
|
||||
|
||||
/* 分享+赞赏 */
|
||||
.post-tools { gap: 1rem; }
|
||||
|
||||
.post-tools .post-tools-item { gap: 0.35rem; }
|
||||
|
||||
.post-tools .post-tools-item .post-tools-title { color: var(--font-color-main-transparent); font-size: 0.9rem; }
|
||||
|
||||
.post-tools button { width: 3rem; height: 3rem; background-image: var(--gradient-45deg); box-shadow: var(--shadow-box-small); border: var(--border-solid-main); border-radius: var(--border-radius-xlarge); }
|
||||
|
||||
.post-tools button .iconfont { font-size: 1.2rem; }
|
||||
|
||||
.post-tools button:hover { box-shadow: var(--shadow-inset-box); }
|
||||
|
||||
/* 下一篇、上一篇 */
|
||||
.post-next-prev { gap: 1rem; line-height: 1.8; }
|
||||
|
||||
.post-next-prev .post-next, .post-next-prev .post-prev { position: relative; }
|
||||
|
||||
.post-next-prev .post-next .next-prev-title, .post-next-prev .post-prev .next-prev-title { cursor: default; line-height: 1; font-size: 1.25rem; }
|
||||
|
||||
.post-next-prev .post-next:hover .next-prev-title, .post-next-prev .post-prev:hover .next-prev-title { opacity: 0.7; }
|
||||
|
||||
.post-next-prev a { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; word-break: break-all; }
|
||||
|
||||
/*---------- 文章内容样式end ----------*/
|
||||
/*---------- 评论样式st ----------*/
|
||||
#comments { font-size: 0.9rem; }
|
||||
|
||||
/* 评论框 */
|
||||
#comment-form .form-control { font-size: 0.9rem; }
|
||||
|
||||
#comment-form .comment-form-info input:focus { background-color: var(--overlay-color-light-5) !important; }
|
||||
|
||||
#comment-form .comment-form-info textarea:focus { background-color: var(--overlay-color-light-5) !important; }
|
||||
|
||||
.com-footer .com-tool-list .com-tool-item { position: relative; border-radius: var(--border-radius-base); }
|
||||
|
||||
.com-footer .com-tool-list .com-tool-item:hover, .com-footer .com-tool-list .com-tool-item.active { background: var(--bg-color-main); }
|
||||
|
||||
.com-footer .com-tool-list .iconfont { font-size: 1.25rem; }
|
||||
|
||||
.com-footer .com-tool-list .com-emoji { position: relative; }
|
||||
|
||||
.com-footer .com-tool-list .com-emoji .emoji-box { display: none; position: absolute; top: 3rem; left: -0.5rem; z-index: 10; background-image: var(--gradient-45deg); border: var(--border-solid-main); border-radius: var(--border-radius-base); overflow: hidden; box-shadow: var(--shadow-box-small); }
|
||||
|
||||
.com-footer .com-tool-list .com-emoji .emoji-dropdown { max-width: 100%; width: 22rem; height: 15rem; text-align: center; overflow-x: hidden; overflow-y: auto; margin: 0; }
|
||||
|
||||
.com-footer .com-tool-list .com-emoji .emoji-item { display: inline-block; font-size: 14px; cursor: pointer; }
|
||||
|
||||
.com-footer .com-tool-list .com-emoji .emoji-item .gif-img { min-width: 4rem; }
|
||||
|
||||
.com-footer .com-tool-list .com-emoji .emoji-item img { width: 2rem; height: auto; max-height: 100%; }
|
||||
|
||||
.com-footer .com-tool-list .com-emoji .emoji-item:hover { border-radius: var(--border-radius-medium); background-color: var(--bg-color-main); }
|
||||
|
||||
.com-footer .com-tool-list .com-emoji .emoji-bar { background-color: var(--bg-color-main); }
|
||||
|
||||
.com-footer .com-tool-list .com-emoji .emoji-bar li { cursor: pointer; }
|
||||
|
||||
.com-footer .com-tool-list .com-emoji .emoji-bar li:hover, .com-footer .com-tool-list .com-emoji .emoji-bar li.emoji-active { background-color: var(--bg-color-secondary); }
|
||||
|
||||
.com-footer .btn-card { color: var(--font-color-main); font-size: 0.85rem; background-image: var(--gradient-45deg); box-shadow: var(--shadow-box-main); border: var(--border-solid-small); border-radius: var(--border-radius-medium); background-clip: padding-box; }
|
||||
|
||||
.com-footer .btn-card:hover { box-shadow: var(--shadow-inset-box); }
|
||||
|
||||
/* 评论列表 */
|
||||
.comment-body { position: relative; font-size: 0.85rem; gap: 0.5rem; }
|
||||
|
||||
.comment-body .comment-author { position: relative; gap: 0.5rem; }
|
||||
|
||||
.comment-body .comment-author .comment-name .comment-author-ua { font-size: 0.7rem; background-color: var(--color-primary); color: var(--bg-color-main); padding: 0.1rem 0.25rem; border-radius: var(--border-radius-small); }
|
||||
|
||||
.comment-body .comment-author .comment-time, .comment-body .comment-author .comment-ua { margin-right: 0.15rem; font-size: 0.8rem; color: var(--font-color-main-transparent); }
|
||||
|
||||
.comment-body .comment-author img { width: 40px; height: 40px; border-radius: var(--border-radius-circle); border: var(--border-solid-main); }
|
||||
|
||||
.comment-body .comment-content { word-break: break-all; }
|
||||
|
||||
.comment-body .comment-content p { display: inline-block; margin: 0; }
|
||||
|
||||
.comment-body .comment-content .emoji-image { display: inline-block !important; width: 2rem; height: auto; max-height: 100%; vertical-align: middle; }
|
||||
|
||||
.comment-body .comment-content img { display: block; max-width: 100%; width: auto; height: 10rem; margin: 0.5rem 0; border-radius: var(--border-radius-small); }
|
||||
|
||||
.comment-body .comment-content .repy-to-author a { color: var(--red); }
|
||||
|
||||
.comment-body .comment-footer { position: absolute; right: 0; bottom: 0; color: var(--font-color-main-transparent); font-size: 0.85rem; }
|
||||
|
||||
.comment-body .comment-footer .iconfont { color: var(--border-color-main); }
|
||||
|
||||
.comment-body .comment-footer:hover .iconfont { color: var(--font-color-main) !important; }
|
||||
|
||||
.comment-body:hover .comment-footer .iconfont { color: var(--font-color-main-transparent); }
|
||||
|
||||
.comment-parent { border-radius: var(--border-radius-medium); box-shadow: var(--shadow-inset-box); border: var(--border-solid-small); }
|
||||
|
||||
.comment-parent .comment-list { border-radius: var(--border-radius-medium); box-shadow: var(--shadow-inset-box); border: var(--border-solid-small); }
|
||||
|
||||
.comment-parent .comment-list .comment-list .comment-child { border-bottom: 1px dashed var(--overlay-color-dark-1); }
|
||||
|
||||
.comment-parent .comment-list .comment-list .comment-child:last-child { border: none; }
|
||||
|
||||
.comment-parent .comment-list .repy-to-author + p { display: contents; }
|
||||
|
||||
.comment-child, .comment-parent { margin-bottom: 0.25rem; }
|
||||
|
||||
.comment-child:last-child, .comment-parent:last-child { margin-bottom: 0 !important; }
|
||||
|
||||
/*评论下一页、上一页*/
|
||||
.comment-pagination ol { gap: 0.5rem; }
|
||||
|
||||
.comment-pagination a { width: 2rem; height: 2rem; display: flex; background-image: var(--gradient-45deg); border: var(--border-solid-small); border-radius: var(--border-radius-medium); box-shadow: var(--shadow-box-main); background-clip: padding-box; justify-content: center; align-items: center; }
|
||||
|
||||
.comment-pagination li.current a { font-weight: 700; }
|
||||
|
||||
.comment-pagination a:hover, .comment-pagination li.current a { color: var(--color-primary); box-shadow: var(--shadow-inset-box); }
|
||||
|
||||
.comment-pagination .com-next .iconfont, .comment-pagination .com-prev .iconfont { font-size: 0.9rem; }
|
||||
|
||||
/*---------- 评论样式end ----------*/
|
||||
/*---------- 弹窗工具：搜索+分享+赞赏按钮样式st ----------*/
|
||||
.pop-tool-overlay-bg { opacity: 0; visibility: hidden; position: fixed; inset: 0; background: var(--overlay-color-light-1); -webkit-backdrop-filter: var(--backdrop-filter-main); backdrop-filter: var(--backdrop-filter-main); z-index: 997; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; transform: rotate(45deg) scale(0); }
|
||||
|
||||
/* 应用Mixins */
|
||||
.open .pop-tool-overlay-bg { opacity: 1 !important; visibility: visible !important; transform: rotate(0) scale(1) !important; }
|
||||
|
||||
.open .pop-tool-box { opacity: 1 !important; visibility: visible !important; top: 45% !important; transform: translate(-50%, -50%) scale(1) !important; }
|
||||
|
||||
.pop-tool-box { opacity: 0; visibility: hidden; position: fixed; width: calc(-20px + 100vw); max-height: calc(100vh - 6rem); max-width: 50rem; z-index: 998; top: 35%; left: 50%; transform: translate(-50%, -50%) scale(0); overflow: hidden; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
|
||||
|
||||
/* 海报生成 */
|
||||
.main-poster .poster-box { width: 400px; max-width: calc(100vw - 1rem); padding: 0 !important; overflow: unset; color: var(--font-color-main); }
|
||||
|
||||
.main-poster .poster-box .poster-post-box { --poster-text-color: var(--font-color-main-light); position: relative; background: var(--gradient-0deg); width: 100%; overflow: hidden; border-radius: var(--border-radius-base); }
|
||||
|
||||
.main-poster .poster-box .poster-cover { height: 200px; border-radius: var(--border-radius-small); overflow: hidden; }
|
||||
|
||||
.main-poster .poster-box .poster-content { gap: 1rem; }
|
||||
|
||||
.main-poster .poster-box .poster-content .poster-date { height: 100%; color: var(--gray-dark); background-color: var(--white); border-radius: var(--border-radius-medium); }
|
||||
|
||||
.main-poster .poster-box .poster-content .poster-post-content .poster-post-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; word-break: break-all; }
|
||||
|
||||
.main-poster .poster-box .poster-content .poster-post-content .poster-post-text { font-size: 0.9rem; color: var(--poster-text-color); }
|
||||
|
||||
.main-poster .poster-box .poster-footer { border: var(--border-solid-small); }
|
||||
|
||||
.main-poster .poster-box .down-btn-box { width: 100%; position: absolute; bottom: -4rem; }
|
||||
|
||||
/* 赞赏独立样式 */
|
||||
.main-reward .reward-box { width: auto; }
|
||||
|
||||
.main-reward .reward-content { gap: 1rem; }
|
||||
|
||||
.main-reward .reward-content .reward-qr { color: var(--font-color-muted); box-shadow: var(--shadow-inset-box); border-radius: var(--border-radius-base); overflow: hidden; padding: 0.25rem; }
|
||||
|
||||
.main-reward .reward-content img { width: 10rem; border-radius: var(--border-radius-base); }
|
||||
|
||||
@media (max-width: 767.98px) { .main-reward .reward-content img { width: 8rem; } }
|
||||
|
||||
/* 分享独立样式 */
|
||||
.share-box { top: 50%; }
|
||||
|
||||
.share-box p { text-align: center; color: var(--font-color-main-transparent); background-color: var(--bg-color-primary); border-radius: var(--border-radius-base); border: var(--border-solid-small); }
|
||||
|
||||
.share-box p:hover { color: var(--font-color-main); background: var(--overlay-color-light-5); }
|
||||
|
||||
.share-box .share-a { gap: 20px; }
|
||||
|
||||
.share-box .share-a .share-item { width: 3rem; height: 3rem; background-image: var(--gradient-0deg); box-shadow: var(--shadow-box-main); border: var(--border-solid-main); background-clip: padding-box; border-radius: var(--border-radius-circle); }
|
||||
|
||||
.share-box .share-a .share-item:hover { box-shadow: var(--shadow-inset-box); }
|
||||
|
||||
.share-box .wechat-qrcode img, .share-box .zdyqr-qrcode img { width: 10rem; height: 10rem; }
|
||||
|
||||
/* 搜索独立样式 */
|
||||
.search-box .search-form { position: relative; }
|
||||
|
||||
.search-box .search-name h5 { font-weight: 700; }
|
||||
|
||||
.search-box .form-control { position: relative; width: 100%; height: 100%; padding: 0.6rem 2rem 0.6rem 1rem; font-size: 0.9rem; border-radius: var(--border-radius-medium); }
|
||||
|
||||
.search-box .site-search-btn { position: absolute; right: 0; top: 0; width: 3rem; height: 100%; z-index: 1; }
|
||||
|
||||
/* 关闭按钮样式 */
|
||||
.close-btn { position: absolute; right: 0; top: 0; background: var(--font-color-main); border-bottom-left-radius: var(--border-radius-medium); }
|
||||
|
||||
.close-btn i { color: var(--bg-color-main); }
|
||||
|
||||
/*---------- 搜索+分享+赞赏按钮样式end ----------*/
|
||||
1
usr/themes/HarmonyHues/assets/css/style.min.css
vendored
Executable file
1
usr/themes/HarmonyHues/assets/css/style.min.css
vendored
Executable file
File diff suppressed because one or more lines are too long
1832
usr/themes/HarmonyHues/assets/css/style.scss
Executable file
1832
usr/themes/HarmonyHues/assets/css/style.scss
Executable file
File diff suppressed because it is too large
Load Diff
190
usr/themes/HarmonyHues/assets/css/widgets.css
Executable file
190
usr/themes/HarmonyHues/assets/css/widgets.css
Executable file
@@ -0,0 +1,190 @@
|
||||
@charset "UTF-8";
|
||||
/* ------------------------------------ Harmony Hues主题 @author 星语社长 @link https://biibii.cn @update 2024-7-6 18:00:04 --------------------------------- */
|
||||
:root[data-theme=light] { /* 侧边栏-一言顶部渐变色 */ --hotposts-h-bg: linear-gradient(to right, rgba(254, 125, 125, 0.5), transparent); --newreply-h-bg: linear-gradient(to right, rgba(125, 254, 147, 0.5), transparent); --atoc-h-bg: linear-gradient(to right, rgba(125, 125, 254, 0.5), transparent); }
|
||||
|
||||
.hh-widget { overflow: hidden; background-image: var(--widget-bg-gradient); }
|
||||
|
||||
.hh-widget:first-child { margin-top: 0 !important; }
|
||||
|
||||
/* 侧边栏-工具-标题-顶部-背景 */
|
||||
.widget-title-top-bg { position: absolute; top: 0; left: 0; width: 100%; height: 3rem; opacity: 0.8; -webkit-mask: linear-gradient(var(--bg-color-main) -20%, transparent); mask: linear-gradient(var(--bg-color-main) -20%, transparent); z-index: -1; backdrop-filter: blur(5px); }
|
||||
|
||||
/* 侧边栏 - 博主信息 */
|
||||
.author-content { cursor: default; }
|
||||
|
||||
.author-content .author-info-avatar { position: relative; width: 5rem; height: 5rem; margin: 0 auto; }
|
||||
|
||||
.author-content .author-info-avatar .avatar-img { width: 5rem; height: 5rem; border: var(--border-solid-main); border-radius: var(--border-radius-circle); transition: var(--transition-ease-all); overflow: hidden; }
|
||||
|
||||
.author-content .author-info-avatar .author-oneline { position: absolute; width: 1rem; height: 1rem; right: 5px; bottom: 5px; background-color: var(--success); border-radius: var(--border-radius-circle); border: var(--border-solid-main); }
|
||||
|
||||
.author-content .author-info-avatar .author-oneline.author-offline { background-color: var(--secondary); }
|
||||
|
||||
.author-content .author-info-avatar:hover .avatar-img { border-radius: var(--border-radius-base); }
|
||||
|
||||
.author-content .author-nickname { color: var(--font-color-main); font-size: 1.1rem; }
|
||||
|
||||
.author-content .author-text { font-size: 0.9rem; color: var(--font-color-main-light); }
|
||||
|
||||
.author-content .blog-count-box .blog-count-item { margin: 0.1rem; color: var(--font-color-main); font-weight: 500; font-size: 0.85rem; background-image: linear-gradient(to right, var(--overlay-color-dark-1), transparent); border-radius: var(--border-radius-base); overflow: hidden; }
|
||||
|
||||
@keyframes spin { from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); } }
|
||||
|
||||
/* 侧边栏 - 一言 */
|
||||
.yiyan-widget { position: relative; }
|
||||
|
||||
.yiyan-widget .yiyan-date .yiyan-day { line-height: 1; font-weight: bold; font-size: 2.25rem; }
|
||||
|
||||
.yiyan-widget .yiyan-refresh-btn { position: absolute; top: 0.25rem; right: 0.25rem; color: var(--font-color-main-light); animation: spin 8s linear infinite; -webkit-animation: spin 8s linear infinite; }
|
||||
|
||||
.yiyan-widget .yiyan-refresh-btn:hover { cursor: pointer; color: var(--color-primary-light-1); }
|
||||
|
||||
.yiyan-widget .yiyan-content .yiyan-cover { position: relative; }
|
||||
|
||||
.yiyan-widget .yiyan-content .yiyan-cover img { width: 100%; height: 100%; max-height: 7rem; object-fit: cover; }
|
||||
|
||||
.yiyan-widget .yiyan-content .yiyan-cover::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); }
|
||||
|
||||
.yiyan-widget .yiyan-content .yiyan-text .yiyan-quote { font-size: 0.9rem; }
|
||||
|
||||
.yiyan-widget .yiyan-content .yiyan-text .yiyan-author { color: var(--font-color-main-light); font-size: 0.8rem; }
|
||||
|
||||
/* 侧边栏 - 恶魔之眼 */
|
||||
.devil-widget { background-color: #0e0e0e; }
|
||||
|
||||
.devil-widget .devil-content { position: relative; height: 6rem; }
|
||||
|
||||
.devil-widget .devil-eye-left, .devil-widget .devil-eye-right { overflow: hidden; height: 2rem; width: 45%; background-color: var(--danger); border-top-left-radius: 10px; border-top-right-radius: 10px; animation: naturalBlink 3.5s infinite; -webkit-animation: naturalBlink 3.5s infinite; }
|
||||
|
||||
.devil-widget .devil-eye-left { border-bottom-right-radius: 30px; border-bottom-left-radius: 100%; }
|
||||
|
||||
.devil-widget .devil-eye-right { border-bottom-right-radius: 100%; border-bottom-left-radius: 30px; }
|
||||
|
||||
@keyframes naturalBlink { 0%, 5%, 30%, 37%, 100% { transform: scaleY(1); }
|
||||
3%, 33% { transform: scaleY(0); } }
|
||||
|
||||
.devil-widget .devil-eye-o { width: 12px; height: 12px; background-color: #000; border-radius: 10px; animation: eyeMoveSmooth 5s ease-in-out infinite; -webkit-animation: eyeMoveSmooth 5s ease-in-out infinite; }
|
||||
|
||||
@keyframes eyeMoveSmooth { 0%, 100% { transform: translateX(70px); }
|
||||
50% { transform: translateX(0px); } }
|
||||
|
||||
.devil-widget .devil-text { font-size: 0.75rem; color: #6c757d; }
|
||||
|
||||
/* 侧边栏 - 热门文章 */
|
||||
.hotposts-widget .hotposts-item { font-size: 0.95rem; line-height: 2; /* 排名文字颜色背景 */ }
|
||||
|
||||
.hotposts-widget .hotposts-item .hotposts-number { font-size: 0.9rem; padding: 0 0.35rem; border-radius: var(--border-radius-small); color: var(--white); overflow: hidden; }
|
||||
|
||||
.hotposts-widget .hotposts-item:nth-child(1) .hotposts-number { background-color: #1a1a1a; }
|
||||
|
||||
.hotposts-widget .hotposts-item:nth-child(2) .hotposts-number { background-color: #333333; }
|
||||
|
||||
.hotposts-widget .hotposts-item:nth-child(3) .hotposts-number { background-color: #4d4d4d; }
|
||||
|
||||
.hotposts-widget .hotposts-item:nth-child(4) .hotposts-number { background-color: #666666; }
|
||||
|
||||
.hotposts-widget .hotposts-item:nth-child(5) .hotposts-number { background-color: #808080; }
|
||||
|
||||
.hotposts-widget .hotposts-item:nth-child(6) .hotposts-number { background-color: #999999; }
|
||||
|
||||
.hotposts-widget .hotposts-item .hotposts-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
|
||||
|
||||
/* 侧边栏 - 最新评论 */
|
||||
.newreply-widget { font-size: 0.9rem; overflow: hidden; max-height: 15rem; -webkit-mask: linear-gradient(var(--bg-color-main) 80%, transparent); mask: linear-gradient(var(--bg-color-main) 80%, transparent); }
|
||||
|
||||
.newreply-widget:hover { overflow: auto; }
|
||||
|
||||
.newreply-widget .newreply-item:last-child { padding-bottom: 1rem; }
|
||||
|
||||
.newreply-widget .avatar-img { width: 2rem; height: 2rem; border-radius: var(--border-radius-circle); overflow: hidden; border: var(--border-solid-main); }
|
||||
|
||||
.newreply-widget .comment-content { position: relative; line-height: 1.5rem; background-color: var(--bg-color-primary); border-radius: var(--border-radius-small); word-break: break-all; }
|
||||
|
||||
.newreply-widget .comment-content::before { position: absolute; content: ""; width: 0.8rem; height: 0.8rem; background-color: var(--bg-color-primary); top: -2px; left: 5px; z-index: -1; transform: rotate(45deg); }
|
||||
|
||||
.newreply-widget .comment-content:hover { background-color: var(--overlay-color-light-8); }
|
||||
|
||||
.newreply-widget .comment-content:hover::before { background-color: var(--overlay-color-light-8); }
|
||||
|
||||
.newreply-widget .comment-content img { width: auto; height: 1.5rem; }
|
||||
|
||||
.newreply-widget .comment-content p { margin: 0; }
|
||||
|
||||
.newreply-widget .comment-content .comment-content-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
|
||||
|
||||
/* 文章页面侧边栏 - 目录导航 */
|
||||
.atoc-content { font-size: 0.95rem; }
|
||||
|
||||
.atoc-content .atoc-item { position: relative; }
|
||||
|
||||
.atoc-content .atoc-item .atoc-link { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; transition: all 0.3s ease-in-out; }
|
||||
|
||||
.atoc-content .atoc-item .atoc-link.active { font-weight: bold; color: var(--color-primary-light-1); }
|
||||
|
||||
/* 首页侧边栏 - 博客路牌 */
|
||||
.blogsignage-widget .blogsignage-head { background-color: var(--color-primary-dark-1); color: var(--white); height: 3.5rem; font-size: 1.15rem; letter-spacing: 0.15rem; }
|
||||
|
||||
.blogsignage-widget .blogsignage-foot { font-size: 0.9rem; }
|
||||
|
||||
.blogsignage-widget .blogsignage-foot .iconfont { font-size: 1rem; display: inline-block; }
|
||||
|
||||
.blogsignage-widget .blogsignage-foot .blogsignage-foot-west .iconfont { transform: rotate(90deg); }
|
||||
|
||||
.blogsignage-widget .blogsignage-foot .blogsignage-foot-east .iconfont { transform: rotate(-90deg); }
|
||||
|
||||
/* 首页底部 - 样式 */
|
||||
.index-footer-widget { /* 首页底部-Hello */ /* 首页底部-时间之旅 */ }
|
||||
|
||||
.index-footer-widget .hello-widget { position: relative; height: 8rem; }
|
||||
|
||||
.index-footer-widget .hello-widget .hello-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay-color-dark-2); mix-blend-mode: overlay; -webkit-backdrop-filter: saturate(50%) blur(4px); backdrop-filter: saturate(50%) blur(4px); }
|
||||
|
||||
.index-footer-widget .hello-widget .hello-content .hello-text { color: var(--bg-color-main); font-size: 2rem; font-weight: bold; }
|
||||
|
||||
.index-footer-widget .hello-widget .hello-btn-group { position: absolute; bottom: 0.75rem; right: 0.75rem; }
|
||||
|
||||
.index-footer-widget .hello-widget .hello-btn-group .hello-btn-item { font-size: 0.8rem; color: var(--color-primary-light-5); background-color: var(--overlay-color-light-1); border-radius: var(--border-radius-small); }
|
||||
|
||||
.index-footer-widget .timejourney-widget { position: relative; background-image: var(--gradient-45deg); z-index: 0; }
|
||||
|
||||
.index-footer-widget .timejourney-widget .timejourney-progress { position: absolute; width: 0%; height: 100%; color: var(--bg-color-body); font-weight: bold; background-color: var(--font-color-main); z-index: -1; }
|
||||
|
||||
@media (max-width: 767.98px) { .index-footer-widget .timejourney-widget .timejourney-progress { font-size: 0.85rem; } }
|
||||
|
||||
.index-footer-widget .timejourney-widget .timejourney-content { width: 100%; height: 100%; color: var(--bg-color-body); }
|
||||
|
||||
.index-footer-widget .timejourney-widget .timejourney-content .timejourney-day { font-size: 1.5rem; font-weight: bold; }
|
||||
|
||||
@media (max-width: 767.98px) { .index-footer-widget .timejourney-widget .timejourney-content .timejourney-day { font-size: 0.85rem; } }
|
||||
|
||||
.index-footer-widget .timejourney-widget .timejourney-content .timejourney-desc, .index-footer-widget .timejourney-widget .timejourney-content .timejourney-unit { font-size: 0.8rem; }
|
||||
|
||||
.index-footer-widget .timejourney-widget .timejourney-content .timejourney-desc { color: var(--white); mix-blend-mode: difference; }
|
||||
|
||||
/* 首页顶部 - 轮播图样式 */
|
||||
.swiper-widget { overflow: hidden; }
|
||||
|
||||
.swiper-widget .swiper-container { position: relative; width: 100%; height: 15rem; overflow: hidden; }
|
||||
|
||||
@media (max-width: 767.98px) { .swiper-widget .swiper-container { height: 12rem !important; } }
|
||||
|
||||
@media (max-width: 575.98px) { .swiper-widget .swiper-container { height: 11rem !important; } }
|
||||
|
||||
.swiper-widget .swiper-container:hover .swiper-button-wrapper { opacity: 1; }
|
||||
|
||||
.swiper-widget .swiper-container .swiper-wrapper .swiper-slide-label { position: absolute; top: 0; right: 1rem; z-index: 1; font-size: 0.85rem; background-color: var(--bg-color-primary); border-bottom-right-radius: var(--border-radius-base); border-bottom-left-radius: var(--border-radius-base); overflow: hidden; border-bottom: var(--border-solid-main); border-inline: var(--border-solid-main); }
|
||||
|
||||
.swiper-widget .swiper-container .swiper-wrapper .swiper-slide-content { width: 100%; position: absolute; bottom: 0; color: var(--bg-color-main); background-image: linear-gradient(0deg, var(--overlay-color-dark-2) 15%, transparent 85%); }
|
||||
|
||||
.swiper-widget .swiper-container .swiper-wrapper .swiper-slide-content .swiper-slide-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; }
|
||||
|
||||
.swiper-widget .swiper-container .swiper-wrapper .swiper-slide-content .swiper-slide-description { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
|
||||
|
||||
.swiper-widget .swiper-container .swiper-button-wrapper { gap: 0.5rem; opacity: 0; position: absolute; bottom: 0; right: 0; z-index: 11; transition: opacity 0.5s ease-in-out; }
|
||||
|
||||
.swiper-widget .swiper-container .swiper-button-wrapper .swiper-button-prev, .swiper-widget .swiper-container .swiper-button-wrapper .swiper-button-next { width: 1.7rem; height: 1.7rem; background-color: var(--bg-color-body); mix-blend-mode: overlay; -webkit-backdrop-filter: saturate(50%) blur(10px); backdrop-filter: saturate(50%) blur(10px); border: var(--border-solid-small); border-radius: var(--border-radius-medium); }
|
||||
|
||||
.swiper-widget .swiper-container .swiper-button-wrapper .swiper-button-prev:hover, .swiper-widget .swiper-container .swiper-button-wrapper .swiper-button-next:hover { background-color: var(--bg-color-secondary); }
|
||||
|
||||
.swiper-widget .swiper-container .swiper-button-wrapper .swiper-button-prev .iconfont, .swiper-widget .swiper-container .swiper-button-wrapper .swiper-button-next .iconfont { font-size: 0.85rem; background-image: var(--widget-bg-gradient); border-radius: var(--border-radius-large); box-shadow: 2px 2px 15px 0 var(--overlay-color-dark-2); border: var(--border-solid-small); }
|
||||
1
usr/themes/HarmonyHues/assets/css/widgets.min.css
vendored
Executable file
1
usr/themes/HarmonyHues/assets/css/widgets.min.css
vendored
Executable file
File diff suppressed because one or more lines are too long
606
usr/themes/HarmonyHues/assets/css/widgets.scss
Executable file
606
usr/themes/HarmonyHues/assets/css/widgets.scss
Executable file
@@ -0,0 +1,606 @@
|
||||
/* ------------------------------------
|
||||
* Harmony Hues主题
|
||||
*
|
||||
* @author 星语社长
|
||||
* @link https://biibii.cn
|
||||
* @update 2024-7-6 18:00:04
|
||||
* --------------------------------- */
|
||||
:root[data-theme=light] {
|
||||
/* 侧边栏-一言顶部渐变色 */
|
||||
--hotposts-h-bg: linear-gradient(to right, rgba(254, 125, 125, 0.5), transparent);
|
||||
--newreply-h-bg: linear-gradient(to right, rgba(125, 254, 147, 0.5), transparent);
|
||||
--atoc-h-bg: linear-gradient(to right, rgba(125, 125, 254, 0.5), transparent);
|
||||
}
|
||||
|
||||
// 建议的标准断点定义
|
||||
$breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
);
|
||||
|
||||
// max-width 查询
|
||||
@mixin max-media-breakpoint($breakpoint-name) {
|
||||
$max-width: map-get($breakpoints, $breakpoint-name) - 0.02;
|
||||
|
||||
@media (max-width: $max-width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// 定义文本溢出省略号样式
|
||||
@mixin text-ellipsis($line-clamp: 2) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $line-clamp;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.hh-widget {
|
||||
overflow: hidden;
|
||||
background-image: var(--widget-bg-gradient);
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 侧边栏-工具-标题-顶部-背景 */
|
||||
.widget-title-top-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
opacity: 0.8;
|
||||
-webkit-mask: linear-gradient(var(--bg-color-main) -20%, transparent);
|
||||
mask: linear-gradient(var(--bg-color-main) -20%, transparent);
|
||||
z-index: -1;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
/* 侧边栏 - 博主信息 */
|
||||
.author-content {
|
||||
cursor: default;
|
||||
|
||||
.author-info-avatar {
|
||||
position: relative;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
margin: 0 auto;
|
||||
|
||||
.avatar-img {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border: var(--border-solid-main);
|
||||
border-radius: var(--border-radius-circle);
|
||||
transition: var(--transition-ease-all);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.author-oneline {
|
||||
position: absolute;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
background-color: var(--success);
|
||||
border-radius: var(--border-radius-circle);
|
||||
border: var(--border-solid-main);
|
||||
|
||||
&.author-offline {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .avatar-img {
|
||||
border-radius: var(--border-radius-base);
|
||||
}
|
||||
}
|
||||
|
||||
.author-nickname {
|
||||
color: var(--font-color-main);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.author-text {
|
||||
font-size: 0.9rem;
|
||||
color: var(--font-color-main-light);
|
||||
}
|
||||
|
||||
.blog-count-box {
|
||||
.blog-count-item {
|
||||
margin: 0.1rem;
|
||||
color: var(--font-color-main);
|
||||
font-weight: 500;
|
||||
font-size: 0.85rem;
|
||||
background-image: linear-gradient(to right, var(--overlay-color-dark-1), transparent);
|
||||
border-radius: var(--border-radius-base);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 旋转360度动画
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 侧边栏 - 一言 */
|
||||
.yiyan-widget {
|
||||
position: relative;
|
||||
|
||||
.yiyan-date {
|
||||
.yiyan-day {
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.yiyan-refresh-btn {
|
||||
position: absolute;
|
||||
top: 0.25rem;
|
||||
right: 0.25rem;
|
||||
color: var(--font-color-main-light);
|
||||
animation: spin 8s linear infinite;
|
||||
-webkit-animation: spin 8s linear infinite;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: var(--color-primary-light-1);
|
||||
}
|
||||
}
|
||||
|
||||
.yiyan-content {
|
||||
.yiyan-cover {
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 7rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.yiyan-text {
|
||||
.yiyan-quote {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.yiyan-author {
|
||||
color: var(--font-color-main-light);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 侧边栏 - 恶魔之眼 */
|
||||
.devil-widget {
|
||||
background-color: #0e0e0e;
|
||||
|
||||
.devil-content {
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
}
|
||||
|
||||
.devil-eye-left,
|
||||
.devil-eye-right {
|
||||
overflow: hidden;
|
||||
height: 2rem;
|
||||
width: 45%;
|
||||
background-color: var(--danger);
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
animation: naturalBlink 3.5s infinite;
|
||||
-webkit-animation: naturalBlink 3.5s infinite;
|
||||
}
|
||||
|
||||
|
||||
.devil-eye-left {
|
||||
border-bottom-right-radius: 30px;
|
||||
border-bottom-left-radius: 100%;
|
||||
}
|
||||
|
||||
.devil-eye-right {
|
||||
border-bottom-right-radius: 100%;
|
||||
border-bottom-left-radius: 30px;
|
||||
}
|
||||
|
||||
@keyframes naturalBlink {
|
||||
|
||||
0%,
|
||||
5%,
|
||||
30%,
|
||||
37%,
|
||||
100% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
3%,
|
||||
33% {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.devil-eye-o {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #000;
|
||||
border-radius: 10px;
|
||||
animation: eyeMoveSmooth 5s ease-in-out infinite;
|
||||
-webkit-animation: eyeMoveSmooth 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes eyeMoveSmooth {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(70px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.devil-text {
|
||||
font-size: 0.75rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
}
|
||||
|
||||
/* 侧边栏 - 热门文章 */
|
||||
.hotposts-widget {
|
||||
$rank-colors: (
|
||||
1: #1a1a1a,
|
||||
2: #333333,
|
||||
3: #4d4d4d,
|
||||
4: #666666,
|
||||
5: #808080,
|
||||
6: #999999
|
||||
);
|
||||
|
||||
.hotposts-item {
|
||||
font-size: 0.95rem;
|
||||
line-height: 2;
|
||||
|
||||
.hotposts-number {
|
||||
font-size: 0.9rem;
|
||||
padding: 0 0.35rem;
|
||||
border-radius: var(--border-radius-small);
|
||||
color: var(--white);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 排名文字颜色背景 */
|
||||
@each $rank, $color in $rank-colors {
|
||||
&:nth-child(#{$rank}) .hotposts-number {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.hotposts-title {
|
||||
@include text-ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 侧边栏 - 最新评论 */
|
||||
.newreply-widget {
|
||||
font-size: 0.9rem;
|
||||
overflow: hidden;
|
||||
max-height: 15rem;
|
||||
-webkit-mask: linear-gradient(var(--bg-color-main) 80%, transparent);
|
||||
mask: linear-gradient(var(--bg-color-main) 80%, transparent);
|
||||
|
||||
&:hover {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.newreply-item:last-child {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: var(--border-radius-circle);
|
||||
overflow: hidden;
|
||||
border: var(--border-solid-main);
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
position: relative;
|
||||
line-height: 1.5rem;
|
||||
background-color: var(--bg-color-primary);
|
||||
border-radius: var(--border-radius-small);
|
||||
word-break: break-all;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
background-color: var(--bg-color-primary);
|
||||
top: -2px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--overlay-color-light-8);
|
||||
|
||||
&::before {
|
||||
background-color: var(--overlay-color-light-8);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.comment-content-text {
|
||||
@include text-ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 文章页面侧边栏 - 目录导航 */
|
||||
.atoc-content {
|
||||
font-size: 0.95rem;
|
||||
|
||||
.atoc-item {
|
||||
position: relative;
|
||||
|
||||
.atoc-link {
|
||||
@include text-ellipsis;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
color: var(--color-primary-light-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 首页侧边栏 - 博客路牌 */
|
||||
.blogsignage-widget {
|
||||
.blogsignage-head {
|
||||
background-color: var(--color-primary-dark-1);
|
||||
color: var(--white);
|
||||
height: 3.5rem;
|
||||
font-size: 1.15rem;
|
||||
letter-spacing: 0.15rem;
|
||||
}
|
||||
|
||||
.blogsignage-foot {
|
||||
font-size: 0.9rem;
|
||||
|
||||
.iconfont {
|
||||
font-size: 1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.blogsignage-foot-west {
|
||||
.iconfont {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.blogsignage-foot-east {
|
||||
.iconfont {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 首页底部 - 样式 */
|
||||
.index-footer-widget {
|
||||
|
||||
/* 首页底部-Hello */
|
||||
.hello-widget {
|
||||
position: relative;
|
||||
height: 8rem;
|
||||
|
||||
.hello-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--overlay-color-dark-2);
|
||||
mix-blend-mode: overlay;
|
||||
-webkit-backdrop-filter: saturate(50%) blur(4px);
|
||||
backdrop-filter: saturate(50%) blur(4px);
|
||||
|
||||
.hello-text {
|
||||
color: var(--bg-color-main);
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.hello-btn-group {
|
||||
position: absolute;
|
||||
bottom: 0.75rem;
|
||||
right: 0.75rem;
|
||||
|
||||
.hello-btn-item {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-primary-light-5);
|
||||
background-color: var(--overlay-color-light-1);
|
||||
border-radius: var(--border-radius-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 首页底部-时间之旅 */
|
||||
.timejourney-widget {
|
||||
position: relative;
|
||||
background-image: var(--gradient-45deg);
|
||||
z-index: 0;
|
||||
|
||||
.timejourney-progress {
|
||||
position: absolute;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
color: var(--bg-color-body);
|
||||
font-weight: bold;
|
||||
background-color: var(--font-color-main);
|
||||
z-index: -1;
|
||||
|
||||
@include max-media-breakpoint('md') {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
.timejourney-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--bg-color-body);
|
||||
|
||||
.timejourney-day {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
|
||||
@include max-media-breakpoint('md') {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
.timejourney-desc,
|
||||
.timejourney-unit {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.timejourney-desc {
|
||||
color: var(--white);
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 首页顶部 - 轮播图样式 */
|
||||
.swiper-widget {
|
||||
overflow: hidden;
|
||||
|
||||
.swiper-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 15rem;
|
||||
overflow: hidden;
|
||||
|
||||
@include max-media-breakpoint('md') {
|
||||
height: 12rem !important;
|
||||
}
|
||||
|
||||
@include max-media-breakpoint('sm') {
|
||||
height: 11rem !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.swiper-button-wrapper {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-wrapper {
|
||||
.swiper-slide-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 1rem;
|
||||
z-index: 1;
|
||||
font-size: 0.85rem;
|
||||
background-color: var(--bg-color-primary);
|
||||
border-bottom-right-radius: var(--border-radius-base);
|
||||
border-bottom-left-radius: var(--border-radius-base);
|
||||
overflow: hidden;
|
||||
border-bottom: var(--border-solid-main);
|
||||
border-inline: var(--border-solid-main);
|
||||
}
|
||||
|
||||
.swiper-slide-content {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
color: var(--bg-color-main);
|
||||
background-image: linear-gradient(0deg, var(--overlay-color-dark-2) 15%, transparent 85%);
|
||||
|
||||
.swiper-slide-title {
|
||||
@include text-ellipsis(1);
|
||||
}
|
||||
|
||||
.swiper-slide-description {
|
||||
font-size: 0.85rem;
|
||||
@include text-ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-wrapper {
|
||||
gap: 0.5rem;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 11;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next {
|
||||
width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
background-color: var(--bg-color-body);
|
||||
mix-blend-mode: overlay;
|
||||
-webkit-backdrop-filter: saturate(50%) blur(10px);
|
||||
backdrop-filter: saturate(50%) blur(10px);
|
||||
border: var(--border-solid-small);
|
||||
border-radius: var(--border-radius-medium);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-color-secondary);
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 0.85rem;
|
||||
background-image: var(--widget-bg-gradient);
|
||||
border-radius: var(--border-radius-large);
|
||||
box-shadow: 2px 2px 15px 0 var(--overlay-color-dark-2);
|
||||
border: var(--border-solid-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_1.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_1.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_10.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_10.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_11.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_11.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_12.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_12.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_13.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_13.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_14.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_14.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_2.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_2.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_3.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_3.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_4.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_4.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_5.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_5.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_6.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_6.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_7.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_7.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_8.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_8.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_9.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/GIF/gif_9.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/3dyanjing.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/3dyanjing.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/aoye.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/aoye.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/baozha.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/baozha.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/beida.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/beida.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/buhaoyisi.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/buhaoyisi.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/cahan.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/cahan.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/caigou.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/caigou.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/caigouhua.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/caigouhua.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/changge.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/changge.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/chaojia.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/chaojia.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/chigua.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/chigua.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/chishou.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/chishou.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/chujiaren.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/chujiaren.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/damie.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/damie.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/dapai.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/dapai.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/daxiao.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/daxiao.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/dianhua.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/dianhua.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/doujiyan.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/doujiyan.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/exin.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/exin.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/fahongbao.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/fahongbao.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/fannao.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/fannao.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/fendou.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/fendou.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/fennu.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/fennu.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/fue.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/fue.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/gandong.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/gandong.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/ganga.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/ganga.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/goutou.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/goutou.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/goutoucao.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/goutoucao.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/goutouhua.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/goutouhua.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/goutoupangci.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/goutoupangci.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/goutoushiwang.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/goutoushiwang.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/goutouweibo.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/goutouweibo.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/guilian.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/guilian.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/guzhang.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/guzhang.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/haixiu.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/haixiu.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/haode.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/haode.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/haoqi.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/haoqi.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/hashiqi.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/hashiqi.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/hashiqishiquyishi.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/hashiqishiquyishi.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/hashiqishiwang.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/hashiqishiwang.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/heiha.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/heiha.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/heixian.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/heixian.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/huaji.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/huaji.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/huajibeizi.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/huajibeizi.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/huajiheshui.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/huajiheshui.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/huajikuanghan.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/huajikuanghan.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/huajinaicha.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/huajinaicha.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/huajiningmeng.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/huajiningmeng.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/huzi.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/huzi.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/jiaban.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/jiaban.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/jingxia.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/jingxia.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/jingya.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/jingya.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/jinyan.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/jinyan.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/jiujie.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/jiujie.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/kaixin.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/kaixin.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/kanchuanyiqie.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/kanchuanyiqie.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/koubi.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/koubi.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/kuqi.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/kuqi.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/leiben.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/leiben.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/liekai.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/liekai.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/lpl.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/lpl.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/lvmao.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/lvmao.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/mianqiangxiao.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/mianqiangxiao.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/nanyizhixin.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/nanyizhixin.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/niunianjinbao.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/niunianjinbao.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/qinqin.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/qinqin.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/sanbing.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/sanbing.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/shengbing.webp
Executable file
BIN
usr/themes/HarmonyHues/assets/emoji/Heo/shengbing.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user