launcher.css 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410
  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: 96px;
  123. height: 96px;
  124. z-index: 5;
  125. background-color: transparent;
  126. }
  127. div.bx-std-widget-icon-jitter img {
  128. position:absolute;
  129. bottom:-5px;
  130. left: 28px;
  131. width: 40px;
  132. height: 25px;
  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. position: relative;
  172. float: none;
  173. width: 30px;
  174. height: 30px;
  175. margin-top: 0.25rem;
  176. background-color: #fdfeff;
  177. border-radius: 16px;
  178. line-height: 30px;
  179. text-align: center;
  180. }
  181. div.bx-std-widget-action:first-child {
  182. margin-top: 0;
  183. }
  184. div.bx-std-widget-action i.sys-icon {
  185. font-size: 20px;
  186. text-shadow: none;
  187. color: #323c46;
  188. }
  189. .bx-std-widget-loading {
  190. display: none;
  191. position: absolute;
  192. top: 128px;
  193. left: 24px;
  194. width: 96px;
  195. height: 15px;
  196. background-image: url(../images/loading.gif);
  197. background-repeat: no-repeat;
  198. background-position: center center;
  199. -moz-opacity: 0.5;
  200. -khtml-opacity: 0.5;
  201. opacity: 0.5;
  202. }
  203. div.bx-std-widget-caption {
  204. position: relative;
  205. width: 5.0rem;
  206. height: 1.25rem;
  207. line-height: 1.25rem;
  208. white-space: nowrap;
  209. text-align: center;
  210. text-overflow: ellipsis;
  211. overflow: hidden;
  212. font-stretch: condensed;
  213. font-weight: 500;
  214. font-size: 0.75rem;
  215. }
  216. div.bx-std-widget-caption-jitter {
  217. position: absolute;
  218. top: 0px;
  219. left: 0px;
  220. width: 96px;
  221. height: 32px;
  222. }
  223. div.bx-std-widget-caption,
  224. div.bx-std-widget-caption a {
  225. color: #ffffff;
  226. font-weight:normal;
  227. }
  228. /**
  229. * Tour
  230. */
  231. body.shepherd-active #bx-std-menu-top-center,
  232. body.shepherd-active .bx-menu-toolbar li,
  233. body.shepherd-active .bx-std-widget-cont {
  234. -moz-opacity: 0.3;
  235. -khtml-opacity: 0.3;
  236. opacity: 0.3;
  237. }
  238. body.shepherd-active .bx-menu-toolbar li.shepherd-enabled,
  239. body.shepherd-active .bx-std-widget-cont.shepherd-enabled {
  240. -moz-opacity: 1;
  241. -khtml-opacity: 1;
  242. opacity: 1;
  243. }
  244. /**
  245. * Launcher Browser
  246. */
  247. #bx-std-launcher-browser {
  248. overflow: visible;
  249. }
  250. #bx-std-launcher-browser::before {
  251. position: absolute;
  252. display: block;
  253. content: '';
  254. top: -0.125rem;
  255. left: 1.5rem;
  256. width: 0.5rem;
  257. height: 0.5rem;
  258. box-shadow: inset 1px 1px 0px rgba(240, 240, 240, 0.2);
  259. background: #001529;
  260. transform: rotate(45deg);
  261. }
  262. #bx-std-launcher-browser .bx-popup {
  263. box-shadow: inset -1px -1px 0px rgba(240, 240, 240, 0.2), inset 1px 1px 0px rgba(240, 240, 240, 0.2);
  264. background-color: #001529;
  265. }
  266. .bx-std-launcher-browser {
  267. position: relative;
  268. width: 42rem;
  269. }
  270. .bx-std-launcher-browser .bx-std-lb-cnt {
  271. position: relative;
  272. display: -webkit-flex;
  273. display: flex;
  274. -webkit-flex-wrap: nowrap;
  275. flex-wrap: nowrap;
  276. }
  277. .bx-std-launcher-browser .bx-std-lb-menu,
  278. .bx-std-launcher-browser .bx-std-lb-content-cnt {
  279. position: relative;
  280. height: 30rem;
  281. overflow-x: hidden;
  282. overflow-y: auto;
  283. }
  284. .bx-std-launcher-browser .bx-std-lb-menu {
  285. -webkit-flex: 0 0 12rem;
  286. flex: 0 0 12rem;
  287. box-shadow: inset -1px 0px 0px rgba(240, 240, 240, 0.2)
  288. }
  289. .bx-std-launcher-browser .bx-std-lb-menu .bx-std-lb-logo {
  290. padding-left: 1rem;
  291. line-height: 3.75rem;
  292. }
  293. .bx-std-launcher-browser .bx-std-lb-menu .bx-std-lb-logo,
  294. .bx-std-launcher-browser .bx-std-lb-menu .bx-std-lb-logo a,
  295. .bx-std-launcher-browser .bx-std-lb-menu div.bx-std-pmen-item a {
  296. color: rgba(255, 255, 255, 0.7);
  297. }
  298. .bx-std-launcher-browser .bx-std-lb-menu div.bx-std-pmen-item:hover a,
  299. .bx-std-launcher-browser .bx-std-lb-menu div.bx-std-pmen-item:hover .sys-icon,
  300. .bx-std-launcher-browser .bx-std-lb-menu div.bx-std-pmen-item.bx-menu-tab-active a,
  301. .bx-std-launcher-browser .bx-std-lb-menu div.bx-std-pmen-item.bx-menu-tab-active .sys-icon {
  302. color: rgba(255, 255, 255, 0.85);
  303. }
  304. .bx-std-launcher-browser .bx-std-lb-content {
  305. -webkit-flex-grow: 1;
  306. flex-grow: 1;
  307. }
  308. .bx-std-lb-widgets {
  309. position: relative;
  310. display: none;
  311. width: 100%;
  312. height: 100%;
  313. }
  314. .bx-std-lb-widgets.bx-std-lbw-active {
  315. display: block;
  316. }
  317. .bx-std-lb-widgets-cnt {
  318. position: relative;
  319. display: -webkit-flex;
  320. display: flex;
  321. -webkit-flex-wrap: wrap;
  322. flex-wrap: wrap;
  323. -webkit-justify-content: center;
  324. justify-content: center;
  325. }
  326. .bx-std-launcher-browser .bx-std-widget-icon {
  327. width: 4rem;
  328. height: 4rem;
  329. line-height: 4rem;
  330. }
  331. .bx-std-launcher-browser .bx-std-widget-link > img,
  332. .bx-std-launcher-browser div.bx-std-widget-icon-jitter {
  333. width: 4rem;
  334. height: 4rem;
  335. }
  336. .bx-std-launcher-browser .bx-std-widget-loading,
  337. .bx-std-launcher-browser div.bx-std-widget-caption {
  338. width: 4rem;
  339. }
  340. /**
  341. * Mobile Views
  342. */
  343. .bx-media-tablet .bx-std-page-launcher .bx-std-page-column.bx-std-page-menu,
  344. .bx-media-phone .bx-std-page-launcher .bx-std-page-column.bx-std-page-menu {
  345. -webkit-flex-basis: 3.5rem;
  346. flex-basis: 3.5rem;
  347. width: 3.5rem;
  348. }
  349. .bx-media-tablet .bx-std-page-launcher div.bx-std-pmen-item .bx-std-pmen-item-cnt,
  350. .bx-media-phone .bx-std-page-launcher div.bx-std-pmen-item .bx-std-pmen-item-cnt {
  351. padding-left: 3.5rem;
  352. }
  353. .bx-media-tablet .bx-std-page-launcher div.bx-std-pmen-item a span,
  354. .bx-media-phone .bx-std-page-launcher div.bx-std-pmen-item a span {
  355. display: none;
  356. }