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

From Donate
Jump to navigation Jump to search
Content deleted Content added
try and rotate back icon for RtL
No edit summary
 
(7 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;
}
}


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

.mc-icon-back {
height: 18px;
width: 26px;
}
}


Line 33: 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 42: 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 95: 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 127: 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-link:hover {
color: #447ff5;
text-decoration: underline;
}
}


Line 153: 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;
}