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.
720 lines
14 KiB
720 lines
14 KiB
/* Basic Settings */ |
|
|
|
* { |
|
box-sizing: border-box; |
|
outline: none; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
|
|
/* My Base */ |
|
|
|
html { |
|
color: @color_text_main; |
|
width: 100%; |
|
height: 100%; |
|
font-family: @fontfamily_base; |
|
font-size: @fontsize_base; |
|
line-height: 1.5rem; |
|
-webkit-text-size-adjust: 100%; |
|
-ms-text-size-adjust: 100%; |
|
text-rendering: optimizelegibility; |
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
|
} |
|
|
|
body { |
|
background-color: @theme_background; |
|
&.modal-active { |
|
overflow: hidden; |
|
@media (max-width: @on_modal_threshold) { |
|
position: fixed; |
|
top: 0; |
|
right: 0; |
|
bottom: 0; |
|
left: 0; |
|
} |
|
} |
|
&.z_menu-open { |
|
.menu-phone { |
|
transform: translate3d(-@gap, 0, 0); |
|
} |
|
} |
|
} |
|
|
|
fancybox{ |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
.backstretch { |
|
|
|
} |
|
.cover-wrapper{ |
|
padding-bottom: 2px; |
|
.cover{ |
|
top: 0; |
|
left: 0; |
|
max-width: 100%; |
|
height: ~"calc(100vh)"; |
|
display: flex; |
|
flex-wrap: nowrap; |
|
flex-direction: column; |
|
align-items: center; |
|
align-self: center; |
|
align-content: center; |
|
color: fade(@color_text_main, 75%); |
|
padding: @gap; |
|
.title, .logo{ |
|
margin-top: ~"calc(30vh)"; |
|
text-align: center; |
|
} |
|
.title{ |
|
font-size: @fontsize_h1*2; |
|
line-height: @fontsize_h1*2; |
|
} |
|
.subtitle{ |
|
font-size: @fontsize_small; |
|
} |
|
.logo{ |
|
max-height: 100px; |
|
max-width: ~"calc(100% - 4*@{gap})"; |
|
} |
|
.white{ |
|
color: white; |
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); |
|
} |
|
@media(max-width: @on_phone){ |
|
.title, .logo { |
|
font-size: @fontsize_h1*1.7; |
|
line-height: @fontsize_h1*1.7; |
|
} |
|
} |
|
.m_search{ |
|
@iconW: 32px; |
|
@iconMargin: 4px; |
|
margin-top: ~"calc(2vh + 32px)"; |
|
position: relative; |
|
max-width: ~"calc(100% - 1*@{gap})"; |
|
width: 340px; |
|
// @media(max-width: @on_laptop){ |
|
// width: 1.4*@width_sidebar_m; |
|
// } |
|
line-height: @height_navbar - @gap; |
|
vertical-align: middle; |
|
.form { |
|
position: relative; |
|
display: block; |
|
width: 100%; |
|
} |
|
.icon,.input{ |
|
.enable-trans(.3s); |
|
} |
|
.icon { |
|
position: absolute; |
|
display:block; |
|
line-height: @searchbar_height_cover; |
|
height: @searchbar_height_cover; |
|
width: @iconW; |
|
top: 0; |
|
left: @iconMargin+1px; |
|
font-size: @fontsize_base; |
|
color: fade(@color_text_main, 60%); |
|
} |
|
.input { |
|
display: block; |
|
font-size: @fontsize_base; |
|
line-height: @fontsize_base; |
|
height: @searchbar_height_cover; |
|
width: 100%; |
|
color: @color_text_main; |
|
box-shadow: none; |
|
box-sizing: border-box; |
|
-webkit-appearance: none; |
|
padding-left: @iconW + @iconMargin; |
|
@media(max-width: @on_phone){ |
|
padding-left: @iconW + @iconMargin; |
|
} |
|
border-radius: @height_navbar; |
|
background: lighten(@theme_cardbg, 10%); |
|
border: 1px dashed transparent; |
|
.set-placeholder({ |
|
padding-top: 2px; |
|
font-size: @fontsize_small; |
|
color: fade(@color_text_main, 60%); |
|
}); |
|
&:hover{ |
|
~.icon{ |
|
color: @theme_main; |
|
} |
|
} |
|
&:focus { |
|
~.icon{ |
|
color: @theme_main; |
|
} |
|
border: 1px solid @theme_main; |
|
} |
|
} |
|
|
|
} |
|
&.half{ |
|
margin-bottom: ~"calc(-100px)"; |
|
height: ~"calc(60vh - @{height_navbar} + 120px)"; |
|
.title, .logo{ |
|
margin-top: ~"calc(28vh - 80px)"; |
|
} |
|
.m_search{ |
|
margin-top: @gap*2; |
|
} |
|
@media(max-width: @on_pad){ |
|
height: ~"calc(40vh - @{height_navbar} + 160px)"; |
|
.title, .logo{ |
|
margin-top: ~"calc(22vh - 90px)"; |
|
} |
|
} |
|
@media(max-width: @on_phone){ |
|
height: ~"calc(30vh - @{height_navbar} + 200px)"; |
|
.title, .logo{ |
|
margin-top: ~"calc(22vh - 70px)"; |
|
} |
|
} |
|
} |
|
.menu{ |
|
margin-top: @gap; |
|
ul { |
|
display: flex; |
|
flex-wrap: wrap; |
|
align-items: baseline; |
|
justify-content: center; |
|
li { |
|
display: flex; |
|
flex-wrap: wrap; |
|
align-items: center; |
|
padding: 0; |
|
height: auto; |
|
} |
|
} |
|
ul > li > a{ |
|
font-size: @fontsize_small; |
|
padding: 2px; |
|
margin: 0 4px; |
|
.enable-trans(); |
|
color: fade(@color_text_main, 85%); |
|
border-bottom: 1px solid transparent; |
|
&:hover, &.active, &:active{ |
|
color: @theme_main; |
|
border-bottom: 1px solid @theme_main; |
|
} |
|
&.white{ |
|
color: fade(white, 70%); |
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); |
|
&:hover, &.active, &:active{ |
|
color: white; |
|
border-bottom: 1px solid white; |
|
} |
|
} |
|
} |
|
} |
|
.switcher{ |
|
& > li{ |
|
a{ |
|
&:hover { |
|
background: fade(@theme_main, 15%); |
|
} |
|
} |
|
} |
|
} |
|
|
|
} |
|
} |
|
|
|
|
|
|
|
.z-depth-nav { |
|
box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.24), 0 3px 6px 0px rgba(0, 0, 0, 0.1); |
|
} |
|
.z-depth-nav-raised { |
|
box-shadow: @boxshadow_card_raised; |
|
} |
|
|
|
.hoverable { |
|
.enable-trans(); |
|
box-shadow: 0; |
|
} |
|
|
|
.hoverable:hover { |
|
.enable-trans(); |
|
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); |
|
} |
|
|
|
::-moz-selection { |
|
background: @color_bg_selection; |
|
} |
|
|
|
::selection { |
|
background: @color_bg_selection; |
|
} |
|
// transition |
|
.enable-trans(@time: 0.25s){ |
|
transition: all @time ease; |
|
-moz-transition: all @time ease; |
|
-webkit-transition: all @time ease; |
|
-o-transition: all @time ease; |
|
} |
|
|
|
.set-placeholder(@rules){ |
|
&::-webkit-input-placeholder {@rules();} |
|
&:-moz-placeholder {@rules();} |
|
&::-moz-placeholder {@rules();} |
|
&:-ms-input-placeholder {@rules();} |
|
} |
|
|
|
|
|
h1, |
|
h2, |
|
h3, |
|
h4, |
|
h5, |
|
h6 { |
|
-webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; |
|
-moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; |
|
-o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; |
|
text-rendering: geometricPrecision; |
|
margin: 0 0 0.4em 0; |
|
} |
|
|
|
h1 { |
|
font-size: @fontsize_h1; |
|
} |
|
|
|
h2 { |
|
font-size: @fontsize_h2; |
|
} |
|
|
|
h3 { |
|
font-size: @fontsize_h3; |
|
} |
|
|
|
h4 { |
|
font-size: @fontsize_h4; |
|
} |
|
|
|
h5 { |
|
font-size: @fontsize_h5; |
|
} |
|
|
|
h6 { |
|
font-size: @fontsize_h6; |
|
} |
|
|
|
a { |
|
color: @black; |
|
cursor: pointer; |
|
text-decoration: none; |
|
.enable-trans(); |
|
&:hover { |
|
text-decoration: none; |
|
} |
|
} |
|
|
|
pre { |
|
tab-size: 4; |
|
-moz-tab-size: 4; |
|
-o-tab-size: 4; |
|
-webkit-tab-size: 4; |
|
} |
|
|
|
img { |
|
max-width: 100%; |
|
} |
|
|
|
|
|
/** |
|
* Util |
|
*/ |
|
|
|
.clearfix { |
|
zoom: 1; |
|
&:before, |
|
&:after { |
|
content: " "; // 1 |
|
display: table; // 2 |
|
} |
|
&:after { |
|
clear: both; |
|
} |
|
} |
|
|
|
|
|
.hidden { |
|
text-indent: -9999px; |
|
visibility: hidden; |
|
display: none; |
|
} |
|
|
|
.inner { |
|
position: relative; |
|
width: 80%; |
|
max-width: 710px; |
|
margin: 0 auto; |
|
} |
|
|
|
.vertical { |
|
display: table-cell; |
|
vertical-align: middle; |
|
} |
|
|
|
.right { |
|
float: right; |
|
} |
|
|
|
.left { |
|
float: left; |
|
} |
|
|
|
.disable-trans { |
|
-moz-transition: none !important; |
|
-webkit-transition: none !important; |
|
transition: none !important; |
|
} |
|
|
|
.txt-ellipsis { |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
|
|
ul, |
|
ol { |
|
padding-left: 0; |
|
} |
|
|
|
li { |
|
list-style: none; |
|
} |
|
|
|
.mark { |
|
position: relative; |
|
a { |
|
color: @black; |
|
background: transparent; |
|
display: inline-block; |
|
padding: 0 8px; |
|
border-left: @border_radius_line solid transparent; |
|
background: transparent; |
|
border-radius: @border_radius_code_block; |
|
.enable-trans(); |
|
&:hover { |
|
background: fade(@theme_main, 10%); |
|
border-left: @border_radius_line solid @theme_main; |
|
padding: 8px; |
|
} |
|
&:active { |
|
border-left: 2*@border_radius_line solid @theme_main; |
|
} |
|
|
|
} |
|
} |
|
|
|
ul.h-list { |
|
display: flex; |
|
align-items: center; |
|
height: 100%; |
|
&>li { |
|
// flex: none; |
|
height: 100%; |
|
justify-content: center; |
|
} |
|
} |
|
|
|
|
|
/** |
|
* Loading bar |
|
*/ |
|
|
|
#loading-bar-wrapper { |
|
position: fixed; |
|
top: @height_navbar - @loading_height; |
|
// top: 0; |
|
left: 0; |
|
width: 100%; |
|
// overflow: scroll; |
|
z-index: 99999; |
|
} |
|
|
|
#loading-bar { |
|
position: fixed; |
|
width: 0; |
|
height: @loading_height; |
|
// height: @height_navbar; |
|
.enable-trans(); |
|
background-color: fade(@theme_main, 50%); |
|
} |
|
|
|
.body-wrapper { |
|
position: relative; |
|
display: flex; |
|
width: 100%; |
|
max-width: @width_container; |
|
margin: 0 auto; |
|
flex-wrap: wrap; |
|
justify-content: space-between; |
|
align-items: stretch; |
|
} |
|
|
|
.container--flex { |
|
display: flex; |
|
flex-wrap: nowrap; |
|
justify-content: space-between; |
|
align-items: center; |
|
} |
|
|
|
.l_body { |
|
position: relative; |
|
margin: @gap; |
|
margin-top: @gap; |
|
&.nocover{ |
|
margin-top: @gap + @height_navbar; |
|
} |
|
@media(max-width: @on_phone) { |
|
margin: @height_navbar + @gap 0 @gap; |
|
border-radius: 0; |
|
} |
|
// padding-top: -@gap/2; |
|
.s-top{ |
|
.enable-trans(0.6s); |
|
z-index: 9; |
|
position: fixed; |
|
width: 48px; |
|
height: 48px; |
|
line-height: 48px; |
|
border-radius: 100%; |
|
bottom: @gap*2; |
|
right: @gap*2; |
|
transform: translateY(100px) scale(0); |
|
transform-origin: bottom; |
|
color: @color_text_main; |
|
@media(max-width: @on_pad) { |
|
right: @gap; |
|
} |
|
&.show{ |
|
transform: translateY(0) scale(1); |
|
&.hl{ |
|
background: @theme_main; |
|
color: white; |
|
box-shadow: @boxshadow_card_normal; |
|
} |
|
} |
|
@media(min-width: @on_pad) { |
|
&:hover{ |
|
transform: scale(1.2); |
|
border-radius: 25%; |
|
background: @theme_main; |
|
color: white; |
|
box-shadow: @boxshadow_card_raised; |
|
&.hl{ |
|
box-shadow: @boxshadow_card_raised; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.white-box{ |
|
background: @theme_cardbg; |
|
} |
|
.reveal { |
|
// visibility: hidden; |
|
} |
|
|
|
.btn-wrapper{ |
|
a { |
|
line-height: @lineheight_base * 1.3; |
|
background: @color_text_link; |
|
color: @color_text_in_header; |
|
padding: 3px 5px 1px 5px; |
|
margin: 2px; |
|
border-radius: 2px; |
|
.enable-trans(); |
|
&:hover { |
|
color: @color_text_in_header; |
|
text-decoration: none; |
|
background: @color_text_highlight; |
|
} |
|
} |
|
&[regular] { |
|
a { |
|
line-height: @lineheight_base * 1.8; |
|
padding: 9px 16px 7px 16px; |
|
i { |
|
margin-right: 2px; |
|
} |
|
} |
|
} |
|
&[large] { |
|
a { |
|
line-height: @lineheight_base * 3; |
|
padding: 11px 40px 10px 40px; |
|
i { |
|
margin: 0 5px 0 -2px; |
|
} |
|
} |
|
} |
|
&[center] { |
|
display: block; |
|
text-align: center; |
|
} |
|
} |
|
|
|
.btns-wrapper{ |
|
display: flex; |
|
flex-wrap: wrap; |
|
margin: .6em -@gap/2; |
|
align-items: flex-start; |
|
&[wide]{ |
|
a{ |
|
padding-left: @gap*2; |
|
padding-right: @gap*2; |
|
} |
|
} |
|
&[fill]{ |
|
a{ |
|
flex-grow: 1; |
|
width: auto; |
|
} |
|
} |
|
&[around]{ |
|
justify-content: space-around; |
|
} |
|
&[center]{ |
|
justify-content: center; |
|
} |
|
&[grid2]{ |
|
a{ |
|
width:~"calc(100%/2 - @{gap})"; |
|
@media(max-width: @on_laptop){ |
|
width:~"calc(100%/2 - @{gap})"; |
|
} |
|
@media(max-width: @on_pad){ |
|
width:~"calc(100%/2 - @{gap})"; |
|
} |
|
@media(max-width: @on_phone){ |
|
width:~"calc(100%/1 - @{gap})"; |
|
} |
|
} |
|
} |
|
&[grid3]{ |
|
a{ |
|
width:~"calc(100%/3 - @{gap})"; |
|
@media(max-width: @on_laptop){ |
|
width:~"calc(100%/3 - @{gap})"; |
|
} |
|
@media(max-width: @on_pad){ |
|
width:~"calc(100%/3 - @{gap})"; |
|
} |
|
@media(max-width: @on_phone){ |
|
width:~"calc(100%/1 - @{gap})"; |
|
} |
|
} |
|
} |
|
&[grid4]{ |
|
a{ |
|
width:~"calc(100%/4 - @{gap})"; |
|
@media(max-width: @on_laptop){ |
|
width:~"calc(100%/3 - @{gap})"; |
|
} |
|
@media(max-width: @on_pad){ |
|
width:~"calc(100%/3 - @{gap})"; |
|
} |
|
@media(max-width: @on_phone){ |
|
width:~"calc(100%/2 - @{gap})"; |
|
} |
|
} |
|
} |
|
&[grid5]{ |
|
a{ |
|
width:~"calc(100%/5 - @{gap})"; |
|
@media(max-width: @on_laptop){ |
|
width:~"calc(100%/4 - @{gap})"; |
|
} |
|
@media(max-width: @on_pad){ |
|
width:~"calc(100%/3 - @{gap})"; |
|
} |
|
@media(max-width: @on_phone){ |
|
width:~"calc(100%/2 - @{gap})"; |
|
} |
|
} |
|
} |
|
|
|
a{ |
|
.enable-trans(); |
|
margin: @gap/2; |
|
margin-top: ~"calc(@{gap}*1.25 + 32px)"; |
|
min-width: 120px; |
|
font-weight: bold; |
|
display: flex; |
|
justify-content: flex-start; |
|
align-content: center; |
|
align-items: center; |
|
flex-direction: column; |
|
line-height: @lineheight_base; |
|
padding: @gap/2; |
|
text-align: center; |
|
font-size: @fontsize_small; |
|
&>img:first-child, &>i:first-child{ |
|
.enable-trans(); |
|
height: 64px; |
|
width: 64px; |
|
&[auto]{ |
|
width: auto; |
|
} |
|
margin: @gap @gap/2 @gap/4 @gap/2; |
|
margin-top: ~"calc(-@{gap}*1.25 - 32px)"; |
|
border: 2px solid @theme_cardbg; |
|
background: @color_text_in_header; |
|
line-height: 60px; |
|
font-size: 28px; |
|
} |
|
&>i:first-child{ |
|
color: @color_text_in_header; |
|
background: @color_text_link; |
|
} |
|
background: darken(@color_bg_code_block, 10%); |
|
border-radius: 4px; |
|
color: @color_text_main; |
|
p,b{ |
|
margin: .25em; |
|
font-weight: normal; |
|
line-height: 1.25; |
|
word-wrap: break-word; |
|
} |
|
b{ |
|
font-size: @fontsize_base; |
|
font-weight: bold; |
|
line-height: 1.3; |
|
} |
|
img{ |
|
margin: .4em auto; |
|
} |
|
&:hover{ |
|
text-decoration: none; |
|
background: fade(@color_text_highlight, 15%); |
|
&>img:first-child, &>i:first-child{ |
|
transform: scale(1.1) translateY(-8px); |
|
box-shadow: @boxshadow_base_4; |
|
} |
|
&>i:first-child{ |
|
background: @color_text_highlight; |
|
} |
|
} |
|
} |
|
&[circle] > a { |
|
&>img:first-child, &>i:first-child{ |
|
border-radius: 32px; |
|
} |
|
} |
|
&[rounded] > a { |
|
&>img:first-child, &>i:first-child{ |
|
border-radius: 16px; |
|
} |
|
} |
|
}
|
|
|