From: Alexander Ebert Date: Fri, 23 Jun 2017 12:48:44 +0000 (+0200) Subject: Added toggle mode to display all categories at once X-Git-Tag: 3.1.0_Alpha_1~329 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=27c81d8301d5adacf5bbbb6190a075dc62986eff;p=GitHub%2FWoltLab%2FWCF.git Added toggle mode to display all categories at once See #2314 --- diff --git a/wcfsetup/install/files/acp/style/acpStyleEditor.css b/wcfsetup/install/files/acp/style/acpStyleEditor.css index 139016ee81..875863939c 100644 --- a/wcfsetup/install/files/acp/style/acpStyleEditor.css +++ b/wcfsetup/install/files/acp/style/acpStyleEditor.css @@ -98,15 +98,14 @@ html[dir="rtl"] .spColorBox { margin-left: 10px !important; } .spColorBox > span { display: block; height: 24px; width: 24px; } .spVariable, .spDescription { display: block; font-size: 12px; } .spVariable { font-family: Consolas, Courier, monospace; } +#spSidebar .button { display: block; } @media (min-width: 769px) { #spVariablesWrapper { position: sticky; top: 60px; } - #spSidebar .button { display: block; } - #spSidebar .jsButtonSelectCategoryByClick { margin-bottom: 5px; } - #spSidebar .jsButtonToggleColorPalette { margin-bottom: 10px; } } /* ### 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; } @@ -114,48 +113,55 @@ html[dir="rtl"] .spColorBox { margin-left: 10px !important; } #stylePreviewRegionMarkerBottom::after { border-width: 3px 0 0 3px; right: -20px; bottom: -20px; } #stylePreviewRegionMarkerBottom::before { border-width: 3px 3px 0 0; left: -20px; bottom: -20px; } -/* ### click on area to select ### */ -#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); - border: 2px dashed rgb(235, 204, 204); - bottom: 0; - content: ""; - cursor: pointer; - display: block; - left: 0; - pointer-events: all; - position: absolute; - right: 0; - top: 0; - transition: background-color .12s linear; - z-index: 10; +@media (max-width: 768px) { + #spSidebar .jsButtonSelectCategoryByClick, #spSidebar .jsButtonToggleColorPalette { display: none; } } - -#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); - font-size: 12px !important; - font-weight: 400 !important; - left: 50%; - position: absolute; - top: 50%; - transform: translateX(-50%) translateY(-50%); - z-index: 40; -} - -#spWindow.spShowRegions [data-region] [data-region] { - z-index: 20; -} - -#spWindow.spShowRegions [data-region] [data-region]::before { - z-index: 30; +@media (min-width: 769px) { + #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 [data-region]::before { + background-color: rgba(242, 222, 222, .9); + border: 2px dashed rgb(235, 204, 204); + bottom: 0; + content: ""; + cursor: pointer; + display: block; + left: 0; + pointer-events: all; + position: absolute; + right: 0; + top: 0; + transition: background-color .12s linear; + z-index: 10; + } + + #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); + font-size: 12px !important; + font-weight: 400 !important; + left: 50%; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%); + z-index: 40; + } + + #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 + #spSidebar .jsButtonToggleColorPalette { pointer-events: none; } -#spWindow.spShowRegions + #spSidebar .spSidebarBox:not(#spSidebarButtons) > ul { opacity: .6; pointer-events: none; } diff --git a/wcfsetup/install/files/acp/templates/styleAdd.tpl b/wcfsetup/install/files/acp/templates/styleAdd.tpl index bd99a07b60..c43e955ed1 100644 --- a/wcfsetup/install/files/acp/templates/styleAdd.tpl +++ b/wcfsetup/install/files/acp/templates/styleAdd.tpl @@ -716,11 +716,11 @@
-
+