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
  45 /* ### tabular box ### */
  46 #spTable { border-bottom: 1px solid #000; border-spacing: 0; width: 100%; }
  47 #spTable th { border-bottom: 2px solid currentColor; font-size: 1.2rem; font-weight: 300; }
  48 html[dir="ltr"] #spTable th { text-align: left; }
  49 html[dir="rtl"] #spTable th { text-align: right; }
  50 #spTable th, #spTable td { padding: 10px; }
  51 #spTable tr:not(:last-child) > td { border-bottom: 1px solid #000; }
  52
  53 /* ### input ### */
  54 #spInputDisabled { -webkit-text-fill-color: unset; }
  55
  56 /* ### button ### */
  57 #spButton .button.disabled, #spButtonPrimary .button.disabled { cursor: default; }
  58 #spButtonPrimary { margin-top: 10px; }
  59
  60 /* ### dropdown ### */
  61 #spDropdown { display: inline-block; float: none; position: relative; visibility: visible; z-index: 10; }
  62
  63 /* ### footer box ### */
  64 #spFooterBox > .spBoundary { display: flex; justify-content: space-between; padding: 15px 0; }
  65 #spFooterBox .spFooterBoxItem { flex: 0 0 auto; width: calc(50% - 15px); /* work-around for IE which does not support calc() for flex-basis */ }
  66 #spFooterBox .spFooterBoxHeadline { font-size: 1.2rem; font-weight: 300; margin-bottom: 10px; }
  67
  68 /* ### footer ### */
  69 #spFooter > .spBoundary { padding: 15px 0; }
  70 #spFooter .spFooterHeadline { font-size: 1.2rem; font-weight: 300; margin-bottom: 10px; }
  71 #spFooterCopyright > .spBoundary { padding: 15px 0; text-align: center; }
  72
  73 /* ### content sidebar ### */
  74 #spContent > .spBoundary { display: flex; }
  75 #spContentWrapper { flex: 1 1 auto; }
  76 #spContentSidebar { flex: 0 0 250px; }
  77 html[dir="ltr"] #spContentSidebar { margin-left: 20px; }
  78 html[dir="rtl"] #spContentSidebar { margin-right: 20px; }
  79 #spContentSidebar .spContentSidebarBox { padding: 20px; }
  80 #spContentSidebar .spContentSidebarBox:not(:last-child) { margin-bottom: 20px; }
  81 #spContentSidebar .spContentSidebarHeadline { font-size: 1.2rem; font-weight: 300; margin-bottom: 10px; }
  82
  83 /* ### status messages ### */
  84 #spStatus { display: flex; flex-wrap: wrap; justify-content: space-between; }
  85 #spStatus > li { flex: 0 0 auto; width: calc(50% - 10px); /* work-around for IE which does not support calc() for flex-basis */ }
  86 #spStatus > li:first-child { margin-bottom: 10px; }
  87 #spStatus > li > div { padding: 5px 10px; }
  88 html[dir="ltr"] #spStatus > li > div { border-left: 5px solid #000; }
  89 html[dir="rtl"] #spStatus > li > div { border-right: 5px solid #000; }
  90
  91 /* ### wrapper sidebar ### */
  92 .spSidebarBox { background-color: rgb(217, 237, 247); margin-bottom: 10px; padding: 10px; }
  93 .spColor { align-items: center; }
  94 .spColor:not(:first-child) { margin-top: 5px; }
  95 .spColorBox { background-color: #fff; border: 1px solid #ccc; padding: 1px; }
  96 html[dir="ltr"] .spColorBox { margin-right: 10px !important; }
  97 html[dir="rtl"] .spColorBox { margin-left: 10px !important; }
  98 .spColorBox > span { display: block; height: 24px; width: 24px; }
  99 .spVariable, .spDescription { display: block; font-size: 12px; }
 100 .spVariable { font-family: Consolas, Courier, monospace; }
 101 @media (min-width: 769px) {
 102         #spVariablesWrapper { position: sticky; top: 60px; }
 103         #spSidebar .button { display: block; }
 104         #spSidebar .jsButtonSelectCategoryByClick { margin-bottom: 5px; }
 105         #spSidebar .jsButtonToggleColorPalette { margin-bottom: 10px; }
 106 }
 107
 108 /* ### style region marker ### */
 109 #stylePreviewRegionMarker { border: 3px solid rgba(255, 0, 0, .4); position: absolute; pointer-events: none; }
 110 #stylePreviewRegionMarkerBottom { height: 100%; }
 111 #stylePreviewRegionMarkerBottom::after, #stylePreviewRegionMarkerBottom::before, #stylePreviewRegionMarker::after, #stylePreviewRegionMarker::before { border: 3px solid red; content: ""; display: block; height: 20px; position: absolute; width: 20px; }
 112 #stylePreviewRegionMarker::after { border-width: 0 0 3px 3px; right: -20px; top: -20px; }
 113 #stylePreviewRegionMarker::before { border-width: 0 3px 3px 0; left: -20px; top: -20px; }
 114 #stylePreviewRegionMarkerBottom::after { border-width: 3px 0 0 3px; right: -20px; bottom: -20px; }
 115 #stylePreviewRegionMarkerBottom::before { border-width: 3px 3px 0 0; left: -20px; bottom: -20px; }
 116
 117 /* ### click on area to select ### */
 118 #spWindow.spShowRegions { pointer-events: none; z-index: 5; }
 119 #spWindow.spShowRegions [data-region]:not(#spSubMenu) { position: relative; }
 120 #spWindow.spShowRegions [data-region]::before {
 121         background-color: rgba(242, 222, 222, .9);
 122         border: 2px dashed rgb(235, 204, 204);
 123         bottom: 0;
 124         content: "";
 125         cursor: pointer;
 126         display: block;
 127         left: 0;
 128         pointer-events: all;
 129         position: absolute;
 130         right: 0;
 131         top: 0;
 132         transition: background-color .12s linear;
 133         z-index: 10;
 134 }
 135
 136 #spWindow.spShowRegions [data-region]:hover::before {
 137         background-color: rgba(242, 222, 222, 1);
 138 }
 139
 140 #spWindow.spShowRegions [data-region]::after {
 141         color: rgb(169, 68, 66);
 142         content: attr(data-region);
 143         font-size: 12px !important;
 144         font-weight: 400 !important;
 145         left: 50%;
 146         position: absolute;
 147         top: 50%;
 148         transform: translateX(-50%) translateY(-50%);
 149         z-index: 40;
 150 }
 151
 152 #spWindow.spShowRegions [data-region] [data-region] {
 153         z-index: 20;
 154 }
 155
 156 #spWindow.spShowRegions [data-region] [data-region]::before {
 157         z-index: 30;
 158 }
 159
 160 #spWindow.spShowRegions + #spSidebar .jsButtonToggleColorPalette { pointer-events: none; }
 161 #spWindow.spShowRegions + #spSidebar .spSidebarBox:not(#spSidebarButtons) > ul { opacity: .6; pointer-events: none; }