structura foldere
mutat kq- folders in un singur folder [kq]
This commit is contained in:
@@ -0,0 +1,251 @@
|
||||
.bank-app {
|
||||
background: linear-gradient(rgba(190, 0, 255, 0.4), rgba(190, 0, 255, 0.4)),
|
||||
url("https://i.redd.it/b2r25i2yvjj01.jpg");
|
||||
background-size: cover;
|
||||
box-shadow: 0px 10px 20px #888;
|
||||
}
|
||||
|
||||
#bank-home-page .top-text {
|
||||
position: relative;
|
||||
top: 40px;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#bank-home-page .transactions {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
#bank-home-page .main .main-text {
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.bank-app .top {
|
||||
height: 35%;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.bank-app .top-text {
|
||||
margin: 20px 40px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.bank-app .welcome {
|
||||
color: #d5b8ff;
|
||||
font-size: 22px;
|
||||
line-height: 0.7;
|
||||
}
|
||||
|
||||
.bank-app .bank-name {
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bank-app .balance {
|
||||
color: #d5b8ff;
|
||||
line-height: 0.7;
|
||||
}
|
||||
|
||||
.bank-app .amount {
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bank-app .amount .fa-dollar-sign {
|
||||
color: #d5b8ff;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.bank-app .amount .noughts {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.bank-app .fa-caret-right {
|
||||
color: #d5b8ff;
|
||||
font-size: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bank-app .main {
|
||||
background: var(--container-dark-background-color);
|
||||
height: 65%;
|
||||
color: #555;
|
||||
border-radius: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bank-app .plus {
|
||||
background: #3cec97;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
top: -25px;
|
||||
right: 35px;
|
||||
font-size: 50px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
box-shadow: 0px 5px 20px #3cec97;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bank-app .plus p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bank-app .main-text {
|
||||
margin: 20px 40px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.bank-app .transactions {
|
||||
color: #663399;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.bank-app .date {
|
||||
color: #999;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.bank-app .fa-caret-down {
|
||||
color: #e1e1e1;
|
||||
}
|
||||
|
||||
.bank-app .transaction-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
overflow-y: auto;
|
||||
margin: 20px 25px;
|
||||
max-height: 78%;
|
||||
}
|
||||
|
||||
.bank-app .symbol {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
background: #b589d6;
|
||||
}
|
||||
|
||||
.transaction-item:hover {
|
||||
background-color: var(--dark-background-color)
|
||||
}
|
||||
|
||||
.bank-app .company {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
.bank-app .type {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bank-app .transaction-grid .fa-dollar-sign {
|
||||
color: #e1e1e1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.invoice-information {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.bank-app .transaction-grid .amount {
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.bank-app .transaction-grid .noughts {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.bank-app .icon-bar {
|
||||
bottom: 60px;
|
||||
background: #f7f7f7;
|
||||
height: 70px;
|
||||
width: 100%;
|
||||
border-radius: 30px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bank-app .icon-bar i {
|
||||
padding: 30px;
|
||||
color: #c1c1c1;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.bank-app .icon-bar i.active {
|
||||
color: #b589d6;
|
||||
}
|
||||
|
||||
#bank-transfer-page {
|
||||
top: 10%;
|
||||
transform: translateY(100%);
|
||||
transition: 0.5s;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#bank-transfer-page heade{
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#bank-transfer-page header a {
|
||||
font-size: 18px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
#bank-transfer-page.active {
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#bank-transfer-page i {
|
||||
right: 20px;
|
||||
top: 23px;
|
||||
}
|
||||
|
||||
#bank-transfer-page .justify-center a {
|
||||
position: relative;
|
||||
bottom: 4px;
|
||||
}
|
||||
|
||||
#bank-transfer-contacts .swiper-slide.selected div img {
|
||||
box-shadow: 0px 0px 0px 2px #663399;
|
||||
transition: 0.5s;
|
||||
scale: 1.05;
|
||||
}
|
||||
|
||||
#bank-transfer-contacts .swiper-slide.selected span {
|
||||
color: #663399;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
#bank-transfer-form {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.bank-transfer-transaction,
|
||||
.bank-transfer-amount {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.bank-no-contacts {
|
||||
margin-top: 15px;
|
||||
font-size: 15px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.bank-color-text i {
|
||||
color: var(--text-color) !important
|
||||
}
|
||||
+68
@@ -0,0 +1,68 @@
|
||||
.calculator-app {
|
||||
padding: 20px;
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
.calculator_value {
|
||||
position: absolute;
|
||||
font-size: 60px;
|
||||
width: 85%;
|
||||
left: 35px;
|
||||
margin-top: 55%;
|
||||
text-align: right;
|
||||
word-wrap: break-word;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.buttons-container {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
top: 40%;
|
||||
left: 35px;
|
||||
width: 85%;
|
||||
height: 50%;
|
||||
grid-gap: 10px;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
.calculator_button {
|
||||
align-items: center;
|
||||
background: #e0e0e0;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 29px;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
transition: filter 0.3s;
|
||||
width: 100%;
|
||||
color: white;
|
||||
background: #313131;
|
||||
}
|
||||
|
||||
.calculator_button.function {
|
||||
background: #a5a5a5;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.calculator_button.operator {
|
||||
background: #f69906;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calculator_button.number-0 {
|
||||
border-radius: 55px;
|
||||
grid-column: 1 / span 2;
|
||||
padding-right: 90px;
|
||||
width: 175px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calculator_button:active,
|
||||
.calculator_button:focus {
|
||||
filter: brightness(120%);
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
.calendar-widget {
|
||||
background: var(--calendar-widget) !important;
|
||||
}
|
||||
|
||||
.contenido .calendar-widget .calendarioWrapper {
|
||||
scale: 1.25;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.calendar-widget .eventos {
|
||||
width: calc(100% - 112px);
|
||||
font-size: 12px;
|
||||
}
|
||||
.calendar-widget .calendarioWrapper {
|
||||
width: 120px;
|
||||
scale: 1.1
|
||||
}
|
||||
.calendar-widget .calendarioWrapper .mes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.calendar-widget .calendarioWrapper .mes .mesName {
|
||||
position: relative;
|
||||
color: #d24f54;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
top: 5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.calendar-widget .calendarioWrapper .mes .calendarioTabla .tablaHeader,
|
||||
.calendar-widget .calendarioWrapper .mes .calendarioTabla .tablaContent {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
align-content: center;
|
||||
}
|
||||
.calendar-widget .calendarioWrapper .mes .calendarioTabla .tablaHeader > *,
|
||||
.calendar-widget .calendarioWrapper .mes .calendarioTabla .tablaContent > * {
|
||||
position: relative;
|
||||
left: 4px;
|
||||
bottom: 3px;
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.calendar-widget .calendarioWrapper .mes .calendarioTabla .tablaHeader {
|
||||
margin: 5px auto;
|
||||
}
|
||||
.calendar-widget
|
||||
.calendarioWrapper
|
||||
.mes
|
||||
.calendarioTabla
|
||||
.tablaContent
|
||||
.diaNum {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: 16px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
.calendar-widget
|
||||
.calendarioWrapper
|
||||
.mes
|
||||
.calendarioTabla
|
||||
.tablaContent
|
||||
.diaNum.activo {
|
||||
color: #fff;
|
||||
background-color: #d24f54;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.diaName {
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
@@ -0,0 +1,411 @@
|
||||
#camera-take-photo {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
background-color: transparent;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
#camera-take-photo-circle {
|
||||
position: absolute;
|
||||
width: 92%;
|
||||
height: 92%;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #000;
|
||||
background-color: #fff;
|
||||
transition: all 0.6s cubic-bezier(0.3, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
#camera-take-photo.takingVideo > #camera-take-photo-circle {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#camera-take-photo.recordingVideo > #camera-take-photo-circle {
|
||||
border-radius: 4px;
|
||||
width: 43%;
|
||||
height: 43%;
|
||||
}
|
||||
|
||||
#camera-rotate-camera {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: gray; /* Fondo gris oscuro */
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
right: 20px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Agrega un sombreado suave */
|
||||
transition: all 0.3s ease-in-out; /* Animación al pasar el cursor */
|
||||
}
|
||||
|
||||
#camera-rotate-camera svg {
|
||||
width: 28px; /* Ajusta el tamaño del ícono */
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
#camera-rotate-camera svg path {
|
||||
fill: none;
|
||||
stroke: #fff; /* Color blanco para el ícono */
|
||||
stroke-width: 7;
|
||||
stroke-miterlimit: 10;
|
||||
}
|
||||
|
||||
#camera-render-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
top: 20px;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
#camera-canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: red;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.canvas-render,
|
||||
.video-render {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
object-fit: fill;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 20;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#camera-loader-container {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #000;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
animation: blink 3s infinite;
|
||||
}
|
||||
|
||||
#camera-loader {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#camera-loader-container a {
|
||||
font-size: 18px;
|
||||
color: gray;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.camera-mode {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
margin: 0px 0px 10px 0px;
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
cursor: ew-resize;
|
||||
opacity: 1;
|
||||
-webkit-mask-image: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
right top,
|
||||
color-stop(0, rgba(0, 0, 0, 0)),
|
||||
color-stop(0.2, black),
|
||||
color-stop(0.8, black),
|
||||
color-stop(1, rgba(0, 0, 0, 0))
|
||||
);
|
||||
mask-image: linear-gradient(
|
||||
linear,
|
||||
left top,
|
||||
right top,
|
||||
color-stop(0, rgba(0, 0, 0, 0)),
|
||||
color-stop(0.2, black),
|
||||
color-stop(0.8, black),
|
||||
color-stop(1, rgba(0, 0, 0, 0))
|
||||
);
|
||||
}
|
||||
|
||||
.camera-mode ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.camera-mode ul li {
|
||||
display: block !important;
|
||||
margin: 20px 0px 0px 0px;
|
||||
padding: 0px 13px 0px 13px;
|
||||
font-size: 13px;
|
||||
line-height: 14px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.camera-mode ul .slick-current li {
|
||||
color: #ffcc00;
|
||||
}
|
||||
|
||||
.camera-mode li {
|
||||
transition: 0.25s ease-in-out all;
|
||||
-moz-transition: 0.25s ease-in-out all;
|
||||
-webkit-transition: 0.25s ease-in-out all;
|
||||
}
|
||||
|
||||
.camera-focus {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: calc(50% - 110px);
|
||||
left: calc(50% - 55px);
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
z-index: 1;
|
||||
border: 1px solid #ffcc00;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.camera-focus div {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.screen .display .camera-focus div.h:before,
|
||||
.screen .display .camera-focus div.h:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 1px;
|
||||
background: #ffcc00;
|
||||
}
|
||||
|
||||
.screen .display .camera-focus div.h:before {
|
||||
top: 50%;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.screen .display .camera-focus div.h:after {
|
||||
top: 50%;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.screen .display .camera-focus div.v:before,
|
||||
.screen .display .camera-focus div.v:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 5px;
|
||||
background: #ffcc00;
|
||||
}
|
||||
|
||||
.screen .display .camera-focus div.v:before {
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.screen .display .camera-focus div.v:after {
|
||||
bottom: 0px;
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
.screen .display .camera-focus {
|
||||
z-index: 1;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.camera-focus.fix {
|
||||
animation-name: focusSet;
|
||||
animation-duration: 0.8s;
|
||||
animation-iteration-count: 1;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
@keyframes focusSet {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
90% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#camera-flash {
|
||||
left: -1.5vh;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
#camera-flash svg {
|
||||
position: relative;
|
||||
border: 1.3px solid #fff;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 2.3rem;
|
||||
left: 10px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.camera-app .slick-track li {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
#camera-last-content {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#camera-last-content img {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#camera-helper-text {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
margin: 20px;
|
||||
padding: 8px;
|
||||
border-radius: 3px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#camera-helper-text div {
|
||||
margin: 2px;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
#camera-helper-text div .letter {
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
display: inline-block;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background: white;
|
||||
color: black !important;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
border-radius: 2px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
#camera-helper-text div .text {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#camera-helper-text div .enter-key {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.camera-footer {
|
||||
position: relative;
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
/* De abajo hacia arriba */ rgba(0, 0, 0, 1) 0%,
|
||||
/* Negro más opaco en la parte inferior */ rgba(0, 0, 0, 0.9) 50%,
|
||||
/* Transición en el medio */ rgba(0, 0, 0, 0.8) 100%
|
||||
/* Negro más transparente en la parte superior */
|
||||
);
|
||||
height: 210px;
|
||||
bottom: 210px;
|
||||
}
|
||||
|
||||
#camera-grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 71%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
pointer-events: none; /* No interfiere con los clics */
|
||||
z-index: 10; /* Asegura que esté sobre el renderizado */
|
||||
}
|
||||
|
||||
#camera-grid .line {
|
||||
position: absolute;
|
||||
background-color: rgba(255, 255, 255, 0.7); /* Líneas semitransparentes */
|
||||
}
|
||||
|
||||
#camera-grid .line.horizontal {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
#camera-grid .line.vertical {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Posicionamiento de las líneas */
|
||||
#camera-grid .line:nth-child(1) {
|
||||
top: 33%;
|
||||
}
|
||||
#camera-grid .line:nth-child(2) {
|
||||
top: 66%;
|
||||
}
|
||||
#camera-grid .line:nth-child(3) {
|
||||
left: 33%;
|
||||
}
|
||||
#camera-grid .line:nth-child(4) {
|
||||
left: 66%;
|
||||
}
|
||||
@@ -0,0 +1,957 @@
|
||||
.clock-app *::selection {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.clock-app {
|
||||
background-color: #0a0a0a;
|
||||
}
|
||||
|
||||
.clock-app-header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
top: 460px;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.clock-app-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
color: var(--text-color);
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
#clock-alarm-add,
|
||||
#clock-alarm-edit,
|
||||
#clock-alarm-add-label-save,
|
||||
#clock-alarm-add-label-cancel,
|
||||
#clock-alarm-save,
|
||||
#clock-alarm-cancel,
|
||||
#clock-timer-cancel,
|
||||
#clock-timer-edit,
|
||||
#clock-timer-save {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clock-app-tab {
|
||||
position: relative;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.clock-app-timer-setup .global-app-header {
|
||||
width: 94%;
|
||||
position: relative;
|
||||
left: 11px;
|
||||
}
|
||||
|
||||
.clock-app .global-app-header {
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#clock-timer-title {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#phone-image-container-header {
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
.clock-tab-title {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: 11px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.clock-tab-description {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: 30px;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.clock-add-alarm-settings {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
position: relative;
|
||||
top: 50px;
|
||||
height: 12%;
|
||||
width: 93%;
|
||||
margin: 0 auto;
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.clock-add-alarm-settings p {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#clock-tab-title-repeat,
|
||||
#clock-tab-title-alarm {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.clock-tab-description p,
|
||||
.clock-tab-description i {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.clock-add-alarm-settings .settings-tab-description {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
#clock-alarm-label-option {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
#clock-alarm-repeat-option {
|
||||
height: 46px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.clock-add-alarm-settings .clock-tab-title {
|
||||
position: relative;
|
||||
left: 20px;
|
||||
top: 0px;
|
||||
font-size: 17px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.clock-add-alarm-settings .clock-tab-description {
|
||||
position: absolute;
|
||||
left: 180px;
|
||||
top: 35%;
|
||||
display: flex;
|
||||
width: 50%;
|
||||
font-size: 17px;
|
||||
gap: 8px;
|
||||
text-align: right;
|
||||
line-height: 15px;
|
||||
justify-content: flex-end; /* Alinea el texto a la derecha */
|
||||
}
|
||||
|
||||
.clock-app-alarm-page {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.clock-app-alarm-page::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.clock-app-alarm-add,
|
||||
.clock-app-alarm-add-label {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
#clock-alarm-label-option-input {
|
||||
width: 100%;
|
||||
font-size: 22px;
|
||||
text-indent: 12px;
|
||||
border: 1px solid var(--border-gray);
|
||||
}
|
||||
|
||||
#clock-alarm-add-menu {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.clock-app-alarm-add-info {
|
||||
position: relative;
|
||||
top: 25px;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.clock-app-alarm-add-info a {
|
||||
font-size: 16px;
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
.clock-app-alarm-add-label-container {
|
||||
position: relative;
|
||||
top: 40px;
|
||||
width: 100%;
|
||||
height: 6%;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
display: flex;
|
||||
color: lightgray;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.clock-app-tab .global-app-header {
|
||||
height: unset;
|
||||
top: unset;
|
||||
margin-bottom: unset;
|
||||
padding-top: 40px;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
|
||||
.clock-app-tab .global-app-header .blue-text:last-child {
|
||||
place-self: flex-end;
|
||||
position: unset;
|
||||
}
|
||||
|
||||
.clock-app-tab-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
padding-top: 40px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
|
||||
}
|
||||
|
||||
.clock-app-active {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.clock-app-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.clock-app-footer i {
|
||||
font-size: 29px;
|
||||
color: gray;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.clock-app-footer p {
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.clock-app-header-button {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 80%;
|
||||
text-align: center;
|
||||
line-height: 56px;
|
||||
background: #0f0f0f;
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0);
|
||||
color: white;
|
||||
transition: 0.08s;
|
||||
}
|
||||
|
||||
.clock-app-header-button:hover {
|
||||
background: #252525;
|
||||
}
|
||||
|
||||
.clock-app-footer-selected p {
|
||||
color: #ff7c14;
|
||||
}
|
||||
|
||||
.clock-app-footer-selected i {
|
||||
color: #ff7c14;
|
||||
}
|
||||
|
||||
.clock-app-loaded {
|
||||
display: none;
|
||||
padding-left: 276px;
|
||||
height: 99%;
|
||||
}
|
||||
|
||||
.clock-app-loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stopwatch-timer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 64px;
|
||||
font-size: 70px;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.stopwatch-timer p {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.clock-start-button::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 80px; /* Ajusta el tamaño del cÃrculo interno */
|
||||
height: 80px; /* Ajusta el tamaño del cÃrculo interno */
|
||||
border-radius: 50%;
|
||||
margin-bottom: 0.5px;
|
||||
border: 3px solid #246727c2; /* Borde del cÃrculo interno */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.clock-clear-button::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 80px; /* Ajusta el tamaño del cÃrculo interno */
|
||||
height: 80px; /* Ajusta el tamaño del cÃrculo interno */
|
||||
border-radius: 50%;
|
||||
margin-bottom: 0.5px;
|
||||
border: 3px solid #79797991; /* Borde del cÃrculo interno */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.clock-button[data-type='stop']::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 80px; /* Ajusta el tamaño del cÃrculo interno */
|
||||
height: 80px; /* Ajusta el tamaño del cÃrculo interno */
|
||||
border-radius: 50%;
|
||||
margin-bottom: 0.5px;
|
||||
border: 3px solid #fd392f4f; /* Borde del cÃrculo interno */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.timer-button-flow::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 80px; /* Ajusta el tamaño del cÃrculo interno */
|
||||
height: 80px; /* Ajusta el tamaño del cÃrculo interno */
|
||||
border-radius: 50%;
|
||||
margin-bottom: 0.5px;
|
||||
border: 3px solid #246727c2; /* Borde del cÃrculo interno */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#timer-button.timer-button-clear::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 80px; /* Ajusta el tamaño del cÃrculo interno */
|
||||
height: 80px; /* Ajusta el tamaño del cÃrculo interno */
|
||||
border-radius: 50%;
|
||||
margin-bottom: 0.5px;
|
||||
border: 3px solid #79797991; /* Borde del cÃrculo interno */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#timer-button.timer-button-clear p {
|
||||
color: lightgray
|
||||
}
|
||||
|
||||
.timer-button-flow p {
|
||||
color: #8ae143;
|
||||
}
|
||||
|
||||
.clock-button[data-type='stop'] p {
|
||||
color: #f88c8c;
|
||||
}
|
||||
|
||||
.clock-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 35px 16px 35px;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.clock-button {
|
||||
display: flex;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.timer-button-flow {
|
||||
font-size: 17px;
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
.timer-button-clear {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.timer-button-start {
|
||||
color: #8ae143;
|
||||
}
|
||||
|
||||
.timer-button-clear {
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
.clock-button p {
|
||||
font-size: 17px;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.clock-button[data-type='lap'] {
|
||||
background: #79797991;
|
||||
}
|
||||
|
||||
.clock-button[data-type='clear'] {
|
||||
background: #79797991;
|
||||
}
|
||||
|
||||
.clock-button[data-type='start'] {
|
||||
background: #246727c2;
|
||||
}
|
||||
|
||||
.clock-button[data-type='stop'] {
|
||||
background: #fd392f4f;
|
||||
}
|
||||
|
||||
.stopwatch-lap-list {
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
top: 15px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
max-height: 380px;
|
||||
}
|
||||
|
||||
.stopwatch-lap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
padding: 5px 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08)
|
||||
}
|
||||
|
||||
.stopwatch-lap p {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stopwatch-lap:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.stopwatch-lap p {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.stopwatch-lap-list::-webkit-scrollbar {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.stopwatch-lap-list::-webkit-scrollbar-track {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.stopwatch-lap-list::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
.world-time {
|
||||
position: relative;
|
||||
top: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
height: 100px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
.world-time:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.world-time p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.world-time-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.world-time-info p:first-child {
|
||||
font-size: 26px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.world-time-info p:last-child {
|
||||
color: gray;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.world-time-clock {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.world-time-clock p {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.world-time-clock p:first-child {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.world-time-clock p:last-child {
|
||||
font-size: 22px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.clock-timer-setup-container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.clock-app-timer-setup {
|
||||
position: absolute;
|
||||
width: 95%;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.clock-timer-container #clock-timer-minute-picker {
|
||||
text-align: right;
|
||||
direction: rtl;
|
||||
text-indent: 8px;
|
||||
}
|
||||
|
||||
.clock-timer-container #clock-timer-second-picker {
|
||||
text-align: left;
|
||||
text-indent: 8px;
|
||||
}
|
||||
|
||||
.clone-scroller::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.clock-app-timer-show {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.clock-app-timer-show-container {
|
||||
position: relative;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.clock-app-timer-show-container-texts {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
width: 300px; /* Tamaño del cÃrculo */
|
||||
height: 300px; /* Tamaño del cÃrculo */
|
||||
border-radius: 50%; /* Para hacerlo un cÃrculo */
|
||||
border: 3px solid orange; /* Borde naranja */
|
||||
font-size: 54px; /* Tamaño del texto reducido */
|
||||
color: orange; /* Color del texto */
|
||||
}
|
||||
|
||||
.clock-app-timer-show-container-texts p {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.clock-app-alarm-list-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 22px 5px 22px;
|
||||
height: 100px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
.clock-app-alarm-list-item-description {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.clock-app-alarm-list-item-description span {
|
||||
font-size: 52px;
|
||||
margin-left: -6px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.clock-app-alarm-cycle-text {
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
|
||||
.switch__container {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.switch__container .switch {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
.switch__container .switch+label {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.switch--shadow+label {
|
||||
padding: 2px;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
background-color: #dddddd;
|
||||
border-radius: 60px;
|
||||
}
|
||||
|
||||
.switch--shadow+label:before,
|
||||
.switch--shadow+label:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
bottom: 1px;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.switch--shadow+label:before {
|
||||
right: 1px;
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 60px;
|
||||
transition: background 0.4s;
|
||||
}
|
||||
|
||||
.switch--shadow+label:after {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background-color: #fff;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.switch--shadow:checked+label:before {
|
||||
background-color: #8ce196;
|
||||
}
|
||||
|
||||
.switch--shadow:checked+label:after {
|
||||
transform: translateX(32px);
|
||||
}
|
||||
|
||||
/* Estilo Flat */
|
||||
.switch--flat+label {
|
||||
padding: 2px;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
background-color: #dddddd;
|
||||
border-radius: 60px;
|
||||
transition: background 0.4s;
|
||||
}
|
||||
|
||||
.switch--flat+label:before,
|
||||
.switch--flat+label:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.switch--flat+label:before {
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
right: 2px;
|
||||
background-color: #fff;
|
||||
border-radius: 60px;
|
||||
transition: background 0.4s;
|
||||
}
|
||||
|
||||
.switch--flat+label:after {
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
width: 56px;
|
||||
background-color: #dddddd;
|
||||
border-radius: 52px;
|
||||
transition: margin 0.4s, background 0.4s;
|
||||
}
|
||||
|
||||
.switch--flat:checked+label {
|
||||
background-color: #8ce196;
|
||||
}
|
||||
|
||||
.switch--flat:checked+label:after {
|
||||
margin-left: 60px;
|
||||
background-color: #8ce196;
|
||||
}
|
||||
|
||||
.clock-app .global-app-header {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.global-app-header {
|
||||
display: grid;
|
||||
grid-template-columns: 10% 80% 10%;
|
||||
white-space: nowrap;
|
||||
top: 6rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-bottom: 7rem;
|
||||
}
|
||||
|
||||
.global-app-header p:nth-child(2) {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.global-app-header .blue-text {
|
||||
color: #087fff;
|
||||
}
|
||||
|
||||
.global-app-header .blue-text:last-child {
|
||||
position: absolute;
|
||||
right: 22px;
|
||||
}
|
||||
|
||||
.global-app-header .red-text {
|
||||
color: #fd3b2f;
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
|
||||
.icon-clock {
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
position: relative;
|
||||
padding: 33px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.clock {
|
||||
width: 192px;
|
||||
height: 192px;
|
||||
border-radius: 50%;
|
||||
background: #f1f1f1;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0.28);
|
||||
}
|
||||
|
||||
.phone-application-group-item .clock {
|
||||
transform: translate(-50%, -50%) scale(0.080);
|
||||
}
|
||||
|
||||
.phone-application-group-item .icon-clock {
|
||||
padding: 9px !important;
|
||||
}
|
||||
|
||||
.clock ol {
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.clock ol li {
|
||||
counter-increment: labelCounter;
|
||||
position: absolute;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.clock ol li:before {
|
||||
content: counter(labelCounter) '';
|
||||
}
|
||||
|
||||
.clock ol li:nth-child(1) {
|
||||
right: 55px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.clock ol li:nth-child(2) {
|
||||
right: 25px;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.clock ol li:nth-child(3) {
|
||||
right: 12px;
|
||||
top: 85px;
|
||||
}
|
||||
|
||||
.clock ol li:nth-child(4) {
|
||||
right: 25px;
|
||||
top: 125px;
|
||||
}
|
||||
|
||||
.clock ol li:nth-child(5) {
|
||||
right: 55px;
|
||||
top: 150px;
|
||||
}
|
||||
|
||||
.clock ol li:nth-child(6) {
|
||||
right: 90px;
|
||||
top: 160px;
|
||||
}
|
||||
|
||||
.clock ol li:nth-child(7) {
|
||||
right: 125px;
|
||||
top: 150px;
|
||||
}
|
||||
|
||||
.clock ol li:nth-child(8) {
|
||||
right: 155px;
|
||||
top: 125px;
|
||||
}
|
||||
|
||||
.clock ol li:nth-child(9) {
|
||||
right: 165px;
|
||||
top: 85px;
|
||||
}
|
||||
|
||||
.clock ol li:nth-child(10) {
|
||||
right: 150px;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.clock ol li:nth-child(11) {
|
||||
right: 120px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.clock ol li:nth-child(12) {
|
||||
right: 85px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#hour {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #303030;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -7px;
|
||||
margin-left: -7px;
|
||||
}
|
||||
|
||||
#hour:before,
|
||||
#hour:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#hour:before {
|
||||
width: 8px;
|
||||
height: 65px;
|
||||
border-radius: 4px;
|
||||
background: #303030;
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
#min {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: #303030;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
#min:before,
|
||||
#min:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#min:before {
|
||||
width: 6px;
|
||||
height: 90px;
|
||||
border-radius: 4px;
|
||||
background: #303030;
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
#sec {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: #dd3e1c;
|
||||
border: 2px solid #e13e1b;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -4px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
#sec:before,
|
||||
#sec:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#sec:before {
|
||||
width: 2px;
|
||||
height: 105px;
|
||||
border-radius: 4px;
|
||||
background: #e13e1b;
|
||||
position: absolute;
|
||||
bottom: -12px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.worldtime-title,
|
||||
#alarm-title,
|
||||
#clock-alarm-tag-title {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.worldtime-title {
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
@@ -0,0 +1,739 @@
|
||||
.crypto-app {
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
.crypto-action-page {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
border-radius: 20px;
|
||||
background: rgba(25,25,25);
|
||||
}
|
||||
|
||||
.crypto-action-page-buy-crypto {
|
||||
display: none;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.crypto-header-buy {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.crypto-dark-background {
|
||||
position: absolute;
|
||||
background: rgba(0,0,0,0.6);
|
||||
display: none;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.crypto-action-page-buy-crypto article {
|
||||
position: relative;
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
.crypto-action-page-sell-crypto {
|
||||
display: none;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.crypto-action-page-sell-crypto article {
|
||||
position: relative;
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
.crypto-header-sell {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.crypto-action-page-transfer-crypto {
|
||||
display: none;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.crypto-action-page-transfer-crypto article {
|
||||
position: relative;
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
.crypto-header-transfer {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.crypto-action-page-buy-crypto-footer {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
width: 90%;
|
||||
height: 30px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between; /* Coloca los elementos al principio y al final */
|
||||
align-items: center; /* Centra verticalmente los elementos */
|
||||
}
|
||||
|
||||
.crypto-action-page-buy-crypto-footer-button {
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.crypto-cancel,
|
||||
.crypto-cancel i,
|
||||
.crypto-cancel a,
|
||||
.crypto-cancel p,
|
||||
.crypto-action-page-buy-crypto-footer-button a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#buy-crypto a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@keyframes Shake {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
}
|
||||
|
||||
.crypto-header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 65px;
|
||||
}
|
||||
|
||||
.crypto-header h1 {
|
||||
color: white;
|
||||
width: 90%;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
margin: 0 auto;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.crypto-header h2 {
|
||||
color: white;
|
||||
width: 90%;
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 20px;
|
||||
font-size: 16px;
|
||||
color: gray;
|
||||
margin-top: 10px;
|
||||
border-bottom: 1px solid #212124;
|
||||
}
|
||||
|
||||
.crypto-header-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 8%;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-top: 1px solid #212124;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.crypto-header-footer-item {
|
||||
position: relative;
|
||||
width: 33.33%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
font-size: 15px;
|
||||
transition: .05s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.crypto-header-footer-item p {
|
||||
color: gray !important;
|
||||
}
|
||||
|
||||
#crypto-menu-transactions,
|
||||
#crypto-menu-value,
|
||||
#crypto-menu-general {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.crypto-header-footer-item-selected p {
|
||||
color: white !important
|
||||
}
|
||||
|
||||
.crypto-page {
|
||||
position: absolute;
|
||||
top: 50rem;
|
||||
height: 21em;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.crypto-header-values {
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
height: 80px;
|
||||
top: 64.33px;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-bottom: 1px solid #212124;
|
||||
}
|
||||
|
||||
.crypto-header-value {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 33.33%;
|
||||
text-align: center;
|
||||
top: 22.975px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.crypto-header-value p {
|
||||
font-size: 17px;
|
||||
line-height: 30px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.crypto-header-value span {
|
||||
color: gray;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.crypto-header-picture {
|
||||
position: absolute;
|
||||
width: 128.66px;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 18.38px;
|
||||
}
|
||||
|
||||
.cryptotab-general {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cryptotab-general h1 {
|
||||
font-size: 25px;
|
||||
position: relative;
|
||||
bottom: 19px;
|
||||
left: 20px;
|
||||
color: white;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.cryptotab-transactions {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 93% !important;
|
||||
}
|
||||
|
||||
.cryptotab-transactions h1 {
|
||||
font-size: 25px;
|
||||
position: relative;
|
||||
bottom: 19px;
|
||||
left: 20px;
|
||||
color: white;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.cryptotab-course {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cryptotab-course h1 {
|
||||
font-size: 25px;
|
||||
position: relative;
|
||||
bottom: 19px;
|
||||
left: 20px;
|
||||
color: white;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.cryptotab-transactions-list {
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
height: 86%;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 40px;
|
||||
padding-bottom: 20px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.cryptotab-transactions-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cryptotab-transactions-block {
|
||||
position: relative;
|
||||
color: white;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
margin: 15px auto 0px;
|
||||
transition: all 0.05s linear 0s;
|
||||
border-bottom: 1px solid #212124;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cryptotab-transactions-block i {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
line-height: 50px;
|
||||
font-size: 20px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.cryptotab-transactions-block-title {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: 2px;
|
||||
font-size: 16px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.cryptotab-transactions-block-happening {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: 28px;
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.cryptotab-course-list {
|
||||
position: absolute;
|
||||
width: 93%;
|
||||
height: 80%;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 43px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.cryptotab-course-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cryptotab-course-block {
|
||||
position: relative;
|
||||
color: white;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
margin: 15px auto 0px;
|
||||
transition: all 0.05s linear 0s;
|
||||
border-bottom: 1px solid #212124;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cryptotab-course-block i {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
line-height: 50px;
|
||||
font-size: 20px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.cryptotab-course-block-title {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: 2px;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cryptotab-course-block-happening {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: 28px;
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.crypto-percentage-change {
|
||||
position: absolute;
|
||||
width: 91.9px;
|
||||
top: -24px;
|
||||
left: 270px;
|
||||
}
|
||||
|
||||
.crypto-percentage-change i {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.cryptotab-general-actions {
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 30px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.cryptotab-general-actions::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cryptotab-general-action {
|
||||
position: relative;
|
||||
color: white;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
margin: 15px auto 0px;
|
||||
border-radius: 7px;
|
||||
transition: all 0.05s linear 0s;
|
||||
background: #212124;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cryptotab-general-action:hover {
|
||||
opacity: 0.9
|
||||
}
|
||||
|
||||
.cryptotab-general-action>i {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
line-height: 60px;
|
||||
color: lightgray !important;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.cryptotab-general-action-title {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: 7px;
|
||||
font-size: 19px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cryptotab-general-action-description {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: 34px;
|
||||
font-size: 15px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.crypto-action-page-buy-crypto-input-money {
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 50px;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 30px;
|
||||
width: 80%;
|
||||
text-indent: 0.4px;
|
||||
transition: .1s;
|
||||
font-size: 15px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.crypto-action-page-buy-crypto-input-money::-webkit-inner-spin-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.crypto-action-page-buy-crypto-input-money-icon {
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 30px;
|
||||
font-size: 18px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.crypto-action-page-buy-crypto-input-coins {
|
||||
position: absolute;
|
||||
top: 87px;
|
||||
left: 20px;
|
||||
background: rgb(40, 40, 40);
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 50px;
|
||||
width: 90%;
|
||||
text-indent: 2px;
|
||||
transition: .1s;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
.crypto-action-page-buy-crypto-input-coins::-webkit-inner-spin-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.crypto-action-page-buy-crypto-input-coins-icon {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 35px;
|
||||
font-size: 24px;
|
||||
color: gray;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
/* Sell */
|
||||
|
||||
|
||||
.crypto-action-page-sell-crypto-input-money {
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 50px;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 30px;
|
||||
width: 80%;
|
||||
text-indent: 0.4px;
|
||||
transition: .1s;
|
||||
font-size: 15px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.crypto-action-page-sell-crypto-input-money::-webkit-inner-spin-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.crypto-action-page-sell-crypto-input-money-icon {
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 30px;
|
||||
font-size: 18px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.crypto-action-page-sell-crypto-input-coins {
|
||||
position: absolute;
|
||||
top: 87px;
|
||||
left: 20px;
|
||||
background: rgb(40, 40, 40);
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 50px;
|
||||
width: 90%;
|
||||
text-indent: 2px;
|
||||
transition: .1s;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
.crypto-action-page-sell-crypto-input-coins::-webkit-inner-spin-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.crypto-action-page-sell-crypto-input-coins-icon {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 35px;
|
||||
font-size: 24px;
|
||||
color: gray;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.crypto-action-page-header {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 19px;
|
||||
font-weight: 100;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.crypto-action-page-wallet {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 30px;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
font-weight: 100;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.crypto-walletid {
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
bottom: 40px;
|
||||
color: gray;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.crypto-action-page-transfer-crypto-input-walletid {
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
left: 20px;
|
||||
background: rgb(40, 40, 40);
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 50px;
|
||||
width: 90%;
|
||||
text-indent: 2px;
|
||||
transition: .1s;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
.crypto-action-page-transfer-crypto-input-money-icon {
|
||||
position: absolute;
|
||||
top: 175px;
|
||||
left: 35px;
|
||||
font-size: 24px;
|
||||
color: gray;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
/* Transfer */
|
||||
|
||||
.crypto-action-page-transfer-crypto-input-coins {
|
||||
position: absolute;
|
||||
top: 87px;
|
||||
left: 20px;
|
||||
background: rgb(40, 40, 40);
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 50px;
|
||||
width: 90%;
|
||||
text-indent: 2px;
|
||||
transition: .1s;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
.crypto-action-page-transfer-crypto-input-coins::-webkit-inner-spin-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.crypto-action-page-transfer-crypto-input-coins-icon {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 35px;
|
||||
font-size: 24px;
|
||||
color: gray;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.crypto-widget {
|
||||
position: relative;
|
||||
height: 151px;
|
||||
color: #fff;
|
||||
background: rgb(30, 30, 30) !important;
|
||||
}
|
||||
|
||||
.crypto-graph {
|
||||
display: flex;
|
||||
position: relative;
|
||||
top: 16px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.graph-info {
|
||||
font-weight: bold;
|
||||
margin-top: 18px;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.graph-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: 18px;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-bottom: 4px solid white;
|
||||
}
|
||||
|
||||
|
||||
.graph-info-big {
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.crypto-graphic .graph-info-small {
|
||||
position: relative;
|
||||
bottom: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.graph-info-small {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.crypto-graphic h1 {
|
||||
font-size: 25px;
|
||||
position: relative;
|
||||
bottom: 35px;
|
||||
right: 20px;
|
||||
color: white;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.crypto-graphic {
|
||||
position: absolute;
|
||||
top: 14em;
|
||||
padding: 12px;
|
||||
height: 25rem;
|
||||
display: flex;
|
||||
width: 90%;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #212124;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.crypto-graphic .crypto-header-name {
|
||||
position: relative;
|
||||
bottom: 20px;
|
||||
color: GRAY;
|
||||
}
|
||||
@@ -0,0 +1,587 @@
|
||||
.darkchat-app {
|
||||
background: black;
|
||||
}
|
||||
|
||||
.darkchat-app header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
/* Ajusta el relleno según sea necesario */
|
||||
}
|
||||
|
||||
.circle-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.circle-container h3 {
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.online-players-circle {
|
||||
width: 12px;
|
||||
/* Ajusta el tamaño del cÃrculo según sea necesario */
|
||||
height: 12px;
|
||||
/* Ajusta el tamaño del cÃrculo según sea necesario */
|
||||
background-color: lightseagreen;
|
||||
border-radius: 50%;
|
||||
/* Esto crea un cÃrculo al establecer el radio al 50% */
|
||||
margin-right: 8px;
|
||||
/* Espacio entre el cÃrculo y el texto */
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.darkchat-app footer {
|
||||
background: #6443d4;
|
||||
height: 60px;
|
||||
width: 60px !important;
|
||||
right: 20px;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
}
|
||||
|
||||
.darkchat-app footer i {
|
||||
font-size: 27px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#darkchat-messages {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
padding-top: 110px !important;
|
||||
width: 100%;
|
||||
height: 87%;
|
||||
padding: 18px;
|
||||
font-size: 11px;
|
||||
color: white;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#darkchat-sendMessageContainer {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#darkchat-sendMessageContainer img {
|
||||
position: relative;
|
||||
right: 20px;
|
||||
height: 35px !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#darkchat-message-input {
|
||||
background-color: #2a292b;
|
||||
border: none;
|
||||
margin-right: 10px;
|
||||
color: white;
|
||||
height: 55px;
|
||||
width: 85%;
|
||||
left: 18px;
|
||||
position: relative;
|
||||
border-radius: 25px;
|
||||
padding-left: 20px;
|
||||
padding-right: 70px;
|
||||
}
|
||||
|
||||
#darkchat-message-send {
|
||||
background-color: #6443d4;
|
||||
border: none;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
color: white;
|
||||
position: relative;
|
||||
right: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.darkchat-date {
|
||||
font-size: 13px;
|
||||
color: #808080;
|
||||
margin-left: 208px;
|
||||
}
|
||||
|
||||
.darkchat-message {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.darkchat-message-content {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#darkchat-message-container {
|
||||
position: absolute;
|
||||
display: none;
|
||||
z-index: 999999999;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
background-color: #131214;
|
||||
}
|
||||
|
||||
#darkchat-message-container #back-container {
|
||||
position: relative;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
#darkchat-message-container #back-container a {
|
||||
font-size: 17px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#darkchat-message-container #back-container img {
|
||||
height: 25px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.darkchat-app footer {
|
||||
position: absolute;
|
||||
color: white;
|
||||
width: 100%;
|
||||
bottom: 5%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#darkchat-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
top: 10%;
|
||||
padding: 10px;
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
.darkchat-content {
|
||||
background: #414041;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 20px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.darkchat-content:hover {
|
||||
background: #6443d4;
|
||||
}
|
||||
|
||||
.circle-dark {
|
||||
background-color: white;
|
||||
color: black;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-right: 15px;
|
||||
margin-left: 10px;
|
||||
flex-shrink: 0;
|
||||
/* Evita que se reduzca */
|
||||
}
|
||||
|
||||
.darkchat-content h3 {
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
font-size: 17px;
|
||||
bottom: 5px;
|
||||
color: lightgray;
|
||||
/* Color del v.name */
|
||||
}
|
||||
|
||||
.darkchat-content a {
|
||||
position: relative;
|
||||
font-size: 17px;
|
||||
color: white;
|
||||
/* Color del v.message */
|
||||
opacity: 0.5;
|
||||
bottom: 10px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dark-complete-message {
|
||||
width: 59%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.darkchat-content p {
|
||||
position: relative;
|
||||
bottom: 20px;
|
||||
right: 5px;
|
||||
color: white;
|
||||
/* Color del v.message */
|
||||
opacity: 0.5;
|
||||
margin-left: auto;
|
||||
/* Esto coloca el elemento a la derecha */
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#darkchat-container::-webkit-scrollbar,
|
||||
#darkchat-messages::-webkit-scrollbar {
|
||||
display: none
|
||||
}
|
||||
|
||||
#darkchat-plus {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#darkchat-creategroup {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#darkchat-creategroup-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#darkchat-creategroup-contents a {
|
||||
position: relative;
|
||||
bottom: 20px;
|
||||
font-size: 22px !important;
|
||||
}
|
||||
|
||||
#darkchat-creategroup-contents {
|
||||
z-index: 99999;
|
||||
top: 30%;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
width: 89%;
|
||||
height: 300px;
|
||||
background-color: none;
|
||||
border-radius: 20px;
|
||||
margin-left: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#darkchat-menu-pass-check-title {
|
||||
background: white;
|
||||
font-size: 16px;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 22px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#darkchat-menu-pass-check {
|
||||
font-size: 16px;
|
||||
color: gray;
|
||||
margin-top: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
#darkchat-groupassword2 {
|
||||
font-size: 19px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
#darkchat-creategroup-contents li {
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 60px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
#darkchat-creategroup-contents li:last-child {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#darkchat-creategroup a {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#darkchat-creategroup form {
|
||||
position: relative;
|
||||
bottom: 35px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.darkchat-app footer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
#darkchat-menu-name {
|
||||
background: white;
|
||||
font-size: 16px;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 22px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#darkchat-menu-pass {
|
||||
background: white;
|
||||
font-size: 16px;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 22px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#darkchat-menu-name-desc {
|
||||
font-size: 16px;
|
||||
color: gray;
|
||||
margin-top: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
#darkchat-menu-pass-desc {
|
||||
font-size: 16px;
|
||||
color: gray;
|
||||
margin-top: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
.form__group {
|
||||
position: relative;
|
||||
padding: 15px 0 0;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form__field {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-bottom: 2px solid #9b9b9b;
|
||||
outline: 0;
|
||||
font-size: 1.3rem;
|
||||
color: black;
|
||||
padding: 7px 0;
|
||||
background: transparent;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.form__field::placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form__field:placeholder-shown~.form__label {
|
||||
font-size: 1.3rem;
|
||||
cursor: text;
|
||||
top: -24px;
|
||||
}
|
||||
|
||||
.form__label {
|
||||
position: relative;
|
||||
top: 0;
|
||||
display: block;
|
||||
transition: 0.2s;
|
||||
font-size: 1rem;
|
||||
color: #9b9b9b;
|
||||
}
|
||||
|
||||
.form__field:focus~.form__label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block;
|
||||
transition: 0.2s;
|
||||
font-size: 1rem;
|
||||
color: #11998e;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* reset input */
|
||||
.form__field:required,
|
||||
.form__field:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#darkchat-creategroup #options {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
botom: 0;
|
||||
height: 49px;
|
||||
cursor: pointer;
|
||||
width: 376px;
|
||||
padding-top: 10px;
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
color: lightgray;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#darkchat-groupname,
|
||||
#darkchat-groupassword {
|
||||
font-size: 19px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.form-style-7 ul {
|
||||
background: #414041;
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.form-style-7 {
|
||||
position: relative;
|
||||
right: 9px;
|
||||
width: 105%;
|
||||
margin: 50px auto;
|
||||
background: var(--dark-background-color);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
||||
.form-style-7 li {
|
||||
display: block;
|
||||
padding: 9px;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.form-style-7 li:last-child {
|
||||
border: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-style-7 li>label {
|
||||
display: block;
|
||||
float: left;
|
||||
background: #ffffff;
|
||||
height: 19px;
|
||||
color: #b9b9b9;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-style-7 input[type='text'],
|
||||
.form-style-7 input[type='date'],
|
||||
.form-style-7 input[type='datetime'],
|
||||
.form-style-7 input[type='email'],
|
||||
.form-style-7 input[type='number'],
|
||||
.form-style-7 input[type='search'],
|
||||
.form-style-7 input[type='time'],
|
||||
.form-style-7 input[type='url'],
|
||||
.form-style-7 input[type='password'],
|
||||
.form-style-7 textarea,
|
||||
.form-style-7 select {
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
width: 100%;
|
||||
display: block;
|
||||
outline: none;
|
||||
border: none;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
|
||||
.form-style-7 li>span {
|
||||
background: #f3f3f3;
|
||||
display: block;
|
||||
padding: 3px;
|
||||
margin: 0 -9px -9px -9px;
|
||||
text-align: center;
|
||||
color: #c0c0c0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.form-style-7 textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.form-style-7 input[type='submit'],
|
||||
.form-style-7 input[type='button'] {
|
||||
background: #2471ff;
|
||||
border: none;
|
||||
padding: 10px 20px 10px 20px;
|
||||
border-bottom: 3px solid #5994ff;
|
||||
border-radius: 3px;
|
||||
color: #d2e2ff;
|
||||
}
|
||||
|
||||
.form-style-7 input[type='submit']:hover,
|
||||
.form-style-7 input[type='button']:hover {
|
||||
background: #6b9fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.darkchat-message-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.user-image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.message-box {
|
||||
background-color: #d3473b;
|
||||
padding: 10px;
|
||||
max-width: 85%;
|
||||
border-bottom-left-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
border-top-right-radius: 15px;
|
||||
margin-left: 50px;
|
||||
margin-top: -8px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.darkchat-message-content+.darkchat-message-content {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
.darkweb-header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 118px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: rgb(243, 243, 243);
|
||||
}
|
||||
|
||||
.darkweb-app {
|
||||
background-image: url('https://i.ibb.co/2KQxNHw/Sin-titulo-1.webp');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.darkweb-app article {
|
||||
position: relative;
|
||||
top: 16.5%;
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
opacity: 0.6
|
||||
}
|
||||
|
||||
.darkweb-app article h1 {
|
||||
font-size: 40px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.darkweb-header-logo {
|
||||
position: absolute;
|
||||
top: 89%;
|
||||
transform: translateY(-50%);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
left: 20px;
|
||||
border-radius: 50%;
|
||||
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
|
||||
}
|
||||
|
||||
.darkweb-header>p {
|
||||
font-size: 21px;
|
||||
line-height: 180px;
|
||||
text-indent: 95px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.darkweb-header>span {
|
||||
position: absolute;
|
||||
top: 105px;
|
||||
left: 95px;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.darkweb2-list {
|
||||
position: absolute;
|
||||
background-color: #2a1b51;
|
||||
width: 93%;
|
||||
height: 68%;
|
||||
right: 13px;
|
||||
top: 35%;
|
||||
border-top-left-radius: 18px;
|
||||
border-top-right-radius: 18px;
|
||||
overflow-y: scroll;
|
||||
border: 2px solid rgba(255,255,255,0.5);
|
||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.darkweb2-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.darkweb-list {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
height: 90px;
|
||||
border-bottom: 1px solid #473575;
|
||||
margin: 2.5%;
|
||||
}
|
||||
|
||||
.darkweb-list:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.darkweb-list-firstletter img {
|
||||
position: absolute;
|
||||
border-radius: 0 !important;
|
||||
height: 65px;
|
||||
width: 65px;
|
||||
top: 20px;
|
||||
left: 5px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.darkweb-list-fullname {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
transform: translateY(-50%);
|
||||
left: 90px;
|
||||
font-size: 17px;
|
||||
max-width: 190px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.darkweb-list-price {
|
||||
position: absolute;
|
||||
top: 70%;
|
||||
transform: translateY(-50%);
|
||||
left: 90px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
max-width: 70px;
|
||||
min-width: 60px;
|
||||
background-color: #27ae60;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.darkweb-list-count {
|
||||
position: absolute;
|
||||
top: 70.5%;
|
||||
transform: translateY(-50%);
|
||||
left: 170px;
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
background-color: #00000033;
|
||||
border-radius: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.no-darkweb {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 15px;
|
||||
margin: 0 auto;
|
||||
left: 20px;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.darkweb-list-call {
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
right: 0;
|
||||
font-size: 25px;
|
||||
transition: .2s ease-in-out;
|
||||
}
|
||||
|
||||
.darkweb-list-call:hover {
|
||||
color: #8334b7;
|
||||
cursor: pointer;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,161 @@
|
||||
.facetime-screen {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--main-background-color);
|
||||
}
|
||||
|
||||
#facetime-contact-list {
|
||||
position: absolute;
|
||||
margin-left: 10px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
top: 30px;
|
||||
width: 90%;
|
||||
/* margin: 0 auto; */
|
||||
height: auto;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.facetime-contact {
|
||||
width: 100%;
|
||||
margin-left: 18px;
|
||||
height: 50px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
background-color: var(--container-dark-background-color);
|
||||
color: #48bb78;
|
||||
cursor: pointer;
|
||||
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
|
||||
rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.facetime-contact:hover {
|
||||
background-color: #48bb78;
|
||||
color: #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.facetime-contact img {
|
||||
margin-left: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.facetime-contact a {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.facetime-fast-call-button {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 9999px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.facetime-fast-call-button.ongoing {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
}
|
||||
|
||||
.facetime-fast-call-button i {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.facetime-fast-call-button.ongoing i {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.facetime-fast-call-button[data-type="microphone"].active {
|
||||
background: #ff2a1b;
|
||||
}
|
||||
|
||||
.facetime-fast-call-button[data-type="speaker"].active {
|
||||
background: #3cb7e7;
|
||||
}
|
||||
|
||||
.facetime-fast-call-button[data-type="video"].active {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.facetime-fast-call-button[data-type="video"].active i {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.facetime-fast-call-button[data-type="video"].waiting {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.facetime-fast-call-button.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#facetime-current-call-page {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
#facetime-current-call-page.active {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
#face-time-icon {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-self: end;
|
||||
height: 3rem;
|
||||
border-radius: 20px;
|
||||
background-color: #48bb78;
|
||||
transform: scale(0);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
padding: 0 1.8em;
|
||||
cursor: pointer;
|
||||
transition: ease all 0.2s;
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
left: 3rem;
|
||||
z-index: 99999999999999999;
|
||||
}
|
||||
|
||||
#face-time-icon i {
|
||||
font-size: 1.7rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#face-time-icon.active {
|
||||
transform: scale(1);
|
||||
transition: ease all 0.2s;
|
||||
}
|
||||
|
||||
#phone-device-screen:has(#face-time-icon.active) #phone-time {
|
||||
scale: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#facetime-current-call-name {
|
||||
max-width: 120px;
|
||||
white-space: normal;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -0,0 +1,777 @@
|
||||
.photos-app {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
.photos-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.photo-footer {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
font-size: 17px;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.photo-footer .fa-arrow-up-from-square {
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
.photo-footer .fa-floppy-disk {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.photos-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
height: 85px;
|
||||
padding: 8px 16px 24px 16px;
|
||||
background: var(--main-background-color);
|
||||
}
|
||||
|
||||
.photo-opt-back {
|
||||
background-color: var(--border-color) !important;
|
||||
}
|
||||
|
||||
.photos-footer-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 26px;
|
||||
z-index: 60;
|
||||
color: gray;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.gallery-other-images-swiper {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
height: 7rem;
|
||||
}
|
||||
|
||||
.gallery-other-images-swiper :is(img, video) {
|
||||
height: inherit;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.photos-footer-button-selected {
|
||||
color: var(--blue-text);
|
||||
}
|
||||
|
||||
.photos-footer-button-selected p {
|
||||
color: var(--blue-text) !important;
|
||||
}
|
||||
|
||||
.photos-footer-button p {
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
padding: 3px;
|
||||
margin: 0 !important;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.photos-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
position: relative;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.photos-image-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.photos-image-item :is(video, img) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.photos-content[data-showing="year"] {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.photos-content[data-showing="year"] .photos-image-item {
|
||||
position: relative;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.photos-content[data-showing="year"] .photos-image-item span {
|
||||
position: absolute;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
border-radius: 16px 16px 0 0;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
|
||||
font-size: 35px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.photos-content[data-showing="year"] .photos-image-item :is(video, img) {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.photos-content[data-showing="month"] {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.photos-content[data-showing="month"] .photos-image-item {
|
||||
position: relative;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.photos-content[data-showing="month"] .photos-image-item :is(video, img) {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.photos-content[data-showing="month"] .photo-img-title {
|
||||
color: var(--text-color);
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
position: relative;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.photos-content[data-showing="month"] .photo-img-details-date-included {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 40px 0px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
|
||||
margin: 16px;
|
||||
font-size: 25px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.photos-content[data-showing="month"] .photo-img-details {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
|
||||
margin: 16px;
|
||||
font-size: 25px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.photos-content[data-showing="month"] .photo-img-details-date {
|
||||
font-size: 18px;
|
||||
font-weight: 100;
|
||||
margin-top: 3px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.photos-content[data-showing="day"] {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.photos-content[data-showing="day"] .photos-image-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.photos-content[data-showing="day"] .photos-image-item span {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
|
||||
margin: 16px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.photos-content[data-showing="all"] {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
justify-content: stretch;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.photos-content[data-showing="all"] .photos-image-item {
|
||||
flex: 1 0 24%;
|
||||
}
|
||||
|
||||
.photos-content[data-showing="all"] :is(img, video) {
|
||||
width: 137px;
|
||||
height: 137px;
|
||||
}
|
||||
|
||||
.photos-app-page {
|
||||
display: none;
|
||||
width: 99%;
|
||||
margin: 0 auto;
|
||||
height: 730px;
|
||||
padding-bottom: 75px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.photos-app-page header {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.photos-app-page-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.photos-app-page::-webkit-scrollbar-thumb,
|
||||
.photos-content::-webkit-scrollbar-thumb,
|
||||
.photos-app-page::-webkit-scrollbar,
|
||||
.photos-content::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
#photo-interaction-container button {
|
||||
position: relative;
|
||||
font-size: 15px;
|
||||
width: auto;
|
||||
border-radius: 10px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
#photo-interaction-container {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
width: 99%;
|
||||
height: auto;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.photos-range-wrapper {
|
||||
position: absolute;
|
||||
width: 94%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 108px;
|
||||
padding: 0.7rem 1rem;
|
||||
background-color: var(--container-gallery-background-color);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
place-items: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.photos-range {
|
||||
background: var(--dark-background-color);
|
||||
color: var(--text-color);
|
||||
padding: 8px;
|
||||
z-index: 80;
|
||||
}
|
||||
|
||||
.photos-range .filter-background {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.photos-range p {
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.photos-range-selected {
|
||||
color: white;
|
||||
background: gray;
|
||||
padding: 4px 16px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
|
||||
.photos-app-page[data-page="albums"] {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.photos-album-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 5px;
|
||||
padding: 0 22px 0px 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.photos-album-content::-webkit-scrollbar,
|
||||
.photos-album-content::-webkit-scrollbar-thumb {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
.zoomable-image {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.photos-content .zoomable-image {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.photos-foryou-container .zoomable-image {
|
||||
height: 400px !important;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.photos-album-content .photos-image-item :is(video, img) {
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.photos-album-content .photos-image-item span {
|
||||
position: relative;
|
||||
bottom: 15px;
|
||||
left: 4px;
|
||||
text-transform: capitalize;
|
||||
color: var(--text-color);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.photos-album-content-container {
|
||||
position: absolute;
|
||||
padding: 32px 6px 108px;
|
||||
top: 0px;
|
||||
overflow: auto;
|
||||
background: var(--main-background-color);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translateX(-100%);
|
||||
z-index: 70;
|
||||
}
|
||||
|
||||
#photos-album-content-header {
|
||||
position: relative;
|
||||
top: 40px;
|
||||
font-size: 17px;
|
||||
width: 98%;
|
||||
margin: 0 auto;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
#cancel-image-container,
|
||||
#cancel-album-container {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
#cancel-image-container {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.photos-app #phone-image-container-header {
|
||||
position: relative;
|
||||
top: 50px;
|
||||
font-size: 17px;
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.phone-image-container #phone-image-container-header-text {
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
width: 200px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
.photos-app #phone-image-container-header-text {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.photos-app #phone-image-container-header-text .block {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.photos-app #phone-image-container-header-text a {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
#photos-search-bar-input {
|
||||
color: rgb(0,0,0, 0.7);
|
||||
}
|
||||
|
||||
.photos-search-bar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.photos-search-bar textarea {
|
||||
background: var(--second-border-color);
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
padding: 9px 20px 4px 38px;
|
||||
font-size: 17px;
|
||||
outline: none;
|
||||
resize: none;
|
||||
color: lightgray;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.photos-search-bar .fa-search {
|
||||
position: absolute;
|
||||
margin: 10px;
|
||||
top: 7px;
|
||||
font-size: 18px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.photos-search-bar .fa-times-circle {
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.photos-foryou-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
bottom: 30px;
|
||||
}
|
||||
|
||||
span.photos-foryou-header {
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
height: 75px;
|
||||
line-height: 90px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid var(--border-light-color);
|
||||
}
|
||||
|
||||
span.photos-foryou-title {
|
||||
font-size: 19px;
|
||||
margin: 20px 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.photos-foryou-title,
|
||||
.photos-foryou-title {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.slick-list img {
|
||||
background: red;
|
||||
height: 370px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--img-width: 276px;
|
||||
}
|
||||
|
||||
.photos-foryou-container .photos-image-item :is(video, img) {
|
||||
width: var(--img-width) !important;
|
||||
}
|
||||
|
||||
.photos-foryou-container .photos-image-item {
|
||||
width: var(--img-width) !important;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
/* Phone Image Zoom */
|
||||
|
||||
.image-rotate-cover {
|
||||
display: none;
|
||||
transform: rotate(90deg);
|
||||
width: 653px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 276px;
|
||||
left: -80px;
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.phone-image-container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
transform: translateX(-100%);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
z-index: 150;
|
||||
background-color: var(--main-background-color);
|
||||
}
|
||||
|
||||
.phone-select-photo-container,
|
||||
.phone-select-gallery-container {
|
||||
position: absolute;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
right: -100%;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
z-index: 140;
|
||||
background-color: var(--main-background-color);
|
||||
}
|
||||
|
||||
.phone-video-container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
right: -100%;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
z-index: 140;
|
||||
background-color: var(--main-background-color);
|
||||
}
|
||||
|
||||
.app-header-rotated {
|
||||
transform: rotate(90deg);
|
||||
width: 496.26px;
|
||||
top: 271.105px;
|
||||
z-index: 60;
|
||||
background: var(--main-background-color);
|
||||
height: 18.38px;
|
||||
position: absolute;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.image-rotated {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: rotate(90deg);
|
||||
object-fit: contain;
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.phone-image-source-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-origin: 0 0 0;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
|
||||
.phone-image-source-container-child {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.phone-image-source-container-child figure {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.phone-image-source-rotated {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.phone-image-source {
|
||||
position: absolute;
|
||||
width: 450px;
|
||||
height: 685px;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
#phone-video-source {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 58%;
|
||||
top: 15%;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
cursor: pointer;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.gallery-widget {
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#phone-media-share {
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
transition: all 0.3s ease-in-out;
|
||||
background: var(--main-background-color-reminders);
|
||||
}
|
||||
|
||||
#phone-media-share.up {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
#photos-range-divider {
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
bottom: 0px;
|
||||
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
border-radius: 12px;
|
||||
border-radius: 20px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.photo-range-item {
|
||||
font-size: 14px;
|
||||
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
padding: 7px 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.photo-range-item.current {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.photo-interaction {
|
||||
background-color: var(--second-border-color);
|
||||
pointer-events: all;
|
||||
padding: 0.5rem 1rem;
|
||||
z-index: 99999999;
|
||||
font-size: 14px;
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#photo-select-footer {
|
||||
padding: 2.6rem 16px 4rem 16px;
|
||||
}
|
||||
|
||||
.my-albums {
|
||||
position: relative;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
#photos-my-albums {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
top: 10px;
|
||||
margin: 0 auto;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.photo-tick {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 13px;
|
||||
color: white;
|
||||
z-index: 999;
|
||||
background-color: #1e7ee5;
|
||||
border-radius: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.photo-tick i {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#new-album {
|
||||
width: 45%;
|
||||
height: 190px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.phone-gallery-media {
|
||||
height: 580px !important;
|
||||
position: relative;
|
||||
margin-bottom: 35px;
|
||||
margin-right: 150px;
|
||||
}
|
||||
|
||||
#photos-add-to-album {
|
||||
position: absolute;
|
||||
height: 93%;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#photos-add-to-album header {
|
||||
height: 6%;
|
||||
}
|
||||
|
||||
#photos-add-to-album.up {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
#gallery-photo-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#gallery-photo-list :where(img, video) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all .4s;
|
||||
}
|
||||
|
||||
.box-gallery-option {
|
||||
background: var(--main-superficial-color);
|
||||
box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.box-gallery-option a,
|
||||
.box-gallery-option i {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.box-gallery-option-group {
|
||||
background: var(--main-superficial-color);
|
||||
box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.box-gallery-option-group div {
|
||||
height: 50px;
|
||||
margin: 5px;
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
.garage-app-header {
|
||||
height: 90px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
line-height: 159px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#garage-cars-page {
|
||||
background: #0e0f11;
|
||||
}
|
||||
|
||||
#garage-garages-page {
|
||||
background: #0e0f11;
|
||||
}
|
||||
|
||||
#garage-vehicles {
|
||||
position: relative;
|
||||
width: 96%;
|
||||
top: 28px;
|
||||
max-height: 567px;
|
||||
padding-bottom: 10px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.garage-vehicle .disabled,
|
||||
.garage-vehicle .disabled button {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#garage-list {
|
||||
width: 96%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
max-height: 88.5%;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.garage-search-button {
|
||||
width: 96% !important;
|
||||
margin: 0 auto !important;
|
||||
height: 40px;
|
||||
background: #1d1e20 !important;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.garage-second-button {
|
||||
display: flex; /* Usamos flexbox para el contenedor */
|
||||
align-items: center; /* Alinea verticalmente el contenido */
|
||||
justify-content: space-between; /* Coloca los elementos a los extremos */
|
||||
position: relative;
|
||||
top: 17px;
|
||||
width: 96% !important;
|
||||
margin: 0 auto !important;
|
||||
background: linear-gradient(to right, #15304d, #102541) !important;
|
||||
height: 50px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.garage-second-button a {
|
||||
color: #3473c9;
|
||||
}
|
||||
|
||||
.garage-second-button i {
|
||||
color: #3473c9;
|
||||
}
|
||||
|
||||
/* Ajusta el espaciado entre el texto y el emoticono según sea necesario */
|
||||
.garage-second-button a {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#garage-name {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.garage-vehicle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 24px;
|
||||
border-radius: 16px;
|
||||
background-color: #1d1e20;
|
||||
transition: all 0.08s linear 0s;
|
||||
cursor: pointer;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.garage-vehicle button {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.garage-vehicle .font-semibold {
|
||||
color: white;
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.garage-vehicle .justify-between {
|
||||
position: relative;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
.garage-vehicle footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.garage-vehicle footer span {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
background-color: #2c3e50;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.garage-vehicle footer span i {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.garage-vehicle footer span a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.garage-vehicle-first-letter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
background-color: lightgray;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
color: black;
|
||||
margin-right: 8px;
|
||||
border-radius: 9999px;
|
||||
transition: all 0.05s linear 0s;
|
||||
}
|
||||
|
||||
#garage-footer {
|
||||
border-top: 1px solid #1d1e20;
|
||||
background: #0e0f11;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
#garage-footer a {
|
||||
font-size: 14px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.garage-footer-icon {
|
||||
color: #777;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.garage-footer-icon.current {
|
||||
color: var(--blue-text);
|
||||
}
|
||||
|
||||
.garage-footer-icon + a {
|
||||
color: gray;
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
#health-settings {
|
||||
top: 8%;
|
||||
transform: translateY(100%);
|
||||
transition: 0.5s;
|
||||
opacity: 0.5;
|
||||
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#health-settings.active {
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#health-settings header a {
|
||||
position: relative;
|
||||
bottom: 5px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
#health-settings header i {
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.health-app-header {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
.health-app-header i {
|
||||
position: relative;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
|
||||
.health-app-header a {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
font-size: 19px;
|
||||
height: 25px;
|
||||
font-weight: bold;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.health-app-content {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
width: 97%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.health-app-content header {
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.health-app-content header a {
|
||||
position: relative;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.health-app-content section {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.health-app-content section footer a {
|
||||
position: relative;
|
||||
margin-left: 5px;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
#health-form {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
height: 84%;
|
||||
}
|
||||
|
||||
#health-thirsty-notice-value-container a,
|
||||
#health-hungry-notice-value-container a,
|
||||
#health-health-notice-value-container a {
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
.houses-app section {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.houses-app * {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
#houses-app-bg {
|
||||
background-image: url(../../img/houses/bg.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 1;
|
||||
filter: brightness(0.2) blur(0.5px);
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.house-item-bg {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#house-list {
|
||||
height: 83%;
|
||||
}
|
||||
|
||||
.house-action {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
height: 19rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.house-action:hover {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.house-action-icon {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border-radius: 9999px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.house-key-action {
|
||||
height: 9rem;
|
||||
}
|
||||
|
||||
#house-key-action-list {
|
||||
max-height: 68%;
|
||||
overflow: auto;
|
||||
}
|
||||
+1075
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,96 @@
|
||||
.jobcenter-app {
|
||||
display: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 95) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(240, 240, 240, 0.85) 100%)
|
||||
}
|
||||
|
||||
.jobcenter-header {
|
||||
background: #ef2c3c;
|
||||
height: 12%;
|
||||
}
|
||||
|
||||
.jobcenter-header a {
|
||||
position: relative;
|
||||
top: 65%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
font-size: 19px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#jobcenter-header-img {
|
||||
position: absolute;
|
||||
width: 85%;
|
||||
max-width: 600px; /* Puedes ajustar el tamaño máximo según tus preferencias */
|
||||
top: 29%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow: hidden; /* Para asegurar que la imagen no se desborde del contenedor */
|
||||
}
|
||||
|
||||
#jobcenter-header-img img {
|
||||
width: 100%;
|
||||
height: auto; /* Mantener la proporción de aspecto */
|
||||
display: block; /* Asegurar que la imagen esté centrada verticalmente */
|
||||
margin: 0 auto; /* Centrar la imagen horizontalmente */
|
||||
}
|
||||
|
||||
.jobcenter-list {
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
height: 80%;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 44.5%;
|
||||
height: 470px;
|
||||
padding-top: 19px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.jobcenter-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.jobcenter-class-body-job {
|
||||
color: black;
|
||||
background: white;
|
||||
transition: 0.3s;
|
||||
width: 95%;
|
||||
text-align: left;
|
||||
padding-left: 25px;
|
||||
line-height: 60px;
|
||||
margin-left: 2%;
|
||||
margin-bottom: 4%;
|
||||
border-radius: 30px;
|
||||
height: 60px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
|
||||
}
|
||||
.jobcenter-class-body-job:hover{
|
||||
background: #ef2c3c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.jobcenter-showitems-other {
|
||||
margin-top: 2px;
|
||||
margin-left: 60%;
|
||||
position: absolute;
|
||||
display: initial;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#jobcenter-icon-class {
|
||||
padding-left: 15px;
|
||||
font-size: 25px;
|
||||
color: white;
|
||||
}
|
||||
.jobcenter-class-body-job:hover .jobcenter-showitems-other {
|
||||
visibility: visible;
|
||||
}
|
||||
@@ -0,0 +1,722 @@
|
||||
.mail-home {
|
||||
position: relative;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.mail-screen {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--main-background-color);
|
||||
}
|
||||
|
||||
#mail-login-screen img {
|
||||
position: absolute;
|
||||
top: 105px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#mail-login-screen h1 {
|
||||
position: relative;
|
||||
bottom: 35px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#mail-login-screen h2 {
|
||||
position: relative;
|
||||
bottom: 50px;
|
||||
font-size: 15px;
|
||||
font-weight: 100;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#mail-login-screen footer {
|
||||
position: relative;
|
||||
bottom: 7px;
|
||||
}
|
||||
|
||||
#mail-register-firstscreen img {
|
||||
position: relative;
|
||||
bottom: 150px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
#mail-register-firstscreen h1 {
|
||||
position: relative;
|
||||
bottom: 175px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#mail-register-firstscreen a {
|
||||
position: relative;
|
||||
bottom: 165px;
|
||||
font-size: 16px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mail-app .instagram-blue-button {
|
||||
height: 45px !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#mail-register-firstscreen .instagram-blue-button {
|
||||
position: relative;
|
||||
top: 260px;
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
#mail-register-screen-third input,
|
||||
#mail-register-screen-second input {
|
||||
width: 90% !important;
|
||||
}
|
||||
|
||||
.mail-add-your-pass,
|
||||
.mail-add-your-name {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
#mail-forgot-password-accounts {
|
||||
position: relative;
|
||||
top: 25px;
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.mail-login-acc {
|
||||
position: relative;
|
||||
top: 160px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mail-image-media h3 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#mail-forgot-password-accounts article {
|
||||
height: 65px;
|
||||
border-bottom: 1px solid var(--border-light-color);
|
||||
}
|
||||
|
||||
#mail-forgot-password-accounts article:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.mail-login-form input {
|
||||
width: 86% !important;
|
||||
}
|
||||
|
||||
.mail-login-form a {
|
||||
position: relative;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.mail-login-form button {
|
||||
position: relative;
|
||||
width: 86%;
|
||||
height: 48px;
|
||||
color: var(--invert-text-color);
|
||||
}
|
||||
|
||||
.mail-login-form-text p {
|
||||
font-size: 16px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.mail-header {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mail-header i {
|
||||
position: relative;
|
||||
bottom: 20px;
|
||||
font-size: 22px;
|
||||
color: var(--blue-text);
|
||||
}
|
||||
|
||||
#mail-header-text {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#mail-header-mail {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
font-size: 15px;
|
||||
max-width: 340px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#mail-header-lastsync {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
font-size: 10px;
|
||||
color: #6666;
|
||||
}
|
||||
|
||||
.mail-list {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
height: 68%;
|
||||
width: 100%;
|
||||
top: 20px;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.mail-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mail {
|
||||
position: relative;
|
||||
height: 90px;
|
||||
width: 100%;
|
||||
transition: 0.05s ease-in-out;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mail.unreaded .mail-sender {
|
||||
color: var(--blue-text);
|
||||
}
|
||||
|
||||
.mail-sender {
|
||||
position: absolute;
|
||||
font-size: 16px;
|
||||
left: 30px;
|
||||
top: 10px;
|
||||
width: 180px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mail-text {
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
left: 30px;
|
||||
font-size: 15px;
|
||||
max-width: 375px;
|
||||
width: 375px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.mail-text > p {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.mail-time {
|
||||
position: absolute;
|
||||
font-size: 16px;
|
||||
right: 20px;
|
||||
top: 10px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.opened-mail {
|
||||
display: none;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: var(--container-dark-background-color);
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
z-index: 30;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.opened-mail-header {
|
||||
display: block;
|
||||
height: 85%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
top: 6%;
|
||||
background: var(--container-dark-background-color);
|
||||
}
|
||||
|
||||
.mail-back {
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
left: 17px;
|
||||
}
|
||||
|
||||
.mail-back > i {
|
||||
font-size: 20px;
|
||||
transition: 0.05s ease-in-out;
|
||||
}
|
||||
|
||||
.mail-title {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 19px;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.mail-title h1 {
|
||||
font-size: 33px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mail-subject {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 19px;
|
||||
height: 28px;
|
||||
font-size: 17px;
|
||||
width: 90%;
|
||||
border-bottom: 1px solid var(--second-border-color);
|
||||
}
|
||||
|
||||
.opened-mail-header .mail-sender {
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
left: 19px;
|
||||
height: 28px;
|
||||
font-size: 17px;
|
||||
width: 90%;
|
||||
border-bottom: 1px solid var(--second-border-color);
|
||||
}
|
||||
|
||||
.mail-date span,
|
||||
.mail-subject span,
|
||||
.mail-sender span {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.mail-sender p {
|
||||
color: var(--blue-text);
|
||||
}
|
||||
|
||||
.mail-subject > p {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mail-date {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 19px;
|
||||
height: 28px;
|
||||
font-size: 17px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.mail-spacing {
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
background-color: var(--second-border-color);
|
||||
height: 1.3px;
|
||||
top: 230px;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-radius: 184px;
|
||||
}
|
||||
|
||||
.mail-content {
|
||||
position: absolute;
|
||||
top: 256px;
|
||||
left: 20px;
|
||||
height: 260px;
|
||||
width: 90%;
|
||||
font-size: 16px;
|
||||
overflow-y: scroll;
|
||||
border-bottom: 1px solid var(--dark-background-color);
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
#send-mail-container footer {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
#send-mail-container .mail-media {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
.empty-media {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#send-mail-container .relative i {
|
||||
margin-top: 5px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.mail-content p {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.mail-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mail-settings .twitter-footer-icon.current,
|
||||
#mail-settings .twitter-footer-icon.current + p,
|
||||
#mail-home .twitter-footer-icon.current,
|
||||
#mail-home .twitter-footer-icon.current + p {
|
||||
color: var(--blue-text);
|
||||
display: block;
|
||||
}
|
||||
|
||||
#mail-home,
|
||||
#mail-settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#mail-home p,
|
||||
#mail-settings p {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
font-size: 14px;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#mail-footer {
|
||||
background: var(--container-dark-background-color);
|
||||
}
|
||||
|
||||
.mail-content > p {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 100;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.opened-mail-footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 87px;
|
||||
border-top: 1px solid var(--second-border-color);
|
||||
background-color: var(--main-background-color);
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.opened-mail-footer-item {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
top: 11px;
|
||||
font-size: 20px;
|
||||
transition: 0.1s ease-in-out;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.opened-mail-footer-item span {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.opened-mail-footer-item:hover .mail-icon {
|
||||
transition: 0.1s ease-in-out;
|
||||
animation: Shake 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes Shake {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
}
|
||||
|
||||
.nomails {
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
font-weight: 600;
|
||||
color: grey;
|
||||
position: relative;
|
||||
top: 30%;
|
||||
}
|
||||
|
||||
.mail-image {
|
||||
position: absolute;
|
||||
top: 251px;
|
||||
left: 19px;
|
||||
font-size: 15px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.foto_ilanlar {
|
||||
display: none;
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 276px;
|
||||
height: 138px;
|
||||
width: -webkit-fill-available;
|
||||
outline: none;
|
||||
border: none;
|
||||
resize: none;
|
||||
|
||||
transition: 0.1s linear;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.silgorsel {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 423px;
|
||||
height: 138px;
|
||||
width: -webkit-fill-available;
|
||||
resize: none;
|
||||
|
||||
margin: 10px 20px 0px;
|
||||
outline: none;
|
||||
border-width: initial;
|
||||
border-style: none;
|
||||
border-color: initial;
|
||||
border-image: initial;
|
||||
transition: all 0.1s linear 0s;
|
||||
}
|
||||
|
||||
#mail-send {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#mail-settings-page header a {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
#mail-content {
|
||||
position: relative;
|
||||
top: 20px;
|
||||
width: 96%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#mail-content input {
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
#mail-content span {
|
||||
color: gray;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#mail-content #mail-to {
|
||||
font-size: 18px;
|
||||
width: 300px;
|
||||
color: var(--blue-text);
|
||||
}
|
||||
|
||||
#mail-content .border-b {
|
||||
height: 35px;
|
||||
border-bottom: 1px solid var(--dark-background-color);
|
||||
}
|
||||
|
||||
#mail-message {
|
||||
height: 400px;
|
||||
font-size: 17px;
|
||||
border-bottom: 1px solid var(--dark-background-color);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mail-input {
|
||||
width: 100%;
|
||||
height: 31px;
|
||||
border-radius: 4px;
|
||||
background: var(--dark-background-color);
|
||||
padding: 0.5em;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
#send-mail-container header {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
width: 96%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.mail-input input {
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mail-input::placeholder {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.empty-media {
|
||||
width: 12.5rem;
|
||||
height: 7.5rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.mail-media {
|
||||
width: 12.5rem;
|
||||
height: 7.5rem;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.mail-image-media {
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
top: 520px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.email-input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.email-input {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--dark-background-color);
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
|
||||
.email-suffix {
|
||||
padding: 10px;
|
||||
border: 1px solid var(--dark-background-color);
|
||||
font-weight: 600;
|
||||
border-radius: 0 5px 5px 0;
|
||||
background-color: var(--dark-background-color);
|
||||
}
|
||||
|
||||
.instagram-register {
|
||||
height: 46px !important;
|
||||
}
|
||||
|
||||
.mail-genera-info-text p {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.mail-genera-info-text a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.instagram-input {
|
||||
height: 46px !important;
|
||||
width: 22.5vw !important;
|
||||
background: var(--dark-background-color) !important;
|
||||
border: 1px solid var(--dark-background-color) !important;
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
.mail-setting-items {
|
||||
position: relative;
|
||||
top: 7px;
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.mail-setting-items button {
|
||||
height: 46px;
|
||||
color: var(--text-color);
|
||||
background: var(--dark-background-color);
|
||||
}
|
||||
|
||||
#mail-search-all {
|
||||
position: relative;
|
||||
top: 7px;
|
||||
text-align: center;
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#mail-settings-form {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#mail-settings-form div {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid var(--border-light-color);
|
||||
}
|
||||
|
||||
#mail-settings-form a {
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mail-forgot-acc {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mail-app .twitter-register-screen-header {
|
||||
width: 97%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.mail-app .twitter-register-screen-header a {
|
||||
color: var(--blue-text) !important;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
.map-app {
|
||||
background-color: #143c6a;
|
||||
}
|
||||
|
||||
#phone-map {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #143c6a;
|
||||
}
|
||||
|
||||
.leaflet-top {
|
||||
top: 7% !important;
|
||||
}
|
||||
|
||||
.map-widget {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.map-widget-map {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.leaflet-control-attribution {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#phone-input-title {
|
||||
text-align: center;
|
||||
width: 90%;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
#phone-input-subtitle {
|
||||
text-align: center;
|
||||
width: 90%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
@@ -0,0 +1,393 @@
|
||||
#market-register-firstscreen header i {
|
||||
position: relative;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
#market-forgot-password-accounts {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid var(--dark-border-color);
|
||||
}
|
||||
|
||||
#market-forgot-password-accounts img {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#market-register-screen-fourth,
|
||||
#market-register-screen-third,
|
||||
#market-register-screen-second,
|
||||
#market-register-firstscreen {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#market-forgot-password-screen,
|
||||
#market-login-screen,
|
||||
#market-self-profile,
|
||||
#market-register-screen-fourth,
|
||||
#market-register-screen-third,
|
||||
#market-register-screen-second,
|
||||
#market-register-screen-first,
|
||||
#market-register-firstscreen {
|
||||
background: var(--main-background-color);
|
||||
}
|
||||
|
||||
#market-register-firstscreen h2 {
|
||||
font-size: 26px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#market-login-screen h3,
|
||||
#market-register-screen-first h3 {
|
||||
position: relative;
|
||||
width: 95%;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
#market-register-screen-first {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#market-register-screen-first p {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#market-login-screen button,
|
||||
#market-register-screen-fourth button,
|
||||
#market-register-screen-third button,
|
||||
#market-register-screen-second button,
|
||||
#market-register-screen-first button {
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#market-login-form,
|
||||
#market-create-account-form {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#market-login-form input,
|
||||
#market-create-username-form input,
|
||||
#market-create-password-form input,
|
||||
#market-verify-phone-form input,
|
||||
#market-create-account-form input {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.market-footer-icon {
|
||||
color: gray;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.market-footer-icon.current {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.market-register-screen-header {
|
||||
position: relative;
|
||||
width: 98%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 7rem;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.market-screen {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.market-form {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.market-form input {
|
||||
background-color: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-bottom: 1px solid #4c4b4b;
|
||||
padding-bottom: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.market-header {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 13%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
padding-top: 45px;
|
||||
background: var(--dark-background-color);
|
||||
}
|
||||
|
||||
#market-opened-market {
|
||||
background: var(--container-dark-background-color);
|
||||
}
|
||||
|
||||
#market-self-profile div {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
margin-top: 2%;
|
||||
}
|
||||
|
||||
#market-opened-market img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#market-opened-name {
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
#market-opened-market section {
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#market-opened-market article section div a,
|
||||
#market-opened-market article section div i {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#market-opened-description {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
#market-opened-market article {
|
||||
margin-top: 2%;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
#market-opened-market article div {
|
||||
margin-top: 2%;
|
||||
}
|
||||
|
||||
#market-opened-market footer {
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
#market-opened-market .market-header i {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#market-opened-market .market-header {
|
||||
background: none;
|
||||
width: 98%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.market-header .blue_text {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
#market-self-profile button {
|
||||
height: 45px;
|
||||
border-radius: 20px;
|
||||
background: var(--border-light-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#market-self-profile-form a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.market-chat-message {
|
||||
max-width: 85%;
|
||||
gap: 4px;
|
||||
background-color: var(--dark-border-color);
|
||||
border-radius: 20px;
|
||||
padding: 12px;
|
||||
align-self: flex-start;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.market-chat-message.self {
|
||||
align-self: flex-end;
|
||||
background-color: var(--market-bubble-chat);
|
||||
}
|
||||
|
||||
.market-chat-message img {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#market-chat header {
|
||||
background: var(--container-dark-background-color) !important;
|
||||
}
|
||||
|
||||
#market-chat-input::placeholder {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
#market-chat .market-header {
|
||||
background: var(--dark-background-color);
|
||||
height: 16%;
|
||||
}
|
||||
|
||||
#market-chat .market-header img {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#market-chat-messages {
|
||||
position: relative;
|
||||
bottom: 12px;
|
||||
height: 76.5%;
|
||||
padding-bottom: 15px;
|
||||
background: var(--main-background-color);
|
||||
}
|
||||
|
||||
#market-chat-input-container {
|
||||
background: var(--main-background-color);
|
||||
}
|
||||
|
||||
#market-chat-input-container .emojionearea {
|
||||
height: 40px;
|
||||
background: var(--messages-bubble-background) !important;
|
||||
}
|
||||
|
||||
#market-chat-input-container .emojionearea-editor {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
.market-app .emojionearea {
|
||||
margin: 0 auto;
|
||||
background: transparent !important;
|
||||
color: #fff !important;
|
||||
width: 90% !important;
|
||||
background: #141414 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.market-app .emojionearea-editor {
|
||||
color: var(--text-color) !important;
|
||||
width: 80% !important;
|
||||
}
|
||||
|
||||
.market-app img.current {
|
||||
border: 1.5px solid #fff;
|
||||
}
|
||||
|
||||
#market-messages-list .unread p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#market-messages-page,
|
||||
#market-home-page {
|
||||
position: relative;
|
||||
background: var(--main-background-color);
|
||||
}
|
||||
|
||||
#market-messages-list article,
|
||||
#market-markets section {
|
||||
padding: 13px;
|
||||
margin-bottom: -5px;
|
||||
border-bottom: 1px solid var(--dark-border-color);
|
||||
}
|
||||
|
||||
#market-markets section img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#market-markets section div a {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
#market-messages-list {
|
||||
height: 85%;
|
||||
}
|
||||
|
||||
#market-messages-list img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#market-messages-list article p {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
font-size: 17px;
|
||||
color: gray !important;
|
||||
margin-left: 5px;
|
||||
max-width: 320px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#market-messages-list article a {
|
||||
font-size: 16px;
|
||||
color: var(--text-color);
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#market-messages-list article span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#market-messages-list article .nowrap {
|
||||
max-width: 120px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#market-messages-list article img {
|
||||
height: 55px;
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
#market-forgot-password-accounts:last-child,
|
||||
#market-messages-list article:last-child,
|
||||
#market-markets section:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#market-opened-image {
|
||||
height: 300px !important;
|
||||
}
|
||||
|
||||
#market-back {
|
||||
position: relative;
|
||||
left: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
#market-interactions-container {
|
||||
background: var(--main-background-color);
|
||||
}
|
||||
|
||||
#market-interactions-container .rounded-lg {
|
||||
background: var(--border-light-color);
|
||||
}
|
||||
|
||||
.edit-avatar-market {
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.edit-avatar-market img {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.edit-avatar-market a {
|
||||
position: relative;
|
||||
bottom: 5px;
|
||||
}
|
||||
@@ -0,0 +1,608 @@
|
||||
#messages-app-mainHead {
|
||||
position: absolute;
|
||||
top: 65px;
|
||||
font-size: 19px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#messages-app-createMessage {
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 20px;
|
||||
top: 62px;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
filter: invert(44%) sepia(56%) saturate(6757%) hue-rotate(196deg)
|
||||
brightness(105%) contrast(103%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.messages-app-body-messagenotReaded {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 100%;
|
||||
background-color: rgb(0, 120, 254);
|
||||
}
|
||||
|
||||
#messages-app-searchContainer {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
top: 100px;
|
||||
height: 40px;
|
||||
left: 15px;
|
||||
width: 93%;
|
||||
background-color: var(--dark-background-color);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#messages-app-searchContainer img {
|
||||
height: 23px !important;
|
||||
width: 23px !important;
|
||||
}
|
||||
|
||||
#messages-settings {
|
||||
position: absolute;
|
||||
color: #48a1d9;
|
||||
right: 20px;
|
||||
font-size: 23px;
|
||||
transition: color 0.25s;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#messages-app-searchContainer img {
|
||||
margin-left: 6px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#messages-app-searchContainer textarea {
|
||||
position: relative;
|
||||
top: 9px;
|
||||
left: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#messages-app-body {
|
||||
position: absolute;
|
||||
top: 155px;
|
||||
width: 96%;
|
||||
left: 6px;
|
||||
height: 83%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#messages-app-body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.messages-app-body-message {
|
||||
position: relative;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.messages-app-body-messagePP {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 100%;
|
||||
margin-left: 20px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.messages-app-body-message-content {
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message-app-body-messageOwner {
|
||||
font-size: 17px;
|
||||
width: 170px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.message-app-body-lastMessage {
|
||||
font-size: 14px;
|
||||
margin-left: 2px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
#messages-app-content-head {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
height: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
border-bottom: 1px solid var(--dark-background-color);
|
||||
z-index: 3;
|
||||
background-color: var(--border-color);
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
#messages-app-content-head-name {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#messages-app-content-head-pp {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
#messages-app-content-foot-alternative-camera {
|
||||
/* color: #666 */
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
filter: invert(35%) sepia(3%) saturate(0%) hue-rotate(237deg)
|
||||
brightness(100%) contrast(86%);
|
||||
}
|
||||
|
||||
#messages-app-content-foot {
|
||||
position: absolute;
|
||||
width: 97%;
|
||||
height: 10%;
|
||||
bottom: 0%;
|
||||
left: 5px;
|
||||
padding-top: 15px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.messages-app-body-message-right {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
right: 5px;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.messages-app-body-messageTime {
|
||||
position: absolute;
|
||||
right: 8%;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
bottom: 24px;
|
||||
}
|
||||
|
||||
#messages-app-content-foot-alternativeMessageContainer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.messages-app-content-foot-alternative {
|
||||
position: relative;
|
||||
left: 5px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
filter: invert(20%) sepia(3%) saturate(0%) hue-rotate(237deg)
|
||||
brightness(100%) contrast(86%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#messages-app-content-foot-sendMessageContainer {
|
||||
position: relative;
|
||||
border-radius: 18px;
|
||||
display: flex;
|
||||
padding: 0 1px;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: space-between;
|
||||
height: 40%;
|
||||
width: 75%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#messages-app-content-foot-sendMessageContainer .emojionearea {
|
||||
border-radius: 20px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#messages-app-content-foot-sendMessageContentImg {
|
||||
position: relative;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
left: 1.5%;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#messages-app-content-foot-message {
|
||||
overflow: none;
|
||||
outline: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
height: 100%;
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
#messages-app-content-foot-message::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#messages-app-content-body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 15px;
|
||||
padding-top: 10px;
|
||||
padding-right: 15px;
|
||||
margin: 0 auto;
|
||||
height: 73.5%;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#createNewMessage,
|
||||
#messages-app-newMessageContentInput {
|
||||
overflow: none;
|
||||
outline: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
#messages-app-content-body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.messages {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message {
|
||||
border-radius: 20px;
|
||||
padding: 8px 15px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
display: inline-block;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.message-map-container {
|
||||
position: relative;
|
||||
background: red;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.message_photo.map {
|
||||
object-fit: cover;
|
||||
height: 180px !important;
|
||||
width: 180px !important;
|
||||
}
|
||||
|
||||
.message_photo {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.yours {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.yours .message {
|
||||
margin-right: 25%;
|
||||
background-color: var(--messages-bubble-background);
|
||||
position: relative;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.yours .message.last:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
bottom: 0;
|
||||
left: -7px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: var(--messages-bubble-background);
|
||||
border-bottom-right-radius: 15px;
|
||||
}
|
||||
|
||||
.yours .message.last:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
left: -10px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background: var(--main-background-color);
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
.mine {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.mine .message {
|
||||
color: white;
|
||||
margin-left: 25%;
|
||||
background: #34cc5d;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mine .message.last:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
bottom: 0;
|
||||
right: -8px;
|
||||
height: 18px;
|
||||
width: 20px;
|
||||
background: #34cc5d;
|
||||
border-bottom-left-radius: 15px;
|
||||
}
|
||||
|
||||
.mine .message.last:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
right: -10px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background: var(--main-background-color);
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
|
||||
#messages-app-newMessage-container {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#messages-app-newMessage {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 95%;
|
||||
top: 7%;
|
||||
padding: 13px;
|
||||
background-color: var(--container-dark-background-color);
|
||||
transition: transform 0.4s;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#messages-app-newMessage header {
|
||||
border-bottom: 1px solid var(--dark-background-color);
|
||||
z-index: 3;
|
||||
background-color: var(--border-color);
|
||||
height: 50px;
|
||||
position: relative;
|
||||
bottom: 13px;
|
||||
border-top-left-radius: 15px;
|
||||
border-top-right-radius: 15px;
|
||||
width: 419px;
|
||||
left: -13px;
|
||||
}
|
||||
|
||||
#messages-app-newMessageName {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0px;
|
||||
line-height: 50px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
font-weight: bold;
|
||||
transform: translate(-50%);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#messages-app-cancel {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
line-height: 50px;
|
||||
color: #0066ff;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#messages-app-newMessageWho {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border-bottom: 1px solid var(--dark-background-color);
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#messages-app-newMessageWho a {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#messages-app-newMessageWho input {
|
||||
margin-left: 2px;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
#messages-app-newMessageContent {
|
||||
position: relative;
|
||||
top: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding-left: 4px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#messages-app-newMessageContent img {
|
||||
position: relative;
|
||||
left: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#messages-app-newMessageContacts {
|
||||
position: absolute;
|
||||
background: red;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
top: 100px;
|
||||
width: 94%;
|
||||
/* margin: 0 auto; */
|
||||
height: auto;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
|
||||
}
|
||||
|
||||
.messages-app-newMessageContact {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
background-color: var(--container-dark-background-color);
|
||||
color: #0066ff;
|
||||
cursor: pointer;
|
||||
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
|
||||
rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
#popup-actions {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
z-index: 99999999999;
|
||||
bottom: 3%;
|
||||
}
|
||||
|
||||
#popup-actions-content-img {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#popup-actions-content-img-content {
|
||||
position: relative;
|
||||
bottom: 7px;
|
||||
width: 90%;
|
||||
padding-left: 10px;
|
||||
padding-top: 10px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#back-container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
top: 6%;
|
||||
z-index: 99999;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#popup-actions-choices-container {
|
||||
position: relative;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
z-index: 4;
|
||||
border-radius: 10px;
|
||||
color: var(--text-color);
|
||||
background-color: var(--container-dark-background-color);
|
||||
}
|
||||
|
||||
.popup-actions-content {
|
||||
padding: 15px 0 10px 0;
|
||||
cursor: pointer;
|
||||
color: var(--blue-text);
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#popup-actions-background {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 9190px;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
opacity: 0.6;
|
||||
z-index: 3;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.popup-custom-line {
|
||||
background: var(--border-color);
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
#popup-actions-cancel,
|
||||
#popup-actions-content-img_msg {
|
||||
width: 95%;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
background-color: var(--container-dark-background-color);
|
||||
margin-top: 12px;
|
||||
padding: 16px 0px 10px 0px;
|
||||
cursor: pointer;
|
||||
color: #007cff;
|
||||
font-weight: 800;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.messages-app-newMessageContact:hover {
|
||||
background-color: #0077ff;
|
||||
color: #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.messages-app-newMessageContact img {
|
||||
margin-left: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.messages-app-newMessageContact a {
|
||||
margin-left: 5px;
|
||||
}
|
||||
@@ -0,0 +1,255 @@
|
||||
.notes-app {
|
||||
background: var(--main-background-color-notes);
|
||||
}
|
||||
|
||||
.paylas {
|
||||
position: relative;
|
||||
top: 20px;
|
||||
height: auto;
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.paylas input[type="text"] {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 97%;
|
||||
left: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.paylas #gnc_tarea {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
font-size: 16px;
|
||||
height: 670px;
|
||||
margin-bottom: 5px;
|
||||
background: transparent;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.paylas #tarea {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
font-size: 16px;
|
||||
height: 670px;
|
||||
margin-bottom: 5px;
|
||||
background: transparent;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.paylas a {
|
||||
position: relative;
|
||||
color: orange;
|
||||
left: 92%;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.notes-search {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
background: var(--main-superficial-color) !important;
|
||||
}
|
||||
|
||||
.notes-list {
|
||||
position: relative;
|
||||
top: 30px;
|
||||
height: auto;
|
||||
max-height: 70.5%;
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
overflow: auto;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.notes-app footer {
|
||||
position: absolute;
|
||||
top: 93%;
|
||||
width: 90%;
|
||||
left: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.notes-app footer i {
|
||||
font-size: 20px;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
#title_ {
|
||||
position: absolute;
|
||||
font-size: 17px;
|
||||
margin-top: 10px;
|
||||
margin-left: 16px;
|
||||
font-weight: bold;
|
||||
width: 50%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.note-description {
|
||||
position: relative;
|
||||
top: 30px;
|
||||
left: 15px;
|
||||
font-size: 15px;
|
||||
color: gray;
|
||||
width: 85%;
|
||||
white-space: pre-wrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.notes-app textarea {
|
||||
background: #f4f4f4;
|
||||
width: -webkit-fill-available;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
margin-top: 15px;
|
||||
font-size: 12px;
|
||||
border: none;
|
||||
font-weight: 100;
|
||||
height: 200px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.note-amount {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gstr {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gstr .n-header {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.gstr .n-header .fa-save {
|
||||
position: relative;
|
||||
font-size: 21px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.gstr .n-header a {
|
||||
font-size: 17px;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.n-p .n-header {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.n-p .n-header .fa-save {
|
||||
position: relative;
|
||||
font-size: 21px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.n-p .n-header a {
|
||||
font-size: 17px;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.nn {
|
||||
height: 60px;
|
||||
background: var(--main-superficial-color);
|
||||
}
|
||||
|
||||
.n-header a {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
font-size: 29px;
|
||||
font-weight: bold;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.n-header {
|
||||
width: -webkit-fill-available;
|
||||
background: white;
|
||||
padding-top: 70px;
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
background: var(--main-background-color-notes);
|
||||
}
|
||||
|
||||
.notes-widget {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.notes-widget header {
|
||||
position: relative;
|
||||
background: linear-gradient(to top, #fcbf01, #fed600);
|
||||
border-bottom: 1px solid #cea322;
|
||||
width: 175px;
|
||||
height: 40px;
|
||||
bottom: 12px;
|
||||
text-align: left;
|
||||
padding-left: 20px;
|
||||
line-height: 40px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.contenido .notes-widget header {
|
||||
height: 43px;
|
||||
width: 190px;
|
||||
line-height: 43px;
|
||||
}
|
||||
|
||||
.notes-widget header::before {
|
||||
content: "\00a0";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -6px;
|
||||
height: 2px;
|
||||
background-image: repeating-linear-gradient(
|
||||
to right,
|
||||
lightgray,
|
||||
lightgray 3px,
|
||||
transparent 3px,
|
||||
transparent 6px
|
||||
);
|
||||
}
|
||||
|
||||
#notes-widget-header a {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#notes-widget-header i {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.notes-widget-list {
|
||||
height: 65%;
|
||||
}
|
||||
|
||||
.contenido .notes-widget-list {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.notes-widget-list article {
|
||||
border-bottom: 1px solid lightgray;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.notes-widget-list article:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.notes-widget-list article a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.notes-widget-list article p {
|
||||
color: gray;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,992 @@
|
||||
:root {
|
||||
--main-font-size: 20px;
|
||||
}
|
||||
|
||||
.racing-overview {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #1c1a1c
|
||||
}
|
||||
|
||||
.racing-app-header {
|
||||
position: absolute;
|
||||
top: 74px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
text-indent: 25px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.racing-app-header p {
|
||||
color: lightgray;
|
||||
font-size: 18px;
|
||||
font-weight: 0;
|
||||
}
|
||||
|
||||
.racing-app-header h1 {
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.racing-overview h2 {
|
||||
font-size: 190px;
|
||||
margin-left: -30px;
|
||||
color: black;
|
||||
opacity: 0.2;
|
||||
font-weight: bold;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.racing-setup h2 {
|
||||
font-size: 190px;
|
||||
margin-left: -30px;
|
||||
color: black;
|
||||
opacity: 0.2;
|
||||
font-weight: bold;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.racing-races {
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 83%;
|
||||
top: 150px;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.racing-buttons {
|
||||
position: absolute;
|
||||
bottom: 28px;
|
||||
width: 93%;
|
||||
height: 80px;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background: #212021;
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.racing-button {
|
||||
position: relative;
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 30%;
|
||||
top: 20px;
|
||||
margin-left: 1.655%;
|
||||
margin-right: 3.2%;
|
||||
border-radius: 5px;
|
||||
transition: .1s linear;
|
||||
text-align: center;
|
||||
color: white;
|
||||
line-height: 43px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
#setup-race {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
#leaderboards-race {
|
||||
position: absoluite;
|
||||
top: -19px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
font-size: 20px;
|
||||
line-height: 60px;
|
||||
background: red;
|
||||
transition: .2s linear;
|
||||
}
|
||||
|
||||
#leaderboards-race a {
|
||||
position: relative;
|
||||
bottom: 12px;
|
||||
font-size: 17px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
#create-race {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
#leaderboards-race:hover {
|
||||
font-size: 27px
|
||||
}
|
||||
|
||||
#setup-race:hover {
|
||||
font-size: 19px
|
||||
}
|
||||
|
||||
#create-race:hover {
|
||||
font-size: 19px
|
||||
}
|
||||
|
||||
.racing-race {
|
||||
position: relative;
|
||||
width: 93%;
|
||||
height: 180px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px;
|
||||
background-color: rgb(230, 230, 230);
|
||||
transition: .1s linear;
|
||||
z-index: 100;
|
||||
border-radius: 13px;
|
||||
background: url('https://i.ibb.co/L88KFR8/racing-button.webp');
|
||||
background-size: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.racing-race:hover {
|
||||
background-color: rgb(209, 209, 209);
|
||||
}
|
||||
|
||||
.race-name {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 90px;
|
||||
font-size: 30px;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
width: 355px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.race-track {
|
||||
position: relative;
|
||||
float: right;
|
||||
top: 10px;
|
||||
text-aling: left;
|
||||
left: -15px;
|
||||
font-size: 19px;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.race-infomation {
|
||||
position: absolute;
|
||||
top: 140px;
|
||||
height: 20px;
|
||||
width: 95%;
|
||||
left: 21px;
|
||||
}
|
||||
|
||||
.race-infomation-tab {
|
||||
position: relative;
|
||||
float: left;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
background: none;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.race-buttons {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 18px;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.race-button {
|
||||
position: relative;
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
float: right;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
border-radius: 50%;
|
||||
pointer-events: all;
|
||||
transition: .05s linear;
|
||||
}
|
||||
|
||||
#join-race {
|
||||
background-color: #44bd32;
|
||||
}
|
||||
|
||||
#quit-race {
|
||||
background-color: #c23616;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#join-race:hover {
|
||||
background-color: #4dcf39;
|
||||
}
|
||||
|
||||
#quit-race:hover {
|
||||
background-color: #e43c17;
|
||||
}
|
||||
|
||||
#start-race {
|
||||
background-color: #0590db;
|
||||
}
|
||||
|
||||
#start-race:hover {
|
||||
background-color: #16a2ee;
|
||||
}
|
||||
|
||||
.racing-setup {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #1c1a1c;
|
||||
z-index: 102;
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
.racing-setup article {
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.racing-setup-track {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 45.95px;
|
||||
background-color: black;
|
||||
top: 110.28px;
|
||||
}
|
||||
|
||||
.racing-setup-tracks {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 45.95px;
|
||||
}
|
||||
|
||||
#racing-setup-trackheader {
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 150px;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
width: 89%;
|
||||
display: inline-block;
|
||||
box-shadow: 0 0 2px rgb(204, 204, 204);
|
||||
transition: all .5s ease;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
color: #474747;
|
||||
text-align: left;
|
||||
bottom: 50px;
|
||||
left: 25px;
|
||||
background-color: #fff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dropdown .select {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding: 10px
|
||||
}
|
||||
|
||||
.dropdown .select>i {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
transition: all .3s ease-in-out;
|
||||
float: right;
|
||||
line-height: 20px
|
||||
}
|
||||
|
||||
.dropdown:hover {
|
||||
box-shadow: 0 0 4px rgb(204, 204, 204)
|
||||
}
|
||||
|
||||
.dropdown:active {
|
||||
background-color: #f8f8f8
|
||||
}
|
||||
|
||||
.dropdown.active:hover,
|
||||
.dropdown.active {
|
||||
box-shadow: 0 0 4px rgb(204, 204, 204);
|
||||
background-color: #f8f8f8
|
||||
}
|
||||
|
||||
.dropdown.active .select>i {
|
||||
transform: rotate(-90deg)
|
||||
}
|
||||
|
||||
.dropdown .dropdown-menu {
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
margin-top: 1px;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
border-radius: 0 important;
|
||||
max-height: 420px;
|
||||
overflow-y: auto;
|
||||
z-index: 9
|
||||
}
|
||||
|
||||
.dropdown .dropdown-menu li {
|
||||
padding: 10px;
|
||||
transition: all .2s ease-in-out;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.dropdown .dropdown-menu {
|
||||
padding: 0;
|
||||
list-style: none
|
||||
}
|
||||
|
||||
.dropdown .dropdown-menu li:hover {
|
||||
background-color: #f2f2f2
|
||||
}
|
||||
|
||||
.dropdown .dropdown-menu li:active {
|
||||
background-color: #e2e2e2
|
||||
}
|
||||
|
||||
#racing-setup-lapsheader {
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 280px;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.racing-setup-laps {
|
||||
position: absolute;
|
||||
width: 88%;
|
||||
height: 45px;
|
||||
font-size: 17px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
top: 320px;
|
||||
left: 25px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
border-bottom: 1.5px solid #fff;
|
||||
color: white;
|
||||
transition: .1s linear;
|
||||
}
|
||||
|
||||
.racing-setup-laps:focus {
|
||||
border-bottom: 1.5px solid rgb(255, 137, 40);
|
||||
}
|
||||
|
||||
.racing-setup-laps:valid {
|
||||
border-bottom: 1.5px solid rgb(55, 199, 27);
|
||||
}
|
||||
|
||||
.racing-setup-laps::-webkit-inner-spin-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#racing-setup-informationheader {
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 395px;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.racing-setup-information-distance {
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 440px;
|
||||
color: white;
|
||||
color: gray;
|
||||
font-size: 21px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.racing-setup-information-creator {
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 480px;
|
||||
color: gray;
|
||||
font-size: 21px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.racing-setup-information-wr {
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 520px;
|
||||
color: gray;
|
||||
font-size: 21px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.racing-setup-buttons {
|
||||
position: absolute;
|
||||
bottom: 28px;
|
||||
width: 93%;
|
||||
height: 80px;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background: #212021;
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.racing-setup-button {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 45%;
|
||||
margin-left: 2.5%;
|
||||
margin-right: 2.5%;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
border-radius: 10px;
|
||||
transition: .1s linear;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
#setup-race-accept i {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
#setup-race-accept:hover {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
#setup-race-cancel:hover {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
/* Create */
|
||||
|
||||
#racing-create-tracknameheader {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 12px;
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.racing-create-trackname {
|
||||
position: absolute;
|
||||
width: 310px;
|
||||
height: 36.76px;
|
||||
top: 43px;
|
||||
left: 13.785px;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding-left: 10px;
|
||||
background-color: lightgray;
|
||||
border-radius: 5px;
|
||||
color: rgb(0, 0, 0);
|
||||
transition: .1s linear;
|
||||
}
|
||||
|
||||
.racing-create {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
z-index: 2000;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.racing-create-block {
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
height: 140px;
|
||||
background-color: white;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 40%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.racing-create-buttons {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.racing-leaderboard .racing-app-header {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
left: 30px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.racing-leaderboard .racing-app-header p {
|
||||
color: white;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.racing-create-button {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
margin-left: 2.5%;
|
||||
margin-right: 2.5%;
|
||||
line-height: 45px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
transition: .05s linear;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.racing-create-button a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#racing-create-accept {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
#racing-create-cancel i:hover {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.racing-leaderboard {
|
||||
/* display: none; */
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgb(31, 31, 31);
|
||||
z-index: 102;
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
.racing-leaderboards {
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
height: 72%;
|
||||
top: 150px;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#racing-leaderboards-header {
|
||||
position: absolute;
|
||||
right: 26px;
|
||||
top: 120px;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
.racing-leaderboard-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: rgb(230, 230, 230);
|
||||
transition: .1s linear;
|
||||
z-index: 100;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 7px;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.racing-leaderboard-item:hover {
|
||||
background-color: rgb(206, 206, 206);
|
||||
}
|
||||
|
||||
.racing-leaderboard-item-name {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 15px;
|
||||
color: black;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.racing-leaderboard-item-info {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 55px;
|
||||
color: rgb(32, 32, 32);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.racing-leaderboard-details {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.racing-leaderboard-details-block {
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 80%;
|
||||
height: 60%;
|
||||
background-color: white;
|
||||
top: 21%;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.racing-leaderboard-details-block-trackname {
|
||||
text-align: center;
|
||||
line-height: 55px;
|
||||
color: black;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
width: 100%;
|
||||
height: 58px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.racing-leaderboard-details-block-list {
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
height: 85%;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 55px;
|
||||
color: gray;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.racing-app .name {
|
||||
position: relative;
|
||||
left: 2px;
|
||||
font-size: 18px;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.racing-app .time {
|
||||
font-size: 18px;
|
||||
color: gray;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.racing-app .score {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: gray;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.racing-leaderboard-details-block-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.racing-leaderboard-details-back {
|
||||
position: absolute;
|
||||
right: 13px;
|
||||
top: 13px;
|
||||
font-size: 25px;
|
||||
color: black;
|
||||
transition: .1s linear;
|
||||
}
|
||||
|
||||
.racing-leaderboard-details-back i:hover {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.row {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-bottom: 1px solid #AFAFAF;
|
||||
font-size: 10px;
|
||||
left: 12.866px;
|
||||
}
|
||||
|
||||
.name {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 43%;
|
||||
line-height: 45px;
|
||||
}
|
||||
|
||||
.racing-leaderboard-details-block-list .time {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 42%;
|
||||
}
|
||||
|
||||
.score {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
#leaderboard-list-header {
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 70px;
|
||||
|
||||
}
|
||||
|
||||
.racing-leaderboards-button {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
width: 70%;
|
||||
height: 45.95px;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-radius: .4.595px;
|
||||
text-align: center;
|
||||
line-height: 45.95px;
|
||||
font-size: 25px;
|
||||
color: gray;
|
||||
transition: .2s linear;
|
||||
}
|
||||
|
||||
.racing-leaderboards-button i:hover {
|
||||
color: lightgray;
|
||||
font-size: 27px
|
||||
}
|
||||
|
||||
.no-leaderboard-message {
|
||||
position: relative;
|
||||
top: 45%;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.no-races-message {
|
||||
position: relative;
|
||||
top: 35%;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.race-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.race-container .container {
|
||||
height: 100vh;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.race-container .ui {
|
||||
position: absolute;
|
||||
width: 35vh;
|
||||
height: 20vh;
|
||||
bottom: 23vh;
|
||||
border-radius: 10px;
|
||||
left: 5vh;
|
||||
}
|
||||
|
||||
.race-container .editor {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.race-container #editor-racename {
|
||||
position: absolute;
|
||||
left: 2vh;
|
||||
top: 2vh;
|
||||
font-size: var(--main-font-size);
|
||||
color: white;
|
||||
text-shadow: 1px 1px 0px #000000;
|
||||
}
|
||||
|
||||
.race-container #editor-checkpoints {
|
||||
position: absolute;
|
||||
left: 2vh;
|
||||
top: 5vh;
|
||||
font-size: var(--main-font-size);
|
||||
color: white;
|
||||
text-shadow: 1px 1px 0px #000000;
|
||||
}
|
||||
|
||||
.race-container #editor-keys-tiredistance {
|
||||
position: absolute;
|
||||
left: 2vh;
|
||||
top: 8vh;
|
||||
font-size: var(--main-font-size);
|
||||
color: white;
|
||||
text-shadow: 1px 1px 0px #000000;
|
||||
}
|
||||
|
||||
.race-container #editor-keys-add {
|
||||
position: absolute;
|
||||
left: 2vh;
|
||||
top: 11vh;
|
||||
font-size: var(--main-font-size);
|
||||
color: white;
|
||||
text-shadow: 1px 1px 0px #000000;
|
||||
}
|
||||
|
||||
.race-container #editor-keys-delete {
|
||||
position: absolute;
|
||||
left: 2vh;
|
||||
top: 14vh;
|
||||
font-size: var(--main-font-size);
|
||||
color: white;
|
||||
text-shadow: 1px 1px 0px #000000;
|
||||
}
|
||||
|
||||
.race-container #editor-keys-cancel {
|
||||
position: absolute;
|
||||
left: 2vh;
|
||||
top: 17vh;
|
||||
font-size: var(--main-font-size);
|
||||
color: white;
|
||||
text-shadow: 1px 1px 0px #000000;
|
||||
}
|
||||
|
||||
.race-container #editor-keys-save {
|
||||
position: absolute;
|
||||
left: 2vh;
|
||||
top: 20vh;
|
||||
font-size: var(--main-font-size);
|
||||
color: white;
|
||||
text-shadow: 1px 1px 0px #000000;
|
||||
}
|
||||
|
||||
/* RACE */
|
||||
|
||||
.race-container .race {
|
||||
display: none;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
}
|
||||
|
||||
.race-container #race-racename {
|
||||
position: absolute;
|
||||
left: 2vh;
|
||||
top: 2vh;
|
||||
font-size: var(--main-font-size);
|
||||
color: white;
|
||||
text-shadow: 1px 1px 0px #000000;
|
||||
}
|
||||
|
||||
.race-container #race-checkpoints {
|
||||
position: absolute;
|
||||
left: 2vh;
|
||||
top: 5vh;
|
||||
font-size: var(--main-font-size);
|
||||
color: white;
|
||||
text-shadow: 1px 1px 0px #000000;
|
||||
}
|
||||
|
||||
.race-container #race-lap {
|
||||
position: absolute;
|
||||
left: 2vh;
|
||||
top: 8vh;
|
||||
font-size: var(--main-font-size);
|
||||
color: white;
|
||||
text-shadow: 1px 1px 0px #000000;
|
||||
}
|
||||
|
||||
.race-container #race-time {
|
||||
position: absolute;
|
||||
left: 2vh;
|
||||
top: 11vh;
|
||||
font-size: var(--main-font-size);
|
||||
color: white;
|
||||
text-shadow: 1px 1px 0px #000000;
|
||||
}
|
||||
|
||||
.race-container #race-besttime {
|
||||
position: absolute;
|
||||
left: 2vh;
|
||||
top: 14vh;
|
||||
font-size: var(--main-font-size);
|
||||
color: white;
|
||||
text-shadow: 1px 1px 0px #000000;
|
||||
}
|
||||
|
||||
.race-container #race-totaltime {
|
||||
position: absolute;
|
||||
left: 2vh;
|
||||
top: 17vh;
|
||||
font-size: var(--main-font-size);
|
||||
color: white;
|
||||
text-shadow: 1px 1px 0px #000000;
|
||||
}
|
||||
@@ -0,0 +1,370 @@
|
||||
.reminder-app {
|
||||
padding-top: 50px;
|
||||
background: var(--main-background-color-reminders);
|
||||
}
|
||||
|
||||
.reminder-app h1 {
|
||||
position: relative;
|
||||
top: 20px;
|
||||
font-size: 21px;
|
||||
font-weight: 600;
|
||||
width: 89%;
|
||||
height: 30px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.reminder-search {
|
||||
position: relative;
|
||||
top: 30px;
|
||||
width: 90% !important;
|
||||
background: var(--main-superficial-color) !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#reminders {
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
width: 91%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
top: 25px;
|
||||
max-height: 46.8%;
|
||||
margin: 0 auto;
|
||||
overflow: auto;
|
||||
background: var(--main-superficial-color);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#reminders::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reminder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: baseline;
|
||||
cursor: pointer;
|
||||
transition: transform 0.4s;
|
||||
padding: 5px;
|
||||
height: 56px;
|
||||
border-bottom: 1px solid var(--dark-border-color);
|
||||
}
|
||||
|
||||
.reminder:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.reminder i {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
bottom: 17px;
|
||||
color: var(--dark-item-icon);
|
||||
}
|
||||
|
||||
.reminder-time {
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
text-align: right;
|
||||
width: 90%;
|
||||
top: 10px;
|
||||
color: var(--dark-item-icon);
|
||||
}
|
||||
|
||||
.reminder-header {
|
||||
position: relative;
|
||||
width: 56%;
|
||||
right: 13px;
|
||||
padding: 10px;
|
||||
line-height: 0;
|
||||
top: 17px;
|
||||
font-size: 18px;
|
||||
color: var(--text-color);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#create-reminder {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
bottom: 0;
|
||||
padding: 0 15px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
background: var(--main-superficial-color);
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
#create-reminder p {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
color: var(--blue-text);
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#create-reminder i {
|
||||
color: var(--blue-text);
|
||||
font-size: 22px;
|
||||
position: relative;
|
||||
left: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#editCreateReminder {
|
||||
position: absolute;
|
||||
top: 120%;
|
||||
display: none;
|
||||
padding: 50px 15px;
|
||||
background: var(--main-background-color-reminders);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#editCreateReminder h4 {
|
||||
width: 65%;
|
||||
margin-left: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#editCreateReminder header {
|
||||
display: flex;
|
||||
font-size: 17px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#editCreateReminder header a {
|
||||
color: var(--blue-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.reminder-info {
|
||||
position: relative;
|
||||
top: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 9px;
|
||||
background: var(--main-superficial-color);
|
||||
}
|
||||
|
||||
.reminder-info {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.reminder-info input {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.reminder-info input:not(:last-child) {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
#reminder-widget-header a {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.reminder-grid {
|
||||
position: relative;
|
||||
top: 35px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
max-width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.reminder-square {
|
||||
width: 48%;
|
||||
height: 85px;
|
||||
border-radius: 9px;
|
||||
background: var(--main-superficial-color);
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reminder-icon {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
padding-top: 5px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.reminder-icon i {
|
||||
color: white;
|
||||
font-size: 15px
|
||||
}
|
||||
|
||||
.reminder-label {
|
||||
position: relative;
|
||||
font-size: 17px;
|
||||
text-align: left;
|
||||
right: 8px;
|
||||
top: 4px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.reminder-count {
|
||||
position: relative;
|
||||
bottom: 72px;
|
||||
left: 65px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
width: 80px;
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.phone-applications .reminder-widget {
|
||||
background: var(--calendar-widget);
|
||||
}
|
||||
|
||||
.reminder-widget-information {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.phone-applications .reminder-widget .reminder-widget-count {
|
||||
position: relative;
|
||||
bottom: 30px;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
right: 5px;
|
||||
color: var(--text-color)
|
||||
}
|
||||
|
||||
.phone-applications .reminder-widget .reminder-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-left: 25px;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.phone-applications .reminder-widget .reminder-icon i {
|
||||
background: #5cc465;
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.phone-applications .reminder-widget #reminder-widget-header a {
|
||||
color: #5cc465;
|
||||
width: 145px;
|
||||
float: left;
|
||||
position: relative;
|
||||
bottom: 7px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.phone-applications .reminder-widget .reminder-widget-list {
|
||||
position: relative;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
.phone-applications .reminder-widget .reminder-widget-list a {
|
||||
color: var(--text-color);
|
||||
height: 20px;
|
||||
margin-bottom: 5px;
|
||||
width: 145px;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.phone-applications .reminder-widget .reminder-widget-list p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#lock-screen-customize .reminder-widget-information {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.contenido .reminder-widget {
|
||||
background: var(--calendar-widget);
|
||||
}
|
||||
|
||||
.reminder-widget-information {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.contenido .reminder-widget .reminder-widget-count {
|
||||
position: relative;
|
||||
bottom: 31px;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
right: 5px;
|
||||
color: var(--text-color)
|
||||
}
|
||||
|
||||
.contenido .reminder-widget .reminder-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-left: 25px;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.contenido .reminder-widget .reminder-icon i {
|
||||
background: #5cc465;
|
||||
padding: 11px;
|
||||
border-radius: 50%;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.contenido .reminder-widget #reminder-widget-header a {
|
||||
color: #5cc465;
|
||||
width: 158px;
|
||||
height: 20px;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
bottom: 3px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.contenido .reminder-widget .reminder-widget-list {
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.contenido .reminder-widget .reminder-widget-list a {
|
||||
color: var(--text-color);
|
||||
height: 20px;
|
||||
margin-bottom: 5px;
|
||||
width: 145px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.contenido .reminder-widget .reminder-widget-list p {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');
|
||||
|
||||
.rentel-app {
|
||||
background: var(--container-dark-background-color);
|
||||
}
|
||||
|
||||
.rentel-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 13%;
|
||||
color: black;
|
||||
border-bottom: 2px solid var(--second-border-color);
|
||||
display: flex;
|
||||
background: var(--main-background-color);
|
||||
justify-content: center; /* Centrar horizontalmente */
|
||||
align-items: center; /* Centrar verticalmente */
|
||||
}
|
||||
|
||||
.rentel-header > p {
|
||||
position: relative;
|
||||
top: 23px;
|
||||
margin: 0; /* Asegura que no haya margen interior */
|
||||
font-size: 30px;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.rentel-items {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 86%;
|
||||
top: 13%;
|
||||
padding-top: 20px;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.rentelapp {
|
||||
display: flex;
|
||||
align-items: center; /* Para centrar verticalmente */
|
||||
justify-content: space-between; /* Para colocar la imagen a la derecha */
|
||||
position: relative;
|
||||
width: 88%;
|
||||
background: var(--main-background-color);
|
||||
border-radius: 8px;
|
||||
height: 22.3%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0px 0px 7px 4px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rentelapp h1 {
|
||||
position: absolute;
|
||||
font-size: 90px;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
background: linear-gradient(to right, rgba(169, 169, 169, 0.3), transparent);
|
||||
-webkit-background-clip: text; /* Para aplicar el gradiente solo al texto */
|
||||
color: transparent; /* Hacemos el texto transparente para mostrar solo el gradiente */
|
||||
}
|
||||
|
||||
.rentelapp img {
|
||||
height: auto; /* Ajusta según tu diseño */
|
||||
max-height: 110%; /* Ajusta según tu diseño */
|
||||
margin-bottom: 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.rentelapp-title {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
font-size: 18px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.rentelapp-price {
|
||||
position: relative;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
font-size: 18px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.rentelapp-price .per-day-link {
|
||||
position: relative;
|
||||
top: 7px;
|
||||
color: red;
|
||||
font-size: 0.8em; /* Tamaño más pequeño para "per day" */
|
||||
vertical-align: super; /* Alineación superior para posicionar "per day" arriba */
|
||||
text-decoration: none; /* Sin subrayado */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.rentelapp-purchase {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
bottom: 20px;
|
||||
background: linear-gradient(#ff8080, #ff4040); /* Degradado de rojo claro a oscuro */
|
||||
border: none;
|
||||
border-radius: 15px; /* Border radius para esquinas redondeadas */
|
||||
padding: 4px 20px; /* Espaciado interno para el botón */
|
||||
cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
|
||||
transition: background 0.3s ease-in-out;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.rentelapp-purchase:hover {
|
||||
background: linear-gradient(#ff4040, #ff0000); /* Cambio de color al pasar el cursor */
|
||||
}
|
||||
@@ -0,0 +1,941 @@
|
||||
.settings-app {
|
||||
position: relative;
|
||||
width: 100.5%;
|
||||
padding-left: 8px;
|
||||
padding-right: 10px;
|
||||
background: var(--background-settings);
|
||||
}
|
||||
|
||||
.settings-app-header {
|
||||
padding-top: 7rem;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.settings-tab-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
.settings-player-name {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
width: 240px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.settings-app-tab-information {
|
||||
height: 74%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.settings-tab {
|
||||
background: var(--background-settings-tabs);
|
||||
border-radius: 12px;
|
||||
padding: 4px 12px;
|
||||
margin-bottom: 3rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.settings-tab:is(:empty) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.settings-tab .settings-app-tab {
|
||||
border-bottom: 1px solid var(--border-settings);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.settings-tab .settings-app-tab:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.settings-app-tab .fa-copy {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.settings-app-tab {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 1rem 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#settings-display-appearance .appearance-skeleton {
|
||||
width: 12.5rem;
|
||||
}
|
||||
|
||||
.settings-security-password {
|
||||
outline: none;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.fa-times-circle:hover {
|
||||
color: #e84118;
|
||||
}
|
||||
|
||||
.call-image {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.settings-app-tab .phone-settings-image-source {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
}
|
||||
|
||||
.settings-tab-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
background: #1e7ee5;
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
font-size: 19px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.settings-tab-icon > img {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.settings-tab-description {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.settings-tab-description a {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.nomargin {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nomargin:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
width: 80%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.nomargin:last-child:after {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.phone-add-contact-image {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.phone-add-contact-image-source {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.settings-page {
|
||||
display: none;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
transform: translateX(100%);
|
||||
width: 100%;
|
||||
top: 0;
|
||||
right: 2px;
|
||||
background: var(--container-dark-background-color);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.take-profile-photo {
|
||||
z-index: 100;
|
||||
font-size: 1.8rem;
|
||||
color: black;
|
||||
transition: 100ms all ease-in-out;
|
||||
}
|
||||
|
||||
.take-profile-photo:hover {
|
||||
transition: 100ms all ease-in-out;
|
||||
color: var(--border-color);
|
||||
}
|
||||
|
||||
.background-options {
|
||||
position: absolute;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
top: 120px;
|
||||
}
|
||||
|
||||
.background-container {
|
||||
width: 100%;
|
||||
height: 76%;
|
||||
padding: 8px 8px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
place-items: center;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.quick-background {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.quick-background img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.settings-page {
|
||||
display: none;
|
||||
position: absolute;
|
||||
transform: translateX(100%);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
background: var(--container-dark-background-color);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.background-option-icon {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 56px;
|
||||
text-align: center;
|
||||
line-height: 65px;
|
||||
font-size: 22px;
|
||||
color: #fbc531;
|
||||
}
|
||||
|
||||
.background-option-title {
|
||||
position: absolute;
|
||||
left: 56px;
|
||||
top: 14px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
color: #030303;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.background-option-description {
|
||||
position: absolute;
|
||||
left: 56px;
|
||||
top: 34px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
color: #030303b9;
|
||||
font-size: 1.1px;
|
||||
}
|
||||
|
||||
.background-option-current {
|
||||
position: absolute;
|
||||
right: 28px;
|
||||
top: 23px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
color: #030303b9;
|
||||
}
|
||||
|
||||
.background-buttons {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 46px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.background-button {
|
||||
position: relative;
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
transition: 0.05s;
|
||||
border-top: 2px solid #e8421800;
|
||||
}
|
||||
|
||||
.background-button:hover {
|
||||
background-color: #dadbdb;
|
||||
border-top: 2px solid #e84118;
|
||||
}
|
||||
|
||||
.background-custom {
|
||||
display: none;
|
||||
background: var(--container-dark-background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
width: 80%;
|
||||
height: fit-content;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow: hidden;
|
||||
z-index: 99999999;
|
||||
}
|
||||
|
||||
.background-custom-title {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
padding: 16px 0px 8px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.background-custom-input-fields {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 90%;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translate(calc(-50% - 12px), 0px);
|
||||
margin: 12px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.custom-background-input {
|
||||
width: 100%;
|
||||
margin-right: 8px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--dark-border-color);
|
||||
outline: none;
|
||||
height: 35px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.custom-background-input::placeholder {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.background-custom-buttons {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-background-button {
|
||||
position: relative;
|
||||
float: left;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
line-height: 45px;
|
||||
font-size: 17px;
|
||||
border-top: 1px solid var(--border-light-color);
|
||||
color: #087fff;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: 100ms all ease-in-out;
|
||||
}
|
||||
|
||||
#cancel-custom-background a {
|
||||
color: var(--blue-text);
|
||||
}
|
||||
|
||||
#cancel-custom-background {
|
||||
border-right: 1px solid var(--border-light-color);
|
||||
}
|
||||
|
||||
.custom-background-button:hover {
|
||||
transition: 100ms all ease-in-out;
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
|
||||
.phone-settings-image-source {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.profilepicture-options {
|
||||
position: absolute;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
top: 120px;
|
||||
}
|
||||
|
||||
.profilepicture-option-icon {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 56px;
|
||||
text-align: center;
|
||||
line-height: 65px;
|
||||
font-size: 22px;
|
||||
color: #fbc531;
|
||||
}
|
||||
|
||||
.profilepicture-option-title {
|
||||
position: absolute;
|
||||
left: 56px;
|
||||
top: 14px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
color: #030303;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.profilepicture-option-description {
|
||||
position: absolute;
|
||||
left: 56px;
|
||||
top: 34px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
color: #030303b9;
|
||||
font-size: 1.1px;
|
||||
}
|
||||
|
||||
.profilepicture-option-current {
|
||||
position: absolute;
|
||||
right: 28px;
|
||||
top: 23px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
color: #030303b9;
|
||||
}
|
||||
|
||||
.profilepicture-buttons {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 46px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.profilepicture-button {
|
||||
position: relative;
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
transition: 0.05s;
|
||||
border-top: 2px solid #e8421800;
|
||||
}
|
||||
|
||||
.profilepicture-button:hover {
|
||||
background-color: #dadbdb;
|
||||
border-top: 2px solid #e84118;
|
||||
}
|
||||
|
||||
.profilepicture-custom {
|
||||
display: none;
|
||||
background: var(--container-dark-background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
width: 80%;
|
||||
height: fit-content;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow: hidden;
|
||||
z-index: 99999999;
|
||||
}
|
||||
|
||||
.profilepicture-custom-title {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
padding: 16px 0px 8px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.profilepicture-custom-input-fields {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 90%;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translate(calc(-50% - 12px), 0px);
|
||||
margin: 12px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.custom-profilepicture-input {
|
||||
width: 100%;
|
||||
margin-right: 8px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--dark-border-color);
|
||||
outline: none;
|
||||
height: 35px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.custom-profilepicture-input::placeholder {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.profilepicture-custom-buttons {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-profilepicture-button a {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.custom-profilepicture-button {
|
||||
position: relative;
|
||||
float: left;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
font-size: 17px;
|
||||
border-top: 1px solid var(--border-light-color);
|
||||
color: #087fff;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: 100ms all ease-in-out;
|
||||
}
|
||||
|
||||
.custom-profilepicture-button:hover {
|
||||
transition: 100ms all ease-in-out;
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
|
||||
#cancel-custom-profilepicture a {
|
||||
color: var(--blue-text) !important;
|
||||
}
|
||||
|
||||
.custom-profilepicture-button p {
|
||||
position: relative;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
/* The switch - the box around the slider */
|
||||
.switch {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
top: 50%;
|
||||
right: 0px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* Hide default HTML checkbox */
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.settings-tab-texts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
width: 230px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.settings-app-tab .fa-chevron-right {
|
||||
padding-right: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.settings-app-tab .slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--dark-background-color);
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.settings-app-tab .slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
background-color: white;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #4bd663;
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px #4bd663;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
-ms-transform: translateX(26px);
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
/* Rounded sliders */
|
||||
.slider.round {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
margin-bottom: 2px;
|
||||
margin-left: 2px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.ark {
|
||||
width: 90px;
|
||||
height: 200px;
|
||||
background-size: cover;
|
||||
margin-left: 8px;
|
||||
float: left;
|
||||
border-radius: 10px;
|
||||
margin-right: 3px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.settings-details-tab::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.settings-page {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.settings-display-tab .settings-tab {
|
||||
width: 98%;
|
||||
margin-top: 10px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.password-circle {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #141414;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.password-button {
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--keyboard-key) !important;
|
||||
border-radius: 5px;
|
||||
color: var(--text-color);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
box-shadow: rgba(17, 17, 26, 0.2) 0px 1px 0px;
|
||||
}
|
||||
|
||||
.password-delete-icon {
|
||||
padding: 10 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 5px;
|
||||
background: var(--keyboard-delete) !important;
|
||||
display: flex !important;
|
||||
cursor: pointer;
|
||||
color: var(--text-color);
|
||||
box-shadow: rgba(17, 17, 26, 0.2) 0px 1px 0px;
|
||||
}
|
||||
|
||||
.password-button-container {
|
||||
height: 36%;
|
||||
bottom: 0px;
|
||||
padding: 29px 11px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
width: 100%;
|
||||
gap: 9px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.password-button:last-of-type {
|
||||
grid-column: 2 / 2;
|
||||
}
|
||||
|
||||
.password-circle {
|
||||
border: 1px solid var(--main-background-color-inver);
|
||||
}
|
||||
|
||||
.password-circle.entered {
|
||||
background: var(--main-background-color-inver);
|
||||
}
|
||||
|
||||
.custom-profilename-input {
|
||||
height: 45px;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
background-color: var(--dark-background-color);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.settings-profilepicture-tab {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.settings-app .global-app-header {
|
||||
font-size: 18px;
|
||||
left: 2px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#save-profilepicture {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
left: -35px;
|
||||
width: 75px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#cancel-settings-submenu {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings-profilepicture-tab .settings-player-name {
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.settings-profilepicture-tab .overflow-y {
|
||||
width: 96%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.settings-profilepicture-tab .overflow-y a {
|
||||
position: relative;
|
||||
right: 9px;
|
||||
}
|
||||
|
||||
.settings-background-tab .settings-app-tab {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#settings-app-notifications-container {
|
||||
position: relative;
|
||||
height: 58%;
|
||||
width: 99%;
|
||||
left: 6px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
#settings-app-notifications-container img {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.notification-option {
|
||||
height: 55px;
|
||||
border-bottom: 1px solid var(--border-settings);
|
||||
}
|
||||
|
||||
#enter-new-password header {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.password-circle-container {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#reset-password {
|
||||
position: relative;
|
||||
left: 10px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
#settings-app-notifications-type .notification-type-image {
|
||||
width: 12rem;
|
||||
height: 15rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#settings-app-notifications-type
|
||||
.notification-type-container:has(.notification-type-tick:checked)
|
||||
.notification-type-image {
|
||||
filter: invert(54%) sepia(69%) saturate(1940%) hue-rotate(177deg)
|
||||
brightness(93%) contrast(83%);
|
||||
}
|
||||
|
||||
.notification-type-tick {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.notification-type-tick + label {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.notification-type-tick + label span {
|
||||
display: inline-block;
|
||||
padding: 0.3rem 1.5rem;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border-radius: 1.5rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.notification-type-tick:checked + label span {
|
||||
background-color: #3498db;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.notification-type-tick:checked + label span img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#settings-background-container {
|
||||
padding: 2rem;
|
||||
border-radius: 15px;
|
||||
background-color: var(--background-settings-tabs) !important;
|
||||
}
|
||||
|
||||
.background-swiper {
|
||||
padding-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
#background-list {
|
||||
height: 36rem !important;
|
||||
}
|
||||
|
||||
#background-list .swiper-slide figure {
|
||||
position: relative;
|
||||
width: 16rem;
|
||||
height: 34rem;
|
||||
}
|
||||
|
||||
#background-list img {
|
||||
object-fit: fill;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
#background-list .swiper-slide figure .lock-screen-top .date {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#background-list .swiper-slide figure .lock-screen-top .time {
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
#background-tab-info {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#background-tab-info header {
|
||||
margin-top: 10px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
#background-tab-info p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.background-figure-applications div {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 0.7rem;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
#background-list .swiper-slide .lock-screen-top {
|
||||
padding-top: 0rem;
|
||||
}
|
||||
|
||||
#background-list .swiper-slide .time {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#background-swiper-header {
|
||||
text-align: center;
|
||||
padding: 1rem 0rem;
|
||||
color: #777;
|
||||
transition: all 0.4s;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#background-swiper-header.change-background {
|
||||
position: relative;
|
||||
bottom: 9px;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background-color: var(--dark-background-color);
|
||||
border-radius: 12px;
|
||||
color: #087fff;
|
||||
width: fit-content;
|
||||
margin: 1rem auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.background-swiper .swiper-pagination-bullet {
|
||||
background-color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
#background-swiper-footer {
|
||||
width: max-content;
|
||||
margin: 0 auto;
|
||||
margin-top: 1rem;
|
||||
padding: 0.6rem 1.4rem;
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
background-color: #087fff;
|
||||
}
|
||||
|
||||
.settings-image-selected img {
|
||||
object-fit: cover;
|
||||
left: -23px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,131 @@
|
||||
.state-header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
top: 2.8%;
|
||||
color: var(--text-color);
|
||||
font-size: 19px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
width: 92%;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.state-header>p {
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.state-header>span {
|
||||
position: absolute;
|
||||
top: 78px;
|
||||
font-size: 14px;
|
||||
height: 20px;
|
||||
color: gray
|
||||
}
|
||||
|
||||
.state-app article {
|
||||
position: relative;
|
||||
top: 15%;
|
||||
width: 93%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.state-list {
|
||||
position: absolute;
|
||||
width: 93%;
|
||||
height: 80%;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 20%;
|
||||
padding-bottom: 30px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.state-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.state-list-header {
|
||||
position:relative;
|
||||
font-size: 15px;
|
||||
padding: 12px;
|
||||
color: #fff;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
background-color: rgb(0, 204, 102);
|
||||
}
|
||||
|
||||
.lawyer-list {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 65px;
|
||||
background: var(--container-dark-background-color);
|
||||
border-bottom: 1px solid var(--second-border-color);
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
.lawyer-list-firstletter {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background-color: rgb(42, 137, 214);
|
||||
text-align: center;
|
||||
left: 10px;
|
||||
line-height: 36px;
|
||||
border-radius: 50%;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.lawyer-list-fullname {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 55px;
|
||||
font-size: 17px;
|
||||
max-width: 140px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.no-state {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 15px;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.lawyer-list-call {
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 32%;
|
||||
transform: translateY(-50%);
|
||||
right: 20px;
|
||||
font-size: 20px;
|
||||
color: gray;
|
||||
transform: rotate(90deg);
|
||||
transition: .12s ease-in-out;
|
||||
}
|
||||
|
||||
.lawyer-list-call:hover {
|
||||
color: rgb(49, 214, 60);
|
||||
opacity: .8;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,791 @@
|
||||
.store-screen {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
padding: 72px 17px;
|
||||
}
|
||||
|
||||
#store-footer-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
height: 88px;
|
||||
display: flex;
|
||||
border-top: 1px solid var(--dark-input-color);
|
||||
background: var(--container-dark-background-color);
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
#store-app-today-window {
|
||||
position: relative;
|
||||
top: 7%;
|
||||
}
|
||||
|
||||
#store-app-today-window #store-app-date {
|
||||
font-size: 15px !important;
|
||||
text-transform: uppercase;
|
||||
width: 96%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#store-app-today-window #store-app-date-today {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
font-size: 27px !important;
|
||||
width: 96%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#store-app-date-apps {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
font-size: 27px !important;
|
||||
}
|
||||
|
||||
.store-footer {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #767676
|
||||
}
|
||||
|
||||
.store-footer-img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.store-footer a {
|
||||
font-size: 15px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.store-app-window {
|
||||
position: absolute;
|
||||
top: 7%;
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
#store-app-search-window {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#store-app-today-window img {
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.store-app-pp {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.app-store-search-rating {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#store-app-search-container {
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
width: 100%;
|
||||
height: 87%;
|
||||
padding-bottom: 30px;
|
||||
right: 0;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
overflow: auto;
|
||||
background: var(--main-background-color);
|
||||
}
|
||||
|
||||
#store-app-search-container .store-app-games-take {
|
||||
position: relative;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
#store-app-search-container .store-app-games-content {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
|
||||
}
|
||||
|
||||
#store-app-search-container .store-app-games-take {
|
||||
position: relative;
|
||||
top: -25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#store-app-search-container .jq-star {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.store-search-box {
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
background: var(--second-border-color);
|
||||
padding: 7px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.store-search-box i {
|
||||
margin-top: 5px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
#storeapp-search-input {
|
||||
position: relative;
|
||||
right: 5px;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
#store-app-games-window .store-app-pp {
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#store-app-apps-window .store-app-pp {
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#store-app-date-games {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
font-size: 27px !important;
|
||||
}
|
||||
|
||||
.store-app-games-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: cover;
|
||||
border-radius: 12.5px;
|
||||
}
|
||||
|
||||
#store-app-games-content-container,
|
||||
#store-app-apps-content-container {
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
width: 94%;
|
||||
height: 91%;
|
||||
padding-bottom: 10px;
|
||||
right: 12px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#store-app-openedapp-general {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding-bottom: 15px;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--border-light-color);
|
||||
}
|
||||
|
||||
#store-app-openedapp-description-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
top: 10px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/* Alinea los elementos en una fila */
|
||||
justify-content: center;
|
||||
/* Centra los elementos horizontalmente */
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Ajusta el tamaño de cada box */
|
||||
.store-app-openedapp-description {
|
||||
padding: 10px;
|
||||
/* Ajusta según sea necesario */
|
||||
}
|
||||
|
||||
.custom-line {
|
||||
position: relative;
|
||||
top: 20px;
|
||||
background: var(--border-light-color) !important;
|
||||
height: 40px !important;
|
||||
/* Ajusta según sea necesario */
|
||||
margin: 0 10px;
|
||||
/* Espacio entre las cajas */
|
||||
}
|
||||
|
||||
.store-app-openedapp-description-header {
|
||||
color: #767676;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.store-app-openedapp-description-star {
|
||||
font-size: 16px;
|
||||
color: #767676;
|
||||
}
|
||||
|
||||
.store-app-openedapp-description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
.custom-line {
|
||||
margin: 0 5px;
|
||||
width: 1px;
|
||||
height: 45.95px;
|
||||
background-color: #d8d8d8;
|
||||
}
|
||||
|
||||
#store-app-openedapp-infos {
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#store-app-center {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #767676;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.store-app-score a {
|
||||
position: relative;
|
||||
bottom: 5px;
|
||||
left: 20px;
|
||||
font-size: 14px;
|
||||
color: #767676;
|
||||
}
|
||||
|
||||
.store-app-games-content {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
|
||||
}
|
||||
|
||||
.store-app-games-content:not(:last-child) {
|
||||
border-bottom: 1px solid var(--dark-input-color);
|
||||
}
|
||||
|
||||
.store-app-games-content img {
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
border: 1px solid var(--second-border-color);
|
||||
}
|
||||
|
||||
.store-app-games-infos {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 13px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.store-app-games-header {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.store-app-games-head {
|
||||
font-size: 14px;
|
||||
color: gray;
|
||||
width: 190px;
|
||||
margin-top: 4px;
|
||||
height: 20px;
|
||||
white-space: nowrap;
|
||||
/* Evita que el texto se rompa en múltiples lÃÂÂneas */
|
||||
overflow: hidden;
|
||||
/* Oculta el texto que excede el ancho */
|
||||
text-overflow: ellipsis;
|
||||
/* Muestra tres puntos (...) cuando el texto excede el ancho */
|
||||
}
|
||||
|
||||
|
||||
.store-app-games-take {
|
||||
position: relative;
|
||||
background-color: var(--second-border-color);
|
||||
padding: 5px;
|
||||
color: #0065B4;
|
||||
text-align: center;
|
||||
border-radius: 15px;
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
left: 200px;
|
||||
top: -30px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.openedapp-take {
|
||||
color: #F0F0F8;
|
||||
background-color: #0065B4;
|
||||
}
|
||||
|
||||
.store-app-apps-take {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.apps-take {
|
||||
position: relative;
|
||||
margin-left: 5px;
|
||||
bottom: 7px;
|
||||
}
|
||||
|
||||
#store-app-today-content-container {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
width: 100%;
|
||||
left: 22px;
|
||||
height: 87%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#store-app-openedapp-content-container {
|
||||
/* position: relative;
|
||||
top: 10px;
|
||||
max-width: 100%;
|
||||
height: 100%; */
|
||||
}
|
||||
|
||||
#store-app-openedapp-content-container .store-app-today-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#store-app-today-content-container::-webkit-scrollbar,
|
||||
#store-app-games-content-container::-webkit-scrollbar,
|
||||
#store-app-apps-content-container::-webkit-scrollbar,
|
||||
#store-app-openedapp-general::-webkit-scrollbar,
|
||||
#store-app-openedapp-content-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.store-app-today-content {
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-size: cover;
|
||||
border-radius: 20px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex: none;
|
||||
flex-direction: column;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.store-app-today-header {
|
||||
color: lightgray;
|
||||
font-size: 19px;
|
||||
opacity: 0.7;
|
||||
font-weight: bold;
|
||||
/* Fuente en negrita */
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||||
/* Sombreado del texto */
|
||||
}
|
||||
|
||||
.store-app-today-head {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
/* Fuente en negrita */
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||||
/* Sombreado del texto */
|
||||
}
|
||||
|
||||
.store-app-today-footer {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
width: 92%;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||||
/* Sombreado del texto */
|
||||
}
|
||||
|
||||
|
||||
.download-password-container {
|
||||
display: none;
|
||||
/* position: absolute; */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.download-password {
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
height: 156.23px;
|
||||
background-color: rgb(248, 248, 248);
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#download-password-title {
|
||||
color: black;
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
line-height: 37px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#download-password-disclaimer {
|
||||
color: black;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
font-size: 92px;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.download-password-input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 33px;
|
||||
background-color: rgb(224, 224, 224);
|
||||
border: none;
|
||||
outline: none;
|
||||
top: 65px;
|
||||
border-bottom: 2px solid rgb(209, 209, 209);
|
||||
text-align: center;
|
||||
transition: .2s ease-in-out;
|
||||
}
|
||||
|
||||
.download-password-input:focus {
|
||||
border-bottom: 2px solid rgb(245, 155, 37);
|
||||
}
|
||||
|
||||
.download-password-input:valid {
|
||||
border-bottom: 2px solid rgb(19, 179, 27);
|
||||
}
|
||||
|
||||
.download-progressbar {
|
||||
display: none;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
top: 4px;
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
border-top-right-radius: 7px;
|
||||
border-bottom-right-radius: 7px;
|
||||
}
|
||||
|
||||
.download-progressbar-fill {
|
||||
position: absolute;
|
||||
width: 0%;
|
||||
background-color: #0065B4;
|
||||
border-radius: 5px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.download-password-accept {
|
||||
position: absolute;
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
background-color: rgb(192, 192, 192);
|
||||
bottom: 17px;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 48px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
transition: 0.1s linear;
|
||||
}
|
||||
|
||||
.download-password-deny {
|
||||
position: absolute;
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
background-color: rgb(192, 192, 192);
|
||||
bottom: 17px;
|
||||
margin: 0 auto;
|
||||
left: 48px;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
font-size: 19px;
|
||||
transition: 0.1s linear;
|
||||
}
|
||||
|
||||
.download-password-accept>i {
|
||||
line-height: 37px;
|
||||
}
|
||||
|
||||
.download-password-deny>i {
|
||||
line-height: 37px;
|
||||
}
|
||||
|
||||
.download-password-accept:hover {
|
||||
color: rgb(114, 114, 114);
|
||||
}
|
||||
|
||||
.download-password-deny:hover {
|
||||
color: rgb(114, 114, 114);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 700px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.wrapper h1 {
|
||||
margin-bottom: 75px;
|
||||
font-size: 56px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.rating-holder {
|
||||
display: inline-block;
|
||||
padding: 0.625em 1.875em;
|
||||
margin: 0 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 1.5625em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.c-rating button {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
border: 0;
|
||||
text-indent: -9999px;
|
||||
outline: none;
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
cursor: pointer;
|
||||
transition: background 0.25s ease;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="0"] button:nth-child(-n+0) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="0.25"] button:nth-child(-n+1) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="0.25"] button:nth-child(1) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M196.208 415.2v-224.8l-139.504 20.272 100.944 98.384-23.84 138.928z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="0.5"] button:nth-child(-n+1) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="0.5"] button:nth-child(1) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M258.672 64l-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6v-318.4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="0.75"] button:nth-child(-n+1) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="0.75"] button:nth-child(1) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M321.616 190.496l-0.656-0.096-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 63.024 33.136z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="1"] button:nth-child(-n+1) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="1.25"] button:nth-child(-n+2) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="1.25"] button:nth-child(2) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M196.208 415.2v-224.8l-139.504 20.272 100.944 98.384-23.84 138.928z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="1.5"] button:nth-child(-n+2) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="1.5"] button:nth-child(2) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M258.672 64l-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6v-318.4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="1.75"] button:nth-child(-n+2) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="1.75"] button:nth-child(2) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M321.616 190.496l-0.656-0.096-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 63.024 33.136z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="2"] button:nth-child(-n+2) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="2.25"] button:nth-child(-n+3) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="2.25"] button:nth-child(3) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M196.208 415.2v-224.8l-139.504 20.272 100.944 98.384-23.84 138.928z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="2.5"] button:nth-child(-n+3) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="2.5"] button:nth-child(3) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M258.672 64l-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6v-318.4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="2.75"] button:nth-child(-n+3) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="2.75"] button:nth-child(3) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M321.616 190.496l-0.656-0.096-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 63.024 33.136z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="3"] button:nth-child(-n+3) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="3.25"] button:nth-child(-n+4) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="3.25"] button:nth-child(4) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M196.208 415.2v-224.8l-139.504 20.272 100.944 98.384-23.84 138.928z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="3.5"] button:nth-child(-n+4) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="3.5"] button:nth-child(4) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M258.672 64l-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6v-318.4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="3.75"] button:nth-child(-n+4) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="3.75"] button:nth-child(4) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M321.616 190.496l-0.656-0.096-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 63.024 33.136z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="4"] button:nth-child(-n+4) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="4.25"] button:nth-child(-n+5) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="4.25"] button:nth-child(5) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M196.208 415.2v-224.8l-139.504 20.272 100.944 98.384-23.84 138.928z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="4.5"] button:nth-child(-n+5) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="4.5"] button:nth-child(5) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M258.672 64l-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6v-318.4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="4.75"] button:nth-child(-n+5) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="4.75"] button:nth-child(5) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M321.616 190.496l-0.656-0.096-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 63.024 33.136z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat, url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating[data-rating-value="5"] button:nth-child(-n+5) {
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.c-rating--small {
|
||||
font-size: 50%;
|
||||
}
|
||||
|
||||
.c-rating--big {
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
#store-app-opened-app-give-rating {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 8px 0px;
|
||||
}
|
||||
|
||||
#store-app-openedapp-window {
|
||||
position: relative;
|
||||
top: 0;
|
||||
background: var(--main-background-color);
|
||||
}
|
||||
|
||||
#store-app-openedapp-window .cursor-pointer {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.store-back {
|
||||
font-size: 17px;
|
||||
color: var(--blue-text)
|
||||
}
|
||||
|
||||
.app-store-rating {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.store-swiper {
|
||||
top: 10px;
|
||||
height: 70%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.store-swiper .swiper-slide {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 12px;
|
||||
}
|
||||
@@ -0,0 +1,729 @@
|
||||
#tiktok-main-container,
|
||||
#tiktok-register-container,
|
||||
#tiktok-login-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--main-background-color);
|
||||
}
|
||||
|
||||
.tiktok-app .swiper-wrapper {
|
||||
background: #161823;
|
||||
}
|
||||
|
||||
.swiper-wrapper img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#tiktok-container {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
background: var(--main-background-color);
|
||||
}
|
||||
|
||||
#tiktok-footer-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 11%;
|
||||
bottom: 0;
|
||||
background: var(--main-background-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
|
||||
rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
|
||||
}
|
||||
|
||||
.gallery-videos::before {
|
||||
position: relative;
|
||||
top: 30vh !important;
|
||||
}
|
||||
|
||||
#tiktok-footer-container img {
|
||||
position: relative;
|
||||
width: 55px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tiktok-forgot-ps {
|
||||
color: gray !important;
|
||||
}
|
||||
|
||||
.tiktok-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
padding: 15px; /* Agrega espacio entre los elementos */
|
||||
margin: 0 10px; /* Ajusta el margen horizontal para aumentar la distancia entre los elementos */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tiktok-footer p {
|
||||
margin-top: 4px; /* Agrega margen superior para separar el ÃÂÂÂcono del texto */
|
||||
}
|
||||
|
||||
#tiktok-home p {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
#tiktok-new,
|
||||
#tiktok-profile {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#videos {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#videos #video-comment-container {
|
||||
position: absolute;
|
||||
z-index: 12;
|
||||
display: none;
|
||||
background: var(--main-background-color);
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
bottom: -100%;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#videos #video-comment-container #video-comments {
|
||||
width: 100%;
|
||||
height: 68%;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
margin: 35px 15px;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#videos #video-comment-container #video-comments::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#videos #video-comment-container #video-comments .video-comment {
|
||||
width: 90%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#video-comment-container h7 {
|
||||
position: relative;
|
||||
top: 15px;
|
||||
font-weight: bold;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.video-comment .video-comment-content {
|
||||
margin-top: 7px;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.tiktok-video-uploaded {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.video-comment-content a {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.video-comment-content p {
|
||||
font-size: 16px !important;
|
||||
font-weight: 100 !important;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
#selfProfile h5 {
|
||||
position: relative;
|
||||
top: 38px !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#video-comment .w-24 {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#video-comment .emojionearea-editor {
|
||||
width: 290px;
|
||||
}
|
||||
|
||||
.video-comment .video-comment-content p {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#video-comment .emojionearea {
|
||||
height: 36px !important;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.video-comment-like {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#videos #video-comment-container #video-comments .video-comment img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#video-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* scroll-snap-type: y mandatory; */
|
||||
}
|
||||
|
||||
#video-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tiktok-videoContent {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.tiktok-video {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.tiktok-loading {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.tiktok-videoActions {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
bottom: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.tiktok-videoProfile img {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tiktok-videoLike,
|
||||
.tiktok-videoComment {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#tiktok-register-container-header {
|
||||
position: absolute;
|
||||
top: 58px;
|
||||
font-size: 19px;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#tiktok-register-container i {
|
||||
margin-left: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#tiktok-register-container footer {
|
||||
position: relative;
|
||||
top: 90%;
|
||||
border-top: 1px solid var(--second-border-color);
|
||||
height: 88px;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
#tiktok-register-page2 p,
|
||||
#tiktok-register-page3 p,
|
||||
#tiktok-register-page4 p,
|
||||
#tiktok-register-page5 p,
|
||||
#tiktok-register-page6 p {
|
||||
margin-top: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tiktok-login-button {
|
||||
position: relative;
|
||||
top: 12px;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
height: 35px;
|
||||
pointer-events: none;
|
||||
background-color: rgba(254, 43, 84, 1) !important;
|
||||
}
|
||||
|
||||
.tiktok-container-question-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 15%;
|
||||
display: none;
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
.tiktok-container-question-container h5 {
|
||||
font-weight: bold;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
#tiktok-login-form a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#tiktok-login-container footer {
|
||||
position: relative;
|
||||
top: 90%;
|
||||
border-top: 1px solid lightgray;
|
||||
height: 88px;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
#tiktok-forgot-password-accounts {
|
||||
position: relative;
|
||||
top: 35px;
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#tiktok-forgot-password-accounts article {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.tiktok-container-question-container p {
|
||||
color: gray;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tiktok-container-question-container input {
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: gray;
|
||||
border-bottom: 1px solid gray;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#tiktok-forgot-password-screen .discord-register-screen-header {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tiktok-container-question-container button {
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
pointer-events: none;
|
||||
background-color: rgba(254, 43, 84, 0.5);
|
||||
}
|
||||
|
||||
#tiktok-container #profile {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translateX(100%);
|
||||
display: none;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background: var(--main-background-color);
|
||||
padding-top: 10rem;
|
||||
}
|
||||
|
||||
#profile-other {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
transform: translateX(100%);
|
||||
display: none;
|
||||
align-items: center;
|
||||
background: var(--main-background-color);
|
||||
flex-direction: column;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#profile-other #tiktok-follow {
|
||||
border: none;
|
||||
background-color: #fe2c55;
|
||||
color: white;
|
||||
width: 50%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#profile #tiktok-profile-picture {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
margin-top: -15px;
|
||||
border-radius: 50%;
|
||||
background-image: url("../img/default.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#profile-other #tiktok-profile-picture {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
margin-top: 70px;
|
||||
border-radius: 50%;
|
||||
background-image: url("../img/default.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#tiktok-profile-changePicture {
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
color: aqua;
|
||||
left: 75%;
|
||||
top: 80%;
|
||||
}
|
||||
|
||||
#tiktok-profile-infos {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
#tiktok-profile-infos p {
|
||||
color: gray;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#tiktok-edit {
|
||||
background-color: rgba(254, 43, 84, 1) !important;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#tiktok-profile-name {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tiktok-profile-info {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tiktok-profile-info h5 {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tiktok-profile-info p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#tiktok-container #profile button {
|
||||
width: 50%;
|
||||
height: 37px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.07);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
#personal-videos {
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
height: 49%;
|
||||
display: grid;
|
||||
padding-bottom: 19px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#profile-other #personal-videos {
|
||||
height: 475px;
|
||||
}
|
||||
|
||||
#personal-videos .personal-video {
|
||||
height: 205px !important;
|
||||
border: 1px solid var(--main-background-color);
|
||||
}
|
||||
|
||||
#personal-videos::before {
|
||||
width: 100%;
|
||||
background-color: #ccc;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.tiktok-back {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 60px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#videos-backBtn {
|
||||
position: absolute;
|
||||
top: 8%;
|
||||
z-index: 2;
|
||||
left: 4%;
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#videos-deleteBtn {
|
||||
position: absolute;
|
||||
top: 8%;
|
||||
z-index: 2;
|
||||
right: 4%;
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#videos-deleteBtn .fas {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
#personal-videos::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#personal-videos video {
|
||||
cursor: pointer;
|
||||
border: 1px solid #fff;
|
||||
width: 139px;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
#tiktok-container #selfProfile {
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--main-background-color);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#selfProfile-back {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#tiktok-container #selfProfile #selfProfile-back {
|
||||
position: relative;
|
||||
top: 60px;
|
||||
left: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#tiktok-container #selfProfile h5 {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: 35px;
|
||||
font-size: 18px;
|
||||
font-size: bold;
|
||||
width: 40%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#selfProfile-changePhoto p {
|
||||
margin-top: 15px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#selfProfile-changePhoto img {
|
||||
height: 100px !important;
|
||||
width: 100px !important;
|
||||
}
|
||||
|
||||
#tiktok-container #selfProfile #selfProfile-changePhoto {
|
||||
margin-top: 90px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#tiktok-container #selfProfile #selfProfile-photo {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#tiktok-container #selfProfile #aboutYou {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
top: 30px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
#aboutYou h7 {
|
||||
color: gray !important;
|
||||
}
|
||||
|
||||
#tiktok-container #selfProfile #aboutYou #aboutYou-infos {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.about-info {
|
||||
border-bottom: 1px solid var(--dark-border-color);
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.about-info span {
|
||||
margin-top: 10px;
|
||||
margin-left: 4px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#tiktok-container #selfProfile #aboutYou #aboutYou-infos .about-info {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#tiktok-container #selfProfile #aboutYou #aboutYou-infos .about-info input {
|
||||
border: none;
|
||||
width: 190px;
|
||||
text-align: right;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
#tiktok-container #selfProfile #aboutYou h7 {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#tiktok-container #selfProfile #aboutYou #aboutYou-save {
|
||||
position: absolute;
|
||||
top: 86%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90%;
|
||||
border-radius: 2px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 17px;
|
||||
background-color: rgba(254, 44, 85, 1);
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
#video-comment {
|
||||
width: 100%;
|
||||
height: 37px;
|
||||
position: absolute;
|
||||
top: 78%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
#video-comment input {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
width: 70%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#video-comment img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#tiktok-logout-prof {
|
||||
line-height: 40px;
|
||||
height: 38px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#video-comment-close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
font-size: 20px;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#tiktok-select-video-container header {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
#tiktok-select-video-container a {
|
||||
position: relative;
|
||||
bottom: 25px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#tiktok-upload-video-container header {
|
||||
width: 96%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#tiktok-upload-video-container form {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
#tiktok-upload-video-container form a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#tiktok-upload-sound,
|
||||
#tiktok-upload-caption {
|
||||
border-bottom: 1px solid lightgray;
|
||||
padding-left: 0px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#tiktok-upload-sound-end-time,
|
||||
#tiktok-upload-sound-start-time {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
@@ -0,0 +1,508 @@
|
||||
:root {
|
||||
--tinder-bg: #fe3c72;
|
||||
}
|
||||
|
||||
#tinder-register-firstscreen footer a {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#tinder-register-firstscreen button {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#tinder-forgot-password-screen,
|
||||
#tinder-login-screen,
|
||||
#tinder-register-screen-ninth,
|
||||
#tinder-register-screen-eighth,
|
||||
#tinder-register-screen-seventh,
|
||||
#tinder-register-screen-sixth,
|
||||
#tinder-register-screen-fifth,
|
||||
#tinder-register-screen-fourth,
|
||||
#tinder-register-screen-third,
|
||||
#tinder-register-screen-second,
|
||||
#tinder-register-screen-first {
|
||||
background: linear-gradient(to bottom, rgba(254, 60, 114, 0.8), #f80d5e);
|
||||
}
|
||||
|
||||
#tinder-forgot-password-screen .fa-chevron-left,
|
||||
#tinder-login-screen .fa-chevron-left,
|
||||
#tinder-register-screen-ninth .fa-chevron-left,
|
||||
#tinder-register-screen-eighth .fa-chevron-left,
|
||||
#tinder-register-screen-seventh .fa-chevron-left,
|
||||
#tinder-register-screen-sixth .fa-chevron-left,
|
||||
#tinder-register-screen-fifth .fa-chevron-left,
|
||||
#tinder-register-screen-fourth .fa-chevron-left,
|
||||
#tinder-register-screen-third .fa-chevron-left,
|
||||
#tinder-register-screen-second .fa-chevron-left,
|
||||
#tinder-register-screen-first .fa-chevron-left {
|
||||
font-size: 26px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#tinder-login-form header,
|
||||
#tinder-form-photos header,
|
||||
#tinder-my-gender-form header,
|
||||
#tinder-show-me-form header,
|
||||
#tinder-bio-form header,
|
||||
#tinder-password-form header,
|
||||
#tinder-birthday-form header,
|
||||
#tinder-first-name-form header,
|
||||
#tinder-code-form header,
|
||||
#tinder-number-form header {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
padding-bottom: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#tinder-birthday-form a,
|
||||
#tinder-first-name-form a,
|
||||
#tinder-number-form a {
|
||||
color: lightgray;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#tinder-birthday {
|
||||
padding: 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
#tinder-forgot-password-accounts .flex-col {
|
||||
margin-left: 5px;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
#tinder-forgot-password-accounts .flex-col a {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
#tinder-forgot-password-accounts article {
|
||||
padding: 10px;
|
||||
padding-bottom: 10px;
|
||||
background: white;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
#tinder-login-phone {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tinder-screen {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--main-background-color);
|
||||
}
|
||||
|
||||
.tinder-bg {
|
||||
background: linear-gradient(to bottom, rgba(254, 60, 114, 0.8), #f80d5e);
|
||||
}
|
||||
|
||||
.tinder-text {
|
||||
color: var(--tinder-bg);
|
||||
}
|
||||
|
||||
.tinder-register-button {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-radius: 22px;
|
||||
font-size: 17px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
border: 1px solid #fff;
|
||||
color: #000;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.tinder-register-screen {
|
||||
padding: 0 18.38px;
|
||||
}
|
||||
|
||||
.tinder-form {
|
||||
padding: 9.19px 18.38px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.tinder-input {
|
||||
border-bottom: 3px solid var(--border-color);
|
||||
padding-top: 4px;
|
||||
padding-left: 13px;
|
||||
border-radius: 15px;
|
||||
background: white;
|
||||
height: 40px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.tinder-form-button {
|
||||
position: absolute;
|
||||
bottom: 4%;
|
||||
height: 50px;
|
||||
width: 83%;
|
||||
border-radius: 24px;
|
||||
background: white;
|
||||
color: black;
|
||||
pointer-events: none;
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0.4;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.tinder-form-button:hover {
|
||||
scale: 1.05;
|
||||
}
|
||||
|
||||
:where(.tinder-form:has(#tinder-form-photo-list img), .tinder-form:valid) .tinder-form-button {
|
||||
background: white;
|
||||
color: black;
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#tinder-form-photo-list a {
|
||||
background: #f04777;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#tinder-form-photo-list .w-10rem,
|
||||
#tinder-form-photo-list img {
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.tinder-button-checkboxes input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tinder-button-checkboxes span {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
height: 36.76px;
|
||||
color: black;
|
||||
background: white;
|
||||
border: 2px solid var(--dark-background-color);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
border-radius: 24px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tinder-button-checkboxes span:hover {
|
||||
scale: 1.03;
|
||||
}
|
||||
|
||||
.tinder-button-checkboxes input[type="radio"]:checked+span {
|
||||
background-color: lightgray;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#tinder-home-page .mt-5 {
|
||||
display: flex;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tinder-home-footer-button {
|
||||
color: #39daaf;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
border-radius: 100%;
|
||||
background-color: var(--main-background-color);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
margin: 0 20px; /* Ajusta el espacio entre los botones */
|
||||
}
|
||||
|
||||
.tinder-home-footer-button i {
|
||||
font-size: 25px;
|
||||
padding-left: 2px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
.tinder-app .swiper-pagination {
|
||||
top: 6.433px !important;
|
||||
width: 90% !important;
|
||||
margin: 0 auto !important;
|
||||
left: 4.5% !important;
|
||||
}
|
||||
|
||||
.tinder-message-time {
|
||||
position: relative;
|
||||
top: 0;
|
||||
font-size: 13px;
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.tinder-text-message {
|
||||
position: relative;
|
||||
left: 8px;
|
||||
bottom: 2px;
|
||||
width: 200px !important;
|
||||
}
|
||||
|
||||
#tinder-chat-page header {
|
||||
background: rgba(238, 238, 238, 0.7);
|
||||
}
|
||||
|
||||
#tinder-chat-page footer {
|
||||
background: rgba(238, 238, 238, 0.7);
|
||||
}
|
||||
|
||||
#tinder-chat-home {
|
||||
position: relative;
|
||||
top: 12.5%;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#tinder-chat-home header {
|
||||
border-radius: 10px;
|
||||
background: var(--dark-background-color);
|
||||
}
|
||||
|
||||
#tinder-chat-list {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
#tinder-chat-new-matches {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
#tinder-chat-new-matches header {
|
||||
background: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#tinder-chat-chats {
|
||||
position: relative;
|
||||
top: 20px;
|
||||
height: 67%;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
#tinder-chat-chats header {
|
||||
background: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#tinder-profile-page {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tinder-prev-user-image {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999 !important;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tinder-next-user-image {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999 !important;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tinder-chat-message {
|
||||
max-width: 100%;
|
||||
gap: 4px;
|
||||
background: var(--dark-background-color);
|
||||
border-radius: 24px;
|
||||
padding: 10px 15px;
|
||||
align-self: flex-start;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tinder-chat-message img {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.tinder-chat-message p {
|
||||
margin: 0; /* Elimina el margen predeterminado */
|
||||
}
|
||||
|
||||
.tinder-chat-message-container.self {
|
||||
align-self: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.tinder-chat-message-container.self .tinder-chat-message {
|
||||
align-self: flex-end;
|
||||
justify-content: flex-end;
|
||||
background-color: var(--tinder-bg);
|
||||
}
|
||||
|
||||
.tinder-chat-message-container.self .tinder-chat-message p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tinder-app .emojionearea {
|
||||
margin: 0 auto;
|
||||
color: var(--text-color) !important;
|
||||
width: 84% !important;
|
||||
background: var(--border-light-color) !important;
|
||||
padding: 12px !important;
|
||||
border-radius: 14px !important;
|
||||
border: none !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tinder-app .emojionearea-editor {
|
||||
color: var(--text-color) !important;
|
||||
width: 80% !important;
|
||||
left: 0px !important;
|
||||
}
|
||||
|
||||
|
||||
.tinder-progress {
|
||||
height: 3px;
|
||||
flex-grow: 1;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 200%;
|
||||
background-position: 100% 50%;
|
||||
animation-timing-function: linear;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.tinder-progress-bar {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.tinder-user-images-container {
|
||||
transition: all 0.6s ease;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.tinder-user-images-container.liked {
|
||||
transform: translateX(120%) rotateY(-180deg) rotateZ(10deg) translateY(-200px);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.tinder-user-images-container.undo {
|
||||
transform: translateX(-120%) rotateY(180deg) rotateZ(-10deg) translateY(-200px);
|
||||
}
|
||||
|
||||
.tinder-user-images-container.disliked {
|
||||
transform: translateX(-120%) perspective(1000px) rotateY(180deg) rotateZ(-10deg) translateY(-200px);
|
||||
}
|
||||
|
||||
#tinder-user-swipers {
|
||||
position: relative;
|
||||
height: 85%;
|
||||
overflow: hidden;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#tinder-user-swipers a {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tinder-header-icon.current path {
|
||||
color: var(--tinder-bg);
|
||||
fill: var(--tinder-bg);
|
||||
}
|
||||
|
||||
#tinder-matched-page {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url(https://i.pinimg.com/564x/85/8b/14/858b14bab9ed4b584bb69f29ef356e8d.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
|
||||
.tinder-user-info {
|
||||
position: absolute;
|
||||
bottom: 23px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.tinder-user-info a {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.tinder-user-info-age {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.tinder-home-footer {
|
||||
position: relative;
|
||||
bottom: 3px;
|
||||
}
|
||||
|
||||
#tinder-chat-opened-chat footer,
|
||||
#tinder-chat-opened-chat header {
|
||||
background: var(--dark-background-color);
|
||||
}
|
||||
|
||||
#tinder-chat-messages {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
#tinder-profile-photo-list div,
|
||||
#tinder-profile-photo-list img {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
#tinder-profile-form .delete-photo {
|
||||
padding-top: 11px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#tinder-profile-form button {
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
.tinder-settings-pass {
|
||||
padding-bottom: 5%;
|
||||
}
|
||||
|
||||
.tinder-settings-photos {
|
||||
padding-bottom: 5%;
|
||||
}
|
||||
|
||||
.tinder-settings-gender {
|
||||
padding-bottom: 2%;
|
||||
}
|
||||
|
||||
#tinder-profile-gender,
|
||||
#tinder-profile-interested-in,
|
||||
#tinder-profile-bio-input,
|
||||
#tinder-profile-name-input,
|
||||
#tinder-profile-password-input {
|
||||
border-radius: 15px;
|
||||
}
|
||||
@@ -0,0 +1,606 @@
|
||||
#twitter-edit-profile form input {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#twitter-edit-profile button {
|
||||
height: 45px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
#twitter-edit-profile,
|
||||
#twitter-profile-page,
|
||||
#twitter-create-message-container,
|
||||
#twitter-messages-page,
|
||||
#twitter-notifications-page,
|
||||
#twitter-search-page,
|
||||
.twitter-app {
|
||||
background: var(--twitter-background-container);
|
||||
}
|
||||
|
||||
#twitter-chat {
|
||||
height: 112%;
|
||||
background: var(--twitter-background-container);
|
||||
}
|
||||
|
||||
#twitter-chat .emojionearea {
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
padding-bottom: 2px;
|
||||
border: 1px solid gray !important;
|
||||
background: var(--twitter-background-container) !important;
|
||||
}
|
||||
|
||||
#twitter-chat .emojionearea-editor {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
#twitter-profile-verify {
|
||||
position: relative;
|
||||
top: 9px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
#twitter-opened-tweet {
|
||||
background: var(--twitter-background-container);
|
||||
}
|
||||
|
||||
#twitter-opened-tweet .emojionearea {
|
||||
border: 1px solid gray !important;
|
||||
background: var(--twitter-background-container) !important;
|
||||
}
|
||||
|
||||
#twitter-opened-tweet .emojionearea-editor {
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
#twitter-profile-page .fa-arrow-left {
|
||||
color: var(--invert-text-color);
|
||||
background: var(--dark-border-color);
|
||||
}
|
||||
|
||||
#twitter-profile-page header {
|
||||
position: relative;
|
||||
width: 97%;
|
||||
left: 6px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#twitter-profile-username {
|
||||
position: relative;
|
||||
top: 7px;
|
||||
left: -8px;
|
||||
}
|
||||
|
||||
#twitter-profile-page #twitter-profile-name {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
left: -7px;
|
||||
}
|
||||
|
||||
#twitter-profile-edit-btn {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background: var(--blue-text);
|
||||
border: none;
|
||||
}
|
||||
|
||||
#twitter-create-tweet-page img {
|
||||
width: 93%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#twitter-create-tweet-page {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
background: var(--twitter-background-container);
|
||||
}
|
||||
|
||||
#twitter-create-tweet-page .fa-times {
|
||||
right: 36px;
|
||||
top: 10px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
#twitter-register-screen,
|
||||
#twitter-forgot-password-screen,
|
||||
#twitter-register-screen-fourth,
|
||||
#twitter-register-screen-third,
|
||||
#twitter-register-screen-second,
|
||||
#twitter-login-screen,
|
||||
#twitter-register-screen-first,
|
||||
#twitter-register-firstscreen {
|
||||
width: 97%;
|
||||
left: 7px;
|
||||
background: var(--twitter-background-container);
|
||||
}
|
||||
|
||||
#twitter-login-screen {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#twitter-login-screen button {
|
||||
width: 94%;
|
||||
}
|
||||
|
||||
#twitter-register-screen-first p {
|
||||
position: relative;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
#twitter-register-firstscreen h2 {
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
#twitter-home-page {
|
||||
background: var(--twitter-background-container);
|
||||
}
|
||||
|
||||
.twitter-white-btn {
|
||||
width: 98%;
|
||||
height: 6rem;
|
||||
border-radius: 22px;
|
||||
font-size: 17px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--text-color);
|
||||
color: var(--main-background-color);
|
||||
}
|
||||
|
||||
#twitter-forgot-password-accounts article {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.twitter-blue-btn {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border-radius: 22px;
|
||||
font-size: 17px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #0095f6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.twitter-form {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.twitter-form input {
|
||||
background-color: var(--common-input-background) !important;
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 45px;
|
||||
padding: 10px;
|
||||
color: #0095f6;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.twitter-screen {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.twitter-register-screen-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 7rem;
|
||||
}
|
||||
|
||||
.twitter-header {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
padding-top: 5.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid var(--dark-border-color);
|
||||
margin-bottom: 12px;
|
||||
background-color: var(--twitter-background-container);
|
||||
}
|
||||
|
||||
.twitter-header .twitter-avatar {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.twitter-header .twitter-logo {
|
||||
margin: 0px auto;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.twitter-header-button.current,
|
||||
.twitter-profile-divider-button.current {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.twitter-header-button._active {
|
||||
border-bottom: 3px solid #0095f6;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#twitter-header-divider,
|
||||
#twitter-profile-divider {
|
||||
position: absolute;
|
||||
height: 3px;
|
||||
background-color: #0095f6;
|
||||
bottom: 0px;
|
||||
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#twitter-tweets .hide-border-last {
|
||||
border-bottom: 1px solid var(--dark-border-color);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#twitter-tweets .hide-border-last:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#twitter-home-page #twitter-tweets header,
|
||||
#twitter-profile-page #profile-tweets header {
|
||||
width: 91%;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#twitter-home-page #twitter-tweets img,
|
||||
#twitter-profile-page #profile-tweets img,
|
||||
#twitter-profile-page #twitter-tweets img {
|
||||
width: 90%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#twitter-home-page #twitter-tweets .rounded-full,
|
||||
#twitter-profile-page #profile-tweets .rounded-full,
|
||||
#twitter-profile-page #twitter-tweets .rounded-full {
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#twitter-home-page #twitter-tweets,
|
||||
#twitter-profile-page #profile-tweets,
|
||||
#twitter-profile-page #twitter-tweets {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#twitter-home-page #twitter-tweets .justify-around,
|
||||
#twitter-profile-page #profile-tweets .justify-around,
|
||||
#twitter-profile-page #twitter-tweets .justify-around {
|
||||
position: relative;
|
||||
right: 33px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#twitter-profile-page #profile-tweets p,
|
||||
#twitter-profile-page #twitter-tweets p {
|
||||
width: 87%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#twitter-profile-page #profile-tweets .tweet-posted p {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.tweet-posted {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#twitter-footer {
|
||||
border-top: 1px solid var(--dark-border-color);
|
||||
}
|
||||
|
||||
.twitter-footer-icon {
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.twitter-footer-icon.current {
|
||||
color: var(--blue-text);
|
||||
}
|
||||
|
||||
#twitter-search-input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-left: 10px;
|
||||
margin-right: -35px;
|
||||
border-radius: 22px;
|
||||
font-size: 17px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--weazel-post-input);
|
||||
color: #fff;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
#twitter-search-results article {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid var(--dark-border-color);
|
||||
}
|
||||
|
||||
#twitter-search-results article:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.twitter-border-btn {
|
||||
border-radius: 16px;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
border: 1px solid #141414;
|
||||
outline: none;
|
||||
padding: 8px 20px;
|
||||
}
|
||||
|
||||
.twitter-follow-btn {
|
||||
border-radius: 16px;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 10px 24px;
|
||||
}
|
||||
|
||||
.twitter-avatar {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* check if not exist emojionearea-standalone */
|
||||
|
||||
.twitter-app .emojionearea {
|
||||
margin: 0 auto;
|
||||
background: transparent !important;
|
||||
color: #fff !important;
|
||||
width: 90% !important;
|
||||
background: #141414 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.twitter-app .emojionearea-editor {
|
||||
color: #fff !important;
|
||||
width: 80% !important;
|
||||
}
|
||||
|
||||
.twitter-app .emojionearea-editor::placeholder {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.twitter-chat-message {
|
||||
max-width: 85%;
|
||||
gap: 4px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background-color: var(--twitter-dark-chat);
|
||||
border-radius: 20px;
|
||||
padding: 12px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.twitter-chat-message.self {
|
||||
align-self: flex-end;
|
||||
background-color: #0095f6;
|
||||
}
|
||||
|
||||
.twitter-chat-input::placeholder {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
#twitter-profile-follow-btn.following {
|
||||
background-color: #0095f6;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#twitter-profile-follow-btn {
|
||||
background-color: #0095f6;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:where(.fas, .fa, .far) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#twitter-opened-tweet-like.fas {
|
||||
color: #f56565;
|
||||
}
|
||||
|
||||
#twitter-opened-tweet-retweet.fas {
|
||||
color: #48bb78;
|
||||
}
|
||||
|
||||
#twitter-create-tweet-input {
|
||||
display: block;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
margin-left: 7px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
#twitter-create-tweet-emoji {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#twitter-create-tweet-actions .emojionearea {
|
||||
width: auto !important;
|
||||
margin: 0px !important;
|
||||
background: transparent !important;
|
||||
color: unset !important;
|
||||
}
|
||||
|
||||
#twitter-create-tweet-actions .emojionearea-editor {
|
||||
width: auto !important;
|
||||
background: transparent !important;
|
||||
color: unset !important;
|
||||
padding: unset !important;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#twitter-create-tweet-actions .emojionearea-button-open {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#twitter-create-tweet-actions .emojionearea-button-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#twitter-creat-tweet-media {
|
||||
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
#twitter-create-tweet-media.customHidden {
|
||||
scale: 1.2;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#twitter-chat-messages {
|
||||
height: 76%;
|
||||
}
|
||||
|
||||
#twitter-messages-list article {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid var(--dark-border-color);
|
||||
}
|
||||
|
||||
#twitter-messages-list article:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#twitter-messages-list p,
|
||||
#twitter-messages-list a {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
left: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tw-message-name {
|
||||
font-weight: bold;
|
||||
font-size: 16px !important;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
#twitter-messages-list span {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#twitter-create-message-users article {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.twitter-header .fa-trash-alt {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.tw-change-name,
|
||||
.tw-change-user,
|
||||
.tw-change-bio,
|
||||
.tw-change-password {
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#twitter-opened-tweet-comments {
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid var(--dark-border-color);
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
#twitter-opened-tweet-comments header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#twitter-opened-tweet-comments .border-b:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#twitter-opened-tweet .h-75 {
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
#twitter-opened-tweet .footer-posts {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#twitter-create-tweet-page .tw-tweet {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#twitter-opened-tweet .pt-8 .tw-tweet {
|
||||
color: var(--text-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#twitter-create-tweet-page .twitter-avatar {
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#twitter-opened-tweet .emojionearea {
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
padding-bottom: 2px;
|
||||
border: 1px solid gray !important;
|
||||
background: var(--twitter-background-container) !important;
|
||||
}
|
||||
|
||||
#twitter-opened-tweet .emojionearea-editor {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
#twitter-notifications-content header img {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
#twitter-create-tweet-actions i,
|
||||
#twitter-create-tweet-actions .emojionearea {
|
||||
width: 32px !important;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
#uber-active {
|
||||
position: absolute;
|
||||
background-color: #e95014;
|
||||
width: 75%;
|
||||
height: 7%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
line-height: 60px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 17px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#uber-map {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
background-color: #143c6a;
|
||||
}
|
||||
|
||||
.leaflet-popup {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.leaflet-popup-content {
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
+409
@@ -0,0 +1,409 @@
|
||||
#uberRider-categoriesContainer {
|
||||
position: relative;
|
||||
top: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 98%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.uberRider-categories h4 {
|
||||
font-size: 25px;
|
||||
width: 80%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#uberRider-categoriesContainer h1 {
|
||||
margin-top: 10%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.uberRider-categories {
|
||||
position: relative;
|
||||
margin: 0px 14px;
|
||||
width: 50%;
|
||||
height: 300px;
|
||||
margin-top: 10%;
|
||||
background-color: var(--dark-background-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
transition: all 0.1s linear;
|
||||
}
|
||||
|
||||
#uberRider-categoriesContainer footer {
|
||||
margin-top: 8%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#uberRider-categoriesContainer .text-2xl {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.uberRider-categ-img {
|
||||
width: auto;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.uberRider-categ-righticon {
|
||||
position: relative;
|
||||
right: 45px;
|
||||
top: 20px;
|
||||
cursor: pointer;
|
||||
height: 75px;
|
||||
}
|
||||
|
||||
.uberRider-backImg {
|
||||
position: relative;
|
||||
display: block;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--text-color);
|
||||
color: var(--invert-text-color);
|
||||
padding: 11.2px;
|
||||
font-size: 19px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
#uberRider-getARide,
|
||||
#uberRider-beARiderContainer {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
width: calc(100% - 20px);
|
||||
height: 100%;
|
||||
margin: 0 10px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
transition: all 0.1s linear;
|
||||
}
|
||||
|
||||
#uberRider-beARiderContent {
|
||||
position: relative;
|
||||
top: 30px;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#uberRider-beARiderContent a {
|
||||
color: gray;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#uberRider-beARiderContainer article {
|
||||
margin-top: 35%;
|
||||
}
|
||||
|
||||
#uberRider-beARiderContainer img {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
#uberRider-beARiderContainer p {
|
||||
margin-top: 3%;
|
||||
color: gray;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#uberRider-vehicleModelContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#uberRider-vehicleModelContainer::-webkit-scrollbar {
|
||||
display: none
|
||||
}
|
||||
|
||||
#uberRider-vehicleModels {
|
||||
position: relative;
|
||||
width: 94%;
|
||||
height: 84%;
|
||||
margin: 0 auto;
|
||||
top: 20px;
|
||||
z-index: 999;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#uberRider-vehicleModels h5 {
|
||||
position: relative;
|
||||
color: green;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#uberRider-vehicleModels h4 {
|
||||
position: relative;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
#uberRider-ridersContainer {
|
||||
position: relative;
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
bottom: 30px;
|
||||
}
|
||||
|
||||
#uberRider-ridersContainer h3 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
color: #f8b044;
|
||||
transform: translate(-50%, -50%)
|
||||
}
|
||||
|
||||
#uberRider-riders {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
width: 100%;
|
||||
height: 51%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#uberRider-riders::-webkit-scrollbar {
|
||||
display: none
|
||||
}
|
||||
|
||||
.uberRider-rider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 5px;
|
||||
border-radius: 2px;
|
||||
background-color: var(--text-color);
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
height: 45px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
color: var(--invert-text-color);
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.uberRider-rider span:last-child {
|
||||
color: var(--invert-text-color);
|
||||
font-size: 15px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
#uberRider-riderContainer {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uberRider-riderContainer-header {
|
||||
position: relative;
|
||||
top: 40px;
|
||||
font-size: 18px;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#uberRider-riderContainer a {
|
||||
position: relative;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#uberRider-beariderFee {
|
||||
border: none;
|
||||
background: var(--border-color);
|
||||
height: 45px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
#uberRider-beARiderContainer form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
#uberRider-beARiderbtn {
|
||||
border: none;
|
||||
background-color: var(--text-color);
|
||||
color: var(--invert-text-color);
|
||||
font-size: 18px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.uberRider-vehicleModel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
background-color: var(--text-color);
|
||||
margin: 5px 0px;
|
||||
color: var(--invert-text-color);
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.4s
|
||||
}
|
||||
|
||||
#uberRider-requests {
|
||||
position: absolute;
|
||||
width: calc(100% - 20px);
|
||||
height: 45%;
|
||||
/* background-color: red; */
|
||||
}
|
||||
|
||||
#leaveUberRider {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 5%;
|
||||
transform: translate(-50%, 50%);
|
||||
background-color: #eb2828;
|
||||
color: white;
|
||||
border: none;
|
||||
height: 55px;
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
border-radius: 4px;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
#uberRider-waitingUber,
|
||||
#uberRider-roadToRequester {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 99999999;
|
||||
background-color: var(--main-background-color);
|
||||
}
|
||||
|
||||
|
||||
#uberRider-waitingUberContainer,
|
||||
#uberRider-roadToRequesterContainer {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 50px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#uberRider-waitingUberContainer h5 {
|
||||
font-size: 17px;
|
||||
font-weight: 100;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
|
||||
#uberRider-roadToRequesterContainer h5 {
|
||||
font-size: 16px;
|
||||
font-weight: 100;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
#uberRider-waitingUberContainer i,
|
||||
#uberRider-roadToRequesterContainer i {
|
||||
color: var(--text-color);
|
||||
font-size: 45px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#uberRider-callRequest,
|
||||
#uberRider-callRider {
|
||||
border: none;
|
||||
background-color: #00aeff;
|
||||
width: 90%;
|
||||
height: 55px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
border-radius: 2px;
|
||||
color: white;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#uberRider-cancelRequest,
|
||||
#uberRider-cancelRider {
|
||||
border: none;
|
||||
background-color: #eb2828;
|
||||
width: 90%;
|
||||
height: 55px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#uberRider-riderInfo {
|
||||
width: 100%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
#uberRider-riderInfo p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
font-size: 17px;
|
||||
border-bottom: 1px solid var(--dark-border-color);
|
||||
}
|
||||
|
||||
#uberRider-riderInfo p i {
|
||||
color: var(--text-color);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
#uberRider-riderInfo-Header {
|
||||
width: 100%;
|
||||
font-size: 25px;
|
||||
color: white
|
||||
}
|
||||
|
||||
.uberRider-last-transaction-first-letter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
background-color: var(--dark-background-color);
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 9999px;
|
||||
margin-right: 5px;
|
||||
color: white;
|
||||
transition: all 0.05s linear 0s;
|
||||
}
|
||||
|
||||
#uberRider-last-transactions {
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid var(--dark-background-color);
|
||||
}
|
||||
|
||||
#uberRider-last-transactions .text-green-500 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#uberRider-map {
|
||||
height: 70%;
|
||||
width: 450px;
|
||||
position: relative;
|
||||
right: 10px;
|
||||
bottom: 89px;
|
||||
background-color: #143c6a;
|
||||
}
|
||||
|
||||
#uberRider-map .leaflet-control-zoom {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
.weather-app {
|
||||
background: url(../../img/weather_app/night_wallpaper.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.weather-app *,
|
||||
.weather-app a,
|
||||
.weather-app i {
|
||||
color: white;
|
||||
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
|
||||
.weather-degree {
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
.weather-name {
|
||||
position: absolute;
|
||||
left: 65px;
|
||||
color: #ee5253;
|
||||
line-height: 65px;
|
||||
}
|
||||
|
||||
#weather-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px;
|
||||
width: 100%;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.weather-tomorrow {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: rgba(255, 255, 255, 0.31);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.weather_container {
|
||||
background: rgba(255, 255, 255, 0.31);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.weather_container>div>header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.weather_container>div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.weather-header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
top: 0;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.ic h2 {
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.weather-widget {
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
color: white;
|
||||
background: linear-gradient(to bottom, #0a4e8f, #508fd2);
|
||||
}
|
||||
@@ -0,0 +1,451 @@
|
||||
#weazel-app-news-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#weazel-app-edit-news,
|
||||
#weazel-app-create-news {
|
||||
background: var(--weazel-post-creator) !important;
|
||||
}
|
||||
|
||||
.weazel-app {
|
||||
background: var(--weazel-background);
|
||||
}
|
||||
|
||||
#weazel-app-create-news #weazel-app-header {
|
||||
width: 93%;
|
||||
}
|
||||
|
||||
#weazel-app-create-news #weazel-app-header p {
|
||||
font-size: 17px;
|
||||
color: #eb445e !important;
|
||||
cursor: pointer;
|
||||
bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#weazel-app-create-news #weazel-app-header a {
|
||||
font-size: 19px;
|
||||
font-weight: bold;
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
.weazel-create-container {
|
||||
height: auto;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.weazel-create-container input {
|
||||
background: var(--weazel-post-input);
|
||||
height: 40px;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
width: 90%;
|
||||
left: 20px;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.weazel-create-container textarea {
|
||||
background: var(--weazel-post-input);
|
||||
height: 153%;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
width: 90%;
|
||||
left: 20px;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.weazel-imageMain {
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.weazel-create-container button {
|
||||
background: #eb445e !important;
|
||||
height: 50px !important;
|
||||
position: relative;
|
||||
margin-top: 9%;
|
||||
width: 90% !important;
|
||||
border-radius: 6px !important;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#weazel-app-edit-news #weazel-app-header {
|
||||
width: 93%;
|
||||
}
|
||||
|
||||
#weazel-app-edit-news #weazel-app-header p {
|
||||
font-size: 17px;
|
||||
color: #eb445e !important;
|
||||
cursor: pointer;
|
||||
bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#weazel-app-edit-news #weazel-app-header a {
|
||||
font-size: 19px;
|
||||
font-weight: bold;
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
#weazel-app-edit-news textarea {
|
||||
background: var(--weazel-post-input);
|
||||
height: 110%;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
width: 90%;
|
||||
left: 20px;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#weazel-app-edit-news button {
|
||||
background: #eb445e !important;
|
||||
height: 50px !important;
|
||||
position: relative;
|
||||
margin-top: 6%;
|
||||
width: 90% !important;
|
||||
border-radius: 6px !important;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#weazel-app-news-container #weazel-app-header {
|
||||
height: 10%;
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#weazel-app-news-container #weazel-app-header a,
|
||||
#weazel-app-header p {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#weazel-app-news-container #weazel-app-header a {
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
#weazel-app-news-container #weazel-app-header a i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#weazel-app-news-container #weazel-app-header p {
|
||||
font-size: 25px;
|
||||
margin-bottom: 20px;
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
#createWeazel {
|
||||
position: relative;
|
||||
bottom: 70px;
|
||||
background: var(--border-light-color);
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
font-size: 20px;
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#weazel-header-line {
|
||||
position: relative;
|
||||
bottom: 5px;
|
||||
height: 1px;
|
||||
background: var(--border-light-color);
|
||||
}
|
||||
|
||||
#weazel-app-news-container article {
|
||||
position: relative;
|
||||
top: 25px;
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#weazel-app-news-container article h1 {
|
||||
color: #eb445e;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
bottom: 8px;
|
||||
}
|
||||
|
||||
#weazel-app-create-news,
|
||||
#weazel-app-edit-news {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 100%;
|
||||
display: none;
|
||||
z-index: 4;
|
||||
background: #fff;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
#weazel-app-news {
|
||||
position: relative;
|
||||
top: 25px;
|
||||
height: 75%;
|
||||
padding-bottom: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#weazel-app-create-news button,
|
||||
#weazel-app-edit-news button {
|
||||
width: calc(100% - 74px);
|
||||
height: 33px;
|
||||
border: none;
|
||||
background-color: #b93160;
|
||||
color: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#weazel-app-create-news input,
|
||||
#weazel-app-edit-news input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#weazel-app-create-news textarea,
|
||||
#weazel-app-edit-news textarea {
|
||||
border: none;
|
||||
resize: none;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
#weazel-app-news::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#weazel-imageContainer {
|
||||
width: 100%;
|
||||
height: 92px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#weazel-imageContainer img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.news {
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
box-shadow: rgba(50, 50, 93, 0.05) 0px 6px 12px -2px,
|
||||
rgba(0, 0, 0, 0.05) 0px 3px 7px -3px;
|
||||
margin-bottom: 20px;
|
||||
background: var(--weazel-boxes);
|
||||
}
|
||||
|
||||
.large-news {
|
||||
width: 93%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.small-news {
|
||||
position: flex;
|
||||
width: 44%;
|
||||
margin: 0 auto;
|
||||
float: left;
|
||||
margin-left: 17px;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.news img {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
object-fit: cover;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
|
||||
.news div {
|
||||
display: flex;
|
||||
align-items: left;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.news div p {
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
padding: 0 15px;
|
||||
font-size: 15px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.news h3 {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
padding: 0 15px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.small-news img {
|
||||
height: 20% !important;
|
||||
}
|
||||
|
||||
.small-news div p {
|
||||
font-size: 12px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.small-news h3 {
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.widget-selected {
|
||||
transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.weazel-widget {
|
||||
background: var(--calendar-widget);
|
||||
}
|
||||
|
||||
.phone-applications #weazel-widget-header {
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.phone-applications #weazel-widget-header h7 {
|
||||
color: #eb445e;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.phone-applications .weazel-widget-last {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
align-items: center;
|
||||
height: 33px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.phone-applications .weazel-widget-last:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.phone-applications .weazel-widget-last img {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.phone-applications .weazel-widget-last a {
|
||||
font-size: 13px;
|
||||
color: var(--text-color);
|
||||
height: 35px;
|
||||
width: 67%;
|
||||
margin-left: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.phone-applications #weazel-widget-header img {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.contenido #weazel-widget-header {
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contenido #weazel-widget-header h7 {
|
||||
color: #eb445e;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.contenido .weazel-widget-last {
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
position: relative;
|
||||
top: 32px;
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
align-items: center;
|
||||
height: 33px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.contenido .weazel-widget-last:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.contenido .weazel-widget-last img {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.contenido .weazel-widget-last a {
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
height: 35px;
|
||||
width: 67%;
|
||||
margin-left: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.contenido #weazel-widget-header img {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#widget-customize-list #weazel-widget-header img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#widget-customize-list .weazel-widget-last {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#lock-screen-widgets .weazel-widget-last img,
|
||||
#widget-customize-list .weazel-widget-last img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#lock-screen-widgets .weazel-widget-last,
|
||||
#widget-customize-list .weazel-widget-last {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -0,0 +1,652 @@
|
||||
:root {
|
||||
--whatsapp-bubble-color: #1e1f20;
|
||||
--whatsapp-footer-icon-width: 2.6rem;
|
||||
--audio-controller-radius: 1rem
|
||||
}
|
||||
|
||||
.whatsapp-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--main-background-color)
|
||||
}
|
||||
|
||||
.whatsapp-padding {
|
||||
padding: 6rem 1rem
|
||||
}
|
||||
|
||||
.whatsapp-logo {
|
||||
width: 276px;
|
||||
margin: 0 auto;
|
||||
height: 276px;
|
||||
border-radius: 9999px;
|
||||
margin-bottom: 46px
|
||||
}
|
||||
|
||||
.whatsapp-register-screen-header h4 {
|
||||
display: flex;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.whatsapp-register-screen-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 5rem;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px
|
||||
}
|
||||
|
||||
.whatsapp-form-input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: .5rem;
|
||||
padding: 1.2rem 1rem;
|
||||
background-color: var(--dark-background-color)
|
||||
}
|
||||
|
||||
.whatsapp-avatar {
|
||||
border-radius: 9999px
|
||||
}
|
||||
|
||||
.whatsapp-chat-bg {
|
||||
background-image: url(../../img/whatsapp_app/whatsapp-wallpaper-1.jpg);
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat
|
||||
}
|
||||
|
||||
.whatsapp-chat-message {
|
||||
max-width: 100%;
|
||||
gap: 4px;
|
||||
background-color: var(--whatsapp-bubble-color);
|
||||
border-radius: 13px;
|
||||
padding: 10px;
|
||||
align-self: flex-start;
|
||||
display: flex;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.whatsapp-chat-message div p {
|
||||
color: var(--text-color);
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
#visto-whatsapp {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.whatsapp-chat-message div a {
|
||||
position: relative;
|
||||
right: 2px;
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
.whatsapp-chat-message-container {
|
||||
max-width: 85%
|
||||
}
|
||||
|
||||
.whatsapp-chat-message-container.self {
|
||||
align-self: flex-end
|
||||
}
|
||||
|
||||
.whatsapp-chat-message-container.self .whatsapp-chat-message {
|
||||
background-color: var(--whatsapp-bubble-color-personal)
|
||||
}
|
||||
|
||||
.whatsapp-chat-input::placeholder {
|
||||
color: #ccc
|
||||
}
|
||||
|
||||
.whatsapp-chat-fixed-message {
|
||||
color: var(--text-color);
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
padding: 12px;
|
||||
background-color: var(--whatsapp-alert-background-color);
|
||||
border-radius: 10px;
|
||||
margin-top: 12px;
|
||||
letter-spacing: 1px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.whatsapp-bubble-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
bottom: 30px;
|
||||
left: -12px;
|
||||
height: 0
|
||||
}
|
||||
|
||||
.whatsapp-chat-message-container.self .whatsapp-bubble-arrow {
|
||||
right: -2px;
|
||||
bottom: 30px;
|
||||
left: auto
|
||||
}
|
||||
|
||||
.whatsapp-chat-message-container.self .whatsapp-bubble-arrow::after {
|
||||
transform: rotate(45deg) scaleY(-1);
|
||||
border-top: 9px solid var(--whatsapp-bubble-color-personal)
|
||||
}
|
||||
|
||||
.whatsapp-bubble-arrow::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border: 0 solid transparent;
|
||||
border-top: 9px solid var(--whatsapp-bubble-color);
|
||||
border-radius: 0 20px 0;
|
||||
width: 15px;
|
||||
height: 30px;
|
||||
transform: rotate(145deg)
|
||||
}
|
||||
|
||||
.whatsapp-gray-text {
|
||||
color: rgb(165, 165, 165);
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.whatsapp-app .emojionearea {
|
||||
margin: 0 auto;
|
||||
color: red !important;
|
||||
width: 84% !important;
|
||||
height: 55% !important;
|
||||
background: var(--emojinarea-background-color) !important;
|
||||
border: 1px solid var(--second-border-color) !important
|
||||
}
|
||||
|
||||
.whatsapp-app .emojionearea-editor {
|
||||
color: var(--text-color) !important;
|
||||
width: 80% !important;
|
||||
left: 0 !important
|
||||
}
|
||||
|
||||
.whatsapp-app .emojionearea-editor::placeholder {
|
||||
color: #fff !important
|
||||
}
|
||||
|
||||
#whatsapp-footer {
|
||||
background: var(--dark-background-color)
|
||||
}
|
||||
|
||||
.whatsapp-footer-button a {
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
color: #777;
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.whatsapp-footer-button.current a {
|
||||
color: #0095f6;
|
||||
fill: #0095f6
|
||||
}
|
||||
|
||||
#whatsapp-chats section {
|
||||
height: 74px
|
||||
}
|
||||
|
||||
#whatsapp-chats img {
|
||||
position: relative;
|
||||
left: 3px
|
||||
}
|
||||
|
||||
#whatsapp-chats div {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
right: 13px;
|
||||
margin-bottom: 8px
|
||||
}
|
||||
|
||||
#whatsapp-chats a {
|
||||
position: relative;
|
||||
left: 14px;
|
||||
top: 4px
|
||||
}
|
||||
|
||||
#whatsapp-chats p {
|
||||
position: relative;
|
||||
font-size: 15px;
|
||||
left: 13px;
|
||||
top: 2px
|
||||
}
|
||||
|
||||
.whatsapp-footer-button svg {
|
||||
position: relative;
|
||||
bottom: 5px;
|
||||
color: #777;
|
||||
fill: #777;
|
||||
width: var(--whatsapp-footer-icon-width)
|
||||
}
|
||||
|
||||
.whatsapp-footer-button.current svg {
|
||||
color: #0095f6;
|
||||
fill: #0095f6
|
||||
}
|
||||
|
||||
.whatsapp-add-to-group {
|
||||
position: relative;
|
||||
height: 52px
|
||||
}
|
||||
|
||||
.whatsapp-information-add-participants-save {
|
||||
font-size: 16px !important
|
||||
}
|
||||
|
||||
.whatsapp-add-to-group a {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 4px;
|
||||
font-size: 15px
|
||||
}
|
||||
|
||||
#whatsapp-home-header p {
|
||||
margin-left: 3px;
|
||||
font-size: 30px;
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
#whatsapp-home-header a {
|
||||
font-size: 16px
|
||||
}
|
||||
|
||||
#whatsapp-my-status .addStory {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: #3291fe;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
right: -5px;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
box-sizing: content-box
|
||||
}
|
||||
|
||||
#whatsapp-my-status .addStory div {
|
||||
color: #fff;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.whatsapp-user-status {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 2%;
|
||||
z-index: 1 !important
|
||||
}
|
||||
|
||||
.whatsapp-app .swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 5 !important
|
||||
}
|
||||
|
||||
.whatsapp-app .swiper-slide .whatsapp-status-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
padding: 3px
|
||||
}
|
||||
|
||||
.whatsapp-prev-user-story {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999 !important;
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.whatsapp-next-user-story {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999 !important;
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
.whatsapp-progress {
|
||||
height: 3px;
|
||||
flex-grow: 1;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 200%;
|
||||
background-position: 100% 50%;
|
||||
animation-timing-function: linear;
|
||||
animation-delay: .2s
|
||||
}
|
||||
|
||||
.whatsapp-progress-bar {
|
||||
width: 100%;
|
||||
background-color: white
|
||||
}
|
||||
|
||||
.whatsapp-status-user-info {
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
z-index: 5;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px
|
||||
}
|
||||
|
||||
@keyframes input_pop {
|
||||
0% {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1.2)
|
||||
}
|
||||
}
|
||||
|
||||
.whatsapp-create-group-checkbox {
|
||||
display: none
|
||||
}
|
||||
|
||||
.whatsapp-create-group-checkbox+label span {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 19px;
|
||||
margin: 0 5px -4px 0
|
||||
}
|
||||
|
||||
.whatsapp-create-group-checkbox+label span:before,
|
||||
.whatsapp-create-group-checkbox+label span:after {
|
||||
-webkit-transition: all .3s ease-in-out;
|
||||
-moz-transition: all .3s ease-in-out;
|
||||
transition: all .3s ease-in-out;
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background: transparent;
|
||||
border: 2px solid var(--dark-border-color);
|
||||
border-radius: 9999px
|
||||
}
|
||||
|
||||
.whatsapp-create-group-checkbox+label span:after {
|
||||
z-index: 0;
|
||||
border: none
|
||||
}
|
||||
|
||||
.whatsapp-create-group-checkbox:checked+label span:before {
|
||||
animation: pop .3s ease;
|
||||
z-index: 100;
|
||||
background: #3291fe;
|
||||
background: #3291fe url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;
|
||||
border: 2px solid #3291fe
|
||||
}
|
||||
|
||||
.whatsapp-contact-info-group-participants-list-item:last-child div {
|
||||
border: 0
|
||||
}
|
||||
|
||||
.whatsapp-call-button {
|
||||
background: var(--main-darker-gray);
|
||||
border-radius: 9999px;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all .3s ease
|
||||
}
|
||||
|
||||
.whatsapp-call-button i {
|
||||
font-size: 22px;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.whatsapp-call-button[data-type='microphone'].active {
|
||||
background: #3291fe
|
||||
}
|
||||
|
||||
.whatsapp-call-button[data-type='speaker'].active {
|
||||
background: #38a169
|
||||
}
|
||||
|
||||
.whatsapp-call-user.talking {
|
||||
box-shadow: #38a169 0 0 0 3px
|
||||
}
|
||||
|
||||
.whatsapp-call-user:nth-child(odd):last-child {
|
||||
grid-column: span 2;
|
||||
grid-row: span 2
|
||||
}
|
||||
|
||||
#whatsapp-record-voice-button.recording {
|
||||
color: #e53e3e;
|
||||
animation: whatsapp-record-voice-animation 1.5s cubic-bezier(0.215, 0.610, 0.355, 1) infinite
|
||||
}
|
||||
|
||||
@keyframes whatsapp-record-voice-animation {
|
||||
0% {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
.button-items {
|
||||
flex-grow: 1
|
||||
}
|
||||
|
||||
.whatsapp-audio-group .controls {
|
||||
position: relative;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
margin: 5px 7px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.whatsapp-audio-group :is(#play, #pause) {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all .4s
|
||||
}
|
||||
|
||||
.whatsapp-audio-group :is(#play i, #pause i) {
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
right: 3px;
|
||||
color: var(--text-color);
|
||||
font-size: 2.5rem
|
||||
}
|
||||
|
||||
.whatsapp-audio-group #slider-timer {
|
||||
display: flex;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
height: 35px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.whatsapp-audio-group #slider {
|
||||
position: relative;
|
||||
top: 8px;
|
||||
width: 165px;
|
||||
height: 4px;
|
||||
background: #ccc;
|
||||
border-radius: var(--audio-controller-radius)
|
||||
}
|
||||
|
||||
.whatsapp-audio-group #slider #elapsed {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: #fff;
|
||||
border-radius: var(--audio-controller-radius);
|
||||
transition: all 1s cubic-bezier(0.23, 1, 0.320, 1)
|
||||
}
|
||||
|
||||
.whatsapp-audio-group .times {
|
||||
display: flex;
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.whatsapp-call-user.calling {
|
||||
animation: whatsapp-call-animation 1.5s cubic-bezier(0.215, 0.610, 0.355, 1) infinite
|
||||
}
|
||||
|
||||
.whatsapp-wallpaper-custom-grid {
|
||||
top: 50px;
|
||||
padding: 15px;
|
||||
margin-left: 10px
|
||||
}
|
||||
|
||||
.whatsapp-wallpaper-custom img {
|
||||
height: 230px;
|
||||
width: 111px;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
#whatsapp-chat-input-container {
|
||||
background: var(--whatsapp-background-color)
|
||||
}
|
||||
|
||||
#whatsapp-chat,
|
||||
#whatsapp-chat-input-container {
|
||||
background: var(--whatsapp-background-color)
|
||||
}
|
||||
|
||||
.whatsapp-header .whatsapp-chat-call {
|
||||
position: relative;
|
||||
right: 10px
|
||||
}
|
||||
|
||||
#whatsapp-chat-back {
|
||||
position: relative;
|
||||
left: 10px
|
||||
}
|
||||
|
||||
.whatsapp-header .whatsapp-contact-avatar {
|
||||
position: relative;
|
||||
left: 15px
|
||||
}
|
||||
|
||||
.whatsapp-header .whatsapp-contact-name {
|
||||
position: relative;
|
||||
left: 25px;
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
.whatsapp-wallpaper-custom a {
|
||||
width: 100px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.whatsapp-create-chat-list div {
|
||||
height: 50px
|
||||
}
|
||||
|
||||
.whatsapp-status-close {
|
||||
position: relative;
|
||||
top: 69px !important
|
||||
}
|
||||
|
||||
.whatsapp-status-close i {
|
||||
position: relative;
|
||||
font-size: 15px
|
||||
}
|
||||
|
||||
#whatsapp-calls-home nav {
|
||||
width: 83px
|
||||
}
|
||||
|
||||
#whatsapp-calls-home header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.whatsapp-settings-header-text,
|
||||
#whatsapp-status-home a,
|
||||
#whatsapp-calls-home a {
|
||||
font-weight: 600
|
||||
}
|
||||
|
||||
#whatsapp-calls-home nav i {
|
||||
padding: 7px
|
||||
}
|
||||
|
||||
.set-new-waypoint {
|
||||
object-fit: cover;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
#whatsapp-status-list {
|
||||
position: relative;
|
||||
top: 5px
|
||||
}
|
||||
|
||||
#whatsapp-status-list img {
|
||||
position: relative;
|
||||
top: 3px
|
||||
}
|
||||
|
||||
#whatsapp-call-history-list {
|
||||
position: relative;
|
||||
top: 0;
|
||||
height: 670px;
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
#whatsapp-status-list h4 {
|
||||
font-size: 17px;
|
||||
font-weight: 100;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
@keyframes whatsapp-call-animation {
|
||||
0% {
|
||||
box-shadow: #3291fe 0 0 0 0
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: #3291fe 0 0 0 3px
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: #3291fe 0 0 0 0
|
||||
}
|
||||
}
|
||||
+49
@@ -0,0 +1,49 @@
|
||||
#yellowpages-list {
|
||||
margin-top: 10px;
|
||||
padding-bottom: 110px;
|
||||
}
|
||||
|
||||
.yellow-pages-screen {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: var(--container-dark-background-color);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#create-yellow-page {
|
||||
position: sticky;
|
||||
bottom: 4%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0 30px;
|
||||
|
||||
}
|
||||
|
||||
#create-yellow-page button {
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 9999px;
|
||||
color: var(--invert-text-color);
|
||||
}
|
||||
|
||||
#yellowpages-list {
|
||||
min-height: 86%;
|
||||
max-height: 70%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#yellowpages-home-page header div {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#yellowpages-create-image-preview {
|
||||
object-fit: cover;
|
||||
}
|
||||
@@ -0,0 +1,266 @@
|
||||
#youtube-app-head {
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 7;
|
||||
}
|
||||
|
||||
#youtube-app-head::after {
|
||||
position: relative;
|
||||
content: '';
|
||||
background-color: var(--dark-border-color);
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
#youtube-otherPlays,
|
||||
#spotify-otherPlays {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#youtube-app-head-content {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: 5%;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#youtube-app-head-Img {
|
||||
position: relative;
|
||||
margin-left: 15px;
|
||||
margin-top: 15px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
#youtube-app-head a {
|
||||
position: relative;
|
||||
margin-left: 5px;
|
||||
margin-top: 15px;
|
||||
font-weight: 800;
|
||||
font-size: 22px;
|
||||
color: unset;
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#youtube-app-body {
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 78%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#youtube-app-body::-webkit-scrollbar,
|
||||
#youtube-app-search-page-body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.youtube-thumb-container img {
|
||||
height: 220px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.youtube-thumb-details {
|
||||
margin-top: 10px;
|
||||
padding: 0 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.youtube-thumb-details-contents {
|
||||
margin-left: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.youtube-thumb-details-head {
|
||||
font-size: 17px;
|
||||
color: var(--text-color);
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.youtube-thumb-details-content {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
font-size: 15px;
|
||||
color: gray;
|
||||
height: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.youtube-thumb-details-owner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#youtube-app-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
border-top: 1px solid var(--dark-border-color);
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
bottom: 7px;
|
||||
}
|
||||
|
||||
.youtube-app-footer-icon {
|
||||
font-size: 25px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.youtube-app-footer-text {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
#youtube-app-search-page-head {
|
||||
position: relative;
|
||||
top: 50px;
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#youtube-app-serach-page-head-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
bottom: 15px;
|
||||
width: 95%;
|
||||
height: 36px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 20px;
|
||||
margin: 0 auto;
|
||||
background: var(--container-dark-background-color);
|
||||
}
|
||||
|
||||
#youtube-app-serach-page-head-content i {
|
||||
margin-top: 15px;
|
||||
margin-right: 5px;
|
||||
font-size: 16px;
|
||||
color: gray
|
||||
}
|
||||
|
||||
#youtube-app-search-page-head::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background-color: #b5b5b5;
|
||||
width: 100%;
|
||||
height: 1;
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
#youtube-app-search-page-search {
|
||||
width: 85%;
|
||||
overflow: none;
|
||||
outline: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
border: none;
|
||||
color: gray;
|
||||
font-size: 17px;
|
||||
margin-left: 16px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
#youtube-app-search-page-search-icon {
|
||||
position: relative;
|
||||
right: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#youtube-app-search-page-body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 74%;
|
||||
top: 15px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#youtube-app-search-page-body, #youtube-thumb-container {
|
||||
position: relative;
|
||||
top: 20px;
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#showContent-container {
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
z-index: 99999999;
|
||||
transform: rotate(90deg);
|
||||
width: 771.96px;
|
||||
height: 1497.97px;
|
||||
top: -367.6px;
|
||||
left: -211.37px;
|
||||
}
|
||||
|
||||
#showContent-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#showContent-img {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
scale: 1.2;
|
||||
overflow: hidden;
|
||||
left: 77px;
|
||||
bottom: 40px;
|
||||
}
|
||||
|
||||
#showContent-img iframe {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#showContent-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
Reference in New Issue
Block a user