responsive.css 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999
  1. /* Tablets */
  2. input[type="submit"], button {
  3. -webkit-appearance: none;
  4. appearance: none;
  5. }
  6. @media (max-width: 1024px) {
  7. /* Basic */
  8. html {
  9. -webkit-text-size-adjust: 100%;
  10. }
  11. td, th {
  12. padding: 10px;
  13. font-size: 0.875rem;
  14. }
  15. .small {
  16. font-size: 0.75rem;
  17. }
  18. /* Layout */
  19. #container {
  20. min-width: 0;
  21. }
  22. #content {
  23. padding: 15px 20px 20px;
  24. }
  25. div.breadcrumbs {
  26. padding: 10px 30px;
  27. }
  28. /* Header */
  29. #header {
  30. flex-direction: column;
  31. padding: 15px 30px;
  32. justify-content: flex-start;
  33. }
  34. #branding h1 {
  35. margin: 0 0 8px;
  36. line-height: 1.2;
  37. }
  38. #user-tools {
  39. margin: 0;
  40. font-weight: 400;
  41. line-height: 1.85;
  42. text-align: left;
  43. }
  44. #user-tools a {
  45. display: inline-block;
  46. line-height: 1.4;
  47. }
  48. /* Dashboard */
  49. .dashboard #content {
  50. width: auto;
  51. }
  52. #content-related {
  53. margin-right: -290px;
  54. }
  55. .colSM #content-related {
  56. margin-left: -290px;
  57. }
  58. .colMS {
  59. margin-right: 290px;
  60. }
  61. .colSM {
  62. margin-left: 290px;
  63. }
  64. .dashboard .module table td a {
  65. padding-right: 0;
  66. }
  67. td .changelink, td .addlink {
  68. font-size: 0.8125rem;
  69. }
  70. /* Changelist */
  71. #toolbar {
  72. border: none;
  73. padding: 15px;
  74. }
  75. #changelist-search > div {
  76. display: flex;
  77. flex-wrap: nowrap;
  78. max-width: 480px;
  79. }
  80. #changelist-search label {
  81. line-height: 1.375rem;
  82. }
  83. #toolbar form #searchbar {
  84. flex: 1 0 auto;
  85. width: 0;
  86. height: 1.375rem;
  87. margin: 0 10px 0 6px;
  88. }
  89. #toolbar form input[type=submit] {
  90. flex: 0 1 auto;
  91. }
  92. #changelist-search .quiet {
  93. width: 0;
  94. flex: 1 0 auto;
  95. margin: 5px 0 0 25px;
  96. }
  97. #changelist .actions {
  98. display: flex;
  99. flex-wrap: wrap;
  100. padding: 15px 0;
  101. }
  102. #changelist .actions label {
  103. display: flex;
  104. }
  105. #changelist .actions select {
  106. background: var(--body-bg);
  107. }
  108. #changelist .actions .button {
  109. min-width: 48px;
  110. margin: 0 10px;
  111. }
  112. #changelist .actions span.all,
  113. #changelist .actions span.clear,
  114. #changelist .actions span.question,
  115. #changelist .actions span.action-counter {
  116. font-size: 0.6875rem;
  117. margin: 0 10px 0 0;
  118. }
  119. #changelist-filter {
  120. flex-basis: 200px;
  121. }
  122. .change-list .filtered .results,
  123. .change-list .filtered .paginator,
  124. .filtered #toolbar,
  125. .filtered .actions,
  126. #changelist .paginator {
  127. border-top-color: var(--hairline-color); /* XXX Is this used at all? */
  128. }
  129. #changelist .results + .paginator {
  130. border-top: none;
  131. }
  132. /* Forms */
  133. label {
  134. font-size: 0.875rem;
  135. }
  136. .form-row input[type=text],
  137. .form-row input[type=password],
  138. .form-row input[type=email],
  139. .form-row input[type=url],
  140. .form-row input[type=tel],
  141. .form-row input[type=number],
  142. .form-row textarea,
  143. .form-row select,
  144. .form-row .vTextField {
  145. box-sizing: border-box;
  146. margin: 0;
  147. padding: 6px 8px;
  148. min-height: 2.25rem;
  149. font-size: 0.875rem;
  150. }
  151. .form-row select {
  152. height: 2.25rem;
  153. }
  154. .form-row select[multiple] {
  155. height: auto;
  156. min-height: 0;
  157. }
  158. fieldset .fieldBox + .fieldBox {
  159. margin-top: 10px;
  160. padding-top: 10px;
  161. border-top: 1px solid var(--hairline-color);
  162. }
  163. textarea {
  164. max-width: 100%;
  165. max-height: 120px;
  166. }
  167. .aligned label {
  168. padding-top: 6px;
  169. }
  170. .aligned .related-lookup,
  171. .aligned .datetimeshortcuts,
  172. .aligned .related-lookup + strong {
  173. align-self: center;
  174. margin-left: 15px;
  175. }
  176. form .aligned div.radiolist {
  177. margin-left: 2px;
  178. }
  179. .submit-row {
  180. padding: 8px;
  181. }
  182. .submit-row a.deletelink {
  183. padding: 10px 7px;
  184. }
  185. .button, input[type=submit], input[type=button], .submit-row input, a.button {
  186. padding: 7px;
  187. }
  188. /* Related widget */
  189. .related-widget-wrapper {
  190. float: none;
  191. }
  192. .related-widget-wrapper-link + .selector {
  193. max-width: calc(100% - 30px);
  194. margin-right: 15px;
  195. }
  196. select + .related-widget-wrapper-link,
  197. .related-widget-wrapper-link + .related-widget-wrapper-link {
  198. margin-left: 10px;
  199. }
  200. /* Selector */
  201. .selector {
  202. display: flex;
  203. width: 100%;
  204. }
  205. .selector .selector-filter {
  206. display: flex;
  207. align-items: center;
  208. }
  209. .selector .selector-filter label {
  210. margin: 0 8px 0 0;
  211. }
  212. .selector .selector-filter input {
  213. width: auto;
  214. min-height: 0;
  215. flex: 1 1;
  216. }
  217. .selector-available, .selector-chosen {
  218. width: auto;
  219. flex: 1 1;
  220. display: flex;
  221. flex-direction: column;
  222. }
  223. .selector select {
  224. width: 100%;
  225. flex: 1 0 auto;
  226. margin-bottom: 5px;
  227. }
  228. .selector ul.selector-chooser {
  229. width: 26px;
  230. height: 52px;
  231. padding: 2px 0;
  232. margin: auto 15px;
  233. border-radius: 20px;
  234. transform: translateY(-10px);
  235. }
  236. .selector-add, .selector-remove {
  237. width: 20px;
  238. height: 20px;
  239. background-size: 20px auto;
  240. }
  241. .selector-add {
  242. background-position: 0 -120px;
  243. }
  244. .selector-remove {
  245. background-position: 0 -80px;
  246. }
  247. a.selector-chooseall, a.selector-clearall {
  248. align-self: center;
  249. }
  250. .stacked {
  251. flex-direction: column;
  252. max-width: 480px;
  253. }
  254. .stacked > * {
  255. flex: 0 1 auto;
  256. }
  257. .stacked select {
  258. margin-bottom: 0;
  259. }
  260. .stacked .selector-available, .stacked .selector-chosen {
  261. width: auto;
  262. }
  263. .stacked ul.selector-chooser {
  264. width: 52px;
  265. height: 26px;
  266. padding: 0 2px;
  267. margin: 15px auto;
  268. transform: none;
  269. }
  270. .stacked .selector-chooser li {
  271. padding: 3px;
  272. }
  273. .stacked .selector-add, .stacked .selector-remove {
  274. background-size: 20px auto;
  275. }
  276. .stacked .selector-add {
  277. background-position: 0 -40px;
  278. }
  279. .stacked .active.selector-add {
  280. background-position: 0 -40px;
  281. }
  282. .active.selector-add:focus, .active.selector-add:hover {
  283. background-position: 0 -140px;
  284. }
  285. .stacked .active.selector-add:focus, .stacked .active.selector-add:hover {
  286. background-position: 0 -60px;
  287. }
  288. .stacked .selector-remove {
  289. background-position: 0 0;
  290. }
  291. .stacked .active.selector-remove {
  292. background-position: 0 0;
  293. }
  294. .active.selector-remove:focus, .active.selector-remove:hover {
  295. background-position: 0 -100px;
  296. }
  297. .stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover {
  298. background-position: 0 -20px;
  299. }
  300. .help-tooltip, .selector .help-icon {
  301. display: none;
  302. }
  303. .datetime input {
  304. width: 50%;
  305. max-width: 120px;
  306. }
  307. .datetime span {
  308. font-size: 0.8125rem;
  309. }
  310. .datetime .timezonewarning {
  311. display: block;
  312. font-size: 0.6875rem;
  313. color: var(--body-quiet-color);
  314. }
  315. .datetimeshortcuts {
  316. color: var(--border-color); /* XXX Redundant, .datetime span also sets #ccc */
  317. }
  318. .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField {
  319. width: 75%;
  320. }
  321. .inline-group {
  322. overflow: auto;
  323. }
  324. /* Messages */
  325. ul.messagelist li {
  326. padding-left: 55px;
  327. background-position: 30px 12px;
  328. }
  329. ul.messagelist li.error {
  330. background-position: 30px 12px;
  331. }
  332. ul.messagelist li.warning {
  333. background-position: 30px 14px;
  334. }
  335. /* Login */
  336. .login #header {
  337. padding: 15px 20px;
  338. }
  339. .login #branding h1 {
  340. margin: 0;
  341. }
  342. /* GIS */
  343. div.olMap {
  344. max-width: calc(100vw - 30px);
  345. max-height: 300px;
  346. }
  347. .olMap + .clear_features {
  348. display: block;
  349. margin-top: 10px;
  350. }
  351. /* Docs */
  352. .module table.xfull {
  353. width: 100%;
  354. }
  355. pre.literal-block {
  356. overflow: auto;
  357. }
  358. }
  359. /* Mobile */
  360. @media (max-width: 767px) {
  361. /* Layout */
  362. #header, #content, #footer {
  363. padding: 15px;
  364. }
  365. #footer:empty {
  366. padding: 0;
  367. }
  368. div.breadcrumbs {
  369. padding: 10px 15px;
  370. }
  371. /* Dashboard */
  372. .colMS, .colSM {
  373. margin: 0;
  374. }
  375. #content-related, .colSM #content-related {
  376. width: 100%;
  377. margin: 0;
  378. }
  379. #content-related .module {
  380. margin-bottom: 0;
  381. }
  382. #content-related .module h2 {
  383. padding: 10px 15px;
  384. font-size: 1rem;
  385. }
  386. /* Changelist */
  387. #changelist {
  388. align-items: stretch;
  389. flex-direction: column;
  390. }
  391. #toolbar {
  392. padding: 10px;
  393. }
  394. #changelist-filter {
  395. margin-left: 0;
  396. }
  397. #changelist .actions label {
  398. flex: 1 1;
  399. }
  400. #changelist .actions select {
  401. flex: 1 0;
  402. width: 100%;
  403. }
  404. #changelist .actions span {
  405. flex: 1 0 100%;
  406. }
  407. #changelist-filter {
  408. position: static;
  409. width: auto;
  410. margin-top: 30px;
  411. }
  412. .object-tools {
  413. float: none;
  414. margin: 0 0 15px;
  415. padding: 0;
  416. overflow: hidden;
  417. }
  418. .object-tools li {
  419. height: auto;
  420. margin-left: 0;
  421. }
  422. .object-tools li + li {
  423. margin-left: 15px;
  424. }
  425. /* Forms */
  426. .form-row {
  427. padding: 15px 0;
  428. }
  429. .aligned .form-row,
  430. .aligned .form-row > div {
  431. max-width: 100vw;
  432. }
  433. .aligned .form-row > div {
  434. width: calc(100vw - 30px);
  435. }
  436. .flex-container {
  437. flex-flow: column;
  438. }
  439. .flex-container.checkbox-row {
  440. flex-flow: row;
  441. }
  442. textarea {
  443. max-width: none;
  444. }
  445. .vURLField {
  446. width: auto;
  447. }
  448. fieldset .fieldBox + .fieldBox {
  449. margin-top: 15px;
  450. padding-top: 15px;
  451. }
  452. fieldset.collapsed .form-row {
  453. display: none;
  454. }
  455. .aligned label {
  456. width: 100%;
  457. min-width: auto;
  458. padding: 0 0 10px;
  459. }
  460. .aligned label:after {
  461. max-height: 0;
  462. }
  463. .aligned .form-row input,
  464. .aligned .form-row select,
  465. .aligned .form-row textarea {
  466. flex: 1 1 auto;
  467. max-width: 100%;
  468. }
  469. .aligned .checkbox-row input {
  470. flex: 0 1 auto;
  471. margin: 0;
  472. }
  473. .aligned .vCheckboxLabel {
  474. flex: 1 0;
  475. padding: 1px 0 0 5px;
  476. }
  477. .aligned label + p,
  478. .aligned label + div.help,
  479. .aligned label + div.readonly {
  480. padding: 0;
  481. margin-left: 0;
  482. }
  483. .aligned p.file-upload {
  484. font-size: 0.8125rem;
  485. }
  486. span.clearable-file-input {
  487. margin-left: 15px;
  488. }
  489. span.clearable-file-input label {
  490. font-size: 0.8125rem;
  491. padding-bottom: 0;
  492. }
  493. .aligned .timezonewarning {
  494. flex: 1 0 100%;
  495. margin-top: 5px;
  496. }
  497. form .aligned .form-row div.help {
  498. width: 100%;
  499. margin: 5px 0 0;
  500. padding: 0;
  501. }
  502. form .aligned ul,
  503. form .aligned ul.errorlist {
  504. margin-left: 0;
  505. padding-left: 0;
  506. }
  507. form .aligned div.radiolist {
  508. margin-top: 5px;
  509. margin-right: 15px;
  510. margin-bottom: -3px;
  511. }
  512. form .aligned div.radiolist:not(.inline) div + div {
  513. margin-top: 5px;
  514. }
  515. /* Related widget */
  516. .related-widget-wrapper {
  517. width: 100%;
  518. display: flex;
  519. align-items: flex-start;
  520. }
  521. .related-widget-wrapper .selector {
  522. order: 1;
  523. }
  524. .related-widget-wrapper > a {
  525. order: 2;
  526. }
  527. .related-widget-wrapper .radiolist ~ a {
  528. align-self: flex-end;
  529. }
  530. .related-widget-wrapper > select ~ a {
  531. align-self: center;
  532. }
  533. select + .related-widget-wrapper-link,
  534. .related-widget-wrapper-link + .related-widget-wrapper-link {
  535. margin-left: 15px;
  536. }
  537. /* Selector */
  538. .selector {
  539. flex-direction: column;
  540. }
  541. .selector > * {
  542. float: none;
  543. }
  544. .selector-available, .selector-chosen {
  545. margin-bottom: 0;
  546. flex: 1 1 auto;
  547. }
  548. .selector select {
  549. max-height: 96px;
  550. }
  551. .selector ul.selector-chooser {
  552. display: block;
  553. float: none;
  554. width: 52px;
  555. height: 26px;
  556. padding: 0 2px;
  557. margin: 15px auto 20px;
  558. transform: none;
  559. }
  560. .selector ul.selector-chooser li {
  561. float: left;
  562. }
  563. .selector-remove {
  564. background-position: 0 0;
  565. }
  566. .active.selector-remove:focus, .active.selector-remove:hover {
  567. background-position: 0 -20px;
  568. }
  569. .selector-add {
  570. background-position: 0 -40px;
  571. }
  572. .active.selector-add:focus, .active.selector-add:hover {
  573. background-position: 0 -60px;
  574. }
  575. /* Inlines */
  576. .inline-group[data-inline-type="stacked"] .inline-related {
  577. border: 1px solid var(--hairline-color);
  578. border-radius: 4px;
  579. margin-top: 15px;
  580. overflow: auto;
  581. }
  582. .inline-group[data-inline-type="stacked"] .inline-related > * {
  583. box-sizing: border-box;
  584. }
  585. .inline-group[data-inline-type="stacked"] .inline-related .module {
  586. padding: 0 10px;
  587. }
  588. .inline-group[data-inline-type="stacked"] .inline-related .module .form-row {
  589. border-top: 1px solid var(--hairline-color);
  590. border-bottom: none;
  591. }
  592. .inline-group[data-inline-type="stacked"] .inline-related .module .form-row:first-child {
  593. border-top: none;
  594. }
  595. .inline-group[data-inline-type="stacked"] .inline-related h3 {
  596. padding: 10px;
  597. border-top-width: 0;
  598. border-bottom-width: 2px;
  599. display: flex;
  600. flex-wrap: wrap;
  601. align-items: center;
  602. }
  603. .inline-group[data-inline-type="stacked"] .inline-related h3 .inline_label {
  604. margin-right: auto;
  605. }
  606. .inline-group[data-inline-type="stacked"] .inline-related h3 span.delete {
  607. float: none;
  608. flex: 1 1 100%;
  609. margin-top: 5px;
  610. }
  611. .inline-group[data-inline-type="stacked"] .aligned .form-row > div:not([class]) {
  612. width: 100%;
  613. }
  614. .inline-group[data-inline-type="stacked"] .aligned label {
  615. width: 100%;
  616. }
  617. .inline-group[data-inline-type="stacked"] div.add-row {
  618. margin-top: 15px;
  619. border: 1px solid var(--hairline-color);
  620. border-radius: 4px;
  621. }
  622. .inline-group div.add-row,
  623. .inline-group .tabular tr.add-row td {
  624. padding: 0;
  625. }
  626. .inline-group div.add-row a,
  627. .inline-group .tabular tr.add-row td a {
  628. display: block;
  629. padding: 8px 10px 8px 26px;
  630. background-position: 8px 9px;
  631. }
  632. /* Submit row */
  633. .submit-row {
  634. padding: 10px;
  635. margin: 0 0 15px;
  636. flex-direction: column;
  637. gap: 8px;
  638. }
  639. .submit-row input, .submit-row input.default, .submit-row a {
  640. text-align: center;
  641. }
  642. .submit-row a.closelink {
  643. padding: 10px 0;
  644. text-align: center;
  645. }
  646. .submit-row a.deletelink {
  647. margin: 0;
  648. }
  649. /* Messages */
  650. ul.messagelist li {
  651. padding-left: 40px;
  652. background-position: 15px 12px;
  653. }
  654. ul.messagelist li.error {
  655. background-position: 15px 12px;
  656. }
  657. ul.messagelist li.warning {
  658. background-position: 15px 14px;
  659. }
  660. /* Paginator */
  661. .paginator .this-page, .paginator a:link, .paginator a:visited {
  662. padding: 4px 10px;
  663. }
  664. /* Login */
  665. body.login {
  666. padding: 0 15px;
  667. }
  668. .login #container {
  669. width: auto;
  670. max-width: 480px;
  671. margin: 50px auto;
  672. }
  673. .login #header,
  674. .login #content {
  675. padding: 15px;
  676. }
  677. .login #content-main {
  678. float: none;
  679. }
  680. .login .form-row {
  681. padding: 0;
  682. }
  683. .login .form-row + .form-row {
  684. margin-top: 15px;
  685. }
  686. .login .form-row label {
  687. margin: 0 0 5px;
  688. line-height: 1.2;
  689. }
  690. .login .submit-row {
  691. padding: 15px 0 0;
  692. }
  693. .login br {
  694. display: none;
  695. }
  696. .login .submit-row input {
  697. margin: 0;
  698. text-transform: uppercase;
  699. }
  700. .errornote {
  701. margin: 0 0 20px;
  702. padding: 8px 12px;
  703. font-size: 0.8125rem;
  704. }
  705. /* Calendar and clock */
  706. .calendarbox, .clockbox {
  707. position: fixed !important;
  708. top: 50% !important;
  709. left: 50% !important;
  710. transform: translate(-50%, -50%);
  711. margin: 0;
  712. border: none;
  713. overflow: visible;
  714. }
  715. .calendarbox:before, .clockbox:before {
  716. content: '';
  717. position: fixed;
  718. top: 50%;
  719. left: 50%;
  720. width: 100vw;
  721. height: 100vh;
  722. background: rgba(0, 0, 0, 0.75);
  723. transform: translate(-50%, -50%);
  724. }
  725. .calendarbox > *, .clockbox > * {
  726. position: relative;
  727. z-index: 1;
  728. }
  729. .calendarbox > div:first-child {
  730. z-index: 2;
  731. }
  732. .calendarbox .calendar, .clockbox h2 {
  733. border-radius: 4px 4px 0 0;
  734. overflow: hidden;
  735. }
  736. .calendarbox .calendar-cancel, .clockbox .calendar-cancel {
  737. border-radius: 0 0 4px 4px;
  738. overflow: hidden;
  739. }
  740. .calendar-shortcuts {
  741. padding: 10px 0;
  742. font-size: 0.75rem;
  743. line-height: 0.75rem;
  744. }
  745. .calendar-shortcuts a {
  746. margin: 0 4px;
  747. }
  748. .timelist a {
  749. background: var(--body-bg);
  750. padding: 4px;
  751. }
  752. .calendar-cancel {
  753. padding: 8px 10px;
  754. }
  755. .clockbox h2 {
  756. padding: 8px 15px;
  757. }
  758. .calendar caption {
  759. padding: 10px;
  760. }
  761. .calendarbox .calendarnav-previous, .calendarbox .calendarnav-next {
  762. z-index: 1;
  763. top: 10px;
  764. }
  765. /* History */
  766. table#change-history tbody th, table#change-history tbody td {
  767. font-size: 0.8125rem;
  768. word-break: break-word;
  769. }
  770. table#change-history tbody th {
  771. width: auto;
  772. }
  773. /* Docs */
  774. table.model tbody th, table.model tbody td {
  775. font-size: 0.8125rem;
  776. word-break: break-word;
  777. }
  778. }