/* ### wrapper ### */
-#spWrapper { display: flex; }
-#spWindow { background-color: #eee; border: 1px solid rgb(52, 152, 219); border-radius: 4px; flex: 1 1 auto; overflow: hidden; padding: 1px; }
-html[dir="ltr"] #spWindow { margin-right: 40px; }
-html[dir="rtl"] #spWindow { margin-left: 40px; }
-#spSidebar { flex: 0 0 300px; }
-.spBoundary { margin: 0 40px; }
-.spInlineWrapper { display: inline-block; }
+#spWrapper {
+ display: flex;
+}
+#spWindow {
+ background-color: #eee;
+ border: 1px solid rgb(52, 152, 219);
+ border-radius: 4px;
+ flex: 1 1 auto;
+ overflow: hidden;
+ padding: 1px;
+}
+html[dir="ltr"] #spWindow {
+ margin-right: 40px;
+}
+html[dir="rtl"] #spWindow {
+ margin-left: 40px;
+}
+#spSidebar {
+ flex: 0 0 300px;
+}
+.spBoundary {
+ margin: 0 40px;
+}
+.spInlineWrapper {
+ display: inline-block;
+}
/* ### header ### */
-#spHeader > .spBoundary { display: flex; flex-wrap: wrap; padding: 30px 0; }
-#spLogo { flex: 0 0 50%; }
-#spLogo > img { height: auto; max-height: 40px; width: auto; }
-#spSearch { flex: 0 0 50%; }
-#spSearchBox { border-width: 0; }
-#spUser { flex: 0 0 50%; }
-#spLogo, #spSearch { align-items: center; display: flex; }
-#spSearch, #spUser { justify-content: flex-end; }
+#spHeader > .spBoundary {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 30px 0;
+}
+#spLogo {
+ flex: 0 0 50%;
+}
+#spLogo > img {
+ height: auto;
+ max-height: 40px;
+ width: auto;
+}
+#spSearch {
+ flex: 0 0 50%;
+}
+#spSearchBox {
+ border-width: 0;
+}
+#spUser {
+ flex: 0 0 50%;
+}
+#spLogo,
+#spSearch {
+ align-items: center;
+ display: flex;
+}
+#spSearch,
+#spUser {
+ justify-content: flex-end;
+}
/* ### menu ### */
-html[dir="ltr"] #spHeaderPanel ol.inlineList > li { margin-right: 0; }
-html[dir="rtl"] #spHeaderPanel ol.inlineList > li { margin-left: 0; }
-#spHeaderPanel ol.inlineList > li > a { align-items: center; display: flex; font-size: 14px; font-weight: 400; height: 50px; padding: 0 15px; }
-html[dir="ltr"] #spHeaderPanel ol.inlineList > li.active > a::after { margin-left: 5px; }
-html[dir="rtl"] #spHeaderPanel ol.inlineList > li.active > a::after { margin-right: 5px; }
-#spHeaderPanel ol.inlineList > li.active { position: relative; }
-#spSubMenu { border: 1px solid var(--wcfHeaderMenuDropdownBorder); border-radius: var(--wcfBorderRadius); box-shadow: var(--wcfBoxShadow); padding: 3px 0; position: absolute; }
-#spSubMenu > li > a { display: block; padding: 5px 20px; white-space: nowrap; width: 120px; }
+html[dir="ltr"] #spHeaderPanel ol.inlineList > li {
+ margin-right: 0;
+}
+html[dir="rtl"] #spHeaderPanel ol.inlineList > li {
+ margin-left: 0;
+}
+#spHeaderPanel ol.inlineList > li > a {
+ align-items: center;
+ display: flex;
+ font-size: 14px;
+ font-weight: 400;
+ height: 50px;
+ padding: 0 15px;
+}
+html[dir="ltr"] #spHeaderPanel ol.inlineList > li.active > a::after {
+ margin-left: 5px;
+}
+html[dir="rtl"] #spHeaderPanel ol.inlineList > li.active > a::after {
+ margin-right: 5px;
+}
+#spHeaderPanel ol.inlineList > li.active {
+ position: relative;
+}
+#spSubMenu {
+ border: 1px solid var(--wcfHeaderMenuDropdownBorder);
+ border-radius: var(--wcfBorderRadius);
+ box-shadow: var(--wcfBoxShadow);
+ padding: 3px 0;
+ position: absolute;
+}
+#spSubMenu > li > a {
+ display: block;
+ padding: 5px 20px;
+ white-space: nowrap;
+ width: 120px;
+}
/* ### navigation ### */
-#spNavigation { font-size: 11px; padding: 7px 0; }
-#spNavigation li:first-child { position: relative; }
-#spNavigation li:first-child::after { content: "/"; display: inline-block; }
-html[dir="ltr"] #spNavigation li:first-child::after { margin-left: 5px; }
-html[dir="rtl"] #spNavigation li:first-child::after { margin-right: 5px; }
+#spNavigation {
+ font-size: 11px;
+ padding: 7px 0;
+}
+#spNavigation li:first-child {
+ position: relative;
+}
+#spNavigation li:first-child::after {
+ content: "/";
+ display: inline-block;
+}
+html[dir="ltr"] #spNavigation li:first-child::after {
+ margin-left: 5px;
+}
+html[dir="rtl"] #spNavigation li:first-child::after {
+ margin-right: 5px;
+}
/* ### content ### */
-#spContent { padding: 20px 0; }
-.spHeadline { border-bottom: 1px solid #000; font-size: 1.2rem; font-weight: 300; margin: 20px 0; padding-bottom: 5px; }
-.spHeadline:first-child { margin-top: 10px; }
-#spContentBorder { border-bottom: 1px solid #000; margin: 10px 0; }
-#spContentBorderInner { border-bottom: 1px solid #000; margin: 10px 0; }
-.spContentContainer { background-color: #fff; border: 1px solid #000; margin: 10px 0; padding: 10px; }
+#spContent {
+ padding: 20px 0;
+}
+.spHeadline {
+ border-bottom: 1px solid #000;
+ font-size: 1.2rem;
+ font-weight: 300;
+ margin: 20px 0;
+ padding-bottom: 5px;
+}
+.spHeadline:first-child {
+ margin-top: 10px;
+}
+#spContentBorder {
+ border-bottom: 1px solid #000;
+ margin: 10px 0;
+}
+#spContentBorderInner {
+ border-bottom: 1px solid #000;
+ margin: 10px 0;
+}
+.spContentContainer {
+ background-color: #fff;
+ border: 1px solid #000;
+ margin: 10px 0;
+ padding: 10px;
+}
/* ### tabular box ### */
-#spTable { border-bottom: 1px solid #000; border-spacing: 0; width: 100%; }
-#spTable th { border-bottom: 2px solid currentColor; font-size: 1.2rem; font-weight: 300; }
-html[dir="ltr"] #spTable th { text-align: left; }
-html[dir="rtl"] #spTable th { text-align: right; }
-#spTable th, #spTable td { padding: 10px; }
-#spTable tr:not(:last-child) > td { border-bottom: 1px solid #000; }
+#spTable {
+ border-bottom: 1px solid #000;
+ border-spacing: 0;
+ width: 100%;
+}
+#spTable th {
+ border-bottom: 2px solid currentColor;
+ font-size: 1.2rem;
+ font-weight: 300;
+}
+html[dir="ltr"] #spTable th {
+ text-align: left;
+}
+html[dir="rtl"] #spTable th {
+ text-align: right;
+}
+#spTable th,
+#spTable td {
+ padding: 10px;
+}
+#spTable tr:not(:last-child) > td {
+ border-bottom: 1px solid #000;
+}
/* ### input ### */
-#spInputDisabled { -webkit-text-fill-color: unset; }
+#spInputDisabled {
+ -webkit-text-fill-color: unset;
+}
/* ### button ### */
-#spButton { display: flex; flex-wrap: wrap; gap: 5px; }
-#spButton .inlineList, #spButtonPrimary .inlineList { row-gap: 5px; }
-#spButton .button.disabled, #spButtonPrimary .button.disabled { cursor: default; }
-#spButtonPrimary { margin-top: 20px; }
+#spButton {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 5px;
+}
+#spButton .inlineList,
+#spButtonPrimary .inlineList {
+ row-gap: 5px;
+}
+#spButton .button.disabled,
+#spButtonPrimary .button.disabled {
+ cursor: default;
+}
+#spButtonPrimary {
+ margin-top: 20px;
+}
/* ### editor ### */
-#spEditorContent { border: 1px solid rgb(224, 224, 224); border-top-width: 0; min-height: 100px; padding: 10px; }
-#spEditorTable { border-collapse: collapse; border-spacing: 0; margin: 10px 0; min-width: 60%; }
-#spEditorTable td { border: 1px solid rgb(221, 221, 221); padding: 10px; }
-.spEditorToolbar { border: 1px solid rgb(224, 224, 224); border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0 0; column-gap: 3px; display: flex; padding: 3px; }
-.spEditorToolbarButton { align-items: center; border-radius: var(--wcfBorderRadius); display: flex; height: 30px; justify-content: center; width: 30px; }
-.spEditorToolbarButton.spEditorToolbarButton--active { background-color: #24425F; color: #fff; }
-.spEditorToolbarButton:hover:not(.spEditorToolbarButton--active, [disabled]) { background-color: #3A6D9C; color: #fff; }
-.spEditorToolbarButton[disabled] { color: #A5A5A5; }
-.spEditorToolbarDivider { background-color: rgb(224, 224, 224); display: block; width: 1px; }
+#spEditorContent {
+ border: 1px solid rgb(224, 224, 224);
+ border-top-width: 0;
+ min-height: 100px;
+ padding: 10px;
+}
+#spEditorTable {
+ border-collapse: collapse;
+ border-spacing: 0;
+ margin: 10px 0;
+ min-width: 60%;
+}
+#spEditorTable td {
+ border: 1px solid rgb(221, 221, 221);
+ padding: 10px;
+}
+.spEditorToolbar {
+ border: 1px solid rgb(224, 224, 224);
+ border-radius: var(--wcfBorderRadius) var(--wcfBorderRadius) 0 0;
+ column-gap: 3px;
+ display: flex;
+ padding: 3px;
+}
+.spEditorToolbarButton {
+ align-items: center;
+ border-radius: var(--wcfBorderRadius);
+ display: flex;
+ height: 30px;
+ justify-content: center;
+ width: 30px;
+}
+.spEditorToolbarButton.spEditorToolbarButton--active {
+ background-color: #24425f;
+ color: #fff;
+}
+.spEditorToolbarButton:hover:not(.spEditorToolbarButton--active, [disabled]) {
+ background-color: #3a6d9c;
+ color: #fff;
+}
+.spEditorToolbarButton[disabled] {
+ color: #a5a5a5;
+}
+.spEditorToolbarDivider {
+ background-color: rgb(224, 224, 224);
+ display: block;
+ width: 1px;
+}
/* ### dropdown ### */
-#spDropdown { display: inline-block; float: none; position: relative; visibility: visible; z-index: 10; }
+#spDropdown {
+ display: inline-block;
+ float: none;
+ position: relative;
+ visibility: visible;
+ z-index: 10;
+}
/* ### user menu ### */
-#spUserMenu { border-radius: var(--wcfBorderRadius); box-shadow: rgb(0 0 0 / 20%) 0 12px 28px 0, rgb(0 0 0 / 10%) 0 2px 4px 0; position: relative; margin-bottom: 40px; max-width: 400px; z-index: 1; }
-#spUserMenu a { color: var(--color) !important; }
-#spUserMenu a:hover { color: var(--color-active) !important; }
+#spUserMenu {
+ border-radius: var(--wcfBorderRadius);
+ box-shadow: rgb(0 0 0 / 20%) 0 12px 28px 0, rgb(0 0 0 / 10%) 0 2px 4px 0;
+ position: relative;
+ margin-bottom: 40px;
+ max-width: 400px;
+ z-index: 1;
+}
+#spUserMenu a {
+ color: var(--color) !important;
+}
+#spUserMenu a:hover {
+ color: var(--color-active) !important;
+}
/* ### footer box ### */
-#spFooterBox > .spBoundary { display: flex; justify-content: space-between; padding: 15px 0; }
-#spFooterBox .spFooterBoxItem { flex: 0 0 auto; width: calc(50% - 15px); /* work-around for IE which does not support calc() for flex-basis */ }
-#spFooterBox .spFooterBoxHeadline { font-size: 1.2rem; font-weight: 300; margin-bottom: 10px; }
+#spFooterBox > .spBoundary {
+ display: flex;
+ justify-content: space-between;
+ padding: 15px 0;
+}
+#spFooterBox .spFooterBoxItem {
+ flex: 0 0 auto;
+ width: calc(50% - 15px); /* work-around for IE which does not support calc() for flex-basis */
+}
+#spFooterBox .spFooterBoxHeadline {
+ font-size: 1.2rem;
+ font-weight: 300;
+ margin-bottom: 10px;
+}
/* ### footer ### */
-#spFooter > .spBoundary { padding: 15px 0; }
-#spFooter .spFooterHeadline { font-size: 1.2rem; font-weight: 300; margin-bottom: 10px; }
-#spFooterCopyright > .spBoundary { padding: 15px 0; text-align: center; }
+#spFooter > .spBoundary {
+ padding: 15px 0;
+}
+#spFooter .spFooterHeadline {
+ font-size: 1.2rem;
+ font-weight: 300;
+ margin-bottom: 10px;
+}
+#spFooterCopyright > .spBoundary {
+ padding: 15px 0;
+ text-align: center;
+}
/* ### content sidebar ### */
-#spContent > .spBoundary { display: flex; }
-#spContentWrapper { flex: 1 1 auto; }
-#spContentSidebar { flex: 0 0 250px; }
-html[dir="ltr"] #spContentSidebar { margin-left: 20px; }
-html[dir="rtl"] #spContentSidebar { margin-right: 20px; }
-#spContentSidebar .spContentSidebarBox { padding: 20px; }
-#spContentSidebar .spContentSidebarBox:not(:last-child) { margin-bottom: 20px; }
-#spContentSidebar .spContentSidebarHeadline { font-size: 1.2rem; font-weight: 300; margin-bottom: 10px; }
+#spContent > .spBoundary {
+ display: flex;
+}
+#spContentWrapper {
+ flex: 1 1 auto;
+}
+#spContentSidebar {
+ flex: 0 0 250px;
+}
+html[dir="ltr"] #spContentSidebar {
+ margin-left: 20px;
+}
+html[dir="rtl"] #spContentSidebar {
+ margin-right: 20px;
+}
+#spContentSidebar .spContentSidebarBox {
+ padding: 20px;
+}
+#spContentSidebar .spContentSidebarBox:not(:last-child) {
+ margin-bottom: 20px;
+}
+#spContentSidebar .spContentSidebarHeadline {
+ font-size: 1.2rem;
+ font-weight: 300;
+ margin-bottom: 10px;
+}
/* ### status messages ### */
-#spStatus { display: flex; flex-direction: column; row-gap: 10px; }
-#spStatus > li > div { border: 1px solid #000; border-radius: var(--wcfBorderRadius); padding: 5px 10px; }
+#spStatus {
+ display: flex;
+ flex-direction: column;
+ row-gap: 10px;
+}
+#spStatus > li > div {
+ border: 1px solid #000;
+ border-radius: var(--wcfBorderRadius);
+ padding: 5px 10px;
+}
/* ### wrapper sidebar ### */
-.spSidebarBox { background-color: var(--wcfSidebarBackground); border: 1px solid var(--wcfSidebarBorder); border-radius: var(--wcfBorderRadius); 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; user-select: all; }
-.spVariableInvisible { font-size: 0; }
-.spDescription { color: var(--wcfContentDimmedText); }
-#spSidebar .button { display: block; }
+.spSidebarBox {
+ background-color: var(--wcfSidebarBackground);
+ border: 1px solid var(--wcfSidebarBorder);
+ border-radius: var(--wcfBorderRadius);
+ 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;
+ user-select: all;
+}
+.spVariableInvisible {
+ font-size: 0;
+}
+.spDescription {
+ color: var(--wcfContentDimmedText);
+}
+#spSidebar .button {
+ display: block;
+}
@media (min-width: 769px) {
- #spVariablesWrapper { position: -webkit-sticky; position: sticky; top: 60px; }
+ #spVariablesWrapper {
+ position: -webkit-sticky;
+ position: sticky;
+ top: 60px;
+ }
}
/* ### style region marker ### */
-#stylePreviewRegionMarker { border: 3px solid rgba(255, 0, 0, .4); position: absolute; pointer-events: none; }
-#stylePreviewRegionMarker.forceHide { display: none !important; }
-#stylePreviewRegionMarkerBottom { height: 100%; }
-#stylePreviewRegionMarkerBottom::after, #stylePreviewRegionMarkerBottom::before, #stylePreviewRegionMarker::after, #stylePreviewRegionMarker::before { border: 3px solid red; content: ""; display: block; height: 20px; position: absolute; width: 20px; }
-#stylePreviewRegionMarker::after { border-width: 0 0 3px 3px; right: -20px; top: -20px; }
-#stylePreviewRegionMarker::before { border-width: 0 3px 3px 0; left: -20px; top: -20px; }
-#stylePreviewRegionMarkerBottom::after { border-width: 3px 0 0 3px; right: -20px; bottom: -20px; }
-#stylePreviewRegionMarkerBottom::before { border-width: 3px 3px 0 0; left: -20px; bottom: -20px; }
+#stylePreviewRegionMarker {
+ border: 3px solid rgba(255, 0, 0, 0.4);
+ position: absolute;
+ pointer-events: none;
+}
+#stylePreviewRegionMarker.forceHide {
+ display: none !important;
+}
+#stylePreviewRegionMarkerBottom {
+ height: 100%;
+}
+#stylePreviewRegionMarkerBottom::after,
+#stylePreviewRegionMarkerBottom::before,
+#stylePreviewRegionMarker::after,
+#stylePreviewRegionMarker::before {
+ border: 3px solid red;
+ content: "";
+ display: block;
+ height: 20px;
+ position: absolute;
+ width: 20px;
+}
+#stylePreviewRegionMarker::after {
+ border-width: 0 0 3px 3px;
+ right: -20px;
+ top: -20px;
+}
+#stylePreviewRegionMarker::before {
+ border-width: 0 3px 3px 0;
+ left: -20px;
+ top: -20px;
+}
+#stylePreviewRegionMarkerBottom::after {
+ border-width: 3px 0 0 3px;
+ right: -20px;
+ bottom: -20px;
+}
+#stylePreviewRegionMarkerBottom::before {
+ border-width: 3px 3px 0 0;
+ left: -20px;
+ bottom: -20px;
+}
@media (max-width: 768px) {
- #spSidebar .jsButtonSelectCategoryByClick, #spSidebar .jsButtonToggleColorPalette { display: none; }
+ #spSidebar .jsButtonSelectCategoryByClick,
+ #spSidebar .jsButtonToggleColorPalette {
+ display: none;
+ }
}
@media (min-width: 769px) {
- #spSidebar .jsButtonSelectCategoryByClick { margin-bottom: 5px; }
- #spSidebar .jsButtonToggleColorPalette { margin-bottom: 10px; }
-
+ #spSidebar .jsButtonSelectCategoryByClick {
+ margin-bottom: 5px;
+ }
+ #spSidebar .jsButtonToggleColorPalette {
+ margin-bottom: 10px;
+ }
+
/* ### click on area to select ### */
- #spWindow.spShowRegions { pointer-events: none; z-index: 5; }
- #spWindow.spShowRegions [data-region]:not(#spSubMenu) { position: relative; }
+ #spWindow.spShowRegions {
+ pointer-events: none;
+ z-index: 5;
+ }
+ #spWindow.spShowRegions [data-region]:not(#spSubMenu) {
+ position: relative;
+ }
#spWindow.spShowRegions [data-region]::before {
- background-color: rgba(242, 222, 222, .9);
+ background-color: rgba(242, 222, 222, 0.9);
border: 2px dashed rgb(235, 204, 204);
bottom: 0;
content: "";
position: absolute;
right: 0;
top: 0;
- transition: background-color .12s linear;
+ transition: background-color 0.12s linear;
z-index: 10;
}
-
- #spWindow.spShowRegions [data-region]:hover::before { background-color: rgba(242, 222, 222, 1); }
-
+
+ #spWindow.spShowRegions [data-region]:hover::before {
+ background-color: rgba(242, 222, 222, 1);
+ }
+
#spWindow.spShowRegions [data-region]::after {
color: rgb(169, 68, 66);
content: attr(data-region);
transform: translateX(-50%) translateY(-50%);
z-index: 40;
}
-
- #spWindow.spShowRegions [data-region="wcfHeader"]::after { left: 20px; transform: translateY(-50%); }
- #spWindow.spShowRegions [data-region="wcfContent"]::after { top: 20px; transform: translateX(-50%); }
-
- #spWindow.spShowRegions [data-region] [data-region] { z-index: 20; }
- #spWindow.spShowRegions [data-region] [data-region]::before { z-index: 30; }
- #spWindow.spShowRegions + #spSidebar .jsButtonToggleColorPalette { pointer-events: none; }
- #spWindow.spShowRegions + #spSidebar .spSidebarBox:not(#spSidebarButtons) > ul { opacity: .6; pointer-events: none; }
-
- #spWindow.spColorPalette { display: none; }
- #spWindow.spColorPalette + #spSidebar { flex: 1; }
- #spWindow.spColorPalette + #spSidebar #spVariablesWrapper { position: static !important; column-count: auto; column-width: 300px; }
- #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.spShowRegions [data-region="wcfHeader"]::after {
+ left: 20px;
+ transform: translateY(-50%);
+ }
+ #spWindow.spShowRegions [data-region="wcfContent"]::after {
+ top: 20px;
+ transform: translateX(-50%);
+ }
+
+ #spWindow.spShowRegions [data-region] [data-region] {
+ z-index: 20;
+ }
+ #spWindow.spShowRegions [data-region] [data-region]::before {
+ z-index: 30;
+ }
+ #spWindow.spShowRegions + #spSidebar .jsButtonToggleColorPalette {
+ pointer-events: none;
+ }
+ #spWindow.spShowRegions + #spSidebar .spSidebarBox:not(#spSidebarButtons) > ul {
+ opacity: 0.6;
+ pointer-events: none;
+ }
+
+ #spWindow.spColorPalette {
+ display: none;
+ }
+ #spWindow.spColorPalette + #spSidebar {
+ flex: 1;
+ }
+ #spWindow.spColorPalette + #spSidebar #spVariablesWrapper {
+ position: static !important;
+ column-count: auto;
+ column-width: 300px;
+ }
+ #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;
+ }
}
@media (prefers-color-scheme: dark) {
- #spWindow { background-color: #3b3b3b; border-color: #858585; }
+ #spWindow {
+ background-color: #3b3b3b;
+ border-color: #858585;
+ }
#spWindow.spShowRegions [data-region]::before {
background-color: rgba(93 10 10 / 0.78);
border-color: rgba(193 110 110 / 0.78);
}
- #spWindow.spShowRegions [data-region]:hover::before { background-color: rgba(143 60 60 / 0.78); }
+ #spWindow.spShowRegions [data-region]:hover::before {
+ background-color: rgba(143 60 60 / 0.78);
+ }
#spWindow.spShowRegions [data-region]::after {
- background-color: rgba(0 0 0 / .67);
+ background-color: rgba(0 0 0 / 0.67);
border-radius: var(--wcfBorderRadius);
- color: rgba(255 255 255 / .78);
+ color: rgba(255 255 255 / 0.78);
padding: 1px 4px;
}
-}
\ No newline at end of file
+}
projects / GitHub / WoltLab / WCF.git / commitdiff