/** HTML5/CSS3, EDGE/CHROME *** EntryClass.css ***
******************************************************************************
* ittve.me Выполнить настройки стилей для входа и регистрации на сайте *
* *
* v1.3, 04.11.2023 Автор: Труфанов В.Е. *
* Copyright © 2023 tve Дата создания: 07.01.2023 *
******************************************************************************
*/
#Life
{
--dark-main-color: #ee7c11;
--darker-main-color: #bf6d1c;
font-size: 16px;
margin: 0;
padding: 0;
font-family: 'Pacifico';
}
#EntryClass
{
display: inline-block;
background: #f5f5f5;
padding: 1.5rem;
border: 3px solid var(--dark-main-color);
position: absolute;
top: 50%;
left: 50%;
/*width: 350px;*/
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-sizing: border-box;
border-radius: 4px;
}
#EntryForm svg
{
margin: auto auto;
display: block;
}
fieldset
{
border: 0;
padding: 0;
margin: 1.2rem 0 0 0;
}
legend
{
margin: 0;
padding: 0;
color: var(--darker-main-color);
}
fieldset > div
{
border: 3px solid var(--dark-main-color);
border-radius: 3px;
position: relative;
margin-top: 0.5rem;
background: white;
}
fieldset#submit-field > div
{
border-color: var(--darker-main-color);
background: var(--darker-main-color);
}
fieldset .placeholder
{
position: absolute;
top: 50%;
left: 1rem;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
z-index: 5;
font-size: 1.1rem;
transition: all 0.25s;
color: #666;
pointer-events: none;
}
fieldset .placeholder.active
{
font-size: 0.8rem;
color: #999;
margin-top: -0.8rem;
}
fieldset input
{
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
background: transparent;
border: 0;
padding: 1rem;
font-size: 1.8rem;
position: relative;
z-index: 3;
outline-color: var(--dark-main-color);
}
fieldset.with-placeholder input
{
padding: 1.3rem 1rem 0.7rem 1rem;
}
fieldset input[type=submit]
{
border: 0;
color: white;
cursor: pointer;
font-family: Roboto, K2D, Arial, Verdana, Sans-serif;
}
footer
{
position: absolute;
bottom: 1rem;
right: 1rem;
font-family: 'Pacifico';
font-size: 1rem;
}
/* Сообщения в связи с отправкой почты */
#Horosho{text-align:center;}
#Horosho span{color:blue;}
#Nepovezlo{text-align:center;}
/* Стилизация пространства скрепки выбора */
#GrayInput
{
display: block;
width: 100%;
height: 50%;
box-sizing: border-box;
padding: 1rem;
font-size: 1.8rem;
text-align: center;
position: relative;
outline-color: var(--dark-main-color);
border: 0;
color: Gainsboro;
background: #CACACA;
cursor: not-allowed;
font-family: Roboto, K2D, Arial, Verdana, Sans-serif;
z-index: 3;
}
#Messa
{
display: block;
font-size: 2.0rem;
text-align: center;
}
/* Размещаем пространство для скрепки */
#screpa
{
border: 0;
box-sizing: border-box;
/*margin: 3rem 0 0 0;*/
margin: 0;
padding: 0 0 0 2rem;
display: flex;
height: 100%;
}
:root
{
--gray: #969696;
--green: #55f655;
--dur: 0.5s;
}
#toggle
{
position: fixed;
top: 0;
left: 0;
transform: translateX(-100%);
}
/* Стилизуем изображение скрепки */
.switch, .switch:before, .switch:after {
display: block;
}
.switch:before, .switch:after, .handle {
position: absolute;
}
.switch, .switch:before {
box-shadow:
0 0.15em 0 #fff6 inset,
0 0.3em 0 #fff6 inset,
0.25em 0 0 #fff6 inset,
0 -0.25em 0 #fff6 inset,
0 0.5em 0 inset,
0.5em 0 0 inset,
0 -0.5em 0 inset,
0 0.75em 0 #0002 inset,
0 0.25em 0 #0002;
}
.switch:before, .switch:after
{
content: "";
}
.switch
{
border-radius: 2em 0 0 2em;
color: #969696;
cursor: pointer;
margin: auto;
position: relative;
width: 12em;
height: 4em;
transform: translateX(-2em);
}
.switch:before
{
border-radius: 1.5em 0 0 1.5em;
top: 0.5em;
right: 0;
width: 8em;
height: 3em;
}
.switch:after
{
border-radius: 0 1.75em 1.75em 0;
box-shadow:
0 0.15em 0 #fff6 inset,
0 0.3em 0 #fff6 inset,
-0.25em 0 0 #fff6 inset,
0 -0.25em 0 #fff6 inset,
0 0.5em 0 inset,
-0.5em 0 0 inset,
0 -0.5em 0 inset,
0 0.75em 0 #0002 inset,
0 0.25em 0 #0002;
left: 100%;
width: 4em;
height: 3.5em;
}
/* Управление черно-зеленой кнопкой на скрепке */
.handle
{
animation: off var(--dur) linear;
background-color: var(--gray);
background-image:
radial-gradient(100% 100% at 65% 65%,#fff6 6.5%,#fff0 7%),
radial-gradient(200% 200% at 33% 33%,#fff 4.5%,#fff0 5% 26.5%,#0003 27%);
border-radius: 50%;
box-shadow:
0.1em 0.1em 0 #0002 inset,
-0.25em -0.25em 0 #fff3 inset,
0 0.5em 0 #0002;
top: -0.5em;
left: -0.5em;
width: 5em;
height: 5em;
z-index: 1;
}
.pristine .handle
{
animation: none;
}
#toggle:checked + .switch .handle
{
animation: on var(--dur) linear forwards;
}
@keyframes on {
from {
transform: translate(0,0) scale(1,1);
}
10% {
transform: translate(1.25em,0) scale(1,1);
}
20% {
transform: translate(3.5em,0) scale(1.1,1.1);
}
70% {
transform: translate(10.5em,0) scale(1.1,1.1);
}
75% {
transform: translate(11em,-0.25em) scale(1,1);
}
80% {
transform: translate(12.5em,-0.25em) scale(1,1);
}
90% {
background-color: var(--gray);
transform: translate(11.5em,-0.25em) scale(1,1);
}
to {
background-color: var(--green);
transform: translate(12.25em,-0.25em) scale(1,1);
}
}
@keyframes off {
from {
background-color: var(--green);
transform: translate(12.25em,-0.25em) scale(1,1);
}
10% {
transform: translate(12.25em,0) scale(1,1);
}
20% {
transform: translate(11.5em,0) scale(1.1,1.1);
}
70% {
transform: translate(3.5em,0) scale(1.1,1.1);
}
75% {
transform: translate(1.25em,0) scale(1,1);
}
80% {
transform: translate(-0.5em,0) scale(1,1);
}
90% {
background-color: var(--green);
transform: translate(0.5em,0) scale(1,1);
}
to {
background-color: var(--gray);
transform: translate(0,0) scale(1,1);
}
}
/* Управление переключателем видимости пароля */
#checkdiv
{
font-family:FontAwesome;
z-index:10;
background:transparent;
position:absolute;
top:33.4rem;
right:2rem;
color:green;
font-size:2rem;
cursor:pointer;
}
/* ****************************************************** EntryClass.css *** */