Template:Cloudflare/styles.css - Revision history

Nedelya at 19:55, 26 August 2026

2026-08-26T19:55:41Z

← Older revision		Revision as of 19:55, 26 August 2026
Line 29:		Line 29:
	display: block;		display: block;
	font-size: 18px;		font-size: 18px;
			text-align: center;
	}		}

Nedelya at 19:52, 26 August 2026

2026-08-26T19:52:38Z

← Older revision		Revision as of 19:52, 26 August 2026
Line 112:		Line 112:
	top: 50%;		top: 50%;
	left: 0;		left: 0;
	width: ~~100~~%;		width: 79%;
	transform: translateY(-50%);		transform: translateY(-50%);
	}		}

Nedelya at 19:51, 26 August 2026

2026-08-26T19:51:51Z

← Older revision		Revision as of 19:51, 26 August 2026
Line 138:		Line 138:
	justify-content: center;		justify-content: center;
	padding-left: 7px;		padding-left: 7px;
	~~border-left: 1px solid #666666;~~
	line-height: 1;		line-height: 1;
	}		}
Line 147:		Line 146:
	height: auto;		height: auto;
	margin: 0 auto;		margin: 0 auto;
			border-left: 1px solid #666666;
	}		}

Nedelya at 19:50, 26 August 2026

2026-08-26T19:50:48Z

← Older revision		Revision as of 19:50, 26 August 2026
Line 106:		Line 106:
	}		}

	~~/* ONLY the three status messages are positioned */~~
	.cloudflare-status > .cloudflare-idle,		.cloudflare-status > .cloudflare-idle,
	.cloudflare-status > .cloudflare-raping,		.cloudflare-status > .cloudflare-raping,
Line 136:		Line 135:
	flex: 0 0 65px;		flex: 0 0 65px;
	flex-direction: column;		flex-direction: column;
	align-items: ~~center~~;		align-items: end;
	justify-content: center;		justify-content: center;
	padding-left: 7px;		padding-left: 7px;

Nedelya at 19:49, 26 August 2026

2026-08-26T19:49:45Z

← Older revision		Revision as of 19:49, 26 August 2026
Line 67:		Line 67:
	.cloudflare-verification {		.cloudflare-verification {
	display: flex;		display: flex;
			flex: 1 1 auto;
	align-items: center;		align-items: center;
	gap: 7px;		gap: 7px;
Line 94:		Line 95:
	}		}

	~~/* status text */~~
	.cloudflare-status {		.cloudflare-status {
	position: relative;		position: relative;
Line 106:		Line 106:
	}		}

			/* ONLY the three status messages are positioned */
	.cloudflare-status > .cloudflare-idle,		.cloudflare-status > .cloudflare-idle,
	.cloudflare-status > .cloudflare-raping,		.cloudflare-status > .cloudflare-raping,
Line 131:		Line 132:
	}		}

	~~/* logo */~~
	.cloudflare-box {		.cloudflare-box {
	display: flex;		display: flex;
Line 144:		Line 144:

	.cloudflare-box img {		.cloudflare-box img {
	display: block ~~!important~~;		display: block;
	width: 50px ~~!important~~;		width: 50px;
	height: auto ~~!important;~~		height: auto;
	~~max-width: 50px !important~~;
	margin: 0 auto;		margin: 0 auto;
	}		}

Nedelya at 19:48, 26 August 2026

2026-08-26T19:48:48Z

← Older revision		Revision as of 19:48, 26 August 2026
Line 7:		Line 7:
	line-height: 1.35;		line-height: 1.35;
	text-align: left;		text-align: left;
	box-sizing: border-box; ~~/* should help avoid issues on mobile */~~		box-sizing: border-box;
	max-width: 100%; ~~/* should help avoid issues on mobile */~~		max-width: 100%;
	}		}

Line 42:		Line 42:
	display: block;		display: block;
	font-size: 15px;		font-size: 15px;
	text-align: left;		text-align: left;
	}		}

Line 63:		Line 63:
	inset 0 0 0 1px #292929,		inset 0 0 0 1px #292929,
	0 2px 6px #000000;		0 2px 6px #000000;
	}

	~~.cloudflare-challenge > summary {~~
	~~box-sizing: border-box;~~
	~~display: flex;~~
	~~align-items: center;~~
	~~gap: 8px;~~
	~~min-height: 50px;~~
	~~padding: 5px;~~
	~~list-style: none;~~
	~~cursor: default;~~
	~~user-select: none;~~
	}

	~~.cloudflare-challenge > summary::marker {~~
	~~content: "";~~
	}		}

	.cloudflare-verification {		.cloudflare-verification {
	display: flex;		display: flex;
	~~flex: 1 1 auto;~~
	align-items: center;		align-items: center;
	gap: 7px;		gap: 7px;
	min-width: 0;		min-width: 0;
			padding: 5px;
	text-align: left;		text-align: left;
	}		}
Line 110:		Line 94:
	}		}

			/* status text */
	.cloudflare-status {		.cloudflare-status {
	position: relative;		position: relative;
Line 121:		Line 106:
	}		}

	.cloudflare-status > ~~span~~ {		.cloudflare-status > .cloudflare-idle,
			.cloudflare-status > .cloudflare-raping,
			.cloudflare-status > .cloudflare-success {
	position: absolute;		position: absolute;
	top: 50%;		top: 50%;
	left: 0;		left: 0;
	width: 100%;		width: 100%;
	~~opacity: 0;~~
	transform: translateY(-50%);		transform: translateY(-50%);
	}		}
Line 136:		Line 122:

	.cloudflare-raping {		.cloudflare-raping {
			opacity: 0;
	animation: cloudflare-raping 4s step-end forwards;		animation: cloudflare-raping 4s step-end forwards;
	}		}

	.cloudflare-success {		.cloudflare-success {
			opacity: 0;
	animation: cloudflare-success 4s step-end forwards;		animation: cloudflare-success 4s step-end forwards;
	}		}

			/* logo */
	.cloudflare-box {		.cloudflare-box {
	display: flex;		display: flex;
Line 155:		Line 144:

	.cloudflare-box img {		.cloudflare-box img {
	display: block;		display: block !important;
	width: 50px;		width: 50px !important;
	height: auto;		height: auto !important;
			max-width: 50px !important;
	margin: 0 auto;		margin: 0 auto;
	}		}
Line 182:		Line 172:
	text-shadow: none;		text-shadow: none;
	}		}
	~~/* this dumb solution couldve been avoided had sanitization allowed attr, fuck niggers */~~
	@keyframes cloudflare-checkbox {		@keyframes cloudflare-checkbox {
	0% {		0% {

Nedelya: Created page with ".template-cloudflare { background: #000000; border: 2px solid #FC7C1E; border-radius: 5px; color: #FFFFFF; font-family: 'Inter', sans-serif; line-height: 1.35; text-align: left; box-sizing: border-box; /* should help avoid issues on mobile / max-width: 100%; / should help avoid issues on mobile */ } .template-cloudflare .line1, .template-cloudflare .line2 { text-align: left; } .template-cloudflare .line1 { font-weight: normal; } .template-cloudflare..."

2026-08-26T19:38:02Z

Created page with ".template-cloudflare { background: #000000; border: 2px solid #FC7C1E; border-radius: 5px; color: #FFFFFF; font-family: 'Inter', sans-serif; line-height: 1.35; text-align: left; box-sizing: border-box; should help avoid issues on mobile: max-width: 100%; should help avoid issues on mobile: } .template-cloudflare .line1, .template-cloudflare .line2 { text-align: left; } .template-cloudflare .line1 { font-weight: normal; } .template-cloudflare..."

New page

.template-cloudflare {
background: #000000;
border: 2px solid #FC7C1E;
border-radius: 5px;
color: #FFFFFF;
font-family: 'Inter', sans-serif;
line-height: 1.35;
text-align: left;
box-sizing: border-box; /* should help avoid issues on mobile */
max-width: 100%; /* should help avoid issues on mobile */
}

.template-cloudflare .line1,
.template-cloudflare .line2 {
text-align: left;
}

.template-cloudflare .line1 {
font-weight: normal;
}

.template-cloudflare a,
.template-cloudflare a:visited {
color: #FC7C1E;
text-shadow: 0 0 15px #FFA945;
}

.cloudflare-title {
display: block;
font-size: 18px;
}

.cloudflare-verification-rowalign {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 5px;
}

.cloudflare-subtitle {
display: block;
font-size: 15px;
text-align: left;
}

.cloudflare-description {
display: block;
color: #888888;
font-size: 12px;
}

.cloudflare-challenge {
box-sizing: border-box;
flex: 0 0 230px;
width: 230px;
max-width: 100%;
margin: 0;
background: #181818;
border: 1px solid #666666;
border-radius: 3px;
box-shadow:
inset 0 0 0 1px #292929,
0 2px 6px #000000;
}

.cloudflare-challenge > summary {
box-sizing: border-box;
display: flex;
align-items: center;
gap: 8px;
min-height: 50px;
padding: 5px;
list-style: none;
cursor: default;
user-select: none;
}

.cloudflare-challenge > summary::marker {
content: "";
}

.cloudflare-verification {
display: flex;
flex: 1 1 auto;
align-items: center;
gap: 7px;
min-width: 0;
text-align: left;
}

.cloudflare-verification::before {
box-sizing: border-box;
display: grid;
flex: 0 0 20px;
width: 20px;
height: 20px;
place-items: center;
content: "";
background: #111111;
border: 2px solid #888888;
border-radius: 3px;
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
line-height: 1;
animation:
cloudflare-checkbox 4s step-end forwards,
cloudflare-spinner 2s linear 2s;
}

.cloudflare-status {
position: relative;
display: block;
flex: 1 1 auto;
min-width: 0;
min-height: 36px;
color: #EEEEEE;
font-size: 10px;
line-height: 1.15;
}

.cloudflare-status > span {
position: absolute;
top: 50%;
left: 0;
width: 100%;
opacity: 0;
transform: translateY(-50%);
}

.cloudflare-idle {
opacity: 1;
animation: cloudflare-idle 4s step-end forwards;
}

.cloudflare-raping {
animation: cloudflare-raping 4s step-end forwards;
}

.cloudflare-success {
animation: cloudflare-success 4s step-end forwards;
}

.cloudflare-box {
display: flex;
flex: 0 0 65px;
flex-direction: column;
align-items: center;
justify-content: center;
padding-left: 7px;
border-left: 1px solid #666666;
line-height: 1;
}

.cloudflare-box img {
display: block;
width: 50px;
height: auto;
margin: 0 auto;
}

.cloudflare-link {
display: block;
margin-top: 2px;
font-size: 7px;
line-height: 1.1;
white-space: nowrap;
}

.cloudflare-link a,
.cloudflare-link a:visited {
color: #3366CC;
text-decoration: none;
text-shadow: none;
}

.cloudflare-link a:hover,
.cloudflare-link a:active {
color: #3366CC;
text-decoration: underline;
text-shadow: none;
}
/* this dumb solution couldve been avoided had sanitization allowed attr, fuck niggers */
@keyframes cloudflare-checkbox {
0% {
content: "";
background: #111111;
border-color: #888888;
border-radius: 3px;
color: transparent;
}

50% {
content: "";
background: transparent;
border-color: #555555;
border-top-color: #FC7C1E;
border-radius: 50%;
color: transparent;
}

100% {
content: "✓";
background: #34B233;
border-color: #34B233;
border-radius: 3px;
color: #FFFFFF;
}
}

@keyframes cloudflare-spinner {
0% {
transform: rotate(0);
}

100% {
transform: rotate(720deg);
}
}

@keyframes cloudflare-idle {
0% {
opacity: 1;
}

50% {
opacity: 0;
}

100% {
opacity: 0;
}
}

@keyframes cloudflare-raping {
0% {
opacity: 0;
}

50% {
opacity: 1;
}

100% {
opacity: 0;
}
}

@keyframes cloudflare-success {
0% {
opacity: 0;
}

50% {
opacity: 0;
}

100% {
opacity: 1;
}
}