.spSidebarBox { background-color: rgb(217, 237, 247); margin-bottom: 10px; padding: 10px; }
.spColor { align-items: center; }
.spColor:not(:first-child) { margin-top: 5px; }
+html:not(.touch) .spColor:hover .spColorBox { border: 2px dashed #6e7792; left: -2px; padding: 2px; position: relative; }
.spColorBox { background-color: #fff; border: 1px solid #ccc; padding: 1px; }
html[dir="ltr"] .spColorBox { margin-right: 10px !important; }
+html[dir="ltr"]:not(.touch) .spColor:hover .spColorBox { margin-right: 6px !important; }
html[dir="rtl"] .spColorBox { margin-left: 10px !important; }
+html[dir="rtl"]:not(.touch) .spColor:hover .spColorBox { margin-left: 6px !important; }
+html:not(.touch) .spColorBox { cursor: pointer; }
.spColorBox > span { display: block; height: 24px; width: 24px; }
.spVariable, .spDescription { display: block; font-size: 12px; }
.spVariable { font-family: Consolas, Courier, monospace; }
#spWindow.spColorPalette + #spSidebar .spSidebarBox { break-inside: avoid; display: block !important; page-break-inside: avoid; position: relative; }
#spWindow.spColorPalette + #spSidebar .spSidebarBox[data-category="none"], #spWindow.spColorPalette + #spSidebar .spSidebarBox.spSidebarBoxCategorySelection { display: none !important; }
#spWindow.spColorPalette + #spSidebar .spSidebarBox::before { color: rgb(125, 130, 135); content: attr(data-category); display: block; font-family: Consolas, Courier, monospace; font-size: 1.2rem; margin-bottom: 10px; }
+ #spWindow.spColorPalette + #spSidebar .spSidebarBox[data-category="apiVersion"]::before { display: none; }
}
<div class="spSidebarBox" data-category="none">
<p>{lang}wcf.acp.style.colors.description{/lang}</p>
- <p><br></p>
- <p><sup class="spApiVersion">3.1</sup> <small>{lang version='3.1'}wcf.acp.style.colors.description.apiVersion{/lang}</small></p>
- <p><sup class="spApiVersion">5.2</sup> <small>{lang version='5.2'}wcf.acp.style.colors.description.apiVersion{/lang}</small></p>
</div>
{foreach from=$colors key=spCategory item=spColors}
</ul>
</div>
{/foreach}
+
+ <div class="spSidebarBox" data-category="apiVersion" style="display: none;">
+ <p><sup class="spApiVersion">3.1</sup> <small>{lang version='3.1'}wcf.acp.style.colors.description.apiVersion{/lang}</small></p>
+ <p><sup class="spApiVersion">5.2</sup> <small>{lang version='5.2'}wcf.acp.style.colors.description.apiVersion{/lang}</small></p>
+ </div>
</div>
</div>
</div>
}
};
+ var apiVersions = elBySel('.spSidebarBox[data-category="apiVersion"]', container);
var element;
var callbackChange = function() {
element = elBySel('.spSidebarBox[data-category="' + lastValue + '"]', container);
element = elBySel('.spSidebarBox[data-category="' + lastValue + '"]', container);
elShow(element);
+ var showCompatibilityNotice = elBySel('.spApiVersion', element) !== null;
+ window[showCompatibilityNotice ? 'elShow' : 'elHide'](apiVersions);
+
// set region marker
_updateRegionMarker();
};