37
edits
User:Pseudosphere/Test Page: Difference between revisions
Jump to navigation
Jump to search
no edit summary
Pseudosphere (talk | contribs) No edit summary |
Pseudosphere (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
{{#css: | {{#css: | ||
@supports selector(::-webkit-scrollbar) { | @supports selector(::-webkit-scrollbar) { | ||
::-webkit-scrollbar { | |||
background: #AAA; | background: #AAA; | ||
height: 18px; | height: 18px; | ||
width: 18px; | width: 18px; | ||
} | } | ||
::-webkit-scrollbar-track { | |||
border: 1px #AAA; | border: 1px #AAA; | ||
background: #808080; | background: #808080; | ||
margin: 1px; | margin: 1px; | ||
} | } | ||
::-webkit-scrollbar-track:horizontal { | |||
border-style: solid none; | border-style: solid none; | ||
} | } | ||
::-webkit-scrollbar-track:vertical { | |||
border-style: none solid; | border-style: none solid; | ||
} | } | ||
::-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; | ||
} | } | ||
::-webkit-scrollbar-thumb:horizontal { | |||
border-style: solid none; | border-style: solid none; | ||
} | } | ||
::-webkit-scrollbar-thumb:vertical { | |||
border-style: none solid; | 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; | 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; | ||
} | } | ||
::-webkit-scrollbar-button:active { | |||
background-color: #FFF; | background-color: #FFF; | ||
} | } | ||
::-webkit-scrollbar-button:horizontal { | |||
border-style: solid solid solid none; | border-style: solid solid solid none; | ||
height: 18px; | height: 18px; | ||
width: 17px; | width: 17px; | ||
} | } | ||
::-webkit-scrollbar-button:vertical { | |||
border-style: none solid solid; | border-style: none solid solid; | ||
height: 17px; | height: 17px; | ||
width: 18px; | width: 18px; | ||
} | } | ||
::-webkit-scrollbar-button:disabled, ::-webkit-scrollbar-button:start { | |||
display: none; | display: none; | ||
} | } | ||
::-webkit-scrollbar-button:end:decrement:enabled { | |||
display: block; | display: block; | ||
} | } | ||
::-webkit-scrollbar-corner { | |||
background: #AAA; | background: #AAA; | ||
} | } | ||
} | } | ||
@supports not selector(::-webkit-scrollbar) { | @supports not selector(::-webkit-scrollbar) { | ||
* { | |||
scrollbar-color: #AAA #808080; | scrollbar-color: #AAA #808080; | ||
} | } | ||
} | } | ||
}} | }} | ||
<div | <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> | ||