408 lines
9.3 KiB
CSS
408 lines
9.3 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--foreground-rgb: 0, 0, 0;
|
|
--background-start-rgb: 214, 219, 220;
|
|
--background-end-rgb: 255, 255, 255;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--foreground-rgb: 255, 255, 255;
|
|
--background-start-rgb: 0, 0, 0;
|
|
--background-end-rgb: 0, 0, 0;
|
|
}
|
|
}
|
|
|
|
body{
|
|
padding-top: 50px;
|
|
}
|
|
|
|
.grid-content{
|
|
display: grid;
|
|
grid-template-columns: auto 400px;
|
|
}
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
.grid-content {
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
}
|
|
}
|
|
|
|
.search-menus{
|
|
display: grid;
|
|
margin-left: 30px;
|
|
grid-template-columns: 300px auto;
|
|
}
|
|
|
|
input{
|
|
margin-top: 5px;
|
|
margin-bottom: 10px;;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
textarea{
|
|
margin-top: 5px;
|
|
margin-bottom: 10px;;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
select{
|
|
margin-top: 5px;
|
|
margin-bottom: 10px;;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
#tablist .tabs-home::-webkit-scrollbar {
|
|
height:0;
|
|
}
|
|
|
|
@media screen and (min-width:768px) {
|
|
#tablist .tabs-home::-webkit-scrollbar {
|
|
height:2px;
|
|
}
|
|
}
|
|
|
|
#tablist .tabs-home__button {
|
|
background-color:transparent;
|
|
border:0;
|
|
font-family:'Museo Sans',sans-serif;
|
|
width:105px;
|
|
height:33px;
|
|
display:-webkit-box;
|
|
display:-webkit-flex;
|
|
display:-ms-flexbox;
|
|
display:flex;
|
|
-webkit-align-items:center;
|
|
-webkit-box-align:center;
|
|
-ms-flex-align:center;
|
|
align-items:center;
|
|
-webkit-box-pack:center;
|
|
-webkit-justify-content:center;
|
|
-ms-flex-pack:center;
|
|
justify-content:center;
|
|
color:rgb(254, 226, 226);
|
|
font-weight:500;
|
|
line-height:17px;
|
|
padding:8px;
|
|
font-size:14px;
|
|
}
|
|
|
|
@media screen and (max-width:768px) {
|
|
#tablist .tabs-home__button {
|
|
font-weight:500;
|
|
font-size:14px;
|
|
line-height:17px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width:768px) {
|
|
#tablist .tabs-home__button {
|
|
-webkit-flex:0 0 auto;
|
|
-ms-flex:0 0 auto;
|
|
flex:0 0 auto;
|
|
}
|
|
}
|
|
|
|
#tablist .tabs-home__button:first-child {
|
|
padding-left:0;
|
|
}
|
|
|
|
#tablist .button--active {
|
|
color:white;
|
|
border-bottom:2px solid #fff;
|
|
font-weight:700;
|
|
}
|
|
|
|
.ui-atomic-button {
|
|
align-items:center;
|
|
cursor:pointer;
|
|
display:inline-flex;
|
|
height:2rem;
|
|
line-height:inherit;
|
|
outline:0;
|
|
text-align:center;
|
|
text-decoration:none;
|
|
white-space:nowrap;
|
|
padding-left:1rem;
|
|
padding-right:1rem;
|
|
font-size:14px;
|
|
border-radius:.25rem;
|
|
border-left:0 solid #000;
|
|
border-right:0 solid #000;
|
|
border-top:0 solid #000;
|
|
border-bottom:0 solid #000;
|
|
font-weight:500;
|
|
margin-right: 12px;
|
|
margin: 5px;
|
|
border-radius: 8px;
|
|
transition: background .2s;
|
|
}
|
|
|
|
/* CSS variables. */
|
|
:root {
|
|
--PhoneInput-color--focus: #03b2cb;
|
|
--PhoneInputInternationalIconPhone-opacity: 0.8;
|
|
--PhoneInputInternationalIconGlobe-opacity: 0.65;
|
|
--PhoneInputCountrySelect-marginRight: 0.35em;
|
|
--PhoneInputCountrySelectArrow-width: 0.3em;
|
|
--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
|
|
--PhoneInputCountrySelectArrow-borderWidth: 1px;
|
|
--PhoneInputCountrySelectArrow-opacity: 0.45;
|
|
--PhoneInputCountrySelectArrow-color: currentColor;
|
|
--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
|
|
--PhoneInputCountrySelectArrow-transform: rotate(45deg);
|
|
--PhoneInputCountryFlag-aspectRatio: 1.5;
|
|
--PhoneInputCountryFlag-height: 1em;
|
|
--PhoneInputCountryFlag-borderWidth: 1px;
|
|
--PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);
|
|
--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
|
|
--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.PhoneInput {
|
|
/* This is done to stretch the contents of this component. */
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.PhoneInputInput {
|
|
/* The phone number input stretches to fill all empty space */
|
|
flex: 1;
|
|
/* The phone number input should shrink
|
|
to make room for the extension input */
|
|
min-width: 0;
|
|
}
|
|
|
|
.PhoneInputCountryIcon {
|
|
width: calc(1em * 1.5);
|
|
width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));
|
|
height: 1em;
|
|
height: var(--PhoneInputCountryFlag-height);
|
|
}
|
|
|
|
.PhoneInputCountryIcon--square {
|
|
width: 1em;
|
|
width: var(--PhoneInputCountryFlag-height);
|
|
}
|
|
|
|
.PhoneInputCountryIcon--border {
|
|
/* Removed `background-color` because when an `<img/>` was still loading
|
|
it would show a dark gray rectangle. */
|
|
/* For some reason the `<img/>` is not stretched to 100% width and height
|
|
and sometime there can be seen white pixels of the background at top and bottom. */
|
|
background-color: rgba(0,0,0,0.1);
|
|
background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
|
|
/* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
|
|
/* For some reason the `<img/>` is not stretched to 100% width and height
|
|
and sometime there can be seen white pixels of the background at top and bottom,
|
|
so an additional "inset" border is added. */
|
|
box-shadow: 0 0 0 1px rgba(0,0,0,0.5),
|
|
inset 0 0 0 1px rgba(0,0,0,0.5);
|
|
box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),
|
|
inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);
|
|
}
|
|
|
|
.PhoneInputCountryIconImg {
|
|
/* Fixes weird vertical space above the flag icon. */
|
|
/* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
|
|
display: block;
|
|
/* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.
|
|
Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.PhoneInputInternationalIconPhone {
|
|
opacity: 0.8;
|
|
opacity: var(--PhoneInputInternationalIconPhone-opacity);
|
|
}
|
|
|
|
.PhoneInputInternationalIconGlobe {
|
|
opacity: 0.65;
|
|
opacity: var(--PhoneInputInternationalIconGlobe-opacity);
|
|
}
|
|
|
|
/* Styling native country `<select/>`. */
|
|
|
|
.PhoneInputCountry {
|
|
position: relative;
|
|
align-self: stretch;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 0.35em;
|
|
margin-right: var(--PhoneInputCountrySelect-marginRight);
|
|
}
|
|
|
|
.PhoneInputCountrySelect {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 1;
|
|
border: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.PhoneInputCountrySelect[disabled],
|
|
.PhoneInputCountrySelect[readonly] {
|
|
cursor: default;
|
|
}
|
|
|
|
.PhoneInputCountrySelectArrow {
|
|
display: block;
|
|
content: '';
|
|
width: 0.3em;
|
|
width: var(--PhoneInputCountrySelectArrow-width);
|
|
height: 0.3em;
|
|
height: var(--PhoneInputCountrySelectArrow-width);
|
|
margin-left: 0.35em;
|
|
margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
|
|
border-style: solid;
|
|
border-color: currentColor;
|
|
border-color: var(--PhoneInputCountrySelectArrow-color);
|
|
border-top-width: 0;
|
|
border-bottom-width: 1px;
|
|
border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
|
|
border-left-width: 0;
|
|
border-right-width: 1px;
|
|
border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
|
|
transform: rotate(45deg);
|
|
transform: var(--PhoneInputCountrySelectArrow-transform);
|
|
opacity: 0.45;
|
|
opacity: var(--PhoneInputCountrySelectArrow-opacity);
|
|
}
|
|
|
|
.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
|
|
opacity: 1;
|
|
color: #03b2cb;
|
|
color: var(--PhoneInputCountrySelectArrow-color--focus);
|
|
}
|
|
|
|
.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
|
|
box-shadow: 0 0 0 1px #03b2cb,
|
|
inset 0 0 0 1px #03b2cb;
|
|
box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),
|
|
inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);
|
|
}
|
|
|
|
.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
|
|
opacity: 1;
|
|
color: #03b2cb;
|
|
color: var(--PhoneInputCountrySelectArrow-color--focus);
|
|
}
|
|
|
|
.loader {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 150px;
|
|
height: 150px;
|
|
background: transparent;
|
|
border: 3px solid rgba(244, 150, 25, 0.1);
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 150px;
|
|
font-family: sans-serif;
|
|
font-size: 20px;
|
|
color: #c30000;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
text-shadow: 0 0 10px #c30000;
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, .15);
|
|
}
|
|
|
|
.loader::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -3px;
|
|
left: -3px;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 3px solid transparent;
|
|
border-top: 3px solid #F49619;
|
|
border-right: 3px solid #F49619;
|
|
border-radius: 50%;
|
|
animation: animateC 2s linear infinite;
|
|
}
|
|
|
|
.loader span {
|
|
display: block;
|
|
position: absolute;
|
|
top: calc(50% - 2px);
|
|
left: 50%;
|
|
width: 50%;
|
|
height: 4px;
|
|
background: transparent;
|
|
transform-origin: left;
|
|
animation: animate 2s linear infinite;
|
|
}
|
|
|
|
.loader span::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: #F49619;
|
|
top: -6px;
|
|
right: -8px;
|
|
box-shadow: 0 0 20px 5px #f7c481;
|
|
}
|
|
|
|
@keyframes animateC {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes animate {
|
|
0% {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(405deg);
|
|
}
|
|
}
|
|
|
|
.premium {
|
|
-webkit-mask:url("/premium.png") center/contain;
|
|
mask:url("/premium.png") center/contain;
|
|
}
|
|
|
|
.popular {
|
|
-webkit-mask:url("/popular.png") center/contain;
|
|
mask:url("/popular.png") center/contain;
|
|
}
|
|
|
|
.bg-primary {
|
|
background-color: #F49619;
|
|
}
|
|
|
|
.primary {
|
|
color: #F49619;
|
|
}
|
|
|
|
.secondary {
|
|
color: #c30000;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #c30000;
|
|
color: #fff;
|
|
} |