171 lines
3.1 KiB
Stylus
171 lines
3.1 KiB
Stylus
.page-container {
|
|
position relative
|
|
box-sizing border-box
|
|
width 100%
|
|
height auto
|
|
background var(--background-color)
|
|
|
|
+keep-tablet() {
|
|
padding-left 0 !important
|
|
}
|
|
|
|
|
|
.page-main-content {
|
|
box-sizing border-box
|
|
position relative
|
|
padding-top $header-height
|
|
|
|
&.home {
|
|
.transparent-1 {
|
|
background var(--header-transparent-background-1)
|
|
}
|
|
|
|
.transparent-2 {
|
|
background var(--header-transparent-background-2)
|
|
}
|
|
}
|
|
|
|
.header-shrink & {
|
|
padding-top $header-shrink-height
|
|
|
|
|
|
+keep-tablet() {
|
|
padding-top $header-shrink-height * 0.9
|
|
}
|
|
|
|
+keep-mobile() {
|
|
padding-top $header-shrink-height * 0.8
|
|
}
|
|
}
|
|
|
|
|
|
+keep-tablet() {
|
|
padding-top $header-height * 0.9
|
|
}
|
|
|
|
|
|
+keep-mobile() {
|
|
padding-top $header-height * 0.8
|
|
}
|
|
|
|
|
|
.page-main-content-top {
|
|
position fixed
|
|
top 0
|
|
right 0
|
|
z-index $z-index-5
|
|
box-sizing border-box
|
|
width 100%
|
|
height $header-height
|
|
transition-t("transform, height", "0, 0", "0.3, 0.2", "ease-out, ease")
|
|
|
|
&.hide {
|
|
transform translateY(-105%)
|
|
}
|
|
|
|
.header-shrink & {
|
|
height $header-shrink-height
|
|
|
|
+keep-tablet() {
|
|
height $header-shrink-height * 0.9
|
|
}
|
|
|
|
+keep-mobile() {
|
|
height $header-shrink-height * 0.8
|
|
}
|
|
}
|
|
|
|
|
|
+keep-tablet() {
|
|
height $header-height * 0.9
|
|
padding-left 0 !important
|
|
}
|
|
|
|
|
|
+keep-mobile() {
|
|
height $header-height * 0.8
|
|
}
|
|
}
|
|
|
|
|
|
.page-main-content-middle {
|
|
display flex
|
|
justify-content center
|
|
box-sizing border-box
|
|
width 100%
|
|
padding $component-spacing-value 0
|
|
|
|
+keep-tablet() {
|
|
padding $component-spacing-value * 0.8 0
|
|
}
|
|
|
|
+keep-mobile() {
|
|
padding $component-spacing-value * 0.6 0
|
|
}
|
|
|
|
.main-content {
|
|
position relative
|
|
box-sizing border-box
|
|
width $main-content-width
|
|
max-width $content-max-width
|
|
height 100%
|
|
|
|
+keep-tablet() {
|
|
width $main-content-width-tablet
|
|
}
|
|
|
|
+keep-mobile() {
|
|
width $main-content-width-mobile
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.page-main-content-bottom {
|
|
width 100%
|
|
}
|
|
}
|
|
|
|
|
|
.post-tools {
|
|
position fixed
|
|
top $header-height + $component-spacing-value
|
|
right $component-spacing-value
|
|
transition-t("top", "0", "0.2", "ease")
|
|
|
|
.header-shrink & {
|
|
top $header-shrink-height + $component-spacing-value
|
|
|
|
+keep-tablet() {
|
|
top $header-shrink-height * 0.9 + $component-spacing-value
|
|
}
|
|
|
|
+keep-mobile() {
|
|
top $header-shrink-height * 0.8 + $component-spacing-value
|
|
}
|
|
}
|
|
|
|
|
|
+keep-tablet() {
|
|
top $header-height * 0.9 + $component-spacing-value
|
|
right 10px
|
|
transform scale(0.82)
|
|
transform-origin right top
|
|
}
|
|
|
|
|
|
+keep-mobile() {
|
|
top $header-height * 0.8 + $component-spacing-value
|
|
right 5px
|
|
transform scale(0.72)
|
|
}
|
|
}
|
|
|
|
|
|
.right-bottom-side-tools {
|
|
position fixed
|
|
right 0
|
|
bottom 5%
|
|
}
|
|
}
|