Difference between revisions of "MediaWiki:Common.css"

From Game Logs
Jump to: navigation, search
(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 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 */