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

Rev	Author	Line No.	Line
635	daniel-mar	1	/*
		2	* OIDplus 2.0
		3	* Copyright 2019 - 2021 Daniel Marschall, ViaThinkSoft
		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	/* Basic stuff */
		61
		62	@media print {
		63	/* Printing */
		64	.ui-layout-west, .ui-layout-resizer {
		65	display:none !important;
		66	}
		67	.ui-layout-center {
		68	left:0px !important;
		69	width:100% !important;
		70	}
		71	#oidtree, .ui-layout-center {
		72	position:relative !important;
		73	width:100% !important;
		74	top: 0 !important;
		75
		76	}
		77	#content_window {
		78	top: 0 !important;
		79	}
		80	}
		81
		82	@media only screen and (max-width: 800px) {
		83	/* Mobile */
		84	.ui-layout-west, .ui-layout-resizer {
		85	display:none !important;
		86	}
		87	.ui-layout-center {
		88	left:0px !important;
		89	width:100% !important;
		90	}
		91	#oidtree, .ui-layout-center {
		92	position:relative !important;
		93	width:100% !important;
		94	padding-right:10px !important;
		95	top: 0 !important;
767	daniel-mar	96	}
		97	#oidtree {
635	daniel-mar	98	padding-bottom:80px !important; /* because iPhone Safari bar at the bottom */
		99	/* Attention: If you incrase .lng_flag.margin, then you need to increase this, too */
		100	}
		101	#content_window {
		102	top: 0 !important;
		103	}
		104	#frames {
		105	display:flex;
		106	flex-direction:column;
		107	align-items: flex-start;
		108	}
		109	#system_title_bar {
		110	order:0;
		111	flex:none;
		112	}
		113	#oidtree {
		114	order:1;
		115	flex:none;
		116	}
		117	#content_window {
		118	order:2;
		119	flex:none;
		120	}
		121	#system_title_text {
		122	overflow-x:scroll; /* TODO: at computer browser, you see a scroll bar */
		123	}
		124	}
		125
		126	@media only screen and (min-width: 801px) {
		127	/* Desktop */
		128	#system_title_menu {
		129	display:none !important;
		130	}
		131	}
		132
		133	#system_title_bar {
		134	width:100% !important;
		135	position:relative !important;
		136	white-space: nowrap;
		137	}
		138
		139	body, #frames {
		140	width:100%;
		141	height:100%;
		142	}
		143
		144	.wrap {
		145	overflow-x: auto;
		146	margin: 0 auto;
		147	width:100%;
		148	}
		149
		150	.gray_footer_font {
		151	color:#808080;
		152	font-size:0.9em;
		153	}
		154
		155	label.padding_label {
		156	font-weight: normal !important;
		157	display: inline-block;
		158	clear: left;
		159	width: 100px;
		160	text-align: right;
		161	padding-top: 3px;
		162	margin-right: 8px;
		163	}
		164
		165	.box {
		166	width:auto !important;
		167	padding:20px;
		168	background-color:#fff;
		169	color:#000;
		170	border:1px solid #ccc;
		171	border-radius:5px;
		172	margin-top:10px;
		173	}
		174	#titleedit {
		175	width:100%;
		176	}
		177	#system_title_1 {
		178	color:#2D6A9F;
		179	margin-left:5px;
		180	}
		181	#system_title_2 {
		182	color:#2B336F;
		183	font-size:2em;
		184	margin-left:5px;
		185	}
		186
		187	/* Mobile menu button */
		188
		189	#bar1, #bar2, #bar3 {
		190	width: 27px;
		191	height: 5px;
		192	background-color: #FFA500;
		193	margin: 6px 0;
		194	transition: 0.4s;
		195	margin-left:14px;
		196	}
		197
		198	#system_title_menu.active {
		199	background-color: #FFA500;
		200	}
		201
		202	.active #bar1 {
		203	-webkit-transform: rotate(-45deg) translate(-7.5px, 7.5px);
		204	transform: rotate(-45deg) translate(-7.5px, 7.5px);
		205	background-color: #000;
		206	}
		207
		208	.active #bar2 {
		209	opacity: 0;
		210	background-color: #000;
		211	}
		212
		213	.active #bar3 {
		214	-webkit-transform: rotate(45deg) translate(-8px, -8px);
		215	transform: rotate(45deg) translate(-8px, -8px);
		216	background-color: #000;
		217	}
		218
		219	.hover #bar1, .hover #bar2, .hover #bar3 {
		220	background-color:#fff;
		221	}
		222
		223	#system_title_menu {
		224	width:55px;
		225	height:55px;
		226	padding-top:8px;
		227	text-decoration: none;
		228	font-size: 19px;
		229	display: none; /* will be set to 'block' by JavaScript */
		230	background-color: #000;
		231	float:left;
		232	cursor: pointer;
		233	}
		234
		235	/* Title bar */
		236
		237	#system_title_bar {
		238	line-height:1.75em;
		239
		240	height:55px !important;
		241
		242	font-style:italic;
		243	font-weight:bolder;
		244	float:left;
		245	border-bottom:1px;
		246
		247	width:100%; /* required for NoScript */
		248	padding-left:5px;/* required for NoScript */
		249	padding-right:5px;/* required for NoScript */
		250
		251	padding-left:0px;
		252	margin-left:0px;
		253
		254	display:block;
		255
		256	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a0d8ef+0,ddf1f9+65,feffff+100 */
		257	background: #a0d8ef; /* Old browsers */
		258	background: -moz-linear-gradient(left, #a0d8ef 0%, #ddf1f9 65%, #feffff 100%); /* FF3.6-15 */
		259	background: -webkit-linear-gradient(left, #a0d8ef 0%,#ddf1f9 65%,#feffff 100%); /* Chrome10-25,Safari5.1-6 */
		260	background: linear-gradient(to right, #a0d8ef 0%,#ddf1f9 65%,#feffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		261	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0d8ef', endColorstr='#feffff',GradientType=1 ); /* IE6-9 */
		262
		263	color:#000;
		264
		265	overflow:hidden;
		266	}
		267	#system_title_bar a {
		268	text-decoration:none;
		269	}
		270
		271	/* OID-Tree */
		272
		273	@media only screen and (max-width: 800px) {
		274	/* Mobile */
		275
		276	#content_window {
		277	padding-left:16px;
		278	padding-top:0px;
		279	}
		280
		281	}
		282	@media only screen and (min-width: 801px) {
		283	/* Desktop */
		284
		285	#oidtree {
		286	position:absolute;
		287	left:0px;
		288	bottom:0px;
		289	top:55px; /* required for NoScript */
		290	width:400px; /* required for NoScript */
		291	padding-top:5px;
		292	white-space:nowrap; /* required for NoScript */
		293	overflow:scroll; /* required for NoScript */
		294	padding-bottom:10px !important;
		295	}
		296
		297	#content_window {
		298	position:absolute;
		299	left:400px;
		300	right:0px;
		301	bottom:0px;
		302	top:55px; /* required for NoScript */
		303	padding-left:20px;
		304	padding-right:20px;
		305	}
		306	}
		307
		308	#oidtree {
		309	padding-top:5px !important;
		310	padding-left:5px;/* required for NoScript */
		311	padding-right:5px;/* required for NoScript */
		312	}
		313
		314	html {
		315	margin:0;
		316	padding:0;
		317	height:100%;
		318	font-family:"Helvetica";
		319	}
		320	body {
		321	margin:0px;
		322	padding:0px;
		323	height:100%;
		324	/* Bootstrap adds "Helvetica Neue",Helvetica at the beginning which causes bold font in IE11+Win10 */
		325	font-family:"Arial","sans-serif" !important;
		326	}
		327
		328	@media only screen and (min-width: 801px) {
		329	/* Desktop */
		330	body {
		331	overflow:hidden;
		332	}
		333	.borderbox {
		334	border:1px solid silver;
		335	}
		336	}
		337
		338	.borderbox {
		339	overflow:auto;
		340	}
		341
		342	h1 {
		343	font-size:2.2em;
		344	}
		345	h2 {
		346	font-size:1.6em !important;
		347	}
		348	h3 {
		349	font-size:1.5em !important;
		350	}
		351
694	daniel-mar	352	a[target='_blank']::after {
		353	content: '\1F5D7';
		354	}
		355
635	daniel-mar	356	textarea,input[type="text"],input[type="password"],select {
		357	/* for dark themes, this looks better */
		358	/background:transparent;/
		359	background:#fff;
		360	background-opacity: 0.4;
		361	border: #AAAAAA 1px solid;
		362	color:#000;
		363	}
		364
		365	input[type=button], input[type=submit], input[type=reset],
		366	input[type=button]:link, input[type=submit]:link, input[type=reset]:link,
		367	input[type=button]:visited, input[type=submit]:visited, input[type=reset]:visited,
		368	input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
		369	border: 1px solid #a2a2a2;
		370	padding-top:2px;
		371	padding-bottom:2px;
		372	padding-left:7px;
		373	padding-right:7px;
		374	text-decoration:none;
		375	background: #ffffff;
		376	color: #0066CC;
		377	}
		378	input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
		379	background: #f4f4ff;
		380	color:#000;
		381	}
		382	.hand, input[type=button], input[type=submit], input[type=reset] {
		383	cursor: pointer;
		384	}
		385
		386	/**
		387	* Splitter / uiLayout
		388	*/
		389	.ui-layout-pane { /* all 'panes' */
		390	border: 1px solid #BBB;
		391	}
		392	.ui-layout-pane-center { /* content body */
		393	padding: 0;
		394	margin: 0;
		395	}
		396	.ui-layout-pane-west { /* west pane */
		397	padding: 0 10px;
		398	background-color: #f9f9f9 !important;
		399	overflow: auto;
		400	}
		401	.ui-layout-resizer { /* all 'resizer-bars' */
		402	background: #DDD;
		403	top:55px !important; /* DM 13.03.2019 */
		404	color:#000;
		405	}
		406	.ui-layout-resizer-open:hover { /* mouse-over */
		407	background: #9D9;
		408	color:#000;
		409	}
		410	.ui-layout-resizer-north {
		411	background:#2b336f !important;
		412	color:#000;
		413	z-index:10 !important; /* DM 13.03.2019 */
		414	}
		415	.ui-layout-toggler { /* all 'toggler-buttons' */
		416	background: #AAA;
		417	color:#000;
		418	}
		419	.ui-layout-toggler-closed { /* closed toggler-button */
		420	background: #CCC;
		421	color:#000;
		422	border-bottom: 1px solid #BBB;
		423	}
		424	.ui-layout-toggler .content { /* toggler-text */
		425	font-size: 14px;
		426	font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
		427	font-weight: bold;
		428	}
		429	.ui-layout-toggler:hover { /* mouse-over */
		430	background: #DCA;
		431	color:#000;
		432	}
		433	.ui-layout-toggler:hover .content { /* mouse-over */
		434	color: #009;
		435	}
		436
		437	/* masks are usually transparent - make them visible (must 'override' default) */
		438	.ui-layout-mask {
		439	background: #C00 !important;
		440	color:#000;
		441	opacity: .20 !important;
		442	filter: alpha(opacity=20) !important;
		443	}
		444
		445	/* Language box */
		446
		447	@media only screen and (min-width: 801px) {
		448	/* Desktop */
		449
		450	#languageBox {
		451	position:absolute;
		452	right:420px;
		453	top:15px;
		454	}
		455
		456	}
		457
		458	@media only screen and (max-width: 800px) {
		459	/* Mobile */
		460
		461	#languageBox {
		462	margin: 10px;
		463	}
		464
		465	.lang_flag_bg {
		466	margin-right: 10px;
		467	}
		468
		469	}
		470
		471	.lng_flag {
		472	cursor: pointer;
		473	border: 1px solid #000 !important;
		474	height: 20px;
		475	margin: 0px;
		476	}
		477
		478	.lang_flag_bg {
		479	/* to avoid that the stripes shine through a ghost image */
		480	background:#fff;
		481	color:#000;
		482	display: inline-block;
		483	}
		484
		485	.picture_ghost {
		486	opacity: 0.4;
		487	}
		488
		489	/* Goto box */
		490
		491	@media only screen and (max-width: 800px) {
		492	/* Mobile */
		493
		494	#gotobox {
		495	/max-width:350px;/
		496	width:75%;
		497	}
		498
		499	.mobilehidden {
		500	display:none !important;
		501	}
		502
		503	}
		504
		505	@media only screen and (min-width: 801px) {
		506	/* Desktop */
		507
		508	#gotobox {
		509	position:absolute;
		510	right:10px;
		511	top:10px;
		512	width:30%;
		513	max-width:400px;
		514	}
		515
		516	}
		517
		518	#gotoedit {
		519	font-style:italic;
		520	font-weight:bolder;
		521	}
		522
		523	#gotobox {
		524	display: none; /* will be set to 'block' by JavaScript */
		525
		526	line-height:1.75em;
		527
		528	height:55px !important;
		529
		530	float:left;
		531	border-bottom:1px;
		532
		533	width:100%; /* required for NoScript */
		534	padding-left:5px;/* required for NoScript */
		535	padding-right:5px;/* required for NoScript */
		536
		537	padding-left:0px;
		538	margin-left:0px;
		539	}
		540
		541	#gotobox input[type="text"] {
		542	width:calc(100% - 45px);
		543	}
		544
		545	#gotobox input[type="button"] {
		546	width:40px;
		547	}
		548
		549	/* Logbook severities (shared between plugins ra099, ra200, admin600) */
		550
		551	.severity_0 {
		552	/* Undefined */
		553	}
		554
		555	.severity_1 {
		556	/* Success */
		557	color: DarkGreen;
		558	}
		559
		560	.severity_2 {
		561	/* Informational */
		562	color: CornflowerBlue;
		563	}
		564
		565	.severity_3 {
		566	/* Warning */
		567	color: DarkGoldenRod;
		568	}
		569
		570	.severity_4 {
		571	/* Error */
		572	color: DarkRed;
		573	}
		574
		575	.severity_5 {
		576	/* Critical */
		577	color: DarkMagenta;
		578	}
		579
		580	/* Tabs */
		581
		582	.tab-content {
		583	color: #000;
		584	background-color: #eeeeee;
		585	padding : 15px;
		586	}
		587
		588	.nav-link.active {
		589	color: #000;
		590	font-weight: bold;
		591	background-color: #eeeeee !important;
		592	border-radius: 0;
		593	}
		594
		595	/* Let Bootstrap 4 look like Bootstrap 3 (more or less) */
		596	/* see https://www.geeksforgeeks.org/difference-between-bootstrap-3-and-bootstrap-4/ */
		597
		598	.container {
		599	max-width: unset !important;
		600	}
		601
		602	body {
		603	font-size:14px;
		604	}
		605
		606	h1, h2, h3 {
		607	margin-top: 20px;
		608	margin-bottom: 10px;
		609	}

Subversion Repositories oidplus

oidplus/trunk/plugins/viathinksoft/design/default/oidplus_base.css – Rev 800