权那他

54 分类: 原创内容

关于后台美化的MD视觉效果

多啦

Typecho 官方好久都没对后台美化了,相信大家都对自己的后台美化过的。

刚才在群里截图了我自己的Typecho博客后台的图片,发现有些朋友喜欢。
由于就是不知道大家是否需要,所有就没有在主题 Major 添加Typecho 后台的美化。

于是在这里分享一下。

注意,我昨晚只花了一个小时美化的,可能并不完全的MD风!
注意,我昨晚只花了一个小时美化的,可能并不完全的MD风!
注意,我昨晚只花了一个小时美化的,可能并不完全的MD风!

关于

对了 ,由于博主马上要高考了,为了集中精力进行二轮复习(一轮模拟考试考试失败了)。
所有今年上半年就不对 Major 更新,说白了,就是暂时进行任何编程,说了偶尔写点文章。
从而今年上半年 Major 的维护就靠 QQ群452935991 里面的大佬了,相关的维护在这个群的群文件上传。

回归主题

遵守

由于防止Typecho博客程序的更新的麻烦,近对Typecho css修改,并未破坏Typech 原有的html结构。这样有利于更新。

使用

其实仅需修改添加 admin/css/style.css

修改后,新清理浏览器缓存。
请接在原有的 css 后面添加,我仅是利用 css 的优先级,进行美化的。

你可以查看我的css文件。 https://krait.cn/account/css/style.css?v=17.10.30

body {
    background-color: #F5F5F5;
    overflow-x: hidden;
}

.container {
    max-width: 100%!important;
}

@media screen and (min-device-width:1024px) {
    ::-webkit-scrollbar-track {
        background-color: rgba(255,255,255,0)
    }

    ::-webkit-scrollbar {
        width: 6px;
        background-color: rgba(255,255,255,0)
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background-color: rgba(193,193,193,1)
    }
}

@media screen and (max-width: 700px) {
    .typecho-page-title {
        padding-left: 20px!important;
    }
}

.typecho-head-nav {
    background-color: #673AB7
}

#typecho-nav-list .focus .parent a,#typecho-nav-list .parent a:hover,#typecho-nav-list .root:hover .parent a {
    background: RGBA(255,255,255,0)
}

#typecho-nav-list ul:first-child {
    border-left: none;
}

.typecho-head-nav .operate a, #typecho-nav-list .parent a {
    border: 0;
    color: rgba(255,255,255,.6);
}

.typecho-head-nav .operate a:focus,.typecho-head-nav .operate a:hover {
    color: rgba(255,255,255,.8);
    background-color: #673AB7;
    outline: 0
}

#typecho-nav-list .child li a:hover {
    background-color: #673AB7;
}

#typecho-nav-list .child {
    background: #673AB7;
}

#typecho-nav-list .parent a {
    border-right: none;
}

.col-tb-offset-2 {
    margin-left: 0;
}

.col-mb-12 {
    width: 100%;
}

.typecho-dashboard .row [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.typecho-page-title {
    height: 100px;
    padding: 10px 40px 20px 40px;
    background-color: #673AB7;
    color: #FFF;
    font-size: 24px;
    margin-right: -10px;
    margin-left: -10px;
}

.typecho-option-tabs {
    padding: 0;
    margin: 0;
    height: 60px;
    background-color: #512DA8;
    margin-bottom: 40px!important;
    padding-left: 25px
}

.typecho-option-tabs li {
    margin: 0;
    border: none;
    float: left;
    position: relative;
    display: block;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase
}

.typecho-option-tabs a {
    height: auto;
    border: 0;
    color: rgba(255,255,255,.6);
    background-color: rgba(255,255,255,0)!important;
    padding: 17px 24px
}

.typecho-option-tabs a:hover {
    color: rgba(255,255,255,.8)
}

.message {
    background-color: #673AB7!important;
    color: #fff
}

.success {
    background-color: #673AB7;
    color: #fff
}

.current {
    background-color: #FFF;
    height: 4px;
    padding: 0!important;
    bottom: 0
}

.current a {
    color: #FFF
}

.typecho-option span {
    margin-right: 0
}

.typecho-option-submit {
    position: fixed;
    right: 32px;
    bottom: 32px
}

.typecho-option-submit button {
    float: right;
    background: #00BCD4;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    color: #FFF
}

.typecho-page-main .typecho-option textarea {
    height: 149px
}

.typecho-option label.typecho-label {
    font-weight: 500;
    margin-bottom: 20px;
    margin-top: 10px;
    font-size: 16px;
    padding-bottom: 5px;
    /* border-bottom: 1px solid rgba(0,0,0,.2); */
}

#use-intro {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    background-color: #fff;
    margin: 8px;
    padding: 8px;
    padding-left: 20px;
    margin-bottom: 40px
}

.typecho-foot {
    padding: 16px 40px;
    color: #9e9e9e;
    margin-top: 80px
}

.mdui-panel-item-title {
    width: auto!important
}

#start-link {
    background-color: #512DA8;
    color: white;
    margin: 0 0 2em;
    padding: 15px;
    /* padding-left: 2.5em; */
}

.col-mb-12 welcome-board p {
    color: white;
    margin: 0;
    background-color: #673AB7;
    text-align: right;
    padding: 0 15px 15px;
}

#start-link a {
    color: white
}

.welcome-board em {
    color: white;
}

.typecho-page-main {
    text-align: -webkit-auto;
}

.typecho-dashboard li {
    margin-bottom: 0;
    padding: 5px 0;
}

.welcome-board {
}

.welcome-board p {
    color: white;
    margin: 0;
    background-color: #5d2faf;
    text-align: right;
    padding: 0 15px 15px;
}

.latest-link {
    margin: 0 auto 2em;
    padding: 15px;
    color: rgba(0,0,0,.87);
    background-color: #fff;
    border-bottom: 1px solid rgba(0,0,0,.12);
    -webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
    -webkit-transition: margin .3s cubic-bezier(.4,0,.2,1);
    font-size: medium;
}

.manage-metas {
    margin-right: 0;
    margin-left: 0;
}

.col-mb-12 {
    width: 100% !important;
}

.col-mb-12 .clearfix:first-child {
    margin-left: -15px;
    margin-right: -15px;
}

.typecho-list-operate.clearfix {
    margin-left: 0!important;
    margin-right: 0!important;
}

.typecho-page-title h2 a {
    margin-left: 10px;
    padding: 3px 8px;
    background: #592bad;
    font-size: 14px;
    border-radius: 2px;
    color: white;
}

.typecho-dashboard li {
    margin-bottom: 0;
    padding: 5px 0;
    margin-right: 10px!important;
}

.latest-link a {
    color: black
}

Fork

Fork

#typecho

作者: 权那他

版权: 除特别声明,均采用BY-NC-SA 4.0许可协议,转载请表明出处

目录Content

仅有一条评论

  1. nice 拿走了 就是个人设置那个页面 更改密码按钮 有两个好像不大对劲

评论