Difference between revisions of "MediaWiki:Common.css"
From Game Logs
(Add support for Right-to-Left Grimoire tooltip alignment.) |
(Table with sticky header) |
||
(6 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
+ | span.ref { | ||
+ | font-weight:normal; | ||
+ | font-style:italic; | ||
+ | } | ||
/* Table with borders */ | /* Table with borders */ | ||
Line 14: | Line 18: | ||
− | /* table with striped rows */ | + | /* Table with sticky header */ |
+ | |||
+ | table.sticky th { | ||
+ | position: sticky; | ||
+ | top: 0 | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Table with striped rows */ | ||
table.zebra { | table.zebra { | ||
Line 48: | Line 60: | ||
− | /* | + | /* Tooltip popups */ |
.tooltip { | .tooltip { | ||
Line 69: | Line 81: | ||
left: 25px; | left: 25px; | ||
} | } | ||
+ | |||
.tooltip:hover .tooltiptext { | .tooltip:hover .tooltiptext { | ||
visibility: visible; | visibility: visible; | ||
} | } | ||
+ | |||
+ | |||
+ | /* Floating table of contents */ | ||
+ | |||
+ | .floatoc { | ||
+ | clear: left; | ||
+ | float: left; | ||
+ | margin-top: 38em; | ||
+ | margin-left: -12.9em; | ||
+ | width: 10.35em; | ||
+ | padding: 0px; | ||
+ | position: sticky; | ||
+ | position: -webkit-sticky; | ||
+ | top: 0.5em; | ||
+ | } | ||
+ | |||
+ | .floatoc .portlet { | ||
+ | font-size: 1em; | ||
+ | } | ||
+ | |||
+ | .floatoc .toc { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* GURPS Charsheets (GCS) */ | ||
+ | |||
+ | .gurps-wrapper { | ||
+ | color: black; | ||
+ | font: normal small 'Lucida Sans','Arial',sans-serif; | ||
+ | height: 100%; | ||
+ | max-width: 1200px; | ||
+ | table-layout: fixed | ||
+ | } | ||
+ | |||
+ | .gurps-wrapper table, | ||
+ | .gurps-wrapper tbody, | ||
+ | .gurps-wrapper tr { | ||
+ | border-spacing: 0; | ||
+ | border-collapse: collapse; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | width: 100% | ||
+ | } | ||
+ | |||
+ | .gurps-wrapper th { | ||
+ | border: 1pt solid black; | ||
+ | border-right: 2px solid lightgray; | ||
+ | background-color: black; | ||
+ | color: white; | ||
+ | font-weight: normal; | ||
+ | text-align: center; | ||
+ | height: 15px | ||
+ | } | ||
+ | |||
+ | .gurps-wrapper tr th:last-child { | ||
+ | border: 1pt solid black | ||
+ | } | ||
+ | |||
+ | .gurps-wrapper td { | ||
+ | padding: 1pt 2pt; | ||
+ | text-align: right; | ||
+ | vertical-align: top; | ||
+ | white-space: nowrap | ||
+ | } | ||
+ | |||
+ | .gurps-wrapper table, | ||
+ | .gurps-wrapper tr:last-child td { | ||
+ | height: calc(100% - 2pt) | ||
+ | } | ||
+ | |||
+ | .gurps-wrapper .list, | ||
+ | .gurps-wrapper .cols, | ||
+ | .gurps-wrapper .info { | ||
+ | border: 1pt solid black; | ||
+ | margin: 2pt 0 0 0 | ||
+ | } | ||
+ | |||
+ | .gurps-wrapper .info td:first-child, | ||
+ | .gurps-wrapper .list td:first-child { | ||
+ | border-left: 1px solid black; | ||
+ | padding-left: 5pt; | ||
+ | } | ||
+ | |||
+ | .gurps-wrapper .cols td:first-child { | ||
+ | border-left: 1px solid black; | ||
+ | } | ||
+ | |||
+ | .gurps-wrapper .list td:last-child, | ||
+ | .gurps-wrapper .cols td:last-child { | ||
+ | border-right: 1px solid black | ||
+ | } | ||
+ | |||
+ | .gurps-wrapper .list tr:last-child td, | ||
+ | .gurps-wrapper .cols tr:last-child td { | ||
+ | border-bottom: 1px solid black | ||
+ | } | ||
+ | |||
+ | .gurps-wrapper .list td, | ||
+ | .gurps-wrapper .cols td { | ||
+ | border: 1px solid lightgray | ||
+ | } | ||
+ | |||
+ | .gurps-wrapper .list td { | ||
+ | font-weight: bold; | ||
+ | padding: 1pt 5pt | ||
+ | } | ||
+ | |||
+ | .gurps-wrapper .note { | ||
+ | display: block-inline; | ||
+ | color: gray; | ||
+ | font: normal smaller 'Lucida Sans','Arial',sans-serif; | ||
+ | white-space: normal | ||
+ | } | ||
+ | |||
+ | .gurps-wrapper .new-section { | ||
+ | border-top: 1px solid black | ||
+ | } | ||
+ | |||
+ | .gurps-wrapper .value { | ||
+ | font-weight: bold | ||
+ | } | ||
+ | |||
+ | .gurps-wrapper .left { | ||
+ | text-align: left | ||
+ | } | ||
+ | |||
+ | .gurps-wrapper .center { | ||
+ | text-align: center | ||
+ | } | ||
+ | |||
+ | .gurps-wrapper .en td { | ||
+ | padding-left: 2ch | ||
+ | } | ||
+ | |||
+ | .gurps-wrapper .encurrent td { | ||
+ | background-color: #FFFFCC; | ||
+ | padding-left: 1ch | ||
+ | } | ||
+ | |||
+ | /* GURPS ENDS */ | ||
+ | |||
Latest revision as of 02:06, 16 May 2023
/* CSS placed here will be applied to all skins */ span.ref { font-weight:normal; font-style:italic; } /* Table with borders */ table.border { border-collapse: collapse; } table.border th, table.border td { border: 1px solid #aaa; padding: 5px; } /* Table with sticky header */ table.sticky th { position: sticky; top: 0 } /* Table with striped rows */ table.zebra { border-collapse: collapse; } table.zebra tr:nth-child(odd) { background-color: #f7f7f7; } /* Table with row highlight on mouseover */ table.hover tr:hover { background-color: #e0e0e0; } /* Table with column highlight on mouseover */ table.columns { border-spacing: 0; border-collapse: collapse; } table.columns td, table.columns th { padding: 0px 5px; } table.columns .hovered { background-color: #e0e0e0; } /* Tooltip popups */ .tooltip { position: relative; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; border: 1px solid #aaa; border-spacing: 3px; background-color: #f9f9f9; color: black; text-align: center; border-radius: 3px; padding: 0.2em; /* Position the tooltip */ position: absolute; z-index: 1; top: 100%; left: 25px; } .tooltip:hover .tooltiptext { visibility: visible; } /* Floating table of contents */ .floatoc { clear: left; float: left; margin-top: 38em; margin-left: -12.9em; width: 10.35em; padding: 0px; position: sticky; position: -webkit-sticky; top: 0.5em; } .floatoc .portlet { font-size: 1em; } .floatoc .toc { width: 100%; } /* GURPS Charsheets (GCS) */ .gurps-wrapper { color: black; font: normal small 'Lucida Sans','Arial',sans-serif; height: 100%; max-width: 1200px; table-layout: fixed } .gurps-wrapper table, .gurps-wrapper tbody, .gurps-wrapper tr { border-spacing: 0; border-collapse: collapse; margin: 0; padding: 0; width: 100% } .gurps-wrapper th { border: 1pt solid black; border-right: 2px solid lightgray; background-color: black; color: white; font-weight: normal; text-align: center; height: 15px } .gurps-wrapper tr th:last-child { border: 1pt solid black } .gurps-wrapper td { padding: 1pt 2pt; text-align: right; vertical-align: top; white-space: nowrap } .gurps-wrapper table, .gurps-wrapper tr:last-child td { height: calc(100% - 2pt) } .gurps-wrapper .list, .gurps-wrapper .cols, .gurps-wrapper .info { border: 1pt solid black; margin: 2pt 0 0 0 } .gurps-wrapper .info td:first-child, .gurps-wrapper .list td:first-child { border-left: 1px solid black; padding-left: 5pt; } .gurps-wrapper .cols td:first-child { border-left: 1px solid black; } .gurps-wrapper .list td:last-child, .gurps-wrapper .cols td:last-child { border-right: 1px solid black } .gurps-wrapper .list tr:last-child td, .gurps-wrapper .cols tr:last-child td { border-bottom: 1px solid black } .gurps-wrapper .list td, .gurps-wrapper .cols td { border: 1px solid lightgray } .gurps-wrapper .list td { font-weight: bold; padding: 1pt 5pt } .gurps-wrapper .note { display: block-inline; color: gray; font: normal smaller 'Lucida Sans','Arial',sans-serif; white-space: normal } .gurps-wrapper .new-section { border-top: 1px solid black } .gurps-wrapper .value { font-weight: bold } .gurps-wrapper .left { text-align: left } .gurps-wrapper .center { text-align: center } .gurps-wrapper .en td { padding-left: 2ch } .gurps-wrapper .encurrent td { background-color: #FFFFCC; padding-left: 1ch } /* GURPS ENDS */ /* GRIMOIRE STARTS */ .dnd5-grimoire { display: inline-block; position: relative; cursor: pointer; } .dnd5-grimoire a { color: #8f713f; font-weight: bold; text-decoration: none; white-space: nowrap; } .dnd5-grimoire-wrapper { position: absolute; z-index: +10; top: 1.5em; left: 0; min-width: 30em; /* break font inheritance from parent selector */ color: black; font-weight: normal; } .dnd5-grimoire-wrapper.rtl { left: auto; right: 0; } .dnd5-grimoire-embed { font-size: 0.9em; background-color: white; border: solid 1px silver; padding: 0.5em 1em; cursor: default; } .dnd5-grimoire-loader { /* note: use slash-prefixed relative link when uploaded locally.. */ background: white url(//logs.ur-dnd.ru/images/d/de/Ajax-loader.gif) no-repeat 50% 50%; height: 32px; width: 32px; overflow: hidden; } /* GRIMOIRE ENDS */