mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-18 07:51:55 +03:00
25e5a31d91
* Members: disabled signup button during signup * Members: disabled non-Stripe signup button during signup * Members: added check to Log in button logged in state
429 lines
8.1 KiB
CSS
429 lines
8.1 KiB
CSS
/* Reusable components */
|
|
/* ------------------------------------------------------------
|
|
|
|
|
|
*/
|
|
|
|
|
|
/* Modal */
|
|
/* ------------------------------------------------------------ */
|
|
.gm-page-overlay {
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: fixed;
|
|
overflow-y: scroll;
|
|
background: linear-gradient(45deg, rgba(13,25,40,0.96) 0%,rgba(0,0,0,0.96) 100%);
|
|
animation: fadeInOverlay 0.2s ease 1 forwards;
|
|
}
|
|
|
|
.gm-page-overlay.close {
|
|
animation: fadeOutOverlay 0.3s ease 1 forwards;
|
|
}
|
|
|
|
.gm-page-overlay.close .gm-modal {
|
|
animation: closeModal 0.3s ease-in-out 1 forwards;
|
|
}
|
|
|
|
.gm-modal-container {
|
|
position: relative;
|
|
top: 25vh;
|
|
display: flex;
|
|
min-height: 75vh;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.gm-modal {
|
|
position: relative;
|
|
margin: 0 auto;
|
|
animation: openModal 0.6s ease 1 forwards;
|
|
}
|
|
|
|
.gm-modal-close {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
display: block;
|
|
padding: 8px;
|
|
z-index: 9999;
|
|
padding: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gm-modal-close svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.gm-modal-close svg path {
|
|
stroke: var(--grey);
|
|
transition: all var(--animation-speed-base) ease;
|
|
}
|
|
|
|
.gm-modal-close:hover svg path {
|
|
stroke: var(--grey-d2);
|
|
}
|
|
|
|
@keyframes fadeInOverlay {
|
|
from {opacity: 0;}
|
|
to {opacity: 1;}
|
|
}
|
|
|
|
@keyframes fadeOutOverlay {
|
|
from {opacity: 1;}
|
|
to {opacity: 0;}
|
|
}
|
|
|
|
@keyframes openModal {
|
|
0% {
|
|
/* opacity: 0; */
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
/* opacity: 1.0; */
|
|
transform: scale(1.0);
|
|
}
|
|
}
|
|
|
|
@keyframes closeModal {
|
|
90% {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 440px) {
|
|
.gm-modal-container {
|
|
margin: 0;
|
|
padding: 0;
|
|
top: 0;
|
|
transform: none;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.gm-modal {
|
|
width: calc(100% - 48px);
|
|
min-height: calc(100vh - 90px);
|
|
padding: 24px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.gm-page-overlay {
|
|
background: linear-gradient(45deg, rgba(13,25,40,0.96) 0%,rgba(0,0,0,0.96) 100%);
|
|
}
|
|
|
|
@keyframes openModal {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1.0;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes closeModal {
|
|
0% {
|
|
opacity: 1.0;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
60% {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Buttons */
|
|
/* ------------------------------------------------------------ */
|
|
button {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
font-weight: 500;
|
|
border: 1px solid var(--grey);
|
|
color: var(--grey-d3);
|
|
text-align: center;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
padding: 15px 16px 16px;
|
|
border-radius: 6px;
|
|
outline: none;
|
|
transition: all var(--animation-speed-f1) ease-in-out;
|
|
position: relative;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
button:hover {
|
|
color: var(--blue-l1);
|
|
}
|
|
|
|
button:disabled,
|
|
button[disabled] {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
cursor: auto;
|
|
}
|
|
|
|
.gm-btn-blue {
|
|
background: linear-gradient(to bottom, #3eb0ef 0%,#008bd6 100%);
|
|
color: var(--white);
|
|
border: none;
|
|
}
|
|
|
|
.gm-btn-blue:active {
|
|
background: linear-gradient(to bottom, #1693d6 0%,#0076b6 100%);
|
|
}
|
|
|
|
.gm-btn-green {
|
|
background: linear-gradient(to bottom, #3BD95D 0%, #1FA33C 100%);
|
|
color: var(--white);
|
|
border: none;
|
|
}
|
|
|
|
.gm-btn-green:active {
|
|
background: linear-gradient(to bottom, #21BF43 0%,#0C8A28 100%);
|
|
}
|
|
|
|
.gm-btn-blue:hover:enabled {
|
|
color: var(--white);
|
|
}
|
|
|
|
.gm-btn-blue:hover:enabled:before {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.gm-btn-blue:before {
|
|
content: "";
|
|
transition: all var(--animation-speed-s1) ease;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: linear-gradient(0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.2));
|
|
opacity: 0;
|
|
}
|
|
|
|
.gm-btn-blue:disabled:before {
|
|
background: #fff;
|
|
opacity: 0.15;
|
|
}
|
|
|
|
@keyframes spinner {
|
|
to {transform: rotate(360deg);}
|
|
}
|
|
|
|
.gm-btn-blue .gm-spinner {
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: -3px 8px -3px 0;
|
|
border-radius: 50%;
|
|
border-top: 2px solid rgba(255, 255, 255, 0.85);
|
|
border-right: 2px solid transparent;
|
|
animation: spinner .6s linear infinite;
|
|
}
|
|
|
|
.gm-check {
|
|
margin: -4px 8px -6px 0;
|
|
}
|
|
|
|
.gm-check svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.gm-check-animation {
|
|
stroke-dasharray: 87 89;
|
|
stroke-dashoffset: 88;
|
|
animation: check_draw 666ms linear 100ms forwards;
|
|
}
|
|
|
|
@keyframes check_draw {
|
|
100% { stroke-dashoffset: 0; }
|
|
}
|
|
|
|
/* Forms inputs */
|
|
/* ------------------------------------------------------------ */
|
|
|
|
/* Change Autocomplete styles in Chrome*/
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:hover,
|
|
input:-webkit-autofill:focus,
|
|
input:-webkit-autofill:active,
|
|
textarea:-webkit-autofill,
|
|
textarea:-webkit-autofill:hover
|
|
textarea:-webkit-autofill:focus,
|
|
textarea:-webkit-autofill:active,
|
|
select:-webkit-autofill,
|
|
select:-webkit-autofill:hover,
|
|
select:-webkit-autofill:focus,
|
|
select:-webkit-autofill:active {
|
|
-webkit-box-shadow: 0 0 0px 40px #FFF inset;
|
|
}
|
|
|
|
::-webkit-input-placeholder,
|
|
::-moz-placeholder,
|
|
:-ms-input-placeholder,
|
|
:-moz-placeholder {
|
|
color: var(--grey-d1);
|
|
}
|
|
|
|
.gm-form-element {
|
|
position: relative;
|
|
}
|
|
|
|
.gm-input {
|
|
position: relative;
|
|
border-bottom: 1px solid var(--grey-l1);
|
|
}
|
|
|
|
.gm-input.last,
|
|
.gm-input.single {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.gm-input.first input {
|
|
border-radius: 6px 6px 0 0;
|
|
}
|
|
|
|
.gm-input.last input {
|
|
border-radius: 0 0 6px 6px;
|
|
}
|
|
|
|
.gm-input.single input {
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.gm-input input {
|
|
font-size: var(--text-base);
|
|
color: var(--grey-d3);
|
|
border: none;
|
|
-webkit-appearance: none;
|
|
box-sizing: border-box;
|
|
background: var(--white);
|
|
width: 100%;
|
|
outline: none;
|
|
padding: 15px 14px 15px 38px;
|
|
letter-spacing: 0.2px;
|
|
vertical-align: middle;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.gm-input input:focus {
|
|
|
|
}
|
|
|
|
.gm-input i svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.gm-input i svg path {
|
|
stroke: var(--grey-d1);
|
|
transition: stroke var(--animation-speed-base) ease-in-out;
|
|
}
|
|
|
|
.gm-input input.gm-error {
|
|
background: #FEEBE6;
|
|
box-shadow: 0 0 1px rgba(255, 0, 0, 1);
|
|
}
|
|
|
|
.gm-input input.gm-error + i svg path {
|
|
stroke: color-mod(var(--red) a(0.5));
|
|
}
|
|
|
|
.gm-input input.gm-error::-webkit-input-placeholder,
|
|
.gm-input input.gm-error::-moz-placeholder,
|
|
.gm-input input.gm-error:-ms-input-placeholder,
|
|
.gm-input input.gm-error:-moz-placeholder {
|
|
color: color-mod(var(--red) a(0.75));
|
|
}
|
|
|
|
.gm-input input.gm-input-filled + i svg path {
|
|
stroke: var(--grey-d2);
|
|
}
|
|
|
|
.gm-input i {
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 14px;
|
|
opacity: 1.0;
|
|
transition: all var(--animation-speed-base) ease-in-out;
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
.gm-input-errortext {
|
|
position: absolute;
|
|
top: 46px;
|
|
color: color-mod(var(--red) l(+5%) s(-2%));
|
|
font-size: var(--text-xs);
|
|
letter-spacing: 0.8px;
|
|
border-radius: 5px;
|
|
z-index: 9999;
|
|
animation: slideErrorText 0.4s ease;
|
|
}
|
|
|
|
@keyframes slideErrorText {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0px);
|
|
}
|
|
}
|
|
|
|
/* Error tooltip triangle */
|
|
.gm-input-errortext-xx:before {
|
|
position: absolute;
|
|
top: -6px;
|
|
left: 50%;
|
|
margin-left: -6px;
|
|
width: 0;
|
|
border-bottom: 6px solid var(--grey-d3);
|
|
border-bottom: 6px solid var(--grey-d3);
|
|
border-right: 6px solid transparent;
|
|
border-left: 6px solid transparent;
|
|
content: " ";
|
|
font-size: 0;
|
|
line-height: 0;
|
|
}
|
|
|
|
.gm-form-errortext {
|
|
color: #FF7254;
|
|
letter-spacing: 0.4px;
|
|
margin: 24px -2px 0px;
|
|
border: 1px solid color-mod(var(--red) a(0.4));
|
|
padding: 13px 14px;
|
|
font-weight: 400;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: start;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.gm-form-errortext span {
|
|
margin: 1px 0 0;
|
|
}
|
|
|
|
.gm-form-errortext i {
|
|
margin: 1px 8px 0 0;
|
|
}
|
|
|
|
.gm-form-errortext i svg path {
|
|
stroke: #FF7254;
|
|
} |