summaryrefslogtreecommitdiffstats
path: root/core/css/apps.css
blob: 2bac961d36f3cfbeb42ea631a61a3f39cbcb5c2b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{ "translations": {
    "Settings" : "ده‌ستكاری",
    "Saving..." : "پاشکه‌وتده‌کات...",
    "No" : "نەخێر",
    "Yes" : "بەڵێ",
    "Ok" : "باشە",
    "Cancel" : "لابردن",
    "Error" : "هه‌ڵه",
    "Password" : "وشەی تێپەربو",
    "Share" : "هاوبەشی کردن",
    "Warning" : "ئاگاداری",
    "Add" : "زیادکردن",
    "New password" : "وشەی نهێنی نوێ",
    "Reset password" : "دووباره‌ كردنه‌وه‌ی وشه‌ی نهێنی",
    "Users" : "به‌كارهێنه‌ر",
    "Apps" : "به‌رنامه‌كان",
    "Admin" : "به‌ڕێوه‌به‌ری سه‌ره‌كی",
    "Help" : "یارمەتی",
    "Username" : "ناوی به‌کارهێنه‌ر",
    "Data folder" : "زانیاری فۆڵده‌ر",
    "Database user" : "به‌كارهێنه‌ری داتابه‌یس",
    "Database password" : "وشه‌ی نهێنی داتا به‌یس",
    "Database name" : "ناوی داتابه‌یس",
    "Database host" : "هۆستی داتابه‌یس",
    "Finish setup" : "كۆتایی هات ده‌ستكاریه‌كان",
    "Log out" : "چوونەدەرەوە",
    "Search" : "بگەڕێ"
},"pluralForm" :"nplurals=2; plural=(n != 1);"
}
389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546
/* APP STYLING -------------------------------------------------------------- */


#app {
	height: 100%;
	width: 100%;
}
#app * {
	-moz-box-sizing: border-box; box-sizing: border-box;
}





/* APP-NAVIGATION ------------------------------------------------------------*/


/* Navigation: folder like structure */
#app-navigation {
	width: 250px;
	height: 100%;
	float: left;
	-moz-box-sizing: border-box; box-sizing: border-box;
	background-color: #f5f5f5;
	padding-bottom: 44px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#app-navigation > ul {
	position: relative;
	height: 100%;
	width: inherit;
	overflow: auto;
	padding-bottom: 44px;
	-moz-box-sizing: border-box; box-sizing: border-box;
}
#app-navigation li {
	position: relative;
	width: 100%;
	-moz-box-sizing: border-box; box-sizing: border-box;
}
#app-navigation .active,
#app-navigation .active a {
	background-color: #ddd;
}

#app-navigation .active.with-menu > a,
#app-navigation .with-counter > a {
	padding-right: 50px;
}

#app-navigation .active.with-menu.with-counter > a {
	padding-right: 90px;
}

#app-navigation li:hover > a,
#app-navigation li:focus > a,
#app-navigation a:focus,
#app-navigation .selected,
#app-navigation .selected a {
	background-color: #ddd;
}

#app-navigation .with-icon a,
#app-navigation .app-navigation-entry-loading a {
	padding-left: 44px;
	background-size: 16px 16px;
	background-position: 14px center;
	background-repeat: no-repeat;
}

#app-navigation li > a {
	display: block;
	width: 100%;
	line-height: 44px;
	min-height: 44px;
	padding: 0 12px;
	overflow: hidden;
	-moz-box-sizing: border-box; box-sizing: border-box;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #333;
}

#app-navigation .collapse {
	display: none; /* hide collapse button intially */
}
#app-navigation .collapsible > .collapse {
	position: absolute;
	height: 44px;
	width: 44px;
	margin: 0;
	padding: 0;
	background: none; background-image: url('../img/actions/triangle-s.svg');
	background-size: 16px; background-repeat: no-repeat; background-position: center;
	border: none;
	border-radius: 0;
	outline: none !important;
	box-shadow: none;
}
#app-navigation .collapsible:hover > a,
#app-navigation .collapsible:focus > a {
	background-image: none;
}
#app-navigation .collapsible:hover > .collapse,
#app-navigation .collapsible:focus > .collapse {
	display: block;
}

#app-navigation .collapsible .collapse {
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-ms-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
	transform: rotate(-90deg);
}
#app-navigation .collapsible.open .collapse {
	-moz-transform: rotate(0);
	-webkit-transform: rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
	transform: rotate(0);
}

/* Second level nesting for lists */
#app-navigation > ul ul {
	display: none;
}
#app-navigation > ul ul li > a {
	padding-left: 32px;
}
#app-navigation > .with-icon ul li > a,
#app-navigation > .with-icon ul li.app-navigation-entry-loading > a {
	padding-left: 68px;
	background-position: 44px center;
}

#app-navigation .collapsible.open {
	background-image: linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
	background-image: -o-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
	background-image: -moz-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
	background-image: -webkit-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
	background-image: -ms-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
}

#app-navigation > ul .collapsible.open:hover,
#app-navigation > ul .collapsible.open:focus {
	box-shadow: inset 0 0 3px #ddd;
}

#app-navigation > ul .collapsible.open ul {
	display: block;
}


/* Deleted entries with undo button */
#app-navigation .app-navigation-entry-deleted {
	display: inline-block;
	height: 44px;
	width: 100%;
}

	#app-navigation .app-navigation-entry-deleted-description {
		padding-left: 12px;
		position: relative;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		display: inline-block;
		width: 201px; /* fallback for IE8 */
		width: calc(100% - 49px);
		line-height: 44px;
		float: left;
	}

	#app-navigation .app-navigation-entry-deleted-button {
		margin: 0;
		height: 44px;
		width: 44px;
		line-height: 44px;
		border: 0;
		display: inline-block;
		background-color: transparent;
		opacity: .5;
	}

	#app-navigation .app-navigation-entry-deleted-button:hover,
	#app-navigation .app-navigation-entry-deleted-button:focus {
		opacity: 1;
	}

/* counter and actions, legacy code */
#app-navigation .utils {
	position: absolute;
	padding: 7px 7px 0 0;
	right: 0;
	top: 0;
	bottom: 0;
	font-size: 12px;
}
	#app-navigation .utils button,
	#app-navigation .utils .counter {
		width: 44px;
		height: 44px;
		padding-top: 12px;
	}


/* drag and drop */
#app-navigation .drag-and-drop {
	-moz-transition: padding-bottom 500ms ease 0s;
	-o-transition: padding-bottom 500ms ease 0s;
	-webkit-transition: padding-bottom 500ms ease 0s;
	-ms-transition: padding-bottom 500ms ease 0s;
	transition: padding-bottom 500ms ease 0s;
	padding-bottom: 40px;
}
#app-navigation .error {
	color: #dd1144;
}

#app-navigation .app-navigation-separator {
	border-bottom: 1px solid #ddd;
}

/**
 * App navigation utils, buttons and counters for drop down menu
 */
#app-navigation .app-navigation-entry-utils {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 105;
}

	#app-navigation .app-navigation-entry-utils ul {
		display: block !important;
	}


	#app-navigation .app-navigation-entry-utils li {
		float: left;
		width: 44px !important;
		height: 44px;
		line-height: 44px;
	}

	#app-navigation .active > .app-navigation-entry-utils li {
		display: inline-block;
	}

	#app-navigation .app-navigation-entry-utils button {
		height: 38px;
		width: 38px;
		line-height: 38px;
		float: left;
	}

	#app-navigation .app-navigation-entry-utils-menu-button {
		display: none;
	}
	#app-navigation .app-navigation-entry-utils-menu-button button {
		border: 0;
		opacity: .5;
		background-color: transparent;
		background-repeat: no-repeat;
		background-position: center;
		background-image: url('../img/actions/more.svg');
	}

	#app-navigation .app-navigation-entry-utils-menu-button:hover button,
	#app-navigation .app-navigation-entry-utils-menu-button:focus button {
		background-color: transparent;
		opacity: 1;
	}

	#app-navigation .app-navigation-entry-utils-counter {
		overflow: hidden;
		text-overflow: hidden;
		text-align: right;
		font-size: 9pt;
		width: 38px;
		line-height: 44px;
		padding: 0 10px;
	}

	#app-navigation .app-navigation-entry-utils ul,
	#app-navigation .app-navigation-entry-menu ul {
		list-style-type: none;
	}

#app-navigation .app-navigation-entry-menu {
	display: none;
	position: absolute;
	background-color: #eee;
	color: #333;
	border-radius: 3px;
	border-top-right-radius: 0px;
	z-index: 110;
	margin: -5px 14px 5px 10px;
	right: 0;
	border: 1px solid #bbb;
	-webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
	-moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
	-ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
	-o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
	filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
}

#app-navigation .app-navigation-entry-menu.open {
	display: block;
}

/* miraculous border arrow stuff */
#app-navigation .app-navigation-entry-menu:after,
#app-navigation .app-navigation-entry-menu:before {
	bottom: 100%;
	right: 0; /* change this to adjust the arrow position */
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

#app-navigation .app-navigation-entry-menu:after {
	border-color: rgba(238, 238, 238, 0);
	border-bottom-color: #eee;
	border-width: 10px;
	margin-left: -10px;
}
#app-navigation .app-navigation-entry-menu:before {
	border-color: rgba(187, 187, 187, 0);
	border-bottom-color: #bbb;
	border-width: 11px;
	margin-left: -11px;
}

	/* list of options for an entry */
	#app-navigation .app-navigation-entry-menu ul {
		display: block !important;
	}

	#app-navigation .app-navigation-entry-menu li {
		float: left;
		width: 38px !important;
	}

		#app-navigation .app-navigation-entry-menu li button {
			float: right;
			width: 36px !important;
			height: 36px;
			line-height: 36px;
			border: 0;
			opacity: .5;
			background-color: transparent;
		}

		#app-navigation .app-navigation-entry-menu li button:hover,
		#app-navigation .app-navigation-entry-menu li button:focus {
			opacity: 1;
			background-color: transparent;
		}

/* editing an entry */
#app-navigation .app-navigation-entry-edit {
	padding-left: 5px;
	padding-right: 5px;
	display: inline-block;
	height: 39px;
	width: 100%;
}

	#app-navigation .app-navigation-entry-edit input {
		border-bottom-right-radius: 0;
		border-top-right-radius: 0;
		width: 204px; /* fallback for IE8 */
		width: calc(100% - 36px);
		padding: 5px;
		margin-right: 0;
		height: 38px;
		float: left;
		border: 1px solid rgba(190,190,190,.9);
	}

	#app-navigation .app-navigation-entry-edit button,
	#app-navigation .app-navigation-entry-edit input[type="submit"] {
		width: 36px;
		height: 38px;
		float: left;
	}

	#app-navigation .app-navigation-entry-edit .icon-checkmark {
		border-bottom-left-radius: 0;
		border-top-left-radius: 0;
		border-left: 0;
		margin-right: 0;
	}


/* APP-CONTENT ---------------------------------------------------------------*/


/* Part where the content will be loaded into */
#app-content {
	position: relative;
	height: 100%;
	overflow-y: auto;
}

#app-content-wrapper {
	min-width: 100%;
	min-height: 100%;
}



/* APP-SETTINGS ---------------------------------------------------------------*/

/* settings area */
#app-settings {
	position: fixed;
	width: 250px; /* change to 100% when layout positions are absolute */
	bottom: 0;
	z-index: 140;
}
#app-settings.opened #app-settings-content {
	display: block;
}
#app-settings-header {
	background-color: #eee;
}
#app-settings-content {
	display: none;
	padding: 10px;
	background-color: #eee;
}
#app-settings.open #app-settings-content {
	display: block;
	/* restrict height of settings and make scrollable */
	max-height: 300px;
	overflow-y: auto;
}

/* display input fields at full width */
#app-settings-content input[type='text'] {
	width: 93%;
}

.settings-button {
	display: block;
	height: 44px;
	width: 100%;
	padding: 0;
	margin: 0;
	background-color: transparent; background-image: url('../img/actions/settings.svg');
	background-position: 10px center; background-repeat: no-repeat;
	box-shadow: none;
	border: 0;
	border-radius: 0;
}
.settings-button:hover,
.settings-button:focus {
	background-color: #ddd;
}
.settings-button.opened:hover,
.settings-button.opened:focus {
	background-color: transparent;
}

/* buttons */
button.loading {
	background-image: url('../img/loading.gif');
	background-position: right 10px center; background-repeat: no-repeat;
	background-size: 16px;
	padding-right: 30px;
}

/* general styles for the content area */
.section {
	display: block;
	padding: 30px;
	color: #555;
	border-top: 1px solid #ddd;
}
.section.hidden {
	display: none !important;
}
/* no top border for first settings item */
#app-content > .section:first-child {
	border-top: none;
}
.section h2 {
	font-size: 20px;
	margin-bottom: 12px;
	font-weight: normal;
}
.section h3 {
	font-size: 16px;
	font-weight: normal;
}
/* slight position correction of checkboxes and radio buttons */
.section input[type="checkbox"],
.section input[type="radio"] {
	vertical-align: -2px;
	margin-right: 4px;
}
.appear {
	opacity: 1;
	transition: opacity 500ms ease 0s;
	-moz-transition: opacity 500ms ease 0s;
	-ms-transition: opacity 500ms ease 0s;
	-o-transition: opacity 500ms ease 0s;
	-webkit-transition: opacity 500ms ease 0s;
}
.appear.transparent {
	opacity: 0;
}


/* do not use italic typeface style, instead lighter color */
em {
	font-style: normal;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	opacity: .5;
}

/* generic dropdown style */
.dropdown {
	background:#eee;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	box-shadow:0 1px 1px #777;
	display:block;
	margin-right: 0;
	position:absolute;
	right:0;
	width:420px;
	z-index:500;
	padding:16px;
}