file-cms.git - Ulrich Hilger Code Repository

ulrich

2021-01-28 81abd5a101a52f7ca9c803af879815dacae028b1

commit \| author \| age
05e9c4	1	/*
U	2	Created on : 24.01.2020, 09:08:45
	3	Author : ulrich
	4	*/
	5
	6
	7	/* aus App-Vorlage */
	8
	9	html, body {
	10	margin: 0;
	11	padding: 0;
	12	height: 100%; /* Anmerkung 2 */
	13	font-size: larger;
	14	font-family: 'Roboto Condensed';
	15	}
	16	body {
	17	min-height: 0; /* Anmerkung 1 */
	18	display: flex;
	19	flex-flow: column;
	20	}
	21	.inhalt {
ffc2b7	22	padding: 0;
U	23	margin: 0;
05e9c4	24	display: flex;
U	25	flex-flow: row;
	26	height: 100%; /* Anmerkung 2 */
	27	min-height: 0; /* Anmerkung 1 */
	28	background-color: #ededed;
	29	overflow: hidden;
	30	}
	31	.nord {
b20b74	32	background-color: #3f3f3f;
05e9c4	33	display: flex;
U	34	flex-flow: row;
74228e	35	height: 1.4em;
05e9c4	36	align-items: center;
ffc2b7	37	margin: 0;
d9cdb1	38	padding: 0;
74228e	39	justify-content:space-between;
U	40	font-size: 1em;
05e9c4	41	}
U	42	.sued {
	43	height: 1.5em;
	44	overflow: hidden;
	45	transition: all 0.3s ease-in;
e3cec2	46	background-color: #fcfce1;
05e9c4	47	}
U	48	.west {
	49	flex-grow: 0;
	50	flex-shrink: 0;
	51	flex-basis: 4em;
ffc2b7	52	background-color: aliceblue;
05e9c4	53	transition: all 0.3s ease-in;
U	54	overflow: hidden;
	55	white-space: nowrap;
	56	}
	57	.ost {
	58	flex-grow: 0;
	59	flex-shrink: 0;
	60	flex-basis: 6em;
	61	transition: all 0.3s ease-in;
	62	background-color: antiquewhite;
	63	overflow: hidden;
	64	}
	65	.zentrum-behaelter {
ffc2b7	66	padding: 0;
U	67	margin: 0;
05e9c4	68	display: flex;
U	69	flex-flow: column;
	70	/* background-color: #eaeaea; */
ffc2b7	71	background-color: white;
05e9c4	72	width: 100%;
U	73	}
	74
	75	.zentrum {
	76	width: 100%;
	77	height: 100%;
ffc2b7	78	padding: 0;
U	79	margin: 0;
05e9c4	80	overflow-x: hidden;
U	81	overflow-y: auto;
	82	-webkit-overflow-scrolling: touch;
	83	}
	84
	85	.zentraler-inhalt {
ffc2b7	86	padding: 0;
U	87	margin: 0;
	88	background-color: white;
05e9c4	89	}
U	90
6648a8	91	.zentrum-liste {
ffc2b7	92	padding: 0;
U	93	margin: 0;
6648a8	94	display: flex;
U	95	flex-flow: row;
	96	flex-wrap: wrap;
	97	}
	98
05e9c4	99	/*
U	100	Anmerkungen:
	101	1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
	102	http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
	103	2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
	104	immer ueber das gesamte Browserfenster ausdehnt.
	105	*/
	106
	107	.app-titel {
ffc2b7	108	margin: 0 0 0 0.6em;
U	109	padding: 0;
05e9c4	110	color: white;
ffc2b7	111	font-size: 1em;
05e9c4	112	}
U	113
	114	.pointer-cursor {
	115	cursor: pointer;
	116	}
	117
ffc2b7	118	/* file-cms stile */
U	119
b65512	120	.top-btn-area {
U	121	/margin-left: auto;/
	122	margin: 0 1em 0 2em;
	123	}
	124
	125	.top-btn {
	126	margin: 0;
	127	padding: 0 0.2em 0 0.2em;
74228e	128	height: 1.3em;
U	129	line-height: 1em;
b65512	130	text-align: center;
U	131	font-size: large;
	132	background-color: white;
	133	/* width: 1em; */
	134	}
	135
d61a61	136	.breadcrumb {
b20b74	137	background-color: #f2f2f2;
d61a61	138	padding: 0.2em;
U	139	font-size: medium;
ffc2b7	140	}
U	141
	142	.breadcrumb a {
	143	text-decoration: none;
	144	color: #0033ff;
d61a61	145	}
U	146
4f01b8	147	.pull-right {
U	148	float: right;
	149	}
	150
05e9c4	151	.dialog {
U	152	position: relative;
	153	transition: all 0.3s ease-in;
	154	}
	155
	156	.dlg-behaelter {
	157	line-height: 1.6;
	158	padding: 0.4em;
39e714	159	font-size: 1em;
05e9c4	160	}
U	161
	162	.dlg-info {
39e714	163	/* background-color: #f5fbe3; */
05e9c4	164	padding: 0.4em;
39e714	165	font-size: 0.9em;
05e9c4	166	}
U	167
	168	/*
	169	Close Button
	170
	171	<div>
	172	<span class="close-btn">✖</span>
	173	</div>
	174	*/
	175
	176	.close-btn {
	177	position: absolute;
	178	top: 0px;
	179	right: 0.4em;
	180	margin: 0;
	181	padding: 0;
	182	font-size: 1.3em;
	183	color: #b8b8b8;
	184	}
	185
e3cec2	186	.close-btn-fuss {
U	187	/*position: absolute;
	188	top: 0px;
	189	right: 0.4em;*/
	190	float: right;
	191	margin: 0;
	192	padding: 0;
	193	font-size: 1.3em;
	194	color: #b8b8b8;
	195	}
	196
122cf8	197	.system-out {
U	198	height: 8em;
	199	overflow-y: auto;
	200	}
	201
ffc2b7	202	.figure {
U	203	padding: 0.2em;
74228e	204	margin: 0.2em 0.5em 0.2em 0;
U	205	overflow-wrap: break-word;
ffc2b7	206	}
U	207
	208	.datei-figure {
74228e	209	width: 2.5em;
ffc2b7	210	cursor: pointer;
U	211	font-size: 1.6em;
	212	text-align: center;
	213	/background-color: blanchedalmond;/
	214	}
	215
	216	.figure-caption {
	217	font-size: medium;
	218	/background-color: ivory;/
	219	text-align: center;
	220	}
	221
39e714	222	.datei-zeile {
U	223	font-size: smaller;
	224	cursor: pointer;
	225	}
	226
	227	.datei-zeile:hover {
	228	background-color: #e5e5e5;
	229	}
	230
	231	.datei-zeile-ueberschrift {
	232	font-size: smaller;
	233	}
	234
ffc2b7	235	.datei-gewaehlt {
U	236	background-color: lightblue;
	237	}
	238
	239	.ordner {
	240	color: navajowhite;
	241	}
	242
	243	.datei {
	244	color: lightgray;
	245	}
	246
6648a8	247	.datei-gewaehlt {
U	248	background-color: lightblue;
	249	}
	250
	251
05e9c4	252
b20b74	253	/* Stile Code-Editor */
U	254
	255	/* der div-Behaelter fuer die Textarea */
	256	.codeeditor-space {
	257	/*
	258	width: 100%;
	259	height: 100%;
	260	border: 1px solid lightgrey;
	261	*/
	262	flex:1 1 auto;
	263	margin-top:0;
	264	height:100%;
	265	position:relative;
	266	}
	267
	268	/* Textarea fuer CodeMirror */
	269	/*
	270	.codeeditor {
	271	height: 100%;
	272	}
	273	*/
	274	/* die Codemirror-Instanz selbst */
	275	.CodeMirror {
	276	position:absolute;
	277	top:0;
	278	bottom:0;
	279	left:0;
	280	right:0;
	281	height: 100%;
	282	}
	283
	284	/* Stile MCE-Editor */
	285
	286	.mce-editor {
	287	width: 100%;
	288	height: 100%;
	289	}
	290	.text-editor {
	291	width: 100%;
	292	height: 100%;
	293	}
	294
	295
	296
ffc2b7	297
U	298	/* für app-menu */
05e9c4	299
U	300	.app-menu {
	301	margin: 0;
	302	padding: 0;
b20b74	303	font-size: 0.8em;
05e9c4	304	}
U	305	.app-menu-kopf {
	306	text-align: center;
ffc2b7	307	font-size: 0.9em;
05e9c4	308	}
U	309	ul.app-menu {
	310	list-style: none;
	311	}
	312	.app-menu-item-back {
ffc2b7	313	margin-bottom: 0.4em;
05e9c4	314	cursor: pointer;
U	315	}
8cab6e	316	.app-menu-item-back:hover {
U	317	background-color: #e5e5e5;
	318	}
05e9c4	319	.app-menu-item {
U	320	text-align: right;
	321	cursor: pointer;
ffc2b7	322	margin-bottom: 0.1em;
05e9c4	323	}
b20b74	324	.app-menu-item:hover {
U	325	background-color: #e5e5e5;
	326	}
05e9c4	327	.app-menu-item-submark {
U	328	color: transparent;
	329	cursor: pointer;
	330	}
	331	/*
	332	Das div-Element, das das Menue aufnimmt erhaelt
	333	die Klasse app-menu-content
	334	*/
	335	.app-menu-content {
	336	overflow: hidden;
	337	}
	338
	339	/* für Hamburger Icon */
	340
	341	.hamburger {
	342	display: inline-block;
	343	cursor: pointer;
	344	transition-property: opacity, filter;
	345	transition-duration: 0.15s;
	346	transition-timing-function: linear;
	347	font: inherit;
	348	color: inherit;
	349	text-transform: none;
	350	background-color: transparent;
	351	border: 0;
	352	margin: 0;
ffc2b7	353	padding: 0 0 0 0.3em;
05e9c4	354	overflow: visible;
U	355	}
	356
	357	.hamburger:hover {
	358	opacity: 0.7;
	359	}
	360
	361	.hamburger-box {
	362	width: 40px;
ffc2b7	363	height: 24px; /* war 24px */
05e9c4	364	display: inline-block;
U	365	position: relative;
	366	}
	367
	368	.hamburger-inner {
	369	display: block;
ffc2b7	370	/* top: 50%; */
05e9c4	371	margin: 0;
ffc2b7	372	padding: 0;
05e9c4	373	}
U	374
	375	.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	376	width: 30px;
	377	height: 4px;
	378	background-color: white; /* #000; */
	379	border-radius: 4px;
	380	position: absolute;
	381	transition-property: transform;
	382	transition-duration: 0.15s;
	383	transition-timing-function: ease;
	384	}
	385
	386	.hamburger-inner::before, .hamburger-inner::after {
	387	content: "";
	388	display: block;
	389	}
	390
	391	.hamburger-inner::before {
	392	top: -10px;
	393	}
	394
	395	.hamburger-inner::after {
	396	bottom: -10px;
	397	}
	398
	399	/*
	400	* Elastic
	401	*/
	402	.hamburger--elastic .hamburger-inner {
	403	top: 2px;
	404	transition-duration: 0.275s;
	405	transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	406	}
	407
	408	.hamburger--elastic .hamburger-inner::before {
	409	top: 10px;
	410	transition: opacity 0.125s 0.275s ease;
	411	}
	412
	413	.hamburger--elastic .hamburger-inner::after {
	414	top: 20px;
	415	transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	416	}
	417
	418	.hamburger--elastic.is-active .hamburger-inner {
	419	transform: translate3d(0, 10px, 0) rotate(135deg);
	420	transition-delay: 0.075s;
	421	}
	422
	423	.hamburger--elastic.is-active .hamburger-inner::before {
	424	transition-delay: 0s;
	425	opacity: 0;
	426	}
	427
	428	.hamburger--elastic.is-active .hamburger-inner::after {
	429	transform: translate3d(0, -20px, 0) rotate(-270deg);
	430	transition-delay: 0.075s;
	431	}
	432
d9cdb1	433	/* Fonts */
U	434
	435	@font-face {
	436	font-family: 'Roboto Condensed';
05d76e	437	src: url('/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype');
d9cdb1	438	font-weight: normal;
U	439	font-style: normal;
	440	}
	441
05e9c4	442	/* Font für Piktogramme mit Fontello aus FontAwesome erzeugt */
U	443
	444	@font-face {
	445	font-family: 'pikto';
f32042	446	src: url('font/pikto.ttf?22834745') format('truetype');
05e9c4	447	font-weight: normal;
U	448	font-style: normal;
	449	}
f32042	450	/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
U	451	/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
	452	/*
	453	@media screen and (-webkit-min-device-pixel-ratio:0) {
	454	@font-face {
	455	font-family: 'pikto';
	456	src: url('../font/pikto.svg?22834745#pikto') format('svg');
	457	}
	458	}
	459	*/
05e9c4	460
U	461	[class^="icon-"]:before, [class*=" icon-"]:before {
	462	font-family: "pikto";
	463	font-style: normal;
	464	font-weight: normal;
f32042	465	speak: never;
05e9c4	466
U	467	display: inline-block;
	468	text-decoration: inherit;
	469	width: 1em;
	470	margin-right: .2em;
	471	text-align: center;
	472	/* opacity: .8; */
	473
	474	/* For safety - reset parent styles, that can break glyph codes*/
	475	font-variant: normal;
	476	text-transform: none;
	477
	478	/* fix buttons height, for twitter bootstrap */
	479	line-height: 1em;
	480
	481	/* Animation center compensation - margins should be symmetric */
	482	/* remove if not needed */
	483	margin-left: .2em;
	484
	485	/* you can be more comfortable with increased icons size */
	486	/* font-size: 120%; */
	487
	488	/* Font smoothing. That was taken from TWBS */
	489	-webkit-font-smoothing: antialiased;
	490	-moz-osx-font-smoothing: grayscale;
	491
	492	/* Uncomment for 3D effect */
	493	/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
	494	}
	495
f32042	496	.icon-cancel:before { content: '\e800'; } /* '' */
U	497	.icon-th-large:before { content: '\e801'; } /* '' */
	498	.icon-th-list:before { content: '\e802'; } /* '' */
	499	.icon-folder:before { content: '\e803'; } /* '' */
	500	.icon-folder-open:before { content: '\e804'; } /* '' */
	501	.icon-doc:before { content: '\e805'; } /* '' */
	502	.icon-trash-empty:before { content: '\e806'; } /* '' */
	503	.icon-pencil:before { content: '\e807'; } /* '' */
	504	.icon-docs:before { content: '\f0c5'; } /* '' */
	505	.icon-menu:before { content: '\f0c9'; } /* '' */
05e9c4	506	.icon-doc-text:before { content: '\f0f6'; } /* '' */
U	507	.icon-folder-empty:before { content: '\f114'; } /* '' */
	508	.icon-folder-open-empty:before { content: '\f115'; } /* '' */
	509	.icon-doc-inv:before { content: '\f15b'; } /* '' */
ebc1f3	510	.icon-doc-text-inv:before { content: '\f15c'; } /* '' */
f32042	511	.icon-trash:before { content: '\f1f8'; } /* '' */
ebc1f3	512
U	513	/* von Skeleton */
	514
	515	/* Buttons
	516	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	517	.button,
	518	button,
	519	input[type="submit"],
	520	input[type="reset"],
	521	input[type="button"] {
	522	display: inline-block;
	523	height: 38px;
	524	padding: 0 30px;
	525	color: #555;
	526	text-align: center;
	527	font-size: 11px;
	528	font-weight: 600;
	529	line-height: 38px;
	530	letter-spacing: .1rem;
	531	text-transform: uppercase;
	532	text-decoration: none;
	533	white-space: nowrap;
	534	background-color: transparent;
	535	border-radius: 4px;
	536	border: 1px solid #bbb;
	537	cursor: pointer;
	538	box-sizing: border-box; }
	539	.button:hover,
	540	button:hover,
	541	input[type="submit"]:hover,
	542	input[type="reset"]:hover,
	543	input[type="button"]:hover,
	544	.button:focus,
	545	button:focus,
	546	input[type="submit"]:focus,
	547	input[type="reset"]:focus,
	548	input[type="button"]:focus {
	549	color: #333;
	550	border-color: #888;
	551	outline: 0; }
	552	.button.button-primary,
	553	button.button-primary,
	554	input[type="submit"].button-primary,
	555	input[type="reset"].button-primary,
	556	input[type="button"].button-primary {
	557	color: #FFF;
	558	background-color: #33C3F0;
	559	border-color: #33C3F0; }
	560	.button.button-primary:hover,
	561	button.button-primary:hover,
	562	input[type="submit"].button-primary:hover,
	563	input[type="reset"].button-primary:hover,
	564	input[type="button"].button-primary:hover,
	565	.button.button-primary:focus,
	566	button.button-primary:focus,
	567	input[type="submit"].button-primary:focus,
	568	input[type="reset"].button-primary:focus,
	569	input[type="button"].button-primary:focus {
	570	color: #FFF;
	571	background-color: #1EAEDB;
	572	border-color: #1EAEDB; }
	573
	574
	575	/* Forms
	576	–––––––––––––––––––––––––––––––––––––––––––––––––– */
	577	input[type="email"],
	578	input[type="number"],
	579	input[type="search"],
	580	input[type="text"],
	581	input[type="tel"],
	582	input[type="url"],
	583	input[type="password"],
	584	textarea,
	585	select {
	586	height: 38px;
	587	padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
	588	background-color: #fff;
	589	border: 1px solid #D1D1D1;
	590	border-radius: 4px;
	591	box-shadow: none;
	592	box-sizing: border-box; }
	593	/* Removes awkward default styles on some inputs for iOS */
	594	input[type="email"],
	595	input[type="number"],
	596	input[type="search"],
	597	input[type="text"],
	598	input[type="tel"],
	599	input[type="url"],
	600	input[type="password"],
	601	textarea {
	602	-webkit-appearance: none;
	603	-moz-appearance: none;
	604	appearance: none; }
	605	textarea {
	606	min-height: 65px;
	607	padding-top: 6px;
	608	padding-bottom: 6px; }
	609	input[type="email"]:focus,
	610	input[type="number"]:focus,
	611	input[type="search"]:focus,
	612	input[type="text"]:focus,
	613	input[type="tel"]:focus,
	614	input[type="url"]:focus,
	615	input[type="password"]:focus,
	616	textarea:focus,
	617	select:focus {
	618	border: 1px solid #33C3F0;
	619	outline: 0; }
	620	label,
	621	legend {
	622	display: block;
	623	margin-bottom: .5rem;
	624	font-weight: 600; }
	625	fieldset {
	626	padding: 0;
	627	border-width: 0; }
	628	input[type="checkbox"],
	629	input[type="radio"] {
	630	display: inline; }
	631	label > .label-body {
	632	display: inline-block;
	633	margin-left: .5rem;
	634	font-weight: normal; }
	635