WebSVN – oidplus – Blame – /trunk/plugins/viathinksoft/design/ironbase/oidplus_base.css

Rev	Author	Line No.	Line
635	daniel-mar	1	/*
		2	* OIDplus 2.0
1075	daniel-mar	3	* Copyright 2019 - 2023 Daniel Marschall, ViaThinkSoft
635	daniel-mar	4	*
		5	* Licensed under the Apache License, Version 2.0 (the "License");
		6	* you may not use this file except in compliance with the License.
		7	* You may obtain a copy of the License at
		8	*
		9	* http://www.apache.org/licenses/LICENSE-2.0
		10	*
		11	* Unless required by applicable law or agreed to in writing, software
		12	* distributed under the License is distributed on an "AS IS" BASIS,
		13	* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
		14	* See the License for the specific language governing permissions and
		15	* limitations under the License.
		16	*/
		17
		18	/*************************************************************************************
		19	ATTENTION:
		20	*************************************************************************************
		21	Please do NOT edit this file, since a software update will override
		22	your changes.
		23	To do changes to the design, you have following possibilities:
		24	- If you just want to change colors, then the color plugin in the admin area
		25	could an option for you.
		26	- Create userdata/styles/oidplus_add.css (it will be placed after this file),
		27	and use the "!important" statements to override style definitions.
		28	- You can completely REPLACE oidplus_base.css by
		29	creating userdata/styles/oidplus_base.css . This is very dangerous, because
		30	you need to regularly check if the official oidplus_base.css gets changed or
		31	extended, and you need to apply the changes according to the master file.
		32	*************************************************************************************/
		33
		34	/* Logo */
		35
		36	@media only screen and (min-width: 801px) {
		37	/* Desktop */
		38	#system_title_logo {
800	daniel-mar	39	background-image: url(img/logo.png);
635	daniel-mar	40	background-position: left;
		41	background-repeat: no-repeat;
		42	background-size: 45px 45px;
		43	position:absolute;
		44	top:0px;
		45	left:0px;
		46	width:50px;
		47	height:50px;
		48	margin-left:5px;
		49	}
		50
		51	#system_title_1 {
		52	padding-left: 50px;
		53	}
		54
		55	#system_title_2 {
		56	padding-left: 50px;
		57	}
		58	}
		59
		60	/* Link colors */
		61
1075	daniel-mar	62	#content a:not(.btn):link {
635	daniel-mar	63	color:#FF5500;
		64	}
		65
1075	daniel-mar	66	#content a:not(.btn):visited {
635	daniel-mar	67	color:#CC5500;
		68	}
		69
1075	daniel-mar	70	#content a:not(.btn):hover {
635	daniel-mar	71	color:#FFAA00;
		72	}
		73
		74	/* Basic stuff */
		75
		76	@media print {
		77	/* Printing */
		78	.ui-layout-west, .ui-layout-resizer {
		79	display:none !important;
		80	}
		81	.ui-layout-center {
		82	left:0px !important;
		83	width:100% !important;
		84	}
		85	#oidtree, .ui-layout-center {
		86	position:relative !important;
		87	width:100% !important;
		88	top: 0 !important;
		89
		90	}
		91	#content_window {
		92	top: 0 !important;
		93	}
		94	}
		95
		96	@media only screen and (max-width: 800px) {
		97	/* Mobile */
		98	.ui-layout-west, .ui-layout-resizer {
		99	display:none !important;
		100	}
		101	.ui-layout-center {
		102	left:0px !important;
		103	width:100% !important;
		104	}
		105	#oidtree, .ui-layout-center {
		106	position:relative !important;
		107	width:100% !important;
		108	padding-right:10px !important;
		109	top: 0 !important;
767	daniel-mar	110	}
		111	#oidtree {
635	daniel-mar	112	padding-bottom:80px !important; /* because iPhone Safari bar at the bottom */
		113	/* Attention: If you incrase .lng_flag.margin, then you need to increase this, too */
		114	}
		115	#content_window {
		116	top: 0 !important;
		117	background:#fbfbfb;
		118	color:#000;
		119	}
		120	#frames {
		121	display:flex;
		122	flex-direction:column;
		123	align-items: flex-start;
		124	}
		125	#system_title_bar {
		126	order:0;
		127	flex:none;
		128	}
		129	#oidtree {
		130	order:1;
		131	flex:none;
		132
		133	/* https://stripesgenerator.com/ */
		134	background-image: linear-gradient(0deg, #ffffff 25%, #f4f4f4 25%, #f4f4f4 50%, #ffffff 50%, #ffffff 75%, #f4f4f4 75%, #f4f4f4 100%);
		135	background-size: 4.00px 4.00px;
		136
		137	}
		138	#content_window {
		139	order:2;
		140	flex:none;
		141	}
		142	#system_title_text {
		143	overflow-x:scroll; /* TODO: at computer browser, you see a scroll bar */
		144	}
		145	}
		146
		147	@media only screen and (min-width: 801px) {
		148	/* Desktop */
		149	#system_title_menu {
		150	display:none !important;
		151	}
		152	}
		153
		154	#system_title_bar {
		155	width:100% !important;
		156	position:relative !important;
		157	white-space: nowrap;
		158	}
		159
		160	body, #frames {
		161	width:100%;
		162	height:100%;
		163	}
		164
		165	.wrap {
		166	overflow-x: auto;
		167	margin: 0 auto;
		168	width:100%;
		169	}
		170
1401	daniel-mar	171	.gray_font {
		172	/color:#808080;/
		173	color:rgba(0, 0, 0, 0.5);
		174	}
		175
635	daniel-mar	176	.gray_footer_font {
1401	daniel-mar	177	/color:#808080;/
		178	color:rgba(0, 0, 0, 0.5);
635	daniel-mar	179	font-size:0.9em;
		180	}
		181
		182	label.padding_label {
		183	font-weight: normal !important;
		184	display: inline-block;
		185	clear: left;
		186	width: 100px;
		187	text-align: right;
		188	padding-top: 3px;
		189	margin-right: 8px;
		190	}
		191
		192	.box {
		193	width:auto !important;
		194	padding:20px;
		195	background-color:#fff;
		196	color:#000;
		197	border:1px solid #ccc;
		198	border-radius:5px;
		199	margin-top:10px;
		200	}
		201	#titleedit {
		202	width:100%;
		203	}
		204	#system_title_1 {
		205	color:#111;
		206	margin-left:5px;
		207	}
		208	#system_title_2 {
		209	color:#833;
		210	font-size:2em;
		211	margin-left:5px;
		212	}
		213
		214	/* Mobile menu button */
		215
		216	#bar1, #bar2, #bar3 {
		217	width: 27px;
		218	height: 5px;
		219	background-color: #FFA500;
		220	margin: 6px 0;
		221	transition: 0.4s;
		222	margin-left:14px;
		223	}
		224
		225	#system_title_menu.active {
		226	background-color: #FFA500;
		227	}
		228
		229	.active #bar1 {
		230	-webkit-transform: rotate(-45deg) translate(-7.5px, 7.5px);
		231	transform: rotate(-45deg) translate(-7.5px, 7.5px);
		232	background-color: #000;
		233	}
		234
		235	.active #bar2 {
		236	opacity: 0;
		237	background-color: #000;
		238	}
		239
		240	.active #bar3 {
		241	-webkit-transform: rotate(45deg) translate(-8px, -8px);
		242	transform: rotate(45deg) translate(-8px, -8px);
		243	background-color: #000;
		244	}
		245
		246	.hover #bar1, .hover #bar2, .hover #bar3 {
		247	background-color:#fff;
		248	}
		249
		250	#system_title_menu {
		251	width:55px;
		252	height:55px;
		253	padding-top:8px;
		254	text-decoration: none;
		255	font-size: 19px;
		256	display: none; /* will be set to 'block' by JavaScript */
		257	background-color: #000;
		258	float:left;
		259	cursor: pointer;
		260	}
		261
		262	/* Title bar */
		263
		264	#system_title_bar {
		265	line-height:1.75em;
		266
		267	height:55px !important;
		268
		269	font-weight:bolder;
		270	float:left;
		271	border-bottom:1px;
		272
		273	width:100%; /* required for NoScript */
		274	padding-left:5px;/* required for NoScript */
		275	padding-right:5px;/* required for NoScript */
		276
		277	padding-left:0px;
		278	margin-left:0px;
		279
		280	display:block;
		281
		282	/* https://stripesgenerator.com/ */
		283	background-image: linear-gradient(0deg, #ffffff 25%, #d4d4d4 25%, #d4d4d4 50%, #ffffff 50%, #ffffff 75%, #d4d4d4 75%, #d4d4d4 100%);
		284	background-size: 4.00px 4.00px;
		285
		286	color:#000;
		287
		288	overflow:hidden;
		289	}
		290	#system_title_bar a {
		291	text-decoration:none;
		292	}
		293
		294	/* OID-Tree */
		295
		296	.jstree-clicked {
		297	background:#FFD5AA !important;
		298	color:#000;
		299	}
		300
		301	.jstree-anchor:hover {
		302	background:#FFE4CA;
		303	color:#000;
		304	}
		305
		306	@media only screen and (max-width: 800px) {
		307	/* Mobile */
		308
		309	#content_window {
		310	padding-left:16px;
		311	padding-top:0px;
		312	}
		313
		314	}
		315	@media only screen and (min-width: 801px) {
		316	/* Desktop */
		317
		318	#oidtree {
		319	position:absolute;
		320	left:0px;
		321	bottom:0px;
		322	top:55px; /* required for NoScript */
		323	width:400px; /* required for NoScript */
		324	padding-top:5px;
		325	white-space:nowrap; /* required for NoScript */
		326	overflow:scroll; /* required for NoScript */
		327	padding-bottom:10px !important;
		328
		329	/* https://stripesgenerator.com/ */
		330	background-image: linear-gradient(0deg, #ffffff 25%, #f4f4f4 25%, #f4f4f4 50%, #ffffff 50%, #ffffff 75%, #f4f4f4 75%, #f4f4f4 100%);
		331	background-size: 4.00px 4.00px;
		332	}
		333
		334	#content_window {
		335	position:absolute;
		336	left:400px;
		337	right:0px;
		338	bottom:0px;
		339	top:55px; /* required for NoScript */
		340	padding-left:20px;
		341	padding-right:20px;
		342	background:#fbfbfb;
		343	color:#000;
		344	}
		345	}
		346
		347	#oidtree {
		348	padding-top:5px !important;
		349	padding-left:5px;/* required for NoScript */
		350	padding-right:5px;/* required for NoScript */
		351	}
		352
		353	html {
		354	margin:0;
		355	padding:0;
		356	height:100%;
		357	font-family:"Helvetica";
		358	}
		359	body {
		360	margin:0px;
		361	padding:0px;
		362	height:100%;
		363	/* Bootstrap adds "Helvetica Neue",Helvetica at the beginning which causes bold font in IE11+Win10 */
		364	font-family:"Arial","sans-serif" !important;
		365	}
		366
		367	@media only screen and (min-width: 801px) {
		368	/* Desktop */
		369	body {
		370	overflow:hidden;
		371	}
		372	.borderbox {
		373	border:1px solid silver;
		374	}
		375	}
		376
		377	.borderbox {
		378	overflow:auto;
		379	}
		380
		381	h1 {
		382	font-size:2.2em;
		383	}
		384	h2 {
		385	font-size:1.6em !important;
		386	}
		387	h3 {
		388	font-size:1.5em !important;
		389	}
		390
694	daniel-mar	391	a[target='_blank']::after {
		392	content: '\1F5D7';
		393	}
		394
635	daniel-mar	395	textarea,input[type="text"],input[type="password"],select {
		396	background: #F0F0F0;
		397	border: #AAAAAA 1px solid;
		398	color:#000;
		399	}
		400
		401	input[type=button], input[type=submit], input[type=reset],
		402	input[type=button]:link, input[type=submit]:link, input[type=reset]:link,
		403	input[type=button]:visited, input[type=submit]:visited, input[type=reset]:visited,
		404	input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
		405	border: 1px solid #a2a2a2;
		406	padding-top:2px;
		407	padding-bottom:2px;
		408	padding-left:7px;
		409	padding-right:7px;
		410	text-decoration:none;
		411	background: #ffffff;
		412	/color: #0066CC;/
		413	color:#000;
		414	}
		415	input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
		416	background: #FFE4CA;
		417	color:#000;
		418	}
		419	.hand, input[type=button], input[type=submit], input[type=reset] {
		420	cursor: pointer;
		421	color:#000;
		422	}
		423
		424	.btn-success, .btn-success:visited, .btn-success:hover, .btn-success:active {
		425	/* TODO: When the mouse enters the button, the link will be orange for a short amount of time. Why??? */
638	daniel-mar	426	color:white !important;
635	daniel-mar	427	}
		428
		429	/**
		430	* Splitter / uiLayout
		431	*/
		432	.ui-layout-pane { /* all 'panes' */
		433	border: 1px solid #BBB;
		434	}
		435	.ui-layout-pane-center { /* content body */
		436	padding: 0;
		437	margin: 0;
		438	}
		439	.ui-layout-pane-west { /* west pane */
		440	padding: 0 10px;
		441	background-color: #f9f9f9 !important;
		442	overflow: auto;
		443	}
		444	.ui-layout-resizer { /* all 'resizer-bars' */
		445	background: #DDD;
		446	color:#000;
		447	top:55px !important; /* DM 13.03.2019 */
		448	}
		449	.ui-layout-resizer-open:hover { /* mouse-over */
		450	background: #9D9;
		451	color:#000;
		452	}
		453	.ui-layout-resizer-north:hover {
		454	background: #DDD;
		455	color:#000;
		456	}
		457	.ui-layout-resizer-north {
		458	z-index:10 !important; /* DM 13.03.2019 */
		459	}
		460	.ui-layout-toggler { /* all 'toggler-buttons' */
		461	background: #AAA;
		462	color:#000;
		463	}
		464	.ui-layout-toggler-closed { /* closed toggler-button */
		465	background: #CCC;
		466	color:#000;
		467	border-bottom: 1px solid #BBB;
		468	}
		469	.ui-layout-toggler .content { /* toggler-text */
		470	font-size: 14px;
		471	font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
		472	font-weight: bold;
		473	}
		474	.ui-layout-toggler:hover { /* mouse-over */
		475	background: #DCA;
		476	color:#000;
		477	}
		478	.ui-layout-toggler:hover .content { /* mouse-over */
		479	color: #009;
		480	}
		481
		482	/* masks are usually transparent - make them visible (must 'override' default) */
		483	.ui-layout-mask {
		484	background: #C00 !important;
		485	color:#000;
		486	opacity: .20 !important;
		487	filter: alpha(opacity=20) !important;
		488	}
		489
		490	/* Language box */
		491
		492	@media only screen and (min-width: 801px) {
		493	/* Desktop */
		494
		495	#languageBox {
		496	position:absolute;
		497	right:420px;
		498	top:15px;
		499	}
		500
		501	}
		502
		503	@media only screen and (max-width: 800px) {
		504	/* Mobile */
		505
		506	#languageBox {
		507	margin: 10px;
		508	}
		509
		510	.lang_flag_bg {
		511	margin-right: 10px;
		512	}
		513
		514	}
		515
		516	.lng_flag {
		517	cursor: pointer;
		518	border: 1px solid #000 !important;
		519	height: 20px;
		520	margin: 0px;
		521	}
		522
		523	.lang_flag_bg {
		524	/* to avoid that the stripes shine through a ghost image */
		525	background:#fff;
		526	color:#000;
		527	display: inline-block;
		528	}
		529
		530	.picture_ghost {
		531	opacity: 0.4;
		532	}
		533
		534	/* Goto box */
		535
		536	@media only screen and (max-width: 800px) {
		537	/* Mobile */
		538
		539	#gotobox {
		540	/max-width:350px;/
		541	width:75%;
		542	}
		543
		544	.mobilehidden {
		545	display:none !important;
		546	}
		547
		548	}
		549
		550	@media only screen and (min-width: 801px) {
		551	/* Desktop */
		552
		553	#gotobox {
		554	position:absolute;
		555	right:10px;
		556	top:10px;
		557	width:30%;
		558	max-width:400px;
		559	}
		560
		561	}
		562
		563	#gotoedit {
		564	/*
		565	font-style:italic;
		566	font-weight:bolder;
		567	*/
		568	}
		569
		570	#gotobox {
		571	display: none; /* will be set to 'block' by JavaScript */
		572
		573	line-height:1.75em;
		574
		575	height:55px !important;
		576
		577	float:left;
		578	border-bottom:1px;
		579
		580	width:100%; /* required for NoScript */
		581	padding-left:5px;/* required for NoScript */
		582	padding-right:5px;/* required for NoScript */
		583
		584	padding-left:0px;
		585	margin-left:0px;
		586	}
		587
		588	#gotobox input[type="text"] {
		589	width:calc(100% - 45px);
		590	}
		591
		592	#gotobox input[type="button"] {
		593	width:40px;
		594	}
		595
		596	/* Logbook severities (shared between plugins ra099, ra200, admin600) */
		597
		598	.severity_0 {
		599	/* Undefined */
		600	}
		601
		602	.severity_1 {
		603	/* Success */
		604	color: DarkGreen;
		605	}
		606
		607	.severity_2 {
		608	/* Informational */
		609	color: CornflowerBlue;
		610	}
		611
		612	.severity_3 {
		613	/* Warning */
		614	color: DarkGoldenRod;
		615	}
		616
		617	.severity_4 {
		618	/* Error */
		619	color: DarkRed;
		620	}
		621
		622	.severity_5 {
		623	/* Critical */
		624	color: DarkMagenta;
		625	}
		626
		627	/* Tabs */
		628
		629	.tab-content {
		630	color: #000;
		631	background-color: #f5f5f5;
		632	padding : 15px;
		633	}
		634
		635	.nav-link.active {
		636	color: #000;
		637	font-weight: bold;
		638	background-color: #eeeeee !important;
		639	border-radius: 0;
		640	}
		641
		642	/* Let Bootstrap 4 look like Bootstrap 3 (more or less) */
		643	/* see https://www.geeksforgeeks.org/difference-between-bootstrap-3-and-bootstrap-4/ */
		644
		645	.container {
		646	max-width: unset !important;
		647	}
		648
		649	body {
		650	font-size:14px;
		651	}
		652
		653	h1, h2, h3 {
		654	margin-top: 20px;
		655	margin-bottom: 10px;
		656	}
1014	daniel-mar	657
		658	/* Misc */
		659
		660	li {
		661	padding-bottom: 0.25em;
		662	}
1388	daniel-mar	663
		664	img[src="img/arrow_back.png"], img[src="img/share.png"] {
		665	/* for dark designs (does not look good though...) */
		666	/* TODO: how to replace all visible pixels by a specific color, e.g. white? mask-image? */
		667	filter: drop-shadow( 1px -1px 1px white)
		668	drop-shadow(-1px 1px 1px white)
		669	drop-shadow(-1px -1px 1px white)
		670	drop-shadow( 1px 1px 1px white);
		671	}

Subversion Repositories oidplus

oidplus/trunk/plugins/viathinksoft/design/ironbase/oidplus_base.css – Rev 1401