launcher.css 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406
  1. /**
  2. * Overwrite
  3. */
  4. body.bx-std-bg.bx-std-page-launcher {
  5. background: #001529;
  6. }
  7. .bx-std-page-launcher div.bx-std-page-column.bx-std-page-menu,
  8. .bx-std-page-launcher div.bx-std-page-column.bx-std-page-content {
  9. background-color: transparent;
  10. }
  11. /**
  12. * Page Menu (Left Side)
  13. */
  14. .bx-std-page-launcher div.bx-std-pmen-item a,
  15. .bx-std-page-launcher div.bx-std-pmen-item .sys-icon {
  16. color: rgba(255, 255, 255, 0.7);
  17. }
  18. .bx-std-page-launcher div.bx-std-pmen-item svg g {
  19. opacity: 0.7;
  20. }
  21. .bx-std-page-launcher div.bx-std-pmen-item:hover a,
  22. .bx-std-page-launcher div.bx-std-pmen-item:hover .sys-icon,
  23. .bx-std-page-launcher div.bx-std-pmen-item.bx-menu-tab-active a,
  24. .bx-std-page-launcher div.bx-std-pmen-item.bx-menu-tab-active .sys-icon {
  25. color: rgba(255, 255, 255, 0.85);
  26. }
  27. .bx-std-page-launcher div.bx-std-pmen-item:hover svg g,
  28. .bx-std-page-launcher div.bx-std-pmen-item.bx-menu-tab-active svg g {
  29. opacity: 0.85;
  30. }
  31. /**
  32. * Launcher
  33. */
  34. div.bx-std-launcher {
  35. position: relative;
  36. float: left;
  37. clear: both;
  38. width: 100%;
  39. left: 0px;
  40. }
  41. /**
  42. * Widget
  43. */
  44. div.bx-std-widgets-wrp {
  45. position: relative;
  46. top: 0px;
  47. width: 100%;
  48. }
  49. div.bx-std-widgets {
  50. position: relative;
  51. display: -webkit-flex;
  52. display: flex;
  53. -webkit-flex-wrap: wrap;
  54. flex-wrap: wrap;
  55. -webkit-justify-content: center;
  56. justify-content: center;
  57. }
  58. div.bx-std-widgets-highlight {
  59. background-color: red;
  60. }
  61. div.bx-std-widget {
  62. position: relative;
  63. padding: 24px;
  64. }
  65. div.bx-std-widget-empty {
  66. width: 5.0rem;
  67. height: 6.25rem;
  68. }
  69. .bx-std-widget-dragging {
  70. -webkit-transform: scale(1.05, 1.05);
  71. -moz-transform: scale(1.05, 1.05);
  72. -ms-transform: scale(1.05, 1.05);
  73. transform: scale(1.05, 1.05);
  74. }
  75. .bx-std-widget-icon {
  76. position: relative;
  77. top: 0px;
  78. width: 5.0rem;
  79. height: 5.0rem;
  80. background-color:transparent;
  81. line-height: 5.0rem;
  82. }
  83. .bx-std-widget-icon i.sys-icon {
  84. position: absolute;
  85. z-index: 2;
  86. left: 0px;
  87. width: 5.0rem;
  88. font-size: 48px;
  89. text-align: center;
  90. text-shadow: none;
  91. color: white;
  92. }
  93. .bx-std-widget-icon-trans {
  94. -webkit-transition: all 0.15s ease-out;
  95. -moz-transition: all 0.15s ease-out;
  96. -ms-transition: all 0.15s ease-out;
  97. -o-transition: all 0.15s ease-out;
  98. }
  99. .bx-std-widget-icon:hover {
  100. top:3px;
  101. }
  102. .bx-std-widget-icon-disabled {
  103. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  104. filter: alpha(opacity=40);
  105. -moz-opacity: 0.4;
  106. -khtml-opacity: 0.4;
  107. opacity: 0.4;
  108. }
  109. .bx-std-widget-link > img {
  110. position:relative;
  111. z-index:2;
  112. width: 5.0rem;
  113. height: 5.0rem;
  114. background-color: transparent;
  115. background-position:0px 0px;
  116. background-repeat:no-repeat;
  117. }
  118. div.bx-std-widget-icon-jitter {
  119. position: absolute;
  120. top: 24px;
  121. left: 24px;
  122. width: 5.0rem;
  123. height: 5.0rem;
  124. z-index: 5;
  125. background-color: transparent;
  126. }
  127. div.bx-std-widget-icon-jitter img {
  128. position:absolute;
  129. bottom: -0.125rem;
  130. left: 1.375rem;
  131. width: 2.25rem;
  132. height: 1.25rem;
  133. background-color: #fdfeff;
  134. background-image:url(../images/bx-std-widget-drag.svg);
  135. background-repeat: no-repeat;
  136. background-position: center;
  137. cursor: move;
  138. }
  139. div.bx-std-widget-notices {
  140. position: absolute;
  141. top: 15px;
  142. left: 15px;
  143. width: 30px;
  144. height: 30px;
  145. z-index: 3;
  146. overflow:visible;
  147. color:#fff;
  148. font-weight:bold;
  149. text-shadow: #633 0px -1px 0px;
  150. line-height:30px;
  151. text-align:center;
  152. background-color: #ff3b38;
  153. border: 1px solid #fdfeff;
  154. border-radius: 16px;
  155. }
  156. div.bx-std-widget-actions {
  157. position: absolute;
  158. display: none;
  159. top: 1rem;
  160. right: 0.25rem;
  161. z-index: 10;
  162. }
  163. div.bx-std-widget-actions-cnt {
  164. position: relative;
  165. display: -webkit-flex;
  166. display: flex;
  167. -webkit-flex-direction: column;
  168. flex-direction: column;
  169. }
  170. div.bx-std-widget-action {
  171. margin-top: 0.25rem;
  172. background-color: #fdfeff;
  173. border-radius: 16px;
  174. line-height: 30px;
  175. text-align: center;
  176. }
  177. div.bx-std-widget-action:first-child {
  178. margin-top: 0;
  179. }
  180. div.bx-std-widget-action,
  181. div.bx-std-widget-action > a {
  182. position: relative;
  183. display: block;
  184. float: none;
  185. width: 30px;
  186. height: 30px;
  187. }
  188. div.bx-std-widget-action i.sys-icon {
  189. font-size: 20px;
  190. text-shadow: none;
  191. color: #323c46;
  192. }
  193. .bx-std-widget-loading {
  194. display: none;
  195. position: absolute;
  196. top: 6.75rem;
  197. left: 1.5rem;
  198. width: 5.0rem;
  199. height: 0.75rem;
  200. background-image: url(../images/loading.gif);
  201. background-repeat: no-repeat;
  202. background-position: center center;
  203. -moz-opacity: 0.5;
  204. -khtml-opacity: 0.5;
  205. opacity: 0.5;
  206. }
  207. div.bx-std-widget-caption {
  208. position: relative;
  209. width: 5.0rem;
  210. height: 1.25rem;
  211. line-height: 1.25rem;
  212. white-space: nowrap;
  213. text-align: center;
  214. text-overflow: ellipsis;
  215. overflow: hidden;
  216. font-stretch: condensed;
  217. font-weight: 500;
  218. font-size: 0.75rem;
  219. }
  220. div.bx-std-widget-caption-jitter {
  221. position: absolute;
  222. top: 0px;
  223. left: 0px;
  224. width: 96px;
  225. height: 32px;
  226. }
  227. div.bx-std-widget-caption,
  228. div.bx-std-widget-caption a {
  229. color: #ffffff;
  230. font-weight:normal;
  231. }
  232. /**
  233. * Launcher Browser
  234. */
  235. #bx-std-launcher-browser {
  236. overflow: visible;
  237. }
  238. #bx-std-launcher-browser::before {
  239. position: absolute;
  240. display: block;
  241. content: '';
  242. top: -0.125rem;
  243. left: 1.5rem;
  244. width: 0.5rem;
  245. height: 0.5rem;
  246. box-shadow: inset 1px 1px 0px rgba(240, 240, 240, 0.2);
  247. background: #001529;
  248. transform: rotate(45deg);
  249. }
  250. #bx-std-launcher-browser .bx-popup {
  251. margin: 0;
  252. box-shadow: inset -1px -1px 0px rgba(240, 240, 240, 0.2), inset 1px 1px 0px rgba(240, 240, 240, 0.2);
  253. background-color: #001529;
  254. }
  255. .bx-std-launcher-browser {
  256. position: relative;
  257. width: 42rem;
  258. }
  259. .bx-std-launcher-browser .bx-std-lb-cnt {
  260. position: relative;
  261. display: -webkit-flex;
  262. display: flex;
  263. -webkit-flex-wrap: nowrap;
  264. flex-wrap: nowrap;
  265. }
  266. .bx-std-launcher-browser .bx-std-lb-menu,
  267. .bx-std-launcher-browser .bx-std-lb-content-cnt {
  268. position: relative;
  269. height: 30rem;
  270. overflow-x: hidden;
  271. overflow-y: auto;
  272. }
  273. .bx-std-launcher-browser .bx-std-lb-menu {
  274. -webkit-flex: 0 0 12rem;
  275. flex: 0 0 12rem;
  276. box-shadow: inset -1px 0px 0px rgba(240, 240, 240, 0.2)
  277. }
  278. .bx-std-launcher-browser .bx-std-lb-menu .bx-std-lb-logo {
  279. padding-left: 1rem;
  280. line-height: 3.75rem;
  281. }
  282. .bx-std-launcher-browser .bx-std-lb-menu .bx-std-lb-logo,
  283. .bx-std-launcher-browser .bx-std-lb-menu .bx-std-lb-logo a,
  284. .bx-std-launcher-browser .bx-std-lb-menu div.bx-std-pmen-item a {
  285. color: rgba(255, 255, 255, 0.7);
  286. }
  287. .bx-std-launcher-browser .bx-std-lb-menu div.bx-std-pmen-item:hover a,
  288. .bx-std-launcher-browser .bx-std-lb-menu div.bx-std-pmen-item:hover .sys-icon,
  289. .bx-std-launcher-browser .bx-std-lb-menu div.bx-std-pmen-item.bx-menu-tab-active a,
  290. .bx-std-launcher-browser .bx-std-lb-menu div.bx-std-pmen-item.bx-menu-tab-active .sys-icon {
  291. color: rgba(255, 255, 255, 0.85);
  292. }
  293. .bx-std-launcher-browser .bx-std-lb-content {
  294. -webkit-flex-grow: 1;
  295. flex-grow: 1;
  296. }
  297. .bx-std-lb-widgets {
  298. position: relative;
  299. display: none;
  300. width: 100%;
  301. height: 100%;
  302. }
  303. .bx-std-lb-widgets.bx-std-lbw-active {
  304. display: block;
  305. }
  306. .bx-std-lb-widgets-cnt {
  307. position: relative;
  308. display: -webkit-flex;
  309. display: flex;
  310. -webkit-flex-wrap: wrap;
  311. flex-wrap: wrap;
  312. -webkit-justify-content: center;
  313. justify-content: center;
  314. }
  315. .bx-std-launcher-browser .bx-std-widget-icon {
  316. width: 4rem;
  317. height: 4rem;
  318. line-height: 4rem;
  319. }
  320. .bx-std-launcher-browser .bx-std-widget-link > img,
  321. .bx-std-launcher-browser div.bx-std-widget-icon-jitter {
  322. width: 4rem;
  323. height: 4rem;
  324. }
  325. .bx-std-launcher-browser .bx-std-widget-loading,
  326. .bx-std-launcher-browser div.bx-std-widget-caption {
  327. width: 4rem;
  328. }
  329. /**
  330. * Mobile Views
  331. */
  332. .bx-media-tablet .bx-std-page-launcher .bx-std-page-column.bx-std-page-menu,
  333. .bx-media-phone .bx-std-page-launcher .bx-std-page-column.bx-std-page-menu {
  334. -webkit-flex-basis: 3.5rem;
  335. flex-basis: 3.5rem;
  336. width: 3.5rem;
  337. }
  338. .bx-media-tablet .bx-std-page-launcher div.bx-std-pmen-item .bx-std-pmen-item-cnt,
  339. .bx-media-phone .bx-std-page-launcher div.bx-std-pmen-item .bx-std-pmen-item-cnt {
  340. padding-left: 3.5rem;
  341. }
  342. .bx-media-tablet .bx-std-page-launcher div.bx-std-pmen-item a span,
  343. .bx-media-phone .bx-std-page-launcher div.bx-std-pmen-item a span {
  344. display: none;
  345. }
  346. #bx-informer{
  347. position: fixed;
  348. bottom: 0px;
  349. width: calc(100% - 2.5rem);
  350. left: 0px
  351. }
  352. #bx-informer .bx-informer-msg{
  353. background-color: rgba(255, 234, 193, 1);
  354. }