wcfsetup/install/files/acp/style/acpStyleEditor.css

   1 /* ### wrapper ### */
   2 #spWrapper { display: flex; }
   3 #spWindow { background-color: #eee; border: 1px solid rgb(52, 152, 219); flex: 1 1 auto; padding: 1px; }
   4 html[dir="ltr"] #spWindow { margin-right: 40px; }
   5 html[dir="rtl"] #spWindow { margin-left: 40px; }
   6 #spSidebar { flex: 0 0 300px; }
   7 .spBoundary { margin: 0 40px; }
   8 .spInlineWrapper { display: inline-block; }
   9
  10 /* ### header ### */
  11 #spHeader > .spBoundary { display: flex; flex-wrap: wrap; padding: 30px 0; }
  12 #spLogo { flex: 0 0 50%; }
  13 #spLogo > img { height: 40px; }
  14 #spSearch { flex: 0 0 50%; }
  15 #spSearchBox { border-width: 0; }
  16 #spUser { flex: 0 0 50%; }
  17 #spLogo, #spSearch { align-items: center; display: flex; }
  18 #spSearch, #spUser { justify-content: flex-end; }
  19
  20 /* ### menu ### */
  21 html[dir="ltr"] #spHeaderPanel ol.inlineList > li { margin-right: 0; }
  22 html[dir="rtl"] #spHeaderPanel ol.inlineList > li { margin-left: 0; }
  23 #spHeaderPanel ol.inlineList > li > a { align-items: center; display: flex; font-size: 14px; font-weight: 400; height: 50px; padding: 0 15px; }
  24 #spHeaderPanel ol.inlineList > li.active > a::after { content: "\f107"; display: inline-block; font-family: FontAwesome; }
  25 html[dir="ltr"] #spHeaderPanel ol.inlineList > li.active > a::after { margin-left: 5px; }
  26 html[dir="rtl"] #spHeaderPanel ol.inlineList > li.active > a::after { margin-right: 5px; }
  27 #spHeaderPanel ol.inlineList > li.active { position: relative; }
  28 #spSubMenu { box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2); padding: 3px 0; position: absolute; }
  29 #spSubMenu > li > a { display: block; padding: 5px 20px; white-space: nowrap; width: 120px; }
  30
  31 /* ### navigation ### */
  32 #spNavigation { font-size: 11px; padding: 7px 0; }
  33 #spNavigation li:first-child { position: relative; }
  34 #spNavigation li:first-child::after { content: "/"; display: inline-block; }
  35 html[dir="ltr"] #spNavigation li:first-child::after { margin-left: 5px; }
  36 html[dir="rtl"] #spNavigation li:first-child::after { margin-right: 5px; }
  37
  38 /* ### content ### */
  39 #spContent { padding: 20px 0; }
  40 .spHeadline { border-bottom: 1px solid #000; font-size: 1.2rem; font-weight: 300; margin: 20px 0; padding-bottom: 5px; }
  41 .spHeadline:first-child { margin-top: 10px; }
  42 #spContentBorder { border-bottom: 1px solid #000; margin: 10px 0; }
  43 #spContentBorderInner { border-bottom: 1px solid #000; margin: 10px 0; }
  44 .spContentContainer { background-color: #fff; border: 1px solid #000; margin: 10px 0; padding: 10px; }
  45
  46 /* ### tabular box ### */
  47 #spTable { border-bottom: 1px solid #000; border-spacing: 0; width: 100%; }
  48 #spTable th { border-bottom: 2px solid currentColor; font-size: 1.2rem; font-weight: 300; }
  49 html[dir="ltr"] #spTable th { text-align: left; }
  50 html[dir="rtl"] #spTable th { text-align: right; }
  51 #spTable th, #spTable td { padding: 10px; }
  52 #spTable tr:not(:last-child) > td { border-bottom: 1px solid #000; }
  53
  54 /* ### input ### */
  55 #spInputDisabled { -webkit-text-fill-color: unset; }
  56
  57 /* ### button ### */
  58 #spButton .button.disabled, #spButtonPrimary .button.disabled { cursor: default; }
  59 #spButtonPrimary { margin-top: 10px; }
  60
  61 /* ### editor ### */
  62 #spEditorContent { border: 1px solid rgb(224, 224, 224); border-top-width: 0; min-height: 100px; padding: 10px; }
  63 #spEditorTable { border-collapse: collapse; border-spacing: 0; margin: 10px 0; min-width: 60%; }
  64 #spEditorTable td { border: 1px solid rgb(221, 221, 221); padding: 10px; }
  65
  66 /* ### dropdown ### */
  67 #spDropdown { display: inline-block; float: none; position: relative; visibility: visible; z-index: 10; }
  68
  69 /* ### footer box ### */
  70 #spFooterBox > .spBoundary { display: flex; justify-content: space-between; padding: 15px 0; }
  71 #spFooterBox .spFooterBoxItem { flex: 0 0 auto; width: calc(50% - 15px); /* work-around for IE which does not support calc() for flex-basis */ }
  72 #spFooterBox .spFooterBoxHeadline { font-size: 1.2rem; font-weight: 300; margin-bottom: 10px; }
  73
  74 /* ### footer ### */
  75 #spFooter > .spBoundary { padding: 15px 0; }
  76 #spFooter .spFooterHeadline { font-size: 1.2rem; font-weight: 300; margin-bottom: 10px; }
  77 #spFooterCopyright > .spBoundary { padding: 15px 0; text-align: center; }
  78
  79 /* ### content sidebar ### */
  80 #spContent > .spBoundary { display: flex; }
  81 #spContentWrapper { flex: 1 1 auto; }
  82 #spContentSidebar { flex: 0 0 250px; }
  83 html[dir="ltr"] #spContentSidebar { margin-left: 20px; }
  84 html[dir="rtl"] #spContentSidebar { margin-right: 20px; }
  85 #spContentSidebar .spContentSidebarBox { padding: 20px; }
  86 #spContentSidebar .spContentSidebarBox:not(:last-child) { margin-bottom: 20px; }
  87 #spContentSidebar .spContentSidebarHeadline { font-size: 1.2rem; font-weight: 300; margin-bottom: 10px; }
  88
  89 /* ### status messages ### */
  90 #spStatus { display: flex; flex-wrap: wrap; justify-content: space-between; }
  91 #spStatus > li { flex: 0 0 auto; width: calc(50% - 10px); /* work-around for IE which does not support calc() for flex-basis */ }
  92 #spStatus > li:first-child { margin-bottom: 10px; }
  93 #spStatus > li > div { padding: 5px 10px; }
  94 html[dir="ltr"] #spStatus > li > div { border-left: 5px solid #000; }
  95 html[dir="rtl"] #spStatus > li > div { border-right: 5px solid #000; }
  96
  97 /* ### wrapper sidebar ### */
  98 .spSidebarBox { background-color: rgb(217, 237, 247); margin-bottom: 10px; padding: 10px; }
  99 .spColor { align-items: center; }
 100 .spColor:not(:first-child) { margin-top: 5px; }
 101 html:not(.touch) .spColor:hover .spColorBox { border: 2px dashed #6e7792; left: -2px; padding: 2px; position: relative; }
 102 .spColorBox { background-color: #fff; border: 1px solid #ccc; padding: 1px; }
 103 html[dir="ltr"] .spColorBox { margin-right: 10px !important; }
 104 html[dir="ltr"]:not(.touch) .spColor:hover .spColorBox { margin-right: 6px !important; }
 105 html[dir="rtl"] .spColorBox { margin-left: 10px !important; }
 106 html[dir="rtl"]:not(.touch) .spColor:hover .spColorBox { margin-left: 6px !important; }
 107 html:not(.touch) .spColorBox { cursor: pointer; }
 108 .spColorBox > span { display: block; height: 24px; width: 24px; }
 109 .spVariable, .spDescription { display: block; font-size: 12px; }
 110 .spVariable { font-family: Consolas, Courier, monospace; }
 111 .spApiVersion { color: #E65100; font-family: Consolas, Courier, monospace; font-size: 12px; }
 112 #spSidebar .button { display: block; }
 113 @media (min-width: 769px) {
 114         #spVariablesWrapper { position: -webkit-sticky; position: sticky; top: 60px; }
 115 }
 116
 117 /* ### style region marker ### */
 118 #stylePreviewRegionMarker { border: 3px solid rgba(255, 0, 0, .4); position: absolute; pointer-events: none; }
 119 #stylePreviewRegionMarker.forceHide { display: none !important; }
 120 #stylePreviewRegionMarkerBottom { height: 100%; }
 121 #stylePreviewRegionMarkerBottom::after, #stylePreviewRegionMarkerBottom::before, #stylePreviewRegionMarker::after, #stylePreviewRegionMarker::before { border: 3px solid red; content: ""; display: block; height: 20px; position: absolute; width: 20px; }
 122 #stylePreviewRegionMarker::after { border-width: 0 0 3px 3px; right: -20px; top: -20px; }
 123 #stylePreviewRegionMarker::before { border-width: 0 3px 3px 0; left: -20px; top: -20px; }
 124 #stylePreviewRegionMarkerBottom::after { border-width: 3px 0 0 3px; right: -20px; bottom: -20px; }
 125 #stylePreviewRegionMarkerBottom::before { border-width: 3px 3px 0 0; left: -20px; bottom: -20px; }
 126
 127 @media (max-width: 768px) {
 128         #spSidebar .jsButtonSelectCategoryByClick, #spSidebar .jsButtonToggleColorPalette { display: none; }
 129 }
 130 @media (min-width: 769px) {
 131         #spSidebar .jsButtonSelectCategoryByClick { margin-bottom: 5px; }
 132         #spSidebar .jsButtonToggleColorPalette { margin-bottom: 10px; }
 133
 134         /* ### click on area to select ### */
 135         #spWindow.spShowRegions { pointer-events: none; z-index: 5; }
 136         #spWindow.spShowRegions [data-region]:not(#spSubMenu) { position: relative; }
 137         #spWindow.spShowRegions [data-region]::before {
 138                 background-color: rgba(242, 222, 222, .9);
 139                 border: 2px dashed rgb(235, 204, 204);
 140                 bottom: 0;
 141                 content: "";
 142                 cursor: pointer;
 143                 display: block;
 144                 left: 0;
 145                 pointer-events: all;
 146                 position: absolute;
 147                 right: 0;
 148                 top: 0;
 149                 transition: background-color .12s linear;
 150                 z-index: 10;
 151         }
 152
 153         #spWindow.spShowRegions [data-region]:hover::before { background-color: rgba(242, 222, 222, 1); }
 154
 155         #spWindow.spShowRegions [data-region]::after {
 156                 color: rgb(169, 68, 66);
 157                 content: attr(data-region);
 158                 font-size: 12px !important;
 159                 font-weight: 400 !important;
 160                 left: 50%;
 161                 position: absolute;
 162                 top: 50%;
 163                 transform: translateX(-50%) translateY(-50%);
 164                 z-index: 40;
 165         }
 166
 167         #spWindow.spShowRegions [data-region="wcfHeader"]::after { left: 20px; transform: translateY(-50%); }
 168         #spWindow.spShowRegions [data-region="wcfContent"]::after { top: 20px; transform: translateX(-50%); }
 169
 170         #spWindow.spShowRegions [data-region] [data-region] { z-index: 20; }
 171         #spWindow.spShowRegions [data-region] [data-region]::before { z-index: 30; }
 172         #spWindow.spShowRegions + #spSidebar .jsButtonToggleColorPalette { pointer-events: none; }
 173         #spWindow.spShowRegions + #spSidebar .spSidebarBox:not(#spSidebarButtons) > ul { opacity: .6; pointer-events: none; }
 174
 175         #spWindow.spColorPalette { display: none; }
 176         #spWindow.spColorPalette + #spSidebar { flex: 1; }
 177         #spWindow.spColorPalette + #spSidebar #spVariablesWrapper { position: static !important; column-count: auto; column-width: 300px; }
 178         #spWindow.spColorPalette + #spSidebar .spSidebarBox { break-inside: avoid; display: block !important; page-break-inside: avoid; position: relative; }
 179         #spWindow.spColorPalette + #spSidebar .spSidebarBox[data-category="none"], #spWindow.spColorPalette + #spSidebar .spSidebarBox.spSidebarBoxCategorySelection { display: none !important; }
 180         #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; }
 181         #spWindow.spColorPalette + #spSidebar .spSidebarBox[data-category="apiVersion"]::before { display: none; }
 182 }