2455 lines
74 KiB
SCSS
2455 lines
74 KiB
SCSS
@use "sass:color";
|
|
@use "sass:math";
|
|
@use "sass:string";
|
|
@import "vars";
|
|
|
|
:root {
|
|
--icon__default-height: 48px;
|
|
|
|
--grid__height: 5;
|
|
--grid__width: 5;
|
|
--grid__zoom: 1;
|
|
|
|
--loader__icon-size: 48px;
|
|
--loader__line-color: #{$cl_geo};
|
|
--loader__ground-line-size: 8px;
|
|
--loader__slime__size: 300px;
|
|
--loader__slime__outline-width: 10px;
|
|
--loader__slime__offset: 10px;
|
|
|
|
--pannel__width: 400px;
|
|
}
|
|
|
|
body {
|
|
font-family: ptsans_regular, sans-serif;
|
|
}
|
|
|
|
#transform-canvas {
|
|
left: 50%;
|
|
opacity: 0;
|
|
position: fixed;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: -100;
|
|
}
|
|
|
|
#page-background {
|
|
background: url('./../img/background.jpg') no-repeat center;
|
|
background-size: cover;
|
|
bottom: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
#page-container {
|
|
form {
|
|
&.sp_form__uploading {
|
|
filter: blur(4px);
|
|
&:after {
|
|
bottom: 0;
|
|
content: '';
|
|
display: block;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* *** CLASS GENERIC *** */
|
|
.sp_flex__filler {
|
|
flex-grow: 1;
|
|
}
|
|
.sp_invert {
|
|
filter: invert(0.5);
|
|
}
|
|
.sp_grayscale {
|
|
filter: grayscale(1);
|
|
}
|
|
.sp_icon__container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
img {
|
|
margin: auto;
|
|
height: var(--icon__default-height);
|
|
width: auto;
|
|
}
|
|
}
|
|
.sp_button {
|
|
background-color: $cl_ui_dark;
|
|
border: 2px solid $cl_white;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
height: 36px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
width: 140px;
|
|
span {
|
|
color: $cl_white;
|
|
display: block;
|
|
margin: auto;
|
|
padding: 0 6px;
|
|
user-select: none;
|
|
}
|
|
&.sp_button__active {
|
|
background-color: $cl_geo;
|
|
}
|
|
&:hover {
|
|
background-color: $cl_ui_hover;
|
|
&[data-type='cancel'] {
|
|
background-color: $cl_pyro;
|
|
}
|
|
&[data-type='validate'] {
|
|
background-color: $cl_dendro;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* *** FORM COMPONENTS *** */
|
|
[class*='sp_form-row'] {
|
|
margin-bottom: 6px;
|
|
max-width: 400px;
|
|
overflow: hidden;
|
|
}
|
|
.sp_form-row__file, .sp_form-row__text, .sp_form-row__select {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
height: 36px;
|
|
}
|
|
.sp_form-row__file, .sp_form-row__text, .sp_form-row__select, .sp_form-row__textarea {
|
|
background-color: $cl_white;
|
|
//border: 1px solid $cl_ui_dark;
|
|
border-radius: 6px;
|
|
> label {
|
|
background-color: $cl_ui_dark;
|
|
border: 2px solid $cl_white;
|
|
border-radius: inherit;
|
|
color: $cl_white;
|
|
flex-shrink: 0;
|
|
line-height: 30px;
|
|
min-width: 90px;
|
|
max-width: 70%;
|
|
overflow: hidden;
|
|
padding: 0 6px;
|
|
text-overflow: ellipsis;
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
transition: max-width ease-in 250ms;
|
|
}
|
|
&:hover, &:focus-within {
|
|
label {
|
|
background-color: $cl_ui_hover;
|
|
}
|
|
}
|
|
}
|
|
.sp_form-row__file, .sp_form-row__text, .sp_form-row__select, .sp_form-row__textarea {
|
|
input[type='text'], select, textarea {
|
|
border: 2px solid $cl_white;
|
|
flex-shrink: 1;
|
|
font-size: 16px;
|
|
padding: 0 2px;
|
|
width: 100%;
|
|
}
|
|
input[type='text'], select {
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
.sp_form-row__text, .sp_form-row__select {
|
|
&:focus-within {
|
|
label {
|
|
max-width: 90px;
|
|
transition: max-width ease-out 250ms;
|
|
}
|
|
}
|
|
}
|
|
.sp_form-row__button {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-column-gap: 6px;
|
|
height: 36px;
|
|
.sp_button {
|
|
width: auto;
|
|
}
|
|
}
|
|
.sp_form-row__file {
|
|
input {
|
|
&[type='file'] {
|
|
height: 100%;
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 2;
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
.sp_input__file-preview {
|
|
background-color: $cl_ui_dark;
|
|
border: 2px solid $cl_white;
|
|
border-radius: 6px;
|
|
flex-shrink: 0;
|
|
padding: 1px;
|
|
width: 36px;
|
|
img {
|
|
height: 100%;
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
//<editor-fold desc="old radio">
|
|
//.sp_form-row__radio {
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// &.sp_form-row__radio-wrapper {
|
|
// border-left: 4px solid $cl_ui_dark;
|
|
// border-right: 4px solid $cl_ui_dark;
|
|
// border-radius: 6px;
|
|
// padding: 0 4px;
|
|
// }
|
|
// //background-color: $cl_white;
|
|
// //border: 1px solid $cl_ui_dark;
|
|
// //border-radius: 6px;
|
|
// > label {
|
|
// background-color: $cl_ui_dark;
|
|
// border: 2px solid $cl_white;
|
|
// border-radius: 6px;
|
|
// color: $cl_white;
|
|
// flex-shrink: 0;
|
|
// line-height: 30px;
|
|
// margin-bottom: 2px;
|
|
// max-width: none;
|
|
// overflow: hidden;
|
|
// padding: 0 6px;
|
|
// text-overflow: ellipsis;
|
|
// user-select: none;
|
|
// white-space: nowrap;
|
|
// width: 100%;
|
|
// }
|
|
// .sp_radio__container {
|
|
// > label {
|
|
// display: flex;
|
|
// flex-direction: row;
|
|
// overflow: hidden;
|
|
// }
|
|
// $boxDim: 16px;
|
|
// .sp_checkbox__text, .sp_radio__text {
|
|
// background-color: $cl_white;
|
|
// border-radius: 4px;
|
|
// line-height: 20px;
|
|
// .sp_radio__label {
|
|
// background-color: rgba($cl_pyro, 0.6);
|
|
// border: 2px solid $cl_white;
|
|
// border-radius: inherit;
|
|
// color: $cl_white;
|
|
// overflow: hidden;
|
|
// padding: 0 6px 0 (8px + $boxDim);
|
|
// text-overflow: ellipsis;
|
|
// width: 100%;
|
|
// white-space: nowrap;
|
|
// &:before {
|
|
// background-color: transparent;
|
|
// border: 1px solid $cl_white;
|
|
// content: '';
|
|
// height: $boxDim;
|
|
// left: 2px;
|
|
// position: absolute;
|
|
// top: 50%;
|
|
// transform: translateY(-50%);
|
|
// width: $boxDim;
|
|
// }
|
|
// }
|
|
// &.sp_radio__checked {
|
|
// .sp_radio__label {
|
|
// background-color: $cl_dendro;
|
|
// &:before {
|
|
// background-color: $cl_white;
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
// .sp_checkbox__text {
|
|
// .sp_radio__label {
|
|
// &:before {
|
|
// border-radius: 2px;
|
|
// }
|
|
// }
|
|
// }
|
|
// .sp_radio__text {
|
|
// .sp_radio__label {
|
|
// &:before {
|
|
// //border-radius: math.div($boxDim, 2);
|
|
// border-radius: math.div($boxDim, 2);
|
|
// }
|
|
// }
|
|
// }
|
|
// .sp_radio__enhanced {
|
|
// //&.sp_invert {
|
|
// // filter: invert(0.5);
|
|
// //}
|
|
// //&.sp_grayscale {
|
|
// // filter: grayscale(1);
|
|
// //}
|
|
// //&.sp_radio__checked {
|
|
// // &.sp_invert {
|
|
// // filter: invert(0);
|
|
// // }
|
|
// // &.sp_grayscale {
|
|
// // filter: grayscale(0);
|
|
// // }
|
|
// //}
|
|
// &:hover, *:hover {
|
|
// cursor: pointer;
|
|
// }
|
|
// }
|
|
//
|
|
// &.sp_radio__layout-inline {
|
|
// display: flex;
|
|
// flex-direction: row;
|
|
// flex-wrap: wrap;
|
|
// > label {
|
|
// margin: 0 6px 6px 0;
|
|
// &:last-child {
|
|
// margin-right: 0;
|
|
// }
|
|
// }
|
|
// }
|
|
// &.sp_radio__layout-grid-b {
|
|
// display: grid;
|
|
// grid-template-columns: repeat(2, 1fr);
|
|
// grid-gap: 4px;
|
|
// }
|
|
// &.sp_radio__layout-grid-c {
|
|
// display: grid;
|
|
// grid-template-columns: repeat(2, 1fr 24px);
|
|
// grid-gap: 4px;
|
|
// }
|
|
//
|
|
// &.sp_radio__invert {
|
|
// .sp_radio__enhanced {
|
|
// filter: invert(0.5);
|
|
// &.sp_radio__checked {
|
|
// filter: invert(0);
|
|
// }
|
|
// }
|
|
// }
|
|
// &.sp_radio__grayscale {
|
|
// .sp_radio__enhanced {
|
|
// filter: grayscale(1);
|
|
// &.sp_radio__checked {
|
|
// filter: grayscale(0);
|
|
// }
|
|
// }
|
|
// }
|
|
//
|
|
// input {
|
|
// display: none;
|
|
// }
|
|
// }
|
|
// &:hover {
|
|
// > label {
|
|
// background-color: $cl_ui_hover;
|
|
// }
|
|
// }
|
|
//}
|
|
//</editor-fold>
|
|
.sp_form-row__radio {
|
|
display: flex;
|
|
flex-direction: column;
|
|
.sp_radio__main-label {
|
|
background-color: $cl_ui_dark;
|
|
border: 2px solid $cl_white;
|
|
border-radius: 6px;
|
|
color: $cl_white;
|
|
flex-shrink: 0;
|
|
line-height: 30px;
|
|
margin-bottom: 4px;
|
|
max-width: none;
|
|
overflow: hidden;
|
|
padding: 0 6px;
|
|
text-overflow: ellipsis;
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
}
|
|
.sp_radio__input-wrapper {
|
|
background-color: $cl_white;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
overflow: hidden;
|
|
.sp_radio__input-icon, .sp_radio__input-mark {
|
|
position: absolute;
|
|
left: 2px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.sp_radio__input-label {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
input {
|
|
&[type="checkbox"],
|
|
&[type="radio"] {
|
|
display: none;
|
|
}
|
|
}
|
|
&:not(.sp_radio__checked) {
|
|
.sp_radio__input-label {
|
|
color: $cl_ui_shell;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.sp_radio__layout-inline {
|
|
.sp_radio__container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
.sp_radio__wrapper {
|
|
margin: 0 6px 6px 0;
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[class*="sp_radio__layout-grid"] {
|
|
.sp_radio__container {
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
}
|
|
}
|
|
&.sp_radio__layout-grid-a {
|
|
.sp_radio__container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
&.sp_radio__layout-grid-b {
|
|
.sp_radio__container {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
&.sp_radio__layout-grid-c {
|
|
.sp_radio__container {
|
|
grid-template-columns: repeat(2, 1fr 24px);
|
|
}
|
|
}
|
|
|
|
&.sp_radio__style-text {
|
|
.sp_radio__input-wrapper {
|
|
height: 24px;
|
|
padding: 0 4px 0 26px;
|
|
.sp_radio__input-mark {
|
|
background-color: #ff8888;
|
|
box-shadow:
|
|
inset 1px 1px 0 rgba($cl_ui_dark, 0.5),
|
|
inset 0 0 1px rgba($cl_ui_dark, 0.5);
|
|
display: flex;
|
|
height: 20px;
|
|
width: 20px;
|
|
&:before {
|
|
content: "";
|
|
}
|
|
}
|
|
.sp_radio__input-label {
|
|
line-height: 24px;
|
|
}
|
|
&.sp_radio__type-checkbox, &.sp_radio__type-radio {
|
|
.sp_radio__input-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
&.sp_radio__type-checkbox {
|
|
.sp_radio__input-mark {
|
|
border-radius: 4px;
|
|
&:before,
|
|
&:after {
|
|
background-color: $cl_white;
|
|
box-shadow: none;
|
|
height: 14px;
|
|
margin: auto;
|
|
width: 2px;
|
|
transform: rotate(45deg);
|
|
}
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
}
|
|
}
|
|
}
|
|
&.sp_radio__type-radio {
|
|
.sp_radio__input-mark {
|
|
border-radius: 50%;
|
|
&:before {
|
|
background-color: transparent;
|
|
border: 1px solid $cl_white;
|
|
box-shadow: none;
|
|
border-radius: 50%;
|
|
height: 12px;
|
|
margin: auto;
|
|
width: 12px;
|
|
}
|
|
}
|
|
}
|
|
&.sp_radio__checked {
|
|
color: $cl_ui_dark;
|
|
.sp_radio__input-mark {
|
|
background-color: $cl_dendro;
|
|
&:before {
|
|
box-shadow: 1px 1px 0 rgba($cl_ui_dark, 0.5);
|
|
}
|
|
}
|
|
&.sp_radio__type-checkbox {
|
|
.sp_radio__input-mark {
|
|
&:before {
|
|
background-color: transparent;
|
|
border-bottom: 3px solid $cl_white;
|
|
border-right: 3px solid $cl_white;
|
|
height: 12px;
|
|
margin: auto;
|
|
transform: rotate(45deg);
|
|
width: 6px;
|
|
}
|
|
&:after {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
&.sp_radio__type-radio {
|
|
.sp_radio__input-mark {
|
|
&:before {
|
|
background-color: $cl_white;
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.sp_radio__style-icon, &.sp_radio__style-button {
|
|
.sp_radio__input-wrapper {
|
|
line-height: unset;
|
|
&.sp_radio__type-checkbox, &.sp_radio__type-radio {
|
|
.sp_radio__input-mark {
|
|
display: none;
|
|
}
|
|
&:not(.sp_radio__checked) {
|
|
.sp_radio__input-icon {
|
|
filter: grayscale(1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.sp_radio__style-icon {
|
|
.sp_radio__input-wrapper {
|
|
height: 34px;
|
|
padding: 0 4px 0 36px;
|
|
.sp_radio__input-icon {
|
|
display: block;
|
|
height: 34px;
|
|
width: 34px;
|
|
> * {
|
|
display: block;
|
|
width: 34px;
|
|
}
|
|
}
|
|
.sp_radio__input-label {
|
|
line-height: 34px;
|
|
}
|
|
}
|
|
}
|
|
&.sp_radio__style-button {
|
|
.sp_radio__input-wrapper {
|
|
height: 48px;
|
|
margin-right: 6px;
|
|
padding: 0 0 0 48px;
|
|
.sp_radio__input-icon {
|
|
display: block;
|
|
height: 48px;
|
|
width: 48px;
|
|
> * {
|
|
display: block;
|
|
width: 48px;
|
|
}
|
|
}
|
|
.sp_radio__input-label {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sp_form-row__textarea {
|
|
display: flex;
|
|
flex-direction: column;
|
|
label {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
textarea {
|
|
resize: none;
|
|
min-height: 120px;
|
|
}
|
|
}
|
|
.sp_form-row_inline-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-column-gap: 6px;
|
|
> [class*='sp_form-row'] {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
/* *** CLASS TEMPLATES *** */
|
|
.sp_menu-btn {
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
height: 64px;
|
|
padding: 10px;
|
|
width: 64px;
|
|
.sp_menu-btn__bars {
|
|
background-color: white;
|
|
height: 6px;
|
|
margin: auto;
|
|
overflow: visible;
|
|
width: 44px;
|
|
//transition: background-color 250ms ease-out;
|
|
transform: rotate(0deg);
|
|
transition: transform 250ms ease-in;
|
|
&:before, &:after {
|
|
background-color: white;
|
|
content: "";
|
|
height: 6px;
|
|
left: 50%;
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
width: 44px;
|
|
transition: transform 250ms ease-in, top 250ms ease-in;
|
|
}
|
|
&:before {
|
|
top: calc(50% - 12px);
|
|
}
|
|
&:after {
|
|
top: calc(50% + 12px);
|
|
}
|
|
}
|
|
&.sp_nav__nav-open {
|
|
.sp_menu-btn__bars {
|
|
transform: rotate(45deg);
|
|
transition: transform 250ms ease-in;
|
|
&:before, &:after {
|
|
transition: transform 250ms ease-in, top 250ms ease-in;
|
|
}
|
|
&:before {
|
|
top: 50%;
|
|
transform: translate(-50%, -50%) rotate(-90deg);
|
|
}
|
|
&:after {
|
|
top: 50%;
|
|
transform: translate(-50%, -50%) rotate(-90deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ul_nav__wrapper {
|
|
overflow: visible;
|
|
ul, li {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.ul_nav {
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 64px;
|
|
margin: 0 auto;
|
|
overflow: visible;
|
|
padding: 0 80px;
|
|
.ul_nav__head, .ul_nav__tail, .ul_nav__item {
|
|
flex-shrink: 0;
|
|
height: 64px;
|
|
> *:not(.ul_nav__sub-nav) {
|
|
height: 64px;
|
|
}
|
|
}
|
|
.ul_nav__head, .ul_nav__tail {
|
|
background-color: $cl_geo;
|
|
position: absolute;
|
|
width: 64px;
|
|
z-index: 1;
|
|
> * {
|
|
width: 64px;
|
|
}
|
|
}
|
|
.ul_nav__head {
|
|
left: 0;
|
|
}
|
|
.ul_nav__tail {
|
|
right: 0;
|
|
}
|
|
.ul_nav__item {
|
|
color: $cl_ui_light;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
width: 120px;
|
|
> a {
|
|
background-color: $cl_ui_darker;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
height: 64px;
|
|
overflow: hidden;
|
|
padding: 0 12px;
|
|
width: inherit;
|
|
z-index: 2;
|
|
.ul_nav__underline {
|
|
background-color: rgba($cl_ui_light, 0.2);
|
|
bottom: 0;
|
|
height: 2px;
|
|
left: 6px;
|
|
position: absolute;
|
|
right: 6px;
|
|
z-index: 2;
|
|
}
|
|
.ul_nav__item-title {
|
|
margin: auto;
|
|
font-weight: normal;
|
|
font-size: 16px;
|
|
line-height: 18px;
|
|
}
|
|
&.ul_nav__link-active {
|
|
color: $cl_geo;
|
|
font-family: ptsans_bold, sans-serif;
|
|
.ul_nav__underline {
|
|
background-color: $cl_geo;
|
|
}
|
|
}
|
|
&:hover {
|
|
background-color: $cl_ui_dark;
|
|
}
|
|
&:not(.ul_nav__link-active) {
|
|
&:hover {
|
|
color: $cl_ui_hover;
|
|
.ul_nav__underline {
|
|
background-color: $cl_ui_hover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> .ul_nav__item {
|
|
overflow: visible;
|
|
z-index: 2;
|
|
&:nth-child(2), &:nth-last-child(2) {
|
|
> a {
|
|
overflow: visible;
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
&:nth-child(2) {
|
|
> a {
|
|
&:after {
|
|
border-top: 64px solid $cl_geo;
|
|
border-right: 16px solid $cl_ui_darker;
|
|
left: -16px;
|
|
}
|
|
&:hover {
|
|
&:after {
|
|
border-right: 16px solid $cl_ui_dark;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:nth-last-child(2) {
|
|
> a {
|
|
&:after {
|
|
border-bottom: 64px solid $cl_geo;
|
|
border-left: 16px solid $cl_ui_darker;
|
|
right: -16px;
|
|
}
|
|
&:hover {
|
|
&:after {
|
|
border-left: 16px solid $cl_ui_dark;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:hover {
|
|
height: auto;
|
|
.ul_nav__sub-nav {
|
|
max-height: 256px;
|
|
transition: max-height ease-in 350ms;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ul_nav__sub-nav {
|
|
box-shadow: 0 0 10px -4px $cl_ui_light;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height ease-out 250ms;
|
|
z-index: 1;
|
|
.ul_nav__item {
|
|
a {
|
|
&.ul_nav__link-active {
|
|
color: $cl_dendro;
|
|
font-family: ptsans_regular, sans-serif;
|
|
.ul_nav__underline {
|
|
background-color: $cl_dendro;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sp_nav {
|
|
display: flex;
|
|
flex-direction: row;
|
|
.sp_nav__wrapper, .sp_nav__item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
height: 64px;
|
|
overflow: hidden;
|
|
width: 140px;
|
|
}
|
|
.sp_nav__wrapper {
|
|
height: 128px;
|
|
}
|
|
.sp_nav__item {
|
|
color: $cl_ui_light;
|
|
padding: 0 12px;
|
|
.sp_nav__indicator, .sp_nav__underline, .sp_nav__cursor {
|
|
z-index: 2;
|
|
}
|
|
.sp_nav__indicator, .sp_nav__underline {
|
|
background-color: $cl_ui_light;
|
|
opacity: 0.2;
|
|
position: absolute;
|
|
}
|
|
.sp_nav__indicator, .sp_nav__cursor {
|
|
display: none;
|
|
}
|
|
.sp_nav__underline {
|
|
bottom: 0;
|
|
height: 2px;
|
|
left: 4px;
|
|
right: 4px;
|
|
}
|
|
.sp_nav__title {
|
|
margin: auto;
|
|
z-index: 1;
|
|
}
|
|
&.sp_nav__active {
|
|
//background-color: $cl_ui_light;
|
|
color: $cl_geo;
|
|
font-family: ptsans_bold, sans-serif;
|
|
.sp_nav__indicator, .sp_nav__underline {
|
|
background-color: $cl_geo;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
&:not(.sp_nav__active):hover {
|
|
//.sp_nav__indicator, .sp_nav__underline {
|
|
color: $cl_ui_hover;
|
|
.sp_nav__indicator, .sp_nav__underline {
|
|
background-color: $cl_geo;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
&.sp_nav__vertical {
|
|
flex-direction: column;
|
|
.sp_nav__item {
|
|
background-color: rgba($cl_ui_dark, 0.8);
|
|
margin-bottom: 6px;
|
|
padding-left: 16px;
|
|
width: 160px;
|
|
.sp_nav__indicator {
|
|
display: block;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
width: 6px;
|
|
}
|
|
.sp_nav__cursor {
|
|
display: none;
|
|
background-color: transparent;
|
|
border: 12px solid transparent;
|
|
border-left-color: $cl_dendro;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.sp_nav__underline {
|
|
left: 10px;
|
|
}
|
|
.sp_nav__title {
|
|
margin: auto 0;
|
|
}
|
|
&.sp_nav__sub-item {
|
|
height: 48px;
|
|
margin-left: auto;
|
|
width: 140px;
|
|
}
|
|
&.sp_nav__active {
|
|
background-color: $cl_ui_light;
|
|
color: $cl_ui_dark;
|
|
.sp_nav__indicator, .sp_nav__underline {
|
|
background-color: $cl_dendro;
|
|
}
|
|
.sp_nav__cursor {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//<editor-fold desc="old grid">
|
|
//.sp_grid__container {
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// flex-wrap: nowrap;
|
|
// .sp_grid__row {
|
|
// display: flex;
|
|
// flex-direction: row;
|
|
// flex-shrink: 0;
|
|
// }
|
|
// .sp_grid__column {
|
|
// //padding-top: calc(100% / var(--grid__width) * var(--grid__zoom));
|
|
// user-select: none;
|
|
// flex-shrink: 0;
|
|
// height: calc(512px + (64px * var(--grid__zoom)));
|
|
// width: calc(512px + (64px * var(--grid__zoom)));
|
|
// //width: calc(100% / var(--grid__width) * var(--grid__zoom));
|
|
// .sp_grid__map, .sp_grid__node-container, .sp_grid__map-form {
|
|
// height: 100%;
|
|
// left: 0;
|
|
// position: absolute;
|
|
// top: 0;
|
|
// width: 100%;
|
|
// }
|
|
// .sp_grid__map {
|
|
// z-index: 1;
|
|
// }
|
|
// .sp_grid__node-container {
|
|
// z-index: 3;
|
|
// .sp_node__item {
|
|
// position: absolute;
|
|
// z-index: 1;
|
|
// &.sp_node__collected:not(.sp_node__deleted) {
|
|
// opacity: 0.3;
|
|
// }
|
|
// &.sp_node__hidden {
|
|
// display: none;
|
|
// }
|
|
// &.sp_node__deleted {
|
|
// &:before, &:after {
|
|
// border-top: 4px solid $cl_pyro;
|
|
// content: '';
|
|
// height: 0;
|
|
// left: 50%;
|
|
// position: absolute;
|
|
// top: 50%;
|
|
// width: 40px;
|
|
// z-index: 3;
|
|
// }
|
|
// &:before {
|
|
// transform: translate(-50%, -50%) rotate(-45deg);
|
|
// }
|
|
// &:after {
|
|
// transform: translate(-50%, -50%) rotate(45deg);
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
// .sp_grid__map-form {
|
|
// z-index: 4;
|
|
// input[type='file'] {
|
|
// height: 100%;
|
|
// left: 0;
|
|
// opacity: 0;
|
|
// position: absolute;
|
|
// top: 0;
|
|
// width: 100%;
|
|
// }
|
|
// &:hover {
|
|
// background-color: rgba($cl_ui_dark, 0.2);
|
|
// }
|
|
// }
|
|
// &:before {
|
|
// bottom: 0;
|
|
// content: '';
|
|
// left: 0;
|
|
// position: absolute;
|
|
// right: 0;
|
|
// top: 0;
|
|
// z-index: 2;
|
|
// }
|
|
// }
|
|
//}
|
|
//</editor-fold>
|
|
.sp_grid__container {
|
|
display: grid;
|
|
grid-template-rows: repeat(var(--grid__height), calc(256px + (64px * var(--grid__zoom))));
|
|
grid-template-columns: repeat(var(--grid__width), calc(256px + (64px * var(--grid__zoom))));
|
|
.sp_grid__cell {
|
|
user-select: none;
|
|
//flex-shrink: 0;
|
|
//height: calc(512px + (64px * var(--grid__zoom)));
|
|
//width: calc(512px + (64px * var(--grid__zoom)));
|
|
.sp_grid__map, .sp_grid__node-container, .sp_grid__map-form {
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.sp_grid__map {
|
|
z-index: 1;
|
|
}
|
|
.sp_grid__node-container {
|
|
z-index: 3;
|
|
.sp_node__item {
|
|
position: absolute;
|
|
z-index: 1;
|
|
&.sp_node__collected:not(.sp_node__deleted) {
|
|
opacity: 0.3;
|
|
}
|
|
&.sp_node__hidden {
|
|
display: none;
|
|
}
|
|
&.sp_node__deleted {
|
|
&:before, &:after {
|
|
border-top: 4px solid $cl_pyro;
|
|
content: '';
|
|
height: 0;
|
|
left: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 40px;
|
|
z-index: 3;
|
|
}
|
|
&:before {
|
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
}
|
|
&:after {
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sp_grid__map-form {
|
|
z-index: 4;
|
|
input[type='file'] {
|
|
height: 100%;
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
&:hover {
|
|
background-color: rgba($cl_ui_dark, 0.2);
|
|
}
|
|
}
|
|
&:before {
|
|
bottom: 0;
|
|
content: '';
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
.sp_dashboard__container {
|
|
background-color: $cl_ui_light;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
padding: 8px 12px;
|
|
width: 100%;
|
|
}
|
|
.sp_node__item {
|
|
$outer_dim: 34px;
|
|
height: $outer_dim;
|
|
width: $outer_dim;
|
|
.sp_node__background {
|
|
$inner_dim: 70.6%;
|
|
border: 2px solid white;
|
|
background-color: $cl_ui_dark;
|
|
border-radius: 4px;
|
|
height: $inner_dim;
|
|
left: 50%;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
width: $inner_dim;
|
|
z-index: 2;
|
|
img {
|
|
//height: auto;
|
|
left: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
width: 32px;
|
|
z-index: 1;
|
|
}
|
|
&:before {
|
|
border-radius: 4px;
|
|
content: '';
|
|
display: block;
|
|
height: 100%;
|
|
left: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 100%;
|
|
z-index: 3;
|
|
}
|
|
}
|
|
.sp_node__quantity {
|
|
background-color: $cl_ui_dark;
|
|
border: 1px solid $cl_white;
|
|
border-radius: 4px;
|
|
height: 14px;
|
|
left: -2px;
|
|
position: absolute;
|
|
top: 10px;
|
|
transform: rotate(45deg);
|
|
width: 14px;
|
|
z-index: 2;
|
|
> span {
|
|
//color: $cl_geo;
|
|
color: $cl_white;
|
|
font-size: 10px;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
}
|
|
}
|
|
.sp_node__guidelines {
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 1;
|
|
&:before, &:after {
|
|
border: 1px solid $cl_legendary;
|
|
content: '';
|
|
left: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
&:before {
|
|
height: 4096px;
|
|
}
|
|
&:after {
|
|
width: 4096px;
|
|
}
|
|
}
|
|
&.sp_node__highlight {
|
|
.sp_node__background {
|
|
border: 2px solid rgb(0, 255, 255);
|
|
}
|
|
}
|
|
}
|
|
.sp_modal, .sp_tooltip {
|
|
background-color: $cl_ui_light;
|
|
border: 2px solid $cl_white;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
padding: 6px;
|
|
width: 100%;
|
|
.sp_modal__body, .sp_tooltip__body {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
line-height: 20px;
|
|
margin-bottom: 6px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
padding: 0 6px;
|
|
}
|
|
}
|
|
.sp_tooltip__wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 250px;
|
|
overflow: visible;
|
|
position: absolute;
|
|
transform: translate(-50%, -100%);
|
|
width: 400px;
|
|
z-index: 10;
|
|
.sp_tooltip__action-left-wrapper, .sp_tooltip__action-right-wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
position: absolute;
|
|
top: 0;
|
|
transform: translateY(calc(-100% - 2px));
|
|
z-index: 3;
|
|
> *:not(:last-child) {
|
|
margin-right: 2px;
|
|
}
|
|
.sp_button {
|
|
width: 100px;
|
|
&.sp_icon__container {
|
|
width: 36px;
|
|
img {
|
|
height: 24px;
|
|
}
|
|
}
|
|
}
|
|
.sp_node__set-display {
|
|
margin-left: auto;
|
|
&[data-is-hidden="0"] {
|
|
> span:nth-child(even) {
|
|
display: none
|
|
}
|
|
}
|
|
&[data-is-hidden="1"] {
|
|
> span:nth-child(odd) {
|
|
display: none
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sp_tooltip__action-left-wrapper {
|
|
left: 0;
|
|
}
|
|
.sp_tooltip__action-right-wrapper {
|
|
right: 0;
|
|
}
|
|
.sp_tooltip {
|
|
margin-bottom: 20px;
|
|
z-index: 1;
|
|
.sp_tooltip__header, .sp_tooltip__footer {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
}
|
|
.sp_tooltip__header {
|
|
flex-direction: row;
|
|
margin: 0;
|
|
line-height: 28px;
|
|
> span {
|
|
&:nth-child(1) {
|
|
margin-right: auto;
|
|
}
|
|
&:nth-child(2) {
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
margin-bottom: auto;
|
|
}
|
|
}
|
|
}
|
|
.sp_tooltip__footer {
|
|
flex-direction: column;
|
|
button {
|
|
background-color: transparent;
|
|
border: none;
|
|
height: 32px;
|
|
padding: 0;
|
|
width: 32px;
|
|
img {
|
|
height: 32px;
|
|
//noinspection CssInvalidFunction
|
|
transform: rotateY(0deg);
|
|
}
|
|
&:not(:last-child) {
|
|
margin-right: 6px;
|
|
}
|
|
&:hover {
|
|
img {
|
|
//noinspection CssInvalidFunction
|
|
transform: rotateY(360deg);
|
|
transition: all 0.6s ease;
|
|
}
|
|
}
|
|
}
|
|
> :not(.sp_tooltip__screenshot-container) {
|
|
font-family: ptsans_italic, sans-serif;
|
|
font-size: 14px;
|
|
margin-bottom: 2px;
|
|
}
|
|
> .sp_tooltip__screenshot-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
.sp_screenshot__container {
|
|
cursor: pointer;
|
|
margin-right: 6px;
|
|
z-index: 1;
|
|
img {
|
|
border: 2px solid $cl_white;
|
|
border-radius: 6px;
|
|
}
|
|
&:hover {
|
|
z-index: 2;
|
|
img {
|
|
animation: 300ms linear infinite screenshot__rock;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:before {
|
|
background: no-repeat center;
|
|
background-size: 70%;
|
|
content: "";
|
|
filter: blur(4px);
|
|
height: 100%;
|
|
left: 0;
|
|
opacity: 0.3;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.sp_tooltip__cursor {
|
|
bottom: 2px;
|
|
height: 20px;
|
|
left: 50%;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
width: 40px;
|
|
z-index: 2;
|
|
&:before {
|
|
background-color: $cl_ui_light;
|
|
border: 2px solid white;
|
|
border-radius: 6px;
|
|
bottom: 8px;
|
|
content: "";
|
|
height: 40px;
|
|
left: 50%;
|
|
position: absolute;
|
|
transform: translateX(-50%) rotate(45deg);
|
|
width: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* *** ID COMMONS *** */
|
|
#header-container, #footer-container {
|
|
color: $cl_white;
|
|
//background-color: rgba($cl_ui_dark, 0.5);
|
|
background-color: $cl_ui_darker;
|
|
}
|
|
#header-container {
|
|
overflow: visible;
|
|
.sp_header__nav, .sp_header__extra {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-shrink: 0;
|
|
flex-wrap: nowrap;
|
|
max-height: inherit;
|
|
overflow: visible;
|
|
}
|
|
.sp_header__nav {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
.sp_header__extra {
|
|
position: absolute;
|
|
right: 20px;
|
|
.sp_icon__container {
|
|
height: 64px;
|
|
&:not(:last-child) {
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
}
|
|
.sp_header__page-icon {
|
|
}
|
|
.sp_header__title {
|
|
line-height: 64px;;
|
|
}
|
|
.sp_nav {
|
|
.sp_nav__item:not(:first-child) {
|
|
background-color: $cl_ui_darker;
|
|
}
|
|
}
|
|
}
|
|
#toasts-container {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
z-index: 999;
|
|
.sp_toast {
|
|
background: $cl_ui_dark;
|
|
color: $cl_white;
|
|
margin-bottom: 6px;
|
|
opacity: 0;
|
|
padding: 8px 12px;
|
|
position: relative;
|
|
transform: translateY(100px);
|
|
&__success {
|
|
background: $cl_common;
|
|
}
|
|
&__error {
|
|
background: $cl_challenge;
|
|
}
|
|
&__active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
transition: all 250ms ease-out;
|
|
}
|
|
}
|
|
}
|
|
#modal-container {
|
|
display: none;
|
|
bottom: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 10;
|
|
transition: opacity ease-out 150ms;
|
|
.sp_modal__background {
|
|
background-color: rgba($cl_ui_dark, 0.6);
|
|
bottom: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
.sp_modal__container, .sp_modal {
|
|
left: 50%;
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.sp_modal__container {
|
|
top: 50%;
|
|
width: 400px;
|
|
z-index: 2;
|
|
}
|
|
.sp_modal {
|
|
top: 200%;
|
|
transition: top ease-out 150ms;
|
|
&.sp_modal__warn {
|
|
background-color: $cl_ui_dark;
|
|
.sp_modal__body {
|
|
color: $cl_white;
|
|
font-family: ptsans_bold, sans-serif;
|
|
}
|
|
}
|
|
}
|
|
&.sp_modal__open {
|
|
display: block;
|
|
opacity: 1;
|
|
transition: opacity ease-in 250ms;
|
|
.sp_modal {
|
|
top: 50%;
|
|
transition: top ease-in 250ms;
|
|
}
|
|
}
|
|
}
|
|
#blob-loader {
|
|
background-color: $cl_sea;
|
|
bottom: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
user-select: none;
|
|
z-index: 100;
|
|
.sp_loader__wrapper,
|
|
.sp_slime__wrapper,
|
|
.sp_slime__outline_ends, .sp_slime__outline_end,
|
|
.sp_slime__eyes, .sp_slime__eye,
|
|
.sp_ground_line__wrapper,
|
|
.sp_ground_line__ends, .sp_ground_line__end,
|
|
.sp_element__wrapper,
|
|
.sp_elements, .sp_element, .sp_element__icon {
|
|
position: absolute;
|
|
}
|
|
|
|
.sp_loader__wrapper, .sp_slime__wrapper, .sp_ground_line__wrapper, .sp_element__wrapper {
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.sp_slime__outline_ends, .sp_ground_line__ends {
|
|
height: inherit;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.sp_slime__outline_end, .sp_ground_line__end, .sp_slime__eye {
|
|
background-color: var(--loader__line-color);
|
|
border-radius: 50%;
|
|
height: inherit;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
&:first-child {
|
|
left: 0;
|
|
}
|
|
&:last-child {
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.sp_element__wrapper, .sp_elements, .sp_element {
|
|
height: calc(var(--loader__slime__size) + (var(--loader__icon-size) * 2) + 20px);
|
|
width: calc(var(--loader__slime__size) + (var(--loader__icon-size) * 2) + 20px);
|
|
}
|
|
|
|
.sp_elements, .sp_element, .sp_element__icon {
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.sp_loader__wrapper {
|
|
height: calc(var(--loader__slime__size) + (var(--loader__icon-size) * 2) + 100px);
|
|
width: calc(var(--loader__slime__size) + (var(--loader__icon-size) * 2) + 100px);
|
|
}
|
|
|
|
.sp_slime__wrapper {
|
|
height: var(--loader__slime__size);
|
|
transform: translate(-50%, calc(-50% - (var(--loader__slime__offset) + var(--loader__ground-line-size) / 2)));
|
|
width: var(--loader__slime__size);
|
|
.sp_slime__outline {
|
|
border: var(--loader__slime__outline-width) solid var(--loader__line-color);
|
|
border-bottom-color: transparent;
|
|
border-right-color: transparent;
|
|
border-radius: 50%;
|
|
height: inherit;
|
|
transform: rotate(45deg);
|
|
width: inherit;
|
|
}
|
|
.sp_slime__outline_ends {
|
|
.sp_slime__outline_end {
|
|
height: var(--loader__slime__outline-width);
|
|
width: var(--loader__slime__outline-width);
|
|
}
|
|
}
|
|
.sp_slime__eyes {
|
|
animation: 5s linear infinite slime_eyes__move;
|
|
height: calc(var(--loader__slime__outline-width) * 2);
|
|
left: 30%;
|
|
top: 20%;
|
|
transform: translateX(-50%);
|
|
width: 50px;
|
|
.sp_slime__eye {
|
|
animation: 5s linear infinite slime_eyes__blink;
|
|
width: var(--loader__slime__outline-width);
|
|
}
|
|
}
|
|
}
|
|
|
|
.sp_ground_line__wrapper {
|
|
height: var(--loader__ground-line-size);
|
|
padding: 0 4px;
|
|
width: calc(var(--loader__slime__size) + (var(--loader__icon-size) * 2) + 40px);
|
|
.sp_ground_line {
|
|
background-color: var(--loader__line-color);
|
|
height: inherit;
|
|
width: 100%;
|
|
}
|
|
.sp_ground_line__ends {
|
|
.sp_ground_line__end {
|
|
width: var(--loader__ground-line-size);
|
|
}
|
|
}
|
|
}
|
|
|
|
.sp_element__wrapper {
|
|
height: calc(((var(--loader__slime__size) + (var(--loader__icon-size) * 2) + 20px) / 2) + var(--loader__slime__offset));
|
|
overflow: hidden;
|
|
transform: translate(-50%, calc(-100% - 4px));
|
|
.sp_elements {
|
|
animation: 10s linear infinite loader_spin;
|
|
width: inherit;
|
|
.sp_element {
|
|
width: inherit;
|
|
.sp_element__icon {
|
|
height: var(--loader__icon-size);
|
|
width: var(--loader__icon-size);
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
@for $i from 2 through 14 {
|
|
&:nth-child(#{$i}) {
|
|
transform: translateX(-50%) rotate(#{25.72deg * ($i - 1)});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sp_loader__text {
|
|
color: $cl_geo;
|
|
font-size: 32px;
|
|
font-family: ptsans_bold, sans-serif;
|
|
left: 50%;
|
|
position: absolute;
|
|
text-align: center;
|
|
top: calc(50% + 20px);
|
|
transform: translateX(-50%);
|
|
.sp_loader__warn-text {
|
|
color: $cl_pyro;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* *** ID FRONT *** */
|
|
#main-left-container, #main-right-container {
|
|
background-color: $cl_ui_light;
|
|
height: 100%;
|
|
overflow: visible;
|
|
position: absolute;
|
|
top: 0;
|
|
width: var(--pannel__width);
|
|
z-index: 2;
|
|
.sp_panel__header {
|
|
background-color: $cl_ui_dark;
|
|
color: #fff;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-shrink: 0;
|
|
flex-wrap: nowrap;
|
|
height: 64px;
|
|
overflow: hidden;
|
|
padding: 0 20px;
|
|
}
|
|
.sp_panel__switch, .sp_panel__content-switch-container {
|
|
position: absolute;
|
|
}
|
|
.sp_panel__content-switch-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-row-gap: 6px;
|
|
top: 200px;
|
|
}
|
|
.sp_panel__switch, .sp_panel__content-switch {
|
|
background-color: $cl_ui_light;
|
|
cursor: pointer;
|
|
height: 50px;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
width: 30px;
|
|
img {
|
|
//filter: drop-shadow(0px 0px 0px gray);
|
|
height: auto;
|
|
left: 50%;
|
|
max-width: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 38px;
|
|
z-index: 1;
|
|
}
|
|
&:before {
|
|
content: '';
|
|
display: block;
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
.sp_panel__switch {
|
|
top: 100px;
|
|
img {
|
|
width: 38px;
|
|
}
|
|
.sp_panel__open {
|
|
display: initial;
|
|
}
|
|
.sp_panel__close {
|
|
display: none;
|
|
}
|
|
}
|
|
.sp_panel__content-switch {
|
|
&.sp_panel__switch-active {
|
|
img {
|
|
filter:
|
|
hue-rotate(color.hue($cl_hydro) - color.hue($cl_geo))
|
|
saturate(100% + color.saturation($cl_geo) - (color.saturation($cl_hydro)))
|
|
brightness(100% + (color.lightness($cl_hydro) - color.lightness($cl_geo)));
|
|
}
|
|
}
|
|
}
|
|
.sp_panel__content {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
width: 100%;
|
|
&.sp_slider {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.sp_slider {
|
|
.sp_slider__slide {
|
|
background-color: $cl_ui_light;
|
|
height: 100%;
|
|
left: -105%;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
position: absolute;
|
|
top: 0;
|
|
transition: left ease-in 150ms;
|
|
width: 100%;
|
|
z-index: 1;
|
|
&.sp_slider__slide-open {
|
|
left: 0;
|
|
transition: left ease-out 250ms;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
.sp_panel__section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
padding: 10px;
|
|
width: 100%;
|
|
.sp_panel__section-title {
|
|
color: $cl_hydro;
|
|
display: flex;
|
|
flex-direction: row;
|
|
line-height: 24px;
|
|
margin-bottom: 10px;
|
|
h2, label {
|
|
font-family: ptsans_bold, sans-serif;
|
|
font-size: 20px;
|
|
margin: 0 auto 0 0;
|
|
}
|
|
button {
|
|
border: none;
|
|
background-color: transparent;
|
|
color: $cl_geo;
|
|
font-family: inherit;
|
|
font-size: 12px;
|
|
height: 14px;
|
|
margin: auto 0 6px;
|
|
}
|
|
}
|
|
}
|
|
&.sp_panel__open {
|
|
.sp_panel__switch {
|
|
.sp_panel__open {
|
|
display: none;
|
|
}
|
|
.sp_panel__close {
|
|
display: initial;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#main-left-container {
|
|
left: calc(var(--pannel__width) * (-1));
|
|
transition: left ease-in 150ms;
|
|
.sp_panel__content-switch-container {
|
|
right: 0;
|
|
transition: right ease-in 150ms;
|
|
}
|
|
.sp_panel__switch, .sp_panel__content-switch {
|
|
border-top-right-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
.sp_panel__switch {
|
|
right: -30px;
|
|
.sp_panel__close {
|
|
//noinspection CssInvalidFunction
|
|
transform: translate(-50%, -50%) rotateZ(180deg);
|
|
}
|
|
}
|
|
&.sp_panel__open {
|
|
left: 0;
|
|
transition: left ease-out 250ms;
|
|
.sp_panel__content-switch-container {
|
|
right: -30px;
|
|
transition: right ease-out 250ms;
|
|
}
|
|
}
|
|
}
|
|
#main-right-container {
|
|
right: calc(var(--pannel__width) * (-1));
|
|
transition: right 150ms;
|
|
.sp_panel__switch {
|
|
border-top-left-radius: 4px;
|
|
border-bottom-left-radius: 4px;
|
|
left: -30px;
|
|
.sp_panel__open {
|
|
//noinspection CssInvalidFunction
|
|
transform: translate(-50%, -50%) rotateZ(180deg);
|
|
}
|
|
}
|
|
&.sp_panel__open {
|
|
right: 0;
|
|
transition: right 250ms;
|
|
}
|
|
}
|
|
#main-center-container {
|
|
z-index: 1;
|
|
&.sp_region__background-sand, &.sp_region__background-sea {
|
|
background-repeat: repeat;
|
|
}
|
|
&.sp_region__background-sand {
|
|
background-image: url('./../static/map/sand.jpg');
|
|
}
|
|
&.sp_region__background-sea {
|
|
background-image: url('./../static/map/sea.jpg');
|
|
}
|
|
}
|
|
#map-title {
|
|
color: white;
|
|
left: 50%;
|
|
position: fixed;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: -1;
|
|
}
|
|
#worldmap-container {
|
|
//display: flex;
|
|
//flex-direction: column;
|
|
height: 100%;
|
|
margin: auto;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
//.sp_grid__container {
|
|
// margin: auto 0;
|
|
// .sp_grid__row {
|
|
// margin: 0 auto;
|
|
// }
|
|
//}
|
|
&.sp_worldmap__edit {
|
|
//.sp_grid__container {
|
|
// .sp_grid__column {
|
|
// .sp_grid__node-container {
|
|
// .sp_node__item:not(#node-form-coordinate-tracker) {
|
|
// filter: grayscale(1);
|
|
// }
|
|
// &:before {
|
|
// content: '';
|
|
// display: block;
|
|
// height: 100%;
|
|
// left: 0;
|
|
// position: absolute;
|
|
// top: 0;
|
|
// width: 100%;
|
|
// z-index: 10000;
|
|
// }
|
|
// }
|
|
// }
|
|
//}
|
|
.sp_grid__cell {
|
|
.sp_grid__node-container {
|
|
.sp_node__item:not(#node-form-coordinate-tracker) {
|
|
filter: grayscale(1);
|
|
}
|
|
&:before {
|
|
content: '';
|
|
display: block;
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 10000;
|
|
}
|
|
}
|
|
}
|
|
&:not(.sp_worldmap_locked) {
|
|
//.sp_grid__container {
|
|
// .sp_grid__column {
|
|
// .sp_grid__map {
|
|
// filter: grayscale(1);
|
|
// }
|
|
// &:hover {
|
|
// filter: grayscale(0);
|
|
// .sp_grid__map {
|
|
// filter: grayscale(0);
|
|
// }
|
|
// }
|
|
// }
|
|
//}
|
|
.sp_grid__cell {
|
|
.sp_grid__map {
|
|
filter: grayscale(1);
|
|
}
|
|
&:hover {
|
|
filter: grayscale(0);
|
|
.sp_grid__map {
|
|
filter: grayscale(0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.sp_worldmap_locked {
|
|
//.sp_grid__container {
|
|
// .sp_grid__column {
|
|
// &:not(.sp_grid__active) {
|
|
// .sp_grid__map {
|
|
// filter: grayscale(1);
|
|
// }
|
|
// }
|
|
// }
|
|
//}
|
|
.sp_grid__cell {
|
|
&:not(.sp_grid__active) {
|
|
.sp_grid__map {
|
|
filter: grayscale(1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sp_node__item {
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
#worldmap-filters {
|
|
.sp_panel__section {
|
|
max-height: 800px;
|
|
transition: max-height ease-in 250ms;
|
|
.sp_panel__section-title {
|
|
h2 {
|
|
span {
|
|
content: '▼';
|
|
cursor: pointer;
|
|
height: 100%;
|
|
position: absolute;
|
|
right: -24px;
|
|
top: 0;
|
|
width: 24px;
|
|
transform: rotate(0deg);
|
|
transition: transform ease-in 250ms;
|
|
}
|
|
}
|
|
}
|
|
&.sp_panel__section-closed {
|
|
max-height: 34px;
|
|
transition: max-height ease-out 250ms;
|
|
.sp_panel__section-title {
|
|
h2 {
|
|
span {
|
|
transform: rotate(-90deg);
|
|
transition: transform ease-out 250ms;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sp_worldmap-filter__section {
|
|
user-select: none;
|
|
}
|
|
.sp_form-row__radio {
|
|
max-width: unset;
|
|
width: 100%;
|
|
.sp_radio__input-wrapper {
|
|
background-color: transparent;
|
|
.sp_radio__input-icon {
|
|
left: 0;
|
|
}
|
|
.nodes_count {
|
|
bottom: 0;
|
|
font-size: 9px;
|
|
height: 9px;
|
|
line-height: 9px;
|
|
position: absolute;
|
|
left: 26px;
|
|
}
|
|
.sp_radio__input-label {
|
|
line-height: 20px;
|
|
margin: 4px 0 auto;
|
|
padding: 0 6px 0 0;
|
|
}
|
|
&:not(.sp_radio__checked) {
|
|
.nodes_count, .sp_radio__input-label {
|
|
color: $cl_gray
|
|
}
|
|
}
|
|
&.sp_radio__checked {
|
|
.nodes_count {
|
|
color: $cl_geo;
|
|
}
|
|
.sp_radio__input-label {
|
|
color: $cl_hydro;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sp_button {
|
|
height: 24px;
|
|
margin: auto;
|
|
width: 24px;
|
|
span {
|
|
line-height: 16px;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
#node-form-coordinate-tracker {
|
|
z-index: 10001;
|
|
.sp_node__background {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
#primogem-counter-container {
|
|
background: linear-gradient(185deg, $cl_ui_darker 20%, #2d548d 90%);
|
|
color: $cl_ui_light;
|
|
height: 64px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 6px 20px;
|
|
h2 {
|
|
font-size: 16px;
|
|
line-height: 18px;
|
|
margin: 0;
|
|
}
|
|
img {
|
|
height: 32px;
|
|
margin-left: 6px;
|
|
width: 32px;
|
|
}
|
|
.sp_primogem__main-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
margin: auto;
|
|
> * {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
&:nth-child(1) {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
height: 32px;
|
|
> * {
|
|
&:first-child {
|
|
margin: auto 6px 0 auto;
|
|
}
|
|
}
|
|
}
|
|
&:nth-child(2) {
|
|
line-height: 18px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
}
|
|
&.sp_primogem__complete {
|
|
img {
|
|
height: 48px;
|
|
margin: auto;
|
|
width: 48px;
|
|
}
|
|
.sp_primogem__main-container {
|
|
> * {
|
|
&:nth-child(1) {
|
|
height: 48px;
|
|
> * {
|
|
&:not(:last-child) {
|
|
display: none;
|
|
}
|
|
&:last-child {
|
|
|
|
}
|
|
}
|
|
}
|
|
&:nth-child(2) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:before {
|
|
background: url("./../static/stars.png") no-repeat center;
|
|
background-size: cover;
|
|
bottom: 0;
|
|
content: '';
|
|
display: block;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
#primogem-counter {
|
|
font-family: ptsans_bold, sans-serif;
|
|
font-size: 28px;
|
|
height: 32px;
|
|
}
|
|
#grid-zoom-container {
|
|
background-color: rgba(0,0,0, 0.3);
|
|
border-radius: 10px;
|
|
display: grid;
|
|
font-size: 18px;
|
|
grid-template-columns: 20px;
|
|
grid-template-rows: 20px 160px 20px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translate(calc(-50% - 10px), -50%);
|
|
height: 200px;
|
|
width: 20px;
|
|
z-index: 2;
|
|
> span {
|
|
color: white;
|
|
display: block;
|
|
font-family: ptsans_bold, sans-serif;
|
|
height: 20px;
|
|
text-align: center;
|
|
width: 20px;
|
|
z-index: 1;
|
|
}
|
|
> input {
|
|
height: 20px;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%) rotate(-90deg);
|
|
width: 160px;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
/* *** ID BACK *** */
|
|
#main-section-container {
|
|
background-color: rgba($cl_ui_dark, 0.5);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
margin: 20px auto;
|
|
max-width: 1000px;
|
|
padding: 16px 20px;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
&.sp_section_container__horizontal {
|
|
flex-direction: row;
|
|
}
|
|
&:after {
|
|
border: 2px solid $cl_ui_light;
|
|
bottom: 0;
|
|
content: "";
|
|
left: 0;
|
|
margin: 6px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
#map-editor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
.sp_map_editor__header_container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
> * {
|
|
display: block;
|
|
height: 38px;
|
|
line-height: 38px;
|
|
text-align: center;
|
|
img {
|
|
height: 100%;
|
|
}
|
|
&:not(:nth-child(2)) {
|
|
flex-shrink: 0;
|
|
width: 50px;
|
|
}
|
|
&:nth-child(2) {
|
|
flex-grow: 1;
|
|
&:before {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sp_map_editor__grid_container {
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
max-height: 700px;
|
|
max-width: 700px;
|
|
width: 100%;
|
|
}
|
|
.sp_grid__container {
|
|
display: grid;
|
|
grid-auto-flow: row;
|
|
grid-template-columns: repeat(var(--grid__width), 1fr);
|
|
grid-template-rows: repeat(var(--grid__height), 1fr);
|
|
//.sp_grid__row {
|
|
// display: grid;
|
|
// grid-auto-flow: column;
|
|
// grid-template-columns: repeat(var(--grid__width), 1fr);
|
|
//}
|
|
//.sp_grid__column {
|
|
// height: auto;
|
|
// padding-top: 100%;
|
|
// width: auto;
|
|
//}
|
|
}
|
|
}
|
|
|
|
&.sp_app__is-touch-device {
|
|
.ul_nav__wrapper {
|
|
height: 64px;
|
|
.ul_nav {
|
|
flex-direction: column;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 64px;
|
|
height: auto;
|
|
max-height: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
transition: max-height ease-out 250ms;
|
|
.ul_nav__head, .ul_nav__tail {
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 3;
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
}
|
|
.ul_nav__head {
|
|
left: 0;
|
|
&:after {
|
|
border-top: 64px solid $cl_geo;
|
|
border-right: 16px solid $cl_ui_darker;
|
|
right: -16px;
|
|
}
|
|
}
|
|
.ul_nav__tail {
|
|
left: 96px;
|
|
&:after {
|
|
border-bottom: 64px solid $cl_geo;
|
|
border-left: 16px solid $cl_ui_darker;
|
|
left: -16px;
|
|
}
|
|
}
|
|
.ul_nav__item {
|
|
min-width: 240px;
|
|
max-width: 100vw;
|
|
width: auto;
|
|
}
|
|
> .ul_nav__item {
|
|
min-height: 64px;
|
|
max-height: unset;
|
|
height: auto;
|
|
&:nth-child(2), &:nth-last-child(2) {
|
|
> a {
|
|
&:after {
|
|
content: unset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ul_nav__sub-nav {
|
|
box-shadow: none;
|
|
max-height: unset;
|
|
transition: none;
|
|
.ul_nav__item {
|
|
}
|
|
}
|
|
&.sp_nav__nav-open {
|
|
.ul_nav {
|
|
max-height: 320px;
|
|
transition: max-height ease-in 350ms;
|
|
}
|
|
}
|
|
}
|
|
|
|
#header-container {
|
|
padding: 0;
|
|
.sp_header__nav {
|
|
margin: 0 0 0 auto;
|
|
width: 0;
|
|
}
|
|
.sp_header__extra {
|
|
background-color: $cl_ui_darker;
|
|
border-radius: 32px;
|
|
bottom: 6px;
|
|
padding: 0 20px;
|
|
position: fixed;
|
|
right: 6px;
|
|
}
|
|
.sp_menu-btn {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
}
|
|
|
|
&[data-device='mobile'] {
|
|
.sp_tooltip__wrapper {
|
|
max-height: 35vh;
|
|
bottom: 10px;
|
|
left: 50%;
|
|
position: fixed;
|
|
transform: translate(-50%, 0);
|
|
width: calc(100vw - 20px);
|
|
.sp_tooltip {
|
|
margin-bottom: 0;
|
|
.sp_tooltip__footer {
|
|
> .sp_tooltip__screenshot-container {
|
|
.sp_screenshot__container {
|
|
&:hover {
|
|
img {
|
|
animation: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:before {
|
|
background: no-repeat center;
|
|
background-size: 70%;
|
|
content: "";
|
|
filter: blur(4px);
|
|
height: 100%;
|
|
left: 0;
|
|
opacity: 0.3;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.sp_tooltip__cursor {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#main-left-container, #main-right-container {
|
|
width: calc(100vw - 40px);
|
|
}
|
|
#main-left-container {
|
|
&:not(.sp_panel__open) {
|
|
left: calc((100vw - 40px) * (-1));
|
|
}
|
|
}
|
|
#main-right-container {
|
|
&:not(.sp_panel__open) {
|
|
right: calc((100vw - 40px) * (-1));
|
|
}
|
|
}
|
|
#primogem-counter-container {
|
|
.sp_primogem__main-container {
|
|
margin: auto auto auto 0;
|
|
> * {
|
|
&:nth-child(1) {
|
|
> * {
|
|
&:first-child {
|
|
margin: auto 6px 0 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#grid-zoom-container {
|
|
top: 10px;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
}
|
|
|
|
&[data-device='tablet'] {}
|
|
}
|
|
}
|
|
|
|
@keyframes loader_spin {
|
|
from {
|
|
transform: translate(-50%) rotate(0deg);
|
|
}
|
|
to {
|
|
transform: translate(-50%) rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes slime_eyes__move {
|
|
0%, 10%, 90%, 100% {
|
|
left: 30%;
|
|
}
|
|
40%, 60% {
|
|
left: 70%;
|
|
}
|
|
}
|
|
|
|
@keyframes slime_eyes__blink {
|
|
0%, 41%, 46%, 91%, 96%, 100% {
|
|
height: inherit;
|
|
}
|
|
42%, 45%, 92%, 95% {
|
|
height: 2px;
|
|
}
|
|
}
|
|
|
|
//noinspection CssInvalidFunction
|
|
@keyframes screenshot__rock {
|
|
0% {
|
|
transform: scale(1.1) rotateZ(0deg);
|
|
}
|
|
25% {
|
|
transform: scale(1.1) rotateZ(2deg);
|
|
}
|
|
50% {
|
|
transform: scale(1.1) rotateZ(0deg);
|
|
}
|
|
75% {
|
|
transform: scale(1.1) rotateZ(-2deg);
|
|
}
|
|
100% {
|
|
transform: scale(1.1) rotateZ(0deg);
|
|
}
|
|
} |