desktop.css 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528
  1. /* `Basic HTML
  2. ----------------------------------------------------------------------------------------------------*/
  3. * {
  4. cursor: default;
  5. }
  6. html,
  7. body {
  8. overflow: hidden;
  9. }
  10. body {
  11. background: #222;
  12. font: 12px/1 'Lucida Grande', Arial, 'Liberation Sans', FreeSans, sans-serif;
  13. }
  14. a {
  15. text-decoration: none;
  16. }
  17. li {
  18. list-style: none;
  19. }
  20. /* `Misc
  21. ----------------------------------------------------------------------------------------------------*/
  22. .abs {
  23. position: absolute;
  24. top: auto;
  25. left: auto;
  26. right: auto;
  27. bottom: auto;
  28. }
  29. .align_center {
  30. text-align: center;
  31. }
  32. .align_right {
  33. text-align: right;
  34. }
  35. .float_left {
  36. float: left;
  37. }
  38. .float_right {
  39. float: right;
  40. }
  41. .ui-resizable-se {
  42. background: url(../images/gui/window_corner.gif) no-repeat right bottom;
  43. font-size: 0;
  44. overflow: hidden;
  45. width: 15px;
  46. height: 15px;
  47. right: 0;
  48. bottom: 0;
  49. }
  50. div.ui-resizable-handle {
  51. display: none !important;
  52. visibility: hidden !important;
  53. }
  54. /* `Icons
  55. ----------------------------------------------------------------------------------------------------*/
  56. .icon {
  57. background: url(../images/gui/trans_white.png) no-repeat -99999px -99999px;
  58. border-radius: 5px;
  59. -moz-border-radius: 5px;
  60. -webkit-border-radius: 5px;
  61. -webkit-background-clip: padding-box;
  62. color: #fff;
  63. font-size: 11px;
  64. font-weight: bold;
  65. line-height: 1.3;
  66. padding: 6px 1px 6px;
  67. text-align: center;
  68. text-shadow: #000 0 1px 2px;
  69. width: 80px;
  70. }
  71. .icon.active {
  72. background: url(../images/gui/trans_black.png);
  73. }
  74. .icon img {
  75. background: url(../images/gui/trans_black.png) no-repeat -99999px -99999px;
  76. display: block;
  77. margin: 0 auto 5px;
  78. width: 32px;
  79. height: 32px;
  80. }
  81. .icon:hover,
  82. .icon.ui-draggable-dragging {
  83. background-position: 0 0;
  84. background-repeat: repeat;
  85. border: 1px solid #fff;
  86. padding: 5px 0 5px;
  87. }
  88. .icon.ui-draggable-dragging {
  89. z-index: 20;
  90. }
  91. /* `Windows
  92. ----------------------------------------------------------------------------------------------------*/
  93. .window {
  94. background: #fff;
  95. border: 1px solid #000;
  96. border-radius: 5px;
  97. -moz-border-radius: 5px;
  98. -webkit-border-radius: 5px;
  99. -webkit-background-clip: padding-box;
  100. color: #000;
  101. display: none;
  102. width: 700px;
  103. height: 300px;
  104. top: 30px;
  105. left: 120px;
  106. z-index: 2;
  107. }
  108. .window.window_stack,
  109. .window.ui-draggable-dragging {
  110. z-index: 10;
  111. }
  112. .window.ui-draggable-dragging {
  113. opacity: 0.5;
  114. }
  115. .window.ui-draggable-dragging .window_content,
  116. .window.ui-draggable-dragging .window_bottom {
  117. display: none;
  118. }
  119. .window_full.ui-draggable-dragging {
  120. opacity: 1;
  121. }
  122. .window_full.ui-draggable-dragging .window_content,
  123. .window_full.ui-draggable-dragging .window_bottom {
  124. display: block;
  125. }
  126. .window_full {
  127. border: 0;
  128. border-radius: 0;
  129. -moz-border-radius: 0;
  130. -webkit-border-radius: 0;
  131. -webkit-background-clip: padding-box;
  132. width: 100%;
  133. height: 100%;
  134. }
  135. .window_full .ui-resizable-se {
  136. display: none;
  137. }
  138. .window_top {
  139. background: #333 url(../images/gui/bar_bottom.png) repeat-x;
  140. border-top-left-radius: 5px;
  141. border-top-right-radius: 5px;
  142. -moz-border-radius-topleft: 5px;
  143. -moz-border-radius-topright: 5px;
  144. -webkit-border-top-left-radius: 5px;
  145. -webkit-border-top-right-radius: 5px;
  146. -webkit-background-clip: padding-box;
  147. color: #fff;
  148. font-weight: bold;
  149. overflow: hidden;
  150. line-height: 30px;
  151. padding: 0 10px;
  152. text-shadow: #000 0 1px 1px;
  153. height: 30px;
  154. }
  155. .window_top img {
  156. float: left;
  157. margin: 6px 5px 0 0;
  158. }
  159. .window_bottom {
  160. background: #fff url(../images/gui/bar_top.png) repeat-x left bottom;
  161. border-top: 1px solid #bbb;
  162. border-bottom-left-radius: 5px;
  163. border-bottom-right-radius: 5px;
  164. -moz-border-radius-bottomleft: 5px;
  165. -moz-border-radius-bottomright: 5px;
  166. -webkit-border-bottom-left-radius: 5px;
  167. -webkit-border-bottom-right-radius: 5px;
  168. -webkit-background-clip: padding-box;
  169. font-size: 11px;
  170. font-weight: bold;
  171. line-height: 20px;
  172. overflow: hidden;
  173. text-align: center;
  174. text-shadow: #fff 0 1px 1px;
  175. height: 20px;
  176. left: 1px;
  177. right: 1px;
  178. bottom: 1px;
  179. }
  180. .window_min,
  181. .window_resize,
  182. .window_close {
  183. background: url(../images/gui/window_buttons.gif) no-repeat;
  184. border-radius: 2px;
  185. -moz-border-radius: 2px;
  186. -webkit-border-radius: 2px;
  187. -webkit-background-clip: padding-box;
  188. float: left;
  189. font-size: 0;
  190. margin: 6px 0 0 5px;
  191. width: 28px;
  192. height: 15px;
  193. }
  194. .window_min:hover {
  195. background-position: 0 -15px;
  196. }
  197. .window_resize {
  198. background-position: -28px 0;
  199. }
  200. .window_resize:hover {
  201. background-position: -28px -15px;
  202. }
  203. .window_close {
  204. background-position: -56px 0;
  205. }
  206. .window_close:hover {
  207. background-position: -56px -15px;
  208. box-shadow: #f00 0 0 10px;
  209. -moz-box-shadow: #f00 0 0 10px;
  210. -webkit-box-shadow: #f00 0 0 10px;
  211. }
  212. .window_min:hover,
  213. .window_resize:hover {
  214. box-shadow: #09f 0 0 10px;
  215. -moz-box-shadow: #09f 0 0 10px;
  216. -webkit-box-shadow: #09f 0 0 10px;
  217. }
  218. .window_inner {
  219. padding: 1px;
  220. top: 0;
  221. left: 0;
  222. right: 0;
  223. bottom: 0;
  224. }
  225. .window_content {
  226. background: url(../images/gui/window_content.gif) repeat-y;
  227. line-height: 1.5;
  228. overflow: auto;
  229. top: 32px;
  230. left: 1px;
  231. right: 1px;
  232. bottom: 23px;
  233. }
  234. .window_aside {
  235. float: left;
  236. font-size: 11px;
  237. padding: 10px 12px 10px 10px;
  238. width: 150px;
  239. }
  240. .window_main {
  241. background: #fff;
  242. margin: 0 0 0 173px;
  243. min-height: 100%;
  244. }
  245. .window_full .window_top,
  246. .window_full .window_bottom {
  247. border-radius: 0;
  248. -moz-border-radius: 0;
  249. -webkit-border-radius: 0;
  250. -webkit-background-clip: padding-box;
  251. }
  252. .window_full .window_inner {
  253. bottom: -1px;
  254. }
  255. /* `Table >> Data
  256. ----------------------------------------------------------------------------------------------------*/
  257. table.data {
  258. width: 100%;
  259. white-space: nowrap;
  260. }
  261. table.data th,
  262. table.data td {
  263. padding: 5px 10px;
  264. vertical-align: middle;
  265. }
  266. table.data th {
  267. background: #fff url(../images/gui/bar_top.png) repeat-x left bottom;
  268. border-left: 1px solid #fff;
  269. border-bottom: 1px solid #fff;
  270. font-weight: bold;
  271. text-shadow: #fff 0 1px 1px;
  272. white-space: nowrap;
  273. }
  274. table.data th:first-child {
  275. border-left: 0;
  276. }
  277. table.data img {
  278. display: block;
  279. }
  280. table.data tbody tr:nth-child(even) td {
  281. background: #def;
  282. }
  283. table.data tbody tr.active td {
  284. background: #06c url(../images/gui/bar_top_link.png) repeat-x;
  285. color: #fff;
  286. }
  287. th.shrink {
  288. width: 1%;
  289. }
  290. /* `Bar >> Top + Bottom
  291. ----------------------------------------------------------------------------------------------------*/
  292. #bar_top,
  293. #bar_bottom {
  294. font-weight: bold;
  295. padding: 0 10px;
  296. left: 0;
  297. right: 0;
  298. }
  299. #bar_top {
  300. background: #fff url(../images/gui/bar_top.png) repeat-x left bottom;
  301. border-bottom: 1px solid #333;
  302. color: #999;
  303. line-height: 25px;
  304. padding-right: 20px;
  305. text-shadow: #fff 0 1px 1px;
  306. height: 25px;
  307. top: 0;
  308. }
  309. #bar_bottom {
  310. background: #333 url(../images/gui/bar_bottom.png) repeat-x;
  311. border-top: 1px solid #fff;
  312. color: #fff;
  313. font-size: 13px;
  314. line-height: 30px;
  315. opacity: 0.8;
  316. overflow: hidden;
  317. padding-top: 5px;
  318. padding-bottom: 5px;
  319. text-shadow: #000 0 1px 1px;
  320. height: 30px;
  321. bottom: 0;
  322. }
  323. /* `Bar >> Links
  324. ----------------------------------------------------------------------------------------------------*/
  325. #bar_top li,
  326. #bar_bottom li {
  327. float: left;
  328. }
  329. #bar_top li a,
  330. #bar_bottom li a {
  331. display: block;
  332. padding: 0 10px;
  333. }
  334. #bar_top li a {
  335. background-image: url(../images/gui/bar_top_link.png);
  336. background-repeat: no-repeat;
  337. background-position: -99999px -99999px;
  338. color: #000;
  339. overflow: hidden;
  340. height: 25px;
  341. min-height: 1px;
  342. }
  343. #bar_top a.active {
  344. background-color: #06c;
  345. background-position: 0 0;
  346. background-repeat: repeat-x;
  347. color: #fff;
  348. text-shadow: none;
  349. }
  350. #bar_top ul.menu {
  351. background: #eee;
  352. border: 1px solid #333;
  353. border-top-width: 0;
  354. border-bottom-left-radius: 5px;
  355. border-bottom-right-radius: 5px;
  356. -moz-border-radius-bottomleft: 5px;
  357. -moz-border-radius-bottomright: 5px;
  358. -webkit-border-bottom-left-radius: 5px;
  359. -webkit-border-bottom-right-radius: 5px;
  360. -webkit-background-clip: padding-box;
  361. display: none;
  362. font-weight: normal;
  363. margin: 1px 0 0 -1px;
  364. padding: 1px 1px 0;
  365. position: absolute;
  366. min-width: 200px;
  367. z-index: 30;
  368. }
  369. #bar_top ul.menu li {
  370. float: none;
  371. }
  372. #bar_top ul.menu a {
  373. background: #fff;
  374. border-bottom: 1px solid #eee;
  375. min-width: 180px;
  376. }
  377. #bar_top ul.menu li:last-child a {
  378. border-bottom-left-radius: 5px;
  379. border-bottom-right-radius: 5px;
  380. -moz-border-radius-bottomleft: 5px;
  381. -moz-border-radius-bottomright: 5px;
  382. -webkit-border-bottom-left-radius: 5px;
  383. -webkit-border-bottom-right-radius: 5px;
  384. -webkit-background-clip: padding-box;
  385. }
  386. #bar_top ul.menu a:hover {
  387. background: #06c url(../images/gui/bar_top_link.png) repeat-x;
  388. color: #fff;
  389. text-shadow: none;
  390. }
  391. #bar_bottom li {
  392. display: none;
  393. margin: 0 0 10px 5px;
  394. min-width: 150px;
  395. }
  396. #bar_bottom li a {
  397. background: #333;
  398. }
  399. #bar_bottom a {
  400. border-radius: 5px;
  401. -moz-border-radius: 5px;
  402. -webkit-border-radius: 5px;
  403. -webkit-background-clip: padding-box;
  404. color: #fff;
  405. overflow: hidden;
  406. padding: 0 10px;
  407. height: 30px;
  408. }
  409. #bar_bottom a:hover {
  410. background: #000;
  411. }
  412. #bar_bottom a:active {
  413. background: #c60;
  414. border: 1px solid #fff;
  415. padding: 0 9px;
  416. }
  417. #bar_bottom li a img {
  418. float: left;
  419. margin: 4px 5px 0 -5px;
  420. }
  421. #bar_bottom .float_left img,
  422. #bar_bottom .float_right img {
  423. display: block;
  424. padding: 4px 0 0;
  425. }
  426. /* `Wrapper + Wallpaper + Desktop
  427. ----------------------------------------------------------------------------------------------------*/
  428. #wallpaper {
  429. top: 0;
  430. left: 0;
  431. right: 0;
  432. bottom: 0;
  433. width: 100%;
  434. height: 100%;
  435. }
  436. #desktop {
  437. overflow: hidden;
  438. top: 26px;
  439. left: 0;
  440. right: 0;
  441. bottom: 41px;
  442. }
  443. #wrapper {
  444. top: 0;
  445. left: 0;
  446. right: 0;
  447. bottom: 0;
  448. min-width: 700px;
  449. min-height: 500px;
  450. }