structura foldere
mutat kq- folders in un singur folder [kq]
This commit is contained in:
@@ -0,0 +1,67 @@
|
||||
.app-library {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
transition: ease all 0.3s;
|
||||
cursor: grab;
|
||||
backdrop-filter: blur(10px) saturate(180%);
|
||||
z-index: 50;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
transform-origin: 0 0 0;
|
||||
}
|
||||
|
||||
body[data-disableblur="true"] .app-library {
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.app-library i {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
color: gray;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
#app-library-list {
|
||||
position: relative;
|
||||
height: auto;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
#app-library-search-list {
|
||||
display: none;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
#app-library-search-list .w-full {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.app-library.out {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.app-library-border {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#app-library-category-show {
|
||||
left: 0px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: ease all 0.3s;
|
||||
}
|
||||
|
||||
#app-library-category-show.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.app-library-category-list {
|
||||
height: 18rem;
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
8366
resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/modules/bootstrap.css
vendored
Normal file
8366
resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/modules/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,74 @@
|
||||
:root {
|
||||
--closed-apps-border-radius: 30px;
|
||||
}
|
||||
|
||||
#closed-apps {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: cubic-bezier(0.075, 0.82, 0.165, 1) all 0.5s;
|
||||
background: rgba(0, 0, 0, 0.90);
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
#closed-apps.hideToLeft {
|
||||
transform: translateX(-100%);
|
||||
scale: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#closed-apps .closed-app {
|
||||
height: 80%;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
border-bottom-right-radius: var(--closed-apps-border-radius);
|
||||
border-bottom-left-radius: var(--closed-apps-border-radius);
|
||||
scale: 0.9
|
||||
}
|
||||
|
||||
.closed-app-wrapper {
|
||||
pointer-events: none;
|
||||
border-top-right-radius: var(--closed-apps-border-radius);
|
||||
border-top-left-radius: var(--closed-apps-border-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#closed-apps-wrapper {
|
||||
display: flex;
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
#closed-apps-wrapper figure a {
|
||||
color: white;
|
||||
font-size: 17px;
|
||||
margin-left: 7px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.swiper-slide-prev,
|
||||
.swiper-slide-next {
|
||||
transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.5s cubic-bezier(0.25, 0.1, 0.25, 1)
|
||||
}
|
||||
|
||||
.swiper-slide-prev {
|
||||
transform: scale(0.98) !important;
|
||||
z-index: -1;
|
||||
filter: brightness(0.7);
|
||||
}
|
||||
|
||||
.swiper-slide-next {
|
||||
transform: scale(1.02) !important;
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
|
||||
.closed-app.close {
|
||||
transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) all 0.7s;
|
||||
transform: translateY(-200%) !important
|
||||
}
|
||||
@@ -0,0 +1,421 @@
|
||||
.controlCenter {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
|
||||
z-index: 9999999999999;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.controlCenter * {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.controlCenter.up {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transform: translateY(-100px);
|
||||
}
|
||||
|
||||
.controlCenter .content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
bottom: 50px;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 85%;
|
||||
box-sizing: border-box;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.controlCenter .content .iconWrapper-wX2 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-content: space-between;
|
||||
width: 48%;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 20px;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.controlCenter .content .iconWrapper-wX2.padding {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.controlCenter .content .iconItem {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 15px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.controlCenter .content .iconItem.full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.controlCenter .content .iconItem.flashlight.activo {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.controlCenter .content .iconItem.flashlight.activo svg {
|
||||
color: #3777e4;
|
||||
}
|
||||
|
||||
.controlCenter .content .iconItem.grabarPantalla.activo {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.controlCenter .content .iconItem.grabarPantalla.activo svg {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.controlCenter .content .iconItem.grabarPantalla.activo svg circle.filled {
|
||||
transform-origin: center;
|
||||
animation: grabarPantalla 1s linear infinite;
|
||||
}
|
||||
|
||||
.control-center-input-icon {
|
||||
height: 6.5rem;
|
||||
right: 9px;
|
||||
width: 100% !important;
|
||||
display: flex;
|
||||
margin: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.control-center-input-container {
|
||||
width: 110.28px;
|
||||
height: 45.95px;
|
||||
}
|
||||
|
||||
.controlCenter .content .iconItem svg,
|
||||
.control-center-input-icon svg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
min-width: 25px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.control-center-input-icon svg {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
left: 10%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
:where(.controlCenter .content .iconItem, .control-center-input-icon) svg path,
|
||||
:where(.controlCenter .content .iconItem, .control-center-input-icon) svg circle,
|
||||
:where(.controlCenter .content .iconItem, .control-center-input-icon) svg rect {
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-miterlimit: 10;
|
||||
}
|
||||
|
||||
:where(.controlCenter .content .iconItem, .control-center-input-icon) svg path.filled,
|
||||
:where(.controlCenter .content .iconItem, .control-center-input-icon) svg circle.filled,
|
||||
:where(.controlCenter .content .iconItem, .control-center-input-icon) svg rect.filled {
|
||||
stroke: none;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.controlCenter .content .iconsGroup {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
padding: 7px !important;
|
||||
}
|
||||
|
||||
.controlCenter .content .iconsGroup .icon {
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.controlCenter .content .iconsGroup .icon.activo .ico {
|
||||
background-color: #3777e4;
|
||||
}
|
||||
|
||||
.controlCenter .content .iconsGroup .icon.modoVuelo.activo .ico {
|
||||
background-color: #ff8e00;
|
||||
}
|
||||
|
||||
.controlCenter .content .iconsGroup .icon.datosCelulares.activo .ico {
|
||||
background-color: #00dc54;
|
||||
}
|
||||
|
||||
.controlCenter .content .iconsGroup .icon .ico {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
padding: 15px;
|
||||
margin: 5px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
transition: ease all 0.3s;
|
||||
}
|
||||
|
||||
.controlCenter .content .iconsGroup .icon .ico svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.controlCenter .content .iconsGroup .icon .ico svg path {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.controlCenter .content .iconsGroup .icon .txt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.controlCenter .content .musicWdg {
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.controlCenter .content .musicWdg p {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.controlCenter .content .musicWdg p.artistName {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.controlCenter .content .musicWdg .icons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.controlCenter .content .musicWdg .icons .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.controlCenter .content .musicWdg .icons .icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.controlCenter .content .musicWdg .icons .icon svg path {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.displayOptions {
|
||||
position: relative;
|
||||
height: 160px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.controlCenter .content .displayOptions .actionIcon {
|
||||
transition: ease all 0.3s;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.controlCenter .content .displayOptions .actionIcon.activo {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.controlCenter .content .displayOptions .actionIcon.activo.lockOrientacion .lockIcon {
|
||||
background-color: #d24f54;
|
||||
}
|
||||
|
||||
.controlCenter .content .displayOptions .actionIcon.activo.lockOrientacion .lockIcon:before {
|
||||
border-color: #d24f54;
|
||||
}
|
||||
|
||||
.controlCenter .content .displayOptions .actionIcon.activo.lockOrientacion svg {
|
||||
color: #d24f54;
|
||||
}
|
||||
|
||||
.controlCenter .content .displayOptions .lockIcon {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 6px;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
margin-right: 3px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.controlCenter .content .displayOptions .lockIcon:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 2px;
|
||||
height: 6px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.controlCenter .content .displayOptions .moon.activo svg path {
|
||||
fill: #7c517c;
|
||||
}
|
||||
|
||||
.controlCenter .content .displayOptions .moon svg path {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.controlCenter .content .displayOptions .duplicate {
|
||||
flex-wrap: nowrap;
|
||||
height: 35px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.controlCenter .content .displayOptions .duplicate p {
|
||||
font-size: 15px;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
width: 95px;
|
||||
white-space: nowrap;
|
||||
/* Evita que el texto se divida en varias líneas */
|
||||
overflow: hidden;
|
||||
/* Oculta el texto que sobrepasa el ancho */
|
||||
text-overflow: ellipsis;
|
||||
/* Muestra puntos suspensivos (...) si el texto sobrepasa el ancho */
|
||||
}
|
||||
|
||||
.controlCenter .content .fullBars .fullBar {
|
||||
align-content: flex-end;
|
||||
height: calc(100% - 30px);
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.controlCenter .content .fullBars .fullBar.volumen:before {
|
||||
height: 45%;
|
||||
}
|
||||
|
||||
.controlCenter .content .fullBars .fullBar:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.controlCenter .content .fullBars .fullBar svg {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.controlCenter .content .textGroup {
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.controlCenter .content .textGroup .icono {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 10px auto;
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
.controlCenter .content .textGroup .icono svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.controlCenter .content .textGroup .icono svg path,
|
||||
.controlCenter .content .textGroup .icono svg circle {
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke: currentColor;
|
||||
stroke-linecap: round;
|
||||
stroke-miterlimit: 10;
|
||||
}
|
||||
|
||||
.controlCenter .content .textGroup .link {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
color: #3777e4;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.controlCenter .hiddenCC {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.controlCenter .hiddenCC:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
height: 4px;
|
||||
border-radius: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.ios-range {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
inset: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
outline: none;
|
||||
border-radius: 13px;
|
||||
box-shadow: 0 0 0 2px transparent;
|
||||
transform-origin: 35% 35%;
|
||||
}
|
||||
|
||||
.ios-range::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 5px;
|
||||
height: 40px;
|
||||
border: 1px solid #fff;
|
||||
background: #fff;
|
||||
|
||||
box-shadow: -100vw 0 0 100vw #fff;
|
||||
}
|
||||
|
||||
.ios-range::-moz-range-thumb {
|
||||
background: #fff;
|
||||
}
|
||||
@@ -0,0 +1,433 @@
|
||||
:root {
|
||||
--transition-property: ease-in-out
|
||||
}
|
||||
|
||||
#phone-dynamic-island:not(.active) :not(#phone-camera) {
|
||||
scale: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
transition: .2s all;
|
||||
}
|
||||
|
||||
.phone-notification-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
transition: var(--transition-property) all 0.4s;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.phone-notification-container .notification-title {
|
||||
position: relative;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.phone-notification-container.showing {
|
||||
padding: 2rem 2rem 2rem 2rem;
|
||||
}
|
||||
|
||||
.phone-lockscreen-island.showing {
|
||||
width: 100%;
|
||||
padding-top: 2.1rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
#phone-dynamic-island.active {
|
||||
max-width: 90%;
|
||||
width: 90%;
|
||||
padding: 4px;
|
||||
scale: 1;
|
||||
}
|
||||
|
||||
#phone-dynamic-island.removing {
|
||||
width: var(--dynamic-island-default-width);
|
||||
height: var(--dynamic-island-default-height);
|
||||
}
|
||||
|
||||
.phone-dynamic-island-child {
|
||||
width: 0;
|
||||
height: 0px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.phone-dynamic-island-child:not(.showing) {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.phone-dynamic-island-child.showing {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all .4s ease-in-out;
|
||||
}
|
||||
|
||||
.phone-currentcall-action-btn {
|
||||
width: 4.2rem;
|
||||
height: 4.2rem;
|
||||
border-radius: 50%;
|
||||
background-color: #ff2a1b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#phone-dynamic-island:has(.phone-airplane-mode-island.showing) {
|
||||
width: 80%;
|
||||
height: var(--dynamic-island-default-height);
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#phone-dynamic-island:has(.phone-airplane-mode-disabled-island.showing) {
|
||||
width: 80%;
|
||||
height: var(--dynamic-island-default-height);
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.silence-mode-bell {
|
||||
background: orangered;
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
padding: 2px;
|
||||
padding-left: 18px;
|
||||
border-radius: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#phone-airplane-mode-island {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.phone-airplane-mode-disabled-island a {
|
||||
color: white;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.phone-airplane-mode-disabled-island .silence-mode-bell {
|
||||
background: transparent;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#phone-dynamic-island:has(.phone-low-battery-island.showing) {
|
||||
width: 82%;
|
||||
height: var(--dynamic-island-default-height);
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#phone-dynamic-island:has(.phone-spotify-island.showing, .phone-lockscreen-island.showing) {
|
||||
width: 47%;
|
||||
height: var(--dynamic-island-default-height);
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#phone-dynamic-island:has(.phone-currentcall-container.showing) {
|
||||
height: var(--dynamic-island-default-height);
|
||||
width: var(--dynamic-island-signals-width);
|
||||
padding: 0.2rem 0px;
|
||||
}
|
||||
|
||||
#phone-dynamic-island:has(#phone-currentcall-outgoing.active) {
|
||||
height: 5%;
|
||||
width: 80%;
|
||||
padding: 0.5rem 0px;
|
||||
}
|
||||
|
||||
#phone-dynamic-island:has(#phone-currentcall-incoming.active) {
|
||||
height: 5%;
|
||||
width: 80%;
|
||||
padding: 0.3rem 0px;
|
||||
}
|
||||
|
||||
.phone-currentcall-container.showing:has(#phone-currentcall-ongoing.active) {
|
||||
width: 100%;
|
||||
padding: 0.7rem 1rem 3rem 1rem;
|
||||
}
|
||||
|
||||
|
||||
.phone-currentcall-container.showing:not(:has(#phone-currentcall-ongoing.active)) {
|
||||
width: 100%;
|
||||
padding: 0.1rem 1rem 3rem 1rem;
|
||||
}
|
||||
|
||||
#phone-dynamic-island:has(.phone-currentcall-container.showing) #phone-currentcall-ongoing-informations {
|
||||
opacity: 1;
|
||||
visibility: 1;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transition: width .05s, height .3s, opacity .3s ease-in-out;
|
||||
}
|
||||
|
||||
#phone-dynamic-island:has(.phone-currentcall-container.active) #phone-currentcall-ongoing-informations {
|
||||
opacity: 0;
|
||||
visibility: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
#phone-dynamic-island:has(.phone-currentcall-container.showing) #phone-currentcall-ongoing-interactions {
|
||||
opacity: 0;
|
||||
visibility: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
#phone-dynamic-island:has(.phone-currentcall-container.active) #phone-currentcall-ongoing-interactions {
|
||||
opacity: 1;
|
||||
visibility: 1;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transition: all .4s ease-in-out;
|
||||
}
|
||||
|
||||
#phone-dynamic-island:not(:has(#phone-currentcall-incoming.hide)) {
|
||||
height: 9%;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#phone-dynamic-island.active:has(.phone-spotify-island.active) {
|
||||
width: 90%;
|
||||
height: 24%;
|
||||
}
|
||||
|
||||
#phone-dynamic-island.active:has(.phone-notification-container.showing) {
|
||||
width: 90%;
|
||||
height: 15%;
|
||||
}
|
||||
|
||||
#phone-dynamic-island.active:has(.facetime-current-call-interactions.showing) {
|
||||
width: 90%;
|
||||
padding: 12px;
|
||||
height: fit-content;
|
||||
transition: height .6s, width .3s;
|
||||
}
|
||||
|
||||
#phone-dynamic-island.active:has(.phone-currentcall-container.active) {
|
||||
width: 85%;
|
||||
height: 15.7%;
|
||||
}
|
||||
|
||||
.phone-currentcall-container.active {
|
||||
width: 100%;
|
||||
/* fix for height animation */
|
||||
padding: 3rem 1rem 1rem 1rem !important;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.phone-spotify-island.showing {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:where(.phone-spotify-island, .phone-lockscreen-island, .phone-notification-container) * {
|
||||
transition: var(--transition-property) all 0.4s;
|
||||
}
|
||||
|
||||
.phone-spotify-island :is(#phone-spotify-island-informations, footer) {
|
||||
opacity: 0;
|
||||
scale: 0;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.phone-spotify-island.active :is(#phone-spotify-island-informations, footer) {
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transition: .4s ease-in-out;
|
||||
}
|
||||
|
||||
.phone-spotify-island.active {
|
||||
width: 100%;
|
||||
/* fix for height animation */
|
||||
padding: 5rem 3rem 3rem 3rem;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.phone-spotify-island.active img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.phone-spotify-island .slider {
|
||||
width: 70% !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.phone-spotify-island span {
|
||||
font-size: 12px !important;
|
||||
position: unset !important;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.phone-currentcall-title {
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.phone-currentcall-contact {
|
||||
margin-top: 2px;
|
||||
font-size: 10px;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.phone-currentcall-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.phone-currentcall-cancel {
|
||||
color: #fff;
|
||||
padding: 4px 22px;
|
||||
background-color: #ff2a1b;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.phone-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;
|
||||
}
|
||||
|
||||
.phone-fast-call-button.ongoing {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
}
|
||||
|
||||
.phone-fast-call-button i {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.phone-fast-call-button.ongoing i {
|
||||
font-size: 25px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.phone-fast-call-button[data-type='microphone'].active {
|
||||
background: #ff2a1b;
|
||||
}
|
||||
|
||||
.phone-fast-call-button[data-type='speaker'].active {
|
||||
background: #3cb7e7;
|
||||
}
|
||||
|
||||
.phone-fast-call-button[data-type='video'].active {
|
||||
/* give me a good color orange */
|
||||
background-color: orange
|
||||
}
|
||||
|
||||
.phone-fast-call-button[data-type='video'].waiting {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.phone-fast-call-button.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.audio-icon {
|
||||
width: 20px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.phone-spotify-island.active .audio-icon {
|
||||
width: 26px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.phone-spotify-island .track {
|
||||
width: 210px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.audio-icon .audio-icon-nib {
|
||||
width: 7.2px;
|
||||
background: #fff;
|
||||
margin-right: 2px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.audio-icon .audio-icon-nib:nth-child(even) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.audio-icon .audio-icon-nib:nth-child(odd) {
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.audio-icon.is-active .audio-icon-nib:nth-child(even) {
|
||||
animation: 0.4s ease-in-out 0.15s infinite alternate pulseDownUp;
|
||||
}
|
||||
|
||||
.audio-icon.is-active .audio-icon-nib:nth-child(odd) {
|
||||
animation: 0.4s ease-in-out 0.25s infinite alternate pulseUpDown;
|
||||
}
|
||||
|
||||
.audio-icon.is-active .audio-icon-nib:nth-child(3) {
|
||||
animation: 0.4s ease-in-out 0.15s infinite alternate pulseUpDownFar;
|
||||
}
|
||||
|
||||
@keyframes pulseUpDown {
|
||||
from {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleY(2);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulseUpDownFar {
|
||||
from {
|
||||
transform: scaleY(1.8);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleY(2.8);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulseDownUp {
|
||||
from {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleY(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.audio-icon+.audio-icon,
|
||||
.audio-icon+button {
|
||||
margin-left: 36px;
|
||||
}
|
||||
|
||||
#phone-currentcall-incoming img {
|
||||
margin-top: 5px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
#phone-currentcall-caller a {
|
||||
font-size: 15px;
|
||||
}
|
||||
@@ -0,0 +1,779 @@
|
||||
.dropdown-menu.textcomplete-dropdown[data-strategy='emojionearea'] {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
min-width: 160px;
|
||||
padding: 5px 0;
|
||||
margin: 2px 0 0;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
background-color: #fff;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
|
||||
.dropdown-menu.textcomplete-dropdown[data-strategy='emojionearea'] li.textcomplete-item {
|
||||
font-size: 14px;
|
||||
padding: 1px 3px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu.textcomplete-dropdown[data-strategy='emojionearea'] li.textcomplete-item a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
height: 100%;
|
||||
line-height: 1.8em;
|
||||
padding: 0 1.54em 0 0.615em;
|
||||
color: #4f4f4f;
|
||||
}
|
||||
|
||||
.dropdown-menu.textcomplete-dropdown[data-strategy='emojionearea'] li.textcomplete-item.active,
|
||||
.dropdown-menu.textcomplete-dropdown[data-strategy='emojionearea'] li.textcomplete-item:hover {
|
||||
background-color: #e4e4e4;
|
||||
}
|
||||
|
||||
.dropdown-menu.textcomplete-dropdown[data-strategy='emojionearea'] li.textcomplete-item.active a,
|
||||
.dropdown-menu.textcomplete-dropdown[data-strategy='emojionearea'] li.textcomplete-item:hover a {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.dropdown-menu.textcomplete-dropdown[data-strategy='emojionearea'] li.textcomplete-item .emojioneemoji {
|
||||
font-size: inherit;
|
||||
height: 2ex;
|
||||
width: 2.1ex;
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
display: inline-block;
|
||||
margin: 0 5px 0.2ex 0;
|
||||
line-height: normal;
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.emojionearea-text .emojioneemoji,
|
||||
.emojionearea-text [class*='emojione-'] {
|
||||
font-size: inherit;
|
||||
height: 2ex;
|
||||
width: 2.1ex;
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
display: inline-block;
|
||||
margin: -0.2ex 0.15em 0.2ex;
|
||||
line-height: normal;
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.emojionearea,
|
||||
.emojionearea * {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.emojionearea.emojionearea-disable {
|
||||
position: relative;
|
||||
background-color: #eee;
|
||||
-moz-user-select: -moz-none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.emojionearea.emojionearea-disable:before {
|
||||
content: '';
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
opacity: 0.3;
|
||||
position: absolute;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.emojionearea,
|
||||
.emojionearea.form-control {
|
||||
display: block;
|
||||
position: relative !important;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-moz-transition: border-color 0.15s ease-in-out,
|
||||
-moz-box-shadow 0.15s ease-in-out;
|
||||
-o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
-webkit-transition: border-color 0.15s ease-in-out,
|
||||
-webkit-box-shadow 0.15s ease-in-out;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
/* .emojionearea.focused {
|
||||
border-color: #66afe9;
|
||||
outline: 0;
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
|
||||
0 0 8px rgba(102, 175, 233, 0.6);
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
|
||||
0 0 8px rgba(102, 175, 233, 0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
|
||||
0 0 8px rgba(102, 175, 233, 0.6);
|
||||
} */
|
||||
.emojionearea .emojionearea-editor {
|
||||
display: block;
|
||||
height: auto;
|
||||
min-height: 8em;
|
||||
max-height: 15em;
|
||||
overflow: auto;
|
||||
padding: 6px 24px 6px 12px;
|
||||
line-height: 1.42857143;
|
||||
font-size: inherit;
|
||||
color: #555;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
cursor: text;
|
||||
margin-right: 1px;
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
border-radius: 0;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-editor:empty:before {
|
||||
content: attr(placeholder);
|
||||
display: block;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-editor:focus {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-editor .emojioneemoji,
|
||||
.emojionearea .emojionearea-editor [class*='emojione-'] {
|
||||
font-size: inherit;
|
||||
height: 2ex;
|
||||
width: 2.1ex;
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
display: inline-block;
|
||||
margin: -0.2ex 0.15em 0.2ex;
|
||||
line-height: normal;
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.emojionearea.emojionearea-inline {
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.emojionearea.emojionearea-inline>.emojionearea-editor {
|
||||
height: 32px;
|
||||
min-height: 20px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 12px;
|
||||
right: 24px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.emojionearea.emojionearea-inline>.emojionearea-button {
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-button {
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 3px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
-moz-transition: opacity 0.3s ease-in-out;
|
||||
-o-transition: opacity 0.3s ease-in-out;
|
||||
-webkit-transition: opacity 0.3s ease-in-out;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-button>div {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
-moz-transition: all 0.4s ease-in-out;
|
||||
-o-transition: all 0.4s ease-in-out;
|
||||
-webkit-transition: all 0.4s ease-in-out;
|
||||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-button>div.emojionearea-button-open {
|
||||
background-position: 0 -24px;
|
||||
filter: alpha(enabled=false);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-button>div.emojionearea-button-close {
|
||||
background-position: 0 0;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
filter: alpha(Opacity=0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-button.active>div.emojionearea-button-open {
|
||||
-webkit-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
filter: alpha(Opacity=0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-button.active>div.emojionearea-button-close {
|
||||
-webkit-transform: rotate(0);
|
||||
-o-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
filter: alpha(enabled=false);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker {
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.32);
|
||||
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.32);
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.32);
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
height: 276px;
|
||||
width: 316px;
|
||||
top: -15px;
|
||||
right: -15px;
|
||||
z-index: 90;
|
||||
-moz-transition: all 0.25s ease-in-out;
|
||||
-o-transition: all 0.25s ease-in-out;
|
||||
-webkit-transition: all 0.25s ease-in-out;
|
||||
transition: all 0.25s ease-in-out;
|
||||
filter: alpha(Opacity=0);
|
||||
opacity: 0;
|
||||
-moz-user-select: -moz-none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.emojionearea-wrapper .emojionearea-search {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-wrapper {
|
||||
position: relative;
|
||||
height: 276px;
|
||||
width: 316px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-wrapper:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 91;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-filters {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 95;
|
||||
background: #f5f7f9;
|
||||
padding: 0 0 0 7px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter {
|
||||
display: block;
|
||||
float: left;
|
||||
height: 40px;
|
||||
width: 32px;
|
||||
padding: 7px 1px 0;
|
||||
cursor: pointer;
|
||||
-webkit-filter: grayscale(1);
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter.active {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter.active,
|
||||
.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter:hover {
|
||||
-webkit-filter: grayscale(0);
|
||||
filter: grayscale(0);
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter>i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter>img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-search-panel {
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
z-index: 95;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 5px 0 5px 8px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-search-panel .emojionearea-tones {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones-panel .emojionearea-tones {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 171px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-search {
|
||||
float: left;
|
||||
padding: 0;
|
||||
height: 20px;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-search>input {
|
||||
outline: 0;
|
||||
width: 160px;
|
||||
min-width: 160px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones {
|
||||
padding: 0;
|
||||
width: 120px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
outline: 0;
|
||||
background: 0 0;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-0,
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-0:after {
|
||||
background-color: #ffcf3e;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-1,
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-1:after {
|
||||
background-color: #fae3c5;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-2,
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-2:after {
|
||||
background-color: #e2cfa5;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-3,
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-3:after {
|
||||
background-color: #daa478;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-4,
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-4:after {
|
||||
background-color: #a78058;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-5,
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-5:after {
|
||||
background-color: #5e4d43;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-bullet>.btn-tone,
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-square>.btn-tone {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-bullet>.btn-tone:after,
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-square>.btn-tone:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-bullet>.btn-tone.active:after,
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-square>.btn-tone.active:after {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone,
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-radio>.btn-tone {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone.active:after,
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-radio>.btn-tone.active:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
border: 2px solid #fff;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
box-sizing: initial;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-block:after,
|
||||
.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-block:before,
|
||||
.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-block>.emojionearea-category:after,
|
||||
.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-block>.emojionearea-category:before,
|
||||
.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-title:after,
|
||||
.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-title:before {
|
||||
content: ' ';
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-bullet>.btn-tone,
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-bullet>.btn-tone:after,
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-radio>.btn-tone,
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-radio>.btn-tone:after {
|
||||
-moz-border-radius: 100%;
|
||||
-webkit-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone,
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone:after,
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-square>.btn-tone,
|
||||
.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-square>.btn-tone:after {
|
||||
-moz-border-radius: 1px;
|
||||
-webkit-border-radius: 1px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-scroll-area {
|
||||
height: 236px;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
padding: 0 0 5px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-search-panel+.emojionearea-scroll-area {
|
||||
height: 206px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-emojis-list {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-title {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #b2b2b2;
|
||||
background: #fff;
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
padding: 7px 0 5px 6px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-block {
|
||||
padding: 0 0 0 7px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-block>.emojionearea-category {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-scroll-area [class*='emojione-'] {
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
margin: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn {
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
float: left;
|
||||
display: block;
|
||||
margin: 1px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn:hover {
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
background-color: #e4e4e4;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn i,
|
||||
.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn img {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn img.lazy-emoji {
|
||||
filter: alpha(Opacity=0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker.emojionearea-filters-position-top .emojionearea-filters {
|
||||
top: 0;
|
||||
-moz-border-radius-topleft: 5px;
|
||||
-webkit-border-top-left-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
-moz-border-radius-topright: 5px;
|
||||
-webkit-border-top-right-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker.emojionearea-filters-position-top.emojionearea-search-position-top .emojionearea-scroll-area {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker.emojionearea-filters-position-top.emojionearea-search-position-bottom .emojionearea-scroll-area {
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker.emojionearea-filters-position-top.emojionearea-search-position-bottom .emojionearea-search-panel {
|
||||
top: initial;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom .emojionearea-filters {
|
||||
bottom: 0;
|
||||
-moz-border-radius-bottomleft: 5px;
|
||||
-webkit-border-bottom-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
-moz-border-radius-bottomright: 5px;
|
||||
-webkit-border-bottom-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom.emojionearea-search-position-bottom .emojionearea-scroll-area {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom.emojionearea-search-position-bottom .emojionearea-search-panel,
|
||||
.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom.emojionearea-search-position-top .emojionearea-scroll-area {
|
||||
top: initial;
|
||||
bottom: 40px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom.emojionearea-search-position-top .emojionearea-search-panel {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker.emojionearea-picker-position-top {
|
||||
margin-top: -286px;
|
||||
right: -14px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker.emojionearea-picker-position-top .emojionearea-wrapper:after {
|
||||
width: 19px;
|
||||
height: 10px;
|
||||
background-position: -2px -49px;
|
||||
bottom: -10px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker.emojionearea-picker-position-top.emojionearea-filters-position-bottom .emojionearea-wrapper:after {
|
||||
background-position: -2px -80px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker.emojionearea-picker-position-left,
|
||||
.emojionearea .emojionearea-picker.emojionearea-picker-position-right {
|
||||
margin-right: -326px;
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker.emojionearea-picker-position-left .emojionearea-wrapper:after,
|
||||
.emojionearea .emojionearea-picker.emojionearea-picker-position-right .emojionearea-wrapper:after {
|
||||
width: 10px;
|
||||
height: 19px;
|
||||
background-position: 0 -60px;
|
||||
top: 13px;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker.emojionearea-picker-position-left.emojionearea-filters-position-bottom .emojionearea-wrapper:after,
|
||||
.emojionearea .emojionearea-picker.emojionearea-picker-position-right.emojionearea-filters-position-bottom .emojionearea-wrapper:after {
|
||||
background-position: right -60px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom {
|
||||
margin-top: 10px;
|
||||
right: -14px;
|
||||
top: 47px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom .emojionearea-wrapper:after {
|
||||
width: 19px;
|
||||
height: 10px;
|
||||
background-position: -2px -100px;
|
||||
top: -10px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom.emojionearea-filters-position-bottom .emojionearea-wrapper:after {
|
||||
background-position: -2px -90px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-button.active+.emojionearea-picker {
|
||||
filter: alpha(enabled=false);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-button.active+.emojionearea-picker-position-top {
|
||||
margin-top: -269px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-button.active+.emojionearea-picker-position-left,
|
||||
.emojionearea .emojionearea-button.active+.emojionearea-picker-position-right {
|
||||
margin-right: -309px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-button.active+.emojionearea-picker-position-bottom {
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
.emojionearea.emojionearea-standalone {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.emojionearea.emojionearea-standalone .emojionearea-editor {
|
||||
min-height: 33px;
|
||||
position: relative;
|
||||
padding: 6px 42px 6px 6px;
|
||||
}
|
||||
|
||||
.emojionearea.emojionearea-standalone .emojionearea-editor::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 50%;
|
||||
bottom: 4px;
|
||||
border-left: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.emojionearea.emojionearea-standalone .emojionearea-editor.has-placeholder .emojioneemoji {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.emojionearea.emojionearea-standalone .emojionearea-button {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.emojionearea.emojionearea-standalone .emojionearea-button>div {
|
||||
right: 6px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-bottom .emojionearea-wrapper:after,
|
||||
.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-top .emojionearea-wrapper:after {
|
||||
right: 23px;
|
||||
}
|
||||
|
||||
.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-left .emojionearea-wrapper:after,
|
||||
.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-right .emojionearea-wrapper:after {
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.emojionearea .emojionearea-button>div,
|
||||
.emojionearea .emojionearea-picker .emojionearea-wrapper:after {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAABuCAYAAADMB4ipAAAHfElEQVRo3u1XS1NT2Rb+9uOcQF4YlAJzLymFUHaLrdxKULvEUNpdTnRqD532f+AHMLMc94gqR1Zbt8rBnUh3YXipPGKwRDoWgXvrYiFUlEdIkPPYZ/dAkwox5yQCVt/bzRrBPnt9e+211/etFeDQDu3ArL+/X37OeqmRWoH7+vpItfWawStF1tfXR+zW9xW5ne0p8loOcAKuCdwpRft60C8a+X5zTvebCqcAvmidf1GGHtqhHdpf1qqKzsrKipyensbi4iKWl5cBAMFgEG1tbYhGo2hpadlbmxseHpaDg4MAgI6ODng8HgBAPp/H/Pw8AODatWvo7e2tvUHrui7v3r2L+fl5XL58GVeuXIHH49m1N5/Py0ePHmF0dBQdHR24desWVFXdtYdXAn/48CHm5+dx8+ZNRKPRigEUDpuenpb3799H4YaOnWh5eVmOj48jFoshGo0STdPkwMCAXF5elqV7BgYGpKZpMhqNklgshrGxMbx580Y6gicSCTDGEIvFAADpdBqpVArJZLK4J5lMIpVKIZ1OAwBisRgYY0gkEs6Rp1IphMNh+Hw+AgCGYQAANE0r7in8Xfjm8/lIOBzGq1evnMHX19fR1NRU/D8UCoFzjnA4XFwLh8PgnCMUChXXmpqakM1mUfVBS62xsZHk83lZWi1nz579ZA0AhBDO4A0NDchkMsWSJIRAURRiVy26rktVVUkmk0EgEHAGP3XqFKamppDP56Vpmrhz5w5u374t/X4/OP+w3TRNZLNZ6LoO0zSRz+dlf38/Ll686Jzz8+fPQwiBeDwOt9tNrl+/jkwmU6yaQpVkMhncuHEDbrebxONxCCEQiUScIw8Gg+TBgwdyZGQEyWRSdnV1kVQqJYeGhrC6ugrGGEKhEHp7e3Hy5EmSTCblvXv30NPTg2AwSA6M/vF4HCMjI7b0/yzh8vv9AIBsNrt34aokuQsLC7skt729varkHtqftUFf++FHsrq0QN3eBvp68Tfvf9Mv12oFCYU7G//e9nVuO7dpNbe2W4M//yQr0p8yRvyBo1Zr++lwLcCt7afD/sBRizJGavrB1dDYYh47Htrq+Kb7jBNwxzfdZ44dD201NLaYVUkU7ozQpuAJBkARwnRZpunN5zaa5hJjiXLH05GeiMd7JEM5zzHGNQBGZvk/Iv0yYVWMvK0zKk1Dl6ahW5RQobjqdjy+wEZn9PKF0n2d0csXPL7AhuKq26GECtPQLdPQZVtn1LlB69p7yRVVSEiDEGJwRd12e4+8PR3piRQidnuPvOWKuk0IMSSkwRVV6Np7WVVbSqvGsgSnlKkAFNPQXdrOtuKqcxtcUTUAhmUJnVJmlleJo3CVHmAaOlPUOmYJkxFKibQsSRkXhr4juKIKO2BHVSwcoLrqCVdUYho6K3YYRRWmoUtdey/tgKtK7rUffiQAsLq08MnbNLe2WwBgB/zHzueFyD8nwlIfbvdx8eU0WV1aKD1cVAMs9+F2j9gUPEEKemEJIe3AnXy4XfkBoNKSZHNthWfX31EA69VKttyHVyIOY1wRwmS6tqNsrr31vXo5k/bUu4gT2cp9lhbm0rzCJpeUUrE0vS63+c7/6uXMbDUWl/ssLczNFrVFddUT09AZpUy1LKvO0DVfPrfR9HxqfNbuEe185l9MFX3o6tIC5YpKFLWOfdQQ93Zu49j0+FDCDtjOp1yaOQCYhs4Y40wI05XfWj8yPT40Ua2ey33mEmMTtp2IUEq0nW3FKeJPGPjRp1Iz2QUuLUu66txG9NLVSK3gBZ+C1lcE54oqKOOCK6rm8QU2unu+u1ANuNynvFsBAG1ubbdMQ5eGviMAFDuP0w3sfMpvQEtb24fOQncU1bXl8R7JnOu+ZNv97XxKJwY6+PNPsrm13drObVqUMlMIU5OWpVHOc96Go5lTnV2fzC/VfAozD7HTCa6olBBa1Imlhbmq2lLuQ5xaW6nCPfnln0Yt7bDUhzhps8cfKH5//uTXmvS81OeLdqI/ZoROzSZrHqG/OvOPzxuhK5VgJTvV2bW3EdqJRABwrvvS/kfoSkoZvXT1YEbociHr7vnuYEfogpBFL109HKH/h0fomnXg3Lff79r7/MmvVbWG7gX4QObzc99+Tz7mHKah05KcW6ahQ9feS6cbMCdgt7eBWJagjCuUAC5tZzuouuo0Spm0hElc9R4cbf4bVl8v1p6WUmCuqEwIs34ruxaeeTy4uJVd67As08UVlVmWoG5vA7FLG3WMmHEupVTyW+vh2cn4DADMTsaTuc21LiGEhzHOnQ6gNtMrJSBMCKHkNt999WLi0S7hejEZH81n174WpukiIMw0dKq66p3Bw50RwhUVXFGJKUy28Xal48VkfKrSlWenhsc23q2cEB9SR7iiItwZIbbgHn8AlDFCCMW7laXjqZnHjkNpaubJzNuVpWZCKChjxOMPVH/QlaW0f/G3ZLqWWl6ce/bvlddp7yFD/w8Z+njoX1+GoZMjgzMAMDkyeLAMnRh+uKveJ0YGD4ahEyODFRk6OfrL/hj67GnckaHPng7vjaGzyYmaGDr77KktQ38H8tqx8Wja+WIAAAAASUVORK5CYII=) !important;
|
||||
}
|
||||
|
||||
.emojionearea.emojionearea-standalone .emojionearea-editor.has-placeholder {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 20px 4px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAC/v79T5hyIAAAAAXRSTlMAQObYZgAAABNJREFUCNdjYGNgQEb/P4AQqiAASiUEG6Vit44AAAAASUVORK5CYII=) !important;
|
||||
}
|
||||
@@ -0,0 +1,560 @@
|
||||
.phone-applications.moveOut {
|
||||
transition: none;
|
||||
transform: translateX(100%) scale(1) !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.phone-applications.moveLeft {
|
||||
transition: none;
|
||||
opacity: 0 !important;
|
||||
transform: translateX(-100%) !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wrapperApps.hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.wrapperDots {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
transition: all 0.4s ease-in-out;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.wrapperDots .dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin: 5px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.wrapperDots.active {
|
||||
opacity: 1;
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.phone-footer-applications-search {
|
||||
width: auto;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
transition: all 0.4s ease-in-out;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
#phone-footer-applications-wrapper:has(.wrapperDots.active)
|
||||
.phone-footer-applications-search {
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.phone-dots-container {
|
||||
background-color: var(--phone-footer-background);
|
||||
padding: 7px 12px;
|
||||
margin: 0 auto;
|
||||
width: max-content;
|
||||
border-radius: 15px;
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.wrapperDots .dot.active {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.phone-widget-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 18rem;
|
||||
grid-column: span 2;
|
||||
grid-row: span 2;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.phone-widget {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-radius: 22px;
|
||||
background-color: var(--widget-background);
|
||||
backdrop-filter: blur(5px);
|
||||
width: 100%;
|
||||
height: 18rem;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
body[data-disableblur="true"] .phone-widget {
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.phone-widget * {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.phone-widget-name {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.phone-app-container:is(:not(.phone-footer-applications)) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 10px 12px;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.app-unread-alerts {
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
top: -5px;
|
||||
font-size: 13px;
|
||||
padding: 6px;
|
||||
border-radius: 15px;
|
||||
line-height: 7px;
|
||||
color: white;
|
||||
background: #ff2306;
|
||||
text-align: center;
|
||||
min-width: 22px;
|
||||
max-width: 56px;
|
||||
height: 20px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px, rgba(0, 0, 0, 0.23) 0 3px 6px;
|
||||
}
|
||||
|
||||
.phone-home-applications {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
min-width: 100%;
|
||||
gap: 24px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:is(.phone-application-wrapper, .phone-group-application-wrapper).shake {
|
||||
animation: shake_xxx 0.2s linear alternate infinite;
|
||||
-webkit-transform-origin: 50% 10%;
|
||||
transform-origin: 50% 10%;
|
||||
}
|
||||
|
||||
.phone-group-application-wrapper .remove-application {
|
||||
left: 1.25rem;
|
||||
}
|
||||
|
||||
.phone-footer-applications .phone-applications-app-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#wrapper-apps-container {
|
||||
height: calc(100% - 20%);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.wrapperApps {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-content: center;
|
||||
cursor: grab;
|
||||
margin: 0 auto;
|
||||
gap: 16px;
|
||||
transition: transform all 1s;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.phone-applications.hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.phone-application {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transition: filter 0.2s ease-in-out, -webkit-filter 0.2s ease-in-out;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.phone-application:hover {
|
||||
filter: brightness(0.85);
|
||||
-webkit-filter: brightness(0.85);
|
||||
}
|
||||
|
||||
.phone-home-button-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
z-index: 999999999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.phone-home-button {
|
||||
width: 150px;
|
||||
height: 5px;
|
||||
background: var(--text-color);
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
z-index: 999999999;
|
||||
transition: all 0.4s, transform 0s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#home-button-container {
|
||||
cursor: pointer;
|
||||
width: 200px;
|
||||
height: 5px;
|
||||
background: #000;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 999999999;
|
||||
}
|
||||
|
||||
.phone-applications {
|
||||
position: relative;
|
||||
height: calc(100% - 7%);
|
||||
width: calc(100% - 10%);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
margin: 0 auto;
|
||||
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
transform: scale(2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.phone-applications-app-name {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#phone-footer-applications-container {
|
||||
position: absolute;
|
||||
bottom: 2.2rem;
|
||||
left: -10px;
|
||||
width: 105%;
|
||||
padding: 0 -0px;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.phone-footer-applications {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
padding: 20px 8px;
|
||||
border-radius: 30px;
|
||||
background-color: var(--phone-footer-background) !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.phone-footer-applications .phone-applications-icons {
|
||||
width: 62px;
|
||||
}
|
||||
|
||||
.phone-application-img {
|
||||
aspect-ratio: 1/1;
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 12.5px;
|
||||
position: relative;
|
||||
width: 66px;
|
||||
}
|
||||
|
||||
.remove-application {
|
||||
display: none;
|
||||
background-color: hsla(0, 0%, 65%, 0.9);
|
||||
height: 2.5rem;
|
||||
left: 0.25rem;
|
||||
pointer-events: all;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
width: 2.5rem;
|
||||
z-index: 99999999;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
font-size: 22px;
|
||||
border-radius: 9999px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.phone-applications-icons {
|
||||
cursor: pointer;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
#phone-widget-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.phone-applications #phone-widget-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#exitShake {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-self: end;
|
||||
height: 2.5rem;
|
||||
border-radius: 20px;
|
||||
background-color: hsla(0, 0%, 65%, 0.75);
|
||||
transform: scale(0);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
padding: 0 0.9em;
|
||||
cursor: pointer;
|
||||
transition: ease all 0.2s;
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
right: 3rem;
|
||||
z-index: 99999999999999999;
|
||||
}
|
||||
|
||||
#exitShake.active {
|
||||
transform: scale(1);
|
||||
transition: ease all 0.2s;
|
||||
}
|
||||
|
||||
#phone-device-screen:has(#exitShake.active, #lock-screen.editable)
|
||||
#phone-icons {
|
||||
scale: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#phone-time {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
left: 10px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
#phone-device-screen:has(#lock-screen.editable) #phone-time {
|
||||
scale: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.phone-home-applications .phone-application-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.phone-application-wrapper:has(.phone-widget-container) {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
/* .phone-application-wrapper:not(.item-drag) .shake {
|
||||
background: rgb(0 0 1 / 0.3);
|
||||
border-radius: 12.5px;
|
||||
} */
|
||||
|
||||
#phone-application-navigation-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
height: 100%;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
#phone-application-navigation-right {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
height: 100%;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
#phone-home-search-container {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.5s ease-in-out;
|
||||
padding-left: 17px;
|
||||
padding-right: 17px;
|
||||
}
|
||||
|
||||
#phone-home-search-container header {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
font-size: 17px;
|
||||
width: 97%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#phone-home-search-list {
|
||||
padding-top: 16px;
|
||||
padding-left: 17px;
|
||||
padding-right: 17px;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
#phone-home-search-container footer {
|
||||
padding-left: 17px;
|
||||
padding-right: 17px;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
#phone-home-search-container footer div {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
#phone-home-search-container.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@keyframes shake_xxx {
|
||||
0% {
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
-webkit-transform: rotate(-1deg);
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
-webkit-transform: rotate(1.5deg);
|
||||
transform: rotate(1.5deg);
|
||||
}
|
||||
}
|
||||
|
||||
.phone-application-group {
|
||||
background-color: rgb(255 255 255 / 0.1);
|
||||
height: 7rem;
|
||||
border-radius: 12.5px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
padding: 4px 6px;
|
||||
gap: 4px;
|
||||
align-items: flex-start;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.phone-application-group .phone-application-img {
|
||||
width: 18px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.phone-application-group .phone-applications-app-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#phone-group-applications-wrapper {
|
||||
gap: 0px 16px;
|
||||
}
|
||||
|
||||
.phone-group-applications {
|
||||
padding: 0px 6px;
|
||||
gap: 11px 0px;
|
||||
}
|
||||
|
||||
#phone-group-applications-container {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
#phone-group-applications-container.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.home-downloading-progress-bar {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
width: 85%;
|
||||
height: 85%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.phone-application.downloading :is(.phone-applications-icons) {
|
||||
opacity: 0.3;
|
||||
filter: blur(1px);
|
||||
}
|
||||
|
||||
.phone-application.downloading .home-downloading-progress-bar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.phone-application-group-item [data-app="reminder"] figure {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.phone-application-group-item [data-app="reminder"] figure .calendar-day {
|
||||
font-size: 5px !important;
|
||||
}
|
||||
|
||||
.phone-application-group-item [data-app="reminder"] figure .calendar-date {
|
||||
font-size: 9px !important;
|
||||
}
|
||||
|
||||
.phone-application-group-item [data-app="calendar"] figure {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.phone-application-group-item [data-app="calendar"] .calendar-day {
|
||||
font-size: 6px;
|
||||
}
|
||||
|
||||
.phone-application-group-item [data-app="calendar"] .calendar-date {
|
||||
font-size: 1rem;
|
||||
}
|
||||
588
resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/modules/instagram-filters.min.css
vendored
Normal file
588
resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/modules/instagram-filters.min.css
vendored
Normal file
@@ -0,0 +1,588 @@
|
||||
/*! Instagram.css v0.1.4 | MIT License | github.com/picturepan2/instagram.css */
|
||||
/* [class*='filter'] {
|
||||
position: relative;
|
||||
} */
|
||||
[class*='filter']::before {
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
}
|
||||
.filter-1977 {
|
||||
-webkit-filter: sepia(0.5) hue-rotate(-30deg) saturate(1.4);
|
||||
filter: sepia(0.5) hue-rotate(-30deg) saturate(1.4);
|
||||
}
|
||||
.filter-aden {
|
||||
-webkit-filter: sepia(0.2) brightness(1.15) saturate(1.4);
|
||||
filter: sepia(0.2) brightness(1.15) saturate(1.4);
|
||||
}
|
||||
.filter-aden::before {
|
||||
background: rgba(125, 105, 24, 0.1);
|
||||
content: '';
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
.filter-amaro {
|
||||
-webkit-filter: sepia(0.35) contrast(1.1) brightness(1.2) saturate(1.3);
|
||||
filter: sepia(0.35) contrast(1.1) brightness(1.2) saturate(1.3);
|
||||
}
|
||||
.filter-amaro::before {
|
||||
background: rgba(125, 105, 24, 0.2);
|
||||
content: '';
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
.filter-ashby {
|
||||
-webkit-filter: sepia(0.5) contrast(1.2) saturate(1.8);
|
||||
filter: sepia(0.5) contrast(1.2) saturate(1.8);
|
||||
}
|
||||
.filter-ashby::before {
|
||||
background: rgba(125, 105, 24, 0.35);
|
||||
content: '';
|
||||
mix-blend-mode: lighten;
|
||||
}
|
||||
.filter-brannan {
|
||||
-webkit-filter: sepia(0.4) contrast(1.25) brightness(1.1) saturate(0.9)
|
||||
hue-rotate(-2deg);
|
||||
filter: sepia(0.4) contrast(1.25) brightness(1.1) saturate(0.9)
|
||||
hue-rotate(-2deg);
|
||||
}
|
||||
.filter-brooklyn {
|
||||
-webkit-filter: sepia(0.25) contrast(1.25) brightness(1.25) hue-rotate(5deg);
|
||||
filter: sepia(0.25) contrast(1.25) brightness(1.25) hue-rotate(5deg);
|
||||
}
|
||||
.filter-brooklyn::before {
|
||||
background: rgba(127, 187, 227, 0.2);
|
||||
content: '';
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
.filter-charmes {
|
||||
-webkit-filter: sepia(0.25) contrast(1.25) brightness(1.25) saturate(1.35)
|
||||
hue-rotate(-5deg);
|
||||
filter: sepia(0.25) contrast(1.25) brightness(1.25) saturate(1.35)
|
||||
hue-rotate(-5deg);
|
||||
}
|
||||
.filter-charmes::before {
|
||||
background: rgba(125, 105, 24, 0.25);
|
||||
content: '';
|
||||
mix-blend-mode: darken;
|
||||
}
|
||||
.filter-clarendon {
|
||||
-webkit-filter: sepia(0.15) contrast(1.25) brightness(1.25) hue-rotate(5deg);
|
||||
filter: sepia(0.15) contrast(1.25) brightness(1.25) hue-rotate(5deg);
|
||||
}
|
||||
.filter-clarendon::before {
|
||||
background: rgba(127, 187, 227, 0.4);
|
||||
content: '';
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
.filter-crema {
|
||||
-webkit-filter: sepia(0.5) contrast(1.25) brightness(1.15) saturate(0.9)
|
||||
hue-rotate(-2deg);
|
||||
filter: sepia(0.5) contrast(1.25) brightness(1.15) saturate(0.9)
|
||||
hue-rotate(-2deg);
|
||||
}
|
||||
.filter-crema::before {
|
||||
background: rgba(125, 105, 24, 0.2);
|
||||
content: '';
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
.filter-dogpatch {
|
||||
-webkit-filter: sepia(0.35) saturate(1.1) contrast(1.5);
|
||||
filter: sepia(0.35) saturate(1.1) contrast(1.5);
|
||||
}
|
||||
.filter-earlybird {
|
||||
-webkit-filter: sepia(0.25) contrast(1.25) brightness(1.15) saturate(0.9)
|
||||
hue-rotate(-5deg);
|
||||
filter: sepia(0.25) contrast(1.25) brightness(1.15) saturate(0.9)
|
||||
hue-rotate(-5deg);
|
||||
}
|
||||
.filter-earlybird::before {
|
||||
background: radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 0,
|
||||
rgba(125, 105, 24, 0.2) 100%
|
||||
);
|
||||
background: -o-radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 0,
|
||||
rgba(125, 105, 24, 0.2) 100%
|
||||
);
|
||||
background: -moz-radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 0,
|
||||
rgba(125, 105, 24, 0.2) 100%
|
||||
);
|
||||
background: -webkit-radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 0,
|
||||
rgba(125, 105, 24, 0.2) 100%
|
||||
);
|
||||
content: '';
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
.filter-gingham {
|
||||
-webkit-filter: contrast(1.1) brightness(1.1);
|
||||
filter: contrast(1.1) brightness(1.1);
|
||||
}
|
||||
.filter-gingham::before {
|
||||
background: #e6e6e6;
|
||||
content: '';
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
.filter-ginza {
|
||||
-webkit-filter: sepia(0.25) contrast(1.15) brightness(1.2) saturate(1.35)
|
||||
hue-rotate(-5deg);
|
||||
filter: sepia(0.25) contrast(1.15) brightness(1.2) saturate(1.35)
|
||||
hue-rotate(-5deg);
|
||||
}
|
||||
.filter-ginza::before {
|
||||
background: rgba(125, 105, 24, 0.15);
|
||||
content: '';
|
||||
mix-blend-mode: darken;
|
||||
}
|
||||
.filter-hefe {
|
||||
-webkit-filter: sepia(0.4) contrast(1.5) brightness(1.2) saturate(1.4)
|
||||
hue-rotate(-10deg);
|
||||
filter: sepia(0.4) contrast(1.5) brightness(1.2) saturate(1.4)
|
||||
hue-rotate(-10deg);
|
||||
}
|
||||
.filter-hefe::before {
|
||||
background: radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 0,
|
||||
rgba(0, 0, 0, 0.25) 100%
|
||||
);
|
||||
background: -o-radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 0,
|
||||
rgba(0, 0, 0, 0.25) 100%
|
||||
);
|
||||
background: -moz-radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 0,
|
||||
rgba(0, 0, 0, 0.25) 100%
|
||||
);
|
||||
background: -webkit-radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 0,
|
||||
rgba(0, 0, 0, 0.25) 100%
|
||||
);
|
||||
content: '';
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
.filter-helena {
|
||||
-webkit-filter: sepia(0.5) contrast(1.05) brightness(1.05) saturate(1.35);
|
||||
filter: sepia(0.5) contrast(1.05) brightness(1.05) saturate(1.35);
|
||||
}
|
||||
.filter-helena::before {
|
||||
background: rgba(158, 175, 30, 0.25);
|
||||
content: '';
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
.filter-hudson {
|
||||
-webkit-filter: sepia(0.25) contrast(1.2) brightness(1.2) saturate(1.05)
|
||||
hue-rotate(-15deg);
|
||||
filter: sepia(0.25) contrast(1.2) brightness(1.2) saturate(1.05)
|
||||
hue-rotate(-15deg);
|
||||
}
|
||||
.filter-hudson::before {
|
||||
background: radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 25%,
|
||||
rgba(25, 62, 167, 0.25) 100%
|
||||
);
|
||||
background: -o-radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 25%,
|
||||
rgba(25, 62, 167, 0.25) 100%
|
||||
);
|
||||
background: -moz-radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 25%,
|
||||
rgba(25, 62, 167, 0.25) 100%
|
||||
);
|
||||
background: -webkit-radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 25%,
|
||||
rgba(25, 62, 167, 0.25) 100%
|
||||
);
|
||||
content: '';
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
.filter-inkwell {
|
||||
-webkit-filter: brightness(1.25) contrast(0.85) grayscale(1);
|
||||
filter: brightness(1.25) contrast(0.85) grayscale(1);
|
||||
}
|
||||
.filter-juno {
|
||||
-webkit-filter: sepia(0.35) contrast(1.15) brightness(1.15) saturate(1.8);
|
||||
filter: sepia(0.35) contrast(1.15) brightness(1.15) saturate(1.8);
|
||||
}
|
||||
.filter-juno::before {
|
||||
background: rgba(127, 187, 227, 0.2);
|
||||
content: '';
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
.filter-kelvin {
|
||||
-webkit-filter: sepia(0.15) contrast(1.5) brightness(1.1) hue-rotate(-10deg);
|
||||
filter: sepia(0.15) contrast(1.5) brightness(1.1) hue-rotate(-10deg);
|
||||
}
|
||||
.filter-kelvin::before {
|
||||
background: radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(128, 78, 15, 0.25) 0,
|
||||
rgba(128, 78, 15, 0.5) 100%
|
||||
);
|
||||
background: -o-radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(128, 78, 15, 0.25) 0,
|
||||
rgba(128, 78, 15, 0.5) 100%
|
||||
);
|
||||
background: -moz-radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(128, 78, 15, 0.25) 0,
|
||||
rgba(128, 78, 15, 0.5) 100%
|
||||
);
|
||||
background: -webkit-radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(128, 78, 15, 0.25) 0,
|
||||
rgba(128, 78, 15, 0.5) 100%
|
||||
);
|
||||
content: '';
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
.filter-lark {
|
||||
-webkit-filter: sepia(0.25) contrast(1.2) brightness(1.3) saturate(1.25);
|
||||
filter: sepia(0.25) contrast(1.2) brightness(1.3) saturate(1.25);
|
||||
}
|
||||
.filter-lofi {
|
||||
-webkit-filter: saturate(1.1) contrast(1.5);
|
||||
filter: saturate(1.1) contrast(1.5);
|
||||
}
|
||||
.filter-ludwig {
|
||||
-webkit-filter: sepia(0.25) contrast(1.05) brightness(1.05) saturate(2);
|
||||
filter: sepia(0.25) contrast(1.05) brightness(1.05) saturate(2);
|
||||
}
|
||||
.filter-ludwig::before {
|
||||
background: rgba(125, 105, 24, 0.1);
|
||||
content: '';
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
.filter-maven {
|
||||
-webkit-filter: sepia(0.35) contrast(1.05) brightness(1.05) saturate(1.75);
|
||||
filter: sepia(0.35) contrast(1.05) brightness(1.05) saturate(1.75);
|
||||
}
|
||||
.filter-maven::before {
|
||||
background: rgba(158, 175, 30, 0.25);
|
||||
content: '';
|
||||
mix-blend-mode: darken;
|
||||
}
|
||||
.filter-mayfair {
|
||||
-webkit-filter: contrast(1.1) brightness(1.15) saturate(1.1);
|
||||
filter: contrast(1.1) brightness(1.15) saturate(1.1);
|
||||
}
|
||||
.filter-mayfair::before {
|
||||
background: radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 0,
|
||||
rgba(175, 105, 24, 0.4) 100%
|
||||
);
|
||||
background: -o-radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 0,
|
||||
rgba(175, 105, 24, 0.4) 100%
|
||||
);
|
||||
background: -moz-radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 0,
|
||||
rgba(175, 105, 24, 0.4) 100%
|
||||
);
|
||||
background: -webkit-radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 0,
|
||||
rgba(175, 105, 24, 0.4) 100%
|
||||
);
|
||||
content: '';
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
.filter-moon {
|
||||
-webkit-filter: brightness(1.4) contrast(0.95) saturate(0) sepia(0.35);
|
||||
filter: brightness(1.4) contrast(0.95) saturate(0) sepia(0.35);
|
||||
}
|
||||
.filter-nashville {
|
||||
-webkit-filter: sepia(0.25) contrast(1.5) brightness(0.9) hue-rotate(-15deg);
|
||||
filter: sepia(0.25) contrast(1.5) brightness(0.9) hue-rotate(-15deg);
|
||||
}
|
||||
.filter-nashville::before {
|
||||
background: radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(128, 78, 15, 0.5) 0,
|
||||
rgba(128, 78, 15, 0.65) 100%
|
||||
);
|
||||
background: -o-radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(128, 78, 15, 0.5) 0,
|
||||
rgba(128, 78, 15, 0.65) 100%
|
||||
);
|
||||
background: -moz-radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(128, 78, 15, 0.5) 0,
|
||||
rgba(128, 78, 15, 0.65) 100%
|
||||
);
|
||||
background: -webkit-radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(128, 78, 15, 0.5) 0,
|
||||
rgba(128, 78, 15, 0.65) 100%
|
||||
);
|
||||
content: '';
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
.filter-perpetua {
|
||||
-webkit-filter: contrast(1.1) brightness(1.25) saturate(1.1);
|
||||
filter: contrast(1.1) brightness(1.25) saturate(1.1);
|
||||
}
|
||||
.filter-perpetua::before {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 91, 154, 0.25),
|
||||
rgba(230, 193, 61, 0.25)
|
||||
);
|
||||
background: -o-linear-gradient(
|
||||
top,
|
||||
rgba(0, 91, 154, 0.25),
|
||||
rgba(230, 193, 61, 0.25)
|
||||
);
|
||||
background: -moz-linear-gradient(
|
||||
top,
|
||||
rgba(0, 91, 154, 0.25),
|
||||
rgba(230, 193, 61, 0.25)
|
||||
);
|
||||
background: -webkit-linear-gradient(
|
||||
top,
|
||||
rgba(0, 91, 154, 0.25),
|
||||
rgba(230, 193, 61, 0.25)
|
||||
);
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
left bottom,
|
||||
from(rgba(0, 91, 154, 0.25)),
|
||||
to(rgba(230, 193, 61, 0.25))
|
||||
);
|
||||
content: '';
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
.filter-poprocket {
|
||||
-webkit-filter: sepia(0.15) brightness(1.2);
|
||||
filter: sepia(0.15) brightness(1.2);
|
||||
}
|
||||
.filter-poprocket::before {
|
||||
background: radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(206, 39, 70, 0.75) 40%,
|
||||
#000 80%
|
||||
);
|
||||
background: -o-radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(206, 39, 70, 0.75) 40%,
|
||||
#000 80%
|
||||
);
|
||||
background: -moz-radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(206, 39, 70, 0.75) 40%,
|
||||
#000 80%
|
||||
);
|
||||
background: -webkit-radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(206, 39, 70, 0.75) 40%,
|
||||
#000 80%
|
||||
);
|
||||
content: '';
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
.filter-reyes {
|
||||
-webkit-filter: sepia(0.75) contrast(0.75) brightness(1.25) saturate(1.4);
|
||||
filter: sepia(0.75) contrast(0.75) brightness(1.25) saturate(1.4);
|
||||
}
|
||||
.filter-rise {
|
||||
-webkit-filter: sepia(0.25) contrast(1.25) brightness(1.2) saturate(0.9);
|
||||
filter: sepia(0.25) contrast(1.25) brightness(1.2) saturate(0.9);
|
||||
}
|
||||
.filter-rise::before {
|
||||
background: radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 0,
|
||||
rgba(230, 193, 61, 0.25) 100%
|
||||
);
|
||||
background: -o-radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 0,
|
||||
rgba(230, 193, 61, 0.25) 100%
|
||||
);
|
||||
background: -moz-radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 0,
|
||||
rgba(230, 193, 61, 0.25) 100%
|
||||
);
|
||||
background: -webkit-radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 0,
|
||||
rgba(230, 193, 61, 0.25) 100%
|
||||
);
|
||||
content: '';
|
||||
mix-blend-mode: lighten;
|
||||
}
|
||||
.filter-sierra {
|
||||
-webkit-filter: sepia(0.25) contrast(1.5) brightness(0.9) hue-rotate(-15deg);
|
||||
filter: sepia(0.25) contrast(1.5) brightness(0.9) hue-rotate(-15deg);
|
||||
}
|
||||
.filter-sierra::before {
|
||||
background: radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(128, 78, 15, 0.5) 0,
|
||||
rgba(0, 0, 0, 0.65) 100%
|
||||
);
|
||||
background: -o-radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(128, 78, 15, 0.5) 0,
|
||||
rgba(0, 0, 0, 0.65) 100%
|
||||
);
|
||||
background: -moz-radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(128, 78, 15, 0.5) 0,
|
||||
rgba(0, 0, 0, 0.65) 100%
|
||||
);
|
||||
background: -webkit-radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(128, 78, 15, 0.5) 0,
|
||||
rgba(0, 0, 0, 0.65) 100%
|
||||
);
|
||||
content: '';
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
.filter-skyline {
|
||||
-webkit-filter: sepia(0.15) contrast(1.25) brightness(1.25) saturate(1.2);
|
||||
filter: sepia(0.15) contrast(1.25) brightness(1.25) saturate(1.2);
|
||||
}
|
||||
.filter-slumber {
|
||||
-webkit-filter: sepia(0.35) contrast(1.25) saturate(1.25);
|
||||
filter: sepia(0.35) contrast(1.25) saturate(1.25);
|
||||
}
|
||||
.filter-slumber::before {
|
||||
background: rgba(125, 105, 24, 0.2);
|
||||
content: '';
|
||||
mix-blend-mode: darken;
|
||||
}
|
||||
.filter-stinson {
|
||||
-webkit-filter: sepia(0.35) contrast(1.25) brightness(1.1) saturate(1.25);
|
||||
filter: sepia(0.35) contrast(1.25) brightness(1.1) saturate(1.25);
|
||||
}
|
||||
.filter-stinson::before {
|
||||
background: rgba(125, 105, 24, 0.45);
|
||||
content: '';
|
||||
mix-blend-mode: lighten;
|
||||
}
|
||||
.filter-sutro {
|
||||
-webkit-filter: sepia(0.4) contrast(1.2) brightness(0.9) saturate(1.4)
|
||||
hue-rotate(-10deg);
|
||||
filter: sepia(0.4) contrast(1.2) brightness(0.9) saturate(1.4)
|
||||
hue-rotate(-10deg);
|
||||
}
|
||||
.filter-sutro::before {
|
||||
background: radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 50%,
|
||||
rgba(0, 0, 0, 0.5) 90%
|
||||
);
|
||||
background: -o-radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 50%,
|
||||
rgba(0, 0, 0, 0.5) 90%
|
||||
);
|
||||
background: -moz-radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 50%,
|
||||
rgba(0, 0, 0, 0.5) 90%
|
||||
);
|
||||
background: -webkit-radial-gradient(
|
||||
circle closest-corner,
|
||||
transparent 50%,
|
||||
rgba(0, 0, 0, 0.5) 90%
|
||||
);
|
||||
content: '';
|
||||
mix-blend-mode: darken;
|
||||
}
|
||||
.filter-toaster {
|
||||
-webkit-filter: sepia(0.25) contrast(1.5) brightness(0.95) hue-rotate(-15deg);
|
||||
filter: sepia(0.25) contrast(1.5) brightness(0.95) hue-rotate(-15deg);
|
||||
}
|
||||
.filter-toaster::before {
|
||||
background: radial-gradient(circle, #804e0f, rgba(0, 0, 0, 0.25));
|
||||
background: -o-radial-gradient(circle, #804e0f, rgba(0, 0, 0, 0.25));
|
||||
background: -moz-radial-gradient(circle, #804e0f, rgba(0, 0, 0, 0.25));
|
||||
background: -webkit-radial-gradient(circle, #804e0f, rgba(0, 0, 0, 0.25));
|
||||
content: '';
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
.filter-valencia {
|
||||
-webkit-filter: sepia(0.25) contrast(1.1) brightness(1.1);
|
||||
filter: sepia(0.25) contrast(1.1) brightness(1.1);
|
||||
}
|
||||
.filter-valencia::before {
|
||||
background: rgba(230, 193, 61, 0.1);
|
||||
content: '';
|
||||
mix-blend-mode: lighten;
|
||||
}
|
||||
.filter-vesper {
|
||||
-webkit-filter: sepia(0.35) contrast(1.15) brightness(1.2) saturate(1.3);
|
||||
filter: sepia(0.35) contrast(1.15) brightness(1.2) saturate(1.3);
|
||||
}
|
||||
.filter-vesper::before {
|
||||
background: rgba(125, 105, 24, 0.25);
|
||||
content: '';
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
.filter-walden {
|
||||
-webkit-filter: sepia(0.35) contrast(0.8) brightness(1.25) saturate(1.4);
|
||||
filter: sepia(0.35) contrast(0.8) brightness(1.25) saturate(1.4);
|
||||
}
|
||||
.filter-walden::before {
|
||||
background: rgba(229, 240, 128, 0.5);
|
||||
content: '';
|
||||
mix-blend-mode: darken;
|
||||
}
|
||||
.filter-willow {
|
||||
-webkit-filter: brightness(1.2) contrast(0.85) saturate(0.05) sepia(0.2);
|
||||
filter: brightness(1.2) contrast(0.85) saturate(0.05) sepia(0.2);
|
||||
}
|
||||
.filter-xpro-ii {
|
||||
-webkit-filter: sepia(0.45) contrast(1.25) brightness(1.75) saturate(1.3)
|
||||
hue-rotate(-5deg);
|
||||
filter: sepia(0.45) contrast(1.25) brightness(1.75) saturate(1.3)
|
||||
hue-rotate(-5deg);
|
||||
}
|
||||
.filter-xpro-ii::before {
|
||||
background: radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(0, 91, 154, 0.35) 0,
|
||||
rgba(0, 0, 0, 0.65) 100%
|
||||
);
|
||||
background: -o-radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(0, 91, 154, 0.35) 0,
|
||||
rgba(0, 0, 0, 0.65) 100%
|
||||
);
|
||||
background: -moz-radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(0, 91, 154, 0.35) 0,
|
||||
rgba(0, 0, 0, 0.65) 100%
|
||||
);
|
||||
background: -webkit-radial-gradient(
|
||||
circle closest-corner,
|
||||
rgba(0, 91, 154, 0.35) 0,
|
||||
rgba(0, 0, 0, 0.65) 100%
|
||||
);
|
||||
content: '';
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
#phone-input-container {
|
||||
position: absolute;
|
||||
height: fit-content;
|
||||
width: 70%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
z-index: 99999999999999999;
|
||||
background: var(--container-dark-background-color);
|
||||
border-radius: 10px;
|
||||
padding: 12px 0px 0px 0px;
|
||||
gap: 12px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 100ms ease-in-out;
|
||||
}
|
||||
|
||||
#phone-input-container.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#phone-input-container footer {
|
||||
border-top: 1px solid var(--second-border-color);
|
||||
}
|
||||
|
||||
#phone-input-container footer button {
|
||||
position: relative;
|
||||
padding: 12px 0px;
|
||||
}
|
||||
|
||||
#phone-input-title {
|
||||
color: var(--text-color);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
#phone-input {
|
||||
background: var(--dark-background-color);
|
||||
color: var(--text-color);
|
||||
font-size: 14px;
|
||||
padding: 6px 8px;
|
||||
width: 90%;
|
||||
outline: 0.1px solid var(--second-border-color);
|
||||
margin: 0 auto;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#phone-input-container footer button:nth-child(1)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
right: 0px;
|
||||
height: 100%;
|
||||
background: var(--second-border-color);
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.phone-bottom-selector {
|
||||
position: absolute;
|
||||
height: fit-content;
|
||||
width: 90%;
|
||||
left: 5%;
|
||||
bottom: 0px;
|
||||
margin-bottom: 16px;
|
||||
flex-direction: column;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
z-index: 99999999999999999;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.phone-bottom-selector div {
|
||||
text-align: center;
|
||||
background: var(--container-dark-background-color);
|
||||
}
|
||||
|
||||
.phone-bottom-selector-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 8px 0;
|
||||
border-radius: 12px / 16px;
|
||||
transition: all 100ms ease-in-out;
|
||||
overflow: hidden;
|
||||
box-shadow: rgba(14, 30, 37, 0.1) 0px 2px 4px 0px, rgba(14, 30, 37, 0.2) 0px 2px 16px 0px
|
||||
}
|
||||
|
||||
.phone-bottom-selector-item,
|
||||
.phone-bottom-selector-close-button {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.phone-bottom-selector-title {
|
||||
font-size: 15px;
|
||||
padding: 8px;
|
||||
color: #777
|
||||
}
|
||||
|
||||
.phone-bottom-selector-item {
|
||||
color: var(--text-color);
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.phone-bottom-selector-item:last-child {
|
||||
border-radius: 0 0 16px 16px;
|
||||
}
|
||||
|
||||
.phone-bottom-selector-close-button {
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
border-radius: 12px / 16px;
|
||||
transition: all 100ms ease-in-out;
|
||||
color: var(--blue-text);
|
||||
box-shadow: rgba(14, 30, 37, 0.1) 0px 2px 4px 0px, rgba(14, 30, 37, 0.2) 0px 2px 16px 0px
|
||||
}
|
||||
|
||||
.gray-background {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: black;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
height: 100%;
|
||||
opacity: 0.5;
|
||||
z-index: 5000;
|
||||
}
|
||||
|
||||
.gray-background-wallpaper {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: black;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
opacity: 0.5;
|
||||
z-index: 5000;
|
||||
}
|
||||
|
||||
.gray-background-profile {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: black;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
opacity: 0.5;
|
||||
z-index: 5000;
|
||||
}
|
||||
@@ -0,0 +1,798 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Tilt+Prism&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Rubik+Iso&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Lemon&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Moirai+One&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Tsukimi+Rounded:wght@500&display=swap");
|
||||
|
||||
:root {
|
||||
--lock-screen-color: #fff;
|
||||
}
|
||||
|
||||
#lockScreen.hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
#lock-screen {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 999999999;
|
||||
cursor: grab;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#lock-screen-widgets {
|
||||
display: grid !important;
|
||||
}
|
||||
|
||||
#lock-screen-specified {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 83px;
|
||||
bottom: 0px;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.lock-screen-top {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
padding-top: 5rem;
|
||||
width: 100%;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
#lock-screen-middle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 0px 12px;
|
||||
}
|
||||
|
||||
.lockIcon {
|
||||
width: 12px;
|
||||
height: 9px;
|
||||
margin: 20px auto 0px auto;
|
||||
border-radius: 1.7px;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#lock-screen-main-container {
|
||||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
#lock-screen-main-container.list {
|
||||
/* transform: translateY(30%); */
|
||||
}
|
||||
|
||||
#lock-screen-main-container:not(:has(.unfolded)):is(.stack, .count) {
|
||||
transform: translateY(12%);
|
||||
}
|
||||
|
||||
#lock-screen-main-container._hide {
|
||||
transform: translateY(100%) !important;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.phone-lockscreen-island .lockIcon {
|
||||
margin: 0px !important;
|
||||
bottom: 1px;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
.lockIcon:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 8px;
|
||||
height: 10px;
|
||||
border-top-right-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
border: 1.8px solid #fff;
|
||||
}
|
||||
|
||||
.lock-screen-notifications {
|
||||
position: absolute;
|
||||
transform-style: preserve-3d;
|
||||
perspective: 800px;
|
||||
height: 10rem;
|
||||
width: 100%;
|
||||
transition: 0.6s ease-in-out;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.lock-screen-notification {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
transition: 0.6s ease-in-out;
|
||||
cursor: pointer;
|
||||
border-radius: 23px;
|
||||
background-color: var(--notification-lockscreen) !important;
|
||||
backdrop-filter: saturate(130%) blur(5px);
|
||||
}
|
||||
|
||||
body[data-disableblur="true"] .lock-screen-notification {
|
||||
backdrop-filter: none !important;
|
||||
background-color: var(--notification-lockscreen);
|
||||
}
|
||||
|
||||
.lock-screen-notification-wrapper {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform-style: preserve-3d;
|
||||
perspective: 800px;
|
||||
transition: 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
.lock-screen-notifications .lock-screen-notification:only-child {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.lock-screen-notification-wrapper .lock-screen-notification-interaction {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.lock-screen-notifications:not(.unfolded)
|
||||
.lock-screen-notification-wrapper:nth-child(1)
|
||||
.lock-screen-notification-interaction.active,
|
||||
.lock-screen-notifications.unfolded
|
||||
.lock-screen-notification-wrapper
|
||||
.lock-screen-notification-interaction.active {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.lock-screen-notification-interaction {
|
||||
transform: translateX(100%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.lock-screen-notification-interaction button {
|
||||
transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) all 0.5s;
|
||||
background: var(--notification-lockscreen);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 15px 22px;
|
||||
border-radius: 16px;
|
||||
color: var(--notification-lockscreen-text-bold);
|
||||
}
|
||||
|
||||
.lock-screen-notifications:not(.unfolded):has(
|
||||
.lock-screen-notification-wrapper
|
||||
.lock-screen-notification-interaction.active
|
||||
),
|
||||
.lock-screen-notifications.unfolded
|
||||
.lock-screen-notification-wrapper:has(
|
||||
.lock-screen-notification-interaction.active
|
||||
) {
|
||||
left: -150px !important;
|
||||
}
|
||||
|
||||
.lock-screen-notification-interaction.active {
|
||||
transform: translateX(0);
|
||||
width: 0;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
margin-left: 10px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.lock-screen-notifications.unfolded .lock-screen-notification {
|
||||
color: black;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.lock-screen-notifications.unfolded .lock-screen-notification .more {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.lock-screen-notification-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
color: var(--notification-lockscreen-text-bold);
|
||||
}
|
||||
|
||||
.lock-screen-notification-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.lock-screen-notification-head .text-muted {
|
||||
color: var(--notification-lockscreen-text);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.lock-screen-notification-body {
|
||||
display: flex;
|
||||
align-items: left;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
width: 78%;
|
||||
left: 63px;
|
||||
position: relative;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
.lock-screen-notification-msg_sender {
|
||||
font-weight: bold;
|
||||
padding-top: 5px;
|
||||
color: var(--notification-lockscreen-text-bold);
|
||||
text-align: left;
|
||||
/* Alinea el texto a la izquierda */
|
||||
}
|
||||
|
||||
.lock-screen-notification-msg {
|
||||
color: var(--notification-lockscreen-text);
|
||||
font-size: 15px;
|
||||
text-align: left;
|
||||
/* Alinea el texto a la izquierda */
|
||||
}
|
||||
|
||||
.lock-screen-notification-app_img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 20px;
|
||||
transform: translateY(-50%);
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 10px;
|
||||
margin-right: 10px;
|
||||
/* Espacio entre la imagen y los textos */
|
||||
}
|
||||
|
||||
.lock-screen-notification-app_name {
|
||||
display: none;
|
||||
/* Oculta el nombre de la aplicación */
|
||||
}
|
||||
|
||||
#lock-screen-edit-confirmation {
|
||||
display: none;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
align-self: end;
|
||||
transform: translateX(-50%) scale(1);
|
||||
left: 50%;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: ease all 0.2s;
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
z-index: 99999999999999999;
|
||||
width: 90%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#lock-screen-edit-confirmation * {
|
||||
background-color: hsla(0, 0%, 65%, 0.75);
|
||||
padding: 0 0.9em;
|
||||
border-radius: 20px;
|
||||
height: 2.7rem;
|
||||
width: 7.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #000;
|
||||
transform: scale(0);
|
||||
transition: ease all 0.2s;
|
||||
}
|
||||
|
||||
#phone-device-screen:has(#lock-screen.editable)
|
||||
#lock-screen-edit-confirmation
|
||||
* {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
#phone-device-screen:has(#lock-screen.editable) #lock-screen-edit-confirmation {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.lock-screen-top .time {
|
||||
/* margin: 12px 0px; */
|
||||
color: var(--lock-screen-color);
|
||||
font-size: 10rem;
|
||||
letter-spacing: 0rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#lock-screen:is(.editable) :where(.time, .date, .date *) {
|
||||
transition: all 1s cubic-bezier(0.57, 0.13, 0.18, 0.98) !important;
|
||||
}
|
||||
|
||||
#lock-screen:is(.editable) :where(.time, .date, #lock-screen-widgets) {
|
||||
box-shadow: 0 0 0 2px rgb(255 255 255 / 0.1);
|
||||
border-radius: 12px;
|
||||
margin: 12px 0px;
|
||||
}
|
||||
|
||||
#lock-screen:is(.editable)
|
||||
:where(
|
||||
#lock-screen-main-container,
|
||||
#lock-screen-down,
|
||||
.face-id-wrapper,
|
||||
.lockIcon
|
||||
) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#lock-screen-widgets .phone-widget {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#lock-screen-widgets .batteryInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-content: flex-start;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.lock-screen-widget-bg .batteryInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-content: flex-start;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
#widget-customize .phone-widget {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.lock-screen-widget-bg .batteryInfo .iconWrapper svg path,
|
||||
.lock-screen-widget-bg .batteryInfo .iconWrapper svg circle {
|
||||
fill: none;
|
||||
stroke: white;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.lock-screen-top .date {
|
||||
margin-top: 12px;
|
||||
top: 170px;
|
||||
font-size: 2rem;
|
||||
right: 100px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
color: var(--lock-screen-color);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.lock-screen-top .date * {
|
||||
color: var(--lock-screen-color);
|
||||
}
|
||||
|
||||
.down_padding {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: #ffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.down_padding:hover {
|
||||
transition: background-color 0.8s;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.app_notify.hide {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#lock-screen-down {
|
||||
position: sticky;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
bottom: 0px;
|
||||
margin-top: 15px;
|
||||
padding-bottom: 40px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.face-id-wrapper {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
bottom: -2px;
|
||||
right: 7px;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.face-id-wrapper svg {
|
||||
position: absolute;
|
||||
fill: #aaa;
|
||||
stroke: #aaa;
|
||||
}
|
||||
|
||||
.face-id-wrapper.active .face-id-default {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
transition: opacity 1.5s, transform 1s;
|
||||
fill: lightblue;
|
||||
stroke: lightblue;
|
||||
}
|
||||
|
||||
.circle {
|
||||
border-radius: 50%;
|
||||
border: 3px solid #000;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.active .circle {
|
||||
opacity: 1;
|
||||
transition: opacity 0.7s, transform 2.2s;
|
||||
}
|
||||
|
||||
.circle.green {
|
||||
border: 3px solid #88ef88;
|
||||
}
|
||||
|
||||
.circle.blue {
|
||||
border: 3px solid #0aaaf7;
|
||||
}
|
||||
|
||||
.circle.purple {
|
||||
border: 3px solid #ea54ea;
|
||||
}
|
||||
|
||||
.active .circle.green {
|
||||
transform: rotateX(360deg);
|
||||
}
|
||||
|
||||
.active .circle.blue {
|
||||
transform: rotateY(360deg);
|
||||
}
|
||||
|
||||
.active .circle.purple {
|
||||
transform: rotateY(360deg) rotateX(360deg);
|
||||
}
|
||||
|
||||
.completed .circle.purple {
|
||||
border: 3px solid #fff;
|
||||
transition: border 0.7s;
|
||||
}
|
||||
|
||||
.path-tick {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.completed .path-tick {
|
||||
stroke-dasharray: 49.4974746704;
|
||||
stroke-dashoffset: 0;
|
||||
animation: dash 0.6s linear forwards;
|
||||
stroke-opacity: 1;
|
||||
transition: stroke-opacity 0.1s step;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* delay-time before animation */
|
||||
@keyframes dash {
|
||||
0% {
|
||||
stroke-dashoffset: 49.4974746704;
|
||||
stroke-opacity: 1;
|
||||
}
|
||||
|
||||
60% {
|
||||
stroke-dashoffset: 49.4974746704;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
stroke-opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#time-fonts ul li {
|
||||
font-size: 7rem;
|
||||
color: var(--text-color);
|
||||
margin: 0 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#time-fonts ul li input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#time-fonts ul li label {
|
||||
padding: 0 12px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
#time-fonts ul li input:checked + label {
|
||||
box-shadow: 0 0 0 2px rgb(59 130 246);
|
||||
}
|
||||
|
||||
.font-inter {
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
.font-prism {
|
||||
font-family: "Tilt Prism", cursive;
|
||||
}
|
||||
|
||||
.font-dancing {
|
||||
font-family: "Dancing Script", cursive;
|
||||
}
|
||||
|
||||
.font-indie {
|
||||
font-family: "Indie Flower", cursive;
|
||||
}
|
||||
|
||||
.font-marker {
|
||||
font-family: "Permanent Marker", cursive;
|
||||
}
|
||||
|
||||
.font-rubik {
|
||||
font-family: "Rubik", sans-serif;
|
||||
}
|
||||
|
||||
.font-fredoka {
|
||||
font-family: "Fredoka", cursive;
|
||||
}
|
||||
|
||||
.font-lemon {
|
||||
font-family: "Lemon", cursive;
|
||||
}
|
||||
|
||||
.font-moirai {
|
||||
font-family: "Moirai One", cursive;
|
||||
}
|
||||
|
||||
.font-tsukimi {
|
||||
font-family: "Tsukimi Rounded", serif;
|
||||
}
|
||||
|
||||
.time-color label {
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.time-color input {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.time-color input:checked + label {
|
||||
box-shadow: 0 0 0 4px rgb(59 130 246);
|
||||
/* padding: 12px; */
|
||||
}
|
||||
|
||||
.bg-rainbow {
|
||||
background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
|
||||
}
|
||||
|
||||
#lock-screen-customize {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
||||
}
|
||||
|
||||
#lock-screen-customize.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
#widget-customize-list {
|
||||
display: grid !important;
|
||||
}
|
||||
|
||||
:is(#lock-screen-widgets, #widget-customize-list)
|
||||
.weather-rain-percentage-widget {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.weather-rain-percentage-widget .donut-text {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
color: var(--lock-screen-color);
|
||||
}
|
||||
|
||||
.weather-rain-percentage-widget .donut-text i {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 50%;
|
||||
font-size: 12px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.weather-mini-widget {
|
||||
width: 100%;
|
||||
background-color: rgb(0 0 0 / 0.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 12px;
|
||||
grid-column: span 2;
|
||||
border-radius: 12px;
|
||||
grid-gap: 0;
|
||||
grid-template-rows: 2fr 2fr;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:is(#lock-screen-widgets, #widget-customize-list) * {
|
||||
color: var(--lock-screen-color);
|
||||
transition: all 1s cubic-bezier(0.57, 0.13, 0.18, 0.98) !important;
|
||||
}
|
||||
|
||||
:is(#lock-screen-widgets, #widget-customize-list)
|
||||
.weazel-widget-contents
|
||||
.weazel-widget-last:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.weather-temp span {
|
||||
font-size: 1.7rem !important;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.weather-temp i {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#widget-customize .weather-temp {
|
||||
color: var(--lock-screen-color);
|
||||
}
|
||||
|
||||
:is(#lock-screen-widgets, #widget-customize-list)
|
||||
:is(.weazel-widget, .reminder-widget, .weather-mini-widget) {
|
||||
grid-column: span 2;
|
||||
height: 8rem;
|
||||
border-radius: 12px;
|
||||
overflow: inherit;
|
||||
}
|
||||
|
||||
:is(#lock-screen-widgets, #widget-customize-list)
|
||||
.batteryInfo
|
||||
.iconWrapper:after {
|
||||
border-color: var(--lock-screen-color);
|
||||
transition: all 1s cubic-bezier(0.57, 0.13, 0.18, 0.98) !important;
|
||||
}
|
||||
|
||||
.lock-screen-widget-bg {
|
||||
background-color: rgb(0 0 0 / 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px;
|
||||
flex-direction: column;
|
||||
border-radius: 12px;
|
||||
grid-gap: 0;
|
||||
position: relative;
|
||||
height: 8rem;
|
||||
}
|
||||
|
||||
#lock-screen-widgets {
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
#lock-screen-widgets .remove-widget {
|
||||
display: flex;
|
||||
background-color: hsla(0, 0%, 30%, 0.9);
|
||||
height: 2rem;
|
||||
left: 0.25rem;
|
||||
pointer-events: all;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
width: 2rem;
|
||||
z-index: 99999999;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
border-radius: 9999px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
transition: all 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
||||
}
|
||||
|
||||
#lock-screen-widgets .remove-widget i {
|
||||
color: #000 !important;
|
||||
font-size: 14px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body:has(#widget-customize.hide) #lock-screen-widgets .remove-widget {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
body:not(:has(#lock-screen-customize.active))
|
||||
#lock-screen-widgets
|
||||
.remove-widget {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#lock-screen-notifications-container {
|
||||
position: relative;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
#lock-screen-delete-all button {
|
||||
transition: 0.6s ease-in-out;
|
||||
cursor: pointer;
|
||||
border-radius: 23px;
|
||||
background: var(--notification-lockscreen) !important;
|
||||
backdrop-filter: saturate(130%) blur(5px);
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#lock-screen-delete-all i {
|
||||
font-size: 15px;
|
||||
margin-left: 1px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
.picker-wrapper,
|
||||
.picker-wrapper * {
|
||||
box-sizing: border-box;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.clock-selector-timer {
|
||||
position: absolute;
|
||||
background: gray;
|
||||
opacity: 0.2;
|
||||
height: 30px;
|
||||
width: 90%;
|
||||
left: 20px;
|
||||
top: 200px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.picker-wrapper {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 210px;
|
||||
display: inline-block;
|
||||
line-height: 30px;
|
||||
width: 100%;
|
||||
font-size: 23px;
|
||||
perspective: 1000px;
|
||||
perspective-origin: center center;
|
||||
}
|
||||
|
||||
.picker-scroller {
|
||||
-webkit-transition: -webkit-transform 100ms ease;
|
||||
-webkit-transform: translateZ(-90px) rotateX(0deg);
|
||||
-webkit-transform-style: preserve-3d;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.picker-scroller .option {
|
||||
position: absolute;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
width: 100%;
|
||||
transition: all 300ms;
|
||||
color: lightgray;
|
||||
transform-origin: 50% 50%;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
|
||||
.picker-up {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.picker-down {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.clone-scroller {
|
||||
z-index: 5;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding-top: 90px;
|
||||
padding-bottom: 90px
|
||||
}
|
||||
|
||||
.clone-scroller .option {
|
||||
visibility: hidden;
|
||||
}
|
||||
@@ -0,0 +1,303 @@
|
||||
.table {
|
||||
display: table;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cell .lockIcon {
|
||||
bottom: 10%;
|
||||
height: 12px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.cell .lockIcon::before {
|
||||
margin-top: -3px;
|
||||
height: 20px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
#anleitung {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
#anleitung span {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#pincode {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.6);
|
||||
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
#numbers {
|
||||
position: relative;
|
||||
top: 25px;
|
||||
max-width: 325px;
|
||||
padding: 0 15px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
display: block;
|
||||
-webkit-transition: all 1s ease-out;
|
||||
-moz-transition: all 1s ease-out;
|
||||
transition: all 1s ease-out;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#numbers.hide {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#pincode button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 83px;
|
||||
height: 83px;
|
||||
margin-bottom: 25px;
|
||||
border: 0;
|
||||
color: #000;
|
||||
/* Cambiado a negro para mejorar la legibilidad */
|
||||
font-size: 30px;
|
||||
border-radius: 100%;
|
||||
opacity: 1;
|
||||
outline: 0;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#pincode button span {
|
||||
font-size: 11px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#pincode button:active {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
#fields {
|
||||
max-width: 200px;
|
||||
padding: 0 20px;
|
||||
margin: 20px auto 42px auto;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#fields .numberfield {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#fields .numberfield span {
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
border: 1px solid #fff;
|
||||
background-color: transparent;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#fields .numberfield.active span {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
#fields .numberfield.right span {
|
||||
background-color: #33444e;
|
||||
border-color: #33444e;
|
||||
transition: all 0.5s ease-in-out;
|
||||
-webkit-transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.pincode_grid {
|
||||
list-style: none;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
.pincode_grid__col--1-of-3,
|
||||
.pincode_grid__col--2-of-6,
|
||||
.pincode_grid__col--4-of-12 {
|
||||
width: 33.33333%;
|
||||
}
|
||||
|
||||
.pincode_grid__col--1-of-4,
|
||||
.pincode_grid__col--2-of-8,
|
||||
.pincode_grid__col--3-of-12 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.pincode_grid__col {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
margin-right: -0.25em;
|
||||
min-height: 1px;
|
||||
padding-left: 20px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.pincode_grid__col a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pincode_grid__col--centered {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.pincode_grid__col--d-first {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.pincode_grid__col--d-last {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.pincode_grid--no-gutter {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pincode_grid--no-gutter .pincode_grid__col {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.pincode_grid--no-gutter .pincode_grid__col--span-all {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pincode_grid__col--ab {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.pincode_grid__col--am {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.miss {
|
||||
-webkit-animation: miss 0.8s ease-out 1;
|
||||
animation: miss 0.8s ease-out 1;
|
||||
}
|
||||
|
||||
@-webkit-keyframes miss {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
10% {
|
||||
-webkit-transform: translate(-25px, 0);
|
||||
transform: translate(-25px, 0);
|
||||
}
|
||||
|
||||
20% {
|
||||
-webkit-transform: translate(25px, 0);
|
||||
transform: translate(25px, 0);
|
||||
}
|
||||
|
||||
30% {
|
||||
-webkit-transform: translate(-20px, 0);
|
||||
transform: translate(-20px, 0);
|
||||
}
|
||||
|
||||
40% {
|
||||
-webkit-transform: translate(20px, 0);
|
||||
transform: translate(20px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(-10px, 0);
|
||||
transform: translate(-10px, 0);
|
||||
}
|
||||
|
||||
60% {
|
||||
-webkit-transform: translate(10px, 0);
|
||||
transform: translate(10px, 0);
|
||||
}
|
||||
|
||||
70% {
|
||||
-webkit-transform: translate(-5px, 0);
|
||||
transform: translate(-5px, 0);
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: translate(5px, 0);
|
||||
transform: translate(5px, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes miss {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
10% {
|
||||
-webkit-transform: translate(-25px, 0);
|
||||
transform: translate(-25px, 0);
|
||||
}
|
||||
|
||||
20% {
|
||||
-webkit-transform: translate(25px, 0);
|
||||
transform: translate(25px, 0);
|
||||
}
|
||||
|
||||
30% {
|
||||
-webkit-transform: translate(-20px, 0);
|
||||
transform: translate(-20px, 0);
|
||||
}
|
||||
|
||||
40% {
|
||||
-webkit-transform: translate(20px, 0);
|
||||
transform: translate(20px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(-10px, 0);
|
||||
transform: translate(-10px, 0);
|
||||
}
|
||||
|
||||
60% {
|
||||
-webkit-transform: translate(10px, 0);
|
||||
transform: translate(10px, 0);
|
||||
}
|
||||
|
||||
70% {
|
||||
-webkit-transform: translate(-5px, 0);
|
||||
transform: translate(-5px, 0);
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: translate(5px, 0);
|
||||
transform: translate(5px, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
/* Slider */
|
||||
.slick-slider
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-khtml-user-select: none;
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.slick-list
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.slick-list:focus
|
||||
{
|
||||
outline: none;
|
||||
}
|
||||
.slick-list.dragging
|
||||
{
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
.slick-slider .slick-track,
|
||||
.slick-slider .slick-list
|
||||
{
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.slick-track
|
||||
{
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.slick-track:before,
|
||||
.slick-track:after
|
||||
{
|
||||
display: table;
|
||||
|
||||
content: '';
|
||||
}
|
||||
.slick-track:after
|
||||
{
|
||||
clear: both;
|
||||
}
|
||||
.slick-loading .slick-track
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.slick-slide
|
||||
{
|
||||
display: none;
|
||||
float: left;
|
||||
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
}
|
||||
[dir='rtl'] .slick-slide
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
.slick-slide img
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.slick-slide.slick-loading img
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.slick-slide.dragging img
|
||||
{
|
||||
pointer-events: none;
|
||||
}
|
||||
.slick-initialized .slick-slide
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.slick-loading .slick-slide
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
.slick-vertical .slick-slide
|
||||
{
|
||||
display: block;
|
||||
|
||||
height: auto;
|
||||
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
.jq-stars {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.jq-rating-label {
|
||||
font-size: 22px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.jq-star {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.jq-star-svg {
|
||||
padding-left: 3px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.jq-star-svg path {
|
||||
/* stroke: #000; */
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
/* un-used */
|
||||
.jq-shadow {
|
||||
-webkit-filter: drop-shadow(-2px -2px 2px #888);
|
||||
filter: drop-shadow(-2px -2px 2px #888);
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Borel&display=swap');
|
||||
|
||||
.startup-screen {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--main-background-color);
|
||||
}
|
||||
|
||||
#startup-page {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 999999999999;
|
||||
transition: ease all 0.4s;
|
||||
/* background-color: var(--main-background-color); */
|
||||
}
|
||||
|
||||
#startup-first-screen {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#startup-first-screen .logo {
|
||||
position: relative;
|
||||
top: 40%;
|
||||
height: 20%;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
transition: ease all 0.1s;
|
||||
z-index: 999999999;
|
||||
}
|
||||
|
||||
#startup-first-screen .logo img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
}
|
||||
|
||||
#startup-first-screen .logo.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#hello-screen {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#hello-screen span {
|
||||
font-size: 4.7rem;
|
||||
font-family: 'Borel', serif;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hello-home-button-container .phone-home-button {
|
||||
display: flex !important;
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
#welcome-screen .phone-home-button {
|
||||
display: flex !important;
|
||||
background: var(--text-color) !important;
|
||||
}
|
||||
|
||||
:is(.welcome-home-button-container, .hello-home-button-container) {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
z-index: 999999999999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
#hello-screen #language-screen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.ios-tick {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ios-tick+label {
|
||||
color: #333;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ios-tick+label span {
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 12px 4px 0 0;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 1px #666;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.ios-tick+label span img {
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.ios-tick:checked+label span {
|
||||
background-color: #3498db;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ios-tick:checked+label span img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ios-tick.green:checked+label span {
|
||||
background-color: #2ecc71;
|
||||
}
|
||||
|
||||
#quickstart-screen header {
|
||||
background: #f1f1f6;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#appearance-screen article,
|
||||
#startup-lock-screen article,
|
||||
#faceid-screen article,
|
||||
#privacy-screen article,
|
||||
#quickstart-screen article {
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#startup-lock-screen article p {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#startup-lock-screen article h2,
|
||||
#faceid-screen article h2,
|
||||
#privacy-screen article h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#appearance-screen header,
|
||||
#startup-lock-screen header,
|
||||
#faceid-screen header,
|
||||
#privacy-screen header {
|
||||
font-size: 17px;
|
||||
width: 95%;
|
||||
position: relative;
|
||||
bottom: 15px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#appearance-screen button,
|
||||
#privacy-screen button,
|
||||
#faceid-screen button {
|
||||
background: #1e7ee5;
|
||||
color: var(--invert-text-color) !important;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
.tooltip-inner {
|
||||
font-size: 11px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.toggle.ios,
|
||||
.toggle-on.ios,
|
||||
.toggle-off.ios {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.toggle.ios .toggle-handle {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.custom-control,
|
||||
.custom-switch,
|
||||
.custom-control-input {
|
||||
color: white
|
||||
}
|
||||
@@ -0,0 +1,236 @@
|
||||
.widgetCenter {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 8%;
|
||||
box-sizing: border-box;
|
||||
transition: ease all 0.3s;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.widgetCenter.out {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.widgetCenter .contenido {
|
||||
position: relative;
|
||||
bottom: 70px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-top: 65px;
|
||||
padding-bottom: 15px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.widgetCenter .contenido .block {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 15px;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.widgetCenter .contenido .block.transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.widgetCenter .contenido .block.midd {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.widgetCenter .contenido .actions .action {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.widgetCenter .contenido .actions .action:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.widgetCenter .contenido .actions .action:last-child {
|
||||
padding-bottom: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.widgetCenter .contenido .actions .action .icono {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 5px;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.widgetCenter .contenido .actions .action .textos {
|
||||
width: calc(100% - 45px);
|
||||
}
|
||||
|
||||
.widgetCenter .contenido .actions .action .textos p {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.widgetCenter .contenido .actions .action .textos p.actionName {
|
||||
color: #000;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.batteryInfo {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 90%;
|
||||
height: 95%;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.batteryInfo a {
|
||||
font-size: 45px !important;
|
||||
letter-spacing: 2px;
|
||||
margin-top: auto;
|
||||
font-weight: bold;
|
||||
color: var(--stroke-invert-text-color)
|
||||
}
|
||||
|
||||
.phone-widget-container .batteryInfo {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.phone-widget-container .batteryInfo a {
|
||||
position: relative;
|
||||
left: 3px;
|
||||
font-size: 45px !important;
|
||||
font-weight: bold;
|
||||
color: var(--stroke-invert-text-color)
|
||||
}
|
||||
|
||||
.batteryInfo .iconWrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 6px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.batteryInfo .iconWrapper:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 5px solid #67ba6e;
|
||||
transform: rotate(-35deg);
|
||||
}
|
||||
|
||||
.batteryInfo .iconWrapper.low:after {
|
||||
border-color: #d24f54;
|
||||
border-left-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
}
|
||||
|
||||
.batteryInfo .iconWrapper.medium:after {
|
||||
border-color: #f7b500;
|
||||
border-left-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
}
|
||||
|
||||
.batteryInfo .iconWrapper.high:after {
|
||||
border-color: #67ba6e;
|
||||
border-left-color: #67ba6e;
|
||||
border-top-color: #67ba6e;
|
||||
border-bottom-color: #67ba6e;
|
||||
}
|
||||
|
||||
.batteryInfo .iconWrapper svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.batteryInfo .iconWrapper svg path,
|
||||
.batteryInfo .iconWrapper svg circle {
|
||||
fill: none;
|
||||
stroke: var(--stroke-invert-text-color);
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.tiempoPantalla {
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.tiempoPantalla .timepo {
|
||||
width: 100%;
|
||||
color: #000;
|
||||
font-size: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tiempoPantalla .app {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 48%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.tiempoPantalla .app .icono {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 5px;
|
||||
border-radius: 7px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.tiempoPantalla .app .textos {
|
||||
width: calc(100% - 35px);
|
||||
}
|
||||
|
||||
.tiempoPantalla .app .textos p {
|
||||
font-size: 10px;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.tiempoPantalla .app .textos p.actionName {
|
||||
color: #000;
|
||||
font-size: 11px;
|
||||
}
|
||||
Reference in New Issue
Block a user