Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
(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 ...") |
|||
Line 1: | Line 1: | ||
− | /* | + | /* general */ |
+ | code { | ||
+ | color: green; | ||
+ | } | ||
+ | |||
+ | table.singleborder { | ||
+ | border: 1px solid #333; | ||
+ | border-spacing: 0; | ||
+ | border-collapse: collapse; | ||
+ | margin: 0.4em 0; | ||
+ | } | ||
+ | table.singleborder td, | ||
+ | table.singleborder th { | ||
+ | border: 1px solid #333; | ||
+ | padding: 3px; | ||
+ | } | ||
+ | |||
+ | /* note, helpful tip and warning boxes */ | ||
+ | .infoBox .bar, | ||
+ | .warningBox .bar, | ||
+ | .editDeviceTemplateBox .bar { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | bottom: 0; | ||
+ | width: 68px; | ||
+ | background: no-repeat center center; | ||
+ | } | ||
+ | .infoBox .bar { | ||
+ | background-color: #333; | ||
+ | background-image: url(/images/b/b0/Mini-cid-logo-2.png); | ||
+ | } | ||
+ | .warningBox .bar { | ||
+ | background-color: #d22; | ||
+ | background-image: url(/images/e/e5/Mini-cid-logo-grey-2.png); | ||
+ | } | ||
+ | .editDeviceTemplateBox .bar { | ||
+ | background-color: #333; | ||
+ | background-image: url(/images/6/66/Device_template.png); | ||
+ | } | ||
+ | |||
+ | /* box with specs of each device */ | ||
+ | .deviceInfoBox td, | ||
+ | .deviceInfoBox th { | ||
+ | vertical-align: top; | ||
+ | text-align: left; | ||
+ | padding: 3px 8px; | ||
+ | } | ||
+ | .deviceInfoBox th { | ||
+ | white-space: nowrap; | ||
+ | } | ||
+ | |||
+ | /* main page modifications */ | ||
+ | body.page-Main_Page h1.firstHeading { | ||
+ | display: none; | ||
+ | } | ||
+ | #mainPageHeader a { | ||
+ | color: #27aae1; | ||
+ | } | ||
− | /** experimental: device page - get | + | /** experimental: device page - get CM section **/ |
/* see http://wiki.cyanogenmod.org/w/User:Flo_Edelmann/Device_Redesign */ | /* see http://wiki.cyanogenmod.org/w/User:Flo_Edelmann/Device_Redesign */ | ||
− | div#content .device-get- | + | div#content .device-get-cm a { |
display: inline-block; | display: inline-block; | ||
background: no-repeat center 10px #fafafa; | background: no-repeat center 10px #fafafa; | ||
Line 17: | Line 75: | ||
} | } | ||
@media all and (max-width: 1250px) { | @media all and (max-width: 1250px) { | ||
− | div#content .device-get- | + | div#content .device-get-cm a { |
width: 40%; | width: 40%; | ||
} | } | ||
} | } | ||
@media all and (max-width: 900px) { | @media all and (max-width: 900px) { | ||
− | div#content .device-get- | + | div#content .device-get-cm a { |
width: auto; | width: auto; | ||
display: block; | display: block; | ||
} | } | ||
} | } | ||
− | .device-get- | + | .device-get-cm a b { |
display: block; | display: block; | ||
text-align: center; | text-align: center; | ||
Line 33: | Line 91: | ||
color: #017dbb; | color: #017dbb; | ||
} | } | ||
− | .device-get- | + | .device-get-cm a em { |
font-weight: bold; | font-weight: bold; | ||
font-style: normal; | font-style: normal; | ||
border-bottom: 2px solid #555; | border-bottom: 2px solid #555; | ||
} | } | ||
− | div#content .device-get- | + | div#content .device-get-cm a:hover, |
− | div#content .device-get- | + | div#content .device-get-cm a:focus { |
background-color: #cef; | background-color: #cef; | ||
} | } | ||
− | div#content .device-get- | + | div#content .device-get-cm a:hover em, |
− | div#content .device-get- | + | div#content .device-get-cm a:focus em { |
border-color: #555; | border-color: #555; | ||
} | } | ||
− | div#content .device-get- | + | div#content .device-get-cm .nightly a { background-image: url(/images/5/5f/Device-get-nightly.png); } |
− | .device-get- | + | .device-get-cm .nightly a em { border-color: #ff2000; } |
− | div#content .device-get- | + | div#content .device-get-cm .m-snapshot a { background-image: url(/images/0/05/Device-get-m-snapshot.png); } |
− | .device-get- | + | .device-get-cm .m-snapshot a em { border-color: #ffd900; } |
− | div#content .device-get- | + | div#content .device-get-cm .release-candidate a { background-image: url(/images/6/6f/Device-get-release-candidate.png); } |
− | .device-get- | + | .device-get-cm .release-candidate a em { border-color: #ccf200; } |
− | div#content .device-get- | + | div#content .device-get-cm .stable a { background-image: url(/images/7/70/Device-get-stable.png); } |
− | .device-get- | + | .device-get-cm .stable a em { border-color: #1bb200; } |
− | .device-build- | + | .device-build-cm { |
font-size: 1em; | font-size: 1em; | ||
color: #555; | color: #555; | ||
Line 66: | Line 124: | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
− | .device-build- | + | .device-build-cm:before, |
− | .device-build- | + | .device-build-cm:after { |
background-color: #555; | background-color: #555; | ||
content: ""; | content: ""; | ||
Line 76: | Line 134: | ||
width: 50%; | width: 50%; | ||
} | } | ||
− | .device-build- | + | .device-build-cm:before { |
right: 0.5em; | right: 0.5em; | ||
margin-left: -50%; | margin-left: -50%; | ||
} | } | ||
− | .device-build- | + | .device-build-cm:after { |
left: 0.5em; | left: 0.5em; | ||
margin-right: -50%; | margin-right: -50%; | ||
Line 88: | Line 146: | ||
/** basic styling **/ | /** basic styling **/ | ||
− | # | + | #cmFilter { |
position: relative; | position: relative; | ||
margin: 1ex 0 2ex; | margin: 1ex 0 2ex; | ||
Line 121: | Line 179: | ||
/** filter input **/ | /** filter input **/ | ||
− | # | + | #cmFilter input { |
border: 1px solid #27aae1; | border: 1px solid #27aae1; | ||
border-width: 0 0 1px; | border-width: 0 0 1px; | ||
Line 129: | Line 187: | ||
vertical-align: bottom; | vertical-align: bottom; | ||
} | } | ||
− | # | + | #cmFilter .holoInput:before, |
− | # | + | #cmFilter .holoInput:after { |
border: 1px solid #27aae1; | border: 1px solid #27aae1; | ||
border-width: 0 1px 0 0; | border-width: 0 1px 0 0; | ||
Line 139: | Line 197: | ||
vertical-align: bottom; | vertical-align: bottom; | ||
} | } | ||
− | # | + | #cmFilter .holoInput:after { |
margin-right: 2ex; | margin-right: 2ex; | ||
} | } | ||
Line 145: | Line 203: | ||
/** dropdowns **/ | /** dropdowns **/ | ||
− | # | + | #cmFilter a.dropdown { |
margin: 0 1ex; | margin: 0 1ex; | ||
padding: 4px; | padding: 4px; | ||
Line 155: | Line 213: | ||
border: 1px solid #dadada; | border: 1px solid #dadada; | ||
} | } | ||
− | # | + | #cmFilter a.dropdown:hover, |
− | # | + | #cmFilter a.dropdown:focus, |
− | # | + | #cmFilter a.dropdown[data-active] { |
background: #ddd; | background: #ddd; | ||
outline: 0; | outline: 0; | ||
} | } | ||
− | # | + | #cmFilter a.dropdown span.selected-0 { |
color: #d00; | color: #d00; | ||
} | } | ||
− | # | + | #cmFilter a.dropdown b { |
margin-right: 1ex; | margin-right: 1ex; | ||
color: #444; | color: #444; | ||
font-size: 120%; | font-size: 120%; | ||
} | } | ||
− | # | + | #cmFilter a.dropdown * { |
vertical-align: bottom; | vertical-align: bottom; | ||
} | } | ||
− | # | + | #cmFilter a.dropdown:after { |
content: ""; | content: ""; | ||
display: inline-block; | display: inline-block; | ||
Line 182: | Line 240: | ||
margin: 0 0 0 4px; | margin: 0 0 0 4px; | ||
} | } | ||
− | # | + | #cmFilter ul.dropdownMenu { |
list-style: none; | list-style: none; | ||
padding: 0; | padding: 0; | ||
Line 196: | Line 254: | ||
z-index: 10; | z-index: 10; | ||
} | } | ||
− | # | + | #cmFilter ul.dropdownMenu li { |
border-bottom: 1px solid #dadada; | border-bottom: 1px solid #dadada; | ||
color: #444; | color: #444; | ||
Line 205: | Line 263: | ||
min-height: 1em; | min-height: 1em; | ||
} | } | ||
− | # | + | #cmFilter ul.dropdownMenu li.checked { |
background-color: #8cd; | background-color: #8cd; | ||
background-image: url(/images/9/9d/Checkbox-checked.png); | background-image: url(/images/9/9d/Checkbox-checked.png); | ||
border-color: #4ac; | border-color: #4ac; | ||
} | } | ||
− | # | + | #cmFilter ul.dropdownMenu li.buttons { |
background: none; | background: none; | ||
padding: 4px; | padding: 4px; | ||
} | } | ||
− | # | + | #cmFilter ul.dropdownMenu li.buttons span { |
display: inline-block; | display: inline-block; | ||
width: 50%; | width: 50%; | ||
text-align: center; | text-align: center; | ||
} | } | ||
− | # | + | #cmFilter ul.dropdownMenu li.buttons a { |
font-variant: small-caps; | font-variant: small-caps; | ||
text-decoration: none; | text-decoration: none; | ||
color: #888; | color: #888; | ||
} | } | ||
− | # | + | #cmFilter ul.dropdownMenu li.buttons a:hover, |
− | # | + | #cmFilter ul.dropdownMenu li.buttons a:focus { |
text-decoration: underline; | text-decoration: underline; | ||
} | } | ||
Line 231: | Line 289: | ||
/** device list **/ | /** device list **/ | ||
− | # | + | #cmDeviceFilterList { |
margin: 1ex 0; | margin: 1ex 0; | ||
} | } | ||
− | # | + | #cmDeviceFilterList .device a { |
display: inline-block; | display: inline-block; | ||
width: 200px; | width: 200px; | ||
Line 246: | Line 304: | ||
padding: 2px 2px 5px; | padding: 2px 2px 5px; | ||
} | } | ||
− | # | + | #cmDeviceFilterList .device a:hover, |
− | # | + | #cmDeviceFilterList .device a:focus { |
background: #cef; | background: #cef; | ||
} | } | ||
− | # | + | #cmDeviceFilterList .device a:active { |
background: #27aae1; | background: #27aae1; | ||
} | } | ||
− | # | + | #cmDeviceFilterList .device .image { |
display: block; | display: block; | ||
height: 150px; | height: 150px; | ||
Line 259: | Line 317: | ||
padding: 10px; | padding: 10px; | ||
} | } | ||
− | # | + | #cmDeviceFilterList .device .image img { |
max-width: 100%; | max-width: 100%; | ||
max-height: 100%; | max-height: 100%; | ||
vertical-align: middle; | vertical-align: middle; | ||
} | } | ||
− | # | + | #cmDeviceFilterList .device .codename { |
display: block; | display: block; | ||
font-size: 0.8em; | font-size: 0.8em; | ||
color: #888; | color: #888; | ||
} | } | ||
− | # | + | #cmDeviceFilterList .device[data-hidden] { |
display: none; | display: none; | ||
} | } | ||
− | # | + | #cmDeviceFilterEmptyNote { |
background: url(/images/2/2f/Cid-filter-empty-note.png) no-repeat 40px 0; | background: url(/images/2/2f/Cid-filter-empty-note.png) no-repeat 40px 0; | ||
padding: 42px 0 0 150px; | padding: 42px 0 0 150px; | ||
min-height: 104px; | min-height: 104px; | ||
} | } | ||
− | # | + | #cmDeviceFilterEmptyNote[data-hidden] { |
display: none; | display: none; | ||
} | } |
Revision as of 23:26, 21 May 2013
/* general */ code { color: green; } table.singleborder { border: 1px solid #333; border-spacing: 0; border-collapse: collapse; margin: 0.4em 0; } table.singleborder td, table.singleborder th { border: 1px solid #333; padding: 3px; } /* note, helpful tip and warning boxes */ .infoBox .bar, .warningBox .bar, .editDeviceTemplateBox .bar { position: absolute; top: 0; left: 0; bottom: 0; width: 68px; background: no-repeat center center; } .infoBox .bar { background-color: #333; background-image: url(/images/b/b0/Mini-cid-logo-2.png); } .warningBox .bar { background-color: #d22; background-image: url(/images/e/e5/Mini-cid-logo-grey-2.png); } .editDeviceTemplateBox .bar { background-color: #333; background-image: url(/images/6/66/Device_template.png); } /* box with specs of each device */ .deviceInfoBox td, .deviceInfoBox th { vertical-align: top; text-align: left; padding: 3px 8px; } .deviceInfoBox th { white-space: nowrap; } /* main page modifications */ body.page-Main_Page h1.firstHeading { display: none; } #mainPageHeader a { color: #27aae1; } /** experimental: device page - get CM section **/ /* see http://wiki.cyanogenmod.org/w/User:Flo_Edelmann/Device_Redesign */ div#content .device-get-cm 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-cm a { width: 40%; } } @media all and (max-width: 900px) { div#content .device-get-cm a { width: auto; display: block; } } .device-get-cm a b { display: block; text-align: center; margin: 0 0 10px; color: #017dbb; } .device-get-cm a em { font-weight: bold; font-style: normal; border-bottom: 2px solid #555; } div#content .device-get-cm a:hover, div#content .device-get-cm a:focus { background-color: #cef; } div#content .device-get-cm a:hover em, div#content .device-get-cm a:focus em { border-color: #555; } div#content .device-get-cm .nightly a { background-image: url(/images/5/5f/Device-get-nightly.png); } .device-get-cm .nightly a em { border-color: #ff2000; } div#content .device-get-cm .m-snapshot a { background-image: url(/images/0/05/Device-get-m-snapshot.png); } .device-get-cm .m-snapshot a em { border-color: #ffd900; } div#content .device-get-cm .release-candidate a { background-image: url(/images/6/6f/Device-get-release-candidate.png); } .device-get-cm .release-candidate a em { border-color: #ccf200; } div#content .device-get-cm .stable a { background-image: url(/images/7/70/Device-get-stable.png); } .device-get-cm .stable a em { border-color: #1bb200; } .device-build-cm { font-size: 1em; color: #555; overflow: hidden; text-align: center; text-transform: uppercase; } .device-build-cm:before, .device-build-cm:after { background-color: #555; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; } .device-build-cm:before { right: 0.5em; margin-left: -50%; } .device-build-cm:after { left: 0.5em; margin-right: -50%; } /**** start: DEVICE PAGE WITH FILTERS ****/ /** basic styling **/ #cmFilter { 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 **/ #cmFilter input { border: 1px solid #27aae1; border-width: 0 0 1px; padding: 3px 5px; margin: 0; background: none; vertical-align: bottom; } #cmFilter .holoInput:before, #cmFilter .holoInput:after { border: 1px solid #27aae1; border-width: 0 1px 0 0; content: ""; height: 5px; width: 0; display: inline-block; vertical-align: bottom; } #cmFilter .holoInput:after { margin-right: 2ex; } /** dropdowns **/ #cmFilter a.dropdown { margin: 0 1ex; padding: 4px; color: #888; text-decoration: none; font-size: 90%; vertical-align: bottom; background: #eee; border: 1px solid #dadada; } #cmFilter a.dropdown:hover, #cmFilter a.dropdown:focus, #cmFilter a.dropdown[data-active] { background: #ddd; outline: 0; } #cmFilter a.dropdown span.selected-0 { color: #d00; } #cmFilter a.dropdown b { margin-right: 1ex; color: #444; font-size: 120%; } #cmFilter a.dropdown * { vertical-align: bottom; } #cmFilter 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; } #cmFilter 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; } #cmFilter 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; } #cmFilter ul.dropdownMenu li.checked { background-color: #8cd; background-image: url(/images/9/9d/Checkbox-checked.png); border-color: #4ac; } #cmFilter ul.dropdownMenu li.buttons { background: none; padding: 4px; } #cmFilter ul.dropdownMenu li.buttons span { display: inline-block; width: 50%; text-align: center; } #cmFilter ul.dropdownMenu li.buttons a { font-variant: small-caps; text-decoration: none; color: #888; } #cmFilter ul.dropdownMenu li.buttons a:hover, #cmFilter ul.dropdownMenu li.buttons a:focus { text-decoration: underline; } /** device list **/ #cmDeviceFilterList { margin: 1ex 0; } #cmDeviceFilterList .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; } #cmDeviceFilterList .device a:hover, #cmDeviceFilterList .device a:focus { background: #cef; } #cmDeviceFilterList .device a:active { background: #27aae1; } #cmDeviceFilterList .device .image { display: block; height: 150px; line-height: 150px; padding: 10px; } #cmDeviceFilterList .device .image img { max-width: 100%; max-height: 100%; vertical-align: middle; } #cmDeviceFilterList .device .codename { display: block; font-size: 0.8em; color: #888; } #cmDeviceFilterList .device[data-hidden] { display: none; } #cmDeviceFilterEmptyNote { background: url(/images/2/2f/Cid-filter-empty-note.png) no-repeat 40px 0; padding: 42px 0 0 150px; min-height: 104px; } #cmDeviceFilterEmptyNote[data-hidden] { display: none; }