菜单
控制台
概要
个人设置
插件
外观
编辑文件 style.css
备份
撰写
撰写文章
创建页面
管理
文章
独立页面
评论
分类
标签
文件
用户
友情链接
设置
基本
评论
阅读
永久链接
测试管理员
登出
网站
编辑文件 style.css
可以使用的外观
编辑
blue
外观
设置外观
编辑源码
/* 全局属性 */ :root { /* 纯蓝:#0f59a4 */ --theme-color: #a61b29; } * { color: white; font-family: "dgdhethrferyhaer"; word-wrap: break-word; word-break: break-all; -webkit-tap-highlight-color: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: '仓耳渔阳体'; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } *::selection { --bg: rgba(255, 255, 255, .5) !important; background: var(--bg); color: inherit; } *::-moz-selection { background: var(--bg); color: inherit; } *::-webkit-selection { background: var(--bg); color: inherit; } .mb-30 { margin-bottom: 30px; } .me-3 { margin-right: 15px; } body { background-color: var(--theme-color); margin: 0 auto; max-width: 1400px; } [role="button"], [type="button"], button { cursor: pointer; } a { text-decoration: none; } .me-20 { margin-left: 20px; } /* 网页头部 */ .nav { border-bottom: 1px dashed rgba(255, 255, 255, 0.5); padding: 20px; display: flex; flex-wrap: wrap; color: white; align-items: center; position: sticky; top: 0; background-color: inherit; z-index: 10; } .sticky-top { position: sticky; top: 0; } .nav .title { font-size: 25px; font-weight: bold; } .nav .link-list { margin-left: auto; } .nav .link-list a:not(:first-child) { margin-left: 20px; } .nav .link-list a.active { font-weight: bold; border-bottom: 1px solid white; padding-bottom: 3px; } /* 左边栏 */ .article-list { float: left; width: 75%; padding: 30px 20px; } .article-list .main-title { font-size: 25px; font-weight: bold; margin-bottom: 30px; } .article { border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 10px; overflow: hidden; transition: border-color .3s; padding-bottom: 20px; display: block; } .article:not(:last-child) { margin-bottom: 30px; } .article:hover, .article.active { border-color: rgba(255, 255, 255, 0.5); } .article .title { font-weight: bold; font-size: 30px; margin-bottom: 20px; background-color: rgba(255, 255, 255, 0.05); padding: 20px; display: block; transition: background-color .3s; line-height: 1.5em; } .article:hover .title, .article.active .title { background-color: rgba(255, 255, 255, 0.1); } .article .time { padding-bottom: 2px; border: 0 10px 2px; border-style: dashed; border-color: white; border-width: 0 0 1px; } .article .meta { display: flex; margin-bottom: 20px; } .keywords { margin-bottom: 20px; text-align: left; } .meta a, .keywords .tag { padding: 3px 5px; border-radius: 5px; } .keywords .tag { margin-bottom: 10px; } .keywords .tag:not(:first-child) { margin-left: 10px; } /* 文章正文 */ .markdown-body { background-color: unset; padding: 0 20px; } .markdown-body a, .meta a, .keywords .tag { color: white; background-color: rgba(255, 255, 255, 0.1); display: inline-block; } .markdown-body a:hover, .meta a:hover, .keywords .tag:hover { background-color: rgba(255, 255, 255, 0.2); } .markdown-body a { border-bottom: 1px solid white; } .markdown-body img { border-radius: 10px; } /* 侧边栏 */ .sidebar { float: left; width: 25%; padding: 30px 20px 30px 0; } .sidebar .card { padding-bottom: 30px; } .sidebar .card:not(:last-child) { margin-bottom: 30px; border-bottom: 1px solid white; } .sidebar .card .title { font-size: 20px; padding: 10px; border-radius: 10px; margin-bottom: 15px; background-color: rgba(255, 255, 255, 0.1); text-align: center; } .sidebar .card-body li { margin-top: 5px; } /* 网页底部 */ footer { clear: both; text-align: center; padding: 20px 0 40px 20px; line-height: 1.5em; } footer div { display: inline-block; } footer div { margin-right: 20px; margin-bottom: 10px; } /* 评论区 */ .comment-author { display: flex; align-items: center; } .comment-author .avatar { margin-right: 10px; border-radius: 16px; } .comments textarea, .comments input { background-color: rgba(255, 255, 255, 0.05); padding: 8px 10px; outline: none; font-size: 18px; display: block; flex: 1; border: none; width: 100%; } .comments .comment-content { background-color: rgba(255, 255, 255, 0.1); padding: 8px 10px; margin: 15px 0; border-radius: 8px; } .comments .comment-content * { margin: 0; padding: 0; line-height: 1.5em; } .comments textarea { border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 5px; margin-bottom: 20px; } .comments .inputs { display: flex; margin: 0 -15px; align-items: center; } .comments .inputs .item label { padding: 0 15px; } .comments .inputs .item { flex: 30%; display: flex; align-items: center; margin: 0 15px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 5px; margin-bottom: 20px; } .comments textarea::placeholder, .comments input::placeholder { color: rgba(255, 255, 255, 0.5); } .comments .textarea-label { margin-bottom: 10px; display: inline-block; } .comments .submit { background-color: rgba(255, 255, 255, 0.1); border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.5); padding: 10px 15px; font-size: 18px; } .comments .submit:hover { background-color: rgba(255, 255, 255, 0.2); } .comments ol { list-style: none; } :not(.comment-children)>.comment-list { padding-left: 0; } .comment-body.comment-parent { border: 3px dashed rgba(255, 255, 255, 0.5); } .comments .comment-body { padding: 15px 20px; border-radius: 10px; margin-bottom: 20px; } .comment-body.comment-child { margin-top: 20px; background-color: rgba(255, 255, 255, 0.05); border-left: 2px solid rgba(255, 255, 255, 0.2); } /* 分页组件 */ .page-navigator { list-style: none; padding: 0; text-align: center; } .page-navigator li, .page-navigator a { display: inline-block; } .page-navigator a { padding: 6px 10px; border-radius: 5px; background-color: rgba(255, 255, 255, 0.1); } .page-navigator a:hover { background-color: rgba(255, 255, 255, 0.2); } .page-navigator li:not(:first-child) { margin-left: 10px; } .cancel-comment-reply { margin-top: 20px; } @media screen and (max-width: 1400px) { .article-list { width: 75%; } .sidebar { width: 25%; } } @media screen and (max-width: 1200px) { .article-list { width: 72%; } .sidebar { width: 28%; } } @media screen and (max-width: 1000px) { .article-list { width: 70%; } .sidebar { width: 30%; } .comments .inputs { flex-wrap: wrap; } .comments .inputs .item { flex: 100%; } } @media screen and (max-width: 800px) { .article-list { width: 100%; } .sidebar { width: 100%; padding-top: 0; } .sidebar .card { margin-left: 20px; } .comments .inputs { flex-wrap: nowrap; } .comments .inputs .item { flex: 30%; } } @media screen and (max-width: 600px) { .nav { position: inherit; } .nav .title { width: 100%; text-align: center; margin-bottom: 20px; } .nav .link-list { width: 100%; margin-left: 0; text-align: center; } .article-list { width: 100%; } .sidebar { width: 100%; } .article .title { font-size: 25px; text-align: center; } .article .meta { justify-content: center; } .comments .inputs { flex-wrap: wrap; } .comments .inputs .item { flex: 100%; } .comment-children .comment-list { padding-left: 15px; } }
保存文件
模板文件
archive.php
comments.php
declare.php
footer.php
functions.php
header.php
index.php
page.php
post.php
sidebar.php
style.css
Typecho
由
Typecho
强力驱动, 版本 1.2.1
帮助文档
•
支持论坛
•
报告错误
•
资源下载