/web/public/static/admin/css/widgets.css

https://github.com/KnightBaron/onevc · CSS · 563 lines · 451 code · 104 blank · 8 comment · 0 complexity · 0bda5702e32b9b1ad4131c2d059a4346 MD5 · raw file

  1. /* SELECTOR (FILTER INTERFACE) */
  2. .selector {
  3. width: 580px;
  4. float: left;
  5. }
  6. .selector select {
  7. width: 270px;
  8. height: 17.2em;
  9. }
  10. .selector-available, .selector-chosen {
  11. float: left;
  12. width: 270px;
  13. text-align: center;
  14. margin-bottom: 5px;
  15. }
  16. .selector-chosen select {
  17. border-top: none;
  18. }
  19. .selector-available h2, .selector-chosen h2 {
  20. border: 1px solid #ccc;
  21. }
  22. .selector .selector-available h2 {
  23. background: white url(../img/nav-bg.gif) bottom left repeat-x;
  24. color: #666;
  25. }
  26. .selector .selector-filter {
  27. background: white;
  28. border: 1px solid #ccc;
  29. border-width: 0 1px;
  30. padding: 3px;
  31. color: #999;
  32. font-size: 10px;
  33. margin: 0;
  34. text-align: left;
  35. }
  36. .selector .selector-filter label,
  37. .inline-group .aligned .selector .selector-filter label {
  38. width: 16px;
  39. padding: 2px;
  40. }
  41. .selector .selector-available input {
  42. width: 230px;
  43. }
  44. .selector ul.selector-chooser {
  45. float: left;
  46. width: 22px;
  47. height: 50px;
  48. background: url(../img/chooser-bg.gif) top center no-repeat;
  49. margin: 10em 5px 0 5px;
  50. padding: 0;
  51. }
  52. .selector-chooser li {
  53. margin: 0;
  54. padding: 3px;
  55. list-style-type: none;
  56. }
  57. .selector select {
  58. margin-bottom: 10px;
  59. margin-top: 0;
  60. }
  61. .selector-add, .selector-remove {
  62. width: 16px;
  63. height: 16px;
  64. display: block;
  65. text-indent: -3000px;
  66. overflow: hidden;
  67. }
  68. .selector-add {
  69. background: url(../img/selector-icons.gif) 0 -161px no-repeat;
  70. cursor: default;
  71. margin-bottom: 2px;
  72. }
  73. .active.selector-add {
  74. background: url(../img/selector-icons.gif) 0 -187px no-repeat;
  75. cursor: pointer;
  76. }
  77. .selector-remove {
  78. background: url(../img/selector-icons.gif) 0 -109px no-repeat;
  79. cursor: default;
  80. }
  81. .active.selector-remove {
  82. background: url(../img/selector-icons.gif) 0 -135px no-repeat;
  83. cursor: pointer;
  84. }
  85. a.selector-chooseall, a.selector-clearall {
  86. display: inline-block;
  87. text-align: left;
  88. margin-left: auto;
  89. margin-right: auto;
  90. font-weight: bold;
  91. color: #666;
  92. }
  93. a.selector-chooseall {
  94. padding: 3px 18px 3px 0;
  95. }
  96. a.selector-clearall {
  97. padding: 3px 0 3px 18px;
  98. }
  99. a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
  100. color: #036;
  101. }
  102. a.selector-chooseall {
  103. background: url(../img/selector-icons.gif) right -263px no-repeat;
  104. cursor: default;
  105. }
  106. a.active.selector-chooseall {
  107. background: url(../img/selector-icons.gif) right -289px no-repeat;
  108. cursor: pointer;
  109. }
  110. a.selector-clearall {
  111. background: url(../img/selector-icons.gif) left -211px no-repeat;
  112. cursor: default;
  113. }
  114. a.active.selector-clearall {
  115. background: url(../img/selector-icons.gif) left -237px no-repeat;
  116. cursor: pointer;
  117. }
  118. /* STACKED SELECTORS */
  119. .stacked {
  120. float: left;
  121. width: 500px;
  122. }
  123. .stacked select {
  124. width: 480px;
  125. height: 10.1em;
  126. }
  127. .stacked .selector-available, .stacked .selector-chosen {
  128. width: 480px;
  129. }
  130. .stacked .selector-available {
  131. margin-bottom: 0;
  132. }
  133. .stacked .selector-available input {
  134. width: 442px;
  135. }
  136. .stacked ul.selector-chooser {
  137. height: 22px;
  138. width: 50px;
  139. margin: 0 0 3px 40%;
  140. background: url(../img/chooser_stacked-bg.gif) top center no-repeat;
  141. }
  142. .stacked .selector-chooser li {
  143. float: left;
  144. padding: 3px 3px 3px 5px;
  145. }
  146. .stacked .selector-chooseall, .stacked .selector-clearall {
  147. display: none;
  148. }
  149. .stacked .selector-add {
  150. background: url(../img/selector-icons.gif) 0 -57px no-repeat;
  151. cursor: default;
  152. }
  153. .stacked .active.selector-add {
  154. background: url(../img/selector-icons.gif) 0 -83px no-repeat;
  155. cursor: pointer;
  156. }
  157. .stacked .selector-remove {
  158. background: url(../img/selector-icons.gif) 0 -5px no-repeat;
  159. cursor: default;
  160. }
  161. .stacked .active.selector-remove {
  162. background: url(../img/selector-icons.gif) 0 -31px no-repeat;
  163. cursor: pointer;
  164. }
  165. /* DATE AND TIME */
  166. p.datetime {
  167. line-height: 20px;
  168. margin: 0;
  169. padding: 0;
  170. color: #666;
  171. font-size: 11px;
  172. font-weight: bold;
  173. }
  174. .datetime span {
  175. font-size: 11px;
  176. color: #ccc;
  177. font-weight: normal;
  178. white-space: nowrap;
  179. }
  180. table p.datetime {
  181. font-size: 10px;
  182. margin-left: 0;
  183. padding-left: 0;
  184. }
  185. /* FILE UPLOADS */
  186. p.file-upload {
  187. line-height: 20px;
  188. margin: 0;
  189. padding: 0;
  190. color: #666;
  191. font-size: 11px;
  192. font-weight: bold;
  193. }
  194. .file-upload a {
  195. font-weight: normal;
  196. }
  197. .file-upload .deletelink {
  198. margin-left: 5px;
  199. }
  200. span.clearable-file-input label {
  201. color: #333;
  202. font-size: 11px;
  203. display: inline;
  204. float: none;
  205. }
  206. /* CALENDARS & CLOCKS */
  207. .calendarbox, .clockbox {
  208. margin: 5px auto;
  209. font-size: 11px;
  210. width: 16em;
  211. text-align: center;
  212. background: white;
  213. position: relative;
  214. }
  215. .clockbox {
  216. width: auto;
  217. }
  218. .calendar {
  219. margin: 0;
  220. padding: 0;
  221. }
  222. .calendar table {
  223. margin: 0;
  224. padding: 0;
  225. border-collapse: collapse;
  226. background: white;
  227. width: 100%;
  228. }
  229. .calendar caption, .calendarbox h2 {
  230. margin: 0;
  231. font-size: 11px;
  232. text-align: center;
  233. border-top: none;
  234. }
  235. .calendar th {
  236. font-size: 10px;
  237. color: #666;
  238. padding: 2px 3px;
  239. text-align: center;
  240. background: #e1e1e1 url(../img/nav-bg.gif) 0 50% repeat-x;
  241. border-bottom: 1px solid #ddd;
  242. }
  243. .calendar td {
  244. font-size: 11px;
  245. text-align: center;
  246. padding: 0;
  247. border-top: 1px solid #eee;
  248. border-bottom: none;
  249. }
  250. .calendar td.selected a {
  251. background: #C9DBED;
  252. }
  253. .calendar td.nonday {
  254. background: #efefef;
  255. }
  256. .calendar td.today a {
  257. background: #ffc;
  258. }
  259. .calendar td a, .timelist a {
  260. display: block;
  261. font-weight: bold;
  262. padding: 4px;
  263. text-decoration: none;
  264. color: #444;
  265. }
  266. .calendar td a:hover, .timelist a:hover {
  267. background: #5b80b2;
  268. color: white;
  269. }
  270. .calendar td a:active, .timelist a:active {
  271. background: #036;
  272. color: white;
  273. }
  274. .calendarnav {
  275. font-size: 10px;
  276. text-align: center;
  277. color: #ccc;
  278. margin: 0;
  279. padding: 1px 3px;
  280. }
  281. .calendarnav a:link, #calendarnav a:visited, #calendarnav a:hover {
  282. color: #999;
  283. }
  284. .calendar-shortcuts {
  285. background: white;
  286. font-size: 10px;
  287. line-height: 11px;
  288. border-top: 1px solid #eee;
  289. padding: 3px 0 4px;
  290. color: #ccc;
  291. }
  292. .calendarbox .calendarnav-previous, .calendarbox .calendarnav-next {
  293. display: block;
  294. position: absolute;
  295. font-weight: bold;
  296. font-size: 12px;
  297. background: #C9DBED url(../img/default-bg.gif) bottom left repeat-x;
  298. padding: 1px 4px 2px 4px;
  299. color: white;
  300. }
  301. .calendarnav-previous:hover, .calendarnav-next:hover {
  302. background: #036;
  303. }
  304. .calendarnav-previous {
  305. top: 0;
  306. left: 0;
  307. }
  308. .calendarnav-next {
  309. top: 0;
  310. right: 0;
  311. }
  312. .calendar-cancel {
  313. margin: 0 !important;
  314. padding: 0 !important;
  315. font-size: 10px;
  316. background: #e1e1e1 url(../img/nav-bg.gif) 0 50% repeat-x;
  317. border-top: 1px solid #ddd;
  318. }
  319. .calendar-cancel:hover {
  320. background: #e1e1e1 url(../img/nav-bg-reverse.gif) 0 50% repeat-x;
  321. }
  322. .calendar-cancel a {
  323. color: black;
  324. display: block;
  325. }
  326. ul.timelist, .timelist li {
  327. list-style-type: none;
  328. margin: 0;
  329. padding: 0;
  330. }
  331. .timelist a {
  332. padding: 2px;
  333. }
  334. /* INLINE ORDERER */
  335. ul.orderer {
  336. position: relative;
  337. padding: 0 !important;
  338. margin: 0 !important;
  339. list-style-type: none;
  340. }
  341. ul.orderer li {
  342. list-style-type: none;
  343. display: block;
  344. padding: 0;
  345. margin: 0;
  346. border: 1px solid #bbb;
  347. border-width: 0 1px 1px 0;
  348. white-space: nowrap;
  349. overflow: hidden;
  350. background: #e2e2e2 url(../img/nav-bg-grabber.gif) repeat-y;
  351. }
  352. ul.orderer li:hover {
  353. cursor: move;
  354. background-color: #ddd;
  355. }
  356. ul.orderer li a.selector {
  357. margin-left: 12px;
  358. overflow: hidden;
  359. width: 83%;
  360. font-size: 10px !important;
  361. padding: 0.6em 0;
  362. }
  363. ul.orderer li a:link, ul.orderer li a:visited {
  364. color: #333;
  365. }
  366. ul.orderer li .inline-deletelink {
  367. position: absolute;
  368. right: 4px;
  369. margin-top: 0.6em;
  370. }
  371. ul.orderer li.selected {
  372. background-color: #f8f8f8;
  373. border-right-color: #f8f8f8;
  374. }
  375. ul.orderer li.deleted {
  376. background: #bbb url(../img/deleted-overlay.gif);
  377. }
  378. ul.orderer li.deleted a:link, ul.orderer li.deleted a:visited {
  379. color: #888;
  380. }
  381. ul.orderer li.deleted .inline-deletelink {
  382. background-image: url(../img/inline-restore.png);
  383. }
  384. ul.orderer li.deleted:hover, ul.orderer li.deleted a.selector:hover {
  385. cursor: default;
  386. }
  387. /* EDIT INLINE */
  388. .inline-deletelink {
  389. float: right;
  390. text-indent: -9999px;
  391. background: transparent url(../img/inline-delete.png) no-repeat;
  392. width: 15px;
  393. height: 15px;
  394. border: 0px none;
  395. outline: 0; /* Remove dotted border around link */
  396. }
  397. .inline-deletelink:hover {
  398. background-position: -15px 0;
  399. cursor: pointer;
  400. }
  401. .editinline button.addlink {
  402. border: 0px none;
  403. color: #5b80b2;
  404. font-size: 100%;
  405. cursor: pointer;
  406. }
  407. .editinline button.addlink:hover {
  408. color: #036;
  409. cursor: pointer;
  410. }
  411. .editinline table .help {
  412. text-align: right;
  413. float: right;
  414. padding-left: 2em;
  415. }
  416. .editinline tfoot .addlink {
  417. white-space: nowrap;
  418. }
  419. .editinline table thead th:last-child {
  420. border-left: none;
  421. }
  422. .editinline tr.deleted {
  423. background: #ddd url(../img/deleted-overlay.gif);
  424. }
  425. .editinline tr.deleted .inline-deletelink {
  426. background-image: url(../img/inline-restore.png);
  427. }
  428. .editinline tr.deleted td:hover {
  429. cursor: default;
  430. }
  431. .editinline tr.deleted td:first-child {
  432. background-image: none !important;
  433. }
  434. /* EDIT INLINE - STACKED */
  435. .editinline-stacked {
  436. min-width: 758px;
  437. }
  438. .editinline-stacked .inline-object {
  439. margin-left: 210px;
  440. background: white;
  441. }
  442. .editinline-stacked .inline-source {
  443. float: left;
  444. width: 200px;
  445. background: #f8f8f8;
  446. }
  447. .editinline-stacked .inline-splitter {
  448. float: left;
  449. width: 9px;
  450. background: #f8f8f8 url(../img/inline-splitter-bg.gif) 50% 50% no-repeat;
  451. border-right: 1px solid #ccc;
  452. }
  453. .editinline-stacked .controls {
  454. clear: both;
  455. background: #e1e1e1 url(../img/nav-bg.gif) top left repeat-x;
  456. padding: 3px 4px;
  457. font-size: 11px;
  458. border-top: 1px solid #ddd;
  459. }