[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / acp / style / acpStyleEditor.css

/* ### wrapper ### */
#spWrapper { display: flex; }
#spWindow { background-color: #eee; border: 1px solid rgb(52, 152, 219); flex: 1 1 auto; 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: 40px; }
#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; }
#spHeaderPanel ol.inlineList > li.active > a::after { content: "\f107"; display: inline-block; font-family: FontAwesome; }
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 { box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2); 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; }

/* ### 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; }

/* ### 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; }

/* ### input ### */
#spInputDisabled { -webkit-text-fill-color: unset; }

/* ### button ### */
#spButton .button.disabled, #spButtonPrimary .button.disabled { cursor: default; }
#spButtonPrimary { margin-top: 10px; }

/* ### editor ### */
#spEditorContent { border: 1px solid rgb(224, 224, 224); border-top-width: 0; height: 100px; }

/* ### dropdown ### */
#spDropdown { display: inline-block; float: none; position: relative; visibility: visible; z-index: 10; }

/* ### 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; }

/* ### 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; }

/* ### 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; }

/* ### status messages ### */
#spStatus { display: flex; flex-wrap: wrap; justify-content: space-between; }
#spStatus > li { flex: 0 0 auto; width: calc(50% - 10px); /* work-around for IE which does not support calc() for flex-basis */ }
#spStatus > li:first-child { margin-bottom: 10px; }
#spStatus > li > div { padding: 5px 10px; }
html[dir="ltr"] #spStatus > li > div { border-left: 5px solid #000; }
html[dir="rtl"] #spStatus > li > div { border-right: 5px solid #000; }

/* ### wrapper sidebar ### */
.spSidebarBox { background-color: rgb(217, 237, 247); margin-bottom: 10px; padding: 10px; }
.spColor { align-items: center; }
.spColor:not(:first-child) { margin-top: 5px; }
.spColorBox { background-color: #fff; border: 1px solid #ccc; padding: 1px; }
html[dir="ltr"] .spColorBox { margin-right: 10px !important; }
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; }
.spApiVersion { color: #E65100; font-family: Consolas, Courier, monospace; font-size: 12px; }
#spSidebar .button { display: block; }
@media (min-width: 769px) {
	#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; }

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