← All changes | css/pagelayer-blocks.css +179 -9 2.1.3 → 2.2.2 View file →

		@@ -36,14 +36,14 @@
36	36	}
37	37
38	38	.pagelayer-elp-button{
39	39	text-transform: unset;
40		-border: 1px solid #00A0D2;
	40	+border: 1px solid #2563eb;
41	41	font-weight: unset;
42	42	font-size: 12px;
43	43	margin:5px;
44	44	min-height: unset;
45		-background-color: #00A0D2;
	45	+background-color: #2563eb;
46	46	color: #fff;
47	47	transition: all 0.3s;
48	48	border-radius: unset;
49	49	border-radius: 2px;
		@@ -51,10 +51,10 @@
51	51	cursor:pointer;
52	52	}
53	53
54	54	.pagelayer-elp-button:hover{
55		-background-color: #00A0D2bf;
56		-border-color: #00A0D2;
	55	+background-color: rgba(37, 99, 235, 0.75);
	56	+border-color: #2563eb;
57	57	}
58	58
59	59	.pagelayer-block-appender{
60	60	background: #1e1e1e;
		@@ -144,13 +144,13 @@
144	144	line-height: 20px;
145	145	}
146	146
147	147	.pagelayer-elp-screen .pli:not(.pagelayer-prop-screen):hover{
148		-background-color: #3E8EF7;
	148	+background-color: #2563eb;
149	149	}
150	150
151	151	.pagelayer-elp-screen .pagelayer-prop-screen:hover{
152		-color: #3E8EF7;
	152	+color: #2563eb;
153	153	}
154	154	/* Screen Control End */
155	155
156	156	/* Settings Tab Control Start */
		@@ -439,9 +439,9 @@
439	439	.pagelayer-elp-slider::-moz-range-thumb{
440	440	width: 15px;
441	441	height: 15px;
442	442	border-radius: 50%;
443		-background: #00A0D2;
	443	+background: #2563eb;
444	444	cursor: pointer;
445	445	}
446	446
447	447	.pagelayer-elp-slider-value{
		@@ -614,10 +614,17 @@
614	614	}
615	615
616	616	.pagelayer-elp-gradient-div .pagelayer-elp-prop-grp{
617	617	padding: 5px 0;
	618	+display: flex;
	619	+align-items: center;
	620	+justify-content: space-between;
618	621	}
619	622
	623	+.pagelayer-elp-gradient-div .pagelayer-elp-label{
	624	+width: auto !important;
	625	+}
	626	+
620	627	.pagelayer-elp-gradient-color{
621	628	padding: 15px 0px !important;
622	629	}
623	630
		@@ -836,9 +843,9 @@
836	843	padding: 3px;
837	844	}
838	845
839	846	.pagelayer-elp-icon-span:hover{
840		-border-color: #00A0D2;
	847	+border-color: #2563eb;
841	848	background-color: #3e8ef7;
842	849	color: #ffffff;
843	850	box-shadow: 0px 1px 1px #3e8ef7bf;
844	851	}
		@@ -2066,5 +2073,168 @@
2066	2073
2067	2074	.pagelayer-navigator-item-active {
2068	2075	outline: 1px solid #ff6b6b;
2069	2076	}
2070		-/* image map end*/
	2077	+/* image map end*/
	2078	+
	2079	+/* Fix device icon overlapping/showing on top of select and input fields */
	2080	+.pagelayer-elp-screen {
	2081	+flex-shrink: 0 !important;
	2082	+}
	2083	+
	2084	+.pagelayer-form-item:has(.pagelayer-elp-select-div) .pagelayer-elp-label-div,
	2085	+.pagelayer-form-item:has(.pagelayer-elp-spinner-div) .pagelayer-elp-label-div,
	2086	+.pagelayer-form-item:has(.pagelayer-elp-color-div-holder) .pagelayer-elp-label-div,
	2087	+.pagelayer-form-item:has(.pagelayer-elp-color-div) .pagelayer-elp-label-div,
	2088	+.pagelayer-base-control:has(.pagelayer-elp-select-div) .pagelayer-elp-label-div,
	2089	+.pagelayer-base-control:has(.pagelayer-elp-spinner-div) .pagelayer-elp-label-div,
	2090	+.pagelayer-base-control:has(.pagelayer-elp-color-div-holder) .pagelayer-elp-label-div,
	2091	+.pagelayer-base-control:has(.pagelayer-elp-color-div) .pagelayer-elp-label-div {
	2092	+max-width: 45% !important;
	2093	+flex-wrap: wrap !important;
	2094	+padding-right: 10px !important;
	2095	+box-sizing: border-box !important;
	2096	+}
	2097	+
	2098	+.pagelayer-elp-typo {
	2099	+display: flex !important;
	2100	+align-items: center !important;
	2101	+justify-content: space-between !important;
	2102	+flex-wrap: wrap !important;
	2103	+}
	2104	+
	2105	+.pagelayer-elp-typo .pagelayer-elp-label {
	2106	+width: 48% !important;
	2107	+max-width: 48% !important;
	2108	+display: flex !important;
	2109	+align-items: center !important;
	2110	+flex-wrap: wrap !important;
	2111	+gap: 6px !important;
	2112	+margin-bottom: 0 !important;
	2113	+padding-right: 8px !important;
	2114	+box-sizing: border-box !important;
	2115	+}
	2116	+
	2117	+.pagelayer-elp-typo .pagelayer-elp-typo-input {
	2118	+width: 48% !important;
	2119	+max-width: 48% !important;
	2120	+}
	2121	+
	2122	+/* Fix restore/revert default icon position to sit in front of select/input field and be vertically aligned */
	2123	+.pagelayer-elp-label-div,
	2124	+.pagelayer-elp-link-label-div,
	2125	+.pagelayer-elp-typo .pagelayer-elp-label {
	2126	+position: static !important;
	2127	+}
	2128	+
	2129	+.pagelayer-elp-default,
	2130	+.pagelayer-typo-default {
	2131	+position: absolute !important;
	2132	+right: calc(50% + 8px) !important;
	2133	+top: 9px !important;
	2134	+transform: none !important;
	2135	+left: auto !important;
	2136	+margin: 0 !important;
	2137	+z-index: 5 !important;
	2138	+}
	2139	+
	2140	+.pagelayer-form-item:hover .pagelayer-elp-default[data_show=true],
	2141	+.pagelayer-base-control:hover .pagelayer-elp-default[data_show=true] {
	2142	+display: inline-block !important;
	2143	+}
	2144	+
	2145	+/* Fix link input field and gear icon alignment to form a unified input group */
	2146	+.pagelayer-elp-link-div {
	2147	+display: flex !important;
	2148	+align-items: stretch !important;
	2149	+flex-wrap: wrap !important;
	2150	+width: 100% !important;
	2151	+}
	2152	+
	2153	+.pagelayer-elp-link-div input.pagelayer-elp-link {
	2154	+flex: 1 1 auto !important;
	2155	+width: 0 !important;
	2156	+height: 32px !important;
	2157	+border: 1px solid #cbd5e1 !important;
	2158	+border-right: none !important;
	2159	+border-radius: 4px 0 0 4px !important;
	2160	+box-sizing: border-box !important;
	2161	+padding: 6px 10px !important;
	2162	+font-size: 13px !important;
	2163	+background-color: #fff !important;
	2164	+margin: 0 !important;
	2165	+}
	2166	+
	2167	+.pagelayer-dark .pagelayer-elp-link-div input.pagelayer-elp-link {
	2168	+background-color: #252529 !important;
	2169	+border-color: #475569 !important;
	2170	+color: #cbd5e1 !important;
	2171	+}
	2172	+
	2173	+.pagelayer-elp-link-div i.pagelayer-elp-link-icon {
	2174	+flex: 0 0 auto !important;
	2175	+width: 36px !important;
	2176	+height: 32px !important;
	2177	+border: 1px solid #cbd5e1 !important;
	2178	+border-radius: 0 4px 4px 0 !important;
	2179	+box-sizing: border-box !important;
	2180	+background-color: #f8fafc !important;
	2181	+color: #64748b !important;
	2182	+cursor: pointer !important;
	2183	+display: flex !important;
	2184	+align-items: center !important;
	2185	+justify-content: center !important;
	2186	+margin: 0 !important;
	2187	+position: static !important;
	2188	+font-size: 14px !important;
	2189	+line-height: normal !important;
	2190	+transition: background-color 0.15s ease, color 0.15s ease !important;
	2191	+}
	2192	+
	2193	+.pagelayer-elp-link-div i.pagelayer-elp-link-icon:hover {
	2194	+background-color: #f1f5f9 !important;
	2195	+color: #2563eb !important;
	2196	+}
	2197	+
	2198	+.pagelayer-dark .pagelayer-elp-link-div i.pagelayer-elp-link-icon {
	2199	+background-color: #1e1e24 !important;
	2200	+border-color: #475569 !important;
	2201	+color: #94a3b8 !important;
	2202	+}
	2203	+
	2204	+.pagelayer-dark .pagelayer-elp-link-div i.pagelayer-elp-link-icon:hover {
	2205	+background-color: #2d2d34 !important;
	2206	+color: #3b82f6 !important;
	2207	+}
	2208	+
	2209	+.pagelayer-elp-link-no-addons > .pagelayer-elp-link {
	2210	+border-radius: 4px !important;
	2211	+border-right: 1px solid #cbd5e1 !important;
	2212	+}
	2213	+
	2214	+.pagelayer-dark .pagelayer-elp-link-no-addons > .pagelayer-elp-link {
	2215	+border-right-color: #475569 !important;
	2216	+}
	2217	+
	2218	+.pagelayer-elp-link-div .pagelayer-elp-link-addons {
	2219	+width: 100% !important;
	2220	+margin-right: 0 !important;
	2221	+}
	2222	+
	2223	+.pagelayer-elp-link-div .pagelayer-elp-link-list {
	2224	+width: 100% !important;
	2225	+}
	2226	+
	2227	+/* Match sidebar top header section and bottombar section background in dark mode */
	2228	+.pagelayer-dark td.pagelayer-topbar-holder,
	2229	+.pagelayer-dark .pagelayer-bottombar-row {
	2230	+background: #0b0f19 !important;
	2231	+}
	2232	+
	2233	+.pagelayer-dark td.pagelayer-topbar-holder {
	2234	+border-bottom: 1px solid #1e293b !important;
	2235	+}
	2236	+
	2237	+.pagelayer-dark .pagelayer-bottombar-holder {
	2238	+border-top: 1px solid #1e293b !important;
	2239	+background: #0b0f19 !important;
	2240	+}