User:Pseudosphere/Test Page - Revision history

Pseudosphere at 09:50, 3 March 2025

2025-03-03T09:50:53Z

← Older revision		Revision as of 09:50, 3 March 2025
Line 1:		Line 1:
	{{#css:		{{#css:
	~~.NS {~~
	~~border: 1px solid #000;~~
	}
	@supports selector(::-webkit-scrollbar) {		@supports selector(::-webkit-scrollbar) {
	~~.NS~~::-webkit-scrollbar {		::-webkit-scrollbar {
	background: #AAA;		background: #AAA;
	height: 18px;		height: 18px;
	width: 18px;		width: 18px;
	}		}
	~~.NS~~::-webkit-scrollbar-track {		::-webkit-scrollbar-track {
	border: 1px #AAA;		border: 1px #AAA;
	background: #808080;		background: #808080;
	margin: 1px;		margin: 1px;
	}		}
	~~.NS~~::-webkit-scrollbar-track:horizontal {		::-webkit-scrollbar-track:horizontal {
	border-style: solid none;		border-style: solid none;
	}		}
	~~.NS~~::-webkit-scrollbar-track:vertical {		::-webkit-scrollbar-track:vertical {
	border-style: none solid;		border-style: none solid;
	}		}
	~~.NS~~::-webkit-scrollbar-thumb {		::-webkit-scrollbar-thumb {
	background: linear-gradient(#0000, #0000 calc(100% - 1px), #000 calc(100% - 1px)), linear-gradient(to right, #0000, #0000 calc(100% - 1px), #000 calc(100% - 1px)), linear-gradient(#FFF 1px, #0000 1px), linear-gradient(to right, #FFF 1px, #0000 1px, #0000 calc(100% - 2px), #555 calc(100% - 2px)), linear-gradient(#0000 calc(100% - 2px), #555 calc(100% - 2px)), radial-gradient(circle, #0000 3px, #AAA 3px), linear-gradient(135deg, #000 calc(50% - 3px), #151515 calc(50% - 1.5px), #959595 50%, #F4F4F4 calc(50% + 1.5px), #FFF calc(50% + 3px)) #AAA;		background: linear-gradient(#0000, #0000 calc(100% - 1px), #000 calc(100% - 1px)), linear-gradient(to right, #0000, #0000 calc(100% - 1px), #000 calc(100% - 1px)), linear-gradient(#FFF 1px, #0000 1px), linear-gradient(to right, #FFF 1px, #0000 1px, #0000 calc(100% - 2px), #555 calc(100% - 2px)), linear-gradient(#0000 calc(100% - 2px), #555 calc(100% - 2px)), radial-gradient(circle, #0000 3px, #AAA 3px), linear-gradient(135deg, #000 calc(50% - 3px), #151515 calc(50% - 1.5px), #959595 50%, #F4F4F4 calc(50% + 1.5px), #FFF calc(50% + 3px)) #AAA;
	border: 1px #AAA;		border: 1px #AAA;
Line 26:		Line 23:
	width: 16px;		width: 16px;
	}		}
	~~.NS~~::-webkit-scrollbar-thumb:horizontal {		::-webkit-scrollbar-thumb:horizontal {
	border-style: solid none;		border-style: solid none;
	}		}
	~~.NS~~::-webkit-scrollbar-thumb:vertical {		::-webkit-scrollbar-thumb:vertical {
	border-style: none solid;		border-style: none solid;
	}		}
	~~.NS~~::-webkit-scrollbar-button {		::-webkit-scrollbar-button {
	background: linear-gradient(#0000, #0000 calc(100% - 1px), #000 calc(100% - 1px)), linear-gradient(to right, #0000, #0000 calc(100% - 1px), #000 calc(100% - 1px)), linear-gradient(#FFF 1px, #0000 1px), linear-gradient(to right, #FFF 1px, #0000 1px, #0000 calc(100% - 2px), #555 calc(100% - 2px)), linear-gradient(#0000 calc(100% - 2px), #555 calc(100% - 2px)) #AAA;		background: linear-gradient(#0000, #0000 calc(100% - 1px), #000 calc(100% - 1px)), linear-gradient(to right, #0000, #0000 calc(100% - 1px), #000 calc(100% - 1px)), linear-gradient(#FFF 1px, #0000 1px), linear-gradient(to right, #FFF 1px, #0000 1px, #0000 calc(100% - 2px), #555 calc(100% - 2px)), linear-gradient(#0000 calc(100% - 2px), #555 calc(100% - 2px)) #AAA;
	border: 1px solid #AAA;		border: 1px solid #AAA;
	}		}
	~~.NS~~::-webkit-scrollbar-button:active {		::-webkit-scrollbar-button:active {
	background-color: #FFF;		background-color: #FFF;
	}		}
	~~.NS~~::-webkit-scrollbar-button:horizontal {		::-webkit-scrollbar-button:horizontal {
	border-style: solid solid solid none;		border-style: solid solid solid none;
	height: 18px;		height: 18px;
	width: 17px;		width: 17px;
	}		}
	~~.NS~~::-webkit-scrollbar-button:vertical {		::-webkit-scrollbar-button:vertical {
	border-style: none solid solid;		border-style: none solid solid;
	height: 17px;		height: 17px;
	width: 18px;		width: 18px;
	}		}
	~~.NS~~::-webkit-scrollbar-button:disabled, ~~.NS~~::-webkit-scrollbar-button:start {		::-webkit-scrollbar-button:disabled, ::-webkit-scrollbar-button:start {
	display: none;		display: none;
	}		}
	~~.NS~~::-webkit-scrollbar-button:end:decrement:enabled {		::-webkit-scrollbar-button:end:decrement:enabled {
	display: block;		display: block;
	}		}
	~~.NS~~::-webkit-scrollbar-corner {		::-webkit-scrollbar-corner {
	background: #AAA;		background: #AAA;
	}		}
	}		}
	@supports not selector(::-webkit-scrollbar) {		@supports not selector(::-webkit-scrollbar) {
	~~.NS~~ {		* {
	scrollbar-color: #AAA #808080;		scrollbar-color: #AAA #808080;
	}		}
	}		}
	}}		}}
	<div ~~class="NS"~~ style="height: 512px; overflow: scroll; resize: horizontal;">		<div style="border: 1px solid #000; height: 512px; overflow: scroll; resize: horizontal;">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqu{{Loop\|128\|a}}.</p>		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqu{{Loop\|128\|a}}.</p>
	{{Loop\|16\|<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>		{{Loop\|16\|<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Pseudosphere at 09:48, 3 March 2025

2025-03-03T09:48:05Z

← Older revision		Revision as of 09:48, 3 March 2025
Line 40:		Line 40:
	}		}
	.NS::-webkit-scrollbar-button:horizontal {		.NS::-webkit-scrollbar-button:horizontal {
	border-style: solid ~~none~~ solid solid;		border-style: solid solid solid none;
	height: 18px;		height: 18px;
	width: 17px;		width: 17px;
Line 49:		Line 49:
	width: 18px;		width: 18px;
	}		}
	.NS::-webkit-scrollbar-button:disabled, .NS::-webkit-scrollbar-button~~:horizontal:end, .NS::-webkit-scrollbar-button:vertical~~:start {		.NS::-webkit-scrollbar-button:disabled, .NS::-webkit-scrollbar-button:start {
	display: none;		display: none;
	}		}
	.NS::-webkit-scrollbar-button~~:horizontal:start:increment:enabled, .NS::-webkit-scrollbar-button:vertical~~:end:decrement:enabled {		.NS::-webkit-scrollbar-button:end:decrement:enabled {
	display: block;		display: block;
	}		}

Pseudosphere at 07:12, 3 March 2025

2025-03-03T07:12:23Z

← Older revision		Revision as of 07:12, 3 March 2025
Line 1:		Line 1:
	{{#css:		{{#css:
	.~~testy~~ {		.NS {
	~~background~~: #000;		border: 1px solid #000;
	~~color: #FFF;~~
	~~font-weight: bold;~~
	~~height: 256px;~~
	~~overflow: scroll~~;
	}		}

	@supports selector(::-webkit-scrollbar) {		@supports selector(::-webkit-scrollbar) {
	~~:is(html,~~ .~~testy)~~::-webkit-scrollbar {		.NS::-webkit-scrollbar {
	width: ~~40px~~;		background: #AAA;
	~~background~~: #~~0FF~~;		height: 18px;
	~~border~~: ~~6px solid~~ #~~F00~~;		width: 18px;
	~~outline~~: ~~12px solid #0F0~~;		}
			.NS::-webkit-scrollbar-track {
			border: 1px #AAA;
			background: #808080;
			margin: 1px;
	}		}
	~~:is(html,~~ .~~testy)~~::-webkit-scrollbar-~~thumb~~ {		.NS::-webkit-scrollbar-track:horizontal {
	~~background: #FF0;~~		border-style: solid none;
	border: ~~3px solid #00F;~~
	~~outline: 4px~~ solid ~~#F0F~~;
	}		}
			.NS::-webkit-scrollbar-track:vertical {
			border-style: none solid;
	}		}
	~~@supports not selector~~(::-webkit-scrollbar) {		.NS::-webkit-scrollbar-thumb {
	~~html~~, .~~testy~~ {		background: linear-gradient(#0000, #0000 calc(100% - 1px), #000 calc(100% - 1px)), linear-gradient(to right, #0000, #0000 calc(100% - 1px), #000 calc(100% - 1px)), linear-gradient(#FFF 1px, #0000 1px), linear-gradient(to right, #FFF 1px, #0000 1px, #0000 calc(100% - 2px), #555 calc(100% - 2px)), linear-gradient(#0000 calc(100% - 2px), #555 calc(100% - 2px)), radial-gradient(circle, #0000 3px, #AAA 3px), linear-gradient(135deg, #000 calc(50% - 3px), #151515 calc(50% - 1.5px), #959595 50%, #F4F4F4 calc(50% + 1.5px), #FFF calc(50% + 3px)) #AAA;
	scrollbar-~~color~~: ~~red blue~~;		border: 1px #AAA;
			height: 16px;
			width: 16px;
			}
			.NS::-webkit-scrollbar-thumb:horizontal {
			border-style: solid none;
			}
			.NS::-webkit-scrollbar-thumb:vertical {
			border-style: none solid;
			}
			.NS::-webkit-scrollbar-button {
			background: linear-gradient(#0000, #0000 calc(100% - 1px), #000 calc(100% - 1px)), linear-gradient(to right, #0000, #0000 calc(100% - 1px), #000 calc(100% - 1px)), linear-gradient(#FFF 1px, #0000 1px), linear-gradient(to right, #FFF 1px, #0000 1px, #0000 calc(100% - 2px), #555 calc(100% - 2px)), linear-gradient(#0000 calc(100% - 2px), #555 calc(100% - 2px)) #AAA;
			border: 1px solid #AAA;
			}
			.NS::-webkit-scrollbar-button:active {
			background-color: #FFF;
			}
			.NS::-webkit-scrollbar-button:horizontal {
			border-style: solid none solid solid;
			height: 18px;
			width: 17px;
	}		}
			.NS::-webkit-scrollbar-button:vertical {
			border-style: none solid solid;
			height: 17px;
			width: 18px;
	}		}
	~~}}<div class="testy">~~		.NS::-webkit-scrollbar-button:disabled, .NS::-webkit-scrollbar-button:horizontal:end, .NS::-webkit-scrollbar-button:vertical:start {
	~~Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqu{{Loop\|4096\|a}}~~.		display: none;

	~~{{Loop\|16\|Lorem ipsum dolor sit amet~~, ~~consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua~~.

	~~Ut enim ad minim veniam~~, ~~quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat~~.

	~~Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.~~

	~~<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>}}~~
	~~</div>~~
	~~{{#css~~:
	~~.NS~~ {
	~~border: 1px solid transparent;~~
	~~outline~~: ~~1px solid #000~~;
	}		}
	~~@supports selector(~~::-webkit-scrollbar~~) {~~		.NS::-webkit-scrollbar-button:horizontal:start:increment:enabled, .NS::-webkit-scrollbar-button:vertical:end:decrement:enabled {
	.NS::-webkit-scrollbar {		display: block;
	~~background~~: ~~#808080;~~
	~~box-shadow~~: ~~-2px -2px #000;~~
	~~outline~~: ~~1px solid #AAA;~~
	~~width~~: ~~16px~~;
	}		}
	.NS::-webkit-scrollbar-~~thumb~~ {		.NS::-webkit-scrollbar-corner {
	background: #AAA;		background: #AAA;
	~~border: solid;~~
	~~border-color: #FFF #555 #555 #FFF;~~
	~~border-style: solid ridge ridge solid;~~
	~~border-width: 1px 2px 2px 1px;~~
	~~width: 8px;~~
	}		}
	}		}
Line 64:		Line 65:
	}		}
	}}		}}
	<div class="NS" style="height: 512px; ~~margin-top~~: ~~64px~~; ~~overflow~~: ~~scroll~~;">		<div class="NS" style="height: 512px; overflow: scroll; resize: horizontal;">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqu{{Loop\|~~4096~~\|a}}.		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqu{{Loop\|128\|a}}.</p>
			{{Loop\|16\|<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	{{Loop\|16\|Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.		<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
	Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

	Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

	<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>}}		<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>}}
	</div>		</div>
	[[Category:Functional pages]]		[[Category:Functional pages]]

Pseudosphere at 07:34, 2 March 2025

2025-03-02T07:34:15Z

@@ Line 27: / Line 27: @@
+}
 }}<div class="testy">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqu{{Loop|4096|a}}.

Pseudosphere: Created page with "{{#css: .testy { background: #000; color: #FFF; font-weight: bold; height: 256px; overflow: scroll; } @supports selector(::-webkit-scrollbar) { :is(html, .testy)::-webkit-scrollbar { width: 40px; background: #0FF; border: 6px solid #F00; outline: 12px solid #0F0; } :is(html, .testy)::-webkit-scrollbar-thumb { background: #FF0; border: 3px solid #00F; outline: 4px solid #F0F; } } @supports not selector(::-webkit-scrollbar) { html, .testy { scrollbar-color: red blue; } }..."

2025-02-28T00:47:51Z

Created page with "{{#css: .testy { background: #000; color: #FFF; font-weight: bold; height: 256px; overflow: scroll; } @supports selector(::-webkit-scrollbar) { :is(html, .testy)::-webkit-scrollbar { width: 40px; background: #0FF; border: 6px solid #F00; outline: 12px solid #0F0; } :is(html, .testy)::-webkit-scrollbar-thumb { background: #FF0; border: 3px solid #00F; outline: 4px solid #F0F; } } @supports not selector(::-webkit-scrollbar) { html, .testy { scrollbar-color: red blue; } }..."

New page

{{#css:
.testy {
background: #000;
color: #FFF;
font-weight: bold;
height: 256px;
overflow: scroll;
}

@supports selector(::-webkit-scrollbar) {
:is(html, .testy)::-webkit-scrollbar {
width: 40px;
background: #0FF;
border: 6px solid #F00;
outline: 12px solid #0F0;
}
:is(html, .testy)::-webkit-scrollbar-thumb {
background: #FF0;
border: 3px solid #00F;
outline: 4px solid #F0F;
}
}
@supports not selector(::-webkit-scrollbar) {
html, .testy {
scrollbar-color: red blue;
}
}
}}<div class="testy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqu{{Loop|4096|a}}.

{{Loop|16|Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>}}
</div>
[[Category:Functional pages]]