274 lines
No EOL
7.5 KiB
CSS
274 lines
No EOL
7.5 KiB
CSS
.main-img-container {
|
|
visibility: hidden !important;
|
|
position: absolute !important;
|
|
top: 50% !important;
|
|
left: 50% !important;
|
|
transform: translate(-50%,-50%) scale(0.9) !important;
|
|
border: 1px solid var(--hover-medium) !important;
|
|
border-radius: 5px !important;
|
|
background-color: var(--bg) !important;
|
|
padding: 20px !important;
|
|
z-index: -10 !important;
|
|
height: 0 !important;
|
|
}
|
|
.main-img-container.active {
|
|
z-index: 1000000000 !important;
|
|
visibility: visible !important;
|
|
transform: translate(-50%,-50%) scale(1) !important;
|
|
min-width: 320px !important;
|
|
max-width: 370px !important;
|
|
height: auto !important;
|
|
}
|
|
.main-img-container .container {
|
|
margin-top: 0.75rem !important;
|
|
margin-bottom: 0.75rem !important;
|
|
display: flex !important;
|
|
}
|
|
.main-img-container .google,
|
|
.main-img-container .facebook,
|
|
.main-img-container .selected,
|
|
.main-img-container .add,
|
|
.main-img-container .costum
|
|
{ margin-right: 1rem !important; }
|
|
.color-img { margin-top: 0 !important; }
|
|
.color-img.active { margin-top: 1rem !important; }
|
|
|
|
.main-img-container section {
|
|
margin: 1rem 0 2rem 0 !important;
|
|
padding: 0 5px !important;
|
|
}
|
|
.main-img-container.active section:nth-of-type(2) { margin-top: 0 !important; }
|
|
.main-img-container section .img-text{
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
margin-bottom: 0.75rem !important;
|
|
}
|
|
.main-img-container section .img-text p { color: var(--font-medium) !important; }
|
|
.main-img-container .img {
|
|
transition: all ease-in-out .12 !important;
|
|
}
|
|
.main-img-container .img:hover { filter: brightness(0.97) !important; }
|
|
.img.medium.add {
|
|
background-color: var(--hover-light) !important;
|
|
}
|
|
.img.medium.add div {
|
|
height: 100% !important;
|
|
width: 100% !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
|
|
.img.medium.add div i {
|
|
font-size: 1.7rem !important;
|
|
color: var(--font-medium) !important;
|
|
}
|
|
|
|
.select-img {
|
|
background-color: var(--hover-medium) !important;
|
|
border-radius: 4px !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
cursor: pointer !important;
|
|
transition: all ease-in-out .12s !important;
|
|
height: 0 !important;
|
|
}
|
|
.select-img .icon {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
.select-img .icon i {
|
|
font-size: 3rem !important;
|
|
color: var(--font-medium) !important;
|
|
}
|
|
.select-img:hover { background-color: var(--hover-dark) !important; }
|
|
|
|
.main-img-container .x {
|
|
position: absolute !important;
|
|
top: 0 !important;
|
|
right: 0 !important;
|
|
padding: 5px !important;
|
|
}
|
|
.main-img-container .x div {
|
|
width: 2.5rem !important;
|
|
height: 2.5rem !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
border-radius: 50% !important;
|
|
cursor: pointer !important;
|
|
}
|
|
.main-img-container .x div:hover { background-color: var(--hover-light) !important; }
|
|
.main-img-container .x div:active { background-color: var(--hover-medium) !important; }
|
|
.main-img-container .x div i {
|
|
font-size: 1.25rem !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
color: var(--font-dark) !important;
|
|
}
|
|
.insert-photo-container {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
height: 0 !important;
|
|
visibility: hidden !important;
|
|
transition: all ease-in-out .2s !important;
|
|
position: relative !important;
|
|
}
|
|
.insert-photo-container.active {
|
|
visibility: visible !important;
|
|
height: 14rem !important;
|
|
}
|
|
|
|
.main-insert-photo-container {
|
|
position: absolute !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
visibility: hidden !important;
|
|
}
|
|
.insert-photo-container.active .main-insert-photo-container { visibility: visible !important; }
|
|
.insert-photo-container.active .main-insert-photo-container .select-img { height: 10rem !important; }
|
|
.insert-photo-container + section { margin-top: 0 !important; }
|
|
.main-insert-photo-container .footer {
|
|
height: 3rem !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
width: 100% !important;
|
|
}
|
|
.main-insert-photo-container .footer div:first-of-type {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-self: flex-start !important;
|
|
flex-grow: 1 !important;
|
|
}
|
|
.main-insert-photo-container .footer div:first-of-type span {
|
|
color: var(--font-dark) !important;
|
|
font-size: 0.8rem !important;
|
|
}
|
|
.main-insert-photo-container .footer .button {
|
|
display: flex !important;
|
|
padding: 2px 5px !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
height: 50% !important;
|
|
background-color: var(--bg) !important;
|
|
border: 1px solid var(--border-light) !important;
|
|
border-radius: 3px !important;
|
|
cursor: pointer !important;
|
|
transition: all ease-in-out .15s !important;
|
|
color: var(--font-dark) !important;
|
|
}
|
|
.main-insert-photo-container .footer .button:hover { background-color: var(--hover-light) !important; }
|
|
|
|
.color-container {
|
|
min-height: 4rem !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
.color-container .box-container {
|
|
display: inline-flex !important;
|
|
padding: 0.5rem 0.5rem !important;
|
|
position: relative !important;
|
|
}
|
|
.color-container div:last-of-type { margin-right: 0 !important;}
|
|
|
|
.check-mark {
|
|
position: absolute !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
top: 0 !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
cursor: pointer !important;
|
|
}
|
|
.check-mark i {
|
|
color: var(--bg) !important;
|
|
font-size: 1.25rem !important;
|
|
}
|
|
|
|
.footer-container {
|
|
display: flex !important;
|
|
justify-content: flex-end !important;
|
|
}
|
|
.footer-container .button {
|
|
width: 5rem !important;
|
|
height: 2.5rem !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
.google { position: relative !important; }
|
|
.main-img-container .error,
|
|
.main-img-container .error i
|
|
{ font-size: 0.9rem !important; }
|
|
|
|
|
|
.img {
|
|
position: relative;
|
|
border-radius: 50%;
|
|
width: var(--num);
|
|
height: var(--num);
|
|
}
|
|
.img-settings {
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.img.xxl {
|
|
--num: 7.5rem;
|
|
--letter: 3.25rem;
|
|
cursor: pointer;
|
|
}
|
|
.img.big {
|
|
--num: 5.5rem;
|
|
--letter: 2.75rem;
|
|
cursor: pointer;
|
|
}
|
|
.img.medium {
|
|
--num: 3.25rem;
|
|
--letter: 2rem;
|
|
cursor: pointer;
|
|
}
|
|
.img.small {
|
|
--num: 2.25rem;
|
|
--letter: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
.img .letter {
|
|
position: absolute;
|
|
left: calc(50% - 1.5rem);
|
|
right: calc(50% - 1.5rem);
|
|
top: calc(50% - 1.5rem);
|
|
bottom: calc(50% - 1.5rem);
|
|
width: 3rem;
|
|
height: 3rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.img .letter span{
|
|
font-size: var(--letter);
|
|
color: var(--bg);
|
|
}
|
|
.img:hover { filter: brightness(1.1); }
|
|
|
|
.camera-container {
|
|
position: absolute;
|
|
bottom: -3px;
|
|
right: 0;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
padding: 5px;
|
|
border: 1px solid var(--border-light);
|
|
background-color: var(--bg);
|
|
cursor: pointer;
|
|
}
|
|
.camera-container:hover i{ color: var(--google-blue); } |