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

1 @import "parameters";

2 @import "bootstrap-custom";

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

6 /* Minimal CSS reset */

8 html, body, ul, ol, li, form, fieldset, legend, input {

9 margin: 0;

10 padding: 0;

11 border: 0;

12 }

14 fieldset,img { border: 0; }

16 legend { color: #000; }

18 sup {

19 vertical-align: super;

20 font-size: smaller;

21 }

23 sub {

24 vertical-align: sub;

25 font-size: smaller;

26 }

28 table {

29 border-collapse: collapse;

30 border-spacing: 0;

31 }

33 li { list-style: none; }

35 input,

36 select,

37 textarea,

38 body { font: #{$typeheight}/#{$lineheight} "Helvetica Neue",Arial,sans-serif; }

40 abbr, acronym {

41 text-decoration: underline dotted;

42 cursor: help;

43 }

45 strong {

46 font-weight: bold;

47 }

49 /* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */

51 .clearfix:before,

52 .clearfix:after {

53 content: " ";

54 display: table;

55 }

57 .clearfix:after {

58 clear: both;

59 }

61 /* Basic grid */

63 .col0 { float:left; width:04.1666%; }

64 .col1 { float:left; width:08.3333%; }

65 .col2 { float:left; width:16.6666%; }

66 .col3 { float:left; width:25.0000%; }

67 .col4 { float:left; width:33.3333%; }

68 .col5 { float:left; width:41.6666%; }

69 .col6 { float:left; width:50.0000%; }

70 .col7 { float:left; width:58.3333%; }

71 .col8 { float:left; width:66.6666%; }

72 .col9 { float:left; width:75.0000%; }

73 .col10 { float:left; width:83.3333%; }

74 .col11 { float:left; width:91.6666%; }

75 .col12 { width:100%; }

77 .margin0 { margin-left:04.1666%; }

78 .margin1 { margin-left:08.3333%; }

79 .margin2 { margin-left:16.6666%; }

80 .margin3 { margin-left:25.0000%; }

81 .margin4 { margin-left:33.3333%; }

82 .margin5 { margin-left:41.6666%; }

83 .margin6 { margin-left:50.0000%; }

84 .margin7 { margin-left:58.3333%; }

85 .margin8 { margin-left:66.6666%; }

86 .margin9 { margin-left:75.0000%; }

87 .margin10 { margin-left:83.3333%; }

88 .margin11 { margin-left:91.6666%; }

89 .margin12 { margin-left:100.0000%; }

91 .fillL { background-color: white; }

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

95 * {

96 box-sizing: border-box;

97 }

99 body {

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

101 font-size: $typeheight;

102 line-height: 1.6666;

103 color: #222;

104 background-color: #fff;

105 margin: 0px;

106 padding: 0px;

107 text-align: left;

108 height: 100%;

109 }

110

111 p > img {

112 width: auto;

113 max-width: 100%;

114 }

115

116 small, aside {

117 font-size: 12px;

118 }

119

120 #container { position: relative; }

121

122 .column-1 {

123 width: 50%;

124 margin: 0 0 $lineheight/2 0;

125 }

126

127 .small_icon {

128 vertical-align: middle;

129 margin-right: $lineheight/4;

130 }

131

132 .red { color: $red; }

133

134 .piwik { border: 0; }

135

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

137

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

139

140 /* Rules for icons */

141

142 .icon {

143 display: inline-block;

144 vertical-align: top;

145 width: 20px;

146 height: 20px;

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

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

149 text-indent: -9999px;

150 overflow: hidden;

151 }

152

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

171

172 /* Rules for links */

173

174 a {

175 color: #24d;

176 text-decoration: none;

177 -webkit-appearance: none;

178 outline: 0;

179 &:hover {

180 text-decoration: underline;

181 }

182 }

183

184 /* Rules for horizontal lines */

185

186 hr {

187 border: none;

188 background-color: $grey;

189 color: $grey;

190 height: 1px;

191 }

192

193 /* General styles for tables */

194

195 table {

196 width: 100%;

197 margin-bottom: $lineheight;

198 th, td {

199 text-align: left;

200 padding: $lineheight/4;

201 line-height: $lineheight;

202 }

203 th {

204 font-weight: 600;

205 vertical-align: top;

206 }

207 td {

208 vertical-align: middle;

209 }

210 }

211

212 /* Utility for de-emphasizing content */

213

214 .deemphasize {

215 color: $darkgrey;

216 a {

217 color: $blue;

218 }

219 }

220

221 /* Rules for the header */

222

223 #menu-icon {

224 display: none !important;

225 float: right;

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

227 background-size: 30px 30px;

228 display: block;

229 width: 30px;

230 height: 30px;

231 margin: 14px 10px 0 0;

232 opacity: 0.6;

233 }

234

235 header {

236 height: $headerHeight;

237 position: relative;

238 z-index: 1001;

239 font-size: 14px;

240

241 h1, nav, nav > ul, nav > ul > li, .dropdown {

242 display: inline-block;

243 }

244

245 > * {

246 height: 100%;

247 padding: $lineheight/2;

248 }

249

250 h1, nav.primary {

251 float: left;

252 }

253

254 a, a:hover {

255 text-decoration: none;

256 }

257

258 img.logo {

259 width: 30px;

260 height: 30px;

261 margin-top: -2px;

262 vertical-align: middle;

263 }

264

265 h1 {

266 font-size: 18px;

267 font-weight: 600;

268 line-height: 1.2;

269 margin: 0;

270 padding-top: 15px;

271

272 a {

273 color: #000;

274 }

275

276 a:hover {

277 color: #000;

278 }

279 }

280 }

281

282 nav.primary {

283 > ul {

284 $border: 1px solid $green;

285

286 border: $border;

287 border-radius: $border-radius;

288

289 > li {

290 border-right: $border;

291 float: left;

292 &:last-child {

293 border-right: 0;

294 }

295 > a:hover { background: lighten($green, 30%); }

296 &.current > a:hover { background: $green; }

297 &.disabled > a:hover { background: lighten($green, 38%); }

298 &.dropdown {

299 > a.tab { border-right: 1px solid lighten($green, 30%); }

300 &.current > a.tab { border-right: 1px solid lighten($green, 10%); }

301 }

302 }

303 }

304

305 a.tab,

306 .dropdown-toggle {

307 display: inline-block;

308 font-weight: 500;

309 color: $green;

310 padding: 5px 15px;

311 }

312

313 .dropdown-toggle {

314 padding: 5px 6px;

315 }

316

317 .caret {

318 border-top-color: $green;

319 margin-top: 10px;

320 }

321

322 .disabled a {

323 color: $grey;

324 cursor: default;

325

326 .caret {

327 border-top-color: $grey;

328 }

329 }

330

331 > ul li.current {

332 background-color: $green;

333

334 .tab {

335 color: #fff;

336 }

337

338 .caret {

339 border-top-color: #fff;

340 }

341 }

342 }

343

344 nav.secondary {

345 position: absolute;

346 right: 0;

347

348 > ul {

349 vertical-align: middle;

350 a, .dropdown-toggle {

351 display: inline-block;

352 text-decoration: none;

353 color: $darkgrey;

354 padding: 5px;

355

356 &:hover { color: darken($darkgrey, 25%); }

357 }

358 }

359

360 > ul li.current a {

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

362 }

363

364 .user-menu {

365 $border: 1px solid $grey;

366 border: $border;

367 border-radius: $border-radius;

368 margin-left: 10px;

369

370 > li {

371 border-right: $border;

372 float: left;

373 &:last-child {

374 border-right: 0;

375

376 > a {

377 border-radius: 0 $border-radius $border-radius 0;

378 }

379 }

380 &:first-child > a { border-radius: $border-radius 0 0 $border-radius; }

381 &:hover a { background: lighten($darkgrey, 30%); }

382 }

383

384 a {

385 padding: 5px 15px;

386

387 }

388

389 &.logged-in > a {

390 padding: 0;

391 > .user-button {

392 line-height: 1.8;

393 padding: 5px 10px 3px 6px;

394 display: inline-block;

395 color: $darkgrey;

396 }

397 &:hover > .user-button { color: darken($darkgrey, 5%); }

398 }

399 }

400

401 .caret {

402 border-top-color: $grey;

403 margin-top: 9px;

404 }

405

406 img.user_thumbnail_tiny {

407 border: 0;

408 vertical-align: top;

409 margin-top: 0px;

410 margin: 4px 0 0 4px;

411 border-radius: 2px;

412 }

413

414 #inboxanchor {

415 display: inline-block;

416 vertical-align: top;

417 height: 25px;

418 margin: 3px 0 3px 3px;

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

420 line-height: 20px;

421 border-radius: 2;

422 }

423

424 .dropdown-menu {

425 left: auto;

426 right: -1px;

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

428

429 .count-number {

430 float: right;

431 padding: 0 5px;

432 margin: 0;

433 }

434 }

435 }

436

437 #compact-secondary-nav {

438 display: none;

439 ul li a {

440 width: 100%;

441 color: #333;

442 &:hover { color: #fff; }

443 }

444 }

445

446 body.compact {

447 #compact-secondary-nav {

448 display: inline-block;

449 }

450 .compact-hide {

451 display: none;

452 }

453 }

454

455 /* Utility for styling notification numbers */

456

457 .count-number {

458 padding: 2px $lineheight/4;

459 border-radius: 2px;

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

461 margin: 0 2px;

462 font-size: 11px;

463 color: #333;

464 }

465

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

467

468 #noscript {

469 z-index: 20000000;

470 margin-left: 400px;

471 margin-top: 50px;

472 }

473

474 /* Rules for Leaflet maps */

475

476 .leaflet-control .control-button {

477 display: block;

478 height: 40px;

479 width: 40px;

480 background-color: #333;

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

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

483 margin-bottom: 10px;

484 outline: none;

485

486 &:hover {

487 background-color: black;

488 }

489

490 &.disabled,

491 &.leaflet-disabled {

492 background-color: #333;

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

494 cursor: default;

495 }

496

497 &.active {

498 background-color: $vibrant-green;

499 }

500

501 .icon {

502 margin: 10px;

503 }

504 }

505

506 .leaflet-control .zoomin,

507 .control-layers .control-button {

508 margin-bottom: 0px;

509 border-radius: 4px 0 0 0;

510 }

511

512 .leaflet-control .zoomout,

513 .control-key .control-button {

514 margin-bottom: 0;

515 border-radius: 0;

516 }

517

518 .control-locate .control-button,

519 .control-share .control-button {

520 border-radius: 0 0 0 4px;

521 }

522

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

524

525 .map-layout {

526 #content {

527 overflow: hidden;

528 position: absolute;

529 top: $headerHeight;

530 bottom: 0;

531 width: 100%;

532 }

533

534 #sidebar, #map {

535 position: relative;

536 height: 100%;

537 overflow-x: hidden;

538 overflow-y: auto;

539 }

540

541 #sidebar {

542 float: left;

543 width: $sidebarWidth;

544 background: #fff;

545

546 #sidebar_loader {

547 display: none;

548 }

549

550 > div {

551 position: relative;

552 float: left;

553 clear: both;

554 width: 100%;

555 }

556

557 h2 {

558 padding: $lineheight $lineheight $lineheight/2;

559 font-size: 1.5rem;

560 }

561

562 h3, h4 {

563 margin-top: $lineheight;

564 margin-bottom: $lineheight/2;

565 font-size: 1.25rem;

566 }

567

568 .close-wrap {

569 cursor: pointer;

570 position: absolute;

571 top: 0;

572 right: 0;

573 width: 60px;

574 height: 60px;

575

576 .icon.close {

577 pointer-events: none;

578 position: absolute;

579 right: 20px;

580 top: 20px;

581 }

582 }

583

584 .icon.close {

585 float: right;

586 cursor: pointer;

587 }

588

589 .flash {

590 padding: 15px;

591

592 picture {

593 margin-right: -25px;

594 }

595

596 div.message {

597 margin-left: 30px;

598 }

599 }

600 }

601

602 .overlay-sidebar #sidebar {

603 position: absolute;

604 z-index: 1000;

605 height: auto;

606 overflow: hidden;

607

608 #banner {

609 display: block;

610 }

611

612 .welcome {

613 display: none;

614

615 &.visible {

616 display: block;

617 }

618 }

619

620 #sidebar_content {

621 display: none;

622 }

623 }

624

625 .welcome {

626 display: none;

627 padding-bottom: 5px;

628

629 p {

630 padding: $lineheight/2 $lineheight $lineheight;

631 font-size: 110%;

632 font-weight: 300;

633 }

634

635 .button {

636 width: 50%;

637 float: left;

638 margin: 0;

639 border-radius: 0;

640 font-weight: normal;

641 padding: .6em;

642

643 &.learn-more {

644 border-right: 1px solid #fff;

645 }

646 }

647 }

648

649 #banner {

650 display: none;

651

652 img {

653 display: block;

654 width: $sidebarWidth;

655 }

656 }

657

658 #map {

659 height: 100%;

660 overflow: hidden;

661

662 &.query-active {

663 cursor: help;

664 }

665

666 &.query-disabled {

667 cursor: not-allowed;

668 }

669

670 .leaflet-marker-draggable {

671 cursor: move;

672 }

673 }

674

675 #map-ui {

676 display: none;

677 position: relative;

678 float: right;

679 width: 250px;

680 height: 100%;

681 background: white;

682 overflow: auto;

683

684 .section {

685 border-bottom: 1px solid $grey;

686 padding: 10px 20px;

687 }

688

689 a.close-button {

690 float: right;

691 padding:5px;

692 font-size:20px;

693 line-height:10px;

694 color:#222;

695 border:1px solid $grey;

696 }

697

698 .tooltip {

699 opacity: 1;

700 border: 1px solid $grey;

701 .tooltip-arrow {

702 border-top-color: $grey;

703 }

704 }

705 }

706 }

707

708 .layers-ui,

709 .share-ui {

710 li:last-child {

711 margin-bottom: 0;

712 }

713 }

714

715 .layers-ui {

716 .base-layers {

717 .leaflet-container {

718 width: 100%;

719 height: 50px;

720 cursor: pointer;

721 }

722

723 li {

724 overflow: hidden;

725 border-radius: 3px;

726 border: 2px solid #fff;

727 margin-bottom: 8px;

728 position: relative;

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

730

731 label {

732 position: absolute;

733 top: 0;

734 left: 0;

735 padding: 2px 6px;

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

737 cursor: pointer;

738 font-weight: 600;

739 font-size: 16px;

740 text-stroke: 2px #fff;

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

742 z-index: 1000;

743 input[type="radio"] {

744 display: none;

745 }

746 }

747

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

749 &:hover {

750 border-color: $grey;

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

752 }

753 }

754 }

755

756 .overlay-layers {

757 p {

758 font-size: 13px;

759 margin-bottom: 8px;

760 }

761 li.disabled { color: $darkgrey; }

762 }

763 }

764

765 .share-ui {

766 .share-tabs {

767 margin-bottom: 10px;

768

769 a {

770 color: #fff;

771 text-decoration: none;

772 background-color: $lightblue;

773 padding: 5px 10px;

774 border-right: 1px solid #fff;

775 }

776

777 a:first-child {

778 border-right: 1px solid #fff;

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

780 }

781

782 a:last-child {

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

784 }

785

786 a.active {

787 background-color: $blue;

788 }

789 }

790

791 .share-tab {

792 display: none;

793 }

794

795 .share-link {

796 input[type=text],

797 textarea {

798 width: 100%;

799 font-family: monospace;

800 font-size: small;

801 line-height: 1.3;

802 }

803 }

804

805 .share-image {

806 label {

807 margin-right: 10px;

808 }

809 }

810

811 #embed_html {

812 resize: vertical;

813 }

814

815 #mapnik_scale {

816 width: 100px;

817 }

818 }

819

820 .leaflet-top {

821 top: $lineheight/2 !important;

822 .leaflet-control {

823 margin-right: 0px !important;

824 margin-top: 0px !important;

825 }

826 }

827

828 .leaflet-popup-scrolled {

829 padding-right: $lineheight;

830 border-bottom: 0px !important;

831 border-top: 0px !important;

832 }

833

834 .leaflet-popup-content-wrapper {

835 border-radius: 4px !important;

836 }

837

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

839

840 #attribution {

841 display: none;

842

843 table {

844 width: 100%

845 }

846 }

847

848 .attribution_license,

849 .attribution_project {

850 text-align: left;

851 }

852

853 .attribution_notice {

854 text-align: center;

855 }

856

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

858

859 /* Rules for the sidebar */

860

861 .sidebar_heading {

862 position: relative;

863 padding: $lineheight/2 $lineheight;

864 // background: $offwhite;

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

866 > .close {

867 float: right;

868 margin-top: 2px;

869 cursor: pointer;

870 }

871 }

872

873 #browse_status {

874 p {

875 padding: $lineheight;

876 }

877

878 input {

879 display: block;

880 margin-left: auto;

881 margin-right: auto;

882 }

883 }

884

885 #sidebar {

886 #sidebar_loader,

887 .search_more {

888 width: 100%;

889 margin: $lineheight auto;

890 }

891

892 .loader,

893 .load_more {

894 text-align: center;

895 margin: auto;

896 width: 40px;

897 display: block;

898 }

899 }

900

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

902

903 header .search_forms,

904 .directions_form {

905 display: none;

906 }

907

908 .search_form,

909 .directions_form {

910 position: relative;

911 padding: $lineheight/2;

912 background-color: $lightgrey;

913

914 .query_wrapper {

915 position: relative;

916 overflow: hidden;

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

918 }

919

920 input[type=text] {

921 width: 100%;

922 height: 30px;

923 transition: 300ms linear;

924 }

925

926 input[type=text].overflow {

927 border-right: none;

928 }

929

930 input:focus {

931 outline: none;

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

933 }

934

935 input[type=submit].float {

936 float: right;

937 width: auto;

938 min-width: 0;

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

940 }

941

942 input.error {

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

944 }

945

946 select {

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

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

949 padding: 0.3em 0;

950 }

951

952 .query_options {

953 text-align: right;

954 font-size: 10px;

955 color: $blue;

956 }

957

958 .describe_location {

959 position: absolute;

960 top: 6px;

961 right: 6px;

962 font-size: 10px;

963 color: $blue;

964 }

965

966 .switch_link {

967 float: right;

968 width: auto;

969 min-width: 0;

970 margin-left: 6px;

971 }

972

973 img.button {

974 display: block;

975 width: 20px;

976 height: 20px;

977 }

978

979 span.force_width {

980 width: 100%;

981 padding-right: 25px;

982 display: block;

983 }

984

985 select.routing_engines {

986 min-height: 30px;

987 margin: 0px 0px 5px 25px;

988 }

989

990 input.routing_go {

991 min-width: 100px;

992 float: right;

993 }

994

995 div.header {

996 width: 100%;

997 height: 30px;

998 }

999

1000 div.line {

1001 width: 100%;

1002 margin: 0px 0px 5px 0px;

1003 }

1004

1005 div.loader_copy {

1006 display: none;

1007

1008 img {

1009 vertical-align: middle;

1010 }

1011 }

1012

1013 a.reverse_directions {

1014 cursor: pointer;

1015 margin: 0px 0px 5px 25px;

1016 }

1017 }

1018

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

1020

1021 #mapkey {

1022 .mapkey-table-key img {

1023 display: block;

1024 margin-left: auto;

1025 margin-right: auto;

1026 }

1027 td {

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

1029 }

1030 }

1031

1032 /* Rules for search sidebar */

1033

1034 #sidebar .search_results_entry {

1035 ul li {

1036 border-bottom: $keyline;

1037 cursor: pointer;

1038 &:first-child { border-top: $keyline; }

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

1040 }

1041

1042 .search_more .loader {

1043 display: none;

1044 width: 100%;

1045 }

1046 }

1047

1048 .search_results_error {

1049 color: #f00;

1050 padding: 10px 20px;

1051 }

1052

1053 /* Rules for routing */

1054

1055 #sidebar_content>table {

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

1057 width: 100%;

1058 border-collapse: separate;

1059 }

1060

1061 div.direction {

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

1063 width: 20px;

1064 height: 20px;

1065 background-repeat: no-repeat;

1066 }

1067 @for $i from 0 through 25 {

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

1069 }

1070

1071 p#routing_summary {

1072 padding: 0 $lineheight $lineheight/4;

1073 }

1074

1075 td.instruction, td.distance {

1076 padding-top: $lineheight/5;

1077 padding-bottom: $lineheight/5;

1078 border-bottom: 1px solid $grey;

1079 }

1080 td.distance {

1081 color: $darkgrey;

1082 text-align: right;

1083 font-size: x-small;

1084 }

1085 tr.turn {

1086 cursor: pointer;

1087 }

1088 tr.turn:hover {

1089 background: $list-highlight;

1090 }

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

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

1093

1094 /* Rules for entity history */

1095

1096 #sidebar_content {

1097 .browse_details {

1098 position: relative;

1099 border-bottom: $keyline;

1100 }

1101 }

1102

1103 .browse_status {

1104 display: none;

1105 }

1106

1107 /* Rules for the history sidebar */

1108

1109 #sidebar .changesets {

1110 li {

1111 padding: 15px 20px;

1112 border-bottom: 1px solid $grey;

1113 cursor: pointer;

1114

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

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

1117 }

1118

1119 h4 {

1120 margin: 0;

1121 a {

1122 color: #000;

1123 }

1124 }

1125

1126 .comments {

1127 float: right;

1128 color: $darkgrey;

1129 }

1130

1131 .comments-0 {

1132 opacity: 0.5;

1133 }

1134

1135 .changeset_more .loader {

1136 display: none;

1137 width: 100%;

1138 }

1139 }

1140

1141 /* Rules for the browse sidebar */

1142

1143 #sidebar_content {

1144 .browse-section {

1145 padding: $lineheight/2 $lineheight;

1146 border-bottom: 1px solid $grey;

1147

1148 h4:first-child {

1149 margin-top: 0;

1150 word-wrap: break-word;

1151 }

1152 }

1153

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

1155 border-bottom: none;

1156 }

1157

1158 .paginate {

1159 float: right;

1160 padding: 1px 6px;

1161 border: 1px solid $lightgrey;

1162 border-radius: 3px;

1163 }

1164

1165 .paginate ul {

1166 padding-left: 20px;

1167 }

1168

1169 .browse-field {

1170 margin-bottom: 10px;

1171

1172 h4 {

1173 padding: 5px 0 5px 10px;

1174 font-size: 12px;

1175 border: 1px solid $grey;

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

1177 background-color: #F6F6F6;

1178 }

1179

1180 p {

1181 padding: 7px 10px;

1182 font-size: 12px;

1183 background-color: #FFF;

1184 border: 1px solid $grey;

1185 border-top: 0;

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

1187 }

1188 }

1189

1190 .browse-tag-list {

1191 background-color: #F6F6F6;

1192 border: 1px solid $grey;

1193 border-radius: 3px;

1194 font-size: 12px;

1195 table-layout: fixed;

1196 border-collapse: separate;

1197

1198 th, td {

1199 border-bottom: 1px solid $grey;

1200 }

1201

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

1203 border-bottom: 0;

1204 }

1205

1206 .browse-tag-k,

1207 .browse-tag-v {

1208 width: 50%;

1209 padding: 6px 10px;

1210 word-wrap: break-word;

1211 white-space: pre-wrap;

1212 }

1213

1214 .browse-tag-k {

1215 font-weight: 500;

1216 background-color: #F6F6F6;

1217 }

1218

1219 .browse-tag-v {

1220 border-left: 1px solid $grey;

1221 background-color: #fff;

1222 }

1223

1224 .colour-preview-box {

1225 float: right;

1226 width: 12px;

1227 height: 12px;

1228 margin: 4px 0px;

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

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

1231 }

1232 }

1233

1234 .warning {

1235 margin: 0 0 $lineheight/2 0;

1236 padding: 0 $lineheight/2;

1237 }

1238

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

1240 margin: $lineheight/2 0;

1241

1242 p {

1243 margin: 10px 6px 0 6px;

1244 line-height: 1.5;

1245 }

1246 }

1247

1248 .comments-header {

1249 float: left;

1250 }

1251

1252 .subscribe-buttons {

1253 float: left;

1254 margin: 18px 10px 10px;

1255 min-width: 80px;

1256 }

1257

1258 .subscribe-buttons input {

1259 font-size: 90%;

1260 line-height: 15px;

1261 min-height: 20px;

1262 }

1263

1264 span.action-button:hover {

1265 cursor: pointer;

1266 text-decoration: underline;

1267 }

1268

1269 .note-description {

1270 overflow: hidden;

1271 margin: 0 0 10px 10px;

1272 }

1273

1274 .query-intro p {

1275 padding: $lineheight $lineheight $lineheight/2;

1276 }

1277

1278 .query-results {

1279 display: none;

1280

1281 h3 {

1282 padding: $lineheight $lineheight $lineheight/2;

1283 margin: 0;

1284 }

1285

1286 ul {

1287 li {

1288 padding: 15px 20px;

1289 border-bottom: 1px solid $grey;

1290

1291 &.query-result {

1292 cursor: pointer;

1293 }

1294

1295 &.selected {

1296 background: $list-highlight;

1297 }

1298 }

1299 }

1300 }

1301 }

1302

1303 /* Rules for export sidebar */

1304

1305 .export_form {

1306 padding: $lineheight;

1307

1308 .export_area_inputs,

1309 .export_button {

1310 text-align: center;

1311 }

1312

1313 .export_area_inputs {

1314 margin-bottom: $lineheight/2;

1315 input[type="text"] {

1316 width: 80px;

1317 text-align: center;

1318 margin-bottom: 5px;

1319 }

1320 }

1321

1322 .export_boxy {

1323 background: $lightgrey;

1324 border: 1px solid $grey;

1325 border-radius: 3px;

1326

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

1328 #minlon {

1329 float: left;

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

1331 }

1332 #maxlon {

1333 float: right;

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

1335 }

1336 #minlat { margin-bottom: 0; }

1337 }

1338

1339 .export_bound {

1340 margin: $lineheight/4;

1341 }

1342

1343 .export_button {

1344 margin-top: $lineheight;

1345 margin-bottom: $lineheight;

1346 }

1347

1348 dl {

1349 padding-left: $lineheight/2;

1350 dd {

1351 margin-left: 0;

1352 margin-bottom: 10px;

1353 }

1354 }

1355 }

1356

1357 /* Rules for the routing sidebar */

1358

1359 #sidebar_content {

1360 #routing_credit {

1361 text-align: center;

1362 padding: 0.5em;

1363 }

1364 }

1365

1366 /* Rules for edit pages */

1367

1368 .site-edit {

1369 #content {

1370 position: absolute;

1371 top: $headerHeight;

1372 bottom: 0;

1373 width: 100%;

1374 }

1375

1376 #map {

1377 height: 100%;

1378 overflow: hidden;

1379 }

1380 }

1381

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

1383

1384 .content-heading {

1385 background: $lightgrey;

1386 }

1387

1388 .content-body {

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

1390 margin-bottom: $lineheight;

1391 }

1392

1393 h1, h2, h3 {

1394 margin-top: $lineheight/2;

1395 }

1396 }

1397

1398 .content-inner {

1399 position: relative;

1400 max-width: 900px;

1401 margin: auto;

1402 padding: $lineheight;

1403 }

1404

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

1406

1407 .users-new,

1408 .users-create,

1409 .users-terms {

1410 .content-body .content-inner {

1411 padding: 0;

1412

1413 .message {

1414 margin-top: 80px;

1415 padding: 20px;

1416 }

1417 }

1418 }

1419

1420 .users-new,

1421 .users-create,

1422 .users-terms,

1423 .users-confirm {

1424 .content-heading .content-inner {

1425 height: 200px;

1426 }

1427 }

1428

1429 .header-illustration {

1430 background-position: 0 0;

1431 background-repeat: no-repeat;

1432 position: absolute;

1433 height: 200px;

1434 width: 100%;

1435 left: 0;

1436 bottom: 0;

1437

1438 &.new-user-main {

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

1440 }

1441

1442 &.confirm-main {

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

1444 }

1445

1446 &.new-user-terms {

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

1448 }

1449

1450 &.new-user-arm {

1451 height: 110px;

1452 width: 130px;

1453 left: 260px;

1454 top: 160px;

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

1456 z-index: 100;

1457 }

1458 }

1459

1460 [dir=rtl] .header-illustration {

1461 transform: scaleX(-1);

1462 }

1463

1464 #content.maximised {

1465 top: 0;

1466 left: 0;

1467 right: 0;

1468 bottom: 0;

1469 border: 0;

1470 z-index: 2000;

1471 }

1472

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

1474

1475 .content_map {

1476 position: relative;

1477 width: 45%;

1478 height: 400px;

1479 border: 1px solid $grey;

1480 margin-bottom: $lineheight;

1481 float: right;

1482 }

1483

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

1485

1486 #trace_list {

1487 border-width: 0px;

1488 text-align: right;

1489

1490 .trace_summary {

1491 font-size: 12px;

1492 color: gray;

1493 }

1494 }

1495

1496 /* Rules for the new trace form */

1497

1498 #new_trace {

1499 input[type=text] {

1500 width: 50%;

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

1502 max-width: 500px;

1503 }

1504 }

1505

1506 /* Rules for the edit trace form */

1507

1508 .edit_trace {

1509 .form-row p {

1510 margin-bottom: 0px;

1511 }

1512

1513 input[type=text] {

1514 width: 50%;

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

1516 max-width: 500px;

1517 }

1518 }

1519

1520 /* Rules for the user profile page */

1521

1522 #userinformation {

1523

1524 min-height: 100px;

1525 .userinformation-inner {

1526 float: left;

1527 }

1528 h2 {

1529 margin-top: 0;

1530 }

1531 .user-description {

1532 width: 100%;

1533 clear: both;

1534 }

1535 .deemphasize {

1536 margin: 0;

1537 }

1538 }

1539

1540 .admin-user-info small {

1541 margin-bottom: $lineheight/2;

1542 display: inline;

1543 margin-right: $lineheight;

1544 }

1545

1546 .activity-block {

1547 clear: left;

1548 border-bottom: 1px solid $grey;

1549 padding-bottom: $lineheight;

1550 float: left;

1551 h3 {

1552 margin-bottom: $lineheight/2;

1553 }

1554 }

1555

1556 .contact-activity {

1557 margin-top: $lineheight;

1558 width: 100%;

1559 }

1560

1561 .activity-details p {

1562 margin-left: 70px;

1563 margin-bottom: 0;

1564 }

1565

1566 #friends-container .contact-activity ul {

1567 margin-left: 70px;

1568 }

1569

1570 .users-show {

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

1572 .content-inner {

1573 max-width: none;

1574 }

1575 p#no_home_location {

1576 margin: $lineheight;

1577 }

1578 .user_thumbnail {

1579 margin-top: $lineheight/4;

1580 float: left;

1581 }

1582 }

1583

1584 /* Rules for the user map */

1585

1586 .content_map .leaflet-popup-content {

1587 margin: $lineheight/2;

1588 min-height: 50px;

1589 }

1590

1591 /* Rules for user popups on maps */

1592

1593 .user_popup {

1594 min-width: 200px;

1595 p {

1596 padding: 0 0 5px 0;

1597 margin-top: 0 0 0 60px;

1598 font-size: 12px;

1599 }

1600 img.user_thumbnail {

1601 float: left;

1602 margin: 0 $lineheight/2 0 0;

1603 }

1604 }

1605

1606 /* Rules for the user list */

1607

1608 #user_list {

1609 width: 100%;

1610

1611 tr {

1612 vertical-align: middle;

1613 }

1614

1615 p {

1616 margin-top: 0px;

1617 margin-bottom: 0px;

1618 }

1619 }

1620

1621 #user_list_actions {

1622 float: right;

1623 margin-top: $lineheight/2;

1624 }

1625

1626 /* Rules for the diary list page */

1627

1628 .diary_post {

1629 position: relative;

1630 padding-top: $lineheight;

1631 padding-bottom: $lineheight/2;

1632 border-top: 1px solid $grey;

1633

1634 &:first-of-type {

1635 margin-top: $lineheight/2;

1636 }

1637

1638 &.deemphasize {

1639 background-color: #fee;

1640 }

1641

1642 .post_heading {

1643 margin-bottom: $lineheight;

1644

1645 h2 {

1646 margin-top: 0;

1647 margin-bottom: $lineheight/2;

1648 }

1649 }

1650

1651 img.user_thumbnail {

1652 float: left;

1653 }

1654

1655 small.deemphasize {

1656 float: left;

1657 display: block;

1658 }

1659 }

1660

1661 .pagination {

1662 padding-top: $lineheight;

1663 }

1664

1665 /* Rules for the diary entry page */

1666

1667 .diary_entries {

1668 #map {

1669 position: relative;

1670 width: 90%;

1671 height: 400px;

1672 border: 1px solid $grey;

1673 display: none;

1674 margin-bottom: $lineheight;

1675 }

1676 #newcomment {

1677 border-top: 1px solid $grey;

1678 padding-top: $lineheight;

1679 margin-top: $lineheight/2;

1680 }

1681 .comments {

1682 max-width: 740px;

1683 }

1684 .diary-comment {

1685 border-top: 1px dashed $grey;

1686 padding-top: $lineheight/2;

1687 padding-bottom: $lineheight/2;

1688 &:first-child {

1689 margin-top: $lineheight/2;

1690 padding-top: $lineheight;

1691 border-top: 1px solid $grey;

1692 }

1693 &.deemphasize {

1694 background-color: #fee;

1695 }

1696 p {

1697 margin-bottom: $lineheight/2;

1698 }

1699 .comment-heading {

1700 margin-bottom: 0;

1701 margin-top: 0;

1702 }

1703 }

1704 }

1705

1706 .diary_entries-show img.user_thumbnail {

1707 float: left;

1708 }

1709

1710

1711 .diary-subscribe-buttons {

1712 position:relative;

1713 top: -30px;

1714 left: 130px;

1715 }

1716

1717 /* Rules for the log in page */

1718

1719 #login_auth_buttons {

1720 margin-bottom: 0;

1721 }

1722

1723 #login_auth_buttons li {

1724 float: left;

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

1726 }

1727

1728 /* Rules for the account confirmation page */

1729

1730 .users-terms {

1731 .legale {

1732 border: 1px solid $grey;

1733 padding: $lineheight;

1734 margin-bottom: $lineheight;

1735 overflow: auto;

1736 height: 20em;

1737

1738 li {

1739 list-style: inherit;

1740 }

1741

1742 ol ol {

1743 list-style-type: lower-alpha;

1744 }

1745 }

1746

1747 #decline {

1748 background: $lightblue;

1749 &:hover {

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

1751 }

1752 }

1753 }

1754

1755 /* Rules for the account settings page */

1756

1757 #accountForm .user_map {

1758 position: relative;

1759 width: 500px;

1760 height: 400px;

1761 border: 1px solid $grey;

1762 }

1763

1764 #accountForm .user_image {

1765 margin-bottom: 0;

1766 }

1767

1768 #accountForm #user_image {

1769 margin-left: 20px;

1770 }

1771

1772 #accountForm ul.accountImage-options {

1773 margin-left: 120px;

1774 }

1775

1776 .nohome .location {

1777 display: none;

1778 }

1779

1780 #homerow .message {

1781 display: none;

1782 }

1783

1784 .nohome .message {

1785 display: inline !important;

1786 }

1787

1788 .content_map.settings_map {

1789 width: 50%;

1790 float: none;

1791 }

1792

1793 /* Rules for the oauth settings page */

1794

1795 .oauth_clients .buttons .oauth-edit {

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

1797 }

1798

1799 .oauth_clients .buttons .oauth-delete {

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

1801 }

1802

1803 /* Rules for the oauth authorization page */

1804

1805 .oauth-authorize ul {

1806 list-style: none;

1807 }

1808

1809 /* Rules for messages pages */

1810

1811 .messages {

1812 width: 100%;

1813 border: 1px solid $grey;

1814

1815 input[type="submit"] {

1816 margin: auto;

1817 }

1818 tbody tr {

1819 border-top: 1px solid $grey;

1820 }

1821

1822 .inbox-row {

1823 background: $offwhite;

1824 }

1825

1826 .inbox-row-unread {

1827 background:#CBEEA7;

1828 }

1829

1830 .right {

1831 float: right;

1832 }

1833

1834 tr td,

1835 tr th {

1836 padding: $lineheight/4;

1837 }

1838 p:last-child,

1839 h2:last-child,

1840 h3:last-child,

1841 ol:last-child,

1842 ul:last-child {

1843 margin-bottom:0;

1844 }

1845 tr td {

1846 height: 30px;

1847 border-right: 1px solid $lightgrey;

1848 }

1849 }

1850

1851 .inbox-row .inbox-mark-read {

1852 display: none;

1853 }

1854

1855 .info-line {

1856 margin-bottom: $lineheight;

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

1858 border-bottom: 1px solid $grey;

1859

1860 form, form div {

1861 display: inline;

1862 }

1863 }

1864

1865 .info-line .user_thumbnail_tiny {

1866 vertical-align: middle;

1867 }

1868

1869 .inbox-sent {

1870 white-space: nowrap;

1871 }

1872

1873 .inbox-mark-unread,

1874 .inbox-mark-read,

1875 .inbox-delete {

1876 width: 1%;

1877 }

1878

1879 .inbox-row-unread .inbox-mark-unread {

1880 display: none;

1881 }

1882

1883 .messages-show .message-buttons {

1884 margin-top: $lineheight;

1885 margin-bottom: $lineheight * 1.5;

1886 padding-top: $lineheight;

1887 border-top: 1px solid $lightgrey;

1888 }

1889

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

1891 border-radius: 0;

1892 }

1893

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

1895

1896 .flash {

1897 padding: $lineheight;

1898

1899 &.error {

1900 background-color: #ff7070;

1901 }

1902

1903 &.warning {

1904 background-color: #ffe0cc;

1905 }

1906

1907 &.notice {

1908 background-color: #CBEEA7;

1909 }

1910

1911 div.message {

1912 display: inline-block;

1913 margin-left: $lineheight / 2;

1914 vertical-align: middle;

1915

1916 p {

1917 margin-top: $lineheight * 0.5;

1918 margin-bottom: $lineheight * 0.5;

1919

1920 &:first-child {

1921 margin-top: 0px;

1922 }

1923

1924 &:last-child {

1925 margin-bottom: 0px;

1926 }

1927 }

1928 }

1929 }

1930

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

1932

1933 .formError {

1934 display: inline-block;

1935 padding: 5px 10px;

1936 margin-top: 5px;

1937 border-radius: 4px;

1938 font-size: 12px;

1939 color: #fff;

1940 background-color: #ff7070;

1941 }

1942

1943 /* Rules for rails validation error boxes */

1944

1945 #errorExplanation {

1946 width: 400px;

1947 border: 2px solid #ff7070;

1948 padding: 0 $lineheight/2;

1949 margin-bottom: $lineheight;

1950 background-color: #f0f0f0;

1951

1952 h2 {

1953 margin: 0 -10px 10px -10px;

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

1955 font-weight: bold;

1956 font-size: 12px;

1957 background-color: #c00;

1958 color: #fff;

1959 text-align: left;

1960 }

1961

1962 p {

1963 color: #333;

1964 margin-bottom: 0px;

1965 padding: $lineheight/4;

1966 }

1967

1968 ul {

1969 padding-left: $lineheight;

1970

1971 li {

1972 font-size: 12px;

1973 list-style: disc;

1974 }

1975 }

1976 }

1977

1978 /* Rules for forms */

1979

1980 .standard-form {

1981 fieldset {

1982 margin-bottom: $lineheight;

1983 }

1984 label.standard-label {

1985 display: block;

1986 margin-bottom: $lineheight/4;

1987 font-size: $typeheight;

1988 font-weight: bold;

1989 line-height: 1.5;

1990 }

1991 label.standard-label.secondary {

1992 display: inline-block;

1993 font-weight: normal;

1994 }

1995 .form-help {

1996 font-weight: normal;

1997 }

1998 .form-column {

1999 float: left;

2000 margin-right: 20px;

2001 }

2002 .form-divider {

2003 margin-top: $lineheight;

2004 padding-top: $lineheight;

2005 border-top: 1px solid $lightgrey;

2006 }

2007 .horizontal-list .form-row {

2008 float: left;

2009 padding-right: 10px;

2010 }

2011 .form-row {

2012 margin-bottom: $lineheight/2;

2013 }

2014 .form-list {

2015 margin-bottom: 0;

2016 }

2017 .form-list li {

2018 margin-bottom: 5px;

2019 }

2020 input[type="checkbox"],

2021 input[type="radio"] {

2022 float: left;

2023 margin-top: 5px;

2024 }

2025 }

2026

2027 #remember_me_openid {

2028 display: block;

2029 }

2030

2031 select {

2032 padding: 2px;

2033 }

2034

2035 input[type="checkbox"],

2036 input[type="radio"] {

2037 margin-right: 5px;

2038 }

2039

2040 input[type="text"],

2041 input[type="email"],

2042 input[type="url"],

2043 input[type="password"],

2044 textarea {

2045 color: #222;

2046 background-color: #fff;

2047 border: 1px solid $grey;

2048 border-radius: 3px;

2049 padding: 2px 5px;

2050 margin: 0;

2051 width: 200px;

2052

2053 &.field_with_errors {

2054 border: 2px solid #ff7070;

2055 }

2056 }

2057

2058 textarea {

2059 padding: 5px;

2060 width: 100%;

2061 min-height: 50px;

2062 resize: vertical;

2063 }

2064

2065 /* Rules for user images */

2066

2067 img.user_image {

2068 max-width: 100px;

2069 max-height: 100px;

2070 border: 1px solid $grey;

2071 margin-bottom: $lineheight;

2072 float: left;

2073 margin-right: $lineheight;

2074 }

2075

2076 img.user_thumbnail {

2077 max-width: 50px;

2078 max-height: 50px;

2079 border: 1px solid $grey;

2080 margin-right: $lineheight;

2081 }

2082

2083 img.user_thumbnail_tiny {

2084 width: auto;

2085 height: auto;

2086 max-width: 25px;

2087 max-height: 25px;

2088 border: 1px solid $grey;

2089 }

2090

2091 /* Rules for geo microformats */

2092

2093 abbr.geo {

2094 border-bottom: none;

2095 }

2096

2097 /* Rules for RSS buttons */

2098

2099 .rsssmall {

2100 position: relative;

2101 top: 3px;

2102 }

2103

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

2105

2106 ul.secondary-actions {

2107 font-style: normal;

2108 margin-bottom: 0;

2109 margin-left: 0;

2110 &.pager {

2111 display: inline-block;

2112 margin-right: 60px;

2113 }

2114 > li {

2115 display: block;

2116 float: left;

2117 list-style: none;

2118 border-left: 1px solid $grey;

2119 padding-left: $lineheight/2;

2120 margin-right: $lineheight/2;

2121 &:first-child {

2122 border-left: 0;

2123 padding-left: 0;

2124 }

2125 &:last-child {

2126 margin-right: 0px;

2127 }

2128 }

2129 }

2130

2131 div.secondary-actions {

2132 padding: 10px;

2133 text-align: center;

2134 }

2135

2136 /* Utility for managing inner content areas */

2137

2138 .inner22 { padding: $lineheight;}

2139

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

2141

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

2143

2144 .inner20 { padding: $lineheight 0;}

2145

2146 .inner02 { padding: 0 $lineheight;}

2147

2148 /* Utility for general button styles */

2149

2150 input[type="button"],

2151 input[type="submit"],

2152 input[type="reset"],

2153 a.button {

2154 cursor: pointer;

2155 border: 0;

2156 display: inline-block;

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

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

2159 min-width: 120px;

2160 margin: 0 0 $lineheight/2 0;

2161 color: white;

2162 background: $blue;

2163 text-align: center;

2164 border-radius: 2px;

2165 &:hover {

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

2167 text-decoration: none;

2168 }

2169 &.deemphasize {

2170 background: $lightblue;

2171 &:hover {

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

2173 }

2174 }

2175 &:disabled {

2176 background: $lightgrey;

2177 &:hover {

2178 background: $lightgrey;

2179 }

2180 }

2181 &:last-child {

2182 margin-bottom: 0;

2183 }

2184 }

2185

2186 input[type="button"],

2187 input[type="submit"],

2188 input[type="reset"] {

2189 line-height: normal;

2190 }

2191

2192 a.button {

2193 line-height: 20px;

2194 }

2195

2196 .buttons {

2197 min-width: 200px;

2198 input[type="submit"],

2199 input[type="button"],

2200 input[type="reset"],

2201 .button,

2202 .button_to {

2203 box-sizing: border-box;

2204 float: left;

2205 border-radius: 0;

2206 margin:0;

2207 min-width: 75px;

2208 max-width: 180px;

2209 border-right:1px solid white;

2210 text-overflow: ellipsis;

2211 white-space: nowrap;

2212 overflow: hidden;

2213 }

2214 input:first-child,

2215 .button:first-child,

2216 .button_to:first-child {

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

2218 }

2219 input:last-child,

2220 .button:last-child,

2221 .button_to:last-child {

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

2223 border-right-width: 0;

2224 }

2225 input:only-child,

2226 .button:only-child,

2227 .button_to:only-child,

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

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

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

2231 border-radius:2px;

2232 border-right-width: 0;

2233 }

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

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

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

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

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

2239 border-right-width: 0;

2240 }

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

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

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

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

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

2246 border-right-width: 1px;

2247 }

2248 }

2249

2250 /* Rules for doing distinct colour of alternate table rows */

2251

2252 .table0,

2253 .item0 {

2254 background: $offwhite;

2255 }

2256

2257 .table1,

2258 .item1 {

2259 background: #fff;

2260 }

2261

2262 /* Rules for OpenID logo */

2263

2264 .openid_logo {

2265 vertical-align: text-bottom;

2266 border: 0;

2267 }

2268

2269 /* Rules for rich text */

2270

2271 .richtext,

2272 .prose {

2273 code {

2274 font-size: 13px;

2275 background: $lightgrey;

2276 padding: 2px 3px;

2277 }

2278

2279 pre {

2280 font-size: 13px;

2281 background: $lightgrey;

2282 padding: 2px 3px;

2283 white-space: pre-wrap;

2284

2285 code {

2286 padding: 0;

2287 }

2288 }

2289

2290 img {

2291 padding: $lineheight;

2292 background-color: $offwhite;

2293 display: block;

2294 max-width: 100%;

2295 margin: auto;

2296 }

2297

2298 blockquote {

2299 border-left: $lineheight solid $offwhite;

2300 padding-left: $lineheight;

2301 margin: 0;

2302 color: $darkgrey;

2303 }

2304

2305 ul, ol {

2306 padding-left: $lineheight;

2307 margin-bottom: $lineheight;

2308 margin-left: $lineheight;

2309 }

2310

2311 ul > li {

2312 list-style: disc;

2313 }

2314

2315 ol > li {

2316 list-style: decimal;

2317 }

2318 }

2319

2320 .diary_post .richtext {

2321 margin-top: $lineheight;

2322 }

2323

2324 .comments .richtext {

2325 margin-left: 70px;

2326 margin-top: 0;

2327 }

2328

2329 /* Rules for rich text editors */

2330

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

2332 width: 50%;

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

2334

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

2336 width: 100%;

2337 }

2338 }

2339

2340 .richtext_container {

2341 margin-bottom: $lineheight;

2342

2343 .richtext_content {

2344 width: 50%;

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

2346 display: inline-block;

2347 vertical-align: top;

2348

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

2350 width: 100%;

2351 }

2352

2353 .richtext_preview {

2354 display: inline-block;

2355 padding: $lineheight;

2356 background-color: $offwhite;

2357 overflow-x: auto;

2358

2359 &.loading {

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

2361 background-repeat: no-repeat;

2362 background-position: center;

2363 }

2364

2365 > :first-child {

2366 margin-top: 0px;

2367 }

2368 }

2369 }

2370

2371 .richtext_help {

2372 display: inline-block;

2373 vertical-align: top;

2374 margin-left: 15px;

2375 background-color: $offwhite;

2376 padding: $lineheight/2;

2377 width: 220px;

2378

2379 ul {

2380 margin-bottom: 0;

2381 }

2382

2383 h4.heading, li {

2384 border-bottom: 1px solid $grey;

2385 margin-bottom: $lineheight/4;

2386 padding-bottom: $lineheight/4;

2387 }

2388

2389 li h4, li span, li p {

2390 display: inline-block;

2391 vertical-align: top;

2392 font-size: 11px;

2393 }

2394

2395 li h4 {

2396 width: 40%;

2397 margin: 0;

2398 }

2399

2400 li span, li p {

2401 width: 50%;

2402 margin-left: $lineheight/2;

2403 margin-bottom: $lineheight/4;

2404 white-space: nowrap;

2405 }

2406 }

2407 }

2408

2409 /* Rules for the user notes list */

2410

2411 .note_list {

2412 tr.creator {

2413 background-color: $lightgrey;

2414 }

2415

2416 td {

2417 padding: 3px;

2418 }

2419

2420 p {

2421 margin-bottom: 0px;

2422 }

2423 }

2424

2425 /* Rules for the iD editor */

2426

2427 .id-embed {

2428 width: 100%;

2429 height: 100%;

2430 }

2431

2432 /* Rules for dropdown menus */

2433

2434 .dropdown {

2435 position: relative;

2436 }

2437

2438 .dropdown-toggle {

2439 *margin-bottom: -3px;

2440 }

2441

2442 .dropdown-toggle:active,

2443 .open .dropdown-toggle {

2444 outline: 0;

2445 }

2446

2447 .caret {

2448 display: inline-block;

2449 width: 0;

2450 height: 0;

2451 vertical-align: top;

2452 border-top: 4px solid #000000;

2453 border-right: 4px solid transparent;

2454 border-left: 4px solid transparent;

2455 content: "";

2456 }

2457

2458 .dropdown .caret {

2459 margin-top: 8px;

2460 margin-left: 2px;

2461 }

2462

2463 .dropdown-menu {

2464 position: absolute;

2465 top: 100%;

2466 left: -1px;

2467 z-index: 1000;

2468 display: none;

2469 float: left;

2470 min-width: 160px;

2471 padding: 5px 0;

2472 margin: 0;

2473 list-style: none;

2474 background-color: #ffffff;

2475 border: 1px solid $grey;

2476 border-radius: 0 3px 3px;

2477 *border-right-width: 2px;

2478 *border-bottom-width: 2px;

2479 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

2480 background-clip: padding-box;

2481 }

2482

2483 .dropdown-menu.pull-right {

2484 right: 0;

2485 left: auto;

2486 }

2487

2488 .dropdown-menu .divider {

2489 *width: 100%;

2490 height: 1px;

2491 margin: 9px 1px;

2492 *margin: -5px 0 5px;

2493 overflow: hidden;

2494 background-color: $lightgrey;

2495 border-bottom: 1px solid #ffffff;

2496 }

2497

2498 .dropdown-menu > li > a {

2499 display: block;

2500 padding: 3px 10px;

2501 clear: both;

2502 font-weight: normal;

2503 line-height: 20px;

2504 color: #333333;

2505 white-space: nowrap;

2506 }

2507

2508 .dropdown-menu > li > a:hover,

2509 .dropdown-menu > li > a:focus,

2510 .dropdown-submenu:hover > a,

2511 .dropdown-submenu:focus > a {

2512 color: #ffffff;

2513 text-decoration: none;

2514 background-color: $green;

2515 }

2516

2517 .dropdown-menu > .active > a,

2518 .dropdown-menu > .active > a:hover,

2519 .dropdown-menu > .active > a:focus {

2520 color: #ffffff;

2521 text-decoration: none;

2522 background-color: $green;

2523 outline: 0;

2524 }

2525

2526 .dropdown-menu > .disabled > a,

2527 .dropdown-menu > .disabled > a:hover,

2528 .dropdown-menu > .disabled > a:focus {

2529 color: $darkgrey;

2530 }

2531

2532 .dropdown-menu > .disabled > a:hover,

2533 .dropdown-menu > .disabled > a:focus {

2534 text-decoration: none;

2535 cursor: default;

2536 background-color: transparent;

2537 background-image: none;

2538 }

2539

2540 .open {

2541 *z-index: 1000;

2542 }

2543

2544 .open > .dropdown-menu {

2545 display: block;

2546 }

2547

2548 .dropdown-backdrop {

2549 position: fixed;

2550 top: 0;

2551 right: 0;

2552 bottom: 0;

2553 left: 0;

2554 z-index: 990;

2555 }

2556

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

2558 .site-welcome, .site-fixthemap {

2559 .center {

2560 text-align: center;

2561 .sprite {

2562 float: none;

2563 margin: auto;

2564 }

2565 }

2566

2567 .sprite {

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

2569 background-size: 500px 250px;

2570 display: block;

2571 float: left;

2572 }

2573

2574 .icon-list {

2575 padding-bottom: 20px;

2576 div {

2577 margin-bottom: 10px;

2578 p {

2579 padding-top: 10px;

2580 }

2581 }

2582 }

2583 .sprite.small {

2584 width: 50px;

2585 height: 50px;

2586 }

2587

2588 .sprite.x {

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

2590 }

2591

2592 .sprite.term {

2593 margin-right: 10px;

2594 vertical-align: middle;

2595 }

2596

2597 .sprite.node {

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

2599 }

2600

2601 .sprite.way {

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

2603 }

2604

2605 .sprite.tag {

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

2607 }

2608

2609 .sprite.editor {

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

2611 }

2612

2613 .sprite.question {

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

2615 }

2616

2617 .sprite.rules {

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

2619 }

2620

2621 .start-mapping {

2622 margin: auto;

2623 cursor: pointer;

2624 border: none;

2625 padding: 20px 40px;

2626 font-size: 30px;

2627 text-decoration: none;

2628 }

2629

2630 .note-box {

2631 margin-top: 20px;

2632 background-color: $offwhite;

2633 }

2634

2635 .icon.note {

2636 background-color: #333;

2637 border-radius: 4px;

2638 }

2639 }

2640

2641 .site-about #content {

2642 background-color: $lightgrey;

2643 background-position: 50% 50%;

2644 background-repeat: no-repeat;

2645 background-size: cover;

2646 background-attachment: fixed;

2647

2648 .caption {

2649 max-width: 200px;

2650 font: 13px/20px Helvetica, Arial, sans-serif;

2651 position: fixed;

2652 text-align: right;

2653 right: 20px;

2654 bottom: 60px;

2655 text-shadow: #000 0px 1px 5px;

2656 color: $lightgrey;

2657 opacity: 0.8;

2658 display: none;

2659 }

2660

2661 .caption a {

2662 color: white;

2663 white-space: nowrap;

2664 text-decoration: none;

2665 }

2666

2667 a.next {

2668 display: block;

2669 position: fixed;

2670 right: 10px;

2671 bottom: 10px;

2672 width: 40px;

2673 height: 40px;

2674 border-radius: 5px;

2675 text-indent: -9999px;

2676 overflow: hidden;

2677 background: image-url('about/sprite.png') -120px 0px no-repeat;

2678 background-color: #000;

2679 background-color: rgba(0, 0, 0, 0.5);

2680 }

2681

2682 .content-inner {

2683 position: relative;

2684 color: #333;

2685 min-width: 320px;

2686 max-width: 640px;

2687

2688 .section {

2689 margin-bottom: 30px;

2690 }

2691

2692 .section:last-child {

2693 margin-bottom: 0;

2694 }

2695 }

2696

2697 .text {

2698 background: white;

2699 padding: 40px;

2700 }

2701

2702 .attr {

2703 position: relative;

2704 padding: 170px 40px 20px;

2705 background: #333;

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

2707 margin-bottom: 0;

2708 margin-top: -20px;

2709

2710 h1 {

2711 display: block;

2712 color: white;

2713 font-weight: 300;

2714 font-size: 34px;

2715 span {

2716 color: $vibrant-green;

2717 }

2718 }

2719

2720 .user-image {

2721 position: absolute;

2722 top: 0px;

2723 right: 240px;

2724 left: 0px;

2725 height: 150px;

2726 background-position: 0 50%;

2727 background-repeat: no-repeat;

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

2729 background-size: cover;

2730 background-color: $vibrant-green;

2731 }

2732

2733 .byosm {

2734 position: absolute;

2735 top: 0px;

2736 right: 0px;

2737 z-index: 1;

2738 width: 240px;

2739 height: 150px;

2740 padding: 20px 20px 20px 40px;

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

2742 white-space: nowrap;

2743 color: #fff;

2744 background: $vibrant-green;

2745 }

2746

2747 .byosm span {

2748 display: inline-block;

2749 width: 20px;

2750 margin-left: -20px;

2751 }

2752 }

2753

2754 h2 {

2755 margin-bottom: 10px;

2756 }

2757

2758 .icon {

2759 width: 30px;

2760 height: 30px;

2761 margin-right: 10px;

2762 vertical-align: middle;

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

2764

2765 &.local {

2766 /* no-r2 */

2767 background-position: 0px 0px;

2768 }

2769 &.community {

2770 /* no-r2 */

2771 background-position: 0px -40px;

2772 }

2773 &.open {

2774 /* no-r2 */

2775 background-position: 0px -80px;

2776 }

2777 &.partners {

2778 /* no-r2 */

2779 background-position: 0px -120px;

2780 }

2781 &.infringement {

2782 /* no-r2 */

2783 background-position: 0px -160px;

2784 }

2785 &.legal {

2786 /* no-r2 */

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

2788 }

2789 }

2790 }

2791

2792 @import 'browse';

2793

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

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

2796 display: none;

2797 }

2798 }

2799

2800 .read-reports {

2801 background: $lightgrey;

2802 opacity: 0.7;

2803 }

2804

2805 .report-related-block {

2806 display:inline-block;

2807 }

2808

2809 .report-block {

2810 width:475px;

2811 float:left;

2812 margin-right:100px;

2813 }

2814

2815 .related-reports {

2816 width: 280px;

2817 float: right;

2818

2819 ul {

2820 padding-left: $lineheight;

2821 margin-bottom: 0;

2822

2823 li {

2824 list-style: disc;

2825 }

2826 }

2827 }

2828

2829 .issue-comments {

2830 width:475px;

2831 }

2832

2833 .issues-list {

2834 td:nth-child(2) {

2835 white-space: nowrap;

2836 }

2837 }

2838

2839 .report-disclaimer {

2840 ul {

2841 padding-left: $lineheight;

2842 margin-bottom: 0;

2843

2844 li {

2845 list-style: disc;

2846 }

2847 }

2848 }