User:Pseudosphere/Test Page: Difference between revisions

no edit summary
(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; } }...")
 
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{#css:
{{#css:
.testy {
@supports selector(::-webkit-scrollbar) {
background: #000;
::-webkit-scrollbar {
color: #FFF;
background: #AAA;
font-weight: bold;
height: 18px;
height: 256px;
width: 18px;
overflow: scroll;
}
::-webkit-scrollbar-track {
border: 1px #AAA;
background: #808080;
margin: 1px;
}
::-webkit-scrollbar-track:horizontal {
border-style: solid none;
}
}
 
::-webkit-scrollbar-track:vertical {
@supports selector(::-webkit-scrollbar) {
border-style: none solid;
:is(html, .testy)::-webkit-scrollbar {
}
width: 40px;
::-webkit-scrollbar-thumb {
background: #0FF;
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: 6px solid #F00;
border: 1px #AAA;
outline: 12px solid #0F0;
height: 16px;
width: 16px;
}
::-webkit-scrollbar-thumb:horizontal {
border-style: solid none;
}
::-webkit-scrollbar-thumb:vertical {
border-style: none solid;
}
::-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;
}
::-webkit-scrollbar-button:active {
background-color: #FFF;
}
::-webkit-scrollbar-button:horizontal {
border-style: solid solid solid none;
height: 18px;
width: 17px;
}
::-webkit-scrollbar-button:vertical {
border-style: none solid solid;
height: 17px;
width: 18px;
}
::-webkit-scrollbar-button:disabled, ::-webkit-scrollbar-button:start {
display: none;
}
::-webkit-scrollbar-button:end:decrement:enabled {
display: block;
}
}
:is(html, .testy)::-webkit-scrollbar-thumb {
::-webkit-scrollbar-corner {
background: #FF0;
background: #AAA;
border: 3px solid #00F;
outline: 4px solid #F0F;
}
}
}
}
@supports not selector(::-webkit-scrollbar) {
@supports not selector(::-webkit-scrollbar) {
html, .testy {
* {
scrollbar-color: red blue;
scrollbar-color: #AAA #808080;
}
}
}
}
}}<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}}.
<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>
{{Loop|16|Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
{{Loop|16|<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
 
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]]
39

edits