MediaWiki:Common.css
Revision as of 23:20, 21 May 2013 by Herrie (talk | contribs) (Created page with "→CSS placed here will be applied to all skins: →* experimental: device page - get WOP section *: /* see http://wiki.cyanogenmod.org/w/User:Flo_Edelmann/Device_Redesign ...")
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* CSS placed here will be applied to all skins */ /** experimental: device page - get WOP section **/ /* see http://wiki.cyanogenmod.org/w/User:Flo_Edelmann/Device_Redesign */ div#content .device-get-WOP a { display: inline-block; background: no-repeat center 10px #fafafa; color: #555; padding: 88px 10px 10px; width: 20%; margin: 4px; overflow: none; text-align: left; vertical-align: top; text-decoration: none; } @media all and (max-width: 1250px) { div#content .device-get-WOP a { width: 40%; } } @media all and (max-width: 900px) { div#content .device-get-WOP a { width: auto; display: block; } } .device-get-WOP a b { display: block; text-align: center; margin: 0 0 10px; color: #017dbb; } .device-get-WOP a em { font-weight: bold; font-style: normal; border-bottom: 2px solid #555; } div#content .device-get-WOP a:hover, div#content .device-get-WOP a:focus { background-color: #cef; } div#content .device-get-WOP a:hover em, div#content .device-get-WOP a:focus em { border-color: #555; } div#content .device-get-WOP .nightly a { background-image: url(/images/5/5f/Device-get-nightly.png); } .device-get-WOP .nightly a em { border-color: #ff2000; } div#content .device-get-WOP .m-snapshot a { background-image: url(/images/0/05/Device-get-m-snapshot.png); } .device-get-WOP .m-snapshot a em { border-color: #ffd900; } div#content .device-get-WOP .release-candidate a { background-image: url(/images/6/6f/Device-get-release-candidate.png); } .device-get-WOP .release-candidate a em { border-color: #ccf200; } div#content .device-get-WOP .stable a { background-image: url(/images/7/70/Device-get-stable.png); } .device-get-WOP .stable a em { border-color: #1bb200; } .device-build-WOP { font-size: 1em; color: #555; overflow: hidden; text-align: center; text-transform: uppercase; } .device-build-WOP:before, .device-build-WOP:after { background-color: #555; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; } .device-build-WOP:before { right: 0.5em; margin-left: -50%; } .device-build-WOP:after { left: 0.5em; margin-right: -50%; } /**** start: DEVICE PAGE WITH FILTERS ****/ /** basic styling **/ #WOPFilter { position: relative; margin: 1ex 0 2ex; vertical-align: bottom; } #advancedButton { display: inline-block; text-decoration: none; margin: 15px 0; color: #888; padding: 0 0 0 18px; background: url(/images/6/6d/Expand.png) no-repeat left center; } #advancedButton.expanded { background-image: url(/images/a/ab/Collapse.png); } #advancedButton:hover, #advancedButton:focus { text-decoration: underline; } #advancedFilters { position: relative; margin: 0 0 2ex; } #advancedFilters.collapsed { display: none; } #allDevicesButton { margin-left: 2ex; } /** filter input **/ #WOPFilter input { border: 1px solid #27aae1; border-width: 0 0 1px; padding: 3px 5px; margin: 0; background: none; vertical-align: bottom; } #WOPFilter .holoInput:before, #WOPFilter .holoInput:after { border: 1px solid #27aae1; border-width: 0 1px 0 0; content: ""; height: 5px; width: 0; display: inline-block; vertical-align: bottom; } #WOPFilter .holoInput:after { margin-right: 2ex; } /** dropdowns **/ #WOPFilter a.dropdown { margin: 0 1ex; padding: 4px; color: #888; text-decoration: none; font-size: 90%; vertical-align: bottom; background: #eee; border: 1px solid #dadada; } #WOPFilter a.dropdown:hover, #WOPFilter a.dropdown:focus, #WOPFilter a.dropdown[data-active] { background: #ddd; outline: 0; } #WOPFilter a.dropdown span.selected-0 { color: #d00; } #WOPFilter a.dropdown b { margin-right: 1ex; color: #444; font-size: 120%; } #WOPFilter a.dropdown * { vertical-align: bottom; } #WOPFilter a.dropdown:after { content: ""; display: inline-block; height: 0; width: 0; border: 3px solid; border-color: transparent #444 #444 transparent; vertical-align: bottom; margin: 0 0 0 4px; } #WOPFilter ul.dropdownMenu { list-style: none; padding: 0; margin: 0; border: solid #dadada; border-width: 1px 1px 0 1px; background: #eee; display: none; max-height: 300px; max-height: 50vh; overflow: auto; min-width: 150px; z-index: 10; } #WOPFilter ul.dropdownMenu li { border-bottom: 1px solid #dadada; color: #444; cursor: default; padding: 4px 6px 4px 30px; margin: 0; background: url(/images/d/de/Checkbox-unchecked.png) no-repeat 6px center; min-height: 1em; } #WOPFilter ul.dropdownMenu li.checked { background-color: #8cd; background-image: url(/images/9/9d/Checkbox-checked.png); border-color: #4ac; } #WOPFilter ul.dropdownMenu li.buttons { background: none; padding: 4px; } #WOPFilter ul.dropdownMenu li.buttons span { display: inline-block; width: 50%; text-align: center; } #WOPFilter ul.dropdownMenu li.buttons a { font-variant: small-caps; text-decoration: none; color: #888; } #WOPFilter ul.dropdownMenu li.buttons a:hover, #WOPFilter ul.dropdownMenu li.buttons a:focus { text-decoration: underline; } /** device list **/ #WOPDeviceFilterList { margin: 1ex 0; } #WOPDeviceFilterList .device a { display: inline-block; width: 200px; text-align: center; background: #fafafa; overflow: hidden; margin: 10px 4px; vertical-align: top; text-decoration: none; color: #333; padding: 2px 2px 5px; } #WOPDeviceFilterList .device a:hover, #WOPDeviceFilterList .device a:focus { background: #cef; } #WOPDeviceFilterList .device a:active { background: #27aae1; } #WOPDeviceFilterList .device .image { display: block; height: 150px; line-height: 150px; padding: 10px; } #WOPDeviceFilterList .device .image img { max-width: 100%; max-height: 100%; vertical-align: middle; } #WOPDeviceFilterList .device .codename { display: block; font-size: 0.8em; color: #888; } #WOPDeviceFilterList .device[data-hidden] { display: none; } #WOPDeviceFilterEmptyNote { background: url(/images/2/2f/Cid-filter-empty-note.png) no-repeat 40px 0; padding: 42px 0 0 150px; min-height: 104px; } #WOPDeviceFilterEmptyNote[data-hidden] { display: none; }