图书馆智能管理系统
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

3282 lines
62 KiB

5 months ago
  1. /**
  2. Colors:
  3. - Header: #1f3245
  4. - Subheader: #e8edf1
  5. - Subheader border: #a4acb9
  6. - Highlight buttons/text: #2980b9
  7. - Text color: #1a1a1a
  8. - Filter color: #373e48
  9. - Dark highlight: #606b7d
  10. */
  11. @font-face {
  12. font-family: 'cherokeeregular';
  13. src: url('../../fonts/cherokee-webfont.eot');
  14. src: url('../../fonts/cherokee-webfont.eot?#iefix') format('embedded-opentype'),
  15. url('../../fonts/cherokee-webfont.woff') format('woff'),
  16. url('../../fonts/cherokee-webfont.ttf') format('truetype'),
  17. url('../../fonts/cherokee-webfont.svg#cherokeeregular') format('svg');
  18. font-weight: normal;
  19. font-style: normal;
  20. }
  21. @font-face {
  22. font-family: 'Titillium Web';
  23. font-style: normal;
  24. font-weight: normal;
  25. url('../../fonts/TitilliumWeb-Regular.ttf') format('truetype');
  26. }
  27. @font-face {
  28. font-family: 'Titillium Web';
  29. font-style: normal;
  30. font-weight: bold;
  31. url('../../fonts/TitilliumWeb-Bold.ttf') format('truetype');
  32. }
  33. .form-control {
  34. -webkit-border-radius: 0;
  35. -moz-border-radius: 0;
  36. border-radius: 0;
  37. padding: 4px 8px;
  38. }
  39. body,
  40. body pre {
  41. font-family: 'Titillium Web', sans-serif;
  42. }
  43. body pre {
  44. border: none;
  45. padding: 0;
  46. background: transparent;
  47. }
  48. hr {
  49. border-top: 1px solid #606b7d;
  50. }
  51. .form-wrapper textarea {
  52. width: 100%;
  53. max-width: 100%;
  54. min-width: 100%;
  55. }
  56. .label {
  57. font-size: 18px;
  58. font-weight: normal;
  59. margin-bottom: 0;
  60. color: #1a1a1a;
  61. }
  62. .subtle {
  63. color: #999999;
  64. font-size: 13px;
  65. }
  66. .simple-list {
  67. list-style: none inside;
  68. padding: 0;
  69. margin: 5px 0;
  70. }
  71. .simple-list.pack {
  72. max-height: 250px;
  73. overflow: auto;
  74. }
  75. .simple-list li {
  76. padding: 6px;
  77. position: relative;
  78. }
  79. .simple-list li > .icon {
  80. padding-right: 5px;
  81. }
  82. .simple-list li:hover {
  83. background-color: #f8f8f9;
  84. }
  85. .simple-list li.nothing-to-see:hover {
  86. background-color: transparent;
  87. }
  88. .simple-list li.active {
  89. background-color: #eeeeee;
  90. }
  91. .simple-list li .actions {
  92. visibility: hidden;
  93. position: absolute;
  94. top: 3px;
  95. right: 5px;
  96. font-size: 20px;
  97. background-color: #f8f8f9;
  98. padding: 0 0 0 4px;
  99. }
  100. .simple-list li .actions a {
  101. padding: 4px 4px 0 4px;
  102. }
  103. .simple-list li .actions a:hover {
  104. background-color: #ffffff;
  105. }
  106. .simple-list li:hover .actions {
  107. visibility: visible;
  108. }
  109. .simple-list.grid li {
  110. border-bottom: 1px solid #eeeeee;
  111. }
  112. .simple-list.grid li:first-child {
  113. border-top: 1px solid #eeeeee;
  114. }
  115. .simple-list li .subtle {
  116. color: #999999;
  117. font-size: 13px;
  118. }
  119. .simple-list.selectable li:hover {
  120. font-weight: bolder;
  121. }
  122. .simple-list .loading {
  123. position: absolute;
  124. left: 50%;
  125. margin-left: -15px;
  126. line-height: 30px;
  127. top: 8px;
  128. z-index: 1030;
  129. }
  130. .lt-ie9 .container {
  131. display: none !important;
  132. visibility: hidden !important;
  133. }
  134. .unsupported-browser {
  135. margin: 60px 20px 20px 20px;
  136. }
  137. a {
  138. cursor: pointer;
  139. }
  140. a:hover {
  141. text-decoration: none;
  142. }
  143. label {
  144. font-weight: normal;
  145. color: #636363;
  146. font-size: 14px;
  147. }
  148. [ng\:cloak], [ng-cloak], .ng-cloak { display: none; }
  149. .nothing-to-see {
  150. padding: 5px 0 20px 0;
  151. cursor: default;
  152. }
  153. .nothing-to-see span {
  154. font-size: 14px;
  155. color: #aaaaaa;
  156. }
  157. .fixed-container {
  158. max-width: 1400px;
  159. min-width: 1000px;
  160. margin: 0 auto;
  161. }
  162. .well {
  163. -moz-border-radius: 0;
  164. -webkit-border-radius: 0;
  165. border-radius: 0;
  166. }
  167. /** Buttons **/
  168. button.btn, a.btn {
  169. background-color: #2980b9;
  170. color: #ffffff;
  171. border-color: #ffffff;
  172. font-size: 15px;
  173. }
  174. button.btn-subtle, a.btn-subtle {
  175. background-color: #fafafb;
  176. color: #1a1a1a;
  177. font-size: 15px;
  178. }
  179. .btn-xs {
  180. padding: 1px 8px;
  181. }
  182. button.btn.btn-danger {
  183. background-color: #d35f5f;
  184. }
  185. .btn.btn-danger:hover, .btn.btn-danger.active, .btn.btn-danger:focus {
  186. background-color: #c83737;
  187. }
  188. .btn:hover, .btn.active, .btn:focus,
  189. .btn[disabled]:hover, .btn[disabled].active, .btn[disabled]:focus {
  190. background-color: #3990c9;
  191. border-color: #ffffff;
  192. color: #ffffff;
  193. }
  194. .btn[disabled]:active, .btn[disabled].active {
  195. outline: 0;
  196. background-image: none;
  197. -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
  198. box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
  199. }
  200. .btn.disabled, .btn[disabled], .btn[disabled]:active, .btn[disabled]:hover {
  201. background-color: #668b94;
  202. color: #ffffff;
  203. }
  204. .btn-subtle:hover, .btn-subtle.active, .btn-subtle:focus {
  205. background-color: #f6f6f7;
  206. border-color: #ffffff;
  207. color: #000000;
  208. }
  209. .btn-subtle[disabled] {
  210. background-color: #f6f6f7;
  211. color: #555555;
  212. }
  213. .modal-header .btn, .header .btn {
  214. border-color: #e8edf1;
  215. }
  216. .content {
  217. padding: 0 10px;
  218. overflow: auto;
  219. }
  220. .content.split {
  221. background: transparent url('../../images/line-1px.png') repeat-y 60% 0;
  222. }
  223. .content .split-left {
  224. float: left;
  225. width: 60%;
  226. padding: 0 10px 0 5px;
  227. }
  228. .content .split-right {
  229. float: right;
  230. width: 40%;
  231. padding: 0 0 0 15px;
  232. }
  233. .form-group .pull-right {
  234. margin: 10px 0 0 5px;
  235. }
  236. .form-group.box {
  237. padding-bottom: 10px;
  238. margin-bottom: 5px;
  239. border-bottom: 1px dotted #eeeeee;
  240. }
  241. .form-group .marker {
  242. font-size: 15px;
  243. color: #666666;
  244. }
  245. /** Dropdowns and dropdown triggers */
  246. .dropdown-menu {
  247. -webkit-border-radius: 0px;
  248. -moz-border-radius: 0px;
  249. border-radius: 0px;
  250. box-shadow: none;
  251. }
  252. .dropdown-menu:focus {
  253. outline: none;
  254. }
  255. .dropdown-menu > li > a:hover, .dropdown-menu > ul > li > a:hover {
  256. background: #2980b9;
  257. color: #ffffff;
  258. }
  259. .dropdown-menu > li.active > a, .dropdown-menu > li.active > a:hover {
  260. background: #e8edf1;
  261. color: #1a1a1a;
  262. }
  263. .dropdown-menu > ul > li > a {
  264. display: block;
  265. text-decoration: none;
  266. color: #1a1a1a;
  267. padding: 5px;
  268. cursor: pointer;
  269. }
  270. .dropdown-menu > ul {
  271. padding: 10px;
  272. }
  273. .dropdown-menu.large-width {
  274. min-width: 300px;
  275. }
  276. a.dropdown-toggle {
  277. color: #1a1a1a;
  278. text-decoration: none;
  279. }
  280. .open a.dropdown-toggle, a.dropdown-toggle:hover {
  281. color: #2980b9;
  282. }
  283. .btn-group.open .dropdown-toggle {
  284. -moz-box-shadow: none;
  285. -webkit-box-shadow: none;
  286. box-shadow: none;
  287. }
  288. /** Subtle dropdown (eg. sort) */
  289. .dropdown-subtle {
  290. margin-right: 5px;
  291. color: #606b7d;
  292. }
  293. .dropdown-subtle .btn {
  294. background: transparent;
  295. line-height: 36px;
  296. color: #606b7d;
  297. padding: 0;
  298. font-size: 14px;
  299. border: none;
  300. box-shadow: none;
  301. -webkit-box-shadow: none;
  302. -moz-box-shadow: none;
  303. }
  304. .dropdown-subtle .btn-group.open .dropdown-toggle {
  305. box-shadow: none;
  306. -webkit-box-shadow: none;
  307. -moz-box-shadow: none;
  308. }
  309. .dropdown-subtle .btn:hover, .dropdown-subtle .btn:focus {
  310. background: transparent;
  311. color: #333333;
  312. }
  313. .dropdown-subtle a {
  314. cursor: pointer;
  315. }
  316. /** Popovers */
  317. .popover {
  318. -moz-border-radius: 0;
  319. -webkit-border-radius: 0;
  320. border-radius: 0;
  321. max-width: 400px;
  322. min-width: 350px;
  323. padding: 0px;
  324. }
  325. .popover.bottom-left, .popover.bottom-right {
  326. margin-top: 10px;
  327. }
  328. .popover>.arrow, .popover>.arrow {
  329. margin-left: -11px;
  330. border-top-width: 0;
  331. border-bottom-color: #999;
  332. border-bottom-color: rgba(0,0,0,.25);
  333. top: -11px;
  334. }
  335. .popover.bottom-left>.arrow {
  336. left: 40px;
  337. }
  338. .popover.bottom-right>.arrow {
  339. right: 40px;
  340. }
  341. .popover.bottom-left>.arrow:after, .popover.bottom-right>.arrow:after, .popover.bottom>.arrow:after {
  342. content: " ";
  343. top: 1px;
  344. margin-left: -10px;
  345. border-top-width: 0;
  346. border-bottom-color: #e8edf1;
  347. }
  348. .popover-wrapper {
  349. padding: 10px;
  350. }
  351. .popover-header {
  352. position: relative;
  353. background-color: #e8edf1;
  354. min-height: 30px;
  355. font-size: 18px;
  356. color: #a4acb9;
  357. padding: 10px 0;
  358. }
  359. .popover-footer {
  360. overflow: hidden;
  361. clear: both;
  362. padding: 5px 10px 10px 10px;
  363. }
  364. .popover-header .actions {
  365. position: absolute;
  366. top: 6px;
  367. right: 5px;
  368. font-size: 12px;
  369. }
  370. .popover-header .actions a{
  371. display: inline-block;
  372. padding: 8px 5px;
  373. }
  374. .popover-header span {
  375. padding: 0 10px;
  376. }
  377. .popover-wrapper .form-group {
  378. margin-bottom: 10px;
  379. }
  380. .popover.wide {
  381. max-width: 1000px;
  382. min-width: 1000px;
  383. }
  384. .popover.wide .popover-wrapper {
  385. max-height: 400px;
  386. overflow: auto;
  387. }
  388. .popover.medium {
  389. max-width: 600px;
  390. min-width: 250px;
  391. }
  392. .popover .section {
  393. border-top: 1px solid #eeeeee;
  394. }
  395. .center {
  396. text-align: center;
  397. }
  398. .popover .center .btn, .popover .center .btn-group > .btn:hover, .popover .center .btn-group > .btn:focus {
  399. border-color: #ffffff;
  400. }
  401. /* Navigation */
  402. .navbar {
  403. background-color: #1f3245;
  404. border: none;
  405. min-height: 40px;
  406. }
  407. .navbar .btn-group .btn-default {
  408. border: none;
  409. color: #ffffff;
  410. background-color: transparent;
  411. padding-top: 0px;
  412. padding-bottom: 0px;
  413. line-height: 40px;
  414. -webkit-border-radius: 0px;
  415. -moz-border-radius: 0px;
  416. border-radius: 0px;
  417. font-size: 13px;
  418. }
  419. .navbar .btn-group .btn-default:hover, .navbar .btn-group .btn-default:focus {
  420. background-color: #121212;
  421. }
  422. .navbar .btn-group .btn-default {
  423. border: none;
  424. color: #ffffff;
  425. background-color: transparent;
  426. }
  427. .navbar .btn-group .btn-icon {
  428. font-size: 22px;
  429. }
  430. .navbar-header .navbar-brand {
  431. padding-top: 0px;
  432. line-height: 40px;
  433. height: 40px;
  434. width: 180px;
  435. }
  436. .navbar-nav {
  437. height: 40px;
  438. margin-left: 50px;
  439. }
  440. .navbar-inverse .navbar-nav > li > a {
  441. color: #a8bac1;
  442. }
  443. .navbar-inverse .navbar-nav > .active > a {
  444. background-color: #1f3245;
  445. }
  446. .navbar-nav > li > a {
  447. line-height: 20px;
  448. padding: 10px;
  449. font-size: 17px;
  450. padding: 10px 35px 10px 35px;
  451. color: #ffffff;
  452. }
  453. .navbar-nav > li.active:after {
  454. top: 100%;
  455. left: 50%;
  456. content: " ";
  457. height: 0;
  458. width: 0;
  459. position: absolute;
  460. pointer-events: none;
  461. border: 6px solid rgba(0, 0, 0, 0);
  462. border-top-color: #1f3245;
  463. margin-left: -6px;
  464. }
  465. .navbar-nav > li.active:hover:after {
  466. border-top-color: #000000;
  467. }
  468. .navbar-nav > li.active {
  469. background-color: #000000;
  470. position: relative;
  471. }
  472. .navbar-nav > li.active > a {
  473. color: #2980b9;
  474. }
  475. /* Sub header */
  476. .subheader {
  477. background-color: #e8edf1;
  478. min-height: 60px;
  479. border-bottom: 1px solid #a4acb9;
  480. }
  481. .subheader > div > .btn-group {
  482. margin: 12px 15px 0px 0px;
  483. }
  484. .subheader h2 {
  485. font-family: 'Titillium Web', sans-serif;
  486. color: #1a1a1a;
  487. font-size: 20px;
  488. font-weight: normal;
  489. padding: 19px 0px 5px 10px;
  490. margin-top: 0px;
  491. }
  492. .subheader .version {
  493. font-weight: bold;
  494. color: #2980b9;
  495. font-size: 110%;
  496. padding-left: 5px;
  497. line-height: 1;
  498. padding-right: 5px;
  499. border-right: 1px solid #a4acb9;
  500. margin-right: 5px;
  501. }
  502. .subheader .btn {
  503. border-color: #e8edf1;
  504. }
  505. .subheader a.btn:hover, .subheader a.btn:focus {
  506. border-color: #e8edf1;
  507. color: #ffffff;
  508. }
  509. .subheader .dropdown-menu .detail {
  510. vertical-align:middle;
  511. color: #1a1a1a;
  512. }
  513. .subheader p {
  514. font-size: 14px;
  515. color: #1a1a1a;
  516. word-wrap:break-word;
  517. }
  518. .subheader p.hint a {
  519. cursor: pointer;
  520. color: #1a1a1a;
  521. }
  522. .subheader .details.subheader .details {
  523. margin-bottom: 5px;
  524. margin-left: -1px;
  525. border-right: 1px solid #a4acb9;
  526. border-left: 1px solid #a4acb9;
  527. padding: 0px 15px 5px 15px;
  528. }
  529. .subheader .details:first-child {
  530. border-left: none;
  531. }
  532. .subheader .details:last-child {
  533. border-right: none;
  534. }
  535. .subheader .details > span, span.detail {
  536. font-size: 13px;
  537. display: block;
  538. padding-bottom: 5px;
  539. }
  540. .subheader .details p {
  541. font-size: 13px;
  542. }
  543. .subheader .related {
  544. float: right;
  545. margin: 0 -10px 10px 10px;
  546. }
  547. .subheader .details span i, span.detail i {
  548. font-size: 90%;
  549. padding-right: 8px;
  550. }
  551. .subheader >div>.pull-right {
  552. margin-top: 12px;
  553. margin-right: 5px;
  554. }
  555. .subheader a.action {
  556. color: #1a1a1a;
  557. margin-right: 10px;
  558. line-height: 36px;
  559. text-decoration: underline;
  560. font-size: 14px;
  561. }
  562. .subheader a.action i {
  563. text-decoration: none;
  564. font-style: normal;
  565. }
  566. .subheader a:hover {
  567. color: #606b7d;
  568. }
  569. .subheader .highlight {
  570. color: #ffeeaa;
  571. }
  572. /** Custom icons **/
  573. .icon {
  574. position: relative;
  575. top: 1px;
  576. display: inline-block;
  577. font-family: 'cherokeeregular';
  578. font-style: normal;
  579. font-weight: 400;
  580. line-height: 1;
  581. -webkit-font-smoothing: antialiased;
  582. -moz-osx-font-smoothing: grayscale;
  583. }
  584. .icon-user-add:before {
  585. content: "\e008";
  586. }
  587. .icon-comment-add:before {
  588. content: "\e111";
  589. }
  590. .icon-diagram:before {
  591. content: "\e011";
  592. }
  593. .icon-caret-down:before {
  594. content: "\e114";
  595. }
  596. .icon-caret-left:before {
  597. content: "\e115";
  598. }
  599. .icon-caret-right:before {
  600. content: "\e116";
  601. }
  602. .icon-remove:before {
  603. content: "\e117";
  604. }
  605. .icon-pencil:before {
  606. content: "\270f";
  607. }
  608. .icon-caret-up:before {
  609. content: "\e118";
  610. }
  611. .icon-user:before {
  612. content: "\e119";
  613. }
  614. .icon-choice:before {
  615. content: "\e120";
  616. }
  617. .icon-move:before {
  618. content: "\e121";
  619. }
  620. .icon-mail:before {
  621. content: "\e122";
  622. }
  623. .icon-clock:before {
  624. content: "\e123";
  625. }
  626. .icon-download:before {
  627. content: "\e124";
  628. }
  629. .icon-word:before {
  630. content: "\e125";
  631. }
  632. .icon-excel:before {
  633. content: "\e126";
  634. }
  635. .icon-powerpoint:before {
  636. content: "\e127";
  637. }
  638. .icon-pdf:before {
  639. content: "\e128";
  640. }
  641. .icon-content:before {
  642. content: "\e129";
  643. }
  644. .icon-folder:before {
  645. content: "\e130";
  646. }
  647. .icon-image:before {
  648. content: "\e131";
  649. }
  650. .icon-bpmn-stencil:before {
  651. content: "\e132";
  652. }
  653. .icon-kickstart-stencil:before {
  654. content: "\e133";
  655. }
  656. .icon-form-stencil:before {
  657. content: "\e134";
  658. }
  659. .simple-list .icon-image, .related-content .icon-image {
  660. color: #484b84;
  661. }
  662. .simple-list .icon-pdf, .related-content .icon-pdf {
  663. color: #ac2020;
  664. }
  665. .simple-list .icon-powerpoint, .related-content .icon-powerpoint {
  666. color: #dc5b31;
  667. }
  668. .simple-list .icon-excel, .related-content .icon-excel {
  669. color: #13743d;
  670. }
  671. .simple-list .icon-word, .related-content .icon-word {
  672. color: #2974b8;
  673. }
  674. .simple-list .icon-content, .related-content .icon-content {
  675. color: #666666;
  676. }
  677. .loading {
  678. margin: 0px 15px;
  679. text-align: center;
  680. line-height: 34px;
  681. }
  682. .loading > div {
  683. width: 10px;
  684. height: 10px;
  685. background-color: #9fd7e5;
  686. margin: 1px;
  687. border-radius: 100%;
  688. display: inline-block;
  689. -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  690. animation: bouncedelay 1.4s infinite ease-in-out;
  691. /* Prevent first frame from flickering when animation starts */
  692. -webkit-animation-fill-mode: both;
  693. animation-fill-mode: both;
  694. }
  695. .loading .l1 {
  696. -webkit-animation-delay: -0.32s;
  697. animation-delay: -0.32s;
  698. }
  699. .loading .l2 {
  700. -webkit-animation-delay: -0.16s;
  701. animation-delay: -0.16s;
  702. }
  703. .loading-box {
  704. text-align: center;
  705. margin: 50px auto 10px auto;
  706. padding: 20px 50px;
  707. max-width: 400px;
  708. }
  709. .loading-box span {
  710. font-size: 16px;
  711. color: #333333;
  712. }
  713. @-webkit-keyframes bouncedelay {
  714. 0%, 80%, 100% { -webkit-transform: scale(0.0) }
  715. 40% { -webkit-transform: scale(1.0) }
  716. }
  717. @keyframes bouncedelay {
  718. 0%, 80%, 100% {
  719. transform: scale(0.0);
  720. -webkit-transform: scale(0.0);
  721. } 40% {
  722. transform: scale(1.0);
  723. -webkit-transform: scale(1.0);
  724. }
  725. }
  726. /** Alerts */
  727. .alert-wrapper {
  728. }
  729. .alert-wrapper {
  730. position: fixed;
  731. top: 40px;
  732. left: 0;
  733. right: 0;
  734. z-index: 1010;
  735. }
  736. .alert-wrapper.no-header {
  737. top: 0px;
  738. }
  739. .alert {
  740. text-align: center;
  741. width: 100%;
  742. min-height: 20px;
  743. background-color: #eef4d7;
  744. background-color: rgba(238, 244, 215, .7);
  745. padding: 8px 10px;
  746. cursor: pointer;
  747. border: none;
  748. border-bottom: 1px solid #bcd35f;
  749. -moz-border-radius: 0px;
  750. -webkit-border-radius: 0px;
  751. border-radius: 0px;
  752. -webkit-transition: all .5s ease;
  753. -moz-transition: all .5s ease;
  754. -o-transition: all .5s ease;
  755. transition: all .5s ease;
  756. }
  757. .alert.ng-hide-remove {
  758. opacity: 1;
  759. display:block!important;
  760. }
  761. .alert.ng-hide {
  762. opacity: 0;
  763. }
  764. .alert .badge {
  765. background-color: #bcd35f;
  766. color: #ffffff;
  767. font-size: 12px;
  768. margin-top: 2px;
  769. margin-left: 10px;
  770. }
  771. .alert .glyphicon {
  772. padding-right: 8px;
  773. color: #bcd35f;
  774. }
  775. .alert span {
  776. color: #445016;
  777. font-size: 15px;
  778. }
  779. .alert.error {
  780. background-color: #e9af9f;
  781. border-color: #e4593d;
  782. background-color: rgba(228, 89, 61, .7);
  783. }
  784. .alert.error .glyphicon {
  785. color: #e4593d;
  786. }
  787. .alert.error span {
  788. color: #471313;
  789. }
  790. .alert.error .badge {
  791. background-color: #e4593d;
  792. color: #ffffff;
  793. }
  794. .wrapper {
  795. padding: 55px 15px 15px 15px;
  796. max-width: 1400px;
  797. min-width: 1024px;
  798. margin: 0 auto;
  799. }
  800. .wrapper.full {
  801. padding: 40px 0px 0px 0px;
  802. overflow: hidden;
  803. max-width: 100%;
  804. min-width: 100%;
  805. }
  806. .wrapper.no-header {
  807. padding-top: 10px;
  808. }
  809. /** Main list **/
  810. .main-list {
  811. position: relative;
  812. float: left;
  813. width: 400px;
  814. border: 1px solid #cccccc;
  815. background-color: #ffffff;
  816. margin-right: 20px;
  817. -webkit-box-shadow: 2px 2px 2px 0px rgba(220,220,220,0.50);
  818. -moz-box-shadow: 2px 2px 2px 0px rgba(220,220,220,0.50);
  819. box-shadow: 2px 2px 2px 0px rgba(220,220,220,0.50);
  820. }
  821. .main-list .sort {
  822. position: absolute;
  823. top: 12px;
  824. right: 5px;
  825. }
  826. .list-header {
  827. position: absolute;
  828. top: 0;
  829. left: 0;
  830. right: 0;
  831. background-color: #ffffff;
  832. border-bottom: 1px solid #cccccc;
  833. -webkit-box-shadow: 0px 1px 1px 0px rgba(220,220,220,0.65);
  834. -moz-box-shadow: 0px 1px 1px 0px rgba(220,220,220,0.65);
  835. box-shadow: 0px 1px 1px 0px rgba(220,220,220,0.65);
  836. z-index: 1;
  837. }
  838. .list-header .loading {
  839. position: absolute;
  840. left: 50%;
  841. margin-left: -15px;
  842. line-height: 30px;
  843. }
  844. .list-header .summary {
  845. cursor: pointer;
  846. padding: 10px 10px 10px 10px;
  847. min-height: 30px;
  848. background-color: #ffffff;
  849. }
  850. .list-header .summary > span {
  851. color: #373e48;
  852. }
  853. .list-header .summary .divider {
  854. content: '&bull';
  855. font-size: 70%;
  856. line-height: 1;
  857. font-style: normal;
  858. padding: 0 5px;
  859. }
  860. .list-header .form-group {
  861. margin-bottom: 10px;
  862. position: relative;
  863. }
  864. .selection {
  865. position: relative;
  866. margin: 0;
  867. padding: 6px 8px;
  868. border: 1px solid #cccccc;
  869. -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  870. -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  871. box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  872. background-color: #ffffff;
  873. font-size: 14px;
  874. cursor: pointer;
  875. }
  876. .selection .glyphicon, .selection .icon {
  877. padding-right: 5px;
  878. }
  879. .selection .actions {
  880. float: right;
  881. }
  882. .selection .actions.no-upload {
  883. float: left;
  884. margin-right: 10px;
  885. }
  886. .selection.narrow {
  887. padding: 0;
  888. }
  889. .selection .pull-right {
  890. margin: 4px 4px 4px 0;
  891. }
  892. .selection.narrow .simple-list {
  893. margin-bottom: 0;
  894. padding-bottom: 0;
  895. }
  896. .selection.narrow .simple-list li {
  897. border-top: 1px dotted #eeeeee;
  898. }
  899. .selection.narrow .simple-list li:first-child {
  900. border-top: none;
  901. }
  902. .selection.narrow .no-results {
  903. padding: 6px 0 0 5px;
  904. }
  905. .selection.narrow .details {
  906. margin: 5px;
  907. border: none;
  908. }
  909. .selection.narrow .label {
  910. font-size: 13px;
  911. padding:0 10px 0 0;
  912. margin: 0;
  913. color: #666666;
  914. }
  915. .selection > .icon-caret-down {
  916. visibility: hidden;
  917. position: absolute;
  918. top: 8px;
  919. right: 5px;
  920. }
  921. .selection .empty {
  922. color: #666666;
  923. }
  924. .selection:hover > .icon-caret-down, button.selection:active > .icon-caret-down, button.selection:focus > .icon-caret-down {
  925. visibility: visible;
  926. }
  927. .selection[disabled]:hover > .icon-caret-down, button.selection[disabled]:active > .icon-caret-down, button[disabled].selection:focus > .icon-caret-down {
  928. visibility: hidden;
  929. }
  930. .selection[disabled] {
  931. background-color: #f6f6f7;
  932. color: #999999;
  933. }
  934. .selection+.dropdown-menu {
  935. width: 100%;
  936. }
  937. button.selection:active, button.selection:focus {
  938. outline: none;
  939. border-color: #acacac;
  940. }
  941. .selection.toggle {
  942. overflow: hidden;
  943. clear: both;
  944. padding: 0;
  945. }
  946. .selection.toggle .toggle-2 {
  947. width: 50%;
  948. float: left;
  949. }
  950. .selection.toggle .toggle-3 {
  951. width: 33.333%;
  952. float: left;
  953. }
  954. .selection.toggle .toggle-4 {
  955. width: 25%;
  956. float: left;
  957. }
  958. .selection.toggle .btn {
  959. border: none;
  960. border-right: 1px solid #bbbbbb;
  961. width: 100%;
  962. background-color: #eeeeee;
  963. -moz-border-radius: 0px;
  964. -webkit-border-radius: 0px;
  965. border-radius: 0px;
  966. color: #666666;
  967. -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  968. -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  969. box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  970. }
  971. .selection.toggle .btn:active, .selection.toggle .btn:focus {
  972. outline: none;
  973. color: #1a1a1a;
  974. background-color: #f8f8f8;
  975. }
  976. .selection.toggle > .active .btn {
  977. background-color: #ffffff;
  978. color: #1a1a1a;
  979. -moz-box-shadow: none;
  980. -webkit-box-shadow: none;
  981. box-shadow: none;
  982. }
  983. .selection.toggle > div:last-child .btn {
  984. border: none;
  985. }
  986. .subtle-select {
  987. padding: 6px 8px;
  988. background-color: transparent;
  989. color: #1a1a1a;
  990. text-decoration: none;
  991. }
  992. .subtle-select .icon {
  993. visibility: hidden;
  994. }
  995. .subtle-select:hover .icon {
  996. visibility: visible;
  997. }
  998. .subtle-select:hover, .header .detail a.subtle-select:hover {
  999. background-color: #ffffff;
  1000. text-decoration: none;
  1001. color:#1a1a1a;
  1002. }
  1003. .list-header .summary label, .list-header .summary .filter-action {
  1004. font-size: 11px;
  1005. font-weight: normal;
  1006. text-transform: uppercase;
  1007. margin-bottom: 0;
  1008. color: #1a1a1a;
  1009. }
  1010. .list-wrapper {
  1011. overflow: auto;
  1012. }
  1013. .main-list {
  1014. height: 100%;
  1015. overflow: hidden;
  1016. }
  1017. .main-list .nothing-to-see {
  1018. text-align: center;
  1019. padding:50px 20px;
  1020. }
  1021. .main-list .nothing-to-see span {
  1022. font-size: 17px;
  1023. }
  1024. .main-list .popover {
  1025. width: 375px;
  1026. }
  1027. .list-header .summary .filter-action:hover {
  1028. color: #2980b9;
  1029. }
  1030. .main-list .list-subheader {
  1031. margin-top: 40px;
  1032. position: relative;
  1033. border-bottom: 1px solid #f2f2f2;
  1034. }
  1035. .main-list .list-subheader > .btn-group {
  1036. margin: 10px 5px 10px 10px;
  1037. }
  1038. .full-list li.more {
  1039. padding: 10px 15px;
  1040. background-color: #ffffff;
  1041. color: #666666;
  1042. }
  1043. .full-list li.more i.icon {
  1044. font-size: 70%;
  1045. }
  1046. .full-list {
  1047. list-style: none;
  1048. padding: 0;
  1049. margin-bottom: 0;
  1050. }
  1051. .full-list li {
  1052. position: relative;
  1053. display: block;
  1054. border-bottom: 1px solid #f5f5f5;
  1055. cursor: pointer;
  1056. padding: 2px 0px 2px 0px;
  1057. }
  1058. .full-list li .badge, .simple-list li .badge{
  1059. font-size: 12px;
  1060. line-height: 12px;
  1061. padding-right: 0;
  1062. border-radius: 3px;
  1063. background-color: #e8edf1;
  1064. color: #2980b9;
  1065. background-color: transparent;
  1066. font-weight: normal;
  1067. }
  1068. .full-list li.active {
  1069. background-color: #fafafb;
  1070. }
  1071. .full-list li:hover {
  1072. background-color: #fafafb;
  1073. }
  1074. .full-list li > div:hover {
  1075. border-color: #d8dde1;
  1076. }
  1077. .full-list li > div {
  1078. margin: 0 6px 0 4px;
  1079. border-left: 4px solid #e8edf1;
  1080. min-height: 50px;
  1081. padding: 5px 5px 5px 5px;
  1082. }
  1083. .full-list li.active > div {
  1084. border-left-color: #2980b9;
  1085. }
  1086. .full-list li .title {
  1087. font-size: 16px;
  1088. margin: 0 0 0 5px;
  1089. white-space: nowrap;
  1090. overflow: hidden;
  1091. text-overflow: ellipsis;
  1092. }
  1093. .full-list li .summary {
  1094. clear: both;
  1095. margin: 3px 5px 0px 5px;
  1096. font-size: 13px;
  1097. color: #1a1a1a;
  1098. white-space: nowrap;
  1099. width: 100%;
  1100. overflow: hidden;
  1101. text-overflow: ellipsis;
  1102. }
  1103. .full-list li .detail {
  1104. margin: 0 5px;
  1105. font-size: 12px;
  1106. color: #999999;
  1107. white-space: nowrap;
  1108. width: 100%;
  1109. overflow: hidden;
  1110. text-overflow: ellipsis;
  1111. }
  1112. .main-content {
  1113. border: 1px solid #cccccc;
  1114. height: 100%;
  1115. max-height: 100%;
  1116. overflow: hidden;
  1117. padding-bottom: 10px;
  1118. }
  1119. .main-content-wrapper {
  1120. height: 100%;
  1121. max-height: 100%;
  1122. overflow: hidden;
  1123. -webkit-box-shadow: 2px 2px 2px 0px rgba(220,220,220,0.50);
  1124. -moz-box-shadow: 2px 2px 2px 0px rgba(220,220,220,0.50);
  1125. box-shadow: 2px 2px 2px 0px rgba(220,220,220,0.50);
  1126. }
  1127. .main-content > .header {
  1128. background-color: #e8edf1;
  1129. min-height: 60px;
  1130. border-bottom: 1px solid #a4acb9;
  1131. padding: 15px 15px;
  1132. }
  1133. .main-content > .header h2 {
  1134. margin: 0 0 5px 0;
  1135. font-size: 26px;
  1136. }
  1137. .main-content > .header .btn:hover, .main-content > .header .btn:focus {
  1138. border-color: #e8edf1;
  1139. color: #ffffff;
  1140. }
  1141. .modal-header .label, .header .label {
  1142. padding: 0 3px 0 15px;
  1143. color: #1a1a1a;
  1144. font-weight: normal;
  1145. font-size: 13px;
  1146. color: #666666;
  1147. }
  1148. .header > .detail >.label:first-child {
  1149. padding-left: 0;
  1150. }
  1151. .header .detail a {
  1152. color: #1a1a1a;
  1153. }
  1154. .header .detail a:hover {
  1155. color: #2980b9;
  1156. text-decoration: underline;
  1157. }
  1158. .jumpers {
  1159. list-style: none inside;
  1160. padding: 0 10px 10px 10px;
  1161. margin: 5px 0px 0 0px;
  1162. border-bottom: 1px solid #eeeeee;
  1163. }
  1164. .jumpers li {
  1165. display: inline-block;
  1166. border: 1px solid #e8edf1;
  1167. margin: 5px 0 0 2px;
  1168. padding: 5px 25px;
  1169. -moz-border-radius: 2px;
  1170. -webkit-border-radius: 2px;
  1171. border-radius: 2px;
  1172. cursor: pointer;
  1173. }
  1174. .jumpers li.pending {
  1175. border: 1px dotted #d8dde1;
  1176. }
  1177. .jumpers li:hover {
  1178. background-color: #f8f8f9;
  1179. }
  1180. .jumpers li.selected {
  1181. color: white;
  1182. background-color: #2980b9;
  1183. }
  1184. .jumpers li span {
  1185. background-color: #f2f2f2;
  1186. padding: 1px 5px;
  1187. margin-left: 5px;
  1188. -moz-border-radius: 2px;
  1189. -webkit-border-radius: 2px;
  1190. border-radius: 2px;
  1191. color: #999999;
  1192. }
  1193. .jumpers li:hover span {
  1194. background-color: #e2e2e2;
  1195. }
  1196. .section {
  1197. margin: 10px 0;
  1198. padding: 10px 0 0px 0;
  1199. min-height: 120px;
  1200. }
  1201. .section.pack {
  1202. min-height: inherit;
  1203. }
  1204. .col-xs-12.seperator {
  1205. height: 1px;
  1206. border-top: 1px solid #eeeeee;
  1207. margin: 5px 0;
  1208. }
  1209. .section > h3 {
  1210. position: relative;
  1211. margin: 0px;
  1212. font-size: 18px;
  1213. cursor: pointer;
  1214. }
  1215. .section > h3 .action > a {
  1216. font-weight: bold;
  1217. padding-left: 5px;
  1218. color: #999999;
  1219. }
  1220. .section > .form-group, .section > div > .form-group {
  1221. margin: 5px 0;
  1222. }
  1223. h3+div > .dropzone {
  1224. margin-top: 5px;
  1225. }
  1226. .dropzone {
  1227. position: relative;
  1228. margin: 0px;
  1229. padding: 10px 10px;
  1230. text-align: center;
  1231. }
  1232. .dropzone .error, .error-message {
  1233. background-color: #e9af9f;
  1234. border: 1px solid #e4593d;
  1235. background-color: rgba(228, 89, 61, .7);
  1236. padding: 5px;
  1237. margin-bottom: 5px;
  1238. font-size: 14px;
  1239. color:white;
  1240. }
  1241. .dropzone.selection {
  1242. text-align: left;
  1243. padding-left: 5px;
  1244. }
  1245. .dropzone .select-file {
  1246. line-height: 40px;
  1247. }
  1248. .dropzone.dragover {
  1249. border: 1px dotted #2980b9;
  1250. }
  1251. .dropzone .message {
  1252. color: #999999;
  1253. line-height: 22px;
  1254. visibility: hidden;
  1255. position: absolute;
  1256. top: 20px;
  1257. left: 10px;
  1258. right: 10px;
  1259. text-align: center;
  1260. }
  1261. .dropzone.dragover .message {
  1262. color: #2980b9;
  1263. font-size: 20px;
  1264. visibility: inherit;
  1265. }
  1266. .dropzone.uploading .message {
  1267. visibility: hidden;
  1268. }
  1269. .dropzone input[type=file] {
  1270. width: 100%;
  1271. display: none;
  1272. visibility: hidden;
  1273. }
  1274. .dropzone.dragover input, .dropzone.dragover .account, .dropzone.dragover .select-file {
  1275. visibility: hidden;
  1276. }
  1277. .dropzone .account {
  1278. float: left;
  1279. text-align: center;
  1280. width: 50px;
  1281. padding: 0px 0px 0px 3px;
  1282. border-left: 1px solid #eeeeee;
  1283. }
  1284. .dropzone .no-upload .account {
  1285. border-left: none;
  1286. border-right: 1px solid #eeeeee;
  1287. }
  1288. .dropzone .account:first-child {
  1289. padding-left: 0;
  1290. }
  1291. .dropzone .account > div {
  1292. height: 40px;
  1293. cursor: pointer;
  1294. }
  1295. .dropzone.uploading .account > div {
  1296. cursor: not-allowed;
  1297. }
  1298. .account .google-drive {
  1299. background: transparent url('../../images/google-drive.png') 50% 50% no-repeat;
  1300. }
  1301. .account .alfresco {
  1302. background: transparent url('../../images/alfresco.png') 50% 50% no-repeat;
  1303. }
  1304. .account .alfresco-cloud {
  1305. background: transparent url('../../images/alfresco-cloud.png') 50% 50% no-repeat;
  1306. }
  1307. .dropzone .loading {
  1308. position: absolute;
  1309. left: 50%;
  1310. margin-left: -15px;
  1311. line-height: 30px;
  1312. top: 0px;
  1313. }
  1314. .dropzoneIE9.selectionIE9 {
  1315. text-align: left;
  1316. padding-left: 5px;
  1317. }
  1318. .dropzoneIE9 {
  1319. position: relative;
  1320. margin: 0px;
  1321. padding: 10px 10px;
  1322. text-align: center;
  1323. }
  1324. .selectionIE9 {
  1325. position: relative;
  1326. margin: 0;
  1327. padding: 6px 8px;
  1328. border: 1px solid #cccccc;
  1329. -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  1330. -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  1331. box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  1332. background-color: #ffffff;
  1333. font-size: 14px;
  1334. cursor: pointer;
  1335. }
  1336. .selectionIE9 .actions {
  1337. float: right;
  1338. }
  1339. .dropzoneIE9 .account:first-child {
  1340. padding-left: 0;
  1341. }
  1342. .dropzoneIE9 .account {
  1343. float: left;
  1344. text-align: center;
  1345. width: 50px;
  1346. padding: 0px 0px 0px 3px;
  1347. border-left: 1px solid #eeeeee;
  1348. }
  1349. .dropzoneIE9 .account > div {
  1350. height: 40px;
  1351. cursor: pointer;
  1352. }
  1353. .dropzoneIE9 .select-file {
  1354. line-height: 40px;
  1355. }
  1356. .modal-backdrop {
  1357. background-color: #999999; /** Non alpha-supporting browser fallback */
  1358. background-color: rgba(100, 100, 100, .75);
  1359. background-image: url('../../images/glasspane.png');
  1360. }
  1361. .modal-content {
  1362. -webkit-border-radius: 0;
  1363. -moz-border-radius: 0;
  1364. border-radius: 0;
  1365. border: none;
  1366. }
  1367. .modal-dialog.wide {
  1368. margin-left: auto;
  1369. margin-right: auto;
  1370. width: 80%;
  1371. max-width: 1200px;
  1372. }
  1373. .modal-body {
  1374. }
  1375. .modal .modal-header {
  1376. position: relative;
  1377. background-color: #e8edf1;
  1378. min-height: 60px;
  1379. border-bottom: 1px solid #a4acb9;
  1380. padding: 15px 15px;
  1381. }
  1382. .modal-header .actions {
  1383. margin-right: 20px;
  1384. }
  1385. .modal-body .form-actions {
  1386. border-top: 1px solid #eeeeee;
  1387. margin: 0 -30px;
  1388. padding: 10px 10px 10px 10px;
  1389. }
  1390. .modal-body.includes-footer {
  1391. padding-bottom: 0px;
  1392. }
  1393. .fullscreen .modal-header h3 {
  1394. margin: 0 0 5px 0px;
  1395. font-size: 22px;
  1396. }
  1397. .fullscreen .modal-header h3 .summary {
  1398. font-size: 13px;
  1399. }
  1400. .read-only-select {
  1401. overflow: auto;
  1402. }
  1403. .read-only-select .selection {
  1404. overflow: hidden;
  1405. width:100%;
  1406. text-align: left;
  1407. }
  1408. /** people select */
  1409. .people-select {
  1410. overflow: auto;
  1411. max-width: 300px;
  1412. }
  1413. .popover .people-select {
  1414. font-size: 13px;
  1415. }
  1416. .popover .people-select .simple-list {
  1417. height: 180px;
  1418. overflow: auto;
  1419. border-bottom: 1px solid #eeeeee;
  1420. }
  1421. .people-select-link {
  1422. color: #428bca;
  1423. cursor: pointer;
  1424. }
  1425. /** date select */
  1426. .form-field {
  1427. overflow: auto;
  1428. max-width: 100%;
  1429. }
  1430. .popover .form-field {
  1431. font-size: 13px;
  1432. }
  1433. .popover .form-field .simple-list {
  1434. height: 180px;
  1435. overflow: auto;
  1436. border-bottom: 1px solid #eeeeee;
  1437. }
  1438. .form-field-link {
  1439. color: #428bca;
  1440. cursor: pointer;
  1441. }
  1442. .dropdown-menu.datepicker .calendar-grid .btn {
  1443. background-color: #ffffff;
  1444. color: #1a1a1a;
  1445. border: none;
  1446. -webkit-border-radius: 0;
  1447. -moz-border-radius: 0;
  1448. border-radius: 0;
  1449. }
  1450. .dropdown-menu.datepicker th {
  1451. background-color: #e8edf1;
  1452. }
  1453. .dropdown-menu.datepicker th .btn {
  1454. background-color: #e8edf1;
  1455. color: #1a1a1a;
  1456. border-color: #e8edf1;
  1457. }
  1458. .dropdown-menu.datepicker th .btn:hover, .dropdown-menu.datepicker th .btn:focus {
  1459. color: #2980b9;
  1460. }
  1461. .dropdown-menu.datepicker .calendar-grid .btn:hover, .dropdown-menu.datepicker .calendar-grid .btn:focus {
  1462. background-color: #f8f8f9;
  1463. border: none;
  1464. color: #1a1a1a;
  1465. }
  1466. .dropdown-menu.datepicker .calendar-grid .btn-today, .dropdown-menu.datepicker .calendar-grid .btn-today:focus, .dropdown-menu.datepicker .calendar-grid .btn-today:hover {
  1467. background-color: #b8dde7;
  1468. }
  1469. .dropdown-menu.datepicker .calendar-grid .btn-primary, .dropdown-menu.datepicker .calendar-grid .btn-primary:hover, .dropdown-menu.datepicker .calendar-grid .btn-primary:focus {
  1470. background-color: #2980b9;
  1471. color: #ffffff;
  1472. }
  1473. .dropdown-menu.datepicker .custom-buttons .btn {
  1474. border-color: #ffffff;
  1475. }
  1476. .comments > li {
  1477. padding: 8px 6px;
  1478. }
  1479. .comments > li > .title {
  1480. color: #888888;
  1481. font-size: 13px;
  1482. margin: 0 0 3px 0;
  1483. }
  1484. .comments > li > .message {
  1485. text-align: left;
  1486. color: #3a3a3a;
  1487. padding-left: 3px;
  1488. word-wrap: break-word;
  1489. }
  1490. .comments > li > .message:before, .comments > li > .message:after {
  1491. font-style: italic;
  1492. }
  1493. .comments > li > .message:before {
  1494. content: open-quote;
  1495. padding-right: 2px;
  1496. }
  1497. .comments > li > .message:after {
  1498. content: close-quote;
  1499. padding-left: 2px;
  1500. }
  1501. .form-wrapper {
  1502. margin: 10px 0 20px 0;
  1503. }
  1504. .form-wrapper .well-sm {
  1505. padding: 6px 9px;
  1506. }
  1507. .checklist.simple-list .user-picture {
  1508. margin-top: 2px;
  1509. width: 32px;
  1510. height: 32px;
  1511. background-size: 32px 32px;
  1512. line-height: 32px;
  1513. font-size: 15px;
  1514. }
  1515. .checklist.simple-list > li {
  1516. cursor: pointer;
  1517. }
  1518. .diagram-popup-wrapper {
  1519. min-width: 1000px;
  1520. max-width: 1400px;
  1521. min-height: 300px;
  1522. z-index: 1005;
  1523. }
  1524. .model-preview-wrapper {
  1525. width: 100%;
  1526. height:100%;
  1527. padding: 10px;
  1528. overflow: auto;
  1529. }
  1530. .upload-image-form {
  1531. margin: 0 20% 0 20%;
  1532. text-align: center;
  1533. }
  1534. .upload-image-dropbox {
  1535. background: #F8F8F8;
  1536. border: 5px dashed #DDD;
  1537. color: #8e8e8e;
  1538. text-align: center;
  1539. padding: 35px 0 35px 0;
  1540. margin: 20px 0 20px 0;
  1541. }
  1542. .upload-image-dropbox.dragover {
  1543. border: 5px dashed #55ae4d;
  1544. color: #55ae4d;
  1545. }
  1546. .google-drive-browse .simple-list, .alfresco-cloud-browse .simple-list {
  1547. position: relative;
  1548. max-height: 350px;
  1549. min-height: 350px;
  1550. height: 350px;
  1551. overflow: auto;
  1552. }
  1553. .alfresco-cloud-browse .col-xs-6 {
  1554. padding: 0 0 0 10px;
  1555. }
  1556. .alfresco-cloud-browse .col-xs-6:first-child {
  1557. padding-left: 0;
  1558. }
  1559. .crumbs {
  1560. margin: 5px 0px;
  1561. color: #666666;
  1562. }
  1563. .crumb {
  1564. color: #666666;
  1565. cursor: pointer;
  1566. }
  1567. .crumb i {
  1568. font-size: 80%;
  1569. }
  1570. .crumb:hover {
  1571. color: #2980b9;
  1572. text-decoration: underline;
  1573. }
  1574. .crumb:hover i {
  1575. color: #666666;
  1576. }
  1577. /** Apps */
  1578. .apps-wrapper {
  1579. padding-top: 55px;
  1580. width: 1200px;
  1581. margin: 0 auto;
  1582. }
  1583. .app-wrapper {
  1584. float: left;
  1585. width: 300px;
  1586. }
  1587. .app {
  1588. margin: 10px 10px;
  1589. height: 200px;
  1590. border-left: 8px solid transparent;
  1591. overflow: hidden;
  1592. position: relative;
  1593. cursor: pointer;
  1594. }
  1595. .app .backdrop, .app .logo {
  1596. position: absolute;
  1597. text-shadow: none;
  1598. -webkit-transition: all 1s ease;
  1599. -moz-transition: all 1s ease;
  1600. -o-transition: all 1s ease;
  1601. transition: all 1s ease;
  1602. z-index: 4;
  1603. }
  1604. .app .backdrop {
  1605. font-size: 300px;
  1606. right: 50px;
  1607. top: -100px;
  1608. }
  1609. .app .logo {
  1610. font-size: 150px;
  1611. right: 20px;
  1612. top: 20px;
  1613. }
  1614. .app:hover .backdrop {
  1615. top: -55px;
  1616. }
  1617. .app:hover .logo {
  1618. right: -10px
  1619. }
  1620. .app h3 {
  1621. margin: 15px 10px 0px 10px;
  1622. position: relative;
  1623. }
  1624. .app-content {
  1625. color: #ffffff;
  1626. position: relative;
  1627. z-index: 5;
  1628. }
  1629. .app-content p {
  1630. display: none;
  1631. margin: 10px 0px 10px 10px;
  1632. padding: 10px 10px 0 0;
  1633. border-top: 1px solid #ffffff;
  1634. border-color: rgba(255,255,255, .1);
  1635. }
  1636. .app:hover .app-content p {
  1637. display: inherit;
  1638. }
  1639. .app .actions {
  1640. position: absolute;
  1641. top: 0px;
  1642. right: 0;
  1643. width: 40px;
  1644. height: 49px;
  1645. background-color: transparent;
  1646. line-height: 50px;
  1647. text-align: center;
  1648. z-index: 6;
  1649. visibility: hidden;
  1650. font-size: 16px;
  1651. color: #ffffff;
  1652. border-right: 2px solid transparent;
  1653. border-top: 2px solid transparent;
  1654. }
  1655. .app .selection-marker {
  1656. position: absolute;
  1657. top: 0px;
  1658. right: 5px;
  1659. width: 50px;
  1660. height: 48px;
  1661. font-size: 45px;
  1662. color: #ffffff;
  1663. z-index: 6;
  1664. }
  1665. .app:hover .actions {
  1666. visibility: visible;
  1667. }
  1668. .app .actions:hover {
  1669. background-color: #ffffff;
  1670. background-color: rgba(255,255,255, .7);
  1671. text-shadow: none;
  1672. }
  1673. .app .actions+.dropdown-menu {
  1674. background-color: #ffffff;
  1675. background-color: rgba(255,255,255, .8);
  1676. text-shadow: none;
  1677. }
  1678. .app-indicator {
  1679. position: relative;
  1680. padding-left: 20px;
  1681. color: #ffffff;
  1682. }
  1683. .app-indicator > span {
  1684. margin-right: 10px;
  1685. margin-left: 25px;
  1686. font-size: 16px;
  1687. padding-right: 15px;
  1688. white-space: nowrap;
  1689. text-overflow: ellipsis;
  1690. }
  1691. .app-indicator > .btn-group {
  1692. border-left: 1px solid #999999;
  1693. }
  1694. .app-indicator > i {
  1695. position: absolute;
  1696. left: 5px;
  1697. top:6px;
  1698. font-size: 28px;
  1699. color: #ffffff;
  1700. color: rgba(255, 255, 255, .5);
  1701. }
  1702. .popover.app-links-popover {
  1703. margin-top: 0;
  1704. padding: 5px;
  1705. width: 446px;
  1706. max-width: 446px;
  1707. overflow: auto;
  1708. max-height: calc(100vh - 40px);
  1709. }
  1710. .app-link-wrapper {
  1711. float: left;
  1712. display: inline-block;
  1713. min-height: 80px;
  1714. width: 90px;
  1715. margin: 5px;
  1716. text-align: center;
  1717. padding: 5px;
  1718. padding-top: 10px;
  1719. -webkit-transition: background-color 0.5s ease-out;
  1720. -moz-transition: background-color 0.5s ease-out;
  1721. -o-transition: background-color 0.5s ease-out;
  1722. transition: background-color 0.5s ease-out;
  1723. cursor: pointer;
  1724. }
  1725. .app-link-wrapper:hover,
  1726. .app-link-wrapper:active {
  1727. background-color: #eee;
  1728. }
  1729. .app-link-name {
  1730. word-wrap: break-word;
  1731. color: black;
  1732. opacity: 0.9;
  1733. margin-top: 5px;
  1734. }
  1735. .app-link-icon {
  1736. border-radius: 50%;
  1737. height: 50px;
  1738. width: 50px;
  1739. display: inline-block;
  1740. }
  1741. .app-link-icon > i {
  1742. color: white;
  1743. opacity: 0.5;
  1744. border-radius: 50%;
  1745. margin-bottom: 5px;
  1746. padding: 10px;
  1747. font-size: 30px;
  1748. }
  1749. .app-link-icon > span {
  1750. color: black;
  1751. }
  1752. .app-link-icon.theme-1,
  1753. .app.theme-1 {
  1754. background-color: #269abc;
  1755. }
  1756. .app.theme-1 {
  1757. border-color: #269abc;
  1758. text-shadow: 1px 1px #168aac;
  1759. }
  1760. .app-indicator.theme-1 {
  1761. background: #269abc;
  1762. background: -moz-linear-gradient(left, rgba(38,154,188,0) 0%, rgba(38,154,188,0.02) 1%, rgba(38,154,188,1) 30%, rgba(38,154,188,1) 100%); /* FF3.6+ */
  1763. background: -webkit-linear-gradient(left, rgba(38,154,188,0) 0%,rgba(38,154,188,0.02) 1%,rgba(38,154,188,1) 30%,rgba(38,154,188,1) 100%); /* Chrome10+,Safari5.1+ */
  1764. background: -ms-linear-gradient(left, rgba(38,154,188,0) 0%,rgba(38,154,188,0.02) 1%,rgba(38,154,188,1) 30%,rgba(38,154,188,1) 100%); /* IE10+ */
  1765. background: linear-gradient(to right, rgba(38,154,188,0) 0%,rgba(38,154,188,0.02) 1%,rgba(38,154,188,1) 30%,rgba(38,154,188,1) 100%); /* W3C */
  1766. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00269abc', endColorstr='#269abc',GradientType=1 ); /* IE6-9 */
  1767. }
  1768. .app-indicator.theme-1 > .btn-group {
  1769. border-color: #168aac;
  1770. }
  1771. .app-indicator.theme-1 > .btn-group .btn-default:hover, .app-indicator.theme-1 > .btn-group .btn-default:focus {
  1772. background-color: #168aac;
  1773. }
  1774. .app.theme-1 .actions+.dropdown-menu li:hover a {
  1775. background-color: #168aac;
  1776. }
  1777. .app.theme-1 .backdrop i {
  1778. color: #2a9ec0;
  1779. }
  1780. .app.theme-1 .logo i {
  1781. color: #168aac;
  1782. }
  1783. .active > .app.preview.theme-1, .app.theme-1:hover {
  1784. border-color: #168aac;
  1785. }
  1786. .app.theme-1 .actions:hover {
  1787. border-color: #269abc;
  1788. color: #269abc;
  1789. }
  1790. .app-link-icon.theme-2,
  1791. .app.theme-2 {
  1792. background-color: #7da9b0;
  1793. }
  1794. .app.theme-2 {
  1795. border-color: #7da9b0;
  1796. text-shadow: 1px 1px #6d99a0;
  1797. }
  1798. .app-indicator.theme-2 {
  1799. background: #7da9b0;
  1800. background: -moz-linear-gradient(left, rgba(125,169,176,0) 0%, rgba(125,169,176,0.02) 1%, rgba(125,169,176,1) 30%, rgba(125,169,176,1) 100%); /* FF3.6+ */
  1801. background: -webkit-linear-gradient(left, rgba(125,169,176,0) 0%,rgba(125,169,176,0.02) 1%,rgba(125,169,176,1) 30%,rgba(125,169,176,1) 100%); /* Chrome10+,Safari5.1+ */
  1802. background: -ms-linear-gradient(left, rgba(125,169,176,0) 0%,rgba(125,169,176,0.02) 1%,rgba(125,169,176,1) 30%,rgba(125,169,176,1) 100%); /* IE10+ */
  1803. background: linear-gradient(to right, rgba(125,169,176,0) 0%,rgba(125,169,176,0.02) 1%,rgba(125,169,176,1) 30%,rgba(125,169,176,1) 100%); /* W3C */
  1804. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00269abc', endColorstr='#269abc',GradientType=1 ); /* IE6-9 */
  1805. }
  1806. .app-indicator.theme-2 > .btn-group {
  1807. border-color: #6d99a0;
  1808. }
  1809. .app-indicator.theme-2 > .btn-group .btn-default:hover, .app-indicator.theme-2 > .btn-group .btn-default:focus {
  1810. background-color: #6d99a0;
  1811. }
  1812. .app.theme-2 .actions+.dropdown-menu li:hover a {
  1813. background-color: #6d99a0;
  1814. }
  1815. .app.theme-2 .backdrop i {
  1816. color: #81adb4;
  1817. }
  1818. .app.theme-2 .logo i {
  1819. color: #6d99a0;
  1820. }
  1821. .active > .app.preview.theme-2, .app.theme-2:hover {
  1822. border-color: #6d99a0;
  1823. }
  1824. .app.theme-2 .actions:hover {
  1825. border-color: #7da9b0;
  1826. color: #7da9b0;
  1827. }
  1828. .app-link-icon.theme-3,
  1829. .app.theme-3 {
  1830. background-color: #7689ab;
  1831. }
  1832. .app.theme-3 {
  1833. border-color: #7689ab;
  1834. text-shadow: 1px 1px #66799b;
  1835. }
  1836. .app-indicator.theme-3 {
  1837. background: #7689ab;
  1838. background: -moz-linear-gradient(left, rgba(118,137,171,0) 0%, rgba(118,137,171,0.02) 1%, rgba(118,137,171,1) 30%, rgba(118,137,171,1) 100%); /* FF3.6+ */
  1839. background: -webkit-linear-gradient(left, rgba(118,137,171,0) 0%,rgba(118,137,171,0.02) 1%,rgba(118,137,171,1) 30%,rgba(118,137,171,1) 100%); /* Chrome10+,Safari5.1+ */
  1840. background: -ms-linear-gradient(left, rgba(118,137,171,0) 0%,rgba(118,137,171,0.02) 1%,rgba(118,137,171,1) 30%,rgba(118,137,171,1) 100%); /* IE10+ */
  1841. background: linear-gradient(to right, rgba(118,137,171,0) 0%,rgba(118,137,171,0.02) 1%,rgba(118,137,171,1) 30%,rgba(118,137,171,1) 100%); /* W3C */
  1842. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00269abc', endColorstr='#269abc',GradientType=1 ); /* IE6-9 */
  1843. }
  1844. .app-indicator.theme-3 > .btn-group {
  1845. border-color: #66799b;
  1846. }
  1847. .app-indicator.theme-3 > .btn-group .btn-default:hover, .app-indicator.theme-3 > .btn-group .btn-default:focus {
  1848. background-color: #66799b;
  1849. }
  1850. .app.theme-3 .actions+.dropdown-menu li:hover a {
  1851. background-color: #66799b;
  1852. }
  1853. .app.theme-3 .backdrop i {
  1854. color: #7a8daf;
  1855. }
  1856. .app.theme-3 .logo i {
  1857. color: #66799b;
  1858. }
  1859. .active > .app.preview.theme-3, .app.theme-3:hover {
  1860. border-color: #66799b;
  1861. }
  1862. .app.theme-3 .actions:hover {
  1863. border-color: #7689ab;
  1864. color: #7689ab;
  1865. }
  1866. .app-link-icon.theme-4,
  1867. .app.theme-4 {
  1868. background-color: #c74e3e;
  1869. }
  1870. .app.theme-4 {
  1871. border-color: #c74e3e;
  1872. text-shadow: 1px 1px #b73e2e;
  1873. }
  1874. .app-indicator.theme-4 {
  1875. background: #c74e3e;
  1876. background: -moz-linear-gradient(left, rgba(199,78,62,0) 0%, rgba(199,78,62,0.02) 1%, rgba(199,78,62,1) 30%, rgba(199,78,62,1) 100%); /* FF3.6+ */
  1877. background: -webkit-linear-gradient(left, rgba(199,78,62,0) 0%,rgba(199,78,62,0.02) 1%,rgba(199,78,62,1) 30%,rgba(199,78,62,1) 100%); /* Chrome10+,Safari5.1+ */
  1878. background: -ms-linear-gradient(left, rgba(199,78,62,0) 0%,rgba(199,78,62,0.02) 1%,rgba(199,78,62,1) 30%,rgba(199,78,62,1) 100%); /* IE10+ */
  1879. background: linear-gradient(to right, rgba(199,78,62,0) 0%,rgba(199,78,62,0.02) 1%,rgba(199,78,62,1) 30%,rgba(199,78,62,1) 100%); /* W3C */
  1880. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00269abc', endColorstr='#269abc',GradientType=1 ); /* IE6-9 */
  1881. }
  1882. .app-indicator.theme-4 > .btn-group {
  1883. border-color: #b73e2e;
  1884. }
  1885. .app-indicator.theme-4 > .btn-group .btn-default:hover, .app-indicator.theme-4 > .btn-group .btn-default:focus {
  1886. background-color: #b73e2e;
  1887. }
  1888. .app.theme-4 .actions+.dropdown-menu li:hover a {
  1889. background-color: #b73e2e;
  1890. }
  1891. .app.theme-4 .backdrop i {
  1892. color: #cb5245;
  1893. }
  1894. .app.theme-4 .logo i {
  1895. color: #b73e2e;
  1896. }
  1897. .active > .app.preview.theme-4, .app.theme-4:hover {
  1898. border-color: #b73e2e;
  1899. }
  1900. .app.theme-4 .actions:hover {
  1901. border-color: #c74e3e;
  1902. color: #c74e3e;
  1903. }
  1904. .app-link-icon.theme-5,
  1905. .app.theme-5 {
  1906. background-color: #fab96c;
  1907. }
  1908. .app.theme-5 {
  1909. border-color: #fab96c;
  1910. text-shadow: 1px 1px #eaa95c;
  1911. }
  1912. .app-indicator.theme-5 {
  1913. background: #fab96c;
  1914. background: -moz-linear-gradient(left, rgba(250,185,108,0) 0%, rgba(250,185,108,0.02) 1%, rgba(250,185,108,1) 30%, rgba(250,185,108,1) 100%); /* FF3.6+ */
  1915. background: -webkit-linear-gradient(left, rgba(250,185,108,0) 0%,rgba(250,185,108,0.02) 1%,rgba(250,185,108,1) 30%,rgba(250,185,108,1) 100%); /* Chrome10+,Safari5.1+ */
  1916. background: -ms-linear-gradient(left, rgba(250,185,108,0) 0%,rgba(250,185,108,0.02) 1%,rgba(250,185,108,1) 30%,rgba(250,185,108,1) 100%); /* IE10+ */
  1917. background: linear-gradient(to right, rgba(250,185,108,0) 0%,rgba(250,185,108,0.02) 1%,rgba(250,185,108,1) 30%,rgba(250,185,108,1) 100%); /* W3C */
  1918. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00269abc', endColorstr='#269abc',GradientType=1 ); /* IE6-9 */
  1919. }
  1920. .app-indicator.theme-5 > .btn-group {
  1921. border-color: #eaa95c;
  1922. }
  1923. .app-indicator.theme-5 > .btn-group .btn-default:hover, .app-indicator.theme-5 > .btn-group .btn-default:focus {
  1924. background-color: #eaa95c;
  1925. }
  1926. .app.theme-5 .actions+.dropdown-menu li:hover a {
  1927. background-color: #eaa95c;
  1928. }
  1929. .app.theme-5 .backdrop i {
  1930. color: #febd70;
  1931. }
  1932. .app.theme-5 .logo i {
  1933. color: #eaa95c;
  1934. }
  1935. .active > .app.preview.theme-5, .app.theme-5:hover {
  1936. border-color: #eaa95c;
  1937. }
  1938. .app.theme-5 .actions:hover {
  1939. border-color: #fab96c;
  1940. color: #fab96c;
  1941. }
  1942. .app-link-icon.theme-6,
  1943. .app.theme-6 {
  1944. background-color: #759d4c;
  1945. }
  1946. .app.theme-6 {
  1947. border-color: #759d4c;
  1948. text-shadow: 1px 1px #658d3c;
  1949. }
  1950. .app-indicator.theme-6 {
  1951. background: #759d4c;
  1952. background: -moz-linear-gradient(left, rgba(117,157,76,0) 0%, rgba(117,157,76,0.02) 1%, rgba(117,157,76,1) 30%, rgba(117,157,76,1) 100%); /* FF3.6+ */
  1953. background: -webkit-linear-gradient(left, rgba(117,157,76,0) 0%,rgba(117,157,76,0.02) 1%,rgba(117,157,76,1) 30%,rgba(117,157,76,1) 100%); /* Chrome10+,Safari5.1+ */
  1954. background: -ms-linear-gradient(left, rgba(117,157,76,0) 0%,rgba(117,157,76,0.02) 1%,rgba(117,157,76,1) 30%,rgba(117,157,76,1) 100%); /* IE10+ */
  1955. background: linear-gradient(to right, rgba(117,157,76,0) 0%,rgba(117,157,76,0.02) 1%,rgba(117,157,76,1) 30%,rgba(117,157,76,1) 100%); /* W3C */
  1956. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00269abc', endColorstr='#269abc',GradientType=1 ); /* IE6-9 */
  1957. }
  1958. .app-indicator.theme-6 > .btn-group {
  1959. border-color: #658d3c;
  1960. }
  1961. .app-indicator.theme-6 > .btn-group .btn-default:hover, .app-indicator.theme-6 > .btn-group .btn-default:focus {
  1962. background-color: #658d3c;
  1963. }
  1964. .app.theme-6 .actions+.dropdown-menu li:hover a {
  1965. background-color: #658d3c;
  1966. }
  1967. .app.theme-6 .backdrop i {
  1968. color: #79a150;
  1969. }
  1970. .app.theme-6 .logo i {
  1971. color: #658d3c;
  1972. }
  1973. .active > .app.preview.theme-6, .app.theme-6:hover {
  1974. border-color: #658d3c;
  1975. }
  1976. .app.theme-6 .actions:hover {
  1977. border-color: #759d4c;
  1978. color: #759d4c;
  1979. }
  1980. .app-link-icon.theme-7,
  1981. .app.theme-7 {
  1982. background-color: #b1b489;
  1983. }
  1984. .app.theme-7 {
  1985. border-color: #b1b489;
  1986. text-shadow: 1px 1px #a1a479;
  1987. }
  1988. .app-indicator.theme-7 {
  1989. background: #b1b489;
  1990. background: -moz-linear-gradient(left, rgba(177,180,137,0) 0%, rgba(177,180,137,0.02) 1%, rgba(177,180,137,1) 30%, rgba(177,180,137,1) 100%); /* FF3.6+ */
  1991. background: -webkit-linear-gradient(left, rgba(177,180,137,0) 0%,rgba(177,180,137,0.02) 1%,rgba(177,180,137,1) 30%,rgba(177,180,137,1) 100%); /* Chrome10+,Safari5.1+ */
  1992. background: -ms-linear-gradient(left, rgba(177,180,137,0) 0%,rgba(177,180,137,0.02) 1%,rgba(177,180,137,1) 30%,rgba(177,180,137,1) 100%); /* IE10+ */
  1993. background: linear-gradient(to right, rgba(177,180,137,0) 0%,rgba(177,180,137,0.02) 1%,rgba(177,180,137,1) 30%,rgba(177,180,137,1) 100%); /* W3C */
  1994. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00269abc', endColorstr='#269abc',GradientType=1 ); /* IE6-9 */
  1995. }
  1996. .app-indicator.theme-7 > .btn-group {
  1997. border-color: #a1a479;
  1998. }
  1999. .app-indicator.theme-7 > .btn-group .btn-default:hover, .app-indicator.theme-7 > .btn-group .btn-default:focus {
  2000. background-color: #a1a479;
  2001. }
  2002. .app.theme-7 .actions+.dropdown-menu li:hover a {
  2003. background-color: #a1a479;
  2004. }
  2005. .app.theme-7 .backdrop i {
  2006. color: #b5b98d;
  2007. }
  2008. .app.theme-7 .logo i {
  2009. color: #a1a479;
  2010. }
  2011. .active > .app.preview.theme-7, .app.theme-7:hover {
  2012. border-color: #a1a479;
  2013. }
  2014. .app.theme-7 .actions:hover {
  2015. border-color: #b1b489;
  2016. color: #b1b489;
  2017. }
  2018. .app-link-icon.theme-8,
  2019. .app.theme-8 {
  2020. background-color: #a17299;
  2021. }
  2022. .app.theme-8 {
  2023. border-color: #a17299;
  2024. text-shadow: 1px 1px #916289;
  2025. }
  2026. .app-indicator.theme-8 {
  2027. background: #a17299;
  2028. background: -moz-linear-gradient(left, rgba(161,114,153,0) 0%, rgba(161,114,153,0.02) 1%, rgba(161,114,153,1) 30%, rgba(161,114,153,1) 100%); /* FF3.6+ */
  2029. background: -webkit-linear-gradient(left, rgba(161,114,153,0) 0%,rgba(161,114,153,0.02) 1%,rgba(161,114,153,1) 30%,rgba(161,114,153,1) 100%); /* Chrome10+,Safari5.1+ */
  2030. background: -ms-linear-gradient(left, rgba(161,114,153,0) 0%,rgba(161,114,153,0.02) 1%,rgba(161,114,153,1) 30%,rgba(161,114,153,1) 100%); /* IE10+ */
  2031. background: linear-gradient(to right, rgba(161,114,153,0) 0%,rgba(161,114,153,0.02) 1%,rgba(161,114,153,1) 30%,rgba(161,114,153,1) 100%); /* W3C */
  2032. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00269abc', endColorstr='#269abc',GradientType=1 ); /* IE6-9 */
  2033. }
  2034. .app-indicator.theme-8 > .btn-group {
  2035. border-color: #916289;
  2036. }
  2037. .app-indicator.theme-8 > .btn-group .btn-default:hover, .app-indicator.theme-8 > .btn-group .btn-default:focus {
  2038. background-color: #916289;
  2039. }
  2040. .app.theme-8 .actions+.dropdown-menu li:hover a {
  2041. background-color: #916289;
  2042. }
  2043. .app.theme-8 .backdrop i {
  2044. color: #a5769d;
  2045. }
  2046. .app.theme-8 .logo i {
  2047. color: #916289;
  2048. }
  2049. .active > .app.preview.theme-8, .app.theme-8:hover {
  2050. border-color: #916289;
  2051. }
  2052. .app.theme-8 .actions:hover {
  2053. border-color: #a17299;
  2054. color: #a17299;
  2055. }
  2056. .app-link-icon.theme-9,
  2057. .app.theme-9 {
  2058. background-color: #696c67;
  2059. }
  2060. .app.theme-9 {
  2061. border-color: #696c67;
  2062. text-shadow: 1px 1px #595c57;
  2063. }
  2064. .app-indicator.theme-9 {
  2065. background: #696c67;
  2066. background: -moz-linear-gradient(left, rgba(105,108,103,0) 0%, rgba(105,108,103,0.02) 1%, rgba(105,108,103,1) 30%, rgba(105,108,103,1) 100%); /* FF3.6+ */
  2067. background: -webkit-linear-gradient(left, rgba(105,108,103,0) 0%,rgba(105,108,103,0.02) 1%,rgba(105,108,103,1) 30%,rgba(105,108,103,1) 100%); /* Chrome10+,Safari5.1+ */
  2068. background: -ms-linear-gradient(left, rgba(105,108,103,0) 0%,rgba(105,108,103,0.02) 1%,rgba(105,108,103,1) 30%,rgba(105,108,103,1) 100%); /* IE10+ */
  2069. background: linear-gradient(to right, rgba(105,108,103,0) 0%,rgba(105,108,103,0.02) 1%,rgba(105,108,103,1) 30%,rgba(105,108,103,1) 100%); /* W3C */
  2070. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00269abc', endColorstr='#269abc',GradientType=1 ); /* IE6-9 */
  2071. }
  2072. .app-indicator.theme-9 > .btn-group {
  2073. border-color: #595c57;
  2074. }
  2075. .app-indicator.theme-9 > .btn-group .btn-default:hover, .app-indicator.theme-9 > .btn-group .btn-default:focus {
  2076. background-color: #595c57;
  2077. }
  2078. .app.theme-9 .actions+.dropdown-menu li:hover a {
  2079. background-color: #595c57;
  2080. }
  2081. .app.theme-9 .backdrop i {
  2082. color: #6d706b;
  2083. }
  2084. .app.theme-9 .logo i {
  2085. color: #595c57;
  2086. }
  2087. .active > .app.preview.theme-9, .app.theme-9:hover {
  2088. border-color: #595c57;
  2089. }
  2090. .app.theme-9 .actions:hover {
  2091. border-color: #696c67;
  2092. color: #696c67;
  2093. }
  2094. .app-link-icon.theme-10,
  2095. .app.theme-10 {
  2096. background-color: #cabb33;
  2097. }
  2098. .app.theme-10 {
  2099. border-color: #cabb33;
  2100. text-shadow: 1px 1px #baab23;
  2101. }
  2102. .app-indicator.theme-10 {
  2103. background: #cabb33;
  2104. background: -moz-linear-gradient(left, rgba(202,187,51,0) 0%, rgba(202,187,51,0.02) 1%, rgba(202,187,51,1) 30%, rgba(202,187,51,1) 100%); /* FF3.6+ */
  2105. background: -webkit-linear-gradient(left, rgba(202,187,51,0) 0%,rgba(202,187,51,0.02) 1%,rgba(202,187,51,1) 30%,rgba(202,187,51,1) 100%); /* Chrome10+,Safari5.1+ */
  2106. background: -ms-linear-gradient(left, rgba(202,187,51,0) 0%,rgba(202,187,51,0.02) 1%,rgba(202,187,51,1) 30%,rgba(202,187,51,1) 100%); /* IE10+ */
  2107. background: linear-gradient(to right, rgba(202,187,51,0) 0%,rgba(202,187,51,0.02) 1%,rgba(202,187,51,1) 30%,rgba(202,187,51,1) 100%); /* W3C */
  2108. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00269abc', endColorstr='#269abc',GradientType=1 ); /* IE6-9 */
  2109. }
  2110. .app-indicator.theme-10 > .btn-group {
  2111. border-color: #baab23;
  2112. }
  2113. .app-indicator.theme-10 > .btn-group .btn-default:hover, .app-indicator.theme-10 > .btn-group .btn-default:focus {
  2114. background-color: #baab23;
  2115. }
  2116. .app.theme-10 .actions+.dropdown-menu li:hover a {
  2117. background-color: #baab23;
  2118. }
  2119. .app.theme-10 .backdrop i {
  2120. color: #cebf37;
  2121. }
  2122. .app.theme-10 .logo i {
  2123. color: #baab23;
  2124. }
  2125. .active > .app.preview.theme-10, .app.theme-10:hover {
  2126. border-color: #baab23;
  2127. }
  2128. .app.theme-10 .actions:hover {
  2129. border-color: #cabb33;
  2130. color: #cabb33;
  2131. }
  2132. .create-app {
  2133. margin: 10px;
  2134. height: 200px;
  2135. padding: 5px;
  2136. background-color: #f8f8f7;
  2137. }
  2138. .create-app h3 {
  2139. font-size: 24px;
  2140. color: #666666;
  2141. line-height: 180px;
  2142. text-align: center;
  2143. -webkit-transition: font-size .2s ease;
  2144. -moz-transition: font-size .2s ease;
  2145. -o-transition: font-size .2s ease;
  2146. transition: font-size .2s ease;
  2147. }
  2148. .app.create-app:hover {
  2149. border-color: #eeeeee;
  2150. }
  2151. .app.create-app:hover h3{
  2152. font-size: 110px;
  2153. }
  2154. .app.create-app .fixed {
  2155. position: absolute;
  2156. top: 40px;
  2157. left: 0;
  2158. right: 0;
  2159. color: #666666;
  2160. visibility: hidden;
  2161. text-align: center;
  2162. font-size: 24px;
  2163. }
  2164. .app.create-app:hover .fixed {
  2165. visibility: visible;
  2166. }
  2167. .app.create-app .backdrop {
  2168. color: #eeeeee;
  2169. top: -100px;
  2170. }
  2171. .app.create-app:hover .backdrop {
  2172. top: -85px;
  2173. }
  2174. /** Landing logo (shared between apps) */
  2175. .landing-logo {
  2176. line-height: 40px;
  2177. height: 40px;
  2178. width: 180px;
  2179. float: left;
  2180. cursor: default;
  2181. }
  2182. .landing-logo img {
  2183. max-height: 35px;
  2184. margin-top: -3px;
  2185. margin-left: 10px;
  2186. }
  2187. /** Password strength indicator */
  2188. ul#strength {
  2189. display:inline;
  2190. list-style:none;
  2191. margin:0;
  2192. margin-left:15px;
  2193. padding:0;
  2194. vertical-align:2px;
  2195. }
  2196. ul#strength li {
  2197. background-color:#DDD;
  2198. border-radius:2px;
  2199. display:inline-block;
  2200. height:5px;
  2201. margin-right:1px;
  2202. width:20px;
  2203. }
  2204. ul#strength li.pwd-very-weak {
  2205. background-color: #a02c2c;
  2206. }
  2207. ul#strength li.pwd-weak {
  2208. background-color: #d45500;
  2209. }
  2210. ul#strength li.pwd-good {
  2211. background-color: #ffcc00;
  2212. }
  2213. ul#strength li.pwd-strong {
  2214. background-color: #aad400;
  2215. }
  2216. ul#strength li.pwd-very-strong {
  2217. background-color: #71c837;
  2218. }
  2219. ul#strength span {
  2220. font-weight: bold;
  2221. padding-left: 5px;
  2222. }
  2223. ul#strength span.pwd-very-weak {
  2224. color: #a02c2c;
  2225. }
  2226. ul#strength span.pwd-weak {
  2227. color: #d45500;
  2228. }
  2229. ul#strength span.pwd-good {
  2230. color: #ffcc00;
  2231. }
  2232. ul#strength span.pwd-strong {
  2233. color: #aad400;
  2234. }
  2235. ul#strength span.pwd-very-strong {
  2236. color: #71c837;
  2237. }
  2238. ul#strength > li:last-child {
  2239. margin:0;
  2240. }
  2241. .modal-body.content-preview-wrapper {
  2242. background-color: #404040;
  2243. padding: 0;
  2244. }
  2245. .modal-body.content-preview-wrapper .nothing-to-see {
  2246. background-color: #ffffff;
  2247. padding: 20px 0 0 0;
  2248. height: 480px;
  2249. text-align: center;
  2250. font-size: 15px;
  2251. color: #666666;
  2252. }
  2253. /**
  2254. * Some modal windows need to have a scrollbar inside the modal window.
  2255. * Use the following classes to do so.
  2256. */
  2257. .modal-body-with-overflow {
  2258. max-height: 500px;
  2259. overflow: auto;
  2260. }
  2261. .preview-image {
  2262. max-width: 100%;
  2263. max-height: 100%;
  2264. display: block;
  2265. margin-left: auto;
  2266. margin-right: auto;
  2267. }
  2268. @media (min-width: 1400px) {
  2269. .apps-wrapper {
  2270. width: 1400px;
  2271. }
  2272. .app-wrapper {
  2273. float: left;
  2274. width: 350px;
  2275. }
  2276. }
  2277. @media (max-width: 1200px) {
  2278. .apps-wrapper {
  2279. width: 900px;
  2280. }
  2281. }
  2282. /** Task details **/
  2283. .summary-header {
  2284. margin-top: 10px;
  2285. }
  2286. .summary-header > div{
  2287. float: left;
  2288. margin-right: 15px;
  2289. border-left: 1px solid #cccccc;
  2290. padding-left: 15px;
  2291. min-height: 32px;
  2292. }
  2293. .summary-header.pack > div {
  2294. min-height: 32px;
  2295. }
  2296. .summary-header.pack .title.title-lg {
  2297. }
  2298. .summary-header > div:first-child {
  2299. border-left: none;
  2300. padding-left: 0;
  2301. }
  2302. .summary-header .btn.btn-xs {
  2303. background-color: transparent;
  2304. border: 1px solid #bbbbbb;
  2305. color: #666666;
  2306. margin-top: 3px;
  2307. }
  2308. .summary-header .btn.btn-xs:hover, .summary-header .btn.btn-xs:active, .summary-header .btn.btn-xs:focus{
  2309. border: 1px solid #bbbbbb;
  2310. color: #666666;
  2311. }
  2312. .user-picture {
  2313. text-align: center;
  2314. font-size: 15px;
  2315. height: 32px;
  2316. width: 32px;
  2317. line-height: 32px;
  2318. padding: 0;
  2319. margin: 0 2px 0 0;
  2320. overflow: hidden;
  2321. color: #ffffff;
  2322. background: #2980b9 no-repeat center center;
  2323. background-size: 32px 32px;
  2324. cursor: pointer;
  2325. border: 1px solid transparent;
  2326. }
  2327. .summary-header .user-picture {
  2328. float: left;
  2329. }
  2330. .user-picture.no-picture {
  2331. border-color: #2980b9;
  2332. }
  2333. .user-picture span {
  2334. visibility: hidden;
  2335. }
  2336. .user-picture.more {
  2337. background-color: #6fc2d7;
  2338. color: #f6f6f6;
  2339. }
  2340. .user-picture.add {
  2341. background-color: #6fc2d7;
  2342. color: #f6f6f6;
  2343. font-size: 20px;
  2344. margin-left: 5px;
  2345. }
  2346. .user-picture:hover span, .user-picture.no-picture span, .user-picture.more span, .user-picture.add span {
  2347. visibility: visible;
  2348. }
  2349. .user-picture.no-picture:hover {
  2350. border-color: #32a3c0;
  2351. }
  2352. .summary-header .title {
  2353. margin-bottom: 2px;
  2354. font-size: 12px;
  2355. color: #666666;
  2356. cursor: pointer;
  2357. }
  2358. .summary-header .title.title-lg {
  2359. margin-top: 5px;
  2360. font-size: 14px;
  2361. }
  2362. .summary-header .title.title-lg > span {
  2363. font-size: 15px;
  2364. }
  2365. .summary-header .title > span {
  2366. font-size: 13px;
  2367. color: #555555;
  2368. }
  2369. .related-content {
  2370. float: left;
  2371. text-align: center;
  2372. height: 32px;
  2373. width: 32px;
  2374. line-height: 32px;
  2375. padding: 0;
  2376. margin: 0;
  2377. overflow: hidden;
  2378. cursor: pointer;
  2379. }
  2380. .related-content i.icon {
  2381. line-height: 32px;
  2382. font-size: 26px;
  2383. }
  2384. .related-content.more {
  2385. font-size: 15px;
  2386. color: #999999;
  2387. text-align: left;
  2388. padding: 0 5px;
  2389. width: auto;
  2390. }
  2391. .summary-header .title+.related-content {
  2392. margin-left: -4px;
  2393. }
  2394. .tabs {
  2395. list-style: none inside;
  2396. padding:0;
  2397. margin: 0;
  2398. border-bottom: 1px solid #bbbbbb;
  2399. }
  2400. .tabs > li {
  2401. display: block;
  2402. float: left;
  2403. margin-bottom: -1px;
  2404. border: 1px solid transparent;
  2405. border-bottom-color: #bbbbbb;
  2406. }
  2407. .tabs > li a {
  2408. display: block;
  2409. padding: 8px 40px;
  2410. text-decoration: none;
  2411. color: #888a85;
  2412. font-size: 16px;
  2413. }
  2414. .tabs > li a .badge {
  2415. min-width: 10px;
  2416. font-size: 12px;
  2417. margin-left: 4px;
  2418. padding: 2px 4px;
  2419. background-color: #5f8dd3;
  2420. }
  2421. .tabs > li a:hover {
  2422. text-decoration: none;
  2423. color: #5f8dd3;
  2424. }
  2425. .tabs > li.active {
  2426. border-color: #bbbbbb;
  2427. border-bottom-color: #ffffff;
  2428. -moz-border-radius-topleft: 5px;
  2429. -webkit-border-top-left-radius: 5px;
  2430. border-top-left-radius: 5px;
  2431. -moz-border-radius-topright: 5px;
  2432. -webkit-border-top-right-radius: 5px;
  2433. border-top-right-radius: 5px;
  2434. }
  2435. .tabs > li.active a {
  2436. color: #000000;
  2437. cursor: default;
  2438. }
  2439. .main-content .tabs {
  2440. padding: 0 0 0 10px;
  2441. margin-bottom: 5px;
  2442. margin-top: 8px;
  2443. }
  2444. .people-list.simple-list li {
  2445. line-height: 24px;
  2446. padding: 4px;
  2447. }
  2448. .people-list li .actions {
  2449. margin-top: 4px;
  2450. }
  2451. .simple-list .user-picture {
  2452. float: left;
  2453. font-size: 12px;
  2454. width: 24px;
  2455. height: 24px;
  2456. line-height: 24px;
  2457. background-size: 24px 24px;
  2458. margin-right: 6px;
  2459. border: none;
  2460. }
  2461. .content-group {
  2462. border-bottom: 1px dotted #eeeeee;
  2463. margin: 5px 0;
  2464. }
  2465. .content-group:last-child {
  2466. border: none;
  2467. }
  2468. /* Help */
  2469. .help-container {
  2470. display: table;
  2471. height: 100%;
  2472. padding: 0 30px;
  2473. margin: 0px auto;
  2474. }
  2475. .help-container.fixed {
  2476. padding-top: 40px;
  2477. }
  2478. .help-container > div {
  2479. display: table-cell;
  2480. vertical-align: middle;
  2481. position: relative;
  2482. }
  2483. .help-text {
  2484. margin-top: 10px;
  2485. color: #636363;
  2486. background: #eee;
  2487. padding: 20px;
  2488. -webkit-border-radius: 10px;
  2489. -moz-border-radius: 10px;
  2490. border-radius: 10px;
  2491. max-width: 450px;
  2492. font-size: 14px;
  2493. position: relative;
  2494. }
  2495. .help-text.wide {
  2496. max-width: 550px;
  2497. }
  2498. .help-text .description {
  2499. margin-bottom: 25px;
  2500. }
  2501. .help-text .description:last-child {
  2502. margin-bottom: 0px;
  2503. }
  2504. .help-entry {
  2505. margin: 5px 0 5px 10px;
  2506. cursor: pointer;
  2507. padding: 5px;
  2508. }
  2509. .help-entry:hover, .help-entry.active {
  2510. background-color: #f6f6f7;
  2511. }
  2512. .help-entry.active {
  2513. padding: 10px;
  2514. }
  2515. .help-entry:hover > span {
  2516. color: #2980b9;
  2517. }
  2518. .help-entry.active:hover > span {
  2519. color: #636363;
  2520. }
  2521. .help-entry .pull-right > .btn {
  2522. border: none;
  2523. }
  2524. .help-entry .note, .action-note {
  2525. font-size: 12px;
  2526. color: #999999;
  2527. padding-left: 38px;
  2528. }
  2529. .help-entry:hover .note {
  2530. color: #999999;
  2531. text-decoration: none;
  2532. }
  2533. .action-note:hover {
  2534. text-decoration: underline;
  2535. cursor: pointer;
  2536. }
  2537. .help-entry > .glyphicon {
  2538. margin-right: 5px;
  2539. }
  2540. .help-entry > .icon {
  2541. margin-right: 5px;
  2542. font-size: 110%;
  2543. }
  2544. .help-text > a {
  2545. color: #636363;
  2546. }
  2547. .help-entry:hover > .glyphicon {
  2548. text-decoration: none;
  2549. }
  2550. .no-custom-apps .help-container {
  2551. float: left;
  2552. padding-left: 50px;
  2553. }
  2554. .content-list.simple-list li {
  2555. width: 50%;
  2556. float: left;
  2557. padding: 5px 10px;
  2558. margin-bottom: 10px;
  2559. white-space: nowrap;
  2560. overflow: hidden;
  2561. text-overflow: ellipsis;
  2562. }
  2563. .content-list.simple-list li .subtle {
  2564. white-space: nowrap;
  2565. overflow: hidden;
  2566. text-overflow: ellipsis;
  2567. }
  2568. .content-list.simple-list li:hover {
  2569. background-color: #ffffff;
  2570. }
  2571. .content-list.simple-list li .actions {
  2572. background-color: #ffffff;
  2573. border: 1px solid #eeeeee;
  2574. padding: 5px 4px 0 4px;
  2575. display: inline-block;
  2576. right: 0px;
  2577. }
  2578. .content-list.simple-list .subtle {
  2579. font-size: 12px;
  2580. }
  2581. .content-list.simple-list .nothing-to-see {
  2582. border: 1px solid #999999;
  2583. box-shadow: 1px 1px 2px #dddddd;
  2584. background-color: #ffffff;
  2585. width: 130px;
  2586. height: 155px;
  2587. padding: 50px 0 0 0;
  2588. text-align: center;
  2589. }
  2590. .content-list.simple-list .nothing-to-see .loading {
  2591. display: inline-block;
  2592. position: relative;
  2593. margin: 3px;
  2594. left: 0;
  2595. }
  2596. .frame {
  2597. white-space: nowrap;
  2598. text-align: left;
  2599. margin-bottom: 5px;
  2600. width: 100%;
  2601. }
  2602. .helper {
  2603. display: inline-block;
  2604. }
  2605. .frame img {
  2606. max-height: 155px;
  2607. padding: 5px;
  2608. border: 1px solid #999999;
  2609. box-shadow: 1px 1px 2px #dddddd;
  2610. background-color: #ffffff;
  2611. }
  2612. .content-list.simple-list li .frame .thumb-wrapper {
  2613. padding: 10px;
  2614. background-color: transparent;
  2615. display: inline-block;
  2616. }
  2617. .content-list.simple-list li:hover .frame .thumb-wrapper {
  2618. background-color: #eeeeee;
  2619. }
  2620. .form-wrapper .col-md-12 .content-list.simple-list li {
  2621. width: 25%;
  2622. }
  2623. .dynamicTableContainer {
  2624. /*min-height: 165px;*/
  2625. }
  2626. .dynamicTable {
  2627. border: 1px solid rgb(212,212,212) !important;
  2628. border-radius: 4px;
  2629. border-spacing: 2px;
  2630. display: block;
  2631. width: 100%;
  2632. height: 180px;
  2633. border-collapse: collapse;
  2634. margin-bottom: 5px;
  2635. }
  2636. .dynamicTable td, .dynamicTable tr {
  2637. border: 1px solid rgb(212,212,212) !important;
  2638. padding: 6px;
  2639. }
  2640. .dynamicTableContainer .control-buttons {
  2641. margin-bottom: 10px;
  2642. }
  2643. .edit-in-place-icon {
  2644. font-size: 20px;
  2645. color: darkgrey;
  2646. display: none;
  2647. margin-left: 5px;
  2648. }
  2649. .edit-in-place span {
  2650. cursor: pointer;
  2651. }
  2652. .edit-in-place:hover span {
  2653. display: inline-block;
  2654. }
  2655. .edit-in-place input {
  2656. display: none;
  2657. }
  2658. .edit-in-place.active span {
  2659. display: none;
  2660. }
  2661. .edit-in-place.active input {
  2662. display: inline-block;
  2663. }
  2664. .has-error .dynamicTable {
  2665. border: 1px solid #a94442 !important;
  2666. }
  2667. .noHeight {
  2668. height:auto;
  2669. }