general.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555
  1. .bx-page-image-container img,
  2. .bx-page-html-container img {
  3. max-width:100%;
  4. height:auto;
  5. }
  6. .bx-page-html-container {
  7. overflow:hidden;
  8. }
  9. /* --------------- toolbar */
  10. .bx-toolbar-anim {
  11. -webkit-transition: all .25s ease-in-out;
  12. -moz-transition: all .25s ease-in-out;
  13. -o-transition: all .25s ease-in-out;
  14. transition: all .25s ease-in-out
  15. }
  16. .bx-toolbar-reset {
  17. -webkit-transform: translateY(0);
  18. -ms-transform: translateY(0);
  19. transform: translateY(0)
  20. }
  21. .bx-toolbar-up {
  22. -webkit-transform: translateY(-100%);
  23. -ms-transform: translateY(-100%);
  24. transform: translateY(-100%)
  25. }
  26. #bx-toolbar {
  27. position:fixed;
  28. width:100%;
  29. height:48px;
  30. height:3rem;
  31. }
  32. .bx-toolbar-content {
  33. display: -webkit-flex;
  34. display: flex;
  35. z-index: 500;
  36. -webkit-justify-content: flex-start;
  37. justify-content: flex-start;
  38. -webkit-align-items: center;
  39. align-items: center;
  40. -webkit-flex-flow: row nowrap;
  41. flex-flow: row nowrap;
  42. }
  43. .bx-toolbar-content .bx-toolbar-item {
  44. position: relative;
  45. -webkit-flex: 0 1 auto;
  46. -ms-flex: 0 1 auto;
  47. flex: 0 1 auto;
  48. }
  49. .bx-toolbar-content .bx-toolbar-item.bx-ti-stretcher {
  50. -webkit-flex-grow: 1;
  51. flex-grow: 1;
  52. white-space: nowrap;
  53. }
  54. .bx-toolbar-content .bx-toolbar-item.bx-ti-logo {
  55. white-space: nowrap;
  56. }
  57. .bx-toolbar-content .bx-toolbar-item.bx-ti-logo img {
  58. display: block;
  59. }
  60. #bx-menu-toolbar-1-container,
  61. #bx-menu-toolbar-2-container {
  62. position:relative;
  63. }
  64. #bx-logo-container {
  65. -moz-box-sizing: border-box;
  66. -ms-box-sizing: border-box;
  67. box-sizing: border-box;
  68. height: 3rem;
  69. margin:0 1.0rem;
  70. text-align: center;
  71. font-size: 2rem;
  72. }
  73. #bx-logo-container a {
  74. position: relative;
  75. display: block;
  76. text-decoration: none;
  77. }
  78. #bx-logo-container a span {
  79. position: relative;
  80. display: block;
  81. max-width: 100%;
  82. line-height: 48px;
  83. line-height: 3rem;
  84. white-space: nowrap;
  85. overflow: hidden;
  86. text-overflow: ellipsis;
  87. }
  88. #bx-logo {
  89. vertical-align:middle;
  90. }
  91. /* --------------- Submenu */
  92. .bx-menu-main-bar-gap {
  93. position: relative;
  94. }
  95. .bx-media-tablet .bx-menu-main-bar-gap.bx-def-page-width,
  96. .bx-media-phone .bx-menu-main-bar-gap.bx-def-page-width {
  97. width: 100%;
  98. }
  99. .bx-media-phone .bx-menu-main-bar-gap {
  100. padding-left: 0;
  101. padding-right: 0;
  102. }
  103. .bx-menu-main-bar-wrapper {
  104. position: relative;
  105. border-top-left-radius: 0;
  106. border-top-right-radius: 0;
  107. }
  108. .bx-menu-main-bar-wrapper:before,
  109. .bx-menu-main-bar-wrapper:after {
  110. display: block;
  111. content: "";
  112. position: absolute;
  113. top: 0;
  114. width: 1.5rem;
  115. height: 100%;
  116. z-index: 1;
  117. }
  118. .bx-menu-main-bar-wrapper:before {
  119. left: 0px;
  120. }
  121. .bx-menu-main-bar-wrapper:after {
  122. right: 0px;
  123. }
  124. .bx-media-phone .bx-menu-main-bar-wrapper {
  125. border-left-width: 0;
  126. border-right-width: 0;
  127. border-bottom-left-radius: 0;
  128. border-bottom-right-radius: 0;
  129. }
  130. .bx-media-phone .bx-menu-main-bar-wrapper:before {
  131. border-bottom-left-radius: 0;
  132. }
  133. .bx-media-phone .bx-menu-main-bar-wrapper:after {
  134. border-bottom-right-radius: 0;
  135. }
  136. .bx-menu-main-bar {
  137. text-align: center;
  138. -webkit-overflow-scrolling: touch;
  139. }
  140. .bx-menu-main-bar:not(.bx-menu-more-auto) {
  141. overflow-x: auto;
  142. }
  143. /* --------------- content */
  144. #bx-content-wrapper {
  145. position: relative;
  146. -webkit-flex-grow: 3;
  147. flex-grow: 3;
  148. }
  149. /* --------------- footer */
  150. #bx-footer-wrapper {
  151. position: relative;
  152. -webkit-flex-grow: 0;
  153. flex-grow: 0;
  154. width: 100%;
  155. bottom: 0;
  156. }
  157. #bx-footer-wrapper .bx-def-hr {
  158. margin-top: 0px;
  159. }
  160. #bx-menu-bottom ul {
  161. text-align: center;
  162. }
  163. #bx-menu-bottom ul li {
  164. line-height: 2rem;
  165. }
  166. .bx-menu-switch-language-inline {
  167. float: none;
  168. clear: both;
  169. }
  170. .bx-menu-switch-language-inline .bx-menu-hor {
  171. text-align: center;
  172. }
  173. .bx-menu-switch-language-inline .bx-menu-hor li {
  174. float: none;
  175. display: inline-block;
  176. }
  177. /* --------------- 'Add to Homescreen' popup */
  178. .ath-container {
  179. color: #333;
  180. }
  181. /* --------------- Account */
  182. p.bx-account-unit-thumb {
  183. display: block;
  184. margin: 0px;
  185. background: #ffffff;
  186. background-clip: padding-box;
  187. box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2);
  188. line-height: 46px;
  189. line-height: 2.9rem;
  190. font-size: 32px;
  191. font-size: 2.0rem;
  192. font-weight: 700;
  193. color: #d0d0d0;
  194. }
  195. p.bx-account-unit-thumb.bx-def-icon-size {
  196. line-height: 26px;
  197. line-height: 1.75rem;
  198. font-size: 19.5px;
  199. font-size: 1.3rem;
  200. }
  201. p.bx-account-unit-thumb.bx-def-border {
  202. border-width: 2px;
  203. border-color: #ffffff;
  204. }
  205. div.bx-account-unit-online {
  206. position: absolute;
  207. right: 0;
  208. bottom: 0;
  209. width: 0.625rem;
  210. height: 0.625rem;
  211. border: 1px solid #ffffff;
  212. border-radius: 0.625rem;
  213. background-color: #7ed321;
  214. }
  215. /* --------------- Mentions */
  216. .bx-mention-row img {
  217. width:1rem;
  218. height:1rem;
  219. vertical-align:middle;
  220. }
  221. .bx-mention-row span {
  222. vertical-align:middle;
  223. }
  224. /* --------------- Profile Stats */
  225. .bx-profile-stats {
  226. overflow: hidden;
  227. }
  228. .bx-profile-stats .bx-ps-user-cnt {
  229. display: -webkit-flex;
  230. display: flex;
  231. -webkit-align-items: center;
  232. align-items: center;
  233. -webkit-justify-content: flex-start;
  234. justify-content: flex-start;
  235. }
  236. .bx-profile-stats .bx-ps-user-cnt .bx-def-ava-size {
  237. width: 3.75rem;
  238. height: 3.75rem;
  239. }
  240. .bx-profile-stats .bx-ps-user-cnt .bx-def-ava-size,
  241. .bx-profile-stats .bx-ps-user-cnt div.bx-def-unit-img p.bx-base-pofile-unit-thumb.bx-def-ava-size {
  242. line-height: 3.5rem;
  243. font-size: 2.325rem;
  244. }
  245. .bx-profile-stats .bx-ps-user-img {
  246. -webkit-flex: 0 2 auto;
  247. flex: 0 2 auto;
  248. }
  249. .bx-profile-stats .bx-ps-user-info {
  250. -webkit-flex: 1 1 auto;
  251. flex: 1 1 auto;
  252. }
  253. .bx-profile-stats .bx-ps-user-info-cnt {
  254. display: -webkit-flex;
  255. display: flex;
  256. -webkit-align-items: flex-start;
  257. align-items: flex-start;
  258. -webkit-flex-direction: column;
  259. flex-direction: column;
  260. }
  261. /* --------------- Create Post Form */
  262. .sys-create-post-form {
  263. position: relative;
  264. }
  265. .sys-create-post-form .bx-loading-ajax {
  266. display: -webkit-flex;
  267. display: flex;
  268. -webkit-align-items: center;
  269. align-items: center;
  270. -webkit-justify-content: center;
  271. justify-content: center;
  272. top: 0;
  273. width: 100%;
  274. height: 100%;
  275. }
  276. .sys-cpf-header {
  277. position: relative;
  278. display: -webkit-flex;
  279. display: flex;
  280. -webkit-justify-content: space-between;
  281. justify-content: space-between;
  282. height: 3.125rem;
  283. border-bottom: 2px solid rgba(0,0,0,0.1);
  284. }
  285. .sys-cpf-title,
  286. .sys-cpf-submenu {
  287. position: relative;
  288. -webkit-flex: 0 1 auto;
  289. -ms-flex: 0 1 auto;
  290. flex: 1 1 auto;
  291. line-height: 3.125rem;
  292. }
  293. .sys-cpf-title,
  294. .sys-cpf-submenu-cnt {
  295. height: 3.125rem;
  296. }
  297. .sys-cpf-title {
  298. -webkit-flex-grow: 3;
  299. flex-grow: 3;
  300. max-width: 20%;
  301. white-space: nowrap;
  302. font-size: 1rem;
  303. font-weight: 400;
  304. }
  305. .sys-cpf-title-cnt {
  306. white-space: nowrap;
  307. overflow: hidden;
  308. text-overflow:ellipsis;
  309. }
  310. .sys-cpf-submenu {
  311. max-width: 80%;
  312. }
  313. .bx-media-phone .sys-cpf-title {
  314. max-width: 30%;
  315. }
  316. .bx-media-phone .sys-cpf-submenu {
  317. max-width: 70%;
  318. }
  319. .sys-cpf-submenu-cnt ul.bx-menu-custom.bx-menu-custom-hor.bx-menu-more-auto:not(.bx-menu-submenu-more-auto) {
  320. display: -webkit-flex;
  321. display: flex;
  322. -webkit-justify-content: flex-end;
  323. justify-content: flex-end;
  324. }
  325. .sys-cpf-submenu-cnt ul.bx-menu-submenu-more-auto {
  326. line-height: normal;
  327. }
  328. .sys-cpf-submenu-cnt ul li {
  329. border-radius: 0;
  330. white-space: nowrap;
  331. }
  332. .sys-cpf-submenu-cnt ul:not(.bx-menu-submenu-more-auto) > li {
  333. -webkit-flex: 0 1 auto;
  334. -ms-flex: 0 1 auto;
  335. flex: 0 1 auto;
  336. height: 3.125rem;
  337. border-bottom: 2px solid transparent;
  338. line-height: 3.125rem;
  339. }
  340. .sys-cpf-submenu-cnt ul li > span {
  341. margin: 0;
  342. padding: 0;
  343. }
  344. .sys-cpf-submenu-cnt ul li:not(.bx-menu-item-more-auto) a .sys-icon {
  345. display: none;
  346. }
  347. .sys-cpf-submenu-cnt ul li:not(.bx-menu-item-more-auto) a span,
  348. .sys-cpf-submenu-cnt ul.bx-menu-custom.bx-menu-custom-ver.bx-menu-submenu-more-auto li:not(.bx-menu-item-more-auto) a span {
  349. margin: 0;
  350. }
  351. .sys-cpf-submenu-cnt ul li.bx-menu-tab-active {
  352. border-bottom: 2px solid #364f6b;
  353. }
  354. .sys-cpf-form {
  355. position: relative;
  356. }
  357. .sys-cpf-form .sys-cpf-user {
  358. position: absolute;
  359. top: 0;
  360. left: 0;
  361. }
  362. .sys-cpf-form .sys-cpf-content {
  363. display: -webkit-flex;
  364. display: flex;
  365. -webkit-align-items: center;
  366. align-items: center;
  367. }
  368. .sys-cpf-form.sys-cpf-default .sys-cpf-content {
  369. -webkit-align-items: stretch;
  370. align-items: stretch;
  371. }
  372. .sys-cpf-form.sys-cpf-default .sys-cpf-content > div {
  373. display: -webkit-flex;
  374. display: flex;
  375. -webkit-align-items: center;
  376. align-items: center;
  377. width: 100%;
  378. cursor: text;
  379. }
  380. .sys-cpf-form .bx-uploader-ghost .bx-base-general-icon-wrapper img {
  381. max-width: 9.375rem;
  382. }
  383. .sys-cpf-close {
  384. position: absolute;
  385. display: none;
  386. right: 0;
  387. bottom: 0;
  388. }
  389. /* --------------- Account Unit */
  390. .bx-account-unit .bx-def-unit-img,
  391. .bx-account-unit-wo-info .bx-def-unit-img {
  392. position: relative;
  393. overflow: visible;
  394. }
  395. /* --------------- Author Info */
  396. .sys-author-info {
  397. display: -webkit-flex;
  398. display: flex;
  399. -webkit-align-items: center;
  400. align-items: center;
  401. -webkit-justify-content: space-between;
  402. justify-content: space-between;
  403. -webkit-flex-wrap: wrap;
  404. flex-wrap: wrap;
  405. }
  406. .sys-author-profile ul.bx-menu-custom.bx-menu-custom-hor {
  407. line-height: 0.625rem;
  408. }
  409. .sys-author-profile ul.bx-menu-custom.bx-menu-custom-hor > li.bx-menu-item-nl {
  410. width: 100%;
  411. }
  412. .sys-author-profile .bx-menu-custom.bx-menu-custom-hor > li > span {
  413. margin-right: 0;
  414. }
  415. .sys-author-profile .bx-menu-custom.bx-menu-custom-hor > li > span.bx-base-profile-unit-meta-item.bx-def-padding-thd-leftright {
  416. padding-left: 0;
  417. padding-right: 0.5rem;
  418. }
  419. .sys-author-profile .bx-menu-custom.bx-menu-custom-hor > li:first-child .bx-base-general-unit-meta-div {
  420. display: none;
  421. }
  422. /* --------------- Author Info */
  423. audio.bx-player-embed,
  424. video.bx-player-embed {
  425. width:100vw;
  426. height:100vh;
  427. }
  428. /* --------------- Search */
  429. .bx-sys-search-results-pages {
  430. text-align:left;
  431. line-height:150%;
  432. }
  433. .bx-page-block-container .bx-search-results:first-child {
  434. padding-top:0;
  435. }
  436. /* --------------- Content loader placeholder */
  437. @-webkit-keyframes bxPlaceHolderShimmer {
  438. 0% {
  439. background-position: -468px 0;
  440. }
  441. 100% {
  442. background-position: 468px 0;
  443. }
  444. }
  445. @keyframes bxPlaceHolderShimmer {
  446. 0% {
  447. background-position: -468px 0;
  448. }
  449. 100% {
  450. background-position: 468px 0;
  451. }
  452. }
  453. .bx-cont-ph-inline,
  454. .bx-cont-ph {
  455. -webkit-animation-duration: 1s;
  456. animation-duration: 1s;
  457. -webkit-animation-fill-mode: forwards;
  458. animation-fill-mode: forwards;
  459. -webkit-animation-iteration-count: infinite;
  460. animation-iteration-count: infinite;
  461. -webkit-animation-name: bxPlaceHolderShimmer;
  462. animation-name: bxPlaceHolderShimmer;
  463. -webkit-animation-timing-function: linear;
  464. animation-timing-function: linear;
  465. background: #f6f7f8;
  466. background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
  467. background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  468. background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  469. -webkit-background-size: 800px 104px;
  470. background-size: 800px 104px;
  471. position: relative;
  472. }
  473. .bx-cont-ph-inline {
  474. display:inline-block;
  475. }