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
; }
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
; }
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; }
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; }
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; }
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; }
55 #spInputDisabled { -webkit-text-fill-color: unset
; }
58 #spButton .button
.disabled
, #spButtonPrimary
.button
.disabled
{ cursor: default
; }
59 #spButtonPrimary { margin-top: 10px; }
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; }
66 /* ### dropdown ### */
67 #spDropdown { display: inline-block
; float: none
; position: relative
; visibility: visible
; z-index: 10; }
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; }
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
; }
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; }
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; }
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; }
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; }
127 @media (max-width: 768px) {
128 #spSidebar .jsButtonSelectCategoryByClick
, #spSidebar
.jsButtonToggleColorPalette
{ display: none
; }
130 @media (min-width: 769px) {
131 #spSidebar .jsButtonSelectCategoryByClick
{ margin-bottom: 5px; }
132 #spSidebar .jsButtonToggleColorPalette
{ margin-bottom: 10px; }
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);
149 transition: background-color
.12s linear
;
153 #spWindow.spShowRegions
[data-region
]:hover::before
{ background-color: rgba
(242, 222, 222, 1); }
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
;
163 transform: translateX
(-50%) translateY
(-50%);
167 #spWindow.spShowRegions
[data-region
="wcfHeader"]::after
{ left: 20px; transform: translateY
(-50%); }
168 #spWindow.spShowRegions
[data-region
="wcfContent"]::after
{ top: 20px; transform: translateX
(-50%); }
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
; }
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
; }