You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
638 lines
14 KiB
638 lines
14 KiB
.l_main { |
|
width: ~"calc(100% - 1 * @{width_sidebar})"; |
|
@media(max-width: @on_desktop) { |
|
width: ~"calc(100% - 1 * @{width_sidebar_m})"; |
|
} |
|
@media(max-width: @on_pad) { |
|
width: 100%; |
|
} |
|
padding-right: @gap; |
|
&.no_sidebar{ |
|
width: 100%; |
|
padding-right: 0; |
|
max-width: @on_pad; |
|
margin: auto; |
|
~.l_side{ |
|
display: none; |
|
} |
|
} |
|
float: left; |
|
.post-list { |
|
position: relative; |
|
margin: @gap auto; |
|
column-gap: @gap; |
|
@media(max-width: @on_phone) { |
|
margin: 0; |
|
} |
|
&.multiple-columns{ |
|
columns: 320px; // 支持多列 |
|
} |
|
:first-child{ |
|
// margin-top: 0; |
|
} |
|
} |
|
ul.popular-posts{ |
|
h3{ |
|
padding: 0; |
|
margin: 0; |
|
font-size: @fontsize_base; |
|
} |
|
} |
|
#comments { |
|
position: relative; |
|
// padding-top: 1.5*@gap; |
|
@media(max-width: @on_phone) { |
|
// padding-top: @gap; |
|
} |
|
#valine_container{ |
|
p{ |
|
line-height: @lineheight_base; |
|
} |
|
img { |
|
display: inline; |
|
} |
|
.info{ |
|
// display: none; |
|
} |
|
.vwrap{ |
|
border-radius: @border_radius; |
|
border-style: dashed; |
|
border: 1px dashed fade(@color_text_main, 30%); |
|
.enable-trans(); |
|
&:hover{ |
|
border: 1px dashed fade(@theme_main, 100%); |
|
} |
|
.vheader{ |
|
.vinput{ |
|
border-radius: 0; |
|
border-bottom: 1px dashed fade(@color_text_main, 30%); |
|
&:hover{ |
|
border-bottom: 1px dashed @theme_main; |
|
} |
|
&:focus{ |
|
border-bottom: 1px solid @theme_main; |
|
} |
|
} |
|
} |
|
|
|
.vedit .vctrl span { |
|
color: @theme_main; |
|
padding: 0; |
|
margin: 10px; |
|
} |
|
|
|
} |
|
button{ |
|
border: none; |
|
padding-left: 2.4em; |
|
padding-right: 2.4em; |
|
font-weight: bold; |
|
background-color: @theme_main; |
|
color: @color_text_in_header; |
|
border-radius: @border_radius/2; |
|
.enable-trans(); |
|
&:hover { |
|
background: darken(@theme_main, 10%); |
|
} |
|
&:active { |
|
// background: lighten(@theme_main, 20%); |
|
} |
|
} |
|
blockquote{ |
|
padding: @gap; |
|
border-left: @border_radius_line solid @color_bg_quote; |
|
// border-radius: @border_radius_code_block; |
|
.enable-trans(); |
|
p{ |
|
text-align: left; |
|
word-wrap: normal; |
|
font-size: @fontsize_small; |
|
line-height: @fontsize_small * 1.5; |
|
} |
|
} |
|
pre code{ |
|
border: none; |
|
} |
|
code{ |
|
font-family: @fontfamily_code; |
|
font-size: @fontsize_base * .8; |
|
color: fade(@color_text_main, 90%); |
|
} |
|
a, .vemoji-btn, .vpreview-btn{ |
|
color: @color_text_link; |
|
.enable-trans(); |
|
&:hover { |
|
color: @color_text_highlight; |
|
text-decoration: underline; |
|
} |
|
&:active { |
|
color: darken(@color_text_highlight, 25%); |
|
} |
|
} |
|
div.info a{ |
|
font-size: @fontsize_footnote; |
|
} |
|
.vhead{ |
|
span{ |
|
&.vnick{ |
|
color: fade(@color_text_main, 90%); |
|
} |
|
} |
|
a{ |
|
&.vnick{ |
|
color: #ff9800; |
|
font-weight: bold; |
|
&:hover { |
|
color: @color_text_highlight; |
|
text-decoration: underline; |
|
} |
|
} |
|
} |
|
.vsys{ |
|
margin: 2px; |
|
padding: 1px 8px; |
|
background-color: fade(@color_text_main, 10%); |
|
} |
|
|
|
} |
|
.vcard{ |
|
.vquote{ |
|
border-left: none; |
|
} |
|
.vh { |
|
border-bottom: 1px dashed fade(@color_text_main, 10%); |
|
} |
|
} |
|
.vmeta{ |
|
.vat{ |
|
font-weight: bold; |
|
color: @theme_main; |
|
.enable-trans(); |
|
&:hover { |
|
color: @color_text_highlight; |
|
text-decoration: underline; |
|
} |
|
&:active { |
|
color: darken(@color_text_highlight, 25%); |
|
} |
|
} |
|
} |
|
.vinput{ |
|
color: @color_text_main; |
|
} |
|
p{ |
|
color: @color_text_main; |
|
} |
|
} |
|
.vemojis{ |
|
justify-content: space-between; |
|
i{ |
|
width: auto; |
|
height: 36px; |
|
padding: 0; |
|
margin: 8px 8px 0 8px; |
|
#emoji{ |
|
height: 24px; |
|
margin-top: 6px; |
|
background: transparent; |
|
} |
|
} |
|
} |
|
p{ |
|
#emoji{ |
|
display: inline; |
|
max-height: 28px; |
|
background: transparent; |
|
} |
|
} |
|
} |
|
.post-wrapper{ |
|
// for firefox |
|
column-break-inside: avoid; |
|
break-inside: avoid-column; |
|
} |
|
.mobile-post() { |
|
.post { |
|
.meta { |
|
margin-bottom: @gap; |
|
.title { |
|
font-size: @fontsize_article_title_phone; |
|
} |
|
} |
|
.full-width { |
|
margin-left: -@gap; |
|
margin-right: -@gap; |
|
padding-left: @gap; |
|
padding-right: @gap; |
|
width:~"calc(100% + 2 * @{gap})" |
|
} |
|
.auto-padding { |
|
padding-left: @gap; |
|
padding-right: @gap; |
|
border-bottom-left-radius: @border_radius; |
|
border-bottom-right-radius: @border_radius; |
|
overflow: auto; |
|
} |
|
.highlight{ |
|
margin-left: 0*@gap; |
|
margin-right: 0*@gap; |
|
width:~"calc(100% - 0 * @{gap})"; |
|
} |
|
@media(max-width:@on_phone) { |
|
padding: 1.5*@gap @gap; |
|
.highlight { |
|
margin-left: 0*@gap; |
|
margin-right: 0*@gap; |
|
width:~"calc(100% - 0 * @{gap})"; |
|
} |
|
.auto-padding { |
|
// padding-left: @gap; |
|
border-bottom-left-radius: 0; |
|
border-bottom-right-radius: 0; |
|
} |
|
} |
|
|
|
} |
|
} |
|
.post-wrapper { |
|
margin-bottom: @gap; |
|
.post { |
|
.meta { |
|
margin-bottom: @gap; |
|
.title { |
|
font-size: @fontsize_list_title; |
|
a { |
|
font-size: @fontsize_list_title; |
|
} |
|
} |
|
} |
|
.full-width { |
|
margin-left: -1.5*@gap; |
|
margin-right: -1.5*@gap; |
|
width:~"calc(100% + 3 * @{gap})" |
|
} |
|
.auto-padding { |
|
padding-left: 1.5*@gap; |
|
padding-right: 1.5*@gap; |
|
border-bottom-left-radius: @border_radius; |
|
border-bottom-right-radius: @border_radius; |
|
overflow: auto; |
|
} |
|
} |
|
.tags { |
|
margin-bottom: -2*@gap; |
|
} |
|
@media(max-width:@on_phone) { |
|
.tags { |
|
margin-bottom: -1.5*@gap; |
|
} |
|
.mobile-post(); |
|
} |
|
|
|
} |
|
.widget{ |
|
@media(max-width: @on_phone) { |
|
border-radius: 0; |
|
margin-left: 0; |
|
margin-right: 0; |
|
width: auto; |
|
} |
|
} |
|
.post { |
|
position: relative; |
|
margin: @gap auto; |
|
padding: 1.5*@gap; |
|
// background: @theme_cardbg; |
|
border-radius: @border_radius; |
|
h1{ |
|
font-weight: normal; |
|
font-size: @fontsize_article_title; |
|
line-height: @lineheight_base; |
|
color: @color_text_main; |
|
} |
|
@media(max-width: @on_phone) { |
|
border-radius: 0; |
|
&:hover { |
|
box-shadow: @boxshadow_card_normal; |
|
} |
|
} |
|
.tags a{ |
|
color: fade(@color_text_main, 70%); |
|
} |
|
.meta { |
|
color: fade(@color_text_main, 70%); |
|
&#header-meta{ |
|
margin-top: 0; |
|
margin-bottom: 1*@gap; |
|
} |
|
&#footer-meta{ |
|
margin-top: 2*@gap; |
|
margin-bottom: 0.5*@gap; |
|
} |
|
font-size: @fontsize_small * .95; |
|
.aplayer,.thumbnail{ |
|
.enable-trans(); |
|
width: 65px; |
|
height: 65px; |
|
border-radius: 100%; |
|
float: right; |
|
margin: 4px; |
|
box-shadow: @boxshadow_card_normal; |
|
&:hover { |
|
border-radius: 25%; |
|
transform: scale(1.1); |
|
box-shadow: @boxshadow_card_raised; |
|
} |
|
@media(max-width: @on_phone) { |
|
&:hover { |
|
border-radius: 100%; |
|
transform: scale(1); |
|
box-shadow: @boxshadow_card_normal; |
|
} |
|
} |
|
} |
|
.thumbnail{ |
|
width: auto; |
|
border-radius: 4px; |
|
box-shadow: none; |
|
&:hover { |
|
border-radius: 4px; |
|
transform: scale(1.1) rotate(4deg); |
|
box-shadow: none; |
|
} |
|
} |
|
.title { |
|
// left: 0; |
|
text-align: @text_align_h1; |
|
font-size: @fontsize_article_title; |
|
margin: 0; |
|
@media(max-width: @on_phone) { |
|
font-size: @fontsize_article_title_phone; |
|
} |
|
&:before { |
|
// content: "#"; |
|
} |
|
a { |
|
display: inline; |
|
line-height: @lineheight_base; |
|
font-weight: normal; |
|
color: @color_text_main; |
|
text-decoration: none; |
|
font-size: @fontsize_article_title; |
|
@media(max-width: @on_phone) { |
|
font-size: @fontsize_article_title_phone; |
|
} |
|
&:hover { |
|
color: @color_text_highlight; |
|
} |
|
} |
|
} |
|
@cellH: 28px; |
|
.new-meta-box{ |
|
@metaH: 24px; |
|
.enable-trans(); |
|
padding-top: 4px; |
|
padding-bottom: 8px; |
|
display: flex; |
|
align-items: center; |
|
flex-wrap: wrap; |
|
.new-meta-item{ |
|
color: fade(@color_text_main, 70%); |
|
font-size: @fontsize_small * 1; |
|
line-height: @metaH; |
|
&.link-btns{ |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: flex-start; |
|
.btn{ |
|
font-size: @fontsize_small * .9; |
|
line-height: @metaH - 4px; |
|
color: white; |
|
padding: 0 4px; |
|
border-radius: 2px; |
|
margin: 2px; |
|
&:extend(.hoverable); |
|
&:hover{ |
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 8px 16px 0 rgba(0, 0, 0, 0.1); |
|
} |
|
i{ |
|
padding-left: 3px; |
|
font-size: @fontsize_small * 1; |
|
} |
|
p{ |
|
color: white; |
|
} |
|
&:hover{ |
|
color: white; |
|
p{ |
|
color: white; |
|
} |
|
} |
|
} |
|
} |
|
.notlink{ |
|
cursor: default; |
|
&:hover{ |
|
color: fade(@color_text_main, 70%); |
|
p{ |
|
color: fade(@color_text_main, 70%); |
|
} |
|
} |
|
} |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
padding: 2px; |
|
margin: 0 8px 0 0; |
|
border-radius: 4px; |
|
&:last-child{ |
|
margin-right: 0; |
|
} |
|
img,i{ |
|
border-radius: 100%; |
|
display: inline; |
|
} |
|
i{ |
|
margin-right: 4px; |
|
border-radius: 0; |
|
&.fa-hashtag{ |
|
margin-right: 1px; |
|
} |
|
} |
|
p,a{ |
|
color: fade(@color_text_main, 70%); |
|
padding-left: 0; |
|
padding-right: 4px; |
|
} |
|
a{ |
|
font-family: @fontfamily_base; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
img{ |
|
height: @metaH - 7px; |
|
width: @metaH - 7px; |
|
margin-right: 5px; |
|
transform: translateY(-1px); |
|
} |
|
p{ |
|
margin: 0; |
|
padding-top: 2px; |
|
font-weight: normal; |
|
.enable-trans(); |
|
} |
|
&:hover{ |
|
color: @color_text_highlight; |
|
p{ |
|
color: @color_text_highlight; |
|
} |
|
text-decoration: none; |
|
} |
|
} |
|
} |
|
.share-body{ |
|
height: @metaH - 2px; |
|
display: flex; |
|
a{ |
|
padding: 0; |
|
margin-right: 4px; |
|
img{ |
|
height: @metaH - 2px; |
|
width: auto; |
|
background: transparent; |
|
} |
|
} |
|
} |
|
|
|
} |
|
|
|
} |
|
.full-width,.highlight{ |
|
margin-left: 0*@gap; |
|
margin-right: 0*@gap; |
|
width:~"calc(100% - 0 * @{gap})"; |
|
} |
|
|
|
img { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
max-width: 100%; |
|
border-radius: 4px; |
|
background: none; |
|
} |
|
span img{ |
|
display: inline-block; |
|
} |
|
a { |
|
img{ |
|
display: inline; |
|
} |
|
} |
|
} |
|
@media(max-width:@on_pad) { |
|
padding-right: 0; |
|
@media(max-width: @on_phone) { |
|
width: 100%; |
|
} |
|
.mobile-post(); |
|
} |
|
|
|
.prev-next{ |
|
width: 100%; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: baseline; |
|
color: fade(@color_text_main, 50%); |
|
margin: 0; |
|
.prev{ |
|
text-align: left; |
|
border-top-right-radius: 32px; |
|
border-bottom-right-radius: 32px; |
|
} |
|
.next{ |
|
text-align: right; |
|
border-top-left-radius: 32px; |
|
border-bottom-left-radius: 32px; |
|
} |
|
p{ |
|
margin: @gap; |
|
} |
|
a{ |
|
color: fade(@color_text_link, 90%); |
|
} |
|
section{ |
|
color: fade(@color_text_main, 80%); |
|
padding: @gap; |
|
border-radius: @border_radius; |
|
&:hover { |
|
color: @color_text_highlight; |
|
} |
|
} |
|
@media(max-width:@on_phone) { |
|
section{ |
|
border-radius: 0; |
|
} |
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.alert { |
|
display: none; |
|
position: fixed; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-50%,-50%); |
|
z-index: 99999; |
|
text-align: center; |
|
padding: 24px 36px 22px 36px; |
|
border-radius: @border_radius_code_block; |
|
box-shadow: @boxshadow_card_normal; |
|
font-family: @fontfamily_base; |
|
font-weight: bold; |
|
font-size: @fontsize_base; |
|
|
|
&.alert-success { |
|
color: darken(@color_mac_maximize, 20%); |
|
background-color: lighten(@color_mac_maximize, 40%); |
|
} |
|
|
|
&.alert-info { |
|
color: darken(@color_mac_finder, 20%); |
|
background-color: lighten(@color_mac_finder, 40%); |
|
} |
|
|
|
&.alert-warning { |
|
color: darken(@color_mac_minimize, 20%); |
|
background-color: lighten(@color_mac_minimize, 40%); |
|
} |
|
|
|
&.alert-danger { |
|
color: darken(@color_mac_close, 20%); |
|
background-color: lighten(@color_mac_close, 40%); |
|
} |
|
|
|
} |
|
|
|
details { |
|
display: block; |
|
background: @color_bg_code_block; |
|
padding: @gap; |
|
margin: .6em 0; |
|
border: 1px solid darken(@color_bg_code_block, 10%); |
|
border-radius: @border_radius_code_block; |
|
.enable-trans(); |
|
summary { |
|
cursor: pointer; |
|
padding: @gap; |
|
margin: -@gap; |
|
color: fade(@color_text_main, 70%); |
|
font-size: @fontsize_base * .95; |
|
font-weight: bold; |
|
&:hover { |
|
color: @color_text_highlight; |
|
} |
|
} |
|
}
|
|
|