User:Pseudosphere/Test Page: Difference between revisions

Jump to navigation Jump to search

User:Pseudosphere/Test Page (view source)

Revision as of 07:12, 3 March 2025

694 bytes added ,  3 March
no edit summary
Visual
No edit summary
No edit summary
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
37

edits

Retrieved from "http://camp2jr.objectshow.community/index.php/Special:MobileDiff/1459"

Navigation menu