Difference between revisions of "MediaWiki:Common.css"
From Game Detectives Wiki
Line 5: | Line 5: | ||
/* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */ | /* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */ | ||
th.mbox-text, td.mbox-text { /* The message body cell(s) */ | th.mbox-text, td.mbox-text { /* The message body cell(s) */ | ||
− | + | border: none; | |
− | + | /* @noflip */ | |
− | + | padding: 0.25em 0.9em; /* 0.9em left/right */ | |
− | + | width: 100%; /* Make all mboxes the same width regardless of text length */ | |
} | } | ||
td.mbox-image { /* The left image cell */ | td.mbox-image { /* The left image cell */ | ||
− | + | border: none; | |
− | + | /* @noflip */ | |
− | + | padding: 2px 0 2px 0.9em; /* 0.9em left, 0px right */ | |
− | + | text-align: center; | |
} | } | ||
td.mbox-imageright { /* The right image cell */ | td.mbox-imageright { /* The right image cell */ | ||
− | + | border: none; | |
− | + | /* @noflip */ | |
− | + | padding: 2px 0.9em 2px 0; /* 0px left, 0.9em right */ | |
− | + | text-align: center; | |
} | } | ||
td.mbox-empty-cell { /* An empty narrow cell */ | td.mbox-empty-cell { /* An empty narrow cell */ | ||
− | + | border: none; | |
− | + | padding: 0; | |
− | + | width: 1px; | |
} | } | ||
/* Article message box styles */ | /* Article message box styles */ | ||
table.ambox { | table.ambox { | ||
− | + | margin: 0 10%; /* 10% = Will not overlap with other elements */ | |
− | + | border: 1px solid #a2a9b1; | |
− | + | /* @noflip */ | |
− | + | border-left: 10px solid #36c; /* Default "notice" blue */ | |
− | + | background: #fbfbfb; | |
} | } | ||
table.ambox + table.ambox { /* Single border between stacked boxes. */ | table.ambox + table.ambox { /* Single border between stacked boxes. */ | ||
− | + | margin-top: -1px; | |
} | } | ||
.ambox th.mbox-text, | .ambox th.mbox-text, | ||
.ambox td.mbox-text { /* The message body cell(s) */ | .ambox td.mbox-text { /* The message body cell(s) */ | ||
− | + | padding: 0.25em 0.5em; /* 0.5em left/right */ | |
} | } | ||
.ambox td.mbox-image { /* The left image cell */ | .ambox td.mbox-image { /* The left image cell */ | ||
− | + | /* @noflip */ | |
− | + | padding: 2px 0 2px 0.5em; /* 0.5em left, 0px right */ | |
} | } | ||
.ambox td.mbox-imageright { /* The right image cell */ | .ambox td.mbox-imageright { /* The right image cell */ | ||
− | + | /* @noflip */ | |
− | + | padding: 2px 0.5em 2px 0; /* 0px left, 0.5em right */ | |
} | } | ||
table.ambox-notice { | table.ambox-notice { | ||
− | + | /* @noflip */ | |
− | + | border-left: 10px solid #36c; /* Blue */ | |
} | } | ||
table.ambox-speedy { | table.ambox-speedy { | ||
− | + | /* @noflip */ | |
− | + | border-left: 10px solid #b32424; /* Red */ | |
− | + | background: #fee7e6; /* Pink */ | |
} | } | ||
table.ambox-delete { | table.ambox-delete { | ||
− | + | /* @noflip */ | |
− | + | border-left: 10px solid #b32424; /* Red */ | |
} | } | ||
table.ambox-content { | table.ambox-content { | ||
− | + | /* @noflip */ | |
− | + | border-left: 10px solid #f28500; /* Orange */ | |
} | } | ||
table.ambox-style { | table.ambox-style { | ||
− | + | /* @noflip */ | |
− | + | border-left: 10px solid #fc3; /* Yellow */ | |
} | } | ||
table.ambox-move { | table.ambox-move { | ||
− | + | /* @noflip */ | |
− | + | border-left: 10px solid #9932cc; /* Purple */ | |
} | } | ||
table.ambox-protection { | table.ambox-protection { | ||
− | + | /* @noflip */ | |
− | + | border-left: 10px solid #a2a9b1; /* Gray-gold */ | |
} | } | ||
/* These mbox-small classes must be placed after all other | /* These mbox-small classes must be placed after all other | ||
Line 85: | Line 85: | ||
they override "table.ambox + table.ambox" above. */ | they override "table.ambox + table.ambox" above. */ | ||
html body.mediawiki .mbox-small { /* For the "small=yes" option. */ | html body.mediawiki .mbox-small { /* For the "small=yes" option. */ | ||
− | + | /* @noflip */ | |
− | + | clear: right; | |
− | + | /* @noflip */ | |
− | + | float: right; | |
− | + | /* @noflip */ | |
− | + | margin: 4px 0 4px 1em; | |
− | + | box-sizing: border-box; | |
− | + | width: 238px; | |
− | + | font-size: 88%; | |
− | + | line-height: 1.25em; | |
} | } | ||
html body.mediawiki .mbox-small-left { /* For the "small=left" option. */ | html body.mediawiki .mbox-small-left { /* For the "small=left" option. */ | ||
− | + | /* @noflip */ | |
− | + | margin: 4px 1em 4px 0; | |
− | + | box-sizing: border-box; | |
− | + | overflow: hidden; | |
− | + | width: 238px; | |
− | + | border-collapse: collapse; | |
− | + | font-size: 88%; | |
− | + | line-height: 1.25em; | |
} | } | ||
Line 112: | Line 112: | ||
.compact-ambox table .mbox-imageright, | .compact-ambox table .mbox-imageright, | ||
.compact-ambox table .mbox-empty-cell { | .compact-ambox table .mbox-empty-cell { | ||
− | + | display: none; | |
} | } | ||
/* Remove borders, backgrounds, padding, etc. */ | /* Remove borders, backgrounds, padding, etc. */ | ||
.compact-ambox table.ambox { | .compact-ambox table.ambox { | ||
− | + | border: none; | |
− | + | border-collapse: collapse; | |
− | + | background: transparent; | |
− | + | margin: 0 0 0 1.6em !important; | |
− | + | padding: 0 !important; | |
− | + | width: auto; | |
− | + | display: block; | |
} | } | ||
body.mediawiki .compact-ambox table.mbox-small-left { | body.mediawiki .compact-ambox table.mbox-small-left { | ||
− | + | font-size: 100%; | |
− | + | width: auto; | |
− | + | margin: 0; | |
} | } | ||
/* Style the text cell as a list item and remove its padding */ | /* Style the text cell as a list item and remove its padding */ | ||
.compact-ambox table .mbox-text { | .compact-ambox table .mbox-text { | ||
− | + | padding: 0 !important; | |
− | + | margin: 0 !important; | |
} | } | ||
.compact-ambox table .mbox-text-span { | .compact-ambox table .mbox-text-span { | ||
− | + | display: list-item; | |
− | + | line-height: 1.5em; | |
− | + | list-style-type: square; | |
− | + | list-style-image: url(/w/skins/MonoBook/bullet.gif); | |
} | } | ||
.skin-vector .compact-ambox table .mbox-text-span { | .skin-vector .compact-ambox table .mbox-text-span { | ||
− | + | list-style-type: disc; | |
− | + | list-style-image: url(/w/skins/Vector/images/bullet-icon.svg); | |
− | + | list-style-image: url(/w/skins/Vector/images/bullet-icon.png)\9; | |
} | } | ||
/* Allow for hiding text in compact form */ | /* Allow for hiding text in compact form */ | ||
.compact-ambox .hide-when-compact { | .compact-ambox .hide-when-compact { | ||
− | + | display: none; | |
} | } | ||
/* Other pages message box styles */ | /* Other pages message box styles */ | ||
table.ombox { | table.ombox { | ||
− | + | margin: 4px 10%; | |
− | + | border-collapse: collapse; | |
− | + | border: 1px solid #a2a9b1; /* Default "notice" gray */ | |
− | + | background: #f8f9fa; | |
− | + | box-sizing: border-box; | |
} | } | ||
table.ombox-notice { | table.ombox-notice { | ||
− | + | border: 1px solid #a2a9b1; /* Gray */ | |
} | } | ||
table.ombox-speedy { | table.ombox-speedy { | ||
− | + | border: 2px solid #b32424; /* Red */ | |
− | + | background: #fee7e6; /* Pink */ | |
} | } | ||
table.ombox-delete { | table.ombox-delete { | ||
− | + | border: 2px solid #b32424; /* Red */ | |
} | } | ||
table.ombox-content { | table.ombox-content { | ||
− | + | border: 1px solid #f28500; /* Orange */ | |
} | } | ||
table.ombox-style { | table.ombox-style { | ||
− | + | border: 1px solid #fc3; /* Yellow */ | |
} | } | ||
table.ombox-move { | table.ombox-move { | ||
− | + | border: 1px solid #9932cc; /* Purple */ | |
} | } | ||
table.ombox-protection { | table.ombox-protection { | ||
− | + | border: 2px solid #a2a9b1; /* Gray-gold */ | |
} | } | ||
/* SMW table styles */ | /* SMW table styles */ | ||
.smwtable .row-even { | .smwtable .row-even { | ||
− | + | background-color: #fff; | |
} | } | ||
.smwtable .row-odd { | .smwtable .row-odd { | ||
− | + | background-color: #e6e6e6; | |
} | } | ||
.smwtable .smwtype_txt{ | .smwtable .smwtype_txt{ | ||
− | + | text-align: center; | |
} | } | ||
.smwtable .smwtype_dat{ | .smwtable .smwtype_dat{ | ||
− | + | text-align: center; | |
} | } | ||
+ | |||
+ | @keyframes flash { | ||
+ | from {background-color: red;} | ||
+ | to {background-color: blue;} | ||
+ | } | ||
+ | |||
+ | .tableAnimation { | ||
+ | animation-name: flash; | ||
+ | -webkit-animation-duration: 6s; | ||
+ | -moz-animation-duration: 6s; | ||
+ | -o-animation-duration: 6s; | ||
+ | animation-duration: 6s; | ||
+ | } | ||
+ | |||
table.matty tbody tr:hover td:not(:nth-child(2)) { | table.matty tbody tr:hover td:not(:nth-child(2)) { | ||
− | + | background-color: #ffcccc !important; | |
} | } | ||
− | + | ||
+ | matty tbody tr:nth-child(odd) td { | ||
background-color: #eee; | background-color: #eee; | ||
} | } | ||
Line 205: | Line 220: | ||
} | } | ||
table.mattyalt tbody tr:hover td { | table.mattyalt tbody tr:hover td { | ||
− | + | background-color: #ffcccc !important; | |
} | } | ||
table.mattyalt tbody tr:nth-child(odd) td { | table.mattyalt tbody tr:nth-child(odd) td { | ||
Line 214: | Line 229: | ||
} | } | ||
+ | /* Dialog UI Styles */ | ||
− | |||
.ui-dialog { | .ui-dialog { | ||
− | + | text-align: center; | |
− | + | } | |
+ | |||
+ | .ui-dialog-content.ui-widget-content { | ||
font-size: 25px; | font-size: 25px; | ||
− | |||
text-align: center; | text-align: center; | ||
+ | color: white !important; | ||
} | } | ||
.ui-effects-transfer { | .ui-effects-transfer { | ||
border: 2px solid black; | border: 2px solid black; | ||
+ | } | ||
+ | .ui-widget-overlay { | ||
+ | transition: opacity 2s !important; | ||
+ | opacity: .3 !important; | ||
+ | background: #eee !important; | ||
+ | } | ||
+ | |||
+ | .ui-dialog { | ||
+ | background: url(https://i.imgur.com/323RLD2.png) !important; | ||
+ | } | ||
+ | |||
+ | .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { | ||
+ | text-align: center; | ||
+ | float: none !important; | ||
+ | background: url(https://i.imgur.com/323RLD2.png) !important; | ||
+ | } | ||
+ | |||
+ | .ui-dialog-buttonpane { | ||
+ | background: url(https://i.imgur.com/323RLD2.png) !important; | ||
+ | } | ||
+ | |||
+ | .ui-widget-header a { | ||
+ | color: #b02e2e !important; | ||
} | } |
Revision as of 02:26, 17 August 2018
/* CSS placed here will be applied to all skins */ body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; } /* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */ th.mbox-text, td.mbox-text { /* The message body cell(s) */ border: none; /* @noflip */ padding: 0.25em 0.9em; /* 0.9em left/right */ width: 100%; /* Make all mboxes the same width regardless of text length */ } td.mbox-image { /* The left image cell */ border: none; /* @noflip */ padding: 2px 0 2px 0.9em; /* 0.9em left, 0px right */ text-align: center; } td.mbox-imageright { /* The right image cell */ border: none; /* @noflip */ padding: 2px 0.9em 2px 0; /* 0px left, 0.9em right */ text-align: center; } td.mbox-empty-cell { /* An empty narrow cell */ border: none; padding: 0; width: 1px; } /* Article message box styles */ table.ambox { margin: 0 10%; /* 10% = Will not overlap with other elements */ border: 1px solid #a2a9b1; /* @noflip */ border-left: 10px solid #36c; /* Default "notice" blue */ background: #fbfbfb; } table.ambox + table.ambox { /* Single border between stacked boxes. */ margin-top: -1px; } .ambox th.mbox-text, .ambox td.mbox-text { /* The message body cell(s) */ padding: 0.25em 0.5em; /* 0.5em left/right */ } .ambox td.mbox-image { /* The left image cell */ /* @noflip */ padding: 2px 0 2px 0.5em; /* 0.5em left, 0px right */ } .ambox td.mbox-imageright { /* The right image cell */ /* @noflip */ padding: 2px 0.5em 2px 0; /* 0px left, 0.5em right */ } table.ambox-notice { /* @noflip */ border-left: 10px solid #36c; /* Blue */ } table.ambox-speedy { /* @noflip */ border-left: 10px solid #b32424; /* Red */ background: #fee7e6; /* Pink */ } table.ambox-delete { /* @noflip */ border-left: 10px solid #b32424; /* Red */ } table.ambox-content { /* @noflip */ border-left: 10px solid #f28500; /* Orange */ } table.ambox-style { /* @noflip */ border-left: 10px solid #fc3; /* Yellow */ } table.ambox-move { /* @noflip */ border-left: 10px solid #9932cc; /* Purple */ } table.ambox-protection { /* @noflip */ border-left: 10px solid #a2a9b1; /* Gray-gold */ } /* These mbox-small classes must be placed after all other ambox/tmbox/ombox etc classes. "html body.mediawiki" is so they override "table.ambox + table.ambox" above. */ html body.mediawiki .mbox-small { /* For the "small=yes" option. */ /* @noflip */ clear: right; /* @noflip */ float: right; /* @noflip */ margin: 4px 0 4px 1em; box-sizing: border-box; width: 238px; font-size: 88%; line-height: 1.25em; } html body.mediawiki .mbox-small-left { /* For the "small=left" option. */ /* @noflip */ margin: 4px 1em 4px 0; box-sizing: border-box; overflow: hidden; width: 238px; border-collapse: collapse; font-size: 88%; line-height: 1.25em; } /* Style for compact ambox */ /* Hide the images */ .compact-ambox table .mbox-image, .compact-ambox table .mbox-imageright, .compact-ambox table .mbox-empty-cell { display: none; } /* Remove borders, backgrounds, padding, etc. */ .compact-ambox table.ambox { border: none; border-collapse: collapse; background: transparent; margin: 0 0 0 1.6em !important; padding: 0 !important; width: auto; display: block; } body.mediawiki .compact-ambox table.mbox-small-left { font-size: 100%; width: auto; margin: 0; } /* Style the text cell as a list item and remove its padding */ .compact-ambox table .mbox-text { padding: 0 !important; margin: 0 !important; } .compact-ambox table .mbox-text-span { display: list-item; line-height: 1.5em; list-style-type: square; list-style-image: url(/w/skins/MonoBook/bullet.gif); } .skin-vector .compact-ambox table .mbox-text-span { list-style-type: disc; list-style-image: url(/w/skins/Vector/images/bullet-icon.svg); list-style-image: url(/w/skins/Vector/images/bullet-icon.png)\9; } /* Allow for hiding text in compact form */ .compact-ambox .hide-when-compact { display: none; } /* Other pages message box styles */ table.ombox { margin: 4px 10%; border-collapse: collapse; border: 1px solid #a2a9b1; /* Default "notice" gray */ background: #f8f9fa; box-sizing: border-box; } table.ombox-notice { border: 1px solid #a2a9b1; /* Gray */ } table.ombox-speedy { border: 2px solid #b32424; /* Red */ background: #fee7e6; /* Pink */ } table.ombox-delete { border: 2px solid #b32424; /* Red */ } table.ombox-content { border: 1px solid #f28500; /* Orange */ } table.ombox-style { border: 1px solid #fc3; /* Yellow */ } table.ombox-move { border: 1px solid #9932cc; /* Purple */ } table.ombox-protection { border: 2px solid #a2a9b1; /* Gray-gold */ } /* SMW table styles */ .smwtable .row-even { background-color: #fff; } .smwtable .row-odd { background-color: #e6e6e6; } .smwtable .smwtype_txt{ text-align: center; } .smwtable .smwtype_dat{ text-align: center; } @keyframes flash { from {background-color: red;} to {background-color: blue;} } .tableAnimation { animation-name: flash; -webkit-animation-duration: 6s; -moz-animation-duration: 6s; -o-animation-duration: 6s; animation-duration: 6s; } table.matty tbody tr:hover td:not(:nth-child(2)) { background-color: #ffcccc !important; } matty tbody tr:nth-child(odd) td { background-color: #eee; } table.matty tbody tr:nth-child(even) td { background-color: #fff; } table.mattyalt tbody tr:hover td { background-color: #ffcccc !important; } table.mattyalt tbody tr:nth-child(odd) td { background-color: #eee; } table.mattyalt tbody tr:nth-child(even) td { background-color: #fff; } /* Dialog UI Styles */ .ui-dialog { text-align: center; } .ui-dialog-content.ui-widget-content { font-size: 25px; text-align: center; color: white !important; } .ui-effects-transfer { border: 2px solid black; } .ui-widget-overlay { transition: opacity 2s !important; opacity: .3 !important; background: #eee !important; } .ui-dialog { background: url(https://i.imgur.com/323RLD2.png) !important; } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { text-align: center; float: none !important; background: url(https://i.imgur.com/323RLD2.png) !important; } .ui-dialog-buttonpane { background: url(https://i.imgur.com/323RLD2.png) !important; } .ui-widget-header a { color: #b02e2e !important; }