MediaWiki:Tables.css: Difference between revisions

From Coral Island Wiki
Jump to navigation Jump to search
(Created page with "→‎BG COLOR Background color to highlight specific columns. Removes the need to use th for first few columns of items in tables.: #mw-content-text .mw-parser-output .tdbg td, #mw-content-text .mw-parser-output .tdbg1 td:nth-child(1), #mw-content-text .mw-parser-output .tdbg2 td:nth-child(2), #mw-content-text .mw-parser-output .tdbg3 td:nth-child(3), #mw-content-text .mw-parser-output .tdbg4 td:nth-child(4), #mw-content-text .mw-parser-output .tdbg5 td:nth-ch...")
 
No edit summary
Line 1: Line 1:
/* || ARTICLE TABLE */
.article-table {
  border-radius: 6px;
  background-color: var(--gray-050);
  padding-bottom: 8px;
  border-collapse: collapse;
  box-shadow: 0 0 0 1px var(--border-color);
  outline-color: transparent;
}
.article-table th {
  font-size: inherit;
  padding: 4px;
}
.article-table th {
  background-color: var(--brown-200);
  padding-right: 24px;
}
.article-table th:first-child {
  border-top-left-radius: 6px;
}
.article-table th:last-child {
  border-top-right-radius: 6px;
}
.article-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
}
.article-table td:first-child {
  padding-left: 16px;
}
.article-table td:last-child {
  padding-right: 16px;
}
table.article-table tr:last-child {
  border-bottom: hidden;
}
/* BG COLOR  
/* BG COLOR  
   Background color to highlight specific columns.
   Background color to highlight specific columns.

Revision as of 13:50, 1 January 2024

/* || ARTICLE TABLE */
.article-table {
  border-radius: 6px;
  background-color: var(--gray-050);
  padding-bottom: 8px;
  border-collapse: collapse;
  box-shadow: 0 0 0 1px var(--border-color);
  outline-color: transparent;
}

.article-table th {
  font-size: inherit;
  padding: 4px;
}

.article-table th {
  background-color: var(--brown-200);
  padding-right: 24px;
}

.article-table th:first-child {
  border-top-left-radius: 6px;
}

.article-table th:last-child {
  border-top-right-radius: 6px;
}

.article-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
}

.article-table td:first-child {
  padding-left: 16px;
}

.article-table td:last-child {
  padding-right: 16px;
}

table.article-table tr:last-child {
  border-bottom: hidden;
}


/* BG COLOR 
   Background color to highlight specific columns.
   Removes the need to use th for first few columns of
   items in tables.
*/

#mw-content-text .mw-parser-output .tdbg td,
#mw-content-text .mw-parser-output .tdbg1 td:nth-child(1),
#mw-content-text .mw-parser-output .tdbg2 td:nth-child(2),
#mw-content-text .mw-parser-output .tdbg3 td:nth-child(3),
#mw-content-text .mw-parser-output .tdbg4 td:nth-child(4),
#mw-content-text .mw-parser-output .tdbg5 td:nth-child(5),
#mw-content-text .mw-parser-output .tdbg6 td:nth-child(6),
#mw-content-text .mw-parser-output .tdbg7 td:nth-child(7),
#mw-content-text .mw-parser-output .tdbg8 td:nth-child(8),
#mw-content-text .mw-parser-output .tdbg9 td:nth-child(9),
#mw-content-text .mw-parser-output .tdbg10 td:nth-child(10),
#mw-content-text .mw-parser-output .tdbg11 td:nth-child(11),
#mw-content-text .mw-parser-output .tdbg12 td:nth-child(12),
#mw-content-text .mw-parser-output .tdbg13 td:nth-child(13),
#mw-content-text .mw-parser-output .tdbg14 td:nth-child(14),
#mw-content-text .mw-parser-output .tdbg15 td:nth-child(15),
#mw-content-text .mw-parser-output .tdbg16 td:nth-child(16),
#mw-content-text .mw-parser-output .tdbg17 td:nth-child(17),
#mw-content-text .mw-parser-output .tdbg18 td:nth-child(18),
#mw-content-text .mw-parser-output .tdbg19 td:nth-child(19),
#mw-content-text .mw-parser-output .tdbg20 td:nth-child(20) {
	background:rgba(var(--theme-page-dynamic-color-1--rgb),.05);
}

/* ALIGNMENT
   Styles that can be added to an entire table itself   
   to apply to each cell in the respective column.      
   Removes the need to apply styles to individual cells.
*/

#mw-content-text .mw-parser-output .tdl td,
#mw-content-text .mw-parser-output .tdl1 td:nth-child(1),
#mw-content-text .mw-parser-output .tdl2 td:nth-child(2),
#mw-content-text .mw-parser-output .tdl3 td:nth-child(3),
#mw-content-text .mw-parser-output .tdl4 td:nth-child(4),
#mw-content-text .mw-parser-output .tdl5 td:nth-child(5),
#mw-content-text .mw-parser-output .tdl6 td:nth-child(6),
#mw-content-text .mw-parser-output .tdl7 td:nth-child(7),
#mw-content-text .mw-parser-output .tdl8 td:nth-child(8),
#mw-content-text .mw-parser-output .tdl9 td:nth-child(9),
#mw-content-text .mw-parser-output .tdl10 td:nth-child(10),
#mw-content-text .mw-parser-output .tdl11 td:nth-child(11),
#mw-content-text .mw-parser-output .tdl12 td:nth-child(12),
#mw-content-text .mw-parser-output .tdl13 td:nth-child(13),
#mw-content-text .mw-parser-output .tdl14 td:nth-child(14),
#mw-content-text .mw-parser-output .tdl15 td:nth-child(15),
#mw-content-text .mw-parser-output .tdl16 td:nth-child(16),
#mw-content-text .mw-parser-output .tdl17 td:nth-child(17),
#mw-content-text .mw-parser-output .tdl18 td:nth-child(18),
#mw-content-text .mw-parser-output .tdl19 td:nth-child(19),
#mw-content-text .mw-parser-output .tdl20 td:nth-child(20) {
	text-align: left;
}

#mw-content-text .mw-parser-output .thl th,
#mw-content-text .mw-parser-output .thl1 th:nth-child(1),
#mw-content-text .mw-parser-output .thl2 th:nth-child(2),
#mw-content-text .mw-parser-output .thl3 th:nth-child(3),
#mw-content-text .mw-parser-output .thl4 th:nth-child(4),
#mw-content-text .mw-parser-output .thl5 th:nth-child(5),
#mw-content-text .mw-parser-output .thl6 th:nth-child(6),
#mw-content-text .mw-parser-output .thl7 th:nth-child(7),
#mw-content-text .mw-parser-output .thl8 th:nth-child(8),
#mw-content-text .mw-parser-output .thl9 th:nth-child(9),
#mw-content-text .mw-parser-output .thl10 th:nth-child(10),
#mw-content-text .mw-parser-output .thl11 th:nth-child(11),
#mw-content-text .mw-parser-output .thl12 th:nth-child(12),
#mw-content-text .mw-parser-output .thl13 th:nth-child(13),
#mw-content-text .mw-parser-output .thl14 th:nth-child(14),
#mw-content-text .mw-parser-output .thl15 th:nth-child(15),
#mw-content-text .mw-parser-output .thl16 th:nth-child(16),
#mw-content-text .mw-parser-output .thl17 th:nth-child(17),
#mw-content-text .mw-parser-output .thl18 th:nth-child(18),
#mw-content-text .mw-parser-output .thl19 th:nth-child(19),
#mw-content-text .mw-parser-output .thl20 th:nth-child(20) {
	text-align: left;
}

#mw-content-text .mw-parser-output .tdc td,
#mw-content-text .mw-parser-output .tdc1 td:nth-child(1),
#mw-content-text .mw-parser-output .tdc2 td:nth-child(2),
#mw-content-text .mw-parser-output .tdc3 td:nth-child(3),
#mw-content-text .mw-parser-output .tdc4 td:nth-child(4),
#mw-content-text .mw-parser-output .tdc5 td:nth-child(5),
#mw-content-text .mw-parser-output .tdc6 td:nth-child(6),
#mw-content-text .mw-parser-output .tdc7 td:nth-child(7),
#mw-content-text .mw-parser-output .tdc8 td:nth-child(8),
#mw-content-text .mw-parser-output .tdc9 td:nth-child(9),
#mw-content-text .mw-parser-output .tdc10 td:nth-child(10),
#mw-content-text .mw-parser-output .tdc11 td:nth-child(11),
#mw-content-text .mw-parser-output .tdc12 td:nth-child(12),
#mw-content-text .mw-parser-output .tdc13 td:nth-child(13),
#mw-content-text .mw-parser-output .tdc14 td:nth-child(14),
#mw-content-text .mw-parser-output .tdc15 td:nth-child(15),
#mw-content-text .mw-parser-output .tdc16 td:nth-child(16),
#mw-content-text .mw-parser-output .tdc17 td:nth-child(17),
#mw-content-text .mw-parser-output .tdc18 td:nth-child(18),
#mw-content-text .mw-parser-output .tdc19 td:nth-child(19),
#mw-content-text .mw-parser-output .tdc20 td:nth-child(20) {
	text-align: center;
}

#mw-content-text .mw-parser-output .thc th,
#mw-content-text .mw-parser-output .thc1 th:nth-child(1),
#mw-content-text .mw-parser-output .thc2 th:nth-child(2),
#mw-content-text .mw-parser-output .thc3 th:nth-child(3),
#mw-content-text .mw-parser-output .thc4 th:nth-child(4),
#mw-content-text .mw-parser-output .thc5 th:nth-child(5),
#mw-content-text .mw-parser-output .thc6 th:nth-child(6),
#mw-content-text .mw-parser-output .thc7 th:nth-child(7),
#mw-content-text .mw-parser-output .thc8 th:nth-child(8),
#mw-content-text .mw-parser-output .thc9 th:nth-child(9),
#mw-content-text .mw-parser-output .thc10 th:nth-child(10),
#mw-content-text .mw-parser-output .thc11 th:nth-child(11),
#mw-content-text .mw-parser-output .thc12 th:nth-child(12),
#mw-content-text .mw-parser-output .thc13 th:nth-child(13),
#mw-content-text .mw-parser-output .thc14 th:nth-child(14),
#mw-content-text .mw-parser-output .thc15 th:nth-child(15),
#mw-content-text .mw-parser-output .thc16 th:nth-child(16),
#mw-content-text .mw-parser-output .thc17 th:nth-child(17),
#mw-content-text .mw-parser-output .thc18 th:nth-child(18),
#mw-content-text .mw-parser-output .thc19 th:nth-child(19),
#mw-content-text .mw-parser-output .thc20 th:nth-child(20) {
	text-align: center;
}

#mw-content-text .mw-parser-output .tdr td,
#mw-content-text .mw-parser-output .tdr1 td:nth-child(1),
#mw-content-text .mw-parser-output .tdr2 td:nth-child(2),
#mw-content-text .mw-parser-output .tdr3 td:nth-child(3),
#mw-content-text .mw-parser-output .tdr4 td:nth-child(4),
#mw-content-text .mw-parser-output .tdr5 td:nth-child(5),
#mw-content-text .mw-parser-output .tdr6 td:nth-child(6),
#mw-content-text .mw-parser-output .tdr7 td:nth-child(7),
#mw-content-text .mw-parser-output .tdr8 td:nth-child(8),
#mw-content-text .mw-parser-output .tdr9 td:nth-child(9),
#mw-content-text .mw-parser-output .tdr10 td:nth-child(10),
#mw-content-text .mw-parser-output .tdr11 td:nth-child(11),
#mw-content-text .mw-parser-output .tdr12 td:nth-child(12),
#mw-content-text .mw-parser-output .tdr13 td:nth-child(13),
#mw-content-text .mw-parser-output .tdr14 td:nth-child(14),
#mw-content-text .mw-parser-output .tdr15 td:nth-child(15),
#mw-content-text .mw-parser-output .tdr16 td:nth-child(16),
#mw-content-text .mw-parser-output .tdr17 td:nth-child(17),
#mw-content-text .mw-parser-output .tdr18 td:nth-child(18),
#mw-content-text .mw-parser-output .tdr19 td:nth-child(19),
#mw-content-text .mw-parser-output .tdr20 td:nth-child(20) {
	text-align: right;
}

#mw-content-text .mw-parser-output .thr th,
#mw-content-text .mw-parser-output .thr1 th:nth-child(1),
#mw-content-text .mw-parser-output .thr2 th:nth-child(2),
#mw-content-text .mw-parser-output .thr3 th:nth-child(3),
#mw-content-text .mw-parser-output .thr4 th:nth-child(4),
#mw-content-text .mw-parser-output .thr5 th:nth-child(5),
#mw-content-text .mw-parser-output .thr6 th:nth-child(6),
#mw-content-text .mw-parser-output .thr7 th:nth-child(7),
#mw-content-text .mw-parser-output .thr8 th:nth-child(8),
#mw-content-text .mw-parser-output .thr9 th:nth-child(9),
#mw-content-text .mw-parser-output .thr10 th:nth-child(10),
#mw-content-text .mw-parser-output .thr11 th:nth-child(11),
#mw-content-text .mw-parser-output .thr12 th:nth-child(12),
#mw-content-text .mw-parser-output .thr13 th:nth-child(13),
#mw-content-text .mw-parser-output .thr14 th:nth-child(14),
#mw-content-text .mw-parser-output .thr15 th:nth-child(15),
#mw-content-text .mw-parser-output .thr16 th:nth-child(16),
#mw-content-text .mw-parser-output .thr17 th:nth-child(17),
#mw-content-text .mw-parser-output .thr18 th:nth-child(18),
#mw-content-text .mw-parser-output .thr19 th:nth-child(19),
#mw-content-text .mw-parser-output .thr20 th:nth-child(20) {
	text-align: right;
}

#mw-content-text .mw-parser-output .tdt td,
#mw-content-text .mw-parser-output .tdt1 td:nth-child(1),
#mw-content-text .mw-parser-output .tdt2 td:nth-child(2),
#mw-content-text .mw-parser-output .tdt3 td:nth-child(3),
#mw-content-text .mw-parser-output .tdt4 td:nth-child(4),
#mw-content-text .mw-parser-output .tdt5 td:nth-child(5),
#mw-content-text .mw-parser-output .tdt6 td:nth-child(6),
#mw-content-text .mw-parser-output .tdt7 td:nth-child(7),
#mw-content-text .mw-parser-output .tdt8 td:nth-child(8),
#mw-content-text .mw-parser-output .tdt9 td:nth-child(9),
#mw-content-text .mw-parser-output .tdt10 td:nth-child(10),
#mw-content-text .mw-parser-output .tdt11 td:nth-child(11),
#mw-content-text .mw-parser-output .tdt12 td:nth-child(12),
#mw-content-text .mw-parser-output .tdt13 td:nth-child(13),
#mw-content-text .mw-parser-output .tdt14 td:nth-child(14),
#mw-content-text .mw-parser-output .tdt15 td:nth-child(15),
#mw-content-text .mw-parser-output .tdt16 td:nth-child(16),
#mw-content-text .mw-parser-output .tdt17 td:nth-child(17),
#mw-content-text .mw-parser-output .tdt18 td:nth-child(18),
#mw-content-text .mw-parser-output .tdt19 td:nth-child(19),
#mw-content-text .mw-parser-output .tdt20 td:nth-child(20) {
	vertical-align: top;
}

#mw-content-text .mw-parser-output .tht th,
#mw-content-text .mw-parser-output .tht1 th:nth-child(1),
#mw-content-text .mw-parser-output .tht2 th:nth-child(2),
#mw-content-text .mw-parser-output .tht3 th:nth-child(3),
#mw-content-text .mw-parser-output .tht4 th:nth-child(4),
#mw-content-text .mw-parser-output .tht5 th:nth-child(5),
#mw-content-text .mw-parser-output .tht6 th:nth-child(6),
#mw-content-text .mw-parser-output .tht7 th:nth-child(7),
#mw-content-text .mw-parser-output .tht8 th:nth-child(8),
#mw-content-text .mw-parser-output .tht9 th:nth-child(9),
#mw-content-text .mw-parser-output .tht10 th:nth-child(10),
#mw-content-text .mw-parser-output .tht11 th:nth-child(11),
#mw-content-text .mw-parser-output .tht12 th:nth-child(12),
#mw-content-text .mw-parser-output .tht13 th:nth-child(13),
#mw-content-text .mw-parser-output .tht14 th:nth-child(14),
#mw-content-text .mw-parser-output .tht15 th:nth-child(15),
#mw-content-text .mw-parser-output .tht16 th:nth-child(16),
#mw-content-text .mw-parser-output .tht17 th:nth-child(17),
#mw-content-text .mw-parser-output .tht18 th:nth-child(18),
#mw-content-text .mw-parser-output .tht19 th:nth-child(19),
#mw-content-text .mw-parser-output .tht20 th:nth-child(20) {
	vertical-align: top;
}

#mw-content-text .mw-parser-output .tdm td,
#mw-content-text .mw-parser-output .tdm1 td:nth-child(1),
#mw-content-text .mw-parser-output .tdm2 td:nth-child(2),
#mw-content-text .mw-parser-output .tdm3 td:nth-child(3),
#mw-content-text .mw-parser-output .tdm4 td:nth-child(4),
#mw-content-text .mw-parser-output .tdm5 td:nth-child(5),
#mw-content-text .mw-parser-output .tdm6 td:nth-child(6),
#mw-content-text .mw-parser-output .tdm7 td:nth-child(7),
#mw-content-text .mw-parser-output .tdm8 td:nth-child(8),
#mw-content-text .mw-parser-output .tdm9 td:nth-child(9),
#mw-content-text .mw-parser-output .tdm10 td:nth-child(10),
#mw-content-text .mw-parser-output .tdm11 td:nth-child(11),
#mw-content-text .mw-parser-output .tdm12 td:nth-child(12),
#mw-content-text .mw-parser-output .tdm13 td:nth-child(13),
#mw-content-text .mw-parser-output .tdm14 td:nth-child(14),
#mw-content-text .mw-parser-output .tdm15 td:nth-child(15),
#mw-content-text .mw-parser-output .tdm16 td:nth-child(16),
#mw-content-text .mw-parser-output .tdm17 td:nth-child(17),
#mw-content-text .mw-parser-output .tdm18 td:nth-child(18),
#mw-content-text .mw-parser-output .tdm19 td:nth-child(19),
#mw-content-text .mw-parser-output .tdm20 td:nth-child(20) {
	vertical-align: middle;
}

#mw-content-text .mw-parser-output .thm th,
#mw-content-text .mw-parser-output .thm1 th:nth-child(1),
#mw-content-text .mw-parser-output .thm2 th:nth-child(2),
#mw-content-text .mw-parser-output .thm3 th:nth-child(3),
#mw-content-text .mw-parser-output .thm4 th:nth-child(4),
#mw-content-text .mw-parser-output .thm5 th:nth-child(5),
#mw-content-text .mw-parser-output .thm6 th:nth-child(6),
#mw-content-text .mw-parser-output .thm7 th:nth-child(7),
#mw-content-text .mw-parser-output .thm8 th:nth-child(8),
#mw-content-text .mw-parser-output .thm9 th:nth-child(9),
#mw-content-text .mw-parser-output .thm10 th:nth-child(10),
#mw-content-text .mw-parser-output .thm11 th:nth-child(11),
#mw-content-text .mw-parser-output .thm12 th:nth-child(12),
#mw-content-text .mw-parser-output .thm13 th:nth-child(13),
#mw-content-text .mw-parser-output .thm14 th:nth-child(14),
#mw-content-text .mw-parser-output .thm15 th:nth-child(15),
#mw-content-text .mw-parser-output .thm16 th:nth-child(16),
#mw-content-text .mw-parser-output .thm17 th:nth-child(17),
#mw-content-text .mw-parser-output .thm18 th:nth-child(18),
#mw-content-text .mw-parser-output .thm19 th:nth-child(19),
#mw-content-text .mw-parser-output .thm20 th:nth-child(20) {
	vertical-align: middle;
}

#mw-content-text .mw-parser-output .tdb td,
#mw-content-text .mw-parser-output .tdb1 td:nth-child(1),
#mw-content-text .mw-parser-output .tdb2 td:nth-child(2),
#mw-content-text .mw-parser-output .tdb3 td:nth-child(3),
#mw-content-text .mw-parser-output .tdb4 td:nth-child(4),
#mw-content-text .mw-parser-output .tdb5 td:nth-child(5),
#mw-content-text .mw-parser-output .tdb6 td:nth-child(6),
#mw-content-text .mw-parser-output .tdb7 td:nth-child(7),
#mw-content-text .mw-parser-output .tdb8 td:nth-child(8),
#mw-content-text .mw-parser-output .tdb9 td:nth-child(9),
#mw-content-text .mw-parser-output .tdb10 td:nth-child(10),
#mw-content-text .mw-parser-output .tdb11 td:nth-child(11),
#mw-content-text .mw-parser-output .tdb12 td:nth-child(12),
#mw-content-text .mw-parser-output .tdb13 td:nth-child(13),
#mw-content-text .mw-parser-output .tdb14 td:nth-child(14),
#mw-content-text .mw-parser-output .tdb15 td:nth-child(15),
#mw-content-text .mw-parser-output .tdb16 td:nth-child(16),
#mw-content-text .mw-parser-output .tdb17 td:nth-child(17),
#mw-content-text .mw-parser-output .tdb18 td:nth-child(18),
#mw-content-text .mw-parser-output .tdb19 td:nth-child(19),
#mw-content-text .mw-parser-output .tdb20 td:nth-child(20) {
	vertical-align: bottom;
}

#mw-content-text .mw-parser-output .thb th,
#mw-content-text .mw-parser-output .thb1 th:nth-child(1),
#mw-content-text .mw-parser-output .thb2 th:nth-child(2),
#mw-content-text .mw-parser-output .thb3 th:nth-child(3),
#mw-content-text .mw-parser-output .thb4 th:nth-child(4),
#mw-content-text .mw-parser-output .thb5 th:nth-child(5),
#mw-content-text .mw-parser-output .thb6 th:nth-child(6),
#mw-content-text .mw-parser-output .thb7 th:nth-child(7),
#mw-content-text .mw-parser-output .thb8 th:nth-child(8),
#mw-content-text .mw-parser-output .thb9 th:nth-child(9),
#mw-content-text .mw-parser-output .thb10 th:nth-child(10),
#mw-content-text .mw-parser-output .thb11 th:nth-child(11),
#mw-content-text .mw-parser-output .thb12 th:nth-child(12),
#mw-content-text .mw-parser-output .thb13 th:nth-child(13),
#mw-content-text .mw-parser-output .thb14 th:nth-child(14),
#mw-content-text .mw-parser-output .thb15 th:nth-child(15),
#mw-content-text .mw-parser-output .thb16 th:nth-child(16),
#mw-content-text .mw-parser-output .thb17 th:nth-child(17),
#mw-content-text .mw-parser-output .thb18 th:nth-child(18),
#mw-content-text .mw-parser-output .thb19 th:nth-child(19),
#mw-content-text .mw-parser-output .thb20 th:nth-child(20) {
	vertical-align: bottom;
}