mirror of
https://github.com/typecho/typecho.git
synced 2025-04-21 02:01:52 +02:00
update picocss to 2.0 (#1751)
This commit is contained in:
Fen
GitHub
parent
d84e261f7b
commit
fa107ffa51
@ -1,13 +1,13 @@
|
||||
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
|
||||
<footer class="site-footer container-fluid">
|
||||
<div class="d-flex justify-content-between container-inner">
|
||||
<div class="d-flex justify-content-between">
|
||||
<ul class="list-inline text-muted">
|
||||
<li>© <?php echo date('Y'); ?> <a href="<?php $this->options->siteUrl(); ?>"><?php $this->options->title(); ?></a></li>
|
||||
<li><a href="<?php $this->options->feedUrl(); ?>"><?php _e('RSS'); ?></a></li>
|
||||
</ul>
|
||||
<ul class="list-inline text-muted">
|
||||
<li>
|
||||
<?php _e('由 <a href="https://typecho.org">Typecho</a> 强力驱动'); ?>
|
||||
<?php _e('Powered by <a href="https://typecho.org">Typecho</a>'); ?>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -15,48 +15,46 @@
|
||||
<body>
|
||||
|
||||
<header class="site-navbar container-fluid">
|
||||
<div class="container-inner">
|
||||
<nav>
|
||||
<ul class="site-name">
|
||||
<?php if ($this->options->logoUrl): ?>
|
||||
<li><a href="<?php $this->options->siteUrl(); ?>" class="brand"><img src="<?php $this->options->logoUrl() ?>" alt="<?php $this->options->title() ?>"></a></li>
|
||||
<?php else: ?>
|
||||
<li>
|
||||
<a href="<?php $this->options->siteUrl(); ?>" class="brand"><?php $this->options->title() ?></a>
|
||||
</li>
|
||||
<li class="desc"><?php $this->options->description() ?></li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
<nav>
|
||||
<ul class="site-name">
|
||||
<?php if ($this->options->logoUrl): ?>
|
||||
<li><a href="<?php $this->options->siteUrl(); ?>" class="brand"><img src="<?php $this->options->logoUrl() ?>" alt="<?php $this->options->title() ?>"></a></li>
|
||||
<?php else: ?>
|
||||
<li>
|
||||
<a href="<?php $this->options->siteUrl(); ?>" class="brand"><?php $this->options->title() ?></a>
|
||||
</li>
|
||||
<li class="desc"><?php $this->options->description() ?></li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<label for="nav-toggler" class="nav-toggler-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" /></svg>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="nav-toggler" class="nav-toggler-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" /></svg>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="site-nav">
|
||||
<input type="checkbox" id="nav-toggler">
|
||||
<nav class="site-nav">
|
||||
<input type="checkbox" id="nav-toggler">
|
||||
|
||||
<ul class="nav-menu">
|
||||
<li>
|
||||
<a href="<?php $this->options->siteUrl(); ?>"<?php if ($this->is('index')): ?> class="active"<?php endif; ?>><?php _e('首页'); ?></a>
|
||||
</li>
|
||||
<ul class="nav-menu">
|
||||
<li>
|
||||
<a href="<?php $this->options->siteUrl(); ?>"<?php if ($this->is('index')): ?> class="active"<?php endif; ?>><?php _e('首页'); ?></a>
|
||||
</li>
|
||||
|
||||
<?php \Widget\Contents\Page\Rows::alloc()->to($pages); ?>
|
||||
<?php while ($pages->next()): ?>
|
||||
<li>
|
||||
<a href="<?php $pages->permalink(); ?>"<?php if ($this->is('page', $pages->slug)): ?> class="active"<?php endif; ?>><?php $pages->title(); ?></a>
|
||||
</li>
|
||||
<?php endwhile; ?>
|
||||
<li>
|
||||
<form method="post" action="<?php $this->options->siteUrl(); ?>">
|
||||
<input type="search" id="s" name="s">
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<?php \Widget\Contents\Page\Rows::alloc()->to($pages); ?>
|
||||
<?php while ($pages->next()): ?>
|
||||
<li>
|
||||
<a href="<?php $pages->permalink(); ?>"<?php if ($this->is('page', $pages->slug)): ?> class="active"<?php endif; ?>><?php $pages->title(); ?></a>
|
||||
</li>
|
||||
<?php endwhile; ?>
|
||||
<li>
|
||||
<form method="post" action="<?php $this->options->siteUrl(); ?>">
|
||||
<input type="search" id="s" name="s">
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
@ -15,14 +15,14 @@ $this->need('header.php');
|
||||
<main class="container">
|
||||
<div class="container-thin">
|
||||
<?php if (!($this->is('index')) and !($this->is('post'))): ?>
|
||||
<h4 class="text-center text-muted">
|
||||
<h6 class="text-center text-muted">
|
||||
<?php $this->archiveTitle([
|
||||
'category' => _t('分类 %s 下的文章'),
|
||||
'search' => _t('包含关键字 %s 的文章'),
|
||||
'tag' => _t('标签 %s 下的文章'),
|
||||
'author' => _t('%s 发布的文章')
|
||||
], '', ''); ?>
|
||||
</h4>
|
||||
</h6>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php while ($this->next()): ?>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,70 +0,0 @@
|
||||
/*!
|
||||
* Pico.css (https://picocss.com)
|
||||
* Licensed under MIT
|
||||
*/
|
||||
|
||||
// Customize
|
||||
// $enable-responsive-typography: false;
|
||||
|
||||
// Grey
|
||||
$grey-50: #f8fafc;
|
||||
$grey-100: #f1f5f9;
|
||||
$grey-200: #e2e8f0;
|
||||
$grey-300: #cbd5e1;
|
||||
$grey-400: #94a3b8;
|
||||
$grey-500: #64748b;
|
||||
$grey-600: #475569;
|
||||
$grey-700: #334155;
|
||||
$grey-800: #1e293b;
|
||||
$grey-900: #0f172a;
|
||||
|
||||
// Blue
|
||||
$primary-50: #d6f0ff;
|
||||
$primary-100: #b5e7ff;
|
||||
$primary-200: #83d9ff;
|
||||
$primary-300: #48c3ff;
|
||||
$primary-400: #1ea2ff;
|
||||
$primary-500: #0683ff;
|
||||
$primary-600: #0064e6;
|
||||
$primary-700: #0855c5;
|
||||
$primary-800: #0d4b9b;
|
||||
$primary-900: #0e2e5d;
|
||||
|
||||
// Config
|
||||
@import "../../../../../tools/node_modules/@picocss/pico/scss/variables";
|
||||
|
||||
// Theming
|
||||
@import "../../../../../tools/node_modules/@picocss/pico/scss/themes/default";
|
||||
|
||||
// Layout
|
||||
@import "../../../../../tools/node_modules/@picocss/pico/scss/layout/document"; // html
|
||||
@import "../../../../../tools/node_modules/@picocss/pico/scss/layout/sectioning"; // body, header, main, footer
|
||||
@import "../../../../../tools/node_modules/@picocss/pico/scss/layout/container"; // .container, .container-fluid
|
||||
@import "../../../../../tools/node_modules/@picocss/pico/scss/layout/section"; // section
|
||||
@import "../../../../../tools/node_modules/@picocss/pico/scss/layout/grid"; // .grid
|
||||
// @import "../../../../../tools/node_modules/@picocss/pico/scss/layout/scroller"; // figure
|
||||
|
||||
// Content
|
||||
@import "../../../../../tools/node_modules/@picocss/pico/scss/content/typography"; // a, headings, p, ul, blockquote, ...
|
||||
@import "../../../../../tools/node_modules/@picocss/pico/scss/content/embedded"; // audio, canvas, iframe, img, svg, video
|
||||
@import "../../../../../tools/node_modules/@picocss/pico/scss/content/button"; // button, a[role=button], type=button, type=submit ...
|
||||
@import "../../../../../tools/node_modules/@picocss/pico/scss/content/form"; // input, select, textarea, label, fieldset, legend
|
||||
// @import "../../../../../tools/node_modules/@picocss/pico/scss/content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
|
||||
@import "../../../../../tools/node_modules/@picocss/pico/scss/content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
|
||||
@import "../../../../../tools/node_modules/@picocss/pico/scss/content/table"; // table, tr, td, ...
|
||||
@import "../../../../../tools/node_modules/@picocss/pico/scss/content/code"; // pre, code, ...
|
||||
@import "../../../../../tools/node_modules/@picocss/pico/scss/content/miscs"; // hr, template, [hidden], dialog, canvas
|
||||
|
||||
// Components
|
||||
// @import "../../../../../tools/node_modules/@picocss/pico/scss/components/accordion"; // details, summary
|
||||
// @import "../../../../../tools/node_modules/@picocss/pico/scss/components/card"; // article
|
||||
// @import "../../../../../tools/node_modules/@picocss/pico/scss/components/modal"; // dialog
|
||||
@import "../../../../../tools/node_modules/@picocss/pico/scss/components/nav"; // nav
|
||||
// @import "../../../../../tools/node_modules/@picocss/pico/scss/components/progress"; // progress
|
||||
// @import "../../../../../tools/node_modules/@picocss/pico/scss/components/dropdown"; // dropdown
|
||||
|
||||
// Utilities
|
||||
// @import "../../../../../tools/node_modules/@picocss/pico/scss/utilities/loading"; // aria-busy=true
|
||||
// @import "../../../../../tools/node_modules/@picocss/pico/scss/utilities/tooltip"; // data-tooltip
|
||||
@import "../../../../../tools/node_modules/@picocss/pico/scss/utilities/accessibility"; // -ms-touch-action, aria-*
|
||||
@import "../../../../../tools/node_modules/@picocss/pico/scss/utilities/reduce-motion"; // prefers-reduced-motion
|
||||
@ -1,43 +1,68 @@
|
||||
@import "pico";
|
||||
@use "../../../../../tools/node_modules/@picocss/pico/scss" with (
|
||||
$modules: (
|
||||
// Layout
|
||||
"layout/landmarks": false,
|
||||
"layout/section": false,
|
||||
|
||||
// Forms
|
||||
"forms/checkbox-radio-switch": false,
|
||||
"forms/input-color": false,
|
||||
"forms/input-date": false,
|
||||
"forms/input-file": false,
|
||||
"forms/input-range": false,
|
||||
|
||||
// Components
|
||||
"components/accordion": false,
|
||||
"components/card": false,
|
||||
"components/dropdown": false,
|
||||
"components/group": false,
|
||||
"components/loading": false,
|
||||
"components/modal": false,
|
||||
"components/progress": false,
|
||||
"components/tooltip": false,
|
||||
)
|
||||
);
|
||||
|
||||
// Global Set
|
||||
:root {
|
||||
--border-radius: .5rem;
|
||||
--pico-border-radius: .5rem;
|
||||
}
|
||||
|
||||
body {
|
||||
cursor: auto;
|
||||
margin: 0;
|
||||
text-underline-offset: 0.2rem;
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
// button[type=submit],
|
||||
// input[type=submit] {
|
||||
// display: inline-block;
|
||||
// width: auto !important;
|
||||
// }
|
||||
|
||||
// Theme
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
--muted-border-color: #{$grey-200};
|
||||
--level-odd-color: #{$grey-50};
|
||||
--pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(50, 60, 68)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E")
|
||||
}
|
||||
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme]) {
|
||||
--background-color: #{$grey-900};
|
||||
--muted-border-color: #{$grey-700};
|
||||
--level-odd-color: #{$grey-800};
|
||||
--pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(194, 199, 208)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E")
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--background-color: #{$grey-900};
|
||||
--muted-border-color: #{$grey-700};
|
||||
--level-odd-color: #{$grey-800};
|
||||
--pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(194, 199, 208)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E")
|
||||
}
|
||||
|
||||
// Content
|
||||
h1, h2, h3, h4, h5 { line-height: 1.25; }
|
||||
h1, h2, h3, h4, h5 { line-height: 1.2; }
|
||||
|
||||
// Icon Size
|
||||
.is-sm {
|
||||
@ -48,11 +73,11 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
|
||||
// Utilities
|
||||
.text-muted,
|
||||
.text-muted a {
|
||||
color: var(--muted-color);
|
||||
color: var(--pico-secondary);
|
||||
}
|
||||
|
||||
.text-muted a:hover {
|
||||
color: var(--secondary-hover);
|
||||
color: var(--pico-secondary-hover);
|
||||
}
|
||||
|
||||
.text-center {
|
||||
@ -64,16 +89,16 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
|
||||
}
|
||||
|
||||
.ms-2 {
|
||||
margin-left: calc(var(--spacing) / 2);
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.me-2 {
|
||||
margin-right: calc(var(--spacing) / 2);
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.mx-2 {
|
||||
margin-left: calc(var(--spacing) / 2);
|
||||
margin-right: calc(var(--spacing) / 2);
|
||||
margin-left: .5rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.list-inline {
|
||||
@ -85,20 +110,17 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:not(:last-child) { margin-right: var(--spacing); }
|
||||
&:not(:last-child) { margin-right: 1rem; }
|
||||
}
|
||||
|
||||
svg { vertical-align: text-bottom; }
|
||||
}
|
||||
|
||||
// Layout
|
||||
.container-inner {
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
padding-left: calc(var(--spacing) / 2);
|
||||
padding-right: calc(var(--spacing) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
main.container {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.container-thin {
|
||||
@ -129,9 +151,6 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
|
||||
|
||||
// Header & Navbar
|
||||
.site-navbar {
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
@ -150,13 +169,11 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: var(--muted-color);
|
||||
color: var(--pico-secondary);
|
||||
display: none;
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
@media (min-width: 576px) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -182,7 +199,7 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
|
||||
|
||||
li {
|
||||
display: block;
|
||||
padding: calc(var(--spacing) * .5);
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
form {
|
||||
@ -206,32 +223,30 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
.site-navbar .container-inner,
|
||||
.site-nav { display: flex; }
|
||||
.site-navbar .container-inner nav:first-child { flex-grow: 1; }
|
||||
.nav-toggler-btn { display: none; }
|
||||
.nav-menu {
|
||||
display: flex !important;
|
||||
li:not(:last-child) { margin-right: calc(var(--spacing) / 2); }
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.site-navbar,
|
||||
.site-nav { display: flex; }
|
||||
.site-navbar nav:first-child { flex-grow: 1; }
|
||||
.nav-toggler-btn { display: none; }
|
||||
.nav-menu {
|
||||
display: flex !important;
|
||||
li:not(:last-child) { margin-right: .5rem; }
|
||||
}
|
||||
}
|
||||
|
||||
// Posts
|
||||
.post-separator {
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
margin: 4rem 0;
|
||||
}
|
||||
|
||||
.entry-header {
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
margin-bottom: var(--spacing);
|
||||
margin-bottom: 1rem;
|
||||
|
||||
a { color: var(--h1-color); }
|
||||
a { color: var(--pico-h2-color); }
|
||||
}
|
||||
|
||||
.entry-meta {
|
||||
@ -265,17 +280,16 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
|
||||
display: inline-block;
|
||||
font-size: .875rem;
|
||||
padding: 6px 16px;
|
||||
border: 1px solid var(--muted-border-color);
|
||||
color: var(--muted-color);
|
||||
border: 1px solid var(--pico-muted-border-color);
|
||||
color: var(--pico-muted-color);
|
||||
border-radius: 100px;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.post-nav {
|
||||
border-top: 1px solid var(--muted-border-color);
|
||||
padding-top: var(--spacing);
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
border-top: 1px solid var(--pico-muted-border-color);
|
||||
margin: 4rem 0;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
@ -286,14 +300,18 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
|
||||
.fmt {
|
||||
line-height: 1.6;
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--pico-underline);
|
||||
}
|
||||
pre, hr {
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
margin-bottom: var(--pico-typography-spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
.site-footer {
|
||||
padding-bottom: calc(var(--block-spacing-vertical) / 2);
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
// Comments
|
||||
@ -302,26 +320,19 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.comment-level-odd {
|
||||
background-color: var(--level-odd-color);
|
||||
}
|
||||
.comment-level-even {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
.comment-body {
|
||||
margin: calc(var(--spacing) * 1.5) 0;
|
||||
padding: var(--spacing);
|
||||
border: 1px solid var(--muted-border-color);
|
||||
border-radius: var(--border-radius);
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--pico-muted-border-color);
|
||||
border-radius: var(--pico-border-radius);
|
||||
}
|
||||
|
||||
.comment-by-author > .comment-author::after {
|
||||
content: "OP";
|
||||
margin-left: .25rem;
|
||||
color: var(--muted-color);
|
||||
color: var(--pico-muted-color);
|
||||
padding: 1px .375rem;
|
||||
border: 1px solid var(--muted-color);
|
||||
border: 1px solid var(--pico-muted-color);
|
||||
font-size: .75rem;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
@ -331,7 +342,7 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
|
||||
|
||||
.avatar {
|
||||
margin-right: .25rem;
|
||||
width: calc(var(--spacing) * 2);
|
||||
width: 2rem;
|
||||
border-radius: 48px;
|
||||
}
|
||||
|
||||
@ -339,30 +350,30 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
|
||||
cite a {
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
color: var(--h5-color);
|
||||
color: var(--pico-h2-color);
|
||||
}
|
||||
}
|
||||
|
||||
.comment-meta a,
|
||||
.comment-reply a {
|
||||
font-size: .875em;
|
||||
color: var(--muted-color);
|
||||
color: var(--pico-secondary);
|
||||
|
||||
&:hover { color: var(--secondary-hover); }
|
||||
&:hover { color: var(--pico-secondary-hover); }
|
||||
}
|
||||
|
||||
.comment-meta {
|
||||
display: inline-block;
|
||||
color: var(--muted-color);
|
||||
margin-left: calc(var(--spacing) / 4);
|
||||
color: var(--pico-muted-color);
|
||||
margin-left: .25rem;
|
||||
&::before {
|
||||
content: "·";
|
||||
margin-right: calc(var(--spacing) / 4);
|
||||
margin-right: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
margin-top: var(--spacing);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.comment-reply:blank {
|
||||
@ -370,21 +381,17 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
|
||||
}
|
||||
|
||||
.comment-awaiting-moderation {
|
||||
margin-left: calc(var(--spacing) / 2);
|
||||
margin-left: .5rem;
|
||||
font-size: .875em;
|
||||
color: var(--del-color);
|
||||
color: var(--pico-del-color);
|
||||
}
|
||||
|
||||
.comment-children {
|
||||
margin-bottom: calc(var(--spacing) * -1);
|
||||
margin-bottom: -1rem;
|
||||
}
|
||||
|
||||
// .comment-by-author {
|
||||
// background-color: var(--mark-background-color);
|
||||
// }
|
||||
|
||||
#response {
|
||||
margin-bottom: var(--spacing);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#cancel-comment-reply-link {
|
||||
@ -392,10 +399,10 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
|
||||
}
|
||||
|
||||
.respond {
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
margin-top: 1.5rem;
|
||||
|
||||
.comment-body & {
|
||||
margin-top: var(--spacing);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -423,6 +430,7 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
|
||||
}
|
||||
.next {
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
& a::after {
|
||||
content: "›";
|
||||
margin-left: .25rem;
|
||||
|
||||
@ -4,30 +4,27 @@
|
||||
*/
|
||||
|
||||
[data-theme="customize"] {
|
||||
--primary: #017FC0 !important;
|
||||
--primary-hover: #02659A !important;
|
||||
--background-color: #fffbeb !important;
|
||||
--muted-border-color: rgba(0, 0, 0, .1) !important;
|
||||
--form-element-border-color: rgba(0, 0, 0, .2) !important;
|
||||
--level-odd-color: rgba(0, 0, 0, .025) !important;
|
||||
--code-background-color: rgba(0, 0, 0, .05) !important;
|
||||
--pico-primary: #017FC0 !important;
|
||||
--pico-primary-hover: #02659A !important;
|
||||
--pico-background-color: #fffbeb !important;
|
||||
--pico-muted-border-color: rgba(0, 0, 0, .1) !important;
|
||||
--pico-form-element-border-color: rgba(0, 0, 0, .2) !important;
|
||||
--pico-code-background-color: rgba(0, 0, 0, .05) !important;
|
||||
}
|
||||
|
||||
.site-navbar {
|
||||
background-color: var(--primary);
|
||||
background-color: var(--pico-primary);
|
||||
}
|
||||
|
||||
.site-navbar a,
|
||||
.site-navbar .nav-toggler-btn,
|
||||
.site-navbar input[type="search"] {
|
||||
color: var(--primary-inverse);
|
||||
.site-navbar .nav-toggler-btn {
|
||||
color: var(--pico-primary-inverse);
|
||||
}
|
||||
|
||||
.site-navbar .desc {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
.site-navbar input[type="search"] {
|
||||
border-color: rgba(255, 255, 255, .25);
|
||||
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
.site-navbar input[type="search"]:not(:focus) {
|
||||
--pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user