← All changes | css/time_picker_skins/light__24_8.css +32 -13 10.10 → 11.9 View file →

		@@ -4,8 +4,10 @@
4	4	/* For best compatibility, please change parameters only in :root { ... } section */
5	5	:root {
6	6	--wpbc_timepicker-font-size: 15px;
7	7
	8	+ --wpbc_timepicker-bg-color-opacity: 100%;
	9	+
8	10	--wpbc_timepicker-bg-color: #FFF;
9	11	--wpbc_timepicker-text-color: #000;
10	12	--wpbc_timepicker-border-color: #d6d6d6;
11	13
		@@ -11,35 +13,52 @@
11	13
12	14	--wpbc_timepicker-hover-bg-color: #fff;
13	15	--wpbc_timepicker-hover-text-color: #000;
14	16	--wpbc_timepicker-hover-border-color: #ffe7c7;
	17	+ --wpbc_timepicker-hover-bg-color-opacity: var(--wpbc_timepicker-bg-color-opacity, 100%);
15	18
16	19	--wpbc_timepicker-selected-bg-color: #6b96ce;
17	20	--wpbc_timepicker-selected-text-color: #fff;
18	21	--wpbc_timepicker-selected-border-color: #7092bf;
	22	+ --wpbc_timepicker-selected-bg-color-opacity: var(--wpbc_timepicker-bg-color-opacity, 100%);
	23	+
	24	+ --wpbc_timepicker-border-width: 1px;
	25	+ --wpbc_timepicker-border-radius: 5px;
	26	+
	27	+ --wpbc_timepicker-padding: 0.25em 1em;
	28	+ --wpbc_timepicker-margin: 0.1em 0;
19	29	}
20		-
21	30	/* Button */
22	31	.wpbc_times_selector div {
23		- border-radius: 5px;
	32	+ padding: var(--wpbc_timepicker-padding);
	33	+ margin: var(--wpbc_timepicker-margin);
	34	+ box-shadow: none;
	35	+
	36	+ font-size: var(--wpbc_timepicker-font-size);
	37	+ font-weight: 400;
24	38	text-align: center;
25		- font-weight: 400;
26		- font-size: var(--wpbc_timepicker-font-size);
	39	+
	40	+ border-radius: var(--wpbc_timepicker-border-radius);
	41	+
	42	+ border: var(--wpbc_timepicker-border-width) solid var(--wpbc_timepicker-border-color);
27	43	color: var(--wpbc_timepicker-text-color);
28		- background: var(--wpbc_timepicker-bg-color);
29		- border: 1px solid var(--wpbc_timepicker-border-color);
	44	+ background: rgb(from var(--wpbc_timepicker-bg-color) r g b / var(--wpbc_timepicker-bg-color-opacity));
30	45	}
31		-
32	46	/* Button - Mouse Over */
33	47	.wpbc_times_selector div:hover {
34		- background: var(--wpbc_timepicker-hover-bg-color);
	48	+ border: var(--wpbc_timepicker-border-width) solid var(--wpbc_timepicker-hover-border-color);
35	49	color: var(--wpbc_timepicker-hover-text-color);
36		- border: 1px solid var(--wpbc_timepicker-hover-border-color);
37		- box-shadow: 0 0 1px var(--wpbc_timepicker-hover-border-color);
	50	+ background: rgb(from var(--wpbc_timepicker-hover-bg-color) r g b / var(--wpbc_timepicker-hover-bg-color-opacity));
38	51	}
39		-
40	52	/* Button - Selected */
41	53	.wpbc_times_selector div.wpbc_time_selected {
42		- background: var(--wpbc_timepicker-selected-bg-color);
	54	+ border: var(--wpbc_timepicker-border-width) solid var(--wpbc_timepicker-selected-border-color);
43	55	color: var(--wpbc_timepicker-selected-text-color);
44		- border: 1px solid var(--wpbc_timepicker-selected-border-color);
	56	+ background: rgb(from var(--wpbc_timepicker-selected-bg-color) r g b / var(--wpbc_timepicker-selected-bg-color-opacity));
	57	+}
	58	+/* FixIn: EAA - Highlight on Focus*/
	59	+.wpbc_times_selector div:not(.wpbc_time_selected):focus {
	60	+ /*border: var(--wpbc_timepicker-border-width) solid var(--wpbc_timepicker-hover-border-color);*/
	61	+ border: var(--wpbc_timepicker-border-width) solid var(--wpbc_timepicker-selected-bg-color);
	62	+ color: var(--wpbc_timepicker-hover-text-color);
	63	+ background: rgb(from var(--wpbc_timepicker-hover-bg-color) r g b / var(--wpbc_timepicker-hover-bg-color-opacity));
45	64	}