portal.css 22 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054
  1. /*******************/
  2. /* Global settings */
  3. /*******************/
  4. @font-face {
  5. font-family: 'Combodo';
  6. src: url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype');
  7. font-weight: normal;
  8. font-style: normal;
  9. }
  10. @media (max-width: 768px){
  11. body{
  12. padding-top: 60px;
  13. }
  14. }
  15. footer{
  16. margin: 5em 1em;
  17. }
  18. /* Navigation menu */
  19. .navbar-nav .dropdown-menu a .glyphicon,
  20. .user_infos .dropdown-menu a .glyphicon{
  21. margin-right: 15px;
  22. }
  23. .nav > li > a > span.brick_icon{
  24. margin-right: 20px;
  25. }
  26. /* Topbar */
  27. #topbar #navbar{
  28. overflow-y: auto;
  29. }
  30. #topbar .user_infos{
  31. text-decoration: none;
  32. }
  33. #topbar .user_photo{
  34. margin-right: 10px;
  35. }
  36. #topbar .user_photo img{
  37. margin-top: -4px;
  38. max-width: 100%;
  39. max-height: 100%;
  40. height: 25px;
  41. border-radius: 100%;
  42. }
  43. /* Sidebar */
  44. #sidebar{
  45. position: fixed;
  46. top: 0px;
  47. left: 0px;
  48. padding: 0px; /* Overriding BS */
  49. height: 100%;
  50. }
  51. #sidebar .user_card{
  52. padding: 30px 0px;
  53. background-color: #EA7D1E; /* TODO : Change this */
  54. text-align: center;
  55. box-shadow: -3px 2px 3px rgba(0, 0, 0, 0.4);
  56. }
  57. #sidebar .user_card .user_photo{
  58. margin-bottom: 10px;
  59. }
  60. #sidebar .user_card .user_photo img{
  61. border: 2px solid #FFFFFF;
  62. border-radius: 100%;
  63. width: 80px;
  64. }
  65. #sidebar .user_card .user_infos{
  66. font-size: 1em;
  67. color: #FFFFFF;
  68. }
  69. #sidebar .user_card .user_infos .dropdown-toggle{
  70. color: #FFFFFF;
  71. }
  72. #sidebar .user_card .user_options.dropdown-menu{
  73. width: 92%;
  74. left: 4%;
  75. }
  76. #sidebar .user_card .user_fullname{
  77. font-weight: 600;
  78. }
  79. #sidebar .menu{
  80. max-height: 59%;
  81. overflow-y: auto;
  82. }
  83. #sidebar .menu .nav > li{
  84. line-height: 3.0em;
  85. }
  86. #sidebar .menu .nav > li:after{
  87. content: "";
  88. display: block;
  89. position: relative;
  90. /*margin-left: 6.8em;
  91. width: 56%;*/
  92. color: #FFFFFF;
  93. border-bottom: 1px solid #7D7D7D;
  94. }
  95. #sidebar .menu .nav > li.active{
  96. box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8) inset;
  97. }
  98. #sidebar .menu .nav > li.active:after{
  99. content: " ";
  100. position: absolute;
  101. right: 0px;
  102. top: 0px;
  103. border: 30px solid transparent;
  104. border-right-width: 20px;
  105. border-right-color: #EDECEC;
  106. }
  107. #sidebar .menu .nav > li.active > a{
  108. margin-top: -1px; /* To mask border from previous li item */
  109. /*margin-left: 4em;
  110. padding-left: 1em;*/
  111. }
  112. #sidebar .menu .nav > li > a{
  113. /*padding-left: 3em;*/
  114. padding-left: 10%;
  115. overflow-x: hidden;
  116. text-overflow: ellipsis;
  117. white-space: nowrap;
  118. }
  119. #sidebar .menu .nav > li > a > .brick_icon{
  120. width: 1.2em;
  121. vertical-align: sub;
  122. text-align: center;
  123. }
  124. #sidebar .logo{
  125. position: absolute;
  126. bottom: 15px;
  127. width: 100%;
  128. text-align: center;
  129. }
  130. #sidebar .logo img{
  131. width: 40%;
  132. max-width: 100%;
  133. }
  134. /* Main content */
  135. @media (min-width: 768px) {
  136. #main-wrapper{
  137. margin-top: 20px;
  138. }
  139. }
  140. /* Overlays*/
  141. .global_overlay{
  142. z-index: 9999;
  143. display: none;
  144. position: fixed;
  145. top: 0px;
  146. left: 0px;
  147. width: 100%;
  148. height: 100%;
  149. background-color: black;
  150. opacity: 0.5;
  151. }
  152. #page_overlay .overlay_content{
  153. margin-top: 20em;
  154. width: 100%;
  155. color: white;
  156. }
  157. .overlay_content{
  158. text-align: center;
  159. }
  160. .content_loader .icon{
  161. margin-bottom: 0.3em;
  162. /*width: 52px;*/
  163. height: 38px; /* 50px; *//* Hack to make loader circle perfectly */
  164. font-size: 3em; /* 4em; */
  165. animation: spin 1.2s linear infinite;
  166. -webkit-animation: spin 1.2s linear infinite;
  167. -moz-animation: spin 1.2s linear infinite;
  168. -ms-animation: spin 1.2s linear infinite;
  169. }
  170. .content_loader .message{
  171. font-size: 1.5em; /* 2em; */
  172. }
  173. .datatables_overlay{
  174. padding: 5% 0px !important;
  175. background-color: white;
  176. }
  177. /******************/
  178. /* Global classes */
  179. /******************/
  180. .vertical-center {
  181. /* Make it a flex container */
  182. display: -webkit-box;
  183. display: -moz-box;
  184. display: -ms-flexbox;
  185. display: -webkit-flex;
  186. display: flex;
  187. /* Align the bootstrap's container vertically */
  188. -webkit-box-align : center;
  189. -webkit-align-items : center;
  190. -moz-box-align : center;
  191. -ms-flex-align : center;
  192. align-items : center;
  193. /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
  194. hence the bootstrap's container won't be aligned to the center anymore.
  195. Therefore, we should use the following declarations to get it centered again */
  196. -webkit-box-pack : center;
  197. -moz-box-pack : center;
  198. -ms-flex-pack : center;
  199. -webkit-justify-content : center;
  200. justify-content : center;
  201. }
  202. /*********************/
  203. /* Global animations */
  204. /*********************/
  205. /* Spin */
  206. @keyframes spin{
  207. 100% {
  208. transform: rotate(360deg);
  209. }
  210. }
  211. @-webkit-keyframes spin{
  212. 100% {
  213. -webkit-transform: rotate(360deg);
  214. }
  215. }
  216. @-moz-keyframes spin{
  217. 100% {
  218. -moz-transform: rotate(360deg);
  219. }
  220. }
  221. @-ms-keyframes spin{
  222. 100% {
  223. -ms-transform: rotate(360deg);
  224. }
  225. }
  226. /***************/
  227. /* BS override */
  228. /***************/
  229. @font-face {
  230. font-family: 'Glyphicons Halflings';
  231. src: url('../lib/bootstrap/fonts/glyphicons-halflings-regular.eot');
  232. src: url('../lib/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
  233. }
  234. label{
  235. font-weight: bold;
  236. }
  237. /*********************/
  238. /* BS theme override */
  239. /*********************/
  240. body{
  241. background-color: #EDECEC;
  242. }
  243. a{
  244. color: #D46201;
  245. }
  246. a:hover, a:focus{
  247. color: #C15A02; /* TODO : Darken #D46201 */
  248. }
  249. .pagination{
  250. margin: 14px 0px;
  251. }
  252. .list-group.tree{
  253. margin-top: 11px;
  254. margin-bottom: -11px;
  255. }
  256. .list-group-item{
  257. padding-right: 0px; /* To align all actions on the right without indent */
  258. }
  259. .tooltip-inner{
  260. max-width: 400px;
  261. padding: 15px;
  262. }
  263. /* Navbars */
  264. .navbar-default{
  265. background-color: #585653;
  266. border: none;
  267. }
  268. .navbar-default .nav > li > a{
  269. color: #FFFFFF;
  270. }
  271. .navbar-default .nav > li > a:focus,
  272. .navbar-default .nav > li > a:hover{
  273. background-color: #FFFFFF;
  274. color: #EA7D1E;
  275. }
  276. .navbar-default .nav > li.active{
  277. background-color: #292827; /* TODO Darken #585653 */
  278. color: #FFFFFF;
  279. font-weight: 600;
  280. }
  281. /* Dropdowns */
  282. .dropdown-menu>li>a:hover,
  283. .dropdown-menu>li>a:focus {
  284. text-decoration: none;
  285. color: #FFFFFF;
  286. background-color: #EA7D1E;
  287. }
  288. /* Buttons */
  289. /* - Default */
  290. .btn-default,
  291. .btn-default:active, .btn-default.active,
  292. .btn-default:hover, .btn-default:focus{
  293. color: inherit;
  294. background-color: #FFFFFF;
  295. background-image: none;
  296. border: 1px solid rgba(0, 0, 0, 0.15);
  297. }
  298. .btn-default:hover, .btn-default.active:focus{
  299. background-color: #FAFAFA; /* TODO : Darken white */
  300. }
  301. .btn-default:active, .btn-default.active{
  302. background-color: transparent; /* Body background */
  303. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
  304. border: none;
  305. border-bottom-color: #EBEAEA;
  306. }
  307. .btn-default:active:hover, .btn-default.active:hover,
  308. .btn-default:active:focus, .btn-default.active:focus,
  309. .btn-default:active.focus, .btn-default.active.focus {
  310. color: inherit;
  311. background-color: #EAEAEA; /* Darken body background */
  312. border: inherit;
  313. }
  314. /* - Primary */
  315. .btn-primary,
  316. .btn-primary:active, .btn-primary.active,
  317. .btn-primary:hover, .btn-primary:focus{
  318. color: #FFFFFF;
  319. background-color: #EA7D1E;
  320. background-image: none;
  321. border: 1px solid rgba(0, 0, 0, 0.15);
  322. }
  323. .btn-primary:hover,
  324. .btn-primary:active:hover, .btn-primary.active:hover,
  325. .btn-primary:active:focus, .btn-primary.active:focus,
  326. .btn-primary:active.focus, .btn-primary.active.focus{
  327. background-color: #DA751C; /* TODO : Darken #EA7D1E */
  328. }
  329. /* Button groups */
  330. .btn-group.btn_group_explicit{
  331. padding: 7px;
  332. background-color: #292827;
  333. border: 1px solid #EBEAEA;
  334. border-radius: 30px;
  335. box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4) inset;
  336. }
  337. .btn-group.btn_group_explicit .btn{
  338. color: #FFFFFF;
  339. background-color: transparent;
  340. border: none;
  341. }
  342. .btn-group.btn_group_explicit .btn.active{
  343. color: #6B6965;
  344. background-color: #EDECEC;
  345. border-radius: 37px !important;
  346. box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.4);
  347. }
  348. /* Panels */
  349. .panel{
  350. border: none;
  351. border-radius: 0px;
  352. box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  353. }
  354. /* Forms */
  355. .form-control{
  356. border-radius: 0px;
  357. }
  358. /* Pagination */
  359. .pagination>.active>a,
  360. .pagination>.active>span,
  361. .pagination>.active>a:hover,
  362. .pagination>.active>span:hover,
  363. .pagination>.active>a:focus,
  364. .pagination>.active>span:focus {
  365. background-color: #EA7D1E;
  366. border-color: #EA7D1E;
  367. }
  368. .pagination>li>a:hover,
  369. .pagination>li>span:hover,
  370. .pagination>li>a:focus,
  371. .pagination>li>span:focus {
  372. background-color: #EA7D1E;
  373. border-color: #EA7D1E;
  374. }
  375. /* Modal */
  376. .modal-content{
  377. border-radius: 0px;
  378. }
  379. /* Custom "glyphicons" */
  380. .glyphicon-ext-hierarchy:before {
  381. content: url('../img/icons/hierarchy-white-13px.png');
  382. }
  383. /**********************/
  384. /* BS plugin override */
  385. /**********************/
  386. /* Datatables */
  387. .table-striped > tbody > tr:hover {
  388. background-color: #fdf5d0;
  389. }
  390. /******************/
  391. /* Modal settings */
  392. /******************/
  393. .modal-content .content_loader{
  394. margin: 7em 0em;
  395. text-align: center;
  396. }
  397. @media (min-width: 992px){
  398. .modal-lg {
  399. width: 80%;
  400. max-width: 1200px;
  401. }
  402. }
  403. /**************************/
  404. /* MagnificPopup settings */
  405. /**************************/
  406. .mfp-bg{
  407. z-index: 1200;
  408. }
  409. .mfp-wrap{
  410. z-index: 1210;
  411. }
  412. /********************/
  413. /* Typeahed setting */
  414. /********************/
  415. .twitter-typeahead .tt-menu{
  416. max-height: 200px;
  417. overflow-y: auto;
  418. }
  419. @media (min-width: 768px){
  420. .twitter-typeahead .tt-menu{
  421. max-height: 300px;
  422. }
  423. }
  424. .twitter-typeahead .tt-dataset > .content_loader{
  425. margin: 10px 0px;
  426. text-align: center;
  427. font-size: 0.6em;
  428. }
  429. .twitter-typeahead .tt-dataset > .content_loader .icon{
  430. height: 25px;
  431. }
  432. .twitter-typeahead .tt-dataset .no_result{
  433. text-align: center;
  434. font-style: italic;
  435. }
  436. /*****************/
  437. /* Home settings */
  438. /*****************/
  439. .home #main-wrapper{
  440. padding-top: 15px;
  441. }
  442. .home .tile{
  443. display: block;
  444. margin-bottom: 8px;
  445. padding: 0em 1em;
  446. min-height: 4em;
  447. background-color: #FFFFFF;
  448. background-image: none;
  449. border: none;
  450. border-radius: 0px;
  451. text-align: center;
  452. text-decoration: none;
  453. white-space: normal;
  454. line-height: 4em;
  455. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  456. }
  457. .home .tile .tile_decoration{
  458. position: absolute;
  459. top: 0.3em;
  460. left: 2.5em;
  461. }
  462. .home .tile .tile_title{
  463. font-weight: bold;
  464. color: #333;
  465. }
  466. .home .tile .tile_description{
  467. display: none;
  468. color: #555555;
  469. }
  470. @media (min-width: 768px) {
  471. .home .tile{
  472. display: block;
  473. margin-bottom: 40px;
  474. padding: 40px 40px 30px 40px;
  475. min-height: 10em;
  476. text-align: left;
  477. }
  478. .home .tile .tile_decoration{
  479. display: block;
  480. position: relative;
  481. float: left;
  482. top: initial;
  483. left: initial;
  484. margin: 0px 40px 5px 0px;
  485. }
  486. .home .tile .tile_body{
  487. display: block;
  488. text-align: left;
  489. line-height: 1.5em;
  490. }
  491. .home .tile .tile_title{
  492. margin-bottom: 1em;
  493. font-size: 1.0em;
  494. }
  495. .home .tile .tile_description{
  496. display: block;
  497. text-align: justify;
  498. }
  499. }
  500. @media (min-width: 992px) {
  501. .home .tile{
  502. min-height: 15em;
  503. padding: 40px 50px 30px 50px;
  504. }
  505. .home .tile .tile_decoration > span.icon{
  506. font-size: 6em;
  507. }
  508. .home .tile .tile_title{
  509. font-size: 1.5em;
  510. }
  511. .home .tile .tile_description{
  512. font-size: 1.2em;
  513. }
  514. }
  515. /********************/
  516. /* Modules settings */
  517. /********************/
  518. #main-header{
  519. text-align: center;
  520. }
  521. #main-header-title{
  522. margin-bottom: 15px;
  523. }
  524. #main-header-actions{
  525. margin-bottom: 15px;
  526. }
  527. #main-header-actions .btn-group .btn{
  528. padding: 0em 1.5em;
  529. line-height: 2.8em;
  530. font-size: 14px;
  531. }
  532. @media (min-width: 768px) {
  533. #main-header:after{
  534. clear: both;
  535. }
  536. #main-header-title{
  537. float: left;
  538. margin-bottom: 0px;
  539. min-height: 6em;
  540. text-align: left;
  541. }
  542. #main-header-actions{
  543. float: right;
  544. margin-bottom: 0px;
  545. }
  546. }
  547. .dataTables_wrapper{
  548. padding: 10px 10px;
  549. }
  550. #brick_content_toolbar{
  551. /* margin: 10px 0px 6px 0px; */
  552. padding: 10px;
  553. }
  554. #brick_content_toolbar > div label{
  555. font-weight: normal;
  556. white-space: nowrap;
  557. text-align: left;
  558. }
  559. #brick_content_toolbar > div label input{
  560. margin-left: 0.5em;
  561. display: inline-block;
  562. width: 130px;
  563. }
  564. /***********************/
  565. /* Brick communication */
  566. /***********************/
  567. /* Home tile */
  568. .home .tile.tile_communication{
  569. padding: 20px;
  570. background-color: #EDEDED;
  571. border: none;
  572. font-weight: initial;
  573. }
  574. .home .tile_communication .carousel{
  575. margin-bottom: 0px;
  576. width: 100%;
  577. height: 200px;
  578. }
  579. /**********************/
  580. /* Brick user profile */
  581. /**********************/
  582. .home .userprofile-brick{
  583. background-color: #E8E7E7;
  584. }
  585. /****************/
  586. /* Brick browse */
  587. /****************/
  588. /* - Tree mode */
  589. /****************/
  590. #brick_content_tree{
  591. position: relative;
  592. }
  593. .panel > .list-group:last-child .list-group-item:last-child,
  594. .panel > .panel-collapse > .list-group:last-child .list-group-item:last-child{
  595. margin-bottom: 1px;
  596. }
  597. .list-group-item > .list-group-item-actions{
  598. /*display: none; Displaying actions only when hovering was not unanimous in the team */
  599. position: absolute;
  600. top: 10px;
  601. right: 10px;
  602. }
  603. .list-group-item:hover > .list-group-item-actions{
  604. display: block;
  605. }
  606. .list-group-item .list-group-item-actions a:not(:first-child){
  607. margin-left: 10px;
  608. }
  609. .list-group-item .list-group-item-text{
  610. margin-left: 5px;
  611. font-size: 1em;
  612. line-height: 1em;
  613. }
  614. .list-group-item .keep-spinning{
  615. animation: spin 1s linear infinite;
  616. -webkit-animation: spin 1s linear infinite;
  617. -moz-animation: spin 1s linear infinite;
  618. -ms-animation: spin 1s linear infinite;
  619. }
  620. /* Secondary actions */
  621. table .group-actions{
  622. position: relative;
  623. }
  624. .list-group-item-actions a.glyphicon-menu-hamburger,
  625. table .group-actions a.glyphicon-menu-hamburger{
  626. cursor: pointer;
  627. text-decoration: none;
  628. }
  629. .list-group-item-actions .item-action-wrapper,
  630. table .group-actions .item-action-wrapper
  631. {
  632. display: none;
  633. position: absolute;
  634. z-index: 5;
  635. bottom: 5px;
  636. right: 0px;
  637. -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  638. -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  639. box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
  640. }
  641. .list-group-item-actions .item-action-wrapper .glyphicon,
  642. table .group-actions .item-action-wrapper .glyphicon{
  643. margin-right: 0.6em;
  644. }
  645. .list-group-item-actions .item-action-wrapper.collapse.in,
  646. table .group-actions .item-action-wrapper.collapse.in{
  647. display: block;
  648. }
  649. .list-group-item-actions .item-action-wrapper .panel-body > p,
  650. table .group-actions .item-action-wrapper .panel-body > p{
  651. white-space: nowrap;
  652. }
  653. .list-group-item-actions .item-action-wrapper .panel-body > p:last-child,
  654. table .group-actions .item-action-wrapper .panel-body > p:last-child{
  655. margin-bottom: 0px;
  656. }
  657. #brick_content_empty{
  658. display: none;
  659. padding: 40px;
  660. font-size: 1.3em;
  661. font-style: italic;
  662. }
  663. /* Loader */
  664. #brick_tree_overlay{
  665. /*z-index: 10;*/
  666. display: none;
  667. padding: 8% 0px;
  668. /*position: absolute;
  669. top: 0px;
  670. left: 0px;
  671. width: 100%;
  672. height: 100%;
  673. min-height: 130px;*/
  674. /*background-color: black;*/
  675. border-radius: 0px 0px 4px 4px;
  676. /*opacity: 0.5;
  677. color: white;*/
  678. font-size: 1em;
  679. }
  680. /****************/
  681. /* - List mode */
  682. /****************/
  683. /*********/
  684. /* Forms */
  685. /*********/
  686. .form_fields textarea{
  687. height: 160px;
  688. }
  689. .form_field .form_mandatory .control-label:after{
  690. content: "\002a";
  691. position: relative;
  692. left: 3px;
  693. color: red; /* TODO : SASS this */
  694. font-size: 0.9em;
  695. }
  696. /* Subform field */
  697. .subform_field > fieldset{
  698. margin: inherit;
  699. margin-bottom: 15px; /* TODO : SASS this from .form-group */
  700. padding: 10px 15px;
  701. border: 1px solid #dddddd; /* TODO : SASS this */
  702. border-radius: 4px; /* TODO : SASS this */
  703. }
  704. .subform_field > fieldset > legend{
  705. margin: 0px 0px;
  706. padding: 0px 7px;
  707. width: inherit;
  708. border: none;
  709. font-size: 1em;
  710. font-weight: bold;
  711. color: #777777; /* TODO : SASS this */
  712. }
  713. /* CaseLog field */
  714. .caselog_field_entry{
  715. border: 1px solid #dddddd;
  716. border-top: none;
  717. }
  718. .caselog_field_entry_header{
  719. padding: 6px;
  720. font-size: 1em;
  721. border-bottom: 1px solid #FFFFFF;
  722. background-color: #F2F2F2;
  723. }
  724. .caselog_field_entry_button{
  725. display: block;
  726. width: 15px;
  727. height: 15px;
  728. text-align: center;
  729. line-height: 15px;
  730. font-size: 16px;
  731. border: 1px solid #a6a6a6;
  732. border-bottom-color: #979797;
  733. }
  734. .caselog_field_entry_button:hover{
  735. background-color: #cccccc;
  736. }
  737. .caselog_field_entry_button:before{
  738. content: "▴";
  739. }
  740. .caselog_field_entry_button.collapsed:before{
  741. content: "▾";
  742. }
  743. .caselog_field_entry_content{
  744. margin: 10px;
  745. overflow-x: auto;
  746. }
  747. /* LinkedSet*/
  748. .form_linkedset_toggler,
  749. .form_linkedset_toggler:hover,
  750. .form_linkedset_toggler:focus{
  751. margin-left: 0.4em;
  752. text-decoration: none;
  753. color: inherit;
  754. }
  755. .form_linkedset_toggler > .text:before{
  756. content: "(";
  757. }
  758. .form_linkedset_toggler > .text:after{
  759. content: ")";
  760. }
  761. .form_linkedset_toggler > .glyphicon{
  762. margin-left: 0.5em;
  763. font-size: 0.85em;
  764. color: #EA7D1E; /* TODO : SASS this to primary color */
  765. transition: transform 0.2s linear;
  766. }
  767. .form_linkedset_toggler > .glyphicon.collapsed{
  768. transform: rotateZ(-90deg);
  769. }
  770. /* - DataTables : Loader */
  771. .form_linkedset_wrapper .datatables_overlay{
  772. padding: 8px !important;
  773. }
  774. .form_linkedset_wrapper .overlay_content{
  775. font-size: 0.6em;
  776. }
  777. .form_linkedset_wrapper .content_loader{
  778. margin: 0px;
  779. }
  780. .form_linkedset_wrapper .content_loader .icon{
  781. height: 23px;
  782. }
  783. /* - DataTables : Fit the table in the form */
  784. .form_linkedset_wrapper .dataTables_wrapper{
  785. margin-bottom: 5px;
  786. padding: 0px;
  787. }
  788. /* FileUpload */
  789. .fileupload_field_content{
  790. padding: 8px 23px;
  791. border: 1px solid #DDDDDD; /* TODO : SASS this */
  792. background-color: #F9F9F9; /* TODO : SASS this*/
  793. }
  794. .fileupload_field_content > div{
  795. margin-bottom: 15px;
  796. }
  797. .attachments_container .attachment {
  798. height: 95px;
  799. overflow-x: hidden;
  800. text-align: center;
  801. }
  802. .attachments_container .attachment:hover {
  803. background-color: #e0e0e0;
  804. }
  805. .attachments_container .attachment .attachment_name{
  806. overflow-x: hidden;
  807. text-overflow: ellipsis;
  808. white-space: nowrap;
  809. }
  810. .attachments_container .attachment .btn{
  811. margin-top: 3px;
  812. }
  813. .upload_container input{
  814. display: inline;
  815. }
  816. .upload_container .loader{
  817. visibility: hidden;
  818. margin-left: 7px;
  819. font-size: 1.2em;
  820. animation: spin 1.0s linear infinite;
  821. -webkit-animation: spin 1.0s linear infinite;
  822. -moz-animation: spin 1.0s linear infinite;
  823. -ms-animation: spin 1.0s linear infinite;
  824. }
  825. #drag_overlay{
  826. display: block;
  827. top: inherit;
  828. bottom: 0px;
  829. height: 0px;
  830. }
  831. #drag_overlay .overlay_content{
  832. margin-top: 5em;
  833. width: 100%;
  834. color: white;
  835. }
  836. #drag_overlay .overlay_content .icon{
  837. font-size: 3em;
  838. }
  839. #drag_overlay .overlay_content .message{
  840. font-size: 1.5em;
  841. }
  842. /* Attachments drag & drop zone, only for none mobile devices */
  843. @media (min-width: 768px){
  844. #drag_overlay.drag_in{
  845. animation: show-drop-zone 0.3s ease-out forwards;
  846. -webkit-animation: show-drop-zone 0.3s ease-out forwards;
  847. -moz-animation: show-drop-zone 0.3s ease-out forwards;
  848. -ms-animation: show-drop-zone 0.3s ease-out forwards;
  849. }
  850. #drag_overlay.drag_out{
  851. animation: hide-drop-zone 0.3s ease-out forwards;
  852. -webkit-animation: hide-drop-zone 0.3s ease-out forwards;
  853. -moz-animation: hide-drop-zone 0.3s ease-out forwards;
  854. -ms-animation: hide-drop-zone 0.3s ease-out forwards;
  855. }
  856. @keyframes show-drop-zone{
  857. 100% {
  858. height: 20%;
  859. }
  860. }
  861. @-webkit-keyframes show-drop-zone{
  862. 100% {
  863. height: 20%;
  864. }
  865. }
  866. @-moz-keyframes show-drop-zone{
  867. 100% {
  868. height: 20%;
  869. }
  870. }
  871. @-ms-keyframes show-drop-zone{
  872. 100% {
  873. height: 20%;
  874. }
  875. }
  876. @keyframes hide-drop-zone{
  877. 0% {
  878. height: 20%;
  879. }
  880. 100% {
  881. height: 0%;
  882. }
  883. }
  884. @-webkit-keyframes hide-drop-zone{
  885. 0% {
  886. height: 20%;
  887. }
  888. 100% {
  889. height: 0%;
  890. }
  891. }
  892. @-moz-keyframes hide-drop-zone{
  893. 0% {
  894. height: 20%;
  895. }
  896. 100% {
  897. height: 0%;
  898. }
  899. }
  900. @-ms-keyframes hide-drop-zone{
  901. 0% {
  902. height: 20%;
  903. }
  904. 100% {
  905. height: 0%;
  906. }
  907. }
  908. }
  909. .form_field .form-control-static img{
  910. max-width: 100% !important;
  911. height: initial !important;
  912. }
  913. .form_buttons{
  914. padding-top: 20px;
  915. text-align: center;
  916. }
  917. .form_buttons .form_btn_transitions{
  918. margin-bottom: 20px;
  919. }
  920. .form_buttons .btn .glyphicon{
  921. margin-right: 0.5em;
  922. }
  923. .form_btn_regular.sticky{
  924. display: none;
  925. }
  926. @media (min-width: 768px){
  927. .form_buttons .form_btn_transitions{
  928. float: left !important;
  929. }
  930. .form_buttons .form_btn_regular{
  931. text-align: right;
  932. }
  933. .form_buttons .form_btn_regular btn{
  934. width: inherit;
  935. }
  936. /* Making regular button sticky */
  937. .form_btn_regular.sticky{
  938. display: block;
  939. position: fixed;
  940. bottom: 5em;
  941. right: -2px; /* TODO : SASS this to col-xs-12 padding */
  942. padding: 15px;
  943. background-color: #FFF; /* TODO : SASS this to panel bg */
  944. border: 1px solid #DDD; /* TODO : SASS this to panel border */
  945. border-radius: 4px; /* TODO : SASS this to panel border */
  946. transition: right 0.3s;
  947. }
  948. .form_btn_regular.sticky.closed{
  949. right: -75px;
  950. }
  951. .form_btn_regular.sticky button{
  952. display: block;
  953. }
  954. .form_btn_regular.sticky button:first-child{
  955. margin-bottom: 4px;
  956. }
  957. /* - Adjustments for modal sticky buttons */
  958. .modal.in .form_btn_regular.sticky{
  959. /*right: 15px;*/ /* TODO : SASS this to col-xs-12 padding */
  960. }
  961. }
  962. /* CKEditor : Adding BS error feedback */
  963. .form_field div.cke{
  964. border: 1px solid #dddddd; /* TODO : SASS this */
  965. }
  966. .form_field.has-error div.cke{
  967. border: 1px solid #D9230F; /* TODO : SASS this */
  968. border-radius: 3px; /* TODO : SASS this */
  969. box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  970. }
  971. /* CKEditor : Styling notifications based on BS alerts */
  972. .cke_notification{
  973. position: relative;
  974. padding: 15px;
  975. margin-bottom: 18px;
  976. border: 1px solid transparent;
  977. border-radius: 4px;
  978. background-color: #FFFFFF
  979. }
  980. .cke_notification_close{
  981. position: absolute;
  982. top: 2px;
  983. right: 5px;
  984. }
  985. .cke_notification_message{
  986. margin-bottom: 0px;
  987. line-height: 1em;
  988. font-size: 1em;
  989. }
  990. .cke_notification_success{ /* TODO : SASS this */
  991. display: none;
  992. background-color: #dff0d8;
  993. border-color: #d6e9c6;
  994. color: #468847;
  995. }
  996. .cke_notification_warning{ /* TODO : SASS this */
  997. background-color: #fcf8e3;
  998. border-color: #fbeed5;
  999. color: #c09853;
  1000. }
  1001. /* DataTables : Selection inputs */
  1002. .dataTable.table th span.row_input,
  1003. .dataTable.table td span.row_input{
  1004. display: inline-block;
  1005. width: 100%;
  1006. text-align: center;
  1007. }