general.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502
  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. overflow-x:auto;
  139. -webkit-overflow-scrolling: touch;
  140. }
  141. /* --------------- content */
  142. #bx-content-wrapper {
  143. position: relative;
  144. -webkit-flex-grow: 3;
  145. flex-grow: 3;
  146. }
  147. /* --------------- footer */
  148. #bx-footer-wrapper {
  149. position: relative;
  150. -webkit-flex-grow: 0;
  151. flex-grow: 0;
  152. width: 100%;
  153. bottom: 0;
  154. }
  155. #bx-footer-wrapper .bx-def-hr {
  156. margin-top: 0px;
  157. }
  158. #bx-menu-bottom ul {
  159. text-align: center;
  160. }
  161. #bx-menu-bottom ul li {
  162. line-height: 2rem;
  163. }
  164. .bx-menu-switch-language-inline {
  165. float: none;
  166. clear: both;
  167. }
  168. .bx-menu-switch-language-inline .bx-menu-hor {
  169. text-align: center;
  170. }
  171. .bx-menu-switch-language-inline .bx-menu-hor li {
  172. float: none;
  173. display: inline-block;
  174. }
  175. /* --------------- 'Add to Homescreen' popup */
  176. .ath-container {
  177. color: #333;
  178. }
  179. /* --------------- Account */
  180. p.bx-account-unit-thumb {
  181. display: block;
  182. margin: 0px;
  183. background: #ffffff;
  184. background-clip: padding-box;
  185. box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2);
  186. line-height: 46px;
  187. line-height: 2.9rem;
  188. font-size: 32px;
  189. font-size: 2.0rem;
  190. font-weight: 700;
  191. color: #d0d0d0;
  192. }
  193. p.bx-account-unit-thumb.bx-def-icon-size {
  194. line-height: 26px;
  195. line-height: 1.75rem;
  196. font-size: 19.5px;
  197. font-size: 1.3rem;
  198. }
  199. p.bx-account-unit-thumb.bx-def-border {
  200. border-width: 2px;
  201. border-color: #ffffff;
  202. }
  203. div.bx-account-unit-online {
  204. position: absolute;
  205. right: 0;
  206. bottom: 0;
  207. width: 0.625rem;
  208. height: 0.625rem;
  209. border: 1px solid #ffffff;
  210. border-radius: 0.625rem;
  211. background-color: #7ed321;
  212. }
  213. /* --------------- Mentions */
  214. .bx-mention-row img {
  215. width:1rem;
  216. height:1rem;
  217. vertical-align:middle;
  218. }
  219. .bx-mention-row span {
  220. vertical-align:middle;
  221. }
  222. /* --------------- Profile Stats */
  223. .bx-profile-stats {
  224. overflow: hidden;
  225. }
  226. .bx-profile-stats .bx-ps-user-cnt {
  227. display: -webkit-flex;
  228. display: flex;
  229. -webkit-align-items: center;
  230. align-items: center;
  231. -webkit-justify-content: flex-start;
  232. justify-content: flex-start;
  233. }
  234. .bx-profile-stats .bx-ps-user-cnt .bx-def-ava-size {
  235. width: 3.75rem;
  236. height: 3.75rem;
  237. }
  238. .bx-profile-stats .bx-ps-user-cnt .bx-def-ava-size,
  239. .bx-profile-stats .bx-ps-user-cnt div.bx-def-unit-img p.bx-base-pofile-unit-thumb.bx-def-ava-size {
  240. line-height: 3.5rem;
  241. font-size: 2.325rem;
  242. }
  243. .bx-profile-stats .bx-ps-user-img {
  244. -webkit-flex: 0 2 auto;
  245. flex: 0 2 auto;
  246. }
  247. .bx-profile-stats .bx-ps-user-info {
  248. -webkit-flex: 1 1 auto;
  249. flex: 1 1 auto;
  250. }
  251. .bx-profile-stats .bx-ps-user-info-cnt {
  252. display: -webkit-flex;
  253. display: flex;
  254. -webkit-align-items: flex-start;
  255. align-items: flex-start;
  256. -webkit-flex-direction: column;
  257. flex-direction: column;
  258. }
  259. /* --------------- Create Post Form */
  260. .sys-create-post-form {
  261. position: relative;
  262. }
  263. .sys-create-post-form .bx-loading-ajax {
  264. display: -webkit-flex;
  265. display: flex;
  266. -webkit-align-items: center;
  267. align-items: center;
  268. -webkit-justify-content: center;
  269. justify-content: center;
  270. top: 0;
  271. width: 100%;
  272. height: 100%;
  273. }
  274. .sys-cpf-header {
  275. position: relative;
  276. display: -webkit-flex;
  277. display: flex;
  278. -webkit-justify-content: space-between;
  279. justify-content: space-between;
  280. height: 3.125rem;
  281. border-bottom: 2px solid rgba(0,0,0,0.1);
  282. }
  283. .sys-cpf-title,
  284. .sys-cpf-submenu {
  285. position: relative;
  286. -webkit-flex: 0 1 auto;
  287. -ms-flex: 0 1 auto;
  288. flex: 1 1 auto;
  289. line-height: 3.125rem;
  290. }
  291. .sys-cpf-title,
  292. .sys-cpf-submenu-cnt {
  293. height: 3.125rem;
  294. }
  295. .sys-cpf-title {
  296. -webkit-flex-grow: 3;
  297. flex-grow: 3;
  298. max-width: 20%;
  299. white-space: nowrap;
  300. font-size: 1rem;
  301. font-weight: 400;
  302. }
  303. .sys-cpf-title-cnt {
  304. white-space: nowrap;
  305. overflow: hidden;
  306. text-overflow:ellipsis;
  307. }
  308. .sys-cpf-submenu {
  309. max-width: 80%;
  310. }
  311. .bx-media-phone .sys-cpf-title {
  312. max-width: 30%;
  313. }
  314. .bx-media-phone .sys-cpf-submenu {
  315. max-width: 70%;
  316. }
  317. .sys-cpf-submenu-cnt ul.bx-menu-custom.bx-menu-custom-hor.bx-menu-more-auto:not(.bx-menu-submenu-more-auto) {
  318. display: -webkit-flex;
  319. display: flex;
  320. -webkit-justify-content: flex-end;
  321. justify-content: flex-end;
  322. }
  323. .sys-cpf-submenu-cnt ul.bx-menu-submenu-more-auto {
  324. line-height: normal;
  325. }
  326. .sys-cpf-submenu-cnt ul li {
  327. border-radius: 0;
  328. white-space: nowrap;
  329. }
  330. .sys-cpf-submenu-cnt ul:not(.bx-menu-submenu-more-auto) > li {
  331. -webkit-flex: 0 1 auto;
  332. -ms-flex: 0 1 auto;
  333. flex: 0 1 auto;
  334. height: 3.125rem;
  335. border-bottom: 2px solid transparent;
  336. line-height: 3.125rem;
  337. }
  338. .sys-cpf-submenu-cnt ul li > span {
  339. margin: 0;
  340. padding: 0;
  341. }
  342. .sys-cpf-submenu-cnt ul li:not(.bx-menu-item-more-auto) a .sys-icon {
  343. display: none;
  344. }
  345. .sys-cpf-submenu-cnt ul li:not(.bx-menu-item-more-auto) a span,
  346. .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 {
  347. margin: 0;
  348. }
  349. .sys-cpf-submenu-cnt ul li.bx-menu-tab-active {
  350. border-bottom: 2px solid #364f6b;
  351. }
  352. .sys-cpf-form {
  353. position: relative;
  354. }
  355. .sys-cpf-form .sys-cpf-user {
  356. position: absolute;
  357. top: 0;
  358. left: 0;
  359. }
  360. .sys-cpf-form .sys-cpf-content {
  361. display: -webkit-flex;
  362. display: flex;
  363. -webkit-align-items: center;
  364. align-items: center;
  365. }
  366. .sys-cpf-form.sys-cpf-default .sys-cpf-content {
  367. -webkit-align-items: stretch;
  368. align-items: stretch;
  369. }
  370. .sys-cpf-form.sys-cpf-default .sys-cpf-content > div {
  371. display: -webkit-flex;
  372. display: flex;
  373. -webkit-align-items: center;
  374. align-items: center;
  375. width: 100%;
  376. cursor: text;
  377. }
  378. .sys-cpf-form .bx-uploader-ghost .bx-base-general-icon-wrapper img {
  379. max-width: 9.375rem;
  380. }
  381. .sys-cpf-close {
  382. position: absolute;
  383. display: none;
  384. right: 0;
  385. bottom: 0;
  386. }
  387. /* --------------- Account Unit */
  388. .bx-account-unit .bx-def-unit-img,
  389. .bx-account-unit-wo-info .bx-def-unit-img {
  390. position: relative;
  391. overflow: visible;
  392. }
  393. /* --------------- Author Info */
  394. .sys-author-info {
  395. display: -webkit-flex;
  396. display: flex;
  397. -webkit-align-items: center;
  398. align-items: center;
  399. -webkit-justify-content: space-between;
  400. justify-content: space-between;
  401. -webkit-flex-wrap: wrap;
  402. flex-wrap: wrap;
  403. }
  404. .sys-author-profile ul.bx-menu-custom.bx-menu-custom-hor {
  405. line-height: 0.625rem;
  406. }
  407. .sys-author-profile ul.bx-menu-custom.bx-menu-custom-hor > li.bx-menu-item-nl {
  408. width: 100%;
  409. }
  410. .sys-author-profile .bx-menu-custom.bx-menu-custom-hor > li > span {
  411. margin-right: 0;
  412. }
  413. .sys-author-profile .bx-menu-custom.bx-menu-custom-hor > li > span.bx-base-profile-unit-meta-item.bx-def-padding-thd-leftright {
  414. padding-left: 0;
  415. padding-right: 0.5rem;
  416. }
  417. .sys-author-profile .bx-menu-custom.bx-menu-custom-hor > li:first-child .bx-base-general-unit-meta-div {
  418. display: none;
  419. }
  420. /* --------------- Author Info */
  421. audio.bx-player-embed,
  422. video.bx-player-embed {
  423. width:100vw;
  424. height:100vh;
  425. }
  426. /* --------------- Search */
  427. .bx-sys-search-results-pages {
  428. text-align:left;
  429. line-height:150%;
  430. }