main.css 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457
  1. .module-notification .container-fluid {
  2. padding-top: 50px;
  3. }
  4. .module-notification .container-fluid #message {
  5. margin-top: 16px;
  6. }
  7. #notifications > .no-notification {
  8. background-color: #ffffff;
  9. border-radius: 3px;
  10. padding: 2.5rem;
  11. color: #545454;
  12. border-bottom: 1px solid #cecece;
  13. }
  14. .notification_menu{
  15. display: inline-block;
  16. user-select: none;
  17. }
  18. .notification_menu .dropdown-toggle::after{
  19. display:none;
  20. }
  21. .notification_menu .dropdown-toggle{
  22. position: relative;
  23. font-size: 20px;
  24. }
  25. .notification_menu .dropdown-menu {
  26. padding: 0;
  27. }
  28. .notification_menu .notification-item p {
  29. overflow-y: hidden;
  30. height: 20px;
  31. /*max-height: 80px;*/
  32. }
  33. .btn .badge.notification-number{
  34. padding: 4px 6px;
  35. position: absolute;
  36. right: -1px;
  37. height: 19px;
  38. top: 0;
  39. font-size: 10px;
  40. z-index: 1;
  41. }
  42. .btn .badge.notification-number.more-unreads {
  43. padding: 3px 4px;
  44. height: 17px;
  45. }
  46. .notification-template{
  47. display: none;
  48. }
  49. ul.notifications {
  50. width: 100%;
  51. /*min-width: 500px;
  52. max-width: 800px;
  53. margin: auto;*/
  54. padding: 0;
  55. }
  56. .notification_menu .dropdown-item.notification {
  57. text-align: center;
  58. padding: 1.5rem;
  59. opacity: 1;
  60. }
  61. .notification-item.pinned .btn-delete{
  62. display:none;
  63. }
  64. ul.notifications > li.unread{
  65. /*border-left: 5px solid #00a9ff;*/
  66. color: #212529;
  67. opacity: 1;
  68. }
  69. .notification_menu .dropdown-item.notification-unread {
  70. opacity: 1;
  71. background-color: #95c8ff0d;
  72. position: relative;
  73. }
  74. .dropdown-item.notification-unread:before {
  75. content: "";
  76. position: absolute;
  77. height: 100%;
  78. width: 3px;
  79. left: 0px;
  80. top: calc((100% - 100%) / 2);
  81. /*border-left: 3px solid #00a9ff;*/
  82. border-radius: 5px;
  83. transform: rotate(-180deg);
  84. }
  85. .dropdown-item.notification-unread:hover {
  86. background-color: #95c8ff2e;
  87. }
  88. ul.notifications > li{
  89. position: relative;
  90. padding: 15px;
  91. padding-right: 20%;
  92. border-bottom: 1px solid #ebebeb;
  93. list-style-type: none;
  94. border-radius: 3px;
  95. background-color: #ffffff;
  96. margin-top: 10px;
  97. margin-bottom: 10px;
  98. opacity: 0.5;
  99. color: #a7a7a7;
  100. transition: all 0.2s ease-in-out;
  101. }
  102. .notification-options {
  103. position: absolute;
  104. right: 10px;
  105. text-align: right;
  106. top: 10px;
  107. height: 80%;
  108. width: 20%;
  109. }
  110. .notification-options > small {
  111. position: absolute;
  112. bottom: 0;
  113. width: 100%;
  114. display: block;
  115. }
  116. .notification_menu .dropdown-toggle.animated i {
  117. -webkit-transform-origin: top center;
  118. -ms-transform-origin: top center;
  119. transform-origin: top center;
  120. -webkit-animation-name: swing;
  121. animation-name: swing;
  122. -webkit-animation-duration: 1s;
  123. animation-duration: 1s;
  124. -webkit-animation-fill-mode: both;
  125. animation-fill-mode: both;
  126. }
  127. .notification_menu .dropdown-item {
  128. cursor: pointer;
  129. height: 70px;
  130. overflow: hidden;
  131. text-overflow: ellipsis;
  132. white-space: nowrap;
  133. position: relative;
  134. transition: background-color 0.1s ease-out;
  135. padding: .8rem;
  136. padding-right: 5rem;
  137. font-size: 0.9em;
  138. opacity: 0.5;
  139. }
  140. .notification_menu .dropdown-item > * {
  141. overflow: hidden;
  142. text-overflow: ellipsis;
  143. white-space: nowrap;
  144. }
  145. .notification_menu .dropdown-item p {
  146. margin: 0;
  147. }
  148. .notification_menu .dropdown-divider {
  149. margin: 0;
  150. border-top: 1px solid #dadada;
  151. }
  152. .notification_menu .dropdown-item.active,
  153. .notification_menu .dropdown-item:active {
  154. color: #212529;
  155. background-color: #007bff1f;
  156. }
  157. .notification_menu .all-as-read,
  158. .notification_menu .see-all-link {
  159. padding: 0.25rem;
  160. height: 25px;
  161. text-align: center;
  162. color: #0077b3;
  163. font-size: 0.7em;
  164. opacity: 1;
  165. }
  166. .notification_menu .all-as-read {
  167. text-align: right;
  168. }
  169. .notification_menu .all-as-read:hover,
  170. .notification_menu .see-all-link:hover {
  171. text-decoration: underline;
  172. }
  173. .notification-item-options + small {
  174. position: absolute;
  175. right: 6px;
  176. top: 6px;
  177. color: #a5a5a5;
  178. }
  179. .notification-item-options{
  180. /*position: absolute;
  181. right: 5px;
  182. top: 0;*/
  183. position: absolute;
  184. right: 5px;
  185. bottom: 0;
  186. margin-bottom: 0;
  187. }
  188. .notification-item-options > li{
  189. list-style-type: none;
  190. display: inline-block;
  191. padding: 5px 0.2rem;
  192. font-size: 14px;
  193. cursor: pointer;
  194. opacity: 0.5;
  195. color:#bebebe;
  196. transition:opacity 0.2s ease-in-out;
  197. }
  198. .notification-item-options > li:hover{
  199. opacity:1;
  200. }
  201. .notification-item-options > li.notification-read:hover {
  202. color: #17a2b8;
  203. }
  204. .notification-item-options > li.notification-delete:hover {
  205. color: #dc3545;
  206. }
  207. .notification_menu .dropdown-menu {
  208. width: 400px;
  209. text-align: left;
  210. /*max-height: 60vh;*/
  211. /*overflow: auto;*/
  212. }
  213. .notification_menu .dropdown-menu.dropdown-menu-right:after {
  214. position: absolute;
  215. top: -6px;
  216. right: 15px;
  217. display: inline-block;
  218. border-right: 6px solid transparent;
  219. border-bottom: 6px solid #ffffff;
  220. border-left: 6px solid transparent;
  221. content: '';
  222. }
  223. .notification_categories > .categories-items > .col-md-6 {
  224. padding: 5px 15px
  225. }
  226. .notification_categories .list-group-item.list-group-item-action {
  227. /*cursor: pointer;*/
  228. }
  229. .categories-items > .col-md-6 > div {
  230. cursor: pointer;
  231. user-select: none;
  232. }
  233. .module-notification,.module-notification body{
  234. min-height: 100%;
  235. height: 100%;
  236. background-color: #f4f4f4;
  237. margin-bottom: 0;
  238. }
  239. .module-notification .container-fluid{
  240. height: 100%;
  241. background-color: #f4f4f4;
  242. }
  243. .module-notification .footer{
  244. display: none;
  245. }
  246. .notifications-list{
  247. height: 100%;
  248. display: flex;
  249. }
  250. .notification-summary{
  251. background-color: #ffffff;
  252. padding:15px;
  253. width: 350px;
  254. box-shadow: 1px 0 3px rgba(0,0,0,0.1)
  255. }
  256. .notification-detail{
  257. padding:15px;
  258. flex: 1;
  259. }
  260. /* modif A.C. */
  261. .notifications-list .categories {
  262. font-size: 0.9em;
  263. user-select: none;
  264. }
  265. .notifications-list .categories,
  266. .notifications-list .items{
  267. list-style: none;
  268. padding: 0px
  269. }
  270. .notifications-list .categoryLabel{
  271. font-size: 1.1em;
  272. padding-left: 5px;
  273. }
  274. .notifications-list .categoryIcon{
  275. vertical-align: top;
  276. font-size: 0.8rem;
  277. line-height: 1.8rem;
  278. cursor: pointer;
  279. transition: transform 0.1s ease-in-out;
  280. }
  281. .notifications-list .category.folded .categoryIcon{
  282. transform: rotate(90deg);
  283. transform-origin: center;
  284. }
  285. .notifications-list .category.folded .items{
  286. display: block;
  287. }
  288. .notifications-list .items{
  289. display: none;
  290. padding-left: 10px;
  291. }
  292. .notifications-list .item{
  293. margin-bottom: 4px;
  294. padding-left: 10px;
  295. }
  296. @-webkit-keyframes swing {
  297. 20% {
  298. -webkit-transform: rotate3d(0, 0, 1, 15deg);
  299. transform: rotate3d(0, 0, 1, 15deg);
  300. }
  301. 40% {
  302. -webkit-transform: rotate3d(0, 0, 1, -10deg);
  303. transform: rotate3d(0, 0, 1, -10deg);
  304. }
  305. 60% {
  306. -webkit-transform: rotate3d(0, 0, 1, 5deg);
  307. transform: rotate3d(0, 0, 1, 5deg);
  308. }
  309. 80% {
  310. -webkit-transform: rotate3d(0, 0, 1, -5deg);
  311. transform: rotate3d(0, 0, 1, -5deg);
  312. }
  313. 100% {
  314. -webkit-transform: rotate3d(0, 0, 1, 0deg);
  315. transform: rotate3d(0, 0, 1, 0deg);
  316. }
  317. }
  318. @keyframes swing {
  319. 20% {
  320. -webkit-transform: rotate3d(0, 0, 1, 15deg);
  321. transform: rotate3d(0, 0, 1, 15deg);
  322. }
  323. 40% {
  324. -webkit-transform: rotate3d(0, 0, 1, -10deg);
  325. transform: rotate3d(0, 0, 1, -10deg);
  326. }
  327. 60% {
  328. -webkit-transform: rotate3d(0, 0, 1, 5deg);
  329. transform: rotate3d(0, 0, 1, 5deg);
  330. }
  331. 80% {
  332. -webkit-transform: rotate3d(0, 0, 1, -5deg);
  333. transform: rotate3d(0, 0, 1, -5deg);
  334. }
  335. 100% {
  336. -webkit-transform: rotate3d(0, 0, 1, 0deg);
  337. transform: rotate3d(0, 0, 1, 0deg);
  338. }
  339. }
  340. /* .notifications-list {
  341. margin-bottom: 60px;
  342. }
  343. .notifications-list h3 {
  344. margin-bottom: 15px;
  345. }
  346. .notifications-list .sidebar {
  347. user-select: none;
  348. position: fixed;
  349. padding: 15px;
  350. padding-bottom: 10px;
  351. width: 360px;
  352. height: 100%;
  353. z-index: 1;
  354. border-right: 1px solid #f5f5f5;
  355. background: #f5f5f5;
  356. }
  357. .notifications-list .sidebar .summary {
  358. font-size: 1.05em;
  359. }
  360. .notifications-list .summary > div {
  361. margin: auto;
  362. }
  363. .notifications-list .summary > div > i,
  364. .notifications-list .summary > div > .badge {
  365. margin: auto 0;
  366. }
  367. .notifications-list .sidebar .summary:hover i {
  368. -webkit-transform-origin: top center;
  369. -ms-transform-origin: top center;
  370. transform-origin: top center;
  371. -webkit-animation-name: swing;
  372. animation-name: swing;
  373. -webkit-animation-duration: 1s;
  374. animation-duration: 1s;
  375. -webkit-animation-fill-mode: both;
  376. animation-fill-mode: both;
  377. }
  378. .notifications-list .sidebar .summary:hover {
  379. transition: all 0.15s ease-in-out;
  380. }
  381. .notifications-list ul.notification-listing {
  382. padding-left: 20px;
  383. }
  384. .notifications-list ul.notification-listing li {
  385. list-style: none;
  386. }
  387. .notifications-list ul.sub-categories.collapsing {
  388. transition-duration: 0.15s;
  389. }
  390. .notifications-list ul.sub-categories li {
  391. padding: 0.25rem 1.25rem;
  392. padding-left: 2rem;
  393. }
  394. .notifications-list ul.sub-categories span.label {
  395. font-size: 0.9em;
  396. } */
  397. ul.notificationType{
  398. list-style: none;
  399. padding: 0px;
  400. }
  401. ul.notificationType > li{
  402. display: inline-block;
  403. margin-right: 1rem;
  404. }
  405. ul.notificationType .check-component > input {
  406. position: absolute;
  407. left: 0;
  408. z-index: -1;
  409. width: 1rem;
  410. height: 1.25rem;
  411. opacity: 0;
  412. margin-top: .3rem;
  413. margin-left: -1.25rem;
  414. }
  415. @media (max-width: 767px){
  416. #loginHeader #dropdownNotification {
  417. text-align: center;
  418. }
  419. div.notification_menu.dropdown {
  420. position: unset;
  421. }
  422. .notification_menu .dropdown-menu.dropdown-menu-right:after {
  423. right: 74px;
  424. }
  425. .notification_menu .dropdown-menu {
  426. width: 100% !important;
  427. }
  428. .btn .badge.notification-number {
  429. right: 50% !important;
  430. }
  431. .notifications-list .sidebar {
  432. position: initial;
  433. }
  434. ul.notifications {
  435. min-width: 0;
  436. }
  437. }