Template:MonthlyConvert/Default/styles.css: Difference between revisions

From Donate
Jump to navigation Jump to search
Content deleted Content added
No edit summary
No edit summary
 
(11 intermediate revisions by the same user not shown)
Line 3: Line 3:
.mc-modal *:after {
.mc-modal *:after {
box-sizing: border-box;
box-sizing: border-box;
}

.mc-modal,
.mc-modal * {
font-family: -apple-system,BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
}


Line 10: Line 15:
position: absolute;
position: absolute;
top: 20px;
top: 20px;
left: 15px;
left: 20px;
opacity: 0.6;
opacity: 0.5;
background: transparent;
border: 0;
padding: 0;
}
}


Line 18: Line 26:
}
}


.mc-icon-back {
body.rtl .mc-icon-back {
transform: rotate(180deg);
height: 18px;
width: 26px;
}
}


Line 29: Line 36:
left: 0;
left: 0;
z-index: 100;
z-index: 100;
background: rgba( 0, 0, 0, 0.8 );
background: rgba( 255, 255, 255, 0.65 );
width: 100%;
width: 100%;
height: 100%;
height: 100%;
Line 38: Line 45:
.mc-modal {
.mc-modal {
position: absolute;
position: absolute;
top: 5vh;
top: 50%;
left: 5%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 110;
z-index: 110;
background: #fff;
background: #fff;
padding: 40px 30px;
padding: 50px 20px 20px;
text-align: center;
text-align: center;
color: #000;
color: #000;
font-size: 16px;
font-size: 15px;
line-height: 1.4;
line-height: 1.4;
border: 1px solid #a2a9b1;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
font-style: normal;
border-radius: 2px;
box-shadow: 0 0 20px rgba( 0, 0, 0, 0.3 );
box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.2 );
width: calc( 90% );
width: 90%;
max-width: 600px;
max-height: 90vh;
max-height: 90vh;
overflow: auto;
overflow: auto;
}
}


@media ( min-width: 800px ) {
@media ( min-width: 720px ) {
.mc-modal {
.mc-modal {
padding: 50px 40px 40px;
left: 50%;
top: 10vh;
margin-left: -330px;
padding: 60px;
font-size: 17px;
width: 660px;
}
}
}
}


.mc-modal h1 {
.mc-modal h2 {
line-height: 1.1;
line-height: 1.3;
font-size: 150%;
border: 0;
font-size: 17px;
font-weight: bold;
margin: 0 0 20px 0;
}
}


.mc-modal p {
.mc-text {
margin: 1em 0 0;
margin-bottom: 20px;
}

/* Buttons */
.mc-buttons {
margin: 1em auto;
text-align: center;
}

@media ( min-width: 800px ) {
.mc-buttons {
margin: 2em auto 1em;
}
}
}


Line 91: Line 86:
min-height: 64px;
min-height: 64px;
padding: 12px;
padding: 12px;
margin-bottom: 10px;
margin-top: 12px;
font-size: 17px;
font-size: 17px;
font-weight: bold;
font-weight: bold;
background-color: #36c;
background-color: #36c;
border: 1px solid #36c;
border: 1px solid #36c;
border-radius: 6px;
border-radius: 2px;
outline: 0;
outline: 0;
color: #fff;
color: #fff;
Line 123: Line 118:
color: #36c;
color: #36c;
font-weight: bold;
font-weight: bold;
background: transparent;
text-decoration: underline;
border: 0;
margin-top: 12px;
padding: 10px 12px;
font-size: 15px;
cursor: pointer;
cursor: pointer;
}
}


.mc-edit-amount p {
.mc-link:hover {
color: #447ff5;
margin-bottom: 2em;
text-decoration: underline;
}

.mc-edit-amount label {
display: block;
margin: 1em 0;
}
}


Line 148: Line 153:
display: none;
display: none;
font-size: 14px;
font-size: 14px;
color: #d33;
color: #d73333;
}
}

Latest revision as of 20:37, 26 April 2024

.mc-modal *,
.mc-modal *:before,
.mc-modal *:after {
	box-sizing: border-box;
}

.mc-modal,
.mc-modal * {
	font-family: -apple-system,BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Back button */
.mc-back {
	cursor: pointer;
	position: absolute;
	top: 20px;
	left: 20px;
	opacity: 0.5;
	background: transparent;
	border: 0;
	padding: 0;
}

.mc-back:hover {
	opacity: 1;
}

body.rtl .mc-icon-back {
	transform: rotate(180deg);
}

/* Modal Screen */
.mc-modal-screen {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background: rgba( 255, 255, 255, 0.65 );
	width: 100%;
	height: 100%;
	display: none;
}

/* Modal Box */
.mc-modal {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 110;
	background: #fff;
	padding: 50px 20px 20px;
	text-align: center;
	color: #000;
	font-size: 15px;
	line-height: 1.4;
	border: 1px solid #a2a9b1;
	border-radius: 2px;
	box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.2 );
	width: 90%;
	max-width: 600px;
	max-height: 90vh;
	overflow: auto;
}

@media ( min-width: 720px ) {
	.mc-modal {
		padding: 50px 40px 40px;
	}
}

.mc-modal h2 {
	line-height: 1.3;
	border: 0;
	font-size: 17px;
	font-weight: bold;
	margin: 0 0 20px 0;
}

.mc-text {
	margin-bottom: 20px;
}

.mc-button {
	width: 100%;
	min-height: 64px;
	padding: 12px;
	margin-top: 12px;
	font-size: 17px;
	font-weight: bold;
	background-color: #36c;
	border: 1px solid #36c;
	border-radius: 2px;
	outline: 0;
	color: #fff;
	cursor: pointer;
	transition: all 0.25s ease-in-out;
}

.mc-button:focus {
	outline: 0;
	border-color: #36c !important;
	box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
}

.mc-button:hover {
	background-color: #447ff5;
	border-color: #447ff5;
}

.mc-button:active {
	background-color: #2a4b8d;
	border-color: #2a4b8d;
	box-shadow: none;
}

.mc-link {
	color: #36c;
	font-weight: bold;
	background: transparent;
	border: 0;
	margin-top: 12px;
	padding: 10px 12px;
	font-size: 15px;
	cursor: pointer;
}

.mc-link:hover {
	color: #447ff5;
	text-decoration: underline;
}

.mc-edit-amount label {
	display: block;
	margin: 1em 0;
}

.mc-other-amount {
	font-size: 200%;
}

#mc-other-amount-input {
	width: 30%;
	font-size: 100%;
	border: 0;
	outline: 0;
	border-bottom: 1px solid #000;
	text-align: center;
}

/* Error messages */
.mc-error {
	display: none;
	font-size: 14px;
	color: #d73333;
}