widgets.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604
  1. /* SELECTOR (FILTER INTERFACE) */
  2. .selector {
  3. width: 800px;
  4. float: left;
  5. display: flex;
  6. }
  7. .selector select {
  8. width: 380px;
  9. height: 17.2em;
  10. flex: 1 0 auto;
  11. }
  12. .selector-available, .selector-chosen {
  13. width: 380px;
  14. text-align: center;
  15. margin-bottom: 5px;
  16. display: flex;
  17. flex-direction: column;
  18. }
  19. .selector-available h2, .selector-chosen h2 {
  20. border: 1px solid var(--border-color);
  21. border-radius: 4px 4px 0 0;
  22. }
  23. .selector-chosen .list-footer-display {
  24. border: 1px solid var(--border-color);
  25. border-top: none;
  26. border-radius: 0 0 4px 4px;
  27. margin: 0 0 10px;
  28. padding: 8px;
  29. text-align: center;
  30. background: var(--primary);
  31. color: var(--header-link-color);
  32. cursor: pointer;
  33. }
  34. .selector-chosen .list-footer-display__clear {
  35. color: var(--breadcrumbs-fg);
  36. }
  37. .selector-chosen h2 {
  38. background: var(--primary);
  39. color: var(--header-link-color);
  40. }
  41. .selector .selector-available h2 {
  42. background: var(--darkened-bg);
  43. color: var(--body-quiet-color);
  44. }
  45. .selector .selector-filter {
  46. border: 1px solid var(--border-color);
  47. border-width: 0 1px;
  48. padding: 8px;
  49. color: var(--body-quiet-color);
  50. font-size: 0.625rem;
  51. margin: 0;
  52. text-align: left;
  53. }
  54. .selector .selector-filter label,
  55. .inline-group .aligned .selector .selector-filter label {
  56. float: left;
  57. margin: 7px 0 0;
  58. width: 18px;
  59. height: 18px;
  60. padding: 0;
  61. overflow: hidden;
  62. line-height: 1;
  63. min-width: auto;
  64. }
  65. .selector .selector-available input,
  66. .selector .selector-chosen input {
  67. width: 320px;
  68. margin-left: 8px;
  69. }
  70. .selector ul.selector-chooser {
  71. align-self: center;
  72. width: 22px;
  73. background-color: var(--selected-bg);
  74. border-radius: 10px;
  75. margin: 0 5px;
  76. padding: 0;
  77. transform: translateY(-17px);
  78. }
  79. .selector-chooser li {
  80. margin: 0;
  81. padding: 3px;
  82. list-style-type: none;
  83. }
  84. .selector select {
  85. padding: 0 10px;
  86. margin: 0 0 10px;
  87. border-radius: 0 0 4px 4px;
  88. }
  89. .selector .selector-chosen--with-filtered select {
  90. margin: 0;
  91. border-radius: 0;
  92. height: 14em;
  93. }
  94. .selector .selector-chosen:not(.selector-chosen--with-filtered) .list-footer-display {
  95. display: none;
  96. }
  97. .selector-add, .selector-remove {
  98. width: 16px;
  99. height: 16px;
  100. display: block;
  101. text-indent: -3000px;
  102. overflow: hidden;
  103. cursor: default;
  104. opacity: 0.55;
  105. }
  106. .active.selector-add, .active.selector-remove {
  107. opacity: 1;
  108. }
  109. .active.selector-add:hover, .active.selector-remove:hover {
  110. cursor: pointer;
  111. }
  112. .selector-add {
  113. background: url(../img/selector-icons.svg) 0 -96px no-repeat;
  114. }
  115. .active.selector-add:focus, .active.selector-add:hover {
  116. background-position: 0 -112px;
  117. }
  118. .selector-remove {
  119. background: url(../img/selector-icons.svg) 0 -64px no-repeat;
  120. }
  121. .active.selector-remove:focus, .active.selector-remove:hover {
  122. background-position: 0 -80px;
  123. }
  124. a.selector-chooseall, a.selector-clearall {
  125. display: inline-block;
  126. height: 16px;
  127. text-align: left;
  128. margin: 1px auto 3px;
  129. overflow: hidden;
  130. font-weight: bold;
  131. line-height: 16px;
  132. color: var(--body-quiet-color);
  133. text-decoration: none;
  134. opacity: 0.55;
  135. }
  136. a.active.selector-chooseall:focus, a.active.selector-clearall:focus,
  137. a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
  138. color: var(--link-fg);
  139. }
  140. a.active.selector-chooseall, a.active.selector-clearall {
  141. opacity: 1;
  142. }
  143. a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
  144. cursor: pointer;
  145. }
  146. a.selector-chooseall {
  147. padding: 0 18px 0 0;
  148. background: url(../img/selector-icons.svg) right -160px no-repeat;
  149. cursor: default;
  150. }
  151. a.active.selector-chooseall:focus, a.active.selector-chooseall:hover {
  152. background-position: 100% -176px;
  153. }
  154. a.selector-clearall {
  155. padding: 0 0 0 18px;
  156. background: url(../img/selector-icons.svg) 0 -128px no-repeat;
  157. cursor: default;
  158. }
  159. a.active.selector-clearall:focus, a.active.selector-clearall:hover {
  160. background-position: 0 -144px;
  161. }
  162. /* STACKED SELECTORS */
  163. .stacked {
  164. float: left;
  165. width: 490px;
  166. display: block;
  167. }
  168. .stacked select {
  169. width: 480px;
  170. height: 10.1em;
  171. }
  172. .stacked .selector-available, .stacked .selector-chosen {
  173. width: 480px;
  174. }
  175. .stacked .selector-available {
  176. margin-bottom: 0;
  177. }
  178. .stacked .selector-available input {
  179. width: 422px;
  180. }
  181. .stacked ul.selector-chooser {
  182. height: 22px;
  183. width: 50px;
  184. margin: 0 0 10px 40%;
  185. background-color: #eee;
  186. border-radius: 10px;
  187. transform: none;
  188. }
  189. .stacked .selector-chooser li {
  190. float: left;
  191. padding: 3px 3px 3px 5px;
  192. }
  193. .stacked .selector-chooseall, .stacked .selector-clearall {
  194. display: none;
  195. }
  196. .stacked .selector-add {
  197. background: url(../img/selector-icons.svg) 0 -32px no-repeat;
  198. cursor: default;
  199. }
  200. .stacked .active.selector-add {
  201. background-position: 0 -32px;
  202. cursor: pointer;
  203. }
  204. .stacked .active.selector-add:focus, .stacked .active.selector-add:hover {
  205. background-position: 0 -48px;
  206. cursor: pointer;
  207. }
  208. .stacked .selector-remove {
  209. background: url(../img/selector-icons.svg) 0 0 no-repeat;
  210. cursor: default;
  211. }
  212. .stacked .active.selector-remove {
  213. background-position: 0 0px;
  214. cursor: pointer;
  215. }
  216. .stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover {
  217. background-position: 0 -16px;
  218. cursor: pointer;
  219. }
  220. .selector .help-icon {
  221. background: url(../img/icon-unknown.svg) 0 0 no-repeat;
  222. display: inline-block;
  223. vertical-align: middle;
  224. margin: -2px 0 0 2px;
  225. width: 13px;
  226. height: 13px;
  227. }
  228. .selector .selector-chosen .help-icon {
  229. background: url(../img/icon-unknown-alt.svg) 0 0 no-repeat;
  230. }
  231. .selector .search-label-icon {
  232. background: url(../img/search.svg) 0 0 no-repeat;
  233. display: inline-block;
  234. height: 1.125rem;
  235. width: 1.125rem;
  236. }
  237. /* DATE AND TIME */
  238. p.datetime {
  239. line-height: 20px;
  240. margin: 0;
  241. padding: 0;
  242. color: var(--body-quiet-color);
  243. font-weight: bold;
  244. }
  245. .datetime span {
  246. white-space: nowrap;
  247. font-weight: normal;
  248. font-size: 0.6875rem;
  249. color: var(--body-quiet-color);
  250. }
  251. .datetime input, .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField {
  252. margin-left: 5px;
  253. margin-bottom: 4px;
  254. }
  255. table p.datetime {
  256. font-size: 0.6875rem;
  257. margin-left: 0;
  258. padding-left: 0;
  259. }
  260. .datetimeshortcuts .clock-icon, .datetimeshortcuts .date-icon {
  261. position: relative;
  262. display: inline-block;
  263. vertical-align: middle;
  264. height: 16px;
  265. width: 16px;
  266. overflow: hidden;
  267. }
  268. .datetimeshortcuts .clock-icon {
  269. background: url(../img/icon-clock.svg) 0 0 no-repeat;
  270. }
  271. .datetimeshortcuts a:focus .clock-icon,
  272. .datetimeshortcuts a:hover .clock-icon {
  273. background-position: 0 -16px;
  274. }
  275. .datetimeshortcuts .date-icon {
  276. background: url(../img/icon-calendar.svg) 0 0 no-repeat;
  277. top: -1px;
  278. }
  279. .datetimeshortcuts a:focus .date-icon,
  280. .datetimeshortcuts a:hover .date-icon {
  281. background-position: 0 -16px;
  282. }
  283. .timezonewarning {
  284. font-size: 0.6875rem;
  285. color: var(--body-quiet-color);
  286. }
  287. /* URL */
  288. p.url {
  289. line-height: 20px;
  290. margin: 0;
  291. padding: 0;
  292. color: var(--body-quiet-color);
  293. font-size: 0.6875rem;
  294. font-weight: bold;
  295. }
  296. .url a {
  297. font-weight: normal;
  298. }
  299. /* FILE UPLOADS */
  300. p.file-upload {
  301. line-height: 20px;
  302. margin: 0;
  303. padding: 0;
  304. color: var(--body-quiet-color);
  305. font-size: 0.6875rem;
  306. font-weight: bold;
  307. }
  308. .file-upload a {
  309. font-weight: normal;
  310. }
  311. .file-upload .deletelink {
  312. margin-left: 5px;
  313. }
  314. span.clearable-file-input label {
  315. color: var(--body-fg);
  316. font-size: 0.6875rem;
  317. display: inline;
  318. float: none;
  319. }
  320. /* CALENDARS & CLOCKS */
  321. .calendarbox, .clockbox {
  322. margin: 5px auto;
  323. font-size: 0.75rem;
  324. width: 19em;
  325. text-align: center;
  326. background: var(--body-bg);
  327. color: var(--body-fg);
  328. border: 1px solid var(--hairline-color);
  329. border-radius: 4px;
  330. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  331. overflow: hidden;
  332. position: relative;
  333. }
  334. .clockbox {
  335. width: auto;
  336. }
  337. .calendar {
  338. margin: 0;
  339. padding: 0;
  340. }
  341. .calendar table {
  342. margin: 0;
  343. padding: 0;
  344. border-collapse: collapse;
  345. background: white;
  346. width: 100%;
  347. }
  348. .calendar caption, .calendarbox h2 {
  349. margin: 0;
  350. text-align: center;
  351. border-top: none;
  352. font-weight: 700;
  353. font-size: 0.75rem;
  354. color: #333;
  355. background: var(--accent);
  356. }
  357. .calendar th {
  358. padding: 8px 5px;
  359. background: var(--darkened-bg);
  360. border-bottom: 1px solid var(--border-color);
  361. font-weight: 400;
  362. font-size: 0.75rem;
  363. text-align: center;
  364. color: var(--body-quiet-color);
  365. }
  366. .calendar td {
  367. font-weight: 400;
  368. font-size: 0.75rem;
  369. text-align: center;
  370. padding: 0;
  371. border-top: 1px solid var(--hairline-color);
  372. border-bottom: none;
  373. }
  374. .calendar td.selected a {
  375. background: var(--primary);
  376. color: var(--button-fg);
  377. }
  378. .calendar td.nonday {
  379. background: var(--darkened-bg);
  380. }
  381. .calendar td.today a {
  382. font-weight: 700;
  383. }
  384. .calendar td a, .timelist a {
  385. display: block;
  386. font-weight: 400;
  387. padding: 6px;
  388. text-decoration: none;
  389. color: var(--body-quiet-color);
  390. }
  391. .calendar td a:focus, .timelist a:focus,
  392. .calendar td a:hover, .timelist a:hover {
  393. background: var(--primary);
  394. color: white;
  395. }
  396. .calendar td a:active, .timelist a:active {
  397. background: var(--header-bg);
  398. color: white;
  399. }
  400. .calendarnav {
  401. font-size: 0.625rem;
  402. text-align: center;
  403. color: #ccc;
  404. margin: 0;
  405. padding: 1px 3px;
  406. }
  407. .calendarnav a:link, #calendarnav a:visited,
  408. #calendarnav a:focus, #calendarnav a:hover {
  409. color: var(--body-quiet-color);
  410. }
  411. .calendar-shortcuts {
  412. background: var(--body-bg);
  413. color: var(--body-quiet-color);
  414. font-size: 0.6875rem;
  415. line-height: 0.6875rem;
  416. border-top: 1px solid var(--hairline-color);
  417. padding: 8px 0;
  418. }
  419. .calendarbox .calendarnav-previous, .calendarbox .calendarnav-next {
  420. display: block;
  421. position: absolute;
  422. top: 8px;
  423. width: 15px;
  424. height: 15px;
  425. text-indent: -9999px;
  426. padding: 0;
  427. }
  428. .calendarnav-previous {
  429. left: 10px;
  430. background: url(../img/calendar-icons.svg) 0 0 no-repeat;
  431. }
  432. .calendarbox .calendarnav-previous:focus,
  433. .calendarbox .calendarnav-previous:hover {
  434. background-position: 0 -15px;
  435. }
  436. .calendarnav-next {
  437. right: 10px;
  438. background: url(../img/calendar-icons.svg) 0 -30px no-repeat;
  439. }
  440. .calendarbox .calendarnav-next:focus,
  441. .calendarbox .calendarnav-next:hover {
  442. background-position: 0 -45px;
  443. }
  444. .calendar-cancel {
  445. margin: 0;
  446. padding: 4px 0;
  447. font-size: 0.75rem;
  448. background: #eee;
  449. border-top: 1px solid var(--border-color);
  450. color: var(--body-fg);
  451. }
  452. .calendar-cancel:focus, .calendar-cancel:hover {
  453. background: #ddd;
  454. }
  455. .calendar-cancel a {
  456. color: black;
  457. display: block;
  458. }
  459. ul.timelist, .timelist li {
  460. list-style-type: none;
  461. margin: 0;
  462. padding: 0;
  463. }
  464. .timelist a {
  465. padding: 2px;
  466. }
  467. /* EDIT INLINE */
  468. .inline-deletelink {
  469. float: right;
  470. text-indent: -9999px;
  471. background: url(../img/inline-delete.svg) 0 0 no-repeat;
  472. width: 16px;
  473. height: 16px;
  474. border: 0px none;
  475. }
  476. .inline-deletelink:focus, .inline-deletelink:hover {
  477. cursor: pointer;
  478. }
  479. /* RELATED WIDGET WRAPPER */
  480. .related-widget-wrapper {
  481. float: left; /* display properly in form rows with multiple fields */
  482. overflow: hidden; /* clear floated contents */
  483. }
  484. .related-widget-wrapper-link {
  485. opacity: 0.3;
  486. }
  487. .related-widget-wrapper-link:link {
  488. opacity: .8;
  489. }
  490. .related-widget-wrapper-link:link:focus,
  491. .related-widget-wrapper-link:link:hover {
  492. opacity: 1;
  493. }
  494. select + .related-widget-wrapper-link,
  495. .related-widget-wrapper-link + .related-widget-wrapper-link {
  496. margin-left: 7px;
  497. }
  498. /* GIS MAPS */
  499. .dj_map {
  500. width: 600px;
  501. height: 400px;
  502. }