Lanceur d'application pour GNU/Linux

style.css 6.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
  1. @font-face {
  2. font-family: 'sawasdeeregular';
  3. src: url('../fonts/sawasdee-webfont.woff2') format('woff2');
  4. font-weight: normal;
  5. font-style: normal;
  6. }
  7. * {
  8. box-sizing: border-box;
  9. }
  10. html, body {
  11. padding: 0;
  12. margin: 0;
  13. font-family: 'sawasdeeregular';
  14. width: 100%;
  15. height: 100%;
  16. color: white;
  17. overflow-x: hidden;
  18. background:
  19. url(../img/pitaya.png) no-repeat bottom 15px left 30px,
  20. url(../img/cadoles.png) no-repeat bottom 15px right 30px,
  21. radial-gradient(circle at top left, rgba(255,207,104, 0.9), rgba(255,207,104, 0)),
  22. linear-gradient(30deg, rgba(241,26,96,0.7), rgba(6,188,137,0.8)),
  23. linear-gradient(145deg, rgba(254,139,85,0.7), rgba(59,23,119,1));
  24. background-size: 120px, 100px, cover, cover, cover;
  25. }
  26. /* Common */
  27. .alert.alert-default {
  28. border-radius: 4px;
  29. border: 1px solid #ddd;
  30. }
  31. .app-icon {
  32. background-position: center center;
  33. background-size: contain;
  34. background-repeat: no-repeat;
  35. }
  36. .full-width {
  37. width: 100%;
  38. }
  39. /* Launcher View */
  40. .launcher {
  41. display: flex;
  42. flex-direction: column;
  43. position: absolute;
  44. left: 0;
  45. right: 0;
  46. bottom: 0;
  47. top: 0;
  48. }
  49. .launcher > .crossfade-image {
  50. position: absolute;
  51. left: 0;
  52. right: 0;
  53. bottom: 0;
  54. top: 0;
  55. }
  56. .launcher .crossfade-image .top,
  57. .launcher .crossfade-image .bottom {
  58. position: absolute;
  59. left: 0;
  60. right: 0;
  61. bottom: 0;
  62. top: 0;
  63. background-position: center center;
  64. background-size: cover;
  65. background-repeat: no-repeat;
  66. }
  67. .launcher .main {
  68. flex-direction: row;
  69. display: flex;
  70. flex-grow: 1;
  71. }
  72. .launcher .nav {
  73. justify-content: center;
  74. align-items: center;
  75. display: flex;
  76. width: 60px;
  77. z-index: 10;
  78. padding-left: 40px;
  79. }
  80. .launcher .nav a.goback {
  81. text-decoration: none;
  82. color: white;
  83. font-size: 75px;
  84. text-shadow: 1px 1px #444;
  85. font-family: arrows;
  86. }
  87. .launcher .nav a.goback:hover {
  88. -webkit-animation: 500ms pulse-large infinite;
  89. }
  90. .launcher .category-header {
  91. padding: 25px 40px 0;
  92. font-size: 50px;
  93. color: #fff;
  94. text-shadow: 1px 1px #444;
  95. z-index: 10;
  96. }
  97. .launcher .category-header > .category-label {
  98. float: right;
  99. font-size: 46px;
  100. letter-spacing: -4px;
  101. text-shadow: none;
  102. }
  103. .launcher .category-header .goback {
  104. font-weight: normal;
  105. }
  106. .launcher ul.apps-list {
  107. margin: 0;
  108. padding: 0 20%;
  109. display: flex;
  110. flex-direction: row;
  111. list-style: none;
  112. flex-wrap: wrap;
  113. justify-content: center;
  114. align-items: center;
  115. align-content: center;
  116. flex-grow: 1;
  117. }
  118. .launcher .nav ~ ul.apps-list {
  119. margin-left: -60px;
  120. }
  121. .launcher li.app-item {
  122. margin: 5px;
  123. border-radius: 5px;
  124. background-color: rgba(0,0,0,0.4);
  125. box-shadow: 5px 5px 30px -2px rgba(0,0,0,0.5);
  126. cursor: pointer;
  127. padding: 10px 5px;
  128. text-align: center;
  129. margin-top: 5px;
  130. transition: 150ms linear;
  131. position: relative;
  132. overflow: hidden;
  133. width: 138px;
  134. height: 138px;
  135. }
  136. .launcher li.app-item::after {
  137. content: ' ';
  138. display: block;
  139. border-radius: 50%;
  140. background-color: rgba(255, 255, 255, 0.1);
  141. width: 150%;
  142. height: 125%;
  143. position: absolute;
  144. left: -50%;
  145. top: -75%;
  146. }
  147. .launcher li.app-item:hover {
  148. background-color: rgba(0,0,0,0.6);
  149. }
  150. .launcher li.app-item > .app-icon {
  151. width: 90px;
  152. height: 90px;
  153. margin: auto;
  154. }
  155. .launcher li.app-item > .app-label {
  156. display: block;
  157. text-align: center;
  158. color: white;
  159. text-overflow: ellipsis;
  160. max-width: 90%;
  161. overflow: hidden;
  162. margin: 5px auto;
  163. }
  164. /* Edit View */
  165. .edit {
  166. display: flex;
  167. width: 100%;
  168. height: 100%;
  169. flex-direction: column;
  170. background-color: #f7f7f7;
  171. }
  172. .edit .title {
  173. margin-top: 5px;
  174. }
  175. .edit .menu-bar {
  176. padding: 5px 10px;
  177. display: flex;
  178. flex-direction: row;
  179. }
  180. .edit .menu-bar button {
  181. margin-right: 3px;
  182. }
  183. .edit .left {
  184. flex: 1;
  185. display: flex;
  186. }
  187. .edit .main {
  188. flex: 3;
  189. display: flex;
  190. }
  191. .edit .right {
  192. flex: 1;
  193. display: flex;
  194. }
  195. .edit .workspace {
  196. display: flex;
  197. flex-direction: row;
  198. padding: 10px;
  199. flex: 1;
  200. }
  201. .edit .workspace .main {
  202. flex-direction: column;
  203. }
  204. .edit .left-menu {
  205. display: flex;
  206. flex-direction: column;
  207. flex: 1;
  208. overflow-y: auto;
  209. }
  210. .edit .workspace .left .apps-menu {
  211. display: flex;
  212. flex-direction: column;
  213. }
  214. .edit .workspace .right {
  215. flex-direction: column;
  216. }
  217. .edit .item-form {
  218. display: flex;
  219. flex-direction: row;
  220. flex: 2;
  221. }
  222. .edit .item-form > form {
  223. width: 100%;
  224. }
  225. .edit .apps-list {
  226. overflow: auto;
  227. margin-top: 5px;
  228. }
  229. .edit .apps-list .icon-theme-selector > select {
  230. width: 100%;
  231. }
  232. .edit .apps-list ul.desktop-apps {
  233. list-style: none;
  234. padding: 0;
  235. height: 100%;
  236. display: block;
  237. margin-right: 5px;
  238. }
  239. .edit .desktop-app > .app-icon {
  240. height: 20px;
  241. width: 20px;
  242. display: inline-block;
  243. vertical-align: middle;
  244. margin-right: 10px;
  245. }
  246. .edit .desktop-app.list-group-item {
  247. padding: 5px 10px;
  248. }
  249. .edit .profile-tree {
  250. padding: 0 5px;
  251. width: 100%;
  252. height: 100%;
  253. overflow-y: auto;
  254. }
  255. .edit .profile-tree ul {
  256. list-style: none;
  257. margin: 0;
  258. }
  259. .edit .profile-tree > .tree-item > ul {
  260. padding: 0;
  261. }
  262. .edit .profile-tree .tree-item .alert {
  263. padding: 5px;
  264. margin-bottom: 2px;
  265. }
  266. .edit .profile-tree .tree-item .app-icon {
  267. height: 25px;
  268. width: 25px;
  269. margin-right: 5px;
  270. display: inline-block;
  271. vertical-align: middle;
  272. }
  273. .edit .app-item-edit {
  274. padding: 0 5px;
  275. }
  276. /* Animations */
  277. .crossfade-leave {
  278. opacity: 1;
  279. }
  280. .crossfade-leave.crossfade-leave-active {
  281. opacity: 0.01;
  282. transition: opacity 500ms ease-in-out;
  283. }
  284. .pulse {
  285. -webkit-animation: 1s pulse infinite;
  286. }
  287. @-webkit-keyframes pulse {
  288. 0% { transform: scale(1); }
  289. 50% { transform: scale(1.1); }
  290. 100% { transform: scale(1); }
  291. }
  292. @-webkit-keyframes pulse-large {
  293. 0% { transform: scale(1); }
  294. 50% { transform: scale(1.3); }
  295. 100% { transform: scale(1); }
  296. }
  297. @-webkit-keyframes fade-out {
  298. 0% { opacity: 1; }
  299. 1% { opacity: 0.99; }
  300. 99% { opacity: 0.01; }
  301. 100% { opacity: 0; }
  302. }
  303. @-webkit-keyframes slide-in-left {
  304. 0% { transform: translateX(-100%); }
  305. 100% { transform: translateX(0%); }
  306. }
  307. @-webkit-keyframes slide-in-right {
  308. 0% { transform: translateX(100%); }
  309. 100% { transform: translateX(0%); }
  310. }
  311. @-webkit-keyframes slide-out-left {
  312. 0% { transform: translateX(0%); }
  313. 100% { transform: translateX(-100%); }
  314. }
  315. @-webkit-keyframes slide-out-right {
  316. 0% { transform: translateX(0%); }
  317. 100% { transform: translateX(100%); }
  318. }