1
0

view.css 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873
  1. /*--- General section ---*/
  2. /*--- Views Block Style ---*/
  3. .bx-tl-views {
  4. position: relative;
  5. }
  6. .bx-tl-views .bx-loading-ajax {
  7. display: -webkit-flex;
  8. display: flex;
  9. -webkit-align-items: center;
  10. align-items: center;
  11. -webkit-justify-content: center;
  12. justify-content: center;
  13. top: 0;
  14. width: 100%;
  15. height: 100%;
  16. }
  17. .bx-tl-v-header {
  18. position: relative;
  19. display: -webkit-flex;
  20. display: flex;
  21. border-bottom-color: #e6f0fa;
  22. border-bottom-width: 2px;
  23. }
  24. .bx-tl-v-title,
  25. .bx-tl-v-submenu {
  26. -webkit-flex: 0 1 auto;
  27. -ms-flex: 0 1 auto;
  28. flex: 0 1 auto;
  29. line-height: 3.125rem;
  30. }
  31. .bx-tl-v-title,
  32. .bx-tl-v-submenu-cnt {
  33. height: 3.125rem;
  34. }
  35. .bx-tl-v-title {
  36. -webkit-flex-grow: 3;
  37. flex-grow: 3;
  38. border-bottom: 2px solid rgba(0,0,0,0.1);
  39. white-space: nowrap;
  40. font-size: 1rem;
  41. font-weight: 400;
  42. }
  43. .bx-tl-v-submenu {
  44. overflow-x: auto;
  45. overflow-y: hidden;
  46. -webkit-overflow-scrolling: touch;
  47. }
  48. .bx-tl-v-submenu::-webkit-scrollbar {
  49. width: 0.5rem;
  50. }
  51. .bx-tl-v-submenu::-webkit-scrollbar-track {
  52. -webkit-border-radius: 0.5rem;
  53. border-radius: 0.5rem;
  54. background-color: rgba(0, 0, 0, 0.1);
  55. }
  56. .bx-tl-v-submenu::-webkit-scrollbar-thumb {
  57. -webkit-border-radius: 0.5rem;
  58. border-radius: 0.5rem;
  59. background: rgba(255, 255, 255, 0.9);
  60. -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
  61. }
  62. .bx-tl-v-submenu::-webkit-scrollbar-thumb:window-inactive {
  63. background: rgba(255, 255, 255, 0.4);
  64. }
  65. .bx-tl-v-submenu-cnt ul {
  66. display: -webkit-flex;
  67. display: flex;
  68. }
  69. .bx-tl-v-submenu-cnt ul li {
  70. -webkit-flex: 0 1 auto;
  71. -ms-flex: 0 1 auto;
  72. flex: 0 1 auto;
  73. box-sizing: border-box;
  74. height: 3.125rem;
  75. border-bottom: 2px solid rgba(0,0,0,0.1);
  76. border-radius: 0;
  77. line-height: 3.125rem;
  78. white-space: nowrap;
  79. }
  80. .bx-tl-v-submenu-cnt ul li div {
  81. padding: 0 0.625rem;
  82. }
  83. .bx-tl-v-submenu-cnt ul li.bx-menu-inter-act {
  84. border-bottom-color: #364f6b;
  85. }
  86. .bx-tl-v-submenu-cnt ul li.bx-menu-inter-act > div {
  87. font-weight: bold;
  88. }
  89. .bx-tl-v-submenu-item .bx-cnc-psi-icon,
  90. .bx-tl-v-submenu-item .bx-cnc-psi-icon img {
  91. width: 1.5rem;
  92. height: 1.5rem;
  93. }
  94. .bx-tl-v-submenu-item .bx-cnc-psi-icon img {
  95. color: #002e74;
  96. }
  97. .bx-tl-v-submenu-item .bx-cnc-psi-icon .sys-icon {
  98. vertical-align: middle;
  99. font-size: 1.5rem;
  100. }
  101. .bx-tl-v-submenu-item .bx-cnc-psi-title {
  102. text-align: center;
  103. }
  104. .bx-tl-v-submenu-item.bx-cnc-psi-main .bx-cnc-psi-title {
  105. text-align: left;
  106. }
  107. .bx-tl-v-view {
  108. position: relative;
  109. }
  110. .bx-tl-v-form .bx-tl-v-user {
  111. position: absolute;
  112. top: 0;
  113. left: 0;
  114. }
  115. .bx-tl-v-form .bx-tl-v-content {
  116. display: -webkit-flex;
  117. display: flex;
  118. -webkit-align-items: center;
  119. align-items: center;
  120. }
  121. .bx-tl-v-form.bx-tl-v-default .bx-tl-v-content {
  122. -webkit-align-items: stretch;
  123. align-items: stretch;
  124. }
  125. .bx-tl-v-form.bx-tl-v-default .bx-tl-v-content > div {
  126. width: 100%;
  127. cursor: text;
  128. }
  129. .bx-tl-v-form .bx-uploader-ghost .bx-base-general-icon-wrapper img {
  130. max-width: 9.375rem;
  131. }
  132. .bx-db-container .bx-tl-v-gap {
  133. padding: 1rem;
  134. }
  135. /*--- View Block Style ---*/
  136. div.bx-tl-view {
  137. position: relative;
  138. }
  139. .bx-tl-grid-sizer {
  140. width: 100%;
  141. }
  142. .bx-tl-grid-item-sizer {
  143. width: 100%;
  144. }
  145. .bx-tl-view-sizer {
  146. width: 100%;
  147. }
  148. .bx-tl-view-sizer div.bx-tl-item-ind {
  149. padding: 0px;
  150. }
  151. div.bx-tl-items-wrapper {
  152. position: relative;
  153. }
  154. /*--- Back Style ---*/
  155. /*--- Load More Style ---*/
  156. div.bx-tl-view-timeline div.bx-tl-load-more {
  157. padding-top: 0px;
  158. }
  159. div.bx-tl-jump-to {
  160. position: relative;
  161. float: right;
  162. line-height: 36px;
  163. line-height: 2.25rem;
  164. }
  165. div.bx-tl-jump-to .bx-tl-jt-divider:last-child {
  166. display: none;
  167. }
  168. div.bx-tl-jump-to .bx-btn {
  169. display: inline-block;
  170. float: none;
  171. }
  172. div.bx-tl-jump-to .bx-tl-jump-to-calendar {
  173. position: relative;
  174. display: inline-block;
  175. visibility: hidden;
  176. width: 0;
  177. height: 100%;
  178. }
  179. /*--- Divider Styles ---*/
  180. div.bx-tl-divider {
  181. position: relative;
  182. }
  183. div.bx-tl-divider-cnt {
  184. position: relative;
  185. box-sizing: border-box;
  186. width: 100%;
  187. border: 2px solid rgba(0, 0, 0, 0.1);
  188. border-radius: 20px;
  189. -moz-border-radius: 20px;
  190. -webkit-border-radius: 20px;
  191. background-color: rgba(0, 0, 0, 0.1);
  192. text-align: center;
  193. text-transform: uppercase;
  194. font-weight: bold;
  195. color: #ffffff;
  196. }
  197. /*--- Item Style ---*/
  198. div.bx-tl-item,
  199. div.bx-tl-item-cnt {
  200. position: relative;
  201. }
  202. div.bx-tl-blink-plate {
  203. position: absolute;
  204. display: none;
  205. top: -10px;
  206. left: -10px;
  207. width: 100%;
  208. height: 100%;
  209. padding: 10px;
  210. background-color: rgb(255, 244, 213);
  211. background-color: rgba(255, 234, 193, 0.5);
  212. }
  213. div.bx-tl-item.bx-tl-blink div.bx-tl-blink-plate {
  214. display: block;
  215. }
  216. /*--- Item Owner Style ---*/
  217. div.bx-tl-item div.bx-tl-item-owner {
  218. position: relative;
  219. text-align: left;
  220. }
  221. div.bx-tl-item div.bx-tl-owner-avatar {
  222. position: absolute;
  223. top: 0px;
  224. left: 0px;
  225. }
  226. div.bx-tl-item div.bx-tl-owner-info {
  227. display: -webkit-flex;
  228. display: flex;
  229. -webkit-align-items: center;
  230. align-items: center;
  231. }
  232. div.bx-tl-item div.bx-tl-item-owner.bx-tl-io-with-actions div.bx-tl-owner-info {
  233. margin-right: 68px;
  234. margin-right: 4.25rem;
  235. }
  236. div.bx-tl-item div.bx-tl-owner-name {
  237. position: relative;
  238. display: -webkit-flex;
  239. display: flex;
  240. -webkit-align-items: center;
  241. align-items: center;
  242. -webkit-flex-wrap: wrap;
  243. flex-wrap: wrap;
  244. text-overflow: ellipsis;
  245. overflow: hidden;
  246. }
  247. div.bx-tl-item div.bx-tl-owner-name .bx-badge-compact {
  248. display:inline-block;
  249. }
  250. div.bx-tl-item div.bx-tl-owner-name > * {
  251. vertical-align: middle;
  252. }
  253. div.bx-tl-item div.bx-tl-owner-name > .bx-tl-on-nl {
  254. width: 100%;
  255. height: 0;
  256. }
  257. div.bx-tl-item div.bx-tl-owner-name a.bx-tl-owner-name,
  258. div.bx-tl-item div.bx-tl-owner-name .bx-tl-timeline-owner-name a.bx-tl-ton-item {
  259. font-weight: 700;
  260. }
  261. div.bx-tl-item div.bx-tl-owner-name .bx-tl-timeline-owner-name .bx-tl-ton-div:first-child {
  262. display: none;
  263. }
  264. div.bx-tl-item div.bx-tl-owner-name .bx-tl-date,
  265. div.bx-tl-item div.bx-tl-owner-name .bx-tl-pinned .sys-icon,
  266. div.bx-tl-item div.bx-tl-owner-name .bx-tl-sticked .sys-icon,
  267. div.bx-tl-item div.bx-tl-owner-name .bx-tl-hot .sys-icon {
  268. color: rgba(40, 60, 80, 0.5);
  269. }
  270. div.bx-tl-item div.bx-tl-owner-name .bx-tl-pinned .sys-icon,
  271. div.bx-tl-item div.bx-tl-owner-name .bx-tl-sticked .sys-icon,
  272. div.bx-tl-item div.bx-tl-owner-name .bx-tl-hot .sys-icon {
  273. display: inline-block;
  274. cursor: default;
  275. }
  276. div.bx-tl-item div.bx-tl-owner-actions {
  277. position: absolute;
  278. top: 0px;
  279. right: 0px;
  280. line-height: 48px;
  281. line-height: 3rem;
  282. }
  283. div.bx-tl-item div.bx-tl-owner-actions .bx-btn {
  284. display: inline-block;
  285. float: none;
  286. vertical-align: middle;
  287. }
  288. /*--- Item Meta Info Style ---*/
  289. .bx-tl-item-meta {
  290. white-space: nowrap;
  291. overflow: hidden;
  292. text-overflow: ellipsis;
  293. text-align: left;
  294. }
  295. .bx-tl-item-meta ul.bx-menu-custom.bx-menu-hor {
  296. position: relative;
  297. display: inline-block;
  298. }
  299. .bx-tl-item-meta ul.bx-menu-custom.bx-menu-hor > li {
  300. vertical-align: top;
  301. }
  302. .bx-tl-item-meta ul.bx-menu-custom.bx-menu-hor > li > span {
  303. margin-right: 0;
  304. }
  305. .bx-tl-item-meta ul.bx-menu-custom li:first-child .bx-tl-item-meta-div {
  306. display: none;
  307. }
  308. .bx-tl-item-meta ul.bx-menu-custom li .bx-tl-item-meta-item,
  309. .bx-tl-item-meta ul.bx-menu-custom li .bx-tl-item-meta-div,
  310. .bx-tl-item-meta ul.bx-menu-custom li .bx-btn {
  311. position: relative;
  312. float: none;
  313. display: inline-block;
  314. vertical-align: top;
  315. }
  316. /*--- Item Content Style ---*/
  317. div.bx-tl-item-content {
  318. position: relative;
  319. text-align: left;
  320. }
  321. div.bx-tl-item-content form {
  322. padding-left: 1rem;
  323. padding-right: 1rem;
  324. }
  325. div.bx-tl-item-content div.bx-tl-title {
  326. text-overflow: ellipsis;
  327. overflow: hidden;
  328. }
  329. div.bx-tl-item-content div.bx-tl-content iframe {
  330. width: 100%;
  331. min-height: 240px !important;
  332. }
  333. div.bx-tl-item-text div.bx-tl-content {
  334. position: relative;
  335. max-height: 250px;
  336. text-overflow: ellipsis;
  337. overflow: hidden;
  338. }
  339. div.bx-tl-item-text div.bx-tl-content > p:first-child {
  340. margin-top: 0;
  341. padding-top: 0;
  342. }
  343. div.bx-tl-item-text div.bx-tl-content > p:last-child {
  344. margin-bottom: 0;
  345. padding-bottom: 0;
  346. }
  347. div.bx-tl-item-text div.bx-tl-content.bx-tl-overflow:before {
  348. position: absolute;
  349. bottom: 0;
  350. width: 100%;
  351. height: 20%;
  352. background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1.0));
  353. background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1.0));
  354. background: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1.0));
  355. background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1.0));
  356. content: '';
  357. }
  358. div.bx-tl-item-text div.bx-tl-content-show-more {
  359. position: relative;
  360. }
  361. div.bx-tl-item-text div.bx-tl-content p {
  362. margin-top: 10px;
  363. margin-top: 0.625rem;
  364. margin-bottom: 10px;
  365. margin-bottom: 0.625rem;
  366. }
  367. div.bx-tl-item-text div.bx-tl-content img {
  368. max-width: 100%;
  369. height: auto;
  370. }
  371. /*--- Item Images Style ---*/
  372. div.bx-tl-item div.bx-tl-item-images {
  373. position: relative;
  374. white-space: nowrap;
  375. overflow: hidden;
  376. }
  377. div.bx-tl-item div.bx-tl-item-image {
  378. display: inline-block;
  379. }
  380. /*--- Item Activity (Actions and Manage are different menus) ---*/
  381. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom:not(.bx-menu-submenu-more-auto) {
  382. position: relative;
  383. display: -webkit-flex;
  384. display: flex;
  385. -webkit-justify-content: flex-start;
  386. justify-content: flex-start;
  387. }
  388. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom:not(.bx-menu-submenu-more-auto).bx-mma-ready {
  389. -webkit-justify-content: flex-start;
  390. justify-content: flex-start;
  391. }
  392. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom:not(.bx-menu-submenu-more-auto)::before,
  393. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom:not(.bx-menu-submenu-more-auto)::after {
  394. display: none;
  395. }
  396. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom li > a,
  397. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom li > span {
  398. display: block;
  399. }
  400. div.bx-tl-item div.bx-tl-item-activity.bx-tl-ia-counters .bx-menu-custom.bx-menu-hor li > a,
  401. div.bx-tl-item div.bx-tl-item-activity.bx-tl-ia-counters .bx-menu-custom.bx-menu-hor li > div,
  402. div.bx-tl-item div.bx-tl-item-activity.bx-tl-ia-counters .bx-menu-custom.bx-menu-hor li > span,
  403. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom.bx-menu-hor.bx-menu-more-auto:not(.bx-menu-submenu-more-auto) li > a,
  404. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom.bx-menu-hor.bx-menu-more-auto:not(.bx-menu-submenu-more-auto) li > span {
  405. margin-right: 1.25rem;
  406. }
  407. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom li > span {
  408. margin-right: 0;
  409. }
  410. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom li > span.bx-def-margin-thd-topbottom {
  411. margin-top: 0;
  412. margin-bottom: 0;
  413. }
  414. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom li > span img {
  415. background-size: contain;
  416. background-repeat: no-repeat;
  417. background-position: center center;
  418. }
  419. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom li .sys-action-do-icon,
  420. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom li .bx-menu-item-icon {
  421. box-sizing: border-box;
  422. width: 2.0rem;
  423. height: 2.0rem;
  424. background-color: rgba(232, 232, 232, 1.0);
  425. border: 1px solid #ffffff;
  426. border-radius: 1rem;
  427. font-size: 1.0rem;
  428. }
  429. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom li .sys-action-do-icon .sys-icon,
  430. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom li .bx-menu-item-icon .sys-icon {
  431. vertical-align: top;
  432. }
  433. /*--- Item Activity (all actions in one menu) ---*/
  434. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom.bx-menu-more-auto > li.bx-menu-item {
  435. padding: 0;
  436. white-space: nowrap;
  437. }
  438. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom.bx-menu-more-auto > li.bx-menu-item.bx-menu-item-more-auto a {
  439. padding: 0;
  440. }
  441. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom.bx-menu-more-auto .bx-popup .bx-menu-custom.bx-menu-submenu-more-auto > li.bx-menu-item a > span {
  442. margin-left: 0;
  443. }
  444. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom.bx-menu-more-auto .bx-popup .bx-menu-custom.bx-menu-submenu-more-auto > li.bx-menu-item a .sys-action-do-icon,
  445. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom.bx-menu-more-auto .bx-popup .bx-menu-custom.bx-menu-submenu-more-auto > li.bx-menu-item a .sys-action-do-icon > .sys-icon,
  446. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom.bx-menu-more-auto .bx-popup .bx-menu-custom.bx-menu-submenu-more-auto > li.bx-menu-item a .bx-menu-item-icon,
  447. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom.bx-menu-more-auto .bx-popup .bx-menu-custom.bx-menu-submenu-more-auto > li.bx-menu-item a .bx-menu-item-icon > .sys-icon {
  448. width: 1.5rem;
  449. height: 1.5rem;
  450. background-color: transparent;
  451. border-color: transparent;
  452. line-height: 1.5rem;
  453. font-size: 1.0rem;
  454. }
  455. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom.bx-menu-more-auto .bx-popup .bx-menu-custom.bx-menu-submenu-more-auto > li.bx-menu-item a .sys-action-do-text,
  456. div.bx-tl-item div.bx-tl-item-activity .bx-menu-custom.bx-menu-more-auto .bx-popup .bx-menu-custom.bx-menu-submenu-more-auto > li.bx-menu-item a .bx-menu-item-title {
  457. margin-left: 0.5rem;
  458. }
  459. /*--- Item Style: Timeline ---*/
  460. div.bx-tl-view-timeline div.bx-tl-items:before {
  461. content: '';
  462. position: absolute;
  463. top: 0px;
  464. left: 0.875rem;
  465. width: 4px;
  466. height: 100%;
  467. background: #dddddd;
  468. }
  469. div.bx-tl-view-timeline div.bx-tl-items,
  470. div.bx-tl-view-search div.bx-tl-items,
  471. div.bx-tl-view-item div.bx-tl-items {
  472. margin-left: 0px;
  473. margin-right: 0px;
  474. }
  475. div.bx-tl-view-timeline div.bx-tl-item,
  476. div.bx-tl-view-search div.bx-tl-item,
  477. div.bx-tl-view-item div.bx-tl-item {
  478. position: relative;
  479. }
  480. div.bx-tl-view-timeline div.bx-tl-item-type {
  481. position: absolute;
  482. top: 0px;
  483. left: 0px;
  484. }
  485. div.bx-tl-view-timeline div.bx-tl-item-circle {
  486. position: relative;
  487. display: -webkit-flex;
  488. display: flex;
  489. -webkit-align-items: center;
  490. align-items: center;
  491. -webkit-justify-content: center;
  492. justify-content: center;
  493. width: 2rem;
  494. height: 2rem;
  495. background-color: #dddddd;
  496. background-clip: padding-box;
  497. border-radius: 2rem;
  498. text-align: center;
  499. color: #999999;
  500. overflow: hidden;
  501. }
  502. div.bx-tl-view-timeline div.bx-tl-item-circle .sys-icon {
  503. font-size: 1.0rem;
  504. }
  505. /*--- Item Style: Outline ---*/
  506. div.bx-tl-view-outline div.bx-tl-item {
  507. position: relative;
  508. }
  509. div.bx-tl-view-outline div.bx-tl-item div.bx-tl-item-owner.bx-tl-io-with-actions div.bx-tl-owner-info {
  510. margin-right: 48px;
  511. margin-right: 3.0rem;
  512. }
  513. div.bx-tl-view-outline div.bx-tl-item-ind {
  514. position: relative;
  515. }
  516. /*+++ Item Text +++*/
  517. div.bx-tl-view-outline div.bx-tl-item-text div.bx-tl-title {
  518. font-weight: bold;
  519. }
  520. div.bx-tl-view-outline div.bx-tl-content-show-more a {
  521. font-weight: bold;
  522. }
  523. /*+++ Item Image +++*/
  524. div.bx-tl-view-search div.bx-tl-item-images {
  525. margin-left: 0px;
  526. margin-right: 0px;
  527. }
  528. div.bx-tl-view-search div.bx-tl-item-image {
  529. margin-right: 2px;
  530. margin-right: 0.125rem;
  531. }
  532. div.bx-tl-view-timeline div.bx-tl-item-image,
  533. div.bx-tl-view-outline div.bx-tl-item-image,
  534. div.bx-tl-view-item div.bx-tl-item-image {
  535. width: 100%;
  536. text-align: center;
  537. overflow: hidden;
  538. }
  539. div.bx-tl-view-search div.bx-tl-item-image img {
  540. height: 12.5rem;
  541. }
  542. div.bx-tl-view-timeline div.bx-tl-item-images.bx-tl-ii-gallery div.bx-tl-item-image img,
  543. div.bx-tl-view-item div.bx-tl-item-images.bx-tl-ii-gallery div.bx-tl-item-image img,
  544. div.bx-tl-view-timeline div.bx-tl-item-images.bx-tl-ii-single div.bx-tl-item-image img,
  545. div.bx-tl-view-item div.bx-tl-item-images.bx-tl-ii-single div.bx-tl-item-image img {
  546. position: relative;
  547. display: block;
  548. max-width: 100%;
  549. margin-left: auto;
  550. margin-right: auto;
  551. }
  552. div.bx-tl-view-outline div.bx-tl-item-image img {
  553. max-width: 100%;
  554. object-fit: cover;
  555. object-position: center center;
  556. }
  557. /*+++ Item Video +++*/
  558. div.bx-tl-view-timeline div.bx-tl-item-video,
  559. div.bx-tl-view-outline div.bx-tl-item-video,
  560. div.bx-tl-view-item div.bx-tl-item-video {
  561. width: 100%;
  562. }
  563. .bx-tl-video-iframe {
  564. width: 100%;
  565. border: none;
  566. }
  567. div.bx-tl-view div.bx-tl-item-videos.bx-tl-iv-gallery div.bx-tl-item-video video,
  568. div.bx-tl-view div.bx-tl-item-videos.bx-tl-iv-single div.bx-tl-item-video video {
  569. display: block;
  570. max-width: 100%;
  571. margin-left: auto;
  572. margin-right: auto;
  573. }
  574. /*+++ Item Attachment +++*/
  575. div.bx-tl-view-timeline div.bx-tl-item-attachment,
  576. div.bx-tl-view-outline div.bx-tl-item-attachment,
  577. div.bx-tl-view-item div.bx-tl-item-attachment,
  578. div.bx-tl-view-search div.bx-tl-item-attachment {
  579. position: relative;
  580. display: -webkit-flex;
  581. display: flex;
  582. -webkit-justify-content: center;
  583. justify-content: center;
  584. width: 100%;
  585. }
  586. div.bx-tl-view-timeline div.bx-tl-item-attachments.bx-tl-ia-gallery div.bx-tl-item-attachment img,
  587. div.bx-tl-view-item div.bx-tl-item-attachments.bx-tl-ia-gallery div.bx-tl-item-attachment img,
  588. div.bx-tl-view-search div.bx-tl-item-attachments.bx-tl-ia-gallery div.bx-tl-item-attachment img {
  589. position: relative;
  590. display: block;
  591. max-width: 100%;
  592. margin-left: auto;
  593. margin-right: auto;
  594. }
  595. div.bx-tl-view-outline div.bx-tl-item-attachment img {
  596. max-width: 100%;
  597. object-fit: cover;
  598. object-position: center center;
  599. }
  600. /*+++ Video +++*/
  601. div.bx-tl-view-timeline div.bx-tl-item-attachment video,
  602. div.bx-tl-view-outline div.bx-tl-item-attachment video,
  603. div.bx-tl-view-item div.bx-tl-item-attachment video {
  604. display: block;
  605. max-width: 100%;
  606. margin-left: auto;
  607. margin-right: auto;
  608. }
  609. div.bx-tl-item-attachment .bx-tl-item-video {
  610. position: relative;
  611. }
  612. div.bx-tl-item-attachment .bx-tl-iv-duration {
  613. position: absolute;
  614. right: 0.25rem;
  615. bottom: 0.25rem;
  616. background-color: rgba(255, 255, 255, 0.8);
  617. }
  618. /*+++ Showcase Layout +++*/
  619. div.bx-tl-item-attachments.bx-tl-ia-showcase {
  620. display: -webkit-flex;
  621. display: flex;
  622. -webkit-flex-wrap: wrap;
  623. flex-wrap: wrap;
  624. -webkit-justify-content: space-between;
  625. justify-content: space-between;
  626. }
  627. div.bx-tl-item-attachments.bx-tl-ia-showcase div.bx-tl-item-attachment {
  628. box-sizing: border-box;
  629. width: 33.2%;
  630. height: 8.5rem;
  631. border: 1px solid transparent;
  632. }
  633. div.bx-tl-item-attachments.bx-tl-ia-showcase div.bx-tl-item-attachment.bx-tl-ia-first,
  634. div.bx-tl-item-attachments.bx-tl-ia-showcase.bx-tl-ia-i2 div.bx-tl-item-attachment {
  635. width: 100%;
  636. height: auto;
  637. }
  638. div.bx-tl-item-attachments.bx-tl-ia-showcase.bx-tl-ia-i3 div.bx-tl-item-attachment:not(.bx-tl-ia-first) {
  639. width: 50%;
  640. }
  641. div.bx-tl-item-attachments.bx-tl-ia-showcase a,
  642. div.bx-tl-item-attachments.bx-tl-ia-showcase img {
  643. position: relative;
  644. display: block;
  645. width: 100%;
  646. height: 100%;
  647. }
  648. div.bx-tl-item-attachments.bx-tl-ia-showcase img {
  649. object-fit: cover;
  650. }
  651. div.bx-tl-item-attachments.bx-tl-ia-showcase .bx-tl-item-more {
  652. position: absolute;
  653. display: -webkit-flex;
  654. display: flex;
  655. -webkit-align-items: center;
  656. align-items: center;
  657. -webkit-justify-content: center;
  658. justify-content: center;
  659. top: 0;
  660. left: 0;
  661. width: 100%;
  662. height: 100%;
  663. background-color: rgba(0, 0, 0, 0.7);
  664. font-size: 2.5rem;
  665. }
  666. div.bx-tl-item-attachments.bx-tl-ia-showcase .bx-tl-item-more,
  667. div.bx-tl-item-attachments.bx-tl-ia-showcase .bx-tl-item-more a {
  668. color: #ffffff;
  669. }
  670. /*+++ Slider Styles +++*/
  671. div.bx-tl-item-images .flickity-slider,
  672. div.bx-tl-item-videos .flickity-slider,
  673. div.bx-tl-item-attachments .flickity-slider {
  674. display: -webkit-flex;
  675. display: flex;
  676. -webkit-align-items: center;
  677. align-items: center;
  678. }
  679. /*+++ Item Link +++*/
  680. div.bx-tl-view-outline div.bx-tl-item-link {
  681. text-align: center;
  682. }
  683. div.bx-tl-view-outline div.bx-tl-il-thumbnail img {
  684. width: 100%;
  685. max-width: 100px;
  686. height: 100%;
  687. max-height: 100px;
  688. }
  689. div.bx-tl-view-outline div.bx-tl-il-embed iframe,
  690. div.bx-tl-view-timeline div.bx-tl-il-embed iframe {
  691. width: 100%;
  692. }
  693. /*+++ Item Reposted +++*/
  694. div.bx-tl-view-outline div.bx-tl-reposted div.bx-tl-item-text {
  695. padding-left: 5px;
  696. padding-left: 0.3rem;
  697. border-left: 1px solid #999999;
  698. border-left: 0.07rem solid #999999;
  699. }
  700. div.bx-tl-view-outline div.bx-tl-reposted div.bx-tl-title {
  701. font-size: 1.0rem;
  702. }
  703. div.bx-tl-view-outline div.bx-tl-reposted div.bx-tl-title a {
  704. color: #999999;
  705. }
  706. div.bx-tl-view-outline div.bx-tl-reposted div.bx-tl-content {
  707. font-size: 0.875rem;
  708. color: #999999;
  709. }
  710. /*--- Item Style: View page ---*/
  711. div.bx-tl-view-item-comments .bx-tl-item-comments {
  712. margin-top: 0;
  713. }
  714. div.bx-tl-view-item-comments .cmts .cmt:first-child {
  715. padding-top: 0;
  716. }
  717. div.bx-tl-view-info {
  718. position: relative;
  719. }
  720. div.bx-tl-view-info .bx-base-pofile-unit {
  721. float: none;
  722. }
  723. /*--- Item Brief Style ---*/
  724. div.bx-tl-bview-image {
  725. text-align: center;
  726. }
  727. div.bx-tl-bview-image img {
  728. max-width: 100%;
  729. }
  730. /*--- Empty Style ---*/
  731. div.bx-tl-empty div.bx-msg-box-container {
  732. margin-top: 0px;
  733. margin-bottom: 0px;
  734. }
  735. /*--- Comments Styles ---*/
  736. div.bx-tl-item-comments-holder .cmt.bx-def-box {
  737. border-width: 0px;
  738. }
  739. /*--- Live Update Alert Styles ---*/
  740. div.bx-tl-live-update-button {
  741. position: relative;
  742. text-align: center;
  743. }
  744. @supports(position:sticky) {
  745. div.bx-tl-live-update-button {
  746. position: sticky;
  747. top: 1rem;
  748. z-index: 1;
  749. }
  750. }
  751. @supports(position:-webkit-sticky) {
  752. div.bx-tl-live-update-button {
  753. position: -webkit-sticky;
  754. top: 1rem;
  755. z-index: 1;
  756. }
  757. }
  758. div.bx-tl-live-update-button .bx-btn {
  759. display: inline-block;
  760. float: none;
  761. }
  762. /*--- Live Update Notifications Styles ---*/
  763. .bx-tl-live-update-item {
  764. position: relative;
  765. display: block;
  766. }
  767. div.bx-tl-lui-cnt {
  768. position: relative;
  769. }
  770. div.bx-tl-lui-avatar {
  771. position: absolute;
  772. top: 0px;
  773. left: 0px;
  774. text-align: center;
  775. }
  776. div.bx-tl-lui-info {
  777. position: realtive;
  778. display: -webkit-flex;
  779. display: flex;
  780. -webkit-align-items: center;
  781. align-items: center;
  782. }
  783. div.bx-tl-luii-username {
  784. white-space: nowrap;
  785. text-overflow: ellipsis;
  786. overflow: hidden;
  787. }