图书馆智能管理系统
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.

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