原文链接美化多说评论框-Tory的星球
CSS样式如下:
[codee]
@charset "UTF-8"; /*! Name: Duoshuo Style of Material Design Version: 1.0.0 Url: https://itroy.cc Author: Troy Author Url: https://itroy.cc Description: A material design style for Duoshuo. Licensed under MIT. */ /* 多说 */ #ds-thread { padding: 10px calc((100% - 700px) / 2); margin: 0 auto; background-color: #eee; } @media (max-width: 568px) { #ds-thread { padding-right: 15px; padding-left: 15px; } } @media (max-width: 740px) { #ds-thread { width: auto; padding-right: 20px; padding-left: 20px; } } /* 字体 */ #ds-thread #ds-reset .ds-textarea-wrapper textarea, #ds-thread #ds-reset .ds-textarea-wrapper .ds-hidden-text { font-family: "Microsoft YaHei UI", "Microsoft YaHei"; font-size: 12px; letter-spacing: 1px; } /* 评论图标 */ #ds-thread #ds-reset ul.ds-comments-tabs .ds-service-icon { display: none; } /* 评论数量 */ #ds-thread #ds-reset .ds-comments-info { padding-top: 20px; } /* 喜欢 */ #ds-thread #ds-reset .ds-meta { padding-top: 20px; } /* 被顶起来的评论 */ #ds-thread #ds-reset #ds-hot-posts { margin: 8px 10px; } /* 头像 */ #ds-reset .ds-avatar { background: none; box-shadow: none; } /* 评论框 */ #ds-thread #ds-reset .ds-replybox { height: 100px; padding-left: 100px; margin-bottom: 50px; background: #fff; border-radius: 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); } /* 评论框头像 */ #ds-thread #ds-reset .ds-replybox .ds-avatar { position: absolute; width: 100px; height: 100px; margin: 0; overflow: hidden; background: #f7f7f7; border-radius: 2px 0 0 2px; } @media (max-width: 568px) { #ds-thread #ds-reset .ds-replybox .ds-avatar { width: 50px; height: 50px; } #ds-reset form { margin-left: 12px; } } #ds-thread #ds-reset .ds-replybox .ds-avatar img { width: 100%; height: 100%; border-radius: 0; } #ds-thread #ds-reset .ds-replybox .ds-avatar img:hover { width: 100%; height: 100%; border-radius: 0; } /* 评论头像 */ #ds-thread #ds-reset .ds-avatar img { width: 50px; height: 50px; border-radius: 50%; background: #f7f7f7; transition: transform .8s ease-out; } /* 评论框文字区域 */ #ds-thread #ds-reset .ds-textarea-wrapper { position: relative; border: 0; border-bottom: none; overflow: hidden; } #ds-thread #ds-reset .ds-textarea-wrapper textarea { height: 50px; letter-spacing: 0; line-height: 1.5; font-size: 14px; color: #333; } /* 发表按钮 */ #ds-thread #ds-reset .ds-post-button { position: absolute; font-family: "Material Icons"; font-size: 28px; right: 20px; width: 56px !important; height: 56px; padding: 0; overflow: hidden; color: #fff; background-color: #00bcd4; border: 0; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: .3s; /* Support for IE. */ font-feature-settings: 'liga'; } #ds-thread.ds-narrow #ds-reset .ds-post-button { width: 56px; } #ds-thread #ds-reset .ds-post-button:hover { background-color: #00bcd4; box-shadow: 0 2px 6px rgba(0,0,0,.3),0 4px 20px rgba(0,0,0,.2); } #ds-thread #ds-reset .ds-post-button:active { background-color: #00c7e1; } /* 评论框工具栏 */ #ds-thread #ds-reset .ds-post-toolbar { box-shadow: 0 0; } #ds-thread #ds-reset .ds-post-options { border: 0; } /* 评论信息 */ #ds-thread #ds-reset .ds-comments-info { border-top: 1px solid #ddd; } /* 隐藏分享选项 */ #ds-thread #ds-reset .ds-sync { display: none; } /* 评论数量 */ #ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current { display: block; padding: 0; background: none; border: 0; font-size: 40px; text-align: center; color: #222; } /* 一些杂项 */ #ds-thread #ds-reset .ds-comment-body { padding-left: 60px; } /* 信息框 */ #ds-notify { width: 360px; max-width: 360px; height: 77px; padding: 0; right: 0 !important; background-color: #1f1f1f; border: 1px solid #484848; transition: .3s; } #ds-notify #ds-reset { padding: 12px; } #ds-notify #ds-reset ul.ds-notify-unread li a { color: #fff; } /* 信息框 logo */ #ds-notify #ds-reset a.ds-logo { width: 50px; height: 50px; background: url(https://static.itroy.cc/ic_info_white_48dp_2x.png); background-size: cover; } /* 信息框 文字 */ #ds-notify #ds-reset ul.ds-notify-unread { line-height: 1.5; margin-left: 60px; }
[/codee]
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
- 最新
- 最热
查看全部