git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/common.scss

1 @import "parameters";

2 @import "bootstrap";

4 /* Styles common to large and small screens */

6 .fillL { background-color: white; }

8 /* Default rules for the body of every page */

10 body {

11 font-family: 'Helvetica Neue',Arial,sans-serif;

12 font-size: $typeheight;

13 line-height: 1.6666;

14 color: #222;

15 background-color: #fff;

16 margin: 0px;

17 padding: 0px;

18 text-align: left;

19 height: 100%;

20 }

22 p > img {

23 width: auto;

24 max-width: 100%;

25 }

27 small, aside {

28 font-size: 12px;

29 }

31 #container { position: relative; }

33 .column-1 {

34 width: 50%;

35 margin: 0 0 $lineheight/2 0;

36 }

38 .small_icon {

39 vertical-align: middle;

40 margin-right: $lineheight/4;

41 }

43 .red { color: $red; }

45 .piwik { border: 0; }

47 [dir=rtl] { /* no-r2 */ text-align: right; }

49 [dir=ltr] { /* no-r2 */ text-align: left; }

51 /* Rules for icons */

53 .icon {

54 display: inline-block;

55 vertical-align: top;

56 width: 20px;

57 height: 20px;

58 background: transparent image-url("sprite.png") no-repeat 0 0;

59 background-image: image-url("sprite.svg");

60 text-indent: -9999px;

61 overflow: hidden;

62 }

64 .icon.search { /* no-r2 */ background-position: 0 0; }

65 .icon.donate { /* no-r2 */ background-position: -20px 0; }

66 .icon.zoomin { /* no-r2 */ background-position: -40px 0; }

67 .icon.zoomout { /* no-r2 */ background-position: -60px 0; }

68 .icon.geolocate { /* no-r2 */ background-position: -80px 0; }

69 .active .icon.geolocate { /* no-r2 */ background-position: -80px -20px; }

70 .icon.layers { /* no-r2 */ background-position: -100px 0; }

71 .icon.key { /* no-r2 */ background-position: -120px 0; }

72 .icon.share { /* no-r2 */ background-position: -140px 0; }

73 .icon.clipboard { /* no-r2 */ background-position: -160px 0; }

74 .icon.link { /* no-r2 */ background-position: -180px 0; }

75 .icon.close { /* no-r2 */ background-position: -200px 0; }

76 .close-wrap:hover .icon.close,

77 .icon.close:hover { /* no-r2 */ background-position: -200px -20px; }

78 .icon.check { /* no-r2 */ background-position: -220px 0; }

79 .icon.note { /* no-r2 */ background-position: -240px 0; }

80 .icon.note.grey { /* no-r2 */ background-position: -240px -20px; }

81 .icon.query { /* no-r2 */ background-position: -260px 0; }

83 /* Rules for links */

85 a {

86 color: #24d;

87 text-decoration: none;

88 -webkit-appearance: none;

89 outline: 0;

90 &:hover {

91 text-decoration: underline;

92 }

93 }

95 /* General styles for tables */

97 table {

98 width: 100%;

99 margin-bottom: $lineheight;

100 th, td {

101 text-align: left;

102 padding: $lineheight/4;

103 line-height: $lineheight;

104 }

105 th {

106 font-weight: 600;

107 vertical-align: top;

108 }

109 td {

110 vertical-align: middle;

111 }

112 }

113

114 /* Utility for de-emphasizing content */

115

116 .deemphasize {

117 color: $darkgrey;

118 a {

119 color: $blue;

120 }

121 }

122

123 /* Rules for the header */

124

125 #menu-icon {

126 display: none !important;

127 float: right;

128 background: image-url("menu-icon.png") no-repeat;

129 background-size: 30px 30px;

130 display: block;

131 width: 30px;

132 height: 30px;

133 margin: 14px 10px 0 0;

134 opacity: 0.6;

135 }

136

137 header {

138 height: $headerHeight;

139 position: relative;

140 z-index: 1001;

141 font-size: 14px;

142

143 h1, nav, nav > ul, nav > ul > li {

144 display: inline-block;

145 }

146

147 > * {

148 height: 100%;

149 padding: $lineheight/2;

150 }

151

152 h1, nav.primary {

153 float: left;

154 }

155

156 a, a:hover {

157 text-decoration: none;

158 }

159

160 img.logo {

161 width: 30px;

162 height: 30px;

163 margin-top: -2px;

164 vertical-align: middle;

165 }

166

167 h1 {

168 font-size: 18px;

169 font-weight: 600;

170 line-height: 1.2;

171 margin: 0;

172 padding-top: 15px;

173

174 a {

175 color: #000;

176 }

177

178 a:hover {

179 color: #000;

180 }

181 }

182

183 .btn {

184 font-size: 14px;

185 }

186 }

187

188

189 nav.primary {

190 .btn-outline-primary {

191 @include button-outline-variant($green, $white);

192 }

193

194 .disabled {

195 .btn-outline-primary {

196 color: $grey;

197 cursor: default;

198

199 .caret {

200 border-top-color: $grey;

201 }

202

203 &:hover {

204 background-color: lighten($green, 30%);

205 }

206 }

207 }

208

209 // Small tweaks to the toggle to stop the primary colour showing through

210 // when the menu is shown

211 .show > .btn-outline-primary.dropdown-toggle {

212 background-color: $green;

213 border-color: $green;

214

215 &:focus {

216 box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);

217 }

218 }

219 }

220

221 nav.secondary {

222 position: absolute;

223 right: 0;

224

225 .nav-link {

226 padding: 0.2rem;

227 color: $darkgrey;

228 }

229

230 > ul li.current a {

231 color: darken($darkgrey, 25%);

232 }

233

234 .login-menu {

235 .btn-outline-secondary {

236 @include button-outline-variant($darkgrey);

237 }

238 }

239

240 .user-menu {

241 .btn-outline-secondary {

242 @include button-outline-variant($darkgrey, $darkgrey, white, $darkgrey);

243 border-color: $grey;

244 &:hover {

245 border-color: $grey;

246 }

247 &:focus {

248 background-color: white;

249 box-shadow: none;

250 }

251 }

252 &.show .btn-outline-secondary {

253 background-color: white;

254 &:focus {

255 box-shadow: none;

256 }

257 }

258 }

259

260 img.user_thumbnail_tiny {

261 border: 0;

262 border-radius: 3px;

263 }

264

265 #inboxanchor {

266 display: inline-block;

267 height: 25px;

268 margin: 3px 0 3px 3px;

269 background-color: lighten($grey, 10%);

270 line-height: 20px;

271 border-radius: 3;

272 }

273

274 .dropdown-menu {

275 .count-number {

276 font-size: 14px;

277 }

278 }

279 }

280

281 nav.primary, nav.secondary {

282 .dropdown-item {

283 &:hover, &:active {

284 background-color: $green;

285 color: white;

286 }

287 }

288 }

289

290 #compact-secondary-nav {

291 display: none;

292 }

293

294 body.compact {

295 #compact-secondary-nav {

296 display: inline-block;

297 }

298 .compact-hide {

299 display: none;

300 }

301 }

302

303 /* Utility for styling notification numbers */

304

305 .count-number {

306 padding: 2px $lineheight/4;

307 border-radius: 2px;

308 background: lighten($green, 30%);

309 margin: 0 2px;

310 font-size: 11px;

311 color: #333;

312 }

313

314 /* Rules for the message shown in place of the map when javascript is disabled */

315

316 #noscript {

317 z-index: 20000000;

318 margin-left: 400px;

319 margin-top: 50px;

320 }

321

322 /* Rules for Leaflet maps */

323

324 .leaflet-control .control-button {

325 display: block;

326 height: 40px;

327 width: 40px;

328 background-color: #333;

329 background-color: rgba(0,0,0,.6);

330 border-radius: 4px 0 0 4px;

331 margin-bottom: 10px;

332 outline: none;

333

334 &:hover {

335 background-color: black;

336 }

337

338 &.disabled,

339 &.leaflet-disabled {

340 background-color: #333;

341 background-color: rgba(0,0,0,.5);

342 cursor: default;

343 }

344

345 &.active {

346 background-color: $vibrant-green;

347 }

348

349 .icon {

350 margin: 10px;

351 }

352 }

353

354 .leaflet-control .zoomin,

355 .control-layers .control-button {

356 margin-bottom: 0px;

357 border-radius: 4px 0 0 0;

358 }

359

360 .leaflet-control .zoomout,

361 .control-key .control-button {

362 margin-bottom: 0;

363 border-radius: 0;

364 }

365

366 .control-locate .control-button,

367 .control-share .control-button {

368 border-radius: 0 0 0 4px;

369 }

370

371 /* Rules for the sidebar and main map area */

372

373 .map-layout {

374 #content {

375 overflow: hidden;

376 position: absolute;

377 top: $headerHeight;

378 bottom: 0;

379 width: 100%;

380 }

381

382 #sidebar, #map {

383 position: relative;

384 height: 100%;

385 overflow-x: hidden;

386 overflow-y: auto;

387 }

388

389 #sidebar {

390 float: left;

391 width: $sidebarWidth;

392 background: #fff;

393

394 #sidebar_loader {

395 display: none;

396 }

397

398 > div {

399 position: relative;

400 float: left;

401 clear: both;

402 width: 100%;

403 }

404

405 h2 {

406 padding: $lineheight $lineheight $lineheight/2;

407 font-size: 1.5rem;

408 }

409

410 h3, h4 {

411 margin-top: $lineheight;

412 margin-bottom: $lineheight/2;

413 font-size: 1.25rem;

414 }

415

416 .close-wrap {

417 cursor: pointer;

418 position: absolute;

419 top: 0;

420 right: 0;

421 width: 60px;

422 height: 60px;

423

424 .icon.close {

425 pointer-events: none;

426 position: absolute;

427 right: 20px;

428 top: 20px;

429 }

430 }

431

432 .icon.close {

433 float: right;

434 cursor: pointer;

435 }

436

437 .flash {

438 padding: 15px;

439

440 picture {

441 margin-right: -25px;

442 }

443

444 div.message {

445 margin-left: 30px;

446 }

447 }

448 }

449

450 .overlay-sidebar #sidebar {

451 position: absolute;

452 z-index: 1000;

453 height: auto;

454 overflow: hidden;

455

456 #banner {

457 display: block;

458 }

459

460 .welcome {

461 display: none;

462

463 &.visible {

464 display: block;

465 }

466 }

467

468 #sidebar_content {

469 display: none;

470 }

471 }

472

473 .welcome {

474 display: none;

475 padding-bottom: 5px;

476

477 p {

478 padding: $lineheight/2 $lineheight $lineheight;

479 font-size: 110%;

480 font-weight: 300;

481 }

482

483 .button {

484 width: 50%;

485 float: left;

486 margin: 0;

487 border-radius: 0;

488 font-weight: normal;

489 padding: .6em;

490

491 &.learn-more {

492 border-right: 1px solid #fff;

493 }

494 }

495 }

496

497 #banner {

498 display: none;

499

500 img {

501 display: block;

502 width: $sidebarWidth;

503 }

504 }

505

506 #map {

507 height: 100%;

508 overflow: hidden;

509

510 &.query-active {

511 cursor: help;

512 }

513

514 &.query-disabled {

515 cursor: not-allowed;

516 }

517

518 .leaflet-marker-draggable {

519 cursor: move;

520 }

521 }

522

523 #map-ui {

524 display: none;

525 position: relative;

526 float: right;

527 width: 250px;

528 height: 100%;

529 background: white;

530 overflow: auto;

531

532 .section {

533 border-bottom: 1px solid $grey;

534 padding: 10px 20px;

535 }

536

537 a.close-button {

538 float: right;

539 padding:5px;

540 font-size:20px;

541 line-height:10px;

542 color:#222;

543 border:1px solid $grey;

544 }

545

546 .tooltip {

547 opacity: 1;

548 border: 1px solid $grey;

549 .tooltip-arrow {

550 border-top-color: $grey;

551 }

552 }

553 }

554 }

555

556 .layers-ui,

557 .share-ui {

558 li:last-child {

559 margin-bottom: 0;

560 }

561 }

562

563 .layers-ui {

564 .base-layers {

565 .leaflet-container {

566 width: 100%;

567 height: 50px;

568 cursor: pointer;

569 }

570

571 li {

572 overflow: hidden;

573 border-radius: 3px;

574 border: 2px solid #fff;

575 margin-bottom: 8px;

576 position: relative;

577 transition: border-color 0.08s ease-in;

578

579 label {

580 position: absolute;

581 top: 0;

582 left: 0;

583 padding: 2px 6px;

584 border-bottom-right-radius: 3px;

585 cursor: pointer;

586 font-weight: 600;

587 font-size: 16px;

588 text-stroke: 2px #fff;

589 background: rgba(255,255,255,.9);

590 z-index: 1000;

591 input[type="radio"] {

592 display: none;

593 }

594 }

595

596 &.active { border-color: darken($green, 10%); }

597 &:hover {

598 border-color: $grey;

599 &.active { border-color: darken($green, 20%); }

600 }

601 }

602 }

603

604 .overlay-layers {

605 p {

606 font-size: 13px;

607 margin-bottom: 8px;

608 }

609 li.disabled { color: $darkgrey; }

610 }

611 }

612

613 .share-ui {

614 .share-tabs {

615 margin-bottom: 10px;

616

617 a {

618 color: #fff;

619 text-decoration: none;

620 background-color: $lightblue;

621 padding: 5px 10px;

622 border-right: 1px solid #fff;

623 }

624

625 a:first-child {

626 border-right: 1px solid #fff;

627 border-radius: 4px 0 0 4px;

628 }

629

630 a:last-child {

631 border-radius: 0 4px 4px 0;

632 }

633

634 a.active {

635 background-color: $blue;

636 }

637 }

638

639 .share-tab {

640 display: none;

641 }

642

643 .share-link {

644 input[type=text],

645 textarea {

646 width: 100%;

647 font-family: monospace;

648 font-size: small;

649 line-height: 1.3;

650 }

651 }

652

653 .share-image {

654 label {

655 margin-right: 10px;

656 }

657 }

658

659 #embed_html {

660 resize: vertical;

661 }

662

663 #mapnik_scale {

664 width: 100px;

665 }

666 }

667

668 .leaflet-top {

669 top: $lineheight/2 !important;

670 .leaflet-control {

671 margin-right: 0px !important;

672 margin-top: 0px !important;

673 }

674 }

675

676 .leaflet-popup-scrolled {

677 padding-right: $lineheight;

678 border-bottom: 0px !important;

679 border-top: 0px !important;

680 }

681

682 .leaflet-popup-content-wrapper {

683 border-radius: 4px !important;

684 }

685

686 /* Rules for attribution text under the main map shown on printouts */

687

688 #attribution {

689 display: none;

690

691 table {

692 width: 100%

693 }

694 }

695

696 .attribution_license,

697 .attribution_project {

698 text-align: left;

699 }

700

701 .attribution_notice {

702 text-align: center;

703 }

704

705 .donate-attr { color: darken($green, 10%) !important; }

706

707 /* Rules for the sidebar */

708

709 .sidebar_heading {

710 position: relative;

711 padding: $lineheight/2 $lineheight;

712 // background: $offwhite;

713 // border-bottom: 1px solid $grey;

714 > .close {

715 float: right;

716 margin-top: 2px;

717 cursor: pointer;

718 }

719 }

720

721 #browse_status {

722 p {

723 padding: $lineheight;

724 }

725

726 input {

727 display: block;

728 margin-left: auto;

729 margin-right: auto;

730 }

731 }

732

733 #sidebar {

734 #sidebar_loader,

735 .search_more {

736 width: 100%;

737 margin: $lineheight auto;

738 }

739

740 .loader,

741 .load_more {

742 text-align: center;

743 margin: auto;

744 width: 40px;

745 display: block;

746 }

747 }

748

749 /* Rules for the search and direction forms */

750

751 header .search_forms,

752 .directions_form {

753 display: none;

754 }

755

756 .search_form,

757 .directions_form {

758 position: relative;

759 padding: $lineheight/2;

760 background-color: $lightgrey;

761

762 .query_wrapper {

763 position: relative;

764 overflow: hidden;

765 border-radius: 2px 0 0 2px;

766 }

767

768 input[type=text] {

769 width: 100%;

770 height: 30px;

771 transition: 300ms linear;

772 }

773

774 input[type=text].overflow {

775 border-right: none;

776 border-radius: 3px 0px 0px 3px;

777 }

778

779 input:focus {

780 outline: none;

781 box-shadow: 0px 0px 7px $vibrant-green;

782 }

783

784 input[type=submit].float {

785 float: right;

786 width: auto;

787 min-width: 0;

788 border-radius: 0 2px 2px 0;

789 }

790

791 input.error {

792 background-color: rgba($red, 0.4);

793 }

794

795 select {

796 /* this next line is to polyfill the vertical alignment of text within a select element,

797 * which is different between firefox and chrome. */

798 padding: 0.3em 0;

799 }

800

801 .query_options {

802 text-align: right;

803 font-size: 10px;

804 color: $blue;

805 }

806

807 .describe_location {

808 position: absolute;

809 top: 6px;

810 right: 6px;

811 font-size: 10px;

812 color: $blue;

813 }

814

815 .switch_link {

816 float: right;

817 width: auto;

818 min-width: 0;

819 margin-left: 6px;

820 }

821

822 img.button {

823 display: block;

824 width: 20px;

825 height: 20px;

826 }

827

828 span.force_width {

829 width: 100%;

830 padding-right: 25px;

831 display: block;

832 }

833

834 select.routing_engines {

835 min-height: 30px;

836 margin: 0px 0px 5px 25px;

837 }

838

839 input.routing_go {

840 min-width: 100px;

841 float: right;

842 }

843

844 div.header {

845 width: 100%;

846 height: 30px;

847 }

848

849 div.line {

850 width: 100%;

851 margin: 0px 0px 5px 0px;

852 }

853

854 div.loader_copy {

855 display: none;

856

857 img {

858 vertical-align: middle;

859 }

860 }

861

862 a.reverse_directions {

863 cursor: pointer;

864 margin: 0px 0px 5px 25px;

865 }

866 }

867

868 /* Rules for the map key which appears in the popout sidebar */

869

870 #mapkey {

871 .mapkey-table-key img {

872 display: block;

873 margin-left: auto;

874 margin-right: auto;

875 }

876 td {

877 padding: 0 $lineheight/4 $lineheight/4 $lineheight/4;

878 }

879 }

880

881 /* Rules for search sidebar */

882

883 #sidebar .search_results_entry {

884 ul li {

885 cursor: pointer;

886 &.selected { background: $list-highlight; }

887 }

888

889 .search_more .loader {

890 display: none;

891 width: 100%;

892 }

893 }

894

895 .search_results_error {

896 color: #f00;

897 padding: 10px 20px;

898 }

899

900 /* Rules for routing */

901

902 #sidebar_content>table {

903 padding: 5px 20px 10px 15px;

904 width: 100%;

905 border-collapse: separate;

906 border-spacing: 0;

907 }

908

909 div.direction {

910 background-image: image-url('routing-sprite.png');

911 width: 20px;

912 height: 20px;

913 background-repeat: no-repeat;

914 }

915 @for $i from 0 through 25 {

916 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }

917 }

918

919 p#routing_summary {

920 padding: 0 $lineheight $lineheight/4;

921 }

922

923 td.instruction, td.distance {

924 padding-top: $lineheight/5;

925 padding-bottom: $lineheight/5;

926 border-bottom: 1px solid $grey;

927 }

928 td.distance {

929 color: $darkgrey;

930 text-align: right;

931 font-size: x-small;

932 }

933 tr.turn {

934 cursor: pointer;

935 }

936 tr.turn:hover {

937 background: $list-highlight;

938 }

939 .routing_engines, #route_from, #route_to { margin-left: 25px; }

940 .routing_marker { width: 15px; position: absolute; cursor: move; }

941

942 /* Rules for entity history */

943

944 #sidebar_content {

945 .browse_details {

946 position: relative;

947 border-bottom: $keyline;

948 }

949 }

950

951 .browse_status {

952 display: none;

953 }

954

955 /* Rules for the history sidebar */

956

957 #sidebar .changesets {

958 li {

959 cursor: pointer;

960

961 &.selected { background: $list-highlight; }

962 /* color is derived from changeset bbox fillColor in history.js */

963 }

964

965 .comments {

966 float: right;

967 color: $darkgrey;

968 }

969

970 .comments-0 {

971 opacity: 0.5;

972 }

973

974 .changeset_more .loader {

975 display: none;

976 width: 100%;

977 }

978 }

979

980 /* Rules for the browse sidebar */

981

982 #sidebar_content {

983 .browse-section {

984 padding: $lineheight/2 $lineheight;

985 border-bottom: 1px solid $grey;

986

987 h4:first-child {

988 margin-top: 0;

989 word-wrap: break-word;

990 }

991 }

992

993 .browse-section:last-of-type {

994 border-bottom: none;

995 }

996

997 .paginate {

998 float: right;

999 padding: 1px 6px;

1000 border: 1px solid $lightgrey;

1001 border-radius: 3px;

1002 }

1003

1004 .browse-field {

1005 margin-bottom: 10px;

1006

1007 h4 {

1008 padding: 5px 0 5px 10px;

1009 font-size: 12px;

1010 border: 1px solid $grey;

1011 border-radius: 4px 4px 0 0;

1012 background-color: $offwhite;

1013 }

1014

1015 p {

1016 padding: 7px 10px;

1017 font-size: 12px;

1018 background-color: #FFF;

1019 border: 1px solid $grey;

1020 border-top: 0;

1021 border-radius: 0 0 4px 4px;

1022 }

1023 }

1024

1025 .browse-tag-list {

1026 background-color: $offwhite;

1027 border: 1px solid $grey;

1028 border-radius: 3px;

1029 table-layout: fixed;

1030 border-collapse: separate;

1031 border-spacing: 0;

1032

1033 th, td {

1034 border-bottom: 1px solid $grey;

1035 }

1036

1037 tr:last-child th, tr:last-child td {

1038 border-bottom: 0;

1039 }

1040

1041 .browse-tag-k,

1042 .browse-tag-v {

1043 width: 50%;

1044 padding: 6px 10px;

1045 word-wrap: break-word;

1046 white-space: pre-wrap;

1047 }

1048

1049 .browse-tag-k {

1050 font-weight: 500;

1051 background-color: $offwhite;

1052 }

1053

1054 .browse-tag-v {

1055 border-left: 1px solid $grey;

1056 background-color: #fff;

1057 }

1058

1059 .colour-preview-box {

1060 float: right;

1061 width: 14px;

1062 height: 14px;

1063 margin: 4px 0px;

1064 border: 1px solid rgba(0, 0, 0, .1);

1065 // add color via inline css on element: background-color: <tag value>;

1066 }

1067 }

1068

1069 .warning {

1070 margin: 0 0 $lineheight/2 0;

1071 padding: 0 $lineheight/2;

1072 }

1073

1074 .note-comments li, .changeset-comments li {

1075 margin: $lineheight/2 0;

1076

1077 p {

1078 margin: 10px 6px 0 6px;

1079 line-height: 1.5;

1080 }

1081 }

1082

1083 .comments-header {

1084 float: left;

1085 }

1086

1087 .subscribe-buttons {

1088 float: left;

1089 margin: 18px 10px 10px;

1090 min-width: 80px;

1091 }

1092

1093 .subscribe-buttons input {

1094 font-size: 90%;

1095 line-height: 15px;

1096 min-height: 20px;

1097 }

1098

1099 span.action-button:hover {

1100 cursor: pointer;

1101 text-decoration: underline;

1102 }

1103

1104 .note-description {

1105 overflow: hidden;

1106 margin: 0 0 10px 10px;

1107 }

1108

1109 .query-intro p {

1110 padding: $lineheight $lineheight $lineheight/2;

1111 }

1112

1113 .query-results {

1114 display: none;

1115 padding-bottom: $lineheight/2;

1116

1117 h3 {

1118 padding: 0 $lineheight;

1119 }

1120

1121 ul {

1122 li {

1123 &.query-result {

1124 cursor: pointer;

1125 }

1126

1127 &.selected {

1128 background: $list-highlight;

1129 }

1130 }

1131 }

1132 }

1133 }

1134

1135 /* Rules for export sidebar */

1136

1137 .export_form {

1138 padding: $lineheight;

1139

1140 .export_area_inputs,

1141 .export_button {

1142 text-align: center;

1143 }

1144

1145 .export_area_inputs {

1146 margin-bottom: $lineheight/2;

1147 input[type="text"] {

1148 width: 80px;

1149 text-align: center;

1150 margin-bottom: 5px;

1151 }

1152 }

1153

1154 .export_boxy {

1155 background: $lightgrey;

1156 border: 1px solid $grey;

1157 border-radius: 3px;

1158

1159 #maxlat { margin-top: -1px; }

1160 #minlon {

1161 float: left;

1162 /* no-r2 */ margin-left: -1px;

1163 }

1164 #maxlon {

1165 float: right;

1166 /* no-r2 */ margin-right: -1px;

1167 }

1168 #minlat { margin-bottom: 0; }

1169 }

1170

1171 .export_bound {

1172 margin: $lineheight/4;

1173 }

1174

1175 .export_button {

1176 margin-top: $lineheight;

1177 margin-bottom: $lineheight;

1178 }

1179

1180 dl {

1181 padding-left: $lineheight/2;

1182 dd {

1183 margin-left: 0;

1184 margin-bottom: 10px;

1185 }

1186 }

1187 }

1188

1189 /* Rules for the routing sidebar */

1190

1191 #sidebar_content {

1192 #routing_credit {

1193 text-align: center;

1194 padding: 0.5em;

1195 }

1196 }

1197

1198 /* Rules for edit pages */

1199

1200 .site-edit {

1201 #content {

1202 position: absolute;

1203 top: $headerHeight;

1204 bottom: 0;

1205 width: 100%;

1206 }

1207

1208 #map {

1209 height: 100%;

1210 overflow: hidden;

1211 }

1212 }

1213

1214 /* Rules for non-map content pages */

1215

1216 .content-heading {

1217 background: $lightgrey;

1218 }

1219

1220 .content-body {

1221 h1, h2, h3, p, ul, ol {

1222 margin-bottom: $lineheight;

1223 }

1224

1225 h1, h2, h3 {

1226 margin-top: $lineheight/2;

1227 }

1228 }

1229

1230 .content-inner {

1231 position: relative;

1232 max-width: 900px;

1233 margin: auto;

1234 padding: $lineheight;

1235 }

1236

1237 /* Overrides for pages that use new layout conventions */

1238

1239 .users-new,

1240 .users-create,

1241 .users-terms,

1242 .users-confirm {

1243 .content-heading .content-inner {

1244 height: 200px;

1245 }

1246 }

1247

1248 .header-illustration {

1249 background-position: 0 0;

1250 background-repeat: no-repeat;

1251 position: absolute;

1252 height: 200px;

1253 width: 100%;

1254 left: 0;

1255 bottom: 0;

1256

1257 &.new-user-main {

1258 background-image: image-url("sign-up-illustration.png");

1259 }

1260

1261 &.confirm-main {

1262 background-image: image-url("confirm-illustration.png");

1263 }

1264

1265 &.new-user-terms {

1266 background-image: image-url("terms-illustration.png");

1267 }

1268

1269 &.new-user-arm {

1270 height: 110px;

1271 width: 130px;

1272 left: 260px;

1273 top: 160px;

1274 background-image: image-url("sign-up-illustration-arm.png");

1275 z-index: 100;

1276 }

1277 }

1278

1279 [dir=rtl] .header-illustration {

1280 transform: scaleX(-1);

1281 }

1282

1283 #content.maximised {

1284 top: 0;

1285 left: 0;

1286 right: 0;

1287 bottom: 0;

1288 border: 0;

1289 z-index: 2000;

1290 }

1291

1292 /* Rules for small maps in content areas */

1293

1294 .content_map {

1295 position: relative;

1296 width: 45%;

1297 height: 400px;

1298 border: 1px solid $grey;

1299 margin-bottom: $lineheight;

1300 float: right;

1301 }

1302

1303 /* Rules for the trace list shown by the traces tab etc */

1304

1305 #trace_list {

1306 border-width: 0px;

1307 text-align: right;

1308

1309 .trace_summary {

1310 font-size: 12px;

1311 color: gray;

1312 }

1313 }

1314

1315 /* Rules for the new trace form */

1316

1317 #new_trace {

1318 input[type=text] {

1319 width: 50%;

1320 width: calc(100% - 150px);

1321 max-width: 500px;

1322 }

1323 }

1324

1325 /* Rules for the edit trace form */

1326

1327 .edit_trace {

1328 .standard-form-row p {

1329 margin-bottom: 0px;

1330 }

1331

1332 input[type=text] {

1333 width: 50%;

1334 width: calc(100% - 150px);

1335 max-width: 500px;

1336 }

1337 }

1338

1339 /* Rules for the user profile page */

1340

1341 #userinformation {

1342

1343 min-height: 100px;

1344 .userinformation-inner {

1345 float: left;

1346 }

1347 h2 {

1348 margin-top: 0;

1349 }

1350 .user-description {

1351 width: 100%;

1352 clear: both;

1353 }

1354 .deemphasize {

1355 margin: 0;

1356 }

1357 }

1358

1359 .admin-user-info small {

1360 margin-bottom: $lineheight/2;

1361 display: inline;

1362 margin-right: $lineheight;

1363 }

1364

1365 .activity-block {

1366 clear: left;

1367 border-bottom: 1px solid $grey;

1368 padding-bottom: $lineheight;

1369 float: left;

1370 h3 {

1371 margin-bottom: $lineheight/2;

1372 }

1373 }

1374

1375 .contact-activity {

1376 margin-top: $lineheight;

1377 width: 100%;

1378 }

1379

1380 .activity-details p {

1381 margin-left: 70px;

1382 margin-bottom: 0;

1383 }

1384

1385 .users-show {

1386 // Silly exception; remove when user page is redesigned.

1387 .content-inner {

1388 max-width: none;

1389 }

1390 p#no_home_location {

1391 margin: $lineheight;

1392 }

1393 .user_thumbnail {

1394 margin-top: $lineheight/4;

1395 float: left;

1396 }

1397 }

1398

1399 /* Rules for the user map */

1400

1401 .content_map .leaflet-popup-content {

1402 margin: $lineheight/2;

1403 min-height: 50px;

1404 }

1405

1406 /* Rules for user popups on maps */

1407

1408 .user_popup {

1409 min-width: 200px;

1410 p {

1411 padding: 0 0 5px 0;

1412 margin-top: 0 0 0 60px;

1413 font-size: 12px;

1414 }

1415 img.user_thumbnail {

1416 float: left;

1417 margin: 0 $lineheight/2 0 0;

1418 }

1419 }

1420

1421 /* Rules for the user list */

1422

1423 #user_list {

1424 width: 100%;

1425

1426 tr {

1427 vertical-align: middle;

1428 }

1429

1430 p {

1431 margin-top: 0px;

1432 margin-bottom: 0px;

1433 }

1434 }

1435

1436 #user_list_actions {

1437 float: right;

1438 margin-top: $lineheight/2;

1439 }

1440

1441 /* Rules for the diary list page */

1442

1443 .diary_post {

1444 position: relative;

1445 padding-top: $lineheight;

1446 padding-bottom: $lineheight/2;

1447 border-top: 1px solid $grey;

1448

1449 &:first-of-type {

1450 margin-top: $lineheight/2;

1451 }

1452

1453 &.deemphasize {

1454 background-color: #fee;

1455 }

1456

1457 .post_heading {

1458 margin-bottom: $lineheight;

1459

1460 h2 {

1461 margin-top: 0;

1462 margin-bottom: $lineheight/2;

1463 }

1464 }

1465

1466 img.user_thumbnail {

1467 float: left;

1468 }

1469

1470 small.deemphasize {

1471 float: left;

1472 display: block;

1473 }

1474 }

1475

1476 .pagination {

1477 padding-top: $lineheight;

1478 }

1479

1480 /* Rules for the diary entry page */

1481

1482 .diary_entries {

1483 #map {

1484 position: relative;

1485 width: 90%;

1486 height: 400px;

1487 border: 1px solid $grey;

1488 display: none;

1489 margin-bottom: $lineheight;

1490 }

1491 #newcomment {

1492 border-top: 1px solid $grey;

1493 padding-top: $lineheight;

1494 margin-top: $lineheight/2;

1495 }

1496 .comments {

1497 max-width: 740px;

1498 }

1499 .diary-comment {

1500 border-top: 1px dashed $grey;

1501 padding-top: $lineheight/2;

1502 padding-bottom: $lineheight/2;

1503 &:first-child {

1504 margin-top: $lineheight/2;

1505 padding-top: $lineheight;

1506 border-top: 1px solid $grey;

1507 }

1508 &.deemphasize {

1509 background-color: #fee;

1510 }

1511 p {

1512 margin-bottom: $lineheight/2;

1513 }

1514 .comment-heading {

1515 margin-bottom: 0;

1516 margin-top: 0;

1517 }

1518 }

1519 }

1520

1521 .diary_entries-show img.user_thumbnail {

1522 float: left;

1523 }

1524

1525

1526 .diary-subscribe-buttons {

1527 position:relative;

1528 top: -30px;

1529 left: 130px;

1530 }

1531

1532 /* Rules for the log in page */

1533

1534 #login_auth_buttons {

1535 margin-bottom: 0;

1536 }

1537

1538 #login_auth_buttons li {

1539 float: left;

1540 padding: $lineheight/4 $lineheight/2;

1541 }

1542

1543 /* Rules for the account confirmation page */

1544

1545 .users-terms {

1546 .legale {

1547 border: 1px solid $grey;

1548 padding: $lineheight;

1549 margin-bottom: $lineheight;

1550 overflow: auto;

1551 height: 20em;

1552

1553 li {

1554 list-style: inherit;

1555 }

1556

1557 ol ol {

1558 list-style-type: lower-alpha;

1559 }

1560 }

1561

1562 #decline {

1563 background: $lightblue;

1564 &:hover {

1565 background: darken($lightblue, $hovercolor);

1566 }

1567 }

1568 }

1569

1570 /* Rules for the account settings page */

1571

1572 #accountForm .user_map {

1573 position: relative;

1574 width: 500px;

1575 height: 400px;

1576 border: 1px solid $grey;

1577 }

1578

1579 #accountForm .user_image {

1580 margin-bottom: 0;

1581 }

1582

1583 #accountForm #user_image {

1584 margin-left: 20px;

1585 }

1586

1587 #accountForm ul.accountImage-options {

1588 margin-left: 120px;

1589 }

1590

1591 .nohome .location {

1592 display: none;

1593 }

1594

1595 #homerow .message {

1596 display: none;

1597 }

1598

1599 .nohome .message {

1600 display: inline !important;

1601 }

1602

1603 .content_map.settings_map {

1604 width: 50%;

1605 float: none;

1606 }

1607

1608 /* Rules for the oauth settings page */

1609

1610 .oauth_clients .buttons .oauth-edit {

1611 border-radius: 2px 0 0 2px;

1612 }

1613

1614 .oauth_clients .buttons .oauth-delete {

1615 border-radius: 0 2px 2px 0;

1616 }

1617

1618 /* Rules for the oauth authorization page */

1619

1620 .oauth-authorize ul {

1621 list-style: none;

1622 }

1623

1624 /* Rules for messages pages */

1625

1626 .messages {

1627 width: 100%;

1628 border: 1px solid $grey;

1629

1630 input[type="submit"] {

1631 margin: auto;

1632 }

1633 tbody tr {

1634 border-top: 1px solid $grey;

1635 }

1636

1637 .inbox-row {

1638 background: $offwhite;

1639 }

1640

1641 .inbox-row-unread {

1642 background:#CBEEA7;

1643 }

1644

1645 .right {

1646 float: right;

1647 }

1648

1649 tr td,

1650 tr th {

1651 padding: $lineheight/4;

1652 }

1653 p:last-child,

1654 h2:last-child,

1655 h3:last-child,

1656 ol:last-child,

1657 ul:last-child {

1658 margin-bottom:0;

1659 }

1660 tr td {

1661 height: 30px;

1662 border-right: 1px solid $lightgrey;

1663 }

1664 }

1665

1666 .inbox-row .inbox-mark-read {

1667 display: none;

1668 }

1669

1670 .info-line {

1671 margin-bottom: $lineheight;

1672 padding: $lineheight/4 0px 4px 0px;

1673 border-bottom: 1px solid $grey;

1674

1675 form, form div {

1676 display: inline;

1677 }

1678 }

1679

1680 .info-line .user_thumbnail_tiny {

1681 vertical-align: middle;

1682 }

1683

1684 .inbox-sent {

1685 white-space: nowrap;

1686 }

1687

1688 .inbox-mark-unread,

1689 .inbox-mark-read,

1690 .inbox-delete {

1691 width: 1%;

1692 }

1693

1694 .inbox-row-unread .inbox-mark-unread {

1695 display: none;

1696 }

1697

1698 .messages-show .message-buttons {

1699 margin-top: $lineheight;

1700 margin-bottom: $lineheight * 1.5;

1701 padding-top: $lineheight;

1702 border-top: 1px solid $lightgrey;

1703 }

1704

1705 .messages-show .buttons .mark-unread-button {

1706 border-radius: 0;

1707 }

1708

1709 /* Rules for "flash" notice boxes shown at the top of the content area */

1710

1711 .flash {

1712 padding: $lineheight;

1713

1714 &.error {

1715 background-color: #ff7070;

1716 }

1717

1718 &.warning {

1719 background-color: #ffe0cc;

1720 }

1721

1722 &.notice {

1723 background-color: #CBEEA7;

1724 }

1725

1726 div.message {

1727 display: inline-block;

1728 margin-left: $lineheight / 2;

1729 vertical-align: middle;

1730

1731 p {

1732 margin-top: $lineheight * 0.5;

1733 margin-bottom: $lineheight * 0.5;

1734

1735 &:first-child {

1736 margin-top: 0px;

1737 }

1738

1739 &:last-child {

1740 margin-bottom: 0px;

1741 }

1742 }

1743 }

1744 }

1745

1746 /* Rules for highlighting fields with rails validation errors */

1747

1748 .formError {

1749 display: inline-block;

1750 padding: 5px 10px;

1751 margin-top: 5px;

1752 border-radius: 4px;

1753 font-size: 12px;

1754 color: #fff;

1755 background-color: #ff7070;

1756 }

1757

1758 /* Rules for rails validation error boxes */

1759

1760 #errorExplanation {

1761 width: 400px;

1762 border: 2px solid #ff7070;

1763 padding: 0 $lineheight/2;

1764 margin-bottom: $lineheight;

1765 background-color: #f0f0f0;

1766

1767 h2 {

1768 margin: 0 -10px 10px -10px;

1769 padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;

1770 font-weight: bold;

1771 font-size: 12px;

1772 background-color: #c00;

1773 color: #fff;

1774 text-align: left;

1775 }

1776

1777 p {

1778 color: #333;

1779 margin-bottom: 0px;

1780 padding: $lineheight/4;

1781 }

1782 }

1783

1784 /* Rules for forms */

1785

1786 .standard-form {

1787 fieldset {

1788 margin-bottom: $lineheight;

1789 }

1790 label.standard-label {

1791 display: block;

1792 margin-bottom: $lineheight/4;

1793 font-size: $typeheight;

1794 font-weight: bold;

1795 line-height: 1.5;

1796 }

1797 label.standard-label.secondary {

1798 display: inline-block;

1799 font-weight: normal;

1800 }

1801 .form-help {

1802 font-weight: normal;

1803 }

1804 .form-column {

1805 float: left;

1806 margin-right: 20px;

1807 }

1808 .form-divider {

1809 margin-top: $lineheight;

1810 padding-top: $lineheight;

1811 border-top: 1px solid $lightgrey;

1812 }

1813 .horizontal-list .standard-form-row {

1814 float: left;

1815 padding-right: 10px;

1816 }

1817 .standard-form-row {

1818 margin-bottom: $lineheight/2;

1819 }

1820 .form-list {

1821 margin-bottom: 0;

1822 }

1823 .form-list li {

1824 margin-bottom: 5px;

1825 list-style-type: none;

1826 }

1827 input[type="checkbox"],

1828 input[type="radio"] {

1829 float: left;

1830 margin-top: 5px;

1831 }

1832 }

1833

1834 #remember_me_openid {

1835 display: block;

1836 }

1837

1838 select {

1839 padding: 2px;

1840 }

1841

1842 input[type="checkbox"],

1843 input[type="radio"] {

1844 margin-right: 5px;

1845 }

1846

1847 input[type="text"],

1848 input[type="email"],

1849 input[type="url"],

1850 input[type="password"],

1851 textarea {

1852 color: #222;

1853 background-color: #fff;

1854 border: 1px solid $grey;

1855 border-radius: 3px;

1856 padding: 2px 5px;

1857 margin: 0;

1858 width: 200px;

1859

1860 &.field_with_errors {

1861 border: 2px solid #ff7070;

1862 }

1863 }

1864

1865 textarea {

1866 padding: 5px;

1867 width: 100%;

1868 min-height: 50px;

1869 resize: vertical;

1870 }

1871

1872 /* Rules for user images */

1873

1874 img.user_image {

1875 max-width: 100px;

1876 max-height: 100px;

1877 border: 1px solid $grey;

1878 margin-bottom: $lineheight;

1879 float: left;

1880 margin-right: $lineheight;

1881 }

1882

1883 img.user_thumbnail {

1884 max-width: 50px;

1885 max-height: 50px;

1886 border: 1px solid $grey;

1887 margin-right: $lineheight;

1888 }

1889

1890 img.user_thumbnail_tiny {

1891 width: auto;

1892 height: auto;

1893 max-width: 25px;

1894 max-height: 25px;

1895 border: 1px solid $grey;

1896 }

1897

1898 /* Rules for geo microformats */

1899

1900 abbr.geo {

1901 border-bottom: none;

1902 }

1903

1904 /* General styles for action lists / subnavs / pager navs */

1905

1906 ul.secondary-actions {

1907 font-style: normal;

1908 margin-bottom: 0;

1909 margin-left: 0;

1910 padding: 0;

1911 &.pager {

1912 display: inline-block;

1913 margin-right: 60px;

1914 }

1915 > li {

1916 display: block;

1917 float: left;

1918 list-style: none;

1919 border-left: 1px solid $grey;

1920 padding-left: $lineheight/2;

1921 margin-right: $lineheight/2;

1922 &:first-child {

1923 border-left: 0;

1924 padding-left: 0;

1925 }

1926 &:last-child {

1927 margin-right: 0px;

1928 }

1929 }

1930 }

1931

1932 div.secondary-actions {

1933 padding: 10px;

1934 text-align: center;

1935 }

1936

1937 /* Utility for managing inner content areas */

1938

1939 .inner22 { padding: $lineheight;}

1940

1941 .inner12 { padding: $lineheight/2 $lineheight;}

1942

1943 .inner11 { padding: $lineheight/2;}

1944

1945 .inner20 { padding: $lineheight 0;}

1946

1947 .inner02 { padding: 0 $lineheight;}

1948

1949 /* Utility for general button styles */

1950

1951 input[type="button"],

1952 input[type="submit"],

1953 input[type="reset"],

1954 a.button {

1955 cursor: pointer;

1956 border: 0;

1957 display: inline-block;

1958 padding: $lineheight/4 $lineheight/2;

1959 min-height: 20px + $lineheight/2;

1960 min-width: 120px;

1961 margin: 0 0 $lineheight/2 0;

1962 color: white;

1963 background: $blue;

1964 text-align: center;

1965 border-radius: 2px;

1966 &:hover {

1967 background: darken($blue, $hovercolor);

1968 text-decoration: none;

1969 }

1970 &.deemphasize {

1971 background: $lightblue;

1972 &:hover {

1973 background: darken($lightblue, $hovercolor);

1974 }

1975 }

1976 &:disabled {

1977 background: $lightgrey;

1978 &:hover {

1979 background: $lightgrey;

1980 }

1981 }

1982 &:last-child {

1983 margin-bottom: 0;

1984 }

1985 }

1986

1987 input[type="button"],

1988 input[type="submit"],

1989 input[type="reset"] {

1990 line-height: normal;

1991 }

1992

1993 a.button {

1994 line-height: 20px;

1995 }

1996

1997 .buttons {

1998 min-width: 200px;

1999 input[type="submit"],

2000 input[type="button"],

2001 input[type="reset"],

2002 .button,

2003 .button_to {

2004 box-sizing: border-box;

2005 float: left;

2006 border-radius: 0;

2007 margin:0;

2008 min-width: 75px;

2009 max-width: 180px;

2010 border-right:1px solid white;

2011 text-overflow: ellipsis;

2012 white-space: nowrap;

2013 overflow: hidden;

2014 }

2015 input:first-child,

2016 .button:first-child,

2017 .button_to:first-child {

2018 border-radius:2px 0 0 2px;

2019 }

2020 input:last-child,

2021 .button:last-child,

2022 .button_to:last-child {

2023 border-radius:0 2px 2px 0;

2024 border-right-width: 0;

2025 }

2026 input:only-child,

2027 .button:only-child,

2028 .button_to:only-child,

2029 *[value="Hide"] + input:last-child,

2030 *[value="Hide"] + .button:last-child,

2031 *[value="Hide"] + .button_to:last-child {

2032 border-radius:2px;

2033 border-right-width: 0;

2034 }

2035 /* if a 3-button set has a hidden middle button */

2036 *[value="Hide"] + input:nth-child(3),

2037 *[value="Hide"] + .button:nth-child(3),

2038 *[value="Hide"] + .button_to:nth-child(3) {

2039 border-radius:0 2px 2px 0;

2040 border-right-width: 0;

2041 }

2042 /* if a 3-button set starts with a hidden button */

2043 *[value="Hide"] + input:nth-child(2):not(:last-child),

2044 *[value="Hide"] + .button:nth-child(2):not(:last-child),

2045 *[value="Hide"] + .button_to:nth-child(2):not(:last-child) {

2046 border-radius:2px 0 0 2px;

2047 border-right-width: 1px;

2048 }

2049 }

2050

2051 /* Customise the background colour of striped tables */

2052

2053 .table-striped > tbody > tr:nth-child(2n+1) > td,

2054 .table-striped > tbody > tr:nth-child(2n+1) > th {

2055 background-color: $offwhite;

2056 }

2057

2058 /* Rules for OpenID logo */

2059

2060 .openid_logo {

2061 vertical-align: text-bottom;

2062 border: 0;

2063 }

2064

2065 /* Rules for rich text */

2066

2067 .richtext,

2068 .prose {

2069 code {

2070 font-size: 13px;

2071 background: $lightgrey;

2072 padding: 2px 3px;

2073 }

2074

2075 pre {

2076 font-size: 13px;

2077 background: $lightgrey;

2078 padding: 2px 3px;

2079 white-space: pre-wrap;

2080

2081 code {

2082 padding: 0;

2083 }

2084 }

2085

2086 img {

2087 padding: $lineheight;

2088 background-color: $offwhite;

2089 display: block;

2090 max-width: 100%;

2091 margin: auto;

2092 }

2093

2094 blockquote {

2095 border-left: $lineheight solid $offwhite;

2096 padding-left: $lineheight;

2097 margin: 0;

2098 color: $darkgrey;

2099 }

2100 }

2101

2102 .diary_post .richtext {

2103 margin-top: $lineheight;

2104 }

2105

2106 .comments .richtext {

2107 margin-left: 70px;

2108 margin-top: 0;

2109 }

2110

2111 /* Rules for rich text editors */

2112

2113 input.richtext_title[type="text"] {

2114 width: 50%;

2115 width: calc(100% - 235px);

2116

2117 @media only screen and (max-width:768px) {

2118 width: 100%;

2119 }

2120 }

2121

2122 .richtext_container {

2123 margin-bottom: $lineheight;

2124

2125 .richtext_content {

2126 width: 50%;

2127 width: calc(100% - 235px);

2128 display: inline-block;

2129 vertical-align: top;

2130

2131 @media only screen and (max-width:768px) {

2132 width: 100%;

2133 }

2134

2135 .richtext_preview {

2136 display: inline-block;

2137 padding: $lineheight;

2138 background-color: $offwhite;

2139 overflow-x: auto;

2140

2141 &.loading {

2142 background-image: image-url("loading.gif");

2143 background-repeat: no-repeat;

2144 background-position: center;

2145 }

2146

2147 > :first-child {

2148 margin-top: 0px;

2149 }

2150 }

2151 }

2152

2153 .richtext_help {

2154 display: inline-block;

2155 vertical-align: top;

2156 margin-left: 15px;

2157 background-color: $offwhite;

2158 padding: $lineheight/2;

2159 width: 220px;

2160

2161 ul {

2162 margin-bottom: 0;

2163 }

2164

2165 h4.heading, li {

2166 border-bottom: 1px solid $grey;

2167 margin-bottom: $lineheight/4;

2168 padding-bottom: $lineheight/4;

2169 }

2170

2171 li h4, li span, li p {

2172 display: inline-block;

2173 vertical-align: top;

2174 font-size: 11px;

2175 }

2176

2177 li h4 {

2178 width: 40%;

2179 margin: 0;

2180 }

2181

2182 li span, li p {

2183 width: 50%;

2184 margin-left: $lineheight/2;

2185 margin-bottom: $lineheight/4;

2186 white-space: nowrap;

2187 }

2188 }

2189 }

2190

2191 /* Rules for the user notes list */

2192

2193 .note_list {

2194 tr.creator {

2195 background-color: $lightgrey;

2196 }

2197

2198 td {

2199 padding: 3px;

2200 }

2201

2202 p {

2203 margin-bottom: 0px;

2204 }

2205 }

2206

2207 /* Rules for the iD editor */

2208

2209 .id-embed {

2210 width: 100%;

2211 height: 100%;

2212 }

2213

2214 /* Rules for the "Welcome" page */

2215 .site-welcome, .site-fixthemap {

2216 .center {

2217 text-align: center;

2218 .sprite {

2219 float: none;

2220 margin: auto;

2221 }

2222 }

2223

2224 .sprite {

2225 background-image: image-url("welcome-sprite.png");

2226 background-size: 500px 250px;

2227 display: block;

2228 float: left;

2229 }

2230

2231 .icon-list {

2232 padding-bottom: 20px;

2233 div {

2234 margin-bottom: 10px;

2235 p {

2236 padding-top: 10px;

2237 }

2238 }

2239 }

2240 .sprite.small {

2241 width: 50px;

2242 height: 50px;

2243 }

2244

2245 .sprite.x {

2246 /* no-r2 */ background-position: -50px 0;

2247 }

2248

2249 .sprite.term {

2250 margin-right: 10px;

2251 vertical-align: middle;

2252 }

2253

2254 .sprite.node {

2255 /* no-r2 */ background-position: -100px 0;

2256 }

2257

2258 .sprite.way {

2259 /* no-r2 */ background-position: -150px 0;

2260 }

2261

2262 .sprite.tag {

2263 /* no-r2 */ background-position: -200px 0;

2264 }

2265

2266 .sprite.editor {

2267 /* no-r2 */ background-position: -250px 0;

2268 }

2269

2270 .sprite.question {

2271 /* no-r2 */ background-position: -300px 0;

2272 }

2273

2274 .sprite.rules {

2275 /* no-r2 */ background-position: -350px 0;

2276 }

2277

2278 .start-mapping {

2279 margin: auto;

2280 cursor: pointer;

2281 border: none;

2282 padding: 20px 40px;

2283 font-size: 30px;

2284 text-decoration: none;

2285 }

2286

2287 .icon.note {

2288 background-color: #333;

2289 border-radius: 4px;

2290 }

2291 }

2292

2293 .site-about #content {

2294 background-color: $lightgrey;

2295 background-position: 50% 50%;

2296 background-repeat: no-repeat;

2297 background-size: cover;

2298 background-attachment: fixed;

2299

2300

2301 .content-inner {

2302 position: relative;

2303 color: #333;

2304 min-width: 320px;

2305 max-width: 640px;

2306 }

2307

2308 .text {

2309 background: white;

2310 padding: 40px;

2311 }

2312

2313 .attr {

2314 position: relative;

2315 padding: 170px 40px 20px;

2316 background: #333;

2317 background: rgba(0, 0, 0, .8);

2318 margin-bottom: 0;

2319 margin-top: -20px;

2320

2321 h1 {

2322 display: block;

2323 color: white;

2324 font-weight: 300;

2325 font-size: 34px;

2326 span {

2327 color: $vibrant-green;

2328 }

2329 }

2330

2331 .user-image {

2332 position: absolute;

2333 top: 0px;

2334 right: 240px;

2335 left: 0px;

2336 height: 150px;

2337 background-position: 0 50%;

2338 background-repeat: no-repeat;

2339 background-image: image-url('about/osm.png');

2340 background-size: cover;

2341 background-color: $vibrant-green;

2342 }

2343

2344 .byosm {

2345 position: absolute;

2346 top: 0px;

2347 right: 0px;

2348 z-index: 1;

2349 width: 240px;

2350 height: 150px;

2351 padding: 20px 20px 20px 40px;

2352 font: 500 20px/24px Helvetica, Arial, sans-serif;

2353 white-space: nowrap;

2354 color: #fff;

2355 background: $vibrant-green;

2356 }

2357

2358 .byosm span {

2359 display: inline-block;

2360 width: 20px;

2361 margin-left: -20px;

2362 }

2363 }

2364

2365 .icon {

2366 width: 30px;

2367 height: 30px;

2368 margin-right: 10px;

2369 vertical-align: middle;

2370 background: 40px 40px image-url('about/sprite.png') no-repeat;

2371

2372 &.local {

2373 /* no-r2 */

2374 background-position: 0px 0px;

2375 }

2376 &.community {

2377 /* no-r2 */

2378 background-position: 0px -40px;

2379 }

2380 &.open {

2381 /* no-r2 */

2382 background-position: 0px -80px;

2383 }

2384 &.partners {

2385 /* no-r2 */

2386 background-position: 0px -120px;

2387 }

2388 &.infringement {

2389 /* no-r2 */

2390 background-position: 0px -160px;

2391 }

2392 &.legal {

2393 /* no-r2 */

2394 background-position: -45px -160px;

2395 }

2396 }

2397 }

2398

2399 @import 'browse';

2400

2401 @media only screen and (max-width:960px) {

2402 .header-illustration.new-user-arm {

2403 display: none;

2404 }

2405 }

2406

2407 .read-reports {

2408 background: $lightgrey;

2409 opacity: 0.7;

2410 }

2411

2412 .issues-list {

2413 td:nth-child(2) {

2414 white-space: nowrap;

2415 }

2416 }