← All changes | css/_default-core.scss +39 -27 2.3 → 3.2 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;
		@@ -70,23 +67,38 @@
70	67	word-break: normal;
71	68	vertical-align: middle;
72	69	}
73	70	> :where(tbody) {
74		- > .odd > * {
75		- background-color: var(--odd-bg-color);
76		- color: var(--odd-text-color);
	71	+ > tr > * {
	72	+ color: var(--text-color);
77	73	}
78		- > .even > * {
79		- background-color: var(--even-bg-color);
80		- color: var(--even-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	+ }
81	82	}
	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	+ }
	89	+ }
82	90	}
83		- > .row-hover > tr:hover > * {
84		- background-color: var(--hover-bg-color);
85		- color: var(--hover-text-color);
	91	+ > .row-hover > tr {
	92	+ &:where(:not(.dtrg-group)):hover > *, /* Ignore group rows. */
	93	+ &:hover + :where(.child) > *, /* Give child rows the same style. */
	94	+ &:has(+ .child:hover) > * { /* Highlight the parent row when a child row is hovered. */
	95	+ background-color: var(--hover-bg-color);
	96	+ color: var(--hover-text-color);
	97	+ }
86	98	}
87	99
88		- /* Reset image layout in tables */
	100	+ /* Reset image layout in tables. */
89	101	img {
90	102	margin: 0;
91	103	padding: 0;
92	104	border: none;
		@@ -92,9 +104,9 @@
92	104	border: none;
93	105	max-width: none;
94	106	}
95	107
96		- /* Table description */
	108	+ /* Table description. */
97	109	&-table-description {
98	110	clear: both;
99	111	display: block;
100	112	}