mirror of
https://github.com/wanderer-industries/wanderer
synced 2026-04-30 14:30:47 +00:00
Dmitry Popov
1103 lines
21 KiB
CSS
1103 lines
21 KiB
CSS
@layer tailwind-base, primereact, tailwind-utilities;
|
|
|
|
@import 'quill/dist/quill.snow.css';
|
|
@import 'primereact/resources/themes/arya-blue/theme.css' layer(primereact);
|
|
/*@import 'primereact/resources/themes/bootstrap4-dark-blue/theme.css' layer(primereact);*/
|
|
|
|
@import '../js/hooks/Mapper/components/map/styles/index.scss';
|
|
|
|
@layer tailwind-base {
|
|
@tailwind base;
|
|
}
|
|
|
|
@layer tailwind-utilities {
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
}
|
|
|
|
#app {
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Shentox', 'Rogan', sans-serif !important;
|
|
min-width: 400px; /* Suppose you want minimum width of 400px */
|
|
width: auto !important; /* Firefox will set width as auto */
|
|
width: 400px; /* As IE6 ignores !important it will set width as 400px; */
|
|
}
|
|
|
|
body > div:first-of-type {
|
|
min-height: 500px !important;
|
|
}
|
|
|
|
.lending-normal {
|
|
font-family: 'Shentox', 'Rogan', sans-serif !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
#bg-canvas {
|
|
position: absolute;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
.ccp-font {
|
|
font-family: 'Shentox', 'Rogan', sans-serif !important;
|
|
}
|
|
|
|
.discount {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: red;
|
|
clip-path: polygon(100% 0, 100% 12%, 0% 100%, 0% 88%);
|
|
}
|
|
|
|
.blur {
|
|
filter: blur(3px);
|
|
}
|
|
|
|
.blur:hover {
|
|
filter: none;
|
|
}
|
|
|
|
.show-blured .blur {
|
|
filter: none;
|
|
}
|
|
|
|
.blog-bg {
|
|
background-image: url('https://images.ctfassets.net/7lhcm73ukv5p/3kBbL40e9KAKPMlM27jqRw/670eb7dd8cd76eab700ec8445373dd2c/news_detail_background.jpg?w=900&q=75&fm=webp');
|
|
background-size: cover;
|
|
background-position: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.maps_bg {
|
|
/* OLD image */
|
|
/* background-image: url('../images/maps_bg.webp'); */
|
|
background-image: url('https://wanderer-industries.github.io/wanderer-assets/images/eve-screen-catalyst-expansion-bg.jpg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.cover_bg {
|
|
background-image: url('../images/hello.webp');
|
|
background-size: cover;
|
|
background-position: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.copied .link-copied {
|
|
display: block;
|
|
animation-name: fadeOutOpacity;
|
|
animation-iteration-count: 1;
|
|
animation-delay: 0.5s;
|
|
animation-timing-function: ease-out;
|
|
animation-duration: 1s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
@keyframes fadeOutOpacity {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.wd-user-characters > .wd-characters-icons:not(:last-child) {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.wd-characters-icons {
|
|
/*display: flex;*/
|
|
/*transition:*/
|
|
/* border-color 250ms,*/
|
|
/* opacity 250ms;*/
|
|
/*width: 35px;*/
|
|
/*height: 35px;*/
|
|
/*border-radius: 50%;*/
|
|
/*border-width: 2px;*/
|
|
/*border-style: solid;*/
|
|
/*border-color: #5a5a5a;*/
|
|
/*background-color: rgba(0, 0, 0, 0);*/
|
|
/*cursor: pointer;*/
|
|
/*opacity: 0.6;*/
|
|
}
|
|
|
|
.wd-bg-default {
|
|
background-position: center;
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.wd-characters-icons.character-online {
|
|
border-color: #4fa224de;
|
|
opacity: 1;
|
|
}
|
|
|
|
.wd-app-menu[data-v-24097c87] {
|
|
border-right: 1px solid #454545;
|
|
width: 60px;
|
|
background-color: #2f2f2f;
|
|
}
|
|
.wd.padding-top {
|
|
padding-top: 10px;
|
|
}
|
|
.wd.f-height {
|
|
height: 100%;
|
|
}
|
|
.wd.flex-align-center {
|
|
align-items: center;
|
|
}
|
|
.wd.flex {
|
|
display: flex;
|
|
}
|
|
.wd.flex-column {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.h-auto {
|
|
height: auto !important;
|
|
}
|
|
.min-h-auto {
|
|
min-height: auto !important;
|
|
}
|
|
|
|
.react-flow__attribution {
|
|
display: none;
|
|
}
|
|
|
|
.sortable-ghost {
|
|
display: block;
|
|
width: 100%;
|
|
height: 0;
|
|
font-size: 0.001px;
|
|
line-height: 0;
|
|
color: transparent;
|
|
}
|
|
|
|
.sortable-ghost::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
height: 0;
|
|
background: blue;
|
|
}
|
|
|
|
.Loader {
|
|
padding-top: 10px;
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
|
|
/* █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ */
|
|
.Loader {
|
|
position: relative;
|
|
width: 150px;
|
|
width: 150px;
|
|
min-width: 110px;
|
|
overflow: visible;
|
|
margin: 20px;
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
inset 0 0 8px rgba(255, 255, 255, 0.4),
|
|
0 0 25px rgba(255, 255, 255, 0.8);
|
|
}
|
|
.Loader::after {
|
|
content: attr(data-text);
|
|
color: #cecece;
|
|
color: #cecece;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: calc(70% + 0.1vw);
|
|
text-transform: uppercase;
|
|
letter-spacing: 5px;
|
|
}
|
|
.Loader {
|
|
/* Keep ratio on resize */
|
|
}
|
|
.Loader::before {
|
|
content: '';
|
|
float: left;
|
|
padding-top: 100%;
|
|
}
|
|
.Loader__Circle {
|
|
display: block;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
top: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
opacity: 0.8;
|
|
mix-blend-mode: screen;
|
|
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1.2" /><feFuncG type="linear" slope="1.2" /><feFuncB type="linear" slope="1.2" /></feComponentTransfer></filter></svg>#filter');
|
|
filter: brightness(120%);
|
|
-webkit-animation-name: SpinAround;
|
|
animation-name: SpinAround;
|
|
-webkit-animation-iteration-count: infinite;
|
|
animation-iteration-count: infinite;
|
|
-webkit-animation-duration: 2s;
|
|
animation-duration: 2s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
-webkit-animation-timing-function: linear;
|
|
animation-timing-function: linear;
|
|
}
|
|
.Loader__Circle:nth-of-type(1) {
|
|
box-shadow:
|
|
inset 1px 0 0 1px #2979ff,
|
|
4px 0 0 4px #2979ff;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #2979ff,
|
|
4px 0 0 4px #2979ff;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #2979ff,
|
|
4px 0 0 3px #2979ff;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #2979ff,
|
|
4px 0 0 3px #2979ff;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #2979ff,
|
|
3px 0 0 4px #2979ff;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #2979ff,
|
|
3px 0 0 4px #2979ff;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #2979ff,
|
|
3px 0 0 3px #2979ff;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #2979ff,
|
|
3px 0 0 3px #2979ff;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #2979ff,
|
|
4px 0 0 4px #2979ff;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #2979ff,
|
|
4px 0 0 4px #2979ff;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #2979ff,
|
|
4px 0 0 3px #2979ff;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #2979ff,
|
|
4px 0 0 3px #2979ff;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #2979ff,
|
|
3px 0 0 4px #2979ff;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #2979ff,
|
|
3px 0 0 4px #2979ff;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #2979ff,
|
|
3px 0 0 3px #2979ff;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #2979ff,
|
|
3px 0 0 3px #2979ff;
|
|
animation-direction: reverse;
|
|
transform-origin: 49.6% 49.8%;
|
|
}
|
|
.Loader__Circle:nth-of-type(2) {
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ff1744,
|
|
4px 0px 0 4px #ff1744;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ff1744,
|
|
4px 0px 0 4px #ff1744;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ff1744,
|
|
4px 0px 0 3px #ff1744;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ff1744,
|
|
4px 0px 0 3px #ff1744;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ff1744,
|
|
3px 0px 0 4px #ff1744;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ff1744,
|
|
3px 0px 0 4px #ff1744;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ff1744,
|
|
3px 0px 0 3px #ff1744;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ff1744,
|
|
3px 0px 0 3px #ff1744;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ff1744,
|
|
4px 0px 0 4px #ff1744;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ff1744,
|
|
4px 0px 0 4px #ff1744;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ff1744,
|
|
4px 0px 0 3px #ff1744;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ff1744,
|
|
4px 0px 0 3px #ff1744;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ff1744,
|
|
3px 0px 0 4px #ff1744;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ff1744,
|
|
3px 0px 0 4px #ff1744;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ff1744,
|
|
3px 0px 0 3px #ff1744;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ff1744,
|
|
3px 0px 0 3px #ff1744;
|
|
transform-origin: 49.5% 49.8%;
|
|
}
|
|
.Loader__Circle:nth-of-type(3) {
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ffff8d,
|
|
0 4px 0 4px #ffff8d;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ffff8d,
|
|
0 4px 0 4px #ffff8d;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ffff8d,
|
|
0 4px 0 3px #ffff8d;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ffff8d,
|
|
0 4px 0 3px #ffff8d;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ffff8d,
|
|
0 3px 0 4px #ffff8d;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ffff8d,
|
|
0 3px 0 4px #ffff8d;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ffff8d,
|
|
0 3px 0 3px #ffff8d;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ffff8d,
|
|
0 3px 0 3px #ffff8d;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ffff8d,
|
|
0 4px 0 4px #ffff8d;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ffff8d,
|
|
0 4px 0 4px #ffff8d;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ffff8d,
|
|
0 4px 0 3px #ffff8d;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ffff8d,
|
|
0 4px 0 3px #ffff8d;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ffff8d,
|
|
0 3px 0 4px #ffff8d;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ffff8d,
|
|
0 3px 0 4px #ffff8d;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ffff8d,
|
|
0 3px 0 3px #ffff8d;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #ffff8d,
|
|
0 3px 0 3px #ffff8d;
|
|
transform-origin: 49.8% 49.8%;
|
|
}
|
|
.Loader__Circle:nth-of-type(4) {
|
|
box-shadow:
|
|
inset 1px 0 0 1px #b2ff59,
|
|
0 4px 0 4px #b2ff59;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #b2ff59,
|
|
0 4px 0 4px #b2ff59;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #b2ff59,
|
|
0 4px 0 3px #b2ff59;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #b2ff59,
|
|
0 4px 0 3px #b2ff59;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #b2ff59,
|
|
0 3px 0 4px #b2ff59;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #b2ff59,
|
|
0 3px 0 4px #b2ff59;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #b2ff59,
|
|
0 3px 0 3px #b2ff59;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #b2ff59,
|
|
0 3px 0 3px #b2ff59;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #b2ff59,
|
|
0 4px 0 4px #b2ff59;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #b2ff59,
|
|
0 4px 0 4px #b2ff59;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #b2ff59,
|
|
0 4px 0 3px #b2ff59;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #b2ff59,
|
|
0 4px 0 3px #b2ff59;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #b2ff59,
|
|
0 3px 0 4px #b2ff59;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #b2ff59,
|
|
0 3px 0 4px #b2ff59;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #b2ff59,
|
|
0 3px 0 3px #b2ff59;
|
|
box-shadow:
|
|
inset 1px 0 0 1px #b2ff59,
|
|
0 3px 0 3px #b2ff59;
|
|
transform-origin: 49.7% 49.7%;
|
|
}
|
|
@-webkit-keyframes SpinAround {
|
|
0% {
|
|
transform: rotate(0);
|
|
}
|
|
100% {
|
|
transform: rotate(-360deg);
|
|
}
|
|
}
|
|
@keyframes SpinAround {
|
|
0% {
|
|
transform: rotate(0);
|
|
}
|
|
100% {
|
|
transform: rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
/* Map refresh */
|
|
.socket {
|
|
scale: 0.5;
|
|
width: 150px;
|
|
height: 150px;
|
|
left: 50%;
|
|
/* margin-left: -75px; */
|
|
top: 50%;
|
|
/* margin-top: -50px; */
|
|
}
|
|
|
|
.hex-brick {
|
|
background: #000;
|
|
width: 30px;
|
|
height: 17px;
|
|
position: absolute;
|
|
top: 5px;
|
|
animation-name: fade;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
-webkit-animation-name: fade;
|
|
-webkit-animation-duration: 2s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
}
|
|
|
|
.hex-brick--active {
|
|
animation-name: fade-active;
|
|
-webkit-animation-name: fade-active;
|
|
}
|
|
|
|
.h2 {
|
|
transform: rotate(60deg);
|
|
-webkit-transform: rotate(60deg);
|
|
}
|
|
|
|
.h3 {
|
|
transform: rotate(-60deg);
|
|
-webkit-transform: rotate(-60deg);
|
|
}
|
|
|
|
.gel {
|
|
height: 30px;
|
|
width: 30px;
|
|
transition: all 0.3s;
|
|
-webkit-transition: all 0.3s;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
|
|
.center-gel {
|
|
margin-left: -15px;
|
|
margin-top: -15px;
|
|
|
|
animation-name: pulse-version;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
-webkit-animation-name: pulse-version;
|
|
-webkit-animation-duration: 2s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
}
|
|
|
|
.c1 {
|
|
margin-left: -47px;
|
|
margin-top: -15px;
|
|
}
|
|
|
|
.c2 {
|
|
margin-left: -31px;
|
|
margin-top: -43px;
|
|
}
|
|
|
|
.c3 {
|
|
margin-left: 1px;
|
|
margin-top: -43px;
|
|
}
|
|
|
|
.c4 {
|
|
margin-left: 17px;
|
|
margin-top: -15px;
|
|
}
|
|
.c5 {
|
|
margin-left: -31px;
|
|
margin-top: 13px;
|
|
}
|
|
|
|
.c6 {
|
|
margin-left: 1px;
|
|
margin-top: 13px;
|
|
}
|
|
|
|
.c7 {
|
|
margin-left: -63px;
|
|
margin-top: -43px;
|
|
}
|
|
|
|
.c8 {
|
|
margin-left: 33px;
|
|
margin-top: -43px;
|
|
}
|
|
|
|
.c9 {
|
|
margin-left: -15px;
|
|
margin-top: 41px;
|
|
}
|
|
|
|
.c10 {
|
|
margin-left: -63px;
|
|
margin-top: 13px;
|
|
}
|
|
|
|
.c11 {
|
|
margin-left: 33px;
|
|
margin-top: 13px;
|
|
}
|
|
|
|
.c12 {
|
|
margin-left: -15px;
|
|
margin-top: -71px;
|
|
}
|
|
|
|
.c13 {
|
|
margin-left: -47px;
|
|
margin-top: -71px;
|
|
}
|
|
|
|
.c14 {
|
|
margin-left: 17px;
|
|
margin-top: -71px;
|
|
}
|
|
|
|
.c15 {
|
|
margin-left: -47px;
|
|
margin-top: 41px;
|
|
}
|
|
|
|
.c16 {
|
|
margin-left: 17px;
|
|
margin-top: 41px;
|
|
}
|
|
|
|
.c17 {
|
|
margin-left: -79px;
|
|
margin-top: -15px;
|
|
}
|
|
|
|
.c18 {
|
|
margin-left: 49px;
|
|
margin-top: -15px;
|
|
}
|
|
|
|
.c19 {
|
|
margin-left: -63px;
|
|
margin-top: -99px;
|
|
}
|
|
|
|
.c20 {
|
|
margin-left: 33px;
|
|
margin-top: -99px;
|
|
}
|
|
|
|
.c21 {
|
|
margin-left: 1px;
|
|
margin-top: -99px;
|
|
}
|
|
|
|
.c22 {
|
|
margin-left: -31px;
|
|
margin-top: -99px;
|
|
}
|
|
|
|
.c23 {
|
|
margin-left: -63px;
|
|
margin-top: 69px;
|
|
}
|
|
|
|
.c24 {
|
|
margin-left: 33px;
|
|
margin-top: 69px;
|
|
}
|
|
|
|
.c25 {
|
|
margin-left: 1px;
|
|
margin-top: 69px;
|
|
}
|
|
|
|
.c26 {
|
|
margin-left: -31px;
|
|
margin-top: 69px;
|
|
}
|
|
|
|
.c27 {
|
|
margin-left: -79px;
|
|
margin-top: -15px;
|
|
}
|
|
|
|
.c28 {
|
|
margin-left: -95px;
|
|
margin-top: -43px;
|
|
}
|
|
|
|
.c29 {
|
|
margin-left: -95px;
|
|
margin-top: 13px;
|
|
}
|
|
|
|
.c30 {
|
|
margin-left: 49px;
|
|
margin-top: 41px;
|
|
}
|
|
|
|
.c31 {
|
|
margin-left: -79px;
|
|
margin-top: -71px;
|
|
}
|
|
|
|
.c32 {
|
|
margin-left: -111px;
|
|
margin-top: -15px;
|
|
}
|
|
|
|
.c33 {
|
|
margin-left: 65px;
|
|
margin-top: -43px;
|
|
}
|
|
|
|
.c34 {
|
|
margin-left: 65px;
|
|
margin-top: 13px;
|
|
}
|
|
|
|
.c35 {
|
|
margin-left: -79px;
|
|
margin-top: 41px;
|
|
}
|
|
|
|
.c36 {
|
|
margin-left: 49px;
|
|
margin-top: -71px;
|
|
}
|
|
|
|
.c37 {
|
|
margin-left: 81px;
|
|
margin-top: -15px;
|
|
}
|
|
|
|
.r1 {
|
|
animation-name: pulse-version;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
animation-delay: 0.2s;
|
|
-webkit-animation-name: pulse-version;
|
|
-webkit-animation-duration: 2s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-animation-delay: 0.2s;
|
|
}
|
|
|
|
.r2 {
|
|
animation-name: pulse-version;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
animation-delay: 0.4s;
|
|
-webkit-animation-name: pulse-version;
|
|
-webkit-animation-duration: 2s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-animation-delay: 0.4s;
|
|
}
|
|
|
|
.r3 {
|
|
animation-name: pulse-version;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
animation-delay: 0.6s;
|
|
-webkit-animation-name: pulse-version;
|
|
-webkit-animation-duration: 2s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-animation-delay: 0.6s;
|
|
}
|
|
|
|
.r1 > .hex-brick {
|
|
animation-name: fade;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
animation-delay: 0.2s;
|
|
-webkit-animation-name: fade;
|
|
-webkit-animation-duration: 2s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-animation-delay: 0.2s;
|
|
}
|
|
|
|
.r1 > .hex-brick--active {
|
|
animation-name: fade-active;
|
|
-webkit-animation-name: fade-active;
|
|
}
|
|
|
|
.r2 > .hex-brick {
|
|
animation-name: fade;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
animation-delay: 0.4s;
|
|
-webkit-animation-name: fade;
|
|
-webkit-animation-duration: 2s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-animation-delay: 0.4s;
|
|
}
|
|
|
|
.r2 > .hex-brick--active {
|
|
animation-name: fade-active;
|
|
-webkit-animation-name: fade-active;
|
|
}
|
|
|
|
.r3 > .hex-brick {
|
|
animation-name: fade;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
animation-delay: 0.6s;
|
|
-webkit-animation-name: fade;
|
|
-webkit-animation-duration: 2s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-animation-delay: 0.6s;
|
|
}
|
|
|
|
.r3 > .hex-brick--active {
|
|
animation-name: fade-active;
|
|
-webkit-animation-name: fade-active;
|
|
}
|
|
|
|
@keyframes pulse-version {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale(0.01);
|
|
transform: scale(0.01);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes fade {
|
|
0% {
|
|
background: #09d0e2;
|
|
}
|
|
|
|
50% {
|
|
background: #8ae6ee;
|
|
}
|
|
|
|
100% {
|
|
background: #09d0e2;
|
|
}
|
|
}
|
|
|
|
@keyframes fade-active {
|
|
0% {
|
|
background: #ff52d9;
|
|
}
|
|
|
|
50% {
|
|
background: #ff52d9;
|
|
}
|
|
|
|
100% {
|
|
background: #ff52d9;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes pulse {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale(0.01);
|
|
transform: scale(0.01);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fade {
|
|
0% {
|
|
background: #abf8ff;
|
|
}
|
|
|
|
50% {
|
|
background: #389ca6;
|
|
}
|
|
|
|
100% {
|
|
background: #abf8ff;
|
|
}
|
|
}
|
|
/* Map refresh END */
|
|
|
|
.inputContainer {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: center;
|
|
}
|
|
.inputContainer > span:nth-child(1),
|
|
.inputContainer > label:nth-child(1) {
|
|
color: var(--gray-200);
|
|
font-size: 13px;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.inputContainer > :nth-child(2) {
|
|
border-bottom: 2px dotted #3f3f3f;
|
|
height: 1px;
|
|
margin: 0 12px;
|
|
}
|
|
|
|
.smallInputSwitch {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.smallInputSwitch .p-inputswitch {
|
|
height: 1rem;
|
|
width: 2rem;
|
|
}
|
|
.smallInputSwitch .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider::before {
|
|
transform: translateX(1rem);
|
|
}
|
|
.smallInputSwitch .p-inputswitch.p-highlight .p-inputswitch-slider:before {
|
|
transform: translateX(1rem);
|
|
}
|
|
.smallInputSwitch .p-inputswitch .p-inputswitch-slider::before {
|
|
width: 0.8rem;
|
|
height: 0.8rem;
|
|
margin-top: -0.4rem;
|
|
margin-left: -3px;
|
|
}
|
|
|
|
.checkboxRoot.sizeXS {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.checkboxRoot.sizeXS .p-checkbox-box,
|
|
.checkboxRoot.sizeXS .p-checkbox-input {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.checkboxRoot.sizeM {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.checkboxRoot.sizeM .p-checkbox-box,
|
|
.checkboxRoot.sizeM .p-checkbox-input {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.verticalTabsContainer {
|
|
display: flex;
|
|
width: 100%;
|
|
min-height: 300px;
|
|
}
|
|
.verticalTabsContainer .p-tabview {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
.verticalTabsContainer .p-tabview-panels {
|
|
padding: 6px 1rem !important;
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
}
|
|
.verticalTabsContainer .p-tabview-nav-container {
|
|
border-right: none;
|
|
height: 100%;
|
|
}
|
|
.verticalTabsContainer .p-tabview-nav {
|
|
flex-direction: column;
|
|
width: 150px;
|
|
min-height: 100%;
|
|
border: none;
|
|
}
|
|
.verticalTabsContainer .p-tabview-nav li {
|
|
width: 100%;
|
|
border-right: 4px solid var(--surface-hover);
|
|
background-color: var(--surface-card);
|
|
transition:
|
|
background-color 200ms,
|
|
border-right-color 200ms;
|
|
}
|
|
.verticalTabsContainer .p-tabview-nav li:hover {
|
|
background-color: var(--surface-hover);
|
|
border-right: 4px solid var(--surface-100);
|
|
}
|
|
.verticalTabsContainer .p-tabview-nav li .p-tabview-nav-link {
|
|
transition: color 200ms;
|
|
justify-content: flex-end;
|
|
padding: 10px;
|
|
background-color: initial;
|
|
border: none;
|
|
color: var(--gray-400);
|
|
border-radius: initial;
|
|
font-weight: 400;
|
|
margin: 0;
|
|
}
|
|
.verticalTabsContainer .p-tabview-nav li.p-tabview-selected {
|
|
background-color: var(--surface-50);
|
|
border-right: 4px solid var(--primary-color);
|
|
}
|
|
.verticalTabsContainer .p-tabview-nav li.p-tabview-selected .p-tabview-nav-link {
|
|
font-weight: 600;
|
|
color: var(--primary-color);
|
|
}
|
|
.verticalTabsContainer .p-tabview-nav li.p-tabview-selected:hover {
|
|
border-right: 4px solid var(--primary-color);
|
|
}
|
|
.verticalTabsContainer .p-tabview-panel {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* Blog post CTA links - only in main post content */
|
|
.post-content a {
|
|
display: inline-block;
|
|
background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
|
|
color: white !important;
|
|
padding: 0.5rem 1.25rem;
|
|
border-radius: 0.5rem;
|
|
text-decoration: none !important;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
|
|
}
|
|
|
|
.post-content a:hover {
|
|
background: linear-gradient(135deg, #db2777 0%, #7c3aed 100%);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4);
|
|
}
|
|
|
|
.post-content a:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 2px 10px rgba(236, 72, 153, 0.3);
|
|
}
|
|
|
|
/* Quill editor dark theme overrides */
|
|
.ql-toolbar.ql-snow {
|
|
border-color: #44403c;
|
|
background-color: #1c1917;
|
|
}
|
|
|
|
.ql-container.ql-snow {
|
|
border-color: #44403c;
|
|
background-color: #0c0a09;
|
|
color: #e7e5e4;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.ql-editor.ql-blank::before {
|
|
color: #78716c;
|
|
font-style: italic;
|
|
}
|
|
|
|
.ql-snow .ql-stroke {
|
|
stroke: #a8a29e;
|
|
}
|
|
|
|
.ql-snow .ql-fill,
|
|
.ql-snow .ql-stroke.ql-fill {
|
|
fill: #a8a29e;
|
|
}
|
|
|
|
.ql-snow .ql-picker {
|
|
color: #a8a29e;
|
|
}
|
|
|
|
.ql-snow .ql-picker-options {
|
|
background-color: #1c1917;
|
|
border-color: #44403c;
|
|
}
|
|
|
|
.ql-snow .ql-picker-label:hover,
|
|
.ql-snow .ql-picker-label.ql-active,
|
|
.ql-snow .ql-picker-item:hover,
|
|
.ql-snow .ql-picker-item.ql-selected {
|
|
color: #e7e5e4;
|
|
}
|
|
|
|
.ql-snow .ql-picker-label:hover .ql-stroke,
|
|
.ql-snow .ql-picker-label.ql-active .ql-stroke,
|
|
.ql-snow button:hover .ql-stroke,
|
|
.ql-snow button.ql-active .ql-stroke {
|
|
stroke: #e7e5e4;
|
|
}
|
|
|
|
.ql-snow .ql-picker-label:hover .ql-fill,
|
|
.ql-snow .ql-picker-label.ql-active .ql-fill,
|
|
.ql-snow button:hover .ql-fill,
|
|
.ql-snow button.ql-active .ql-fill {
|
|
fill: #e7e5e4;
|
|
}
|
|
|
|
.ql-snow a {
|
|
color: #60a5fa;
|
|
}
|
|
|
|
.ql-tooltip {
|
|
background-color: #1c1917 !important;
|
|
border-color: #44403c !important;
|
|
color: #e7e5e4 !important;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
|
|
}
|
|
|
|
.ql-tooltip input[type="text"] {
|
|
background-color: #0c0a09;
|
|
border-color: #44403c;
|
|
color: #e7e5e4;
|
|
}
|