mirror of
https://github.com/dillonzq/LoveIt.git
synced 2024-11-14 02:46:16 +01:00
Merge pull request #72 from dillonzq/feature/valine_dark_theme
feat(valine): add valine dark theme
This commit is contained in:
Dillon
GitHub
commit
f813ede1c5
6 changed files with 131 additions and 95 deletions
|
|
@ -5,3 +5,4 @@ katex@0.11.1
|
|||
aplayer@1.10.1
|
||||
animate.css@3.7.2
|
||||
mermaid@8.4.2
|
||||
valine@1.3.10
|
||||
|
|
|
|||
|
|
@ -1,113 +1,111 @@
|
|||
.aplayer {
|
||||
.dark-theme & {
|
||||
background: #212121;
|
||||
|
||||
&.aplayer-withlist {
|
||||
.aplayer-info {
|
||||
border-bottom-color: #5c5c5c;
|
||||
}
|
||||
}
|
||||
|
||||
&.aplayer-fixed {
|
||||
.aplayer-list {
|
||||
border-color: #5c5c5c;
|
||||
}
|
||||
}
|
||||
|
||||
.aplayer-body {
|
||||
background-color: #212121;
|
||||
}
|
||||
.dark-theme .aplayer {
|
||||
background: #212121;
|
||||
|
||||
&.aplayer-withlist {
|
||||
.aplayer-info {
|
||||
border-top-color: #212121;
|
||||
border-bottom-color: #5c5c5c;
|
||||
}
|
||||
}
|
||||
|
||||
.aplayer-info {
|
||||
.aplayer-music {
|
||||
.aplayer-title {
|
||||
color: #fff;
|
||||
}
|
||||
&.aplayer-fixed {
|
||||
.aplayer-list {
|
||||
border-color: #5c5c5c;
|
||||
}
|
||||
}
|
||||
|
||||
.aplayer-author {
|
||||
color: #fff;
|
||||
}
|
||||
.aplayer-body {
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.aplayer-info {
|
||||
border-top-color: #212121;
|
||||
}
|
||||
|
||||
.aplayer-info {
|
||||
.aplayer-music {
|
||||
.aplayer-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.aplayer-controller {
|
||||
.aplayer-time {
|
||||
color: #eee;
|
||||
.aplayer-author {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.aplayer-icon {
|
||||
path {
|
||||
fill: #eee;
|
||||
}
|
||||
.aplayer-controller {
|
||||
.aplayer-time {
|
||||
color: #eee;
|
||||
|
||||
.aplayer-icon {
|
||||
path {
|
||||
fill: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aplayer-list {
|
||||
background-color: #212121;
|
||||
.aplayer-list {
|
||||
background-color: #212121;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
li {
|
||||
color: #fff;
|
||||
border-top-color: #666;
|
||||
|
||||
&:hover {
|
||||
background: #4e4e4e;
|
||||
}
|
||||
|
||||
&.aplayer-list-light {
|
||||
background: #6c6c6c;
|
||||
}
|
||||
|
||||
.aplayer-list-index {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.aplayer-list-author {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.aplayer-lrc {
|
||||
text-shadow: -1px -1px 0 #666;
|
||||
|
||||
&:before {
|
||||
background: -moz-linear-gradient(top, rgba(33,33,33,1) 0%, rgba(33,33,33,0) 100%);
|
||||
background: -webkit-linear-gradient(top, rgba(33,33,33,1) 0%,rgba(33,33,33,0) 100%);
|
||||
background: linear-gradient(to bottom, rgba(33,33,33,1) 0%,rgba(33,33,33,0) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#00212121',GradientType=0 );
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: -moz-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);
|
||||
background: -webkit-linear-gradient(top, rgba(33,33,33,0) 0%,rgba(33,33,33,0.8) 100%);
|
||||
background: linear-gradient(to bottom, rgba(33,33,33,0) 0%,rgba(33,33,33,0.8) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00212121', endColorstr='#cc212121',GradientType=0 );
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
.aplayer-miniswitcher {
|
||||
background: #484848;
|
||||
li {
|
||||
color: #fff;
|
||||
border-top-color: #666;
|
||||
|
||||
.aplayer-icon {
|
||||
path {
|
||||
fill: #eee;
|
||||
}
|
||||
&:hover {
|
||||
background: #4e4e4e;
|
||||
}
|
||||
|
||||
&.aplayer-list-light {
|
||||
background: #6c6c6c;
|
||||
}
|
||||
|
||||
.aplayer-list-index {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.aplayer-list-author {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aplayer-lrc {
|
||||
text-shadow: -1px -1px 0 #666;
|
||||
|
||||
&:before {
|
||||
background: -moz-linear-gradient(top, rgba(33,33,33,1) 0%, rgba(33,33,33,0) 100%);
|
||||
background: -webkit-linear-gradient(top, rgba(33,33,33,1) 0%,rgba(33,33,33,0) 100%);
|
||||
background: linear-gradient(to bottom, rgba(33,33,33,1) 0%,rgba(33,33,33,0) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#00212121',GradientType=0 );
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: -moz-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);
|
||||
background: -webkit-linear-gradient(top, rgba(33,33,33,0) 0%,rgba(33,33,33,0.8) 100%);
|
||||
background: linear-gradient(to bottom, rgba(33,33,33,0) 0%,rgba(33,33,33,0.8) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00212121', endColorstr='#cc212121',GradientType=0 );
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.aplayer-miniswitcher {
|
||||
background: #484848;
|
||||
|
||||
.aplayer-icon {
|
||||
path {
|
||||
fill: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
32
assets/css/lib/valine/dark.scss
Normal file
32
assets/css/lib/valine/dark.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
.dark-theme {
|
||||
// copied from https://github.com/xCss/Valine/issues/221
|
||||
.v *,
|
||||
.v .vwrap input,
|
||||
.v .vwrap input::placeholder,
|
||||
.v .veditor,
|
||||
.v .veditor::placeholder,
|
||||
.v a,
|
||||
.v a:hover {
|
||||
color: hsla(0,0%,100%,.75);
|
||||
opacity: 1;
|
||||
}
|
||||
.v .vbtn {
|
||||
color: hsla(0,0%,100%,.75);
|
||||
background: #333;
|
||||
border: none;
|
||||
}
|
||||
.v .vbtn:hover {
|
||||
color: #3090e4;
|
||||
border-color: #3090e4;
|
||||
}
|
||||
.v .vlist .vcard .vhead .vsys {
|
||||
background: #333;
|
||||
}
|
||||
.v code, .v pre {
|
||||
background: #272C34;
|
||||
}
|
||||
}
|
||||
|
||||
.v code, .v pre {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
{{- /* Gitalk Comment System */ -}}
|
||||
{{- if .Site.Params.gitalk.owner -}}
|
||||
<div id="gitalk_container"></div>
|
||||
<div id="gitalk"></div>
|
||||
{{- with $CDN.gitalk_css -}}
|
||||
{{- slice . | $.Scratch.Add "linkCDN" -}}
|
||||
{{- else -}}
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
admin: ['{{ .Site.Params.gitalk.owner }}'],
|
||||
body: decodeURI(location.href),
|
||||
});
|
||||
gitalk.render('gitalk_container');
|
||||
gitalk.render('gitalk');
|
||||
});
|
||||
</script>
|
||||
<noscript>
|
||||
|
|
@ -46,7 +46,8 @@
|
|||
|
||||
{{- /* Valine Comment System */ -}}
|
||||
{{- if .Site.Params.valine.enable -}}
|
||||
<div id="valine_container"></div>
|
||||
<div id="valine"></div>
|
||||
{{- slice "css/lib/valine/dark.scss" | .Scratch.Add "linkLocal" -}}
|
||||
{{- with $CDN.valine_js -}}
|
||||
{{- slice . | $.Scratch.Add "scriptCDN" -}}
|
||||
{{- else -}}
|
||||
|
|
@ -55,7 +56,7 @@
|
|||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
new Valine({
|
||||
el: '#valine_container',
|
||||
el: '#valine',
|
||||
appId: '{{ .Site.Params.valine.appId }}',
|
||||
appKey: '{{ .Site.Params.valine.appKey }}',
|
||||
{{- with .Site.Params.valine.placeholder -}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
.dark-theme .v *,.dark-theme .v .vwrap input,.dark-theme .v .vwrap input::placeholder,.dark-theme .v .veditor,.dark-theme .v .veditor::placeholder,.dark-theme .v a,.dark-theme .v a:hover{color:rgba(255,255,255,0.75);opacity:1}.dark-theme .v .vbtn{color:rgba(255,255,255,0.75);background:#333;border:none}.dark-theme .v .vbtn:hover{color:#3090e4;border-color:#3090e4}.dark-theme .v .vlist .vcard .vhead .vsys{background:#333}.dark-theme .v code,.dark-theme .v pre{background:#272C34}.v code,.v pre{text-align:left}
|
||||
|
||||
/*# sourceMappingURL=dark.css.map */
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"Target":"css/lib/valine/dark.css","MediaType":"text/css","Data":{}}
|
||||
Loading…
Reference in a new issue