← All changes | css/_default-core.scss +38 -27 2.4.1 → 3.4 View file →

		@@ -1,10 +1,7 @@
1	1	/**
2	2	* TablePress Default CSS - Core CSS without DataTables styling.
3	3	*
4		- * Attention: Do not modify this file directly, but use the "Custom CSS" textarea
5		- * on the "Plugin Options" screen of TablePress.
6		- *
7	4	* @package TablePress
8	5	* @subpackage Frontend CSS
9	6	* @author Tobias Bäthge
10	7	* @since 1.0.0
		@@ -13,9 +10,9 @@
13	10	/* Default toggle variable for LTR and RTL CSS. */
14	11	$direction: "ltr" !default;
15	12
16	13	/* Default variables for the LTR CSS. */
17		-$align-side: left !default;
	14	+$align-side: left;
18	15
19	16	/* Variables for the RTL CSS. */
20	17	@if "rtl" == $direction {
21	18	$align-side: right;
		@@ -21,22 +18,22 @@
21	18	$align-side: right;
22	19	}
23	20
24	21	.tablepress {
25		- /* Custom properties */
	22	+ /* Custom properties. */
26	23	--text-color: #111111;
27	24	--head-text-color: var(--text-color);
28	25	--head-bg-color: #d9edf7;
29	26	--odd-text-color: var(--text-color);
30		- --odd-bg-color: #f9f9f9;
	27	+ --odd-bg-color: #ffffff;
31	28	--even-text-color: var(--text-color);
32		- --even-bg-color: #ffffff;
	29	+ --even-bg-color: #f9f9f9;
33	30	--hover-text-color: var(--text-color);
34	31	--hover-bg-color: #f3f3f3;
35	32	--border-color: #dddddd;
36	33	--padding: 0.5rem;
37	34
38		- /* General table style */
	35	+ /* General table style. */
39	36	table-layout: auto;
40	37	width: 100%;
41	38	margin: 0 auto 1rem;
42	39	clear: both;
		@@ -43,9 +40,9 @@
43	40	border-collapse: collapse;
44	41	border-spacing: 0;
45	42	border: none;
46	43
47		- /* General table cell style */
	44	+ /* General table cell style. */
48	45	> :not(caption) > * > * {
49	46	padding: var(--padding);
50	47	border: none;
51	48	background: none;
		@@ -51,20 +48,20 @@
51	48	background: none;
52	49	text-align: $align-side;
53	50	vertical-align: top;
54	51	float: none !important; /* Work around themes that set `float` on `.column-1` CSS classes and similar. */
55		- box-sizing: content-box;
	52	+ box-sizing: border-box;
56	53	}
57	54
58		- /* Horizontal borders */
59		- > * + tbody > * > *,
60		- > tbody > * ~ * > *,
61		- > tfoot > * > * {
	55	+ /* Horizontal borders, except for child rows in the tbody. */
	56	+ > :where(thead) + tbody > :where(:not(.child)) > *,
	57	+ > tbody > * ~ :where(:not(.child)) > *,
	58	+ > tfoot > :where(:first-child) > * {
62	59	border-top: 1px solid var(--border-color);
63	60	}
64	61
65		- /* Row background colors. For backwards-compatibility, using :nth-child or :nth-of-type is not feasible. */
66		- > :where(thead, tfoot) > * > th {
	62	+ /* Row background colors. */
	63	+ > :where(thead, tfoot) > tr > * {
67	64	background-color: var(--head-bg-color);
68	65	color: var(--head-text-color);
69	66	font-weight: bold;
70	67	word-break: normal;
		@@ -73,23 +70,37 @@
73	70	> :where(tbody) {
74	71	> tr > * {
75	72	color: var(--text-color);
76	73	}
77		- > .odd > * {
78		- background-color: var(--odd-bg-color);
79		- color: var(--odd-text-color);
	74	+ }
	75	+ > :where(tbody.row-striping) {
	76	+ > :nth-child(odd of :where(:not(.child, .dtrg-group))) { /* Ignore child and group rows. */
	77	+ > *,
	78	+ + :where(.child) > * { /* Give child rows the same style. */
	79	+ background-color: var(--odd-bg-color);
	80	+ color: var(--odd-text-color);
	81	+ }
80	82	}
81		- > .even > * {
82		- background-color: var(--even-bg-color);
83		- color: var(--even-text-color);
	83	+ > :nth-child(even of :where(:not(.child, .dtrg-group))) { /* Ignore child and group rows. */
	84	+ > *,
	85	+ + :where(.child) > * { /* Give child rows the same style. */
	86	+ background-color: var(--even-bg-color);
	87	+ color: var(--even-text-color);
	88	+ }
84	89	}
85	90	}
86		- > .row-hover > tr:hover > * {
87		- background-color: var(--hover-bg-color);
88		- color: var(--hover-text-color);
	91	+ > .row-hover > tr {
	92	+ content-visibility: auto; /* Improve rendering performance for the :has(+ .child:hover) selector below. */
	93	+
	94	+ &:where(:not(.dtrg-group)):hover > *, /* Ignore group rows. */
	95	+ &:hover + :where(.child) > *, /* Give child rows the same style. */
	96	+ &:has(+ .child:hover) > * { /* Highlight the parent row when a child row is hovered. */
	97	+ background-color: var(--hover-bg-color);
	98	+ color: var(--hover-text-color);
	99	+ }
89	100	}
90	101
91		- /* Reset image layout in tables */
	102	+ /* Reset image layout in tables. */
92	103	img {
93	104	margin: 0;
94	105	padding: 0;
95	106	border: none;
		@@ -95,9 +106,9 @@
95	106	border: none;
96	107	max-width: none;
97	108	}
98	109
99		- /* Table description */
	110	+ /* Table description. */
100	111	&-table-description {
101	112	clear: both;
102	113	display: block;
103	114	}