39
edits
Pseudosphere (talk | contribs) (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; } }...") |
Pseudosphere (talk | contribs) No edit summary |
||
(3 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
{{#css: | {{#css: | ||
@supports selector(::-webkit-scrollbar) { | |||
background: # | ::-webkit-scrollbar { | ||
background: #AAA; | |||
height: 18px; | |||
width: 18px; | |||
} | |||
::-webkit-scrollbar-track { | |||
border: 1px #AAA; | |||
background: #808080; | |||
margin: 1px; | |||
} | |||
::-webkit-scrollbar-track:horizontal { | |||
border-style: solid none; | |||
} | } | ||
::-webkit-scrollbar-track:vertical { | |||
border-style: none solid; | |||
: | } | ||
::-webkit-scrollbar-thumb { | |||
background: # | 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: | border: 1px #AAA; | ||
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; | |||
} | } | ||
::-webkit-scrollbar-corner { | |||
background: # | background: #AAA; | ||
} | } | ||
} | } | ||
@supports not selector(::-webkit-scrollbar) { | @supports not selector(::-webkit-scrollbar) { | ||
* { | |||
scrollbar-color: | scrollbar-color: #AAA #808080; | ||
} | } | ||
} | } | ||
}}<div | }} | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqu{{Loop| | <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]] |
edits