594 lines
11 KiB
SCSS
594 lines
11 KiB
SCSS
@charset "utf-8";
|
|
|
|
@import './colors.scss';
|
|
@import './variables.scss';
|
|
@import './mixins.scss';
|
|
@import "../../node_modules/bulma/bulma.sass";
|
|
@import "./overrides.scss";
|
|
|
|
@import url('/vendor/croppa/vue-croppa.min.css');
|
|
// @import '../../node_modules/animate.css/source/_base.css';
|
|
// nav.navbar {
|
|
// padding-left: 5rem;
|
|
// padding-right: 5rem;
|
|
// }
|
|
html{
|
|
scroll-behavior: smooth;
|
|
}
|
|
.hero-bg{
|
|
// @include pattern(#c0ebfa, #7FD7F5);
|
|
// @include pattern(#c1d7df, rgb(183, 236, 253));
|
|
background-image: url('/images/clouds-bg.svg');
|
|
background-size: cover;
|
|
background-color: #fff;
|
|
position: relative;
|
|
// @include linearGradient(#eef6fc, #f8afaf);
|
|
// background: url('/images/whale.svg') 15% 25% no-repeat, linear-gradient(to bottom, #eef6fc 0%, #f8afaf 100%);
|
|
// background-size: 250px, auto;
|
|
// background-position: ;
|
|
// background-repeat: no-repeat;
|
|
}
|
|
|
|
.hero-bg-svg{
|
|
background-image: url("/images/cloudgroup.svg"), url('/images/sun+clouds.svg');
|
|
background-size: cover, contain;
|
|
background-position: center, center;
|
|
background-repeat: no-repeat, no-repeat;
|
|
}
|
|
|
|
.bg-moon-stars{
|
|
background-image: url('/images/moon+stars.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
.bg-sun-cloud{
|
|
background-image: url('/images/sun+cloud.svg');
|
|
background-position: center top;
|
|
background-repeat: no-repeat;
|
|
// background-size: ;
|
|
}
|
|
|
|
.bg-flower{
|
|
background-image: url('/images/flowers.svg');
|
|
background-position: right bottom;
|
|
background-repeat: no-repeat;
|
|
background-size: 40%;
|
|
// background-size: contain;
|
|
}
|
|
|
|
.scroll-down-indicator{
|
|
position: absolute;
|
|
bottom: 25px;
|
|
left: 50%;
|
|
animation: bounce 1.5s;
|
|
animation-delay: 1s;
|
|
animation-iteration-count: 2;
|
|
transform: translate(-50%,0);
|
|
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 20%, 53%, 80%, 100% {
|
|
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
-webkit-transform: translate3d(-50%,0,0);
|
|
transform: translate3d(-50%,0,0);
|
|
}
|
|
40%, 43% {
|
|
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
-webkit-transform: translate3d(-50%, -30px, 0);
|
|
transform: translate3d(-50%, -30px, 0);
|
|
}
|
|
70% {
|
|
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
|
-webkit-transform: translate3d(-50%, -15px, 0);
|
|
transform: translate3d(-50%, -15px, 0);
|
|
}
|
|
90% {
|
|
-webkit-transform: translate3d(-50%,-4px,0); transform: translate3d(-50%,-4px,0);
|
|
}
|
|
}
|
|
.landing-featue-image{
|
|
max-height: 180px !important;
|
|
width: auto;
|
|
object-fit: contain;
|
|
z-index: 0;
|
|
}
|
|
.navbar-menu{
|
|
&.is-active{
|
|
// transition: all;
|
|
// position: relative;
|
|
// top:0;
|
|
animation: expand-animation .1s ease-in;
|
|
}
|
|
}
|
|
@keyframes expand-animation{
|
|
from{
|
|
height: 0;
|
|
transform: scaleY(0);
|
|
}
|
|
to{
|
|
transform: scaleY(1);
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.hero {
|
|
.navbar.darken {
|
|
@include linearGradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
|
|
}
|
|
// .navbar-item{
|
|
// color: $primary;
|
|
// }
|
|
}
|
|
.has-inner-shadow-bottom{
|
|
box-shadow: inset 0px -10px 15px -11px rgba(0,0,0,0.75);
|
|
}
|
|
.has-inner-shadow-top{
|
|
box-shadow: inset 0px 10px 15px -11px rgba(0,0,0,0.75);
|
|
}
|
|
.has-shadow-top{
|
|
box-shadow: 0px 10px 15px -11px rgba(0,0,0,0.75);
|
|
}
|
|
$sizeUnit: rem;
|
|
$marginKey: 'm';
|
|
$paddingKey: 'p';
|
|
$separator: '-';
|
|
$sizes: (
|
|
('none', 0),
|
|
('xxs', 0.75),
|
|
('xs', 0.25),
|
|
('sm', 0.5),
|
|
('md', 1),
|
|
('lg', 2),
|
|
('xl', 4),
|
|
('xxl', 8),
|
|
('diego', 6.25),
|
|
);
|
|
$positions: (
|
|
('t', 'top'),
|
|
('r', 'right'),
|
|
('b', 'bottom'),
|
|
('l', 'left')
|
|
);
|
|
|
|
@function sizeValue($key, $value) {
|
|
@return if($key == 'none', 0, $value + $sizeUnit);
|
|
}
|
|
|
|
@each $size in $sizes {
|
|
$sizeKey: nth($size, 1);
|
|
$sizeValue: nth($size, 2);
|
|
.#{$marginKey}#{$separator}#{$sizeKey} {
|
|
margin: sizeValue($sizeKey, $sizeValue);
|
|
}
|
|
.#{$paddingKey}#{$separator}#{$sizeKey} {
|
|
padding: sizeValue($sizeKey, $sizeValue);
|
|
}
|
|
@each $position in $positions {
|
|
$posKey: nth($position, 1);
|
|
$posValue: nth($position, 2);
|
|
.#{$marginKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
|
|
margin-#{$posValue}: sizeValue($sizeKey, $sizeValue);
|
|
}
|
|
.#{$paddingKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
|
|
padding-#{$posValue}: sizeValue($sizeKey, $sizeValue);
|
|
}
|
|
}
|
|
}
|
|
.m-t-a{
|
|
margin-top: auto;
|
|
}
|
|
.m-b-a{
|
|
margin-bottom: auto;
|
|
}
|
|
.m-l-a{
|
|
margin-left: auto;
|
|
}
|
|
.m-r-a{
|
|
margin-right: auto;
|
|
}
|
|
|
|
.sidebar{
|
|
flex-direction: column;
|
|
max-width: 5em;
|
|
width: 5em;
|
|
height: 100%;
|
|
border-right: thin #ccc solid;
|
|
|
|
}
|
|
.menu-titles{
|
|
margin-top: -2em;
|
|
}
|
|
.sidebar-menu{
|
|
position: absolute;
|
|
bottom: 25px;
|
|
left: 1em;
|
|
}
|
|
.sideway-letter{
|
|
transform: rotate(-90deg);
|
|
margin: -.8em auto;
|
|
}
|
|
|
|
.is-fullheight{
|
|
min-height: calc(100vh - ( #{$navbar-height} ) );
|
|
// max-height: calc(100vh - ( #{$navbar-height} ) );
|
|
// height: calc(100vh - ( #{$navbar-height} ) );
|
|
// .column{
|
|
// overflow-y: auto;
|
|
// }
|
|
}
|
|
.is-fullwidth-container{
|
|
width:100%;
|
|
}
|
|
.is-fullheight-container{
|
|
height:100%;
|
|
}
|
|
|
|
.is-fullwidth{
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
}
|
|
.app-content{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
.avatar-badge-image{
|
|
display: table;
|
|
margin: auto;
|
|
}
|
|
|
|
.is-avatar{
|
|
padding:2px;
|
|
border: thin solid #ccc;
|
|
}
|
|
.m-auto{
|
|
margin: auto;
|
|
}
|
|
|
|
.css-loader{
|
|
display: flex;
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
top: 50%;
|
|
left: 50%;
|
|
.dot{
|
|
margin: 5px;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
background: $primary;
|
|
border-radius: 50%;
|
|
animation-name: loading-pulse;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: ease-in-out;
|
|
&.delay-1{
|
|
animation-delay:.3s;
|
|
}
|
|
&.delay-2{
|
|
animation-delay:.6s;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes loading-pulse{
|
|
0%{
|
|
opacity: .1;
|
|
transform: scale(.7);
|
|
}
|
|
50%{
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
100%{
|
|
opacity: .1;
|
|
transform: scale(.7);
|
|
}
|
|
}
|
|
|
|
.has-pointer{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.notifications {
|
|
width: 15vw;
|
|
z-index: 100;
|
|
position: fixed;
|
|
right: 25px;
|
|
top: calc(25px + ( #{$navbar-height} ) );
|
|
}
|
|
|
|
.notification-fade{
|
|
animation: notification-fade .2s;
|
|
}
|
|
|
|
@keyframes notification-fade{
|
|
0%{
|
|
opacity: 0;
|
|
}
|
|
100%{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
// TODO: Remove this - make generic
|
|
.flipbook {
|
|
width: 99%;
|
|
height: 100%;
|
|
overflow-y: visible;
|
|
object-fit: contain;
|
|
transition: opacity .5s;
|
|
}
|
|
.book-flip-buttons{
|
|
height: 100%;
|
|
}
|
|
.video-strip{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content:center;
|
|
max-height: 15vh;
|
|
}
|
|
|
|
video{
|
|
// margin-left: 5px;
|
|
// margin-right: 5px;
|
|
background-color:rgba(56, 181, 187, 0.19);
|
|
// border-radius: 15px;
|
|
border: solid 1px rgba(56, 181, 187, 0.30);
|
|
flex-basis: 100%;
|
|
// max-width: 15vh;
|
|
}
|
|
.has-wrap{
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.book-thumb{
|
|
// cursor: not-allowed;
|
|
transition: all .2s;
|
|
z-index: inherit;
|
|
flex-basis: 12%;
|
|
text-align: center;
|
|
min-width: 180px;
|
|
background-color: whitesmoke;
|
|
padding: 5px;
|
|
margin: 5px;
|
|
}
|
|
.book-thumb.enabled{
|
|
cursor: pointer;
|
|
&:hover{
|
|
transform: scale(1.1);
|
|
z-index: 10;
|
|
}
|
|
}
|
|
.book-cover{
|
|
position:relative;
|
|
border: 1px solid rgba(0,0,0,.4);
|
|
.image{
|
|
&:before{
|
|
border: 1px solid rgba(0,0,0,.4);
|
|
content: "";
|
|
position: absolute;
|
|
top:3px;
|
|
left:3px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
//Fade vue transition
|
|
.fade-enter-active, .fade-leave-active {
|
|
transition: opacity 0.2s ease-in-out;
|
|
position: absolute;
|
|
}
|
|
.fade-enter-active{
|
|
transition-delay: 0.2s;
|
|
}
|
|
.fade-enter, .fade-leave-to{
|
|
opacity: 0;
|
|
}
|
|
.fade-enter-to, .fade-leave{
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
.slide-left-enter-active,
|
|
.slide-left-leave-active,
|
|
.slide-right-enter-active,
|
|
.slide-right-leave-active {
|
|
transition-duration: 0.2s;
|
|
transition-property: height, opacity, transform;
|
|
transition-timing-function: ease-in-out;
|
|
overflow: hidden;
|
|
}
|
|
.slide-left-enter-active,
|
|
.slide-right-enter-active{
|
|
transition-delay: 0.2s;
|
|
}
|
|
|
|
.slide-left-enter,
|
|
.slide-right-leave-active {
|
|
opacity: 0;
|
|
transform: translate(2em, 0);
|
|
}
|
|
|
|
.slide-left-leave-active,
|
|
.slide-right-enter {
|
|
opacity: 0;
|
|
transform: translate(-2em, 0);
|
|
}
|
|
|
|
.has-diego-width-800{
|
|
max-width: 50rem;
|
|
}
|
|
.is-borderless{
|
|
border: none;
|
|
}
|
|
.is-justify-centered{
|
|
justify-content: center;
|
|
}
|
|
.is-justify-between{
|
|
justify-content: space-between;
|
|
}
|
|
|
|
|
|
.video-side-bar{
|
|
height: calc(100vh - ( #{$navbar-height} ) );
|
|
video{
|
|
width: 100%;
|
|
height: 50%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.book-view{
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
.is-transparent{
|
|
opacity: 0;
|
|
}
|
|
.is-mirrored{
|
|
transform: scaleX(-1);
|
|
}
|
|
.is-relative{
|
|
position: relative;
|
|
}
|
|
|
|
.editable-image{
|
|
|
|
cursor: pointer;
|
|
&:hover{
|
|
&::after{
|
|
opacity: 1;
|
|
transform: scaleY(1);
|
|
height: 54px;
|
|
}
|
|
}
|
|
&::after{
|
|
opacity: 0;
|
|
transform: scaleY(0);
|
|
transition: all .3s;
|
|
position: absolute;
|
|
bottom:0;
|
|
left:0;
|
|
content: '\f093';
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 0%;
|
|
background-color: rgba(0, 0, 0, .4);
|
|
font: normal normal normal 14px/1 ForkAwesome;
|
|
color: whitesmoke;
|
|
font-size: 50px;
|
|
padding-top: 2px;
|
|
}
|
|
}
|
|
|
|
.is-flex-column{
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
//edit page
|
|
.page-editor{
|
|
|
|
.croppa-container {
|
|
border: 2px solid whitesmoke;
|
|
border-radius: 8px;
|
|
color: white;
|
|
}
|
|
}
|
|
.book-thumb.page-preview{
|
|
// flex-basis: unset;
|
|
}
|
|
.book-stitch-preview-left{
|
|
&::before{
|
|
content: '';
|
|
height: 100%;
|
|
position: absolute;
|
|
// background-color: black;
|
|
width:50%;
|
|
left:-50%;
|
|
top:0;
|
|
mask-image: linear-gradient(to left, rgba(0,0,0,.3) 0%, transparent 100%);
|
|
background: url('/images/default-user-avatar.png');
|
|
}
|
|
}
|
|
.stitch-preview-right{
|
|
// position: absolute;
|
|
// top:0;
|
|
// right:0;
|
|
border: solid 1px whitesmoke;
|
|
&::after{
|
|
content: '';
|
|
height: 100%;
|
|
position: absolute;
|
|
// background-color: black;
|
|
width:100%;
|
|
left:0;
|
|
top:0;
|
|
background: linear-gradient(to right, transparent 0%, white 80%);
|
|
}
|
|
}
|
|
.stitch-preview-left{
|
|
// position: absolute;
|
|
// top:0;
|
|
// left:0;
|
|
border: solid 1px whitesmoke;
|
|
&::after{
|
|
content: '';
|
|
height: 100%;
|
|
position: absolute;
|
|
// background-color: black;
|
|
width:100%;
|
|
left:0;
|
|
top:0;
|
|
background: linear-gradient(to left, transparent 0%, white 80%);
|
|
}
|
|
|
|
}
|
|
.book-stitch-preview-right{
|
|
&::after{
|
|
content: '';
|
|
|
|
background: url('/images/default-user-avatar.png');
|
|
}
|
|
}
|
|
.edit-page-controllers{
|
|
border-radius: 15px;
|
|
background-color: rgba(134, 134, 134, 0.1);
|
|
}
|
|
.book-uploading-overlay{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba($color: #000000, $alpha: .6);
|
|
z-index: 100;
|
|
}
|
|
.height-max-view{
|
|
max-height: calc(99vh - ( #{$navbar-height} ) );
|
|
}
|
|
.book-uploading-overlay-content{
|
|
position: relative;
|
|
top:50%;
|
|
left:50%;
|
|
transform: translate(-50%, -50%);
|
|
max-width: 600px;
|
|
.title{
|
|
color: whitesmoke;
|
|
opacity: 1;
|
|
}
|
|
.subtitle{
|
|
color: whitesmoke;
|
|
opacity: 0.8;
|
|
}
|
|
}
|