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

1 @import "parameters";

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

5 /* Minimal CSS reset */

7 html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, input {

8 margin: 0;

9 padding: 0;

10 border: 0;

11 font-size:100%;

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 border-bottom: .1em 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 h1, h2, h3 {

112 font-weight: 600;

113 line-height: 1.2;

114 }

115

116 h4, h5 {

117 font-weight: 500;

118 }

119

120 h1 {

121 font-size: 18px;

122 }

123

124 h2, h3 {

125 font-size: 16px;

126 }

127

128 p > img {

129 width: auto;

130 max-width: 100%;

131 }

132

133 small, aside {

134 font-size: 12px;

135 }

136

137 #container { position: relative; }

138

139 .column-1 {

140 width: 50%;

141 margin: 0 0 $lineheight/2 0;

142 }

143

144 .small_icon {

145 vertical-align: middle;

146 margin-right: $lineheight/4;

147 }

148

149 .red { color: $red; }

150

151 .piwik { border: 0; }

152

153 /* Rules for icons */

154

155 .icon {

156 display: inline-block;

157 vertical-align: top;

158 width: 20px;

159 height: 20px;

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

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

162 text-indent: -9999px;

163 overflow: hidden;

164 }

165

166 .icon.search { background-position: 0 0; }

167 .icon.donate { background-position: -20px 0; }

168 .icon.zoomin { background-position: -40px 0; }

169 .icon.zoomout { background-position: -60px 0; }

170 .icon.geolocate { background-position: -80px 0; }

171 .active .icon.geolocate { background-position: -80px -20px; }

172 .icon.layers { background-position: -100px 0; }

173 .icon.key { background-position: -120px 0; }

174 .icon.share { background-position: -140px 0; }

175 .icon.clipboard { background-position: -160px 0; }

176 .icon.link { background-position: -180px 0; }

177 .icon.close { background-position: -200px 0; }

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

179 .icon.close:hover { background-position: -200px -20px; }

180 .icon.check { background-position: -220px 0; }

181 .icon.note { background-position: -240px 0; }

182 .icon.note.grey { background-position: -240px -20px; }

183 .icon.query { background-position: -260px 0; }

184

185 /* Rules for links */

186

187 a {

188 color: #24d;

189 text-decoration: none;

190 -webkit-appearance: none;

191 outline: 0;

192 &:hover {

193 text-decoration: underline;

194 }

195 }

196

197 /* Rules for horizontal lines */

198

199 hr {

200 border: none;

201 background-color: #ccc;

202 color: #ccc;

203 height: 1px;

204 }

205

206 /* General styles for tables */

207

208 table {

209 width: 100%;

210 margin-bottom: $lineheight;

211 th, td {

212 text-align: left;

213 padding: $lineheight/4;

214 line-height: $lineheight;

215 }

216 th {

217 font-weight: 600;

218 vertical-align: top;

219 }

220 td {

221 vertical-align: middle;

222 }

223 }

224

225 /* Utility for de-emphasizing content */

226

227 .deemphasize {

228 color: #999;

229 a {

230 color: $blue;

231 }

232 }

233

234 /* Rules for the header */

235

236 #menu-icon {

237 display: none !important;

238 float: right;

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

240 background-size: 30px 30px;

241 display: block;

242 width: 30px;

243 height: 30px;

244 margin: 14px 10px 0 0;

245 opacity: 0.6;

246 }

247

248 header {

249 height: $headerHeight;

250 position: relative;

251 z-index: 1001;

252 font-size: 14px;

253

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

255 display: inline-block;

256 }

257

258 > * {

259 height: 100%;

260 padding: $lineheight/2;

261 }

262

263 h1, nav.primary {

264 float: left;

265 }

266

267 a, a:hover {

268 text-decoration: none;

269 }

270

271 img.logo {

272 width: 30px;

273 height: 30px;

274 margin-top: -2px;

275 vertical-align: middle;

276 }

277

278 h1 {

279 margin: 0;

280 padding-top: 15px;

281

282 a {

283 color: #000;

284 }

285 }

286 }

287

288 nav.primary {

289 > ul {

290 $border: 1px solid $green;

291

292 border: $border;

293 border-radius: $border-radius;

294

295 > li {

296 border-right: $border;

297 float: left;

298 &:last-child {

299 border-right: 0;

300 }

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

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

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

304 &.dropdown {

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

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

307 }

308 }

309 }

310

311 a.tab,

312 .dropdown-toggle {

313 display: inline-block;

314 font-weight: 500;

315 color: $green;

316 padding: 5px 15px;

317 }

318

319 .dropdown-toggle {

320 padding: 5px 6px;

321 }

322

323 .caret {

324 border-top-color: $green;

325 margin-top: 10px;

326 }

327

328 .disabled a {

329 color: #ccc;

330 cursor: default;

331

332 .caret {

333 border-top-color: #ccc;

334 }

335 }

336

337 > ul li.current {

338 background-color: $green;

339

340 .tab {

341 color: #fff;

342 }

343

344 .caret {

345 border-top-color: #fff;

346 }

347 }

348 }

349

350 nav.secondary {

351 position: absolute;

352 right: 0;

353

354 > ul {

355 vertical-align: middle;

356 a, .dropdown-toggle {

357 display: inline-block;

358 text-decoration: none;

359 color: $darkgrey;

360 padding: 5px;

361

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

363 }

364 }

365

366 > ul li.current a {

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

368 }

369

370 .user-menu {

371 $border: 1px solid $grey;

372 border: $border;

373 border-radius: $border-radius;

374 margin-left: 10px;

375

376 > li {

377 border-right: $border;

378 float: left;

379 &:last-child {

380 border-right: 0;

381

382 > a {

383 border-radius: 0 $border-radius $border-radius 0;

384 }

385 }

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

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

388 }

389

390 a {

391 padding: 5px 15px;

392

393 }

394

395 &.logged-in > a {

396 padding: 0;

397 > .user-button {

398 line-height: 1.8;

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

400 display: inline-block;

401 color: $darkgrey;

402 }

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

404 }

405 }

406

407 .caret {

408 border-top-color: $grey;

409 margin-top: 9px;

410 }

411

412 img.user_thumbnail_tiny {

413 border: 0;

414 vertical-align: top;

415 margin-top: 0px;

416 margin: 4px 0 0 4px;

417 border-radius: 2px;

418 }

419

420 #inboxanchor {

421 display: inline-block;

422 vertical-align: top;

423 height: 25px;

424 margin: 3px 0 3px 3px;

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

426 line-height: 20px;

427 border-radius: 2;

428 }

429

430 .dropdown-menu {

431 left: auto;

432 right: -1px;

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

434

435 .count-number {

436 float: right;

437 padding: 0 5px;

438 margin: 0;

439 }

440 }

441 }

442

443 #compact-secondary-nav {

444 display: none;

445 ul li a {

446 width: 100%;

447 color: #333;

448 &:hover { color: #fff; }

449 }

450 }

451

452 body.compact {

453 #compact-secondary-nav {

454 display: inline-block;

455 }

456 .compact-hide {

457 display: none;

458 }

459 }

460

461 /* Utility for styling notification numbers */

462

463 .count-number {

464 padding: 2px $lineheight/4;

465 border-radius: 2px;

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

467 margin: 0 2px;

468 font-size: 11px;

469 color: #333;

470 }

471

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

473

474 #noscript {

475 z-index: 20000000;

476 margin-left: 400px;

477 margin-top: 50px;

478 }

479

480 /* Rules for Leaflet maps */

481

482 .leaflet-control .control-button {

483 display: block;

484 height: 40px;

485 width: 40px;

486 background-color: #333;

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

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

489 margin-bottom: 10px;

490 outline: none;

491

492 &:hover {

493 background-color: black;

494 }

495

496 &.disabled,

497 &.leaflet-disabled {

498 background-color: #333;

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

500 cursor: default;

501 }

502

503 &.active {

504 background-color: #9ed485;

505 }

506

507 .icon {

508 margin: 10px;

509 }

510 }

511

512 .leaflet-control .zoomin,

513 .control-layers .control-button {

514 margin-bottom: 0px;

515 border-radius: 4px 0 0 0;

516 }

517

518 .leaflet-control .zoomout,

519 .control-key .control-button {

520 margin-bottom: 0;

521 border-radius: 0;

522 }

523

524 .control-locate .control-button,

525 .control-share .control-button {

526 border-radius: 0 0 0 4px;

527 }

528

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

530

531 .map-layout {

532 #content {

533 overflow: hidden;

534 position: absolute;

535 top: $headerHeight;

536 bottom: 0;

537 width: 100%;

538 }

539

540 #sidebar, #map {

541 position: relative;

542 height: 100%;

543 overflow-x: hidden;

544 overflow-y: auto;

545 }

546

547 #sidebar {

548 float: left;

549 width: $sidebarWidth;

550 background: #fff;

551 font-size: 12px;

552

553 #sidebar_loader {

554 display: none;

555 }

556

557 > div {

558 position: relative;

559 float: left;

560 clear: both;

561 width: 100%;

562 }

563

564 h2 {

565 padding: $lineheight $lineheight $lineheight/2;

566 }

567

568 h3, h4 {

569 margin-top: $lineheight;

570 margin-bottom: $lineheight/2;

571 font-size: 13px;

572 }

573

574 .close-wrap {

575 cursor: pointer;

576 position: absolute;

577 top: 0;

578 right: 0;

579 width: 60px;

580 height: 60px;

581

582 .icon.close {

583 pointer-events: none;

584 position: absolute;

585 right: 20px;

586 top: 20px;

587 }

588 }

589

590 .icon.close {

591 float: right;

592 cursor: pointer;

593 }

594

595 .flash {

596 padding: 15px;

597

598 picture {

599 margin-right: -25px;

600 }

601

602 div.message {

603 margin-left: 30px;

604 }

605 }

606 }

607

608 .overlay-sidebar #sidebar {

609 position: absolute;

610 z-index: 1000;

611 height: auto;

612 overflow: hidden;

613

614 #banner,

615 .welcome {

616 display: block;

617 }

618

619 #sidebar_content {

620 display: none;

621 }

622 }

623

624 .welcome {

625 display: none;

626 padding-bottom: 5px;

627

628 p {

629 padding: $lineheight/2 $lineheight $lineheight;

630 font-size: 110%;

631 font-weight: 300;

632 }

633

634 .button {

635 width: 50%;

636 float: left;

637 margin: 0;

638 border-radius: 0;

639 font-weight: normal;

640 padding: .6em;

641

642 &.learn-more {

643 border-right: 1px solid #fff;

644 }

645 }

646 }

647

648 #banner {

649 display: none;

650

651 img {

652 display: block;

653 width: $sidebarWidth;

654 }

655 }

656

657 #map {

658 height: 100%;

659 overflow: hidden;

660

661 &.query-active {

662 cursor: help;

663 }

664

665 &.query-disabled {

666 cursor: not-allowed;

667 }

668

669 .leaflet-marker-draggable {

670 cursor: move;

671 }

672 }

673

674 #map-ui {

675 display: none;

676 position: relative;

677 float: right;

678 width: 250px;

679 height: 100%;

680 background: white;

681 overflow: auto;

682

683 .section {

684 border-bottom: 1px solid #DDD;

685 padding: 10px 20px;

686 }

687

688 a.close-button {

689 float: right;

690 padding:5px;

691 font-size:20px;

692 line-height:10px;

693 color:#222;

694 border:1px solid #ddd;

695 }

696

697 .tooltip {

698 opacity: 1;

699 border: 1px solid #ccc;

700 .tooltip-arrow {

701 border-top-color: #ccc;

702 }

703 }

704 }

705 }

706

707 .layers-ui,

708 .share-ui {

709 li:last-child {

710 margin-bottom: 0;

711 }

712 }

713

714 .layers-ui {

715 .base-layers {

716 .leaflet-container {

717 width: 100%;

718 height: 50px;

719 cursor: pointer;

720 }

721

722 li {

723 overflow: hidden;

724 border-radius: 3px;

725 border: 2px solid #fff;

726 margin-bottom: 8px;

727 position: relative;

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

729

730 label {

731 position: absolute;

732 top: 0;

733 left: 0;

734 padding: 2px 6px;

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

736 cursor: pointer;

737 font-weight: 600;

738 font-size: 16px;

739 text-stroke: 2px #fff;

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

741 z-index: 1000;

742 input[type="radio"] {

743 display: none;

744 }

745 }

746

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

748 &:hover {

749 border-color: $grey;

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

751 }

752 }

753 }

754

755 .overlay-layers {

756 p {

757 font-size: 13px;

758 margin-bottom: 8px;

759 }

760 li.disabled { color: #999; }

761 }

762 }

763

764 .share-ui {

765 .share-tabs {

766 margin-bottom: 10px;

767

768 a {

769 color: #fff;

770 text-decoration: none;

771 background-color: $lightblue;

772 padding: 5px 10px;

773 border-right: 1px solid #fff;

774 }

775

776 a:first-child {

777 border-right: 1px solid #fff;

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

779 }

780

781 a:last-child {

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

783 }

784

785 a.active {

786 background-color: $blue;

787 }

788 }

789

790 .share-tab {

791 display: none;

792 }

793

794 .share-link {

795 input[type=text],

796 textarea {

797 width: 100%;

798 font-family: monospace;

799 font-size: small;

800 line-height: 1.3;

801 }

802 }

803

804 .share-image {

805 label {

806 margin-right: 10px;

807 }

808 }

809

810 #embed_html {

811 resize: vertical;

812 }

813

814 #mapnik_scale {

815 width: 100px;

816 }

817 }

818

819 .leaflet-top {

820 top: $lineheight/2 !important;

821 .leaflet-control {

822 margin-right: 0px !important;

823 margin-top: 0px !important;

824 }

825 }

826

827 .leaflet-popup-scrolled {

828 padding-right: $lineheight;

829 border-bottom: 0px !important;

830 border-top: 0px !important;

831 }

832

833 .leaflet-popup-content-wrapper {

834 border-radius: 4px !important;

835 }

836

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

838

839 #attribution {

840 display: none;

841

842 table {

843 width: 100%

844 }

845 }

846

847 .attribution_license,

848 .attribution_project {

849 text-align: left;

850 }

851

852 .attribution_notice {

853 text-align: center;

854 }

855

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

857

858 /* Rules for the sidebar */

859

860 .sidebar_heading {

861 position: relative;

862 padding: $lineheight/2 $lineheight;

863 // background: $offwhite;

864 // border-bottom: 1px solid #ccc;

865 > .close {

866 float: right;

867 margin-top: 2px;

868 cursor: pointer;

869 }

870 }

871

872 #browse_status {

873 p {

874 padding: $lineheight;

875 }

876

877 input {

878 display: block;

879 margin-left: auto;

880 margin-right: auto;

881 }

882 }

883

884 #sidebar {

885 #sidebar_loader,

886 .search_more {

887 width: 100%;

888 margin: $lineheight auto;

889 }

890

891 .loader,

892 .load_more {

893 text-align: center;

894 margin: auto;

895 width: 40px;

896 display: block;

897 }

898 }

899

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

901

902 header .search_forms,

903 .directions_form {

904 display: none;

905 }

906

907 .search_form,

908 .directions_form {

909 position: relative;

910 padding: $lineheight/2;

911 background-color: $lightgrey;

912

913 .query_wrapper {

914 position: relative;

915 overflow: hidden;

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

917 }

918

919 input[type=text] {

920 width: 100%;

921 height: 30px;

922 transition: 300ms linear;

923 }

924

925 input[type=text].overflow {

926 border-right: none;

927 }

928

929 input:focus {

930 outline: none;

931 box-shadow: 0px 0px 7px #9ED485;

932 }

933

934 input[type=submit].float {

935 float: right;

936 width: auto;

937 min-width: 0;

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

939 }

940

941 select {

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

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

944 padding: 0.3em 0;

945 }

946

947 .query_options {

948 text-align: right;

949 font-size: 10px;

950 color: $blue;

951 }

952

953 .describe_location {

954 position: absolute;

955 top: 6px;

956 right: 6px;

957 font-size: 10px;

958 color: $blue;

959 }

960

961 .switch_link {

962 float: right;

963 width: auto;

964 min-width: 0;

965 margin-left: 6px;

966 }

967

968 img.button {

969 display: block;

970 }

971

972 span.force_width {

973 width: 100%;

974 padding-right: 25px;

975 display: block;

976 }

977

978 select.routing_engines {

979 min-height: 30px;

980 margin: 0px 0px 5px 25px;

981 }

982

983 input.routing_go {

984 min-width: 100px;

985 float: right;

986 }

987

988 div.header {

989 width: 100%;

990 height: 30px;

991 }

992

993 div.line {

994 width: 100%;

995 margin: 0px 0px 5px 0px;

996 }

997

998 div.loader_copy {

999 display: none;

1000

1001 img {

1002 vertical-align: middle;

1003 }

1004 }

1005 }

1006

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

1008

1009 #mapkey {

1010 .mapkey-table-key img {

1011 display: block;

1012 margin-left: auto;

1013 margin-right: auto;

1014 }

1015 td {

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

1017 }

1018 }

1019

1020 /* Rules for search sidebar */

1021

1022 .search_results_entry {

1023 ul li {

1024 border-bottom: $keyline;

1025 cursor: pointer;

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

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

1028 }

1029

1030 .search_details {

1031 display: block;

1032 float: right;

1033 text-align: right;

1034 margin-top: 0.2em;

1035 margin-left: 0.5em;

1036 }

1037 }

1038

1039 .search_results_error {

1040 color: #f00;

1041 padding: 10px 20px;

1042 }

1043

1044 /* Rules for routing */

1045

1046 #sidebar_content>table {

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

1048 width: 100%;

1049 border-collapse: separate;

1050 }

1051

1052 div.direction {

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

1054 width: 20px;

1055 height: 20px;

1056 background-repeat: no-repeat;

1057 }

1058 @for $i from 0 through 25 {

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

1060 }

1061

1062 p#routing_summary {

1063 padding: 0 $lineheight $lineheight/4;

1064 }

1065

1066 td.instruction, td.distance {

1067 padding-top: $lineheight/5;

1068 padding-bottom: $lineheight/5;

1069 border-bottom: 1px solid #DDD;

1070 }

1071 td.distance {

1072 color: #BBB;

1073 text-align: right;

1074 font-size: x-small;

1075 }

1076 tr.turn {

1077 cursor: pointer;

1078 }

1079 tr.turn:hover {

1080 background: $list-highlight;

1081 }

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

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

1084

1085 /* Rules for entity history */

1086

1087 #sidebar_content {

1088 .browse_details {

1089 position: relative;

1090 border-bottom: $keyline;

1091 }

1092 }

1093

1094 .browse_status {

1095 display: none;

1096 }

1097

1098 /* Rules for the history sidebar */

1099

1100 #sidebar .changesets {

1101 li {

1102 padding: 15px 20px;

1103 border-bottom: 1px solid #ddd;

1104 cursor: pointer;

1105

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

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

1108 }

1109

1110 h4 {

1111 margin: 0;

1112 a {

1113 color: #000;

1114 }

1115 }

1116

1117 .comments {

1118 float: right;

1119 color: #999;

1120 }

1121

1122 .comments-0 {

1123 opacity: 0.5;

1124 }

1125 }

1126

1127 /* Rules for the browse sidebar */

1128

1129 #sidebar_content {

1130 .browse-section {

1131 padding: $lineheight/2 $lineheight;

1132 border-bottom: 1px solid #ddd;

1133

1134 h4:first-child {

1135 margin-top: 0;

1136 word-wrap: break-word;

1137 }

1138 }

1139

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

1141 border-bottom: none;

1142 }

1143

1144 .paginate {

1145 float: right;

1146 padding: 1px 6px;

1147 border: 1px solid #eee;

1148 border-radius: 3px;

1149 }

1150

1151 .paginate ul {

1152 padding-left: 20px;

1153 }

1154

1155 .browse-field {

1156 margin-bottom: 10px;

1157

1158 h4 {

1159 padding: 5px 0 5px 10px;

1160 font-size: 12px;

1161 border: 1px solid #CCC;

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

1163 background-color: #F6F6F6;

1164 }

1165

1166 p {

1167 padding: 7px 10px;

1168 font-size: 12px;

1169 background-color: #FFF;

1170 border: 1px solid #CCC;

1171 border-top: 0;

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

1173 }

1174 }

1175

1176 .browse-tag-list {

1177 background-color: #F6F6F6;

1178 border: 1px solid #ddd;

1179 border-radius: 3px;

1180 font-size: 12px;

1181 table-layout: fixed;

1182 border-collapse: separate;

1183

1184 th, td {

1185 border-bottom: 1px solid #ddd;

1186 }

1187

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

1189 border-bottom: 0;

1190 }

1191

1192 .browse-tag-k,

1193 .browse-tag-v {

1194 width: 50%;

1195 padding: 6px 10px;

1196 word-wrap: break-word;

1197 white-space: pre-wrap;

1198 }

1199

1200 .browse-tag-k {

1201 font-weight: 500;

1202 background-color: #F6F6F6;

1203 }

1204

1205 .browse-tag-v {

1206 border-left: 1px solid #ddd;

1207 background-color: #fff;

1208 }

1209 }

1210

1211 .warning {

1212 margin: $lineheight/2 0;

1213 padding: $lineheight/2;

1214 font-size: 90%;

1215 }

1216

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

1218 margin: $lineheight/2 0;

1219

1220 p {

1221 margin-left: 10px;

1222 }

1223 }

1224

1225 .comments-header {

1226 float: left;

1227 }

1228

1229 .subscribe-buttons {

1230 float: left;

1231 margin: 18px 10px 10px;

1232 min-width: 80px;

1233 }

1234

1235 .subscribe-buttons input {

1236 font-size: 90%;

1237 line-height: 15px;

1238 min-height: 20px;

1239 }

1240

1241 span.action-button:hover {

1242 cursor: pointer;

1243 text-decoration: underline;

1244 }

1245

1246 .note-description {

1247 overflow: hidden;

1248 margin: 0 0 10px 10px;

1249 }

1250

1251 .query-intro p {

1252 padding: $lineheight $lineheight $lineheight/2;

1253 }

1254

1255 .query-results {

1256 display: none;

1257

1258 h3 {

1259 padding: $lineheight $lineheight $lineheight/2;

1260 margin: 0;

1261 }

1262

1263 ul {

1264 li {

1265 padding: 15px 20px;

1266 border-bottom: 1px solid #ddd;

1267

1268 &.query-result {

1269 cursor: pointer;

1270 }

1271

1272 &.selected {

1273 background: $list-highlight;

1274 }

1275 }

1276 }

1277 }

1278 }

1279

1280 /* Rules for export sidebar */

1281

1282 .export_form {

1283 padding: $lineheight;

1284

1285 .export_area_inputs,

1286 .export_button {

1287 text-align: center;

1288 }

1289

1290 .export_area_inputs {

1291 margin-bottom: $lineheight/2;

1292 input[type="text"] {

1293 width: 80px;

1294 text-align: center;

1295 margin-bottom: 5px;

1296 }

1297 }

1298

1299 .export_boxy {

1300 background: #eee;

1301 border: 1px solid #ccc;

1302 border-radius: 3px;

1303

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

1305 #minlon {

1306 float: left;

1307 margin-left: -1px;

1308 }

1309 #maxlon {

1310 float: right;

1311 margin-right: -1px;

1312 }

1313 #minlat { margin-bottom: 0; }

1314 }

1315

1316 .export_bound {

1317 margin: $lineheight/4;

1318 }

1319

1320 .export_button {

1321 margin-top: $lineheight;

1322 margin-bottom: $lineheight;

1323 }

1324

1325 dl {

1326 padding-left: $lineheight/2;

1327 dd {

1328 margin-left: 0;

1329 margin-bottom: 10px;

1330 }

1331 }

1332 }

1333

1334 /* Rules for the routing sidebar */

1335

1336 #sidebar_content {

1337 #routing_credit {

1338 text-align: center;

1339 padding: 0.5em;

1340 }

1341 }

1342

1343 /* Rules for edit pages */

1344

1345 .site-edit {

1346 #content {

1347 position: absolute;

1348 top: $headerHeight;

1349 bottom: 0;

1350 width: 100%;

1351 }

1352

1353 #map {

1354 height: 100%;

1355 overflow: hidden;

1356 }

1357 }

1358

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

1360

1361 .content-heading {

1362 background: $lightgrey;

1363

1364 h1 { font-size: 22px; }

1365 }

1366

1367 .content-body {

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

1369 margin-bottom: $lineheight;

1370 }

1371

1372 h1, h2, h3 {

1373 margin-top: $lineheight/2;

1374 }

1375 }

1376

1377 .content-inner {

1378 position: relative;

1379 max-width: 900px;

1380 margin: auto;

1381 padding: $lineheight;

1382 }

1383

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

1385

1386 .user-new,

1387 .user-create,

1388 .user-terms {

1389 .content-body .content-inner {

1390 padding: 0;

1391

1392 .message {

1393 margin-top: 80px;

1394 padding: 20px;

1395 }

1396 }

1397 }

1398

1399 .user-new,

1400 .user-create,

1401 .user-terms,

1402 .user-confirm {

1403 .content-heading .content-inner {

1404 height: 200px;

1405 }

1406 }

1407

1408 .header-illustration {

1409 background-position: 0 0;

1410 background-repeat: no-repeat;

1411 position: absolute;

1412 height: 200px;

1413 width: 100%;

1414 left: 0;

1415 bottom: 0;

1416

1417 &.new-user-main {

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

1419 }

1420

1421 &.confirm-main {

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

1423 }

1424

1425 &.new-user-terms {

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

1427 }

1428

1429 &.new-user-arm {

1430 height: 110px;

1431 width: 130px;

1432 left: 260px;

1433 top: 160px;

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

1435 z-index: 100;

1436 }

1437 }

1438

1439 #content.maximised {

1440 top: 0;

1441 left: 0;

1442 right: 0;

1443 bottom: 0;

1444 border: 0;

1445 z-index: 2000;

1446 }

1447

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

1449

1450 .content_map {

1451 position: relative;

1452 width: 45%;

1453 height: 400px;

1454 border: 1px solid #ccc;

1455 margin-bottom: $lineheight;

1456 float: right;

1457 }

1458

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

1460

1461 #trace_list {

1462 font-size: $lineheight/2;

1463 border-width: 0px;

1464 text-align: right;

1465

1466 .trace_summary {

1467 font-size: 12px;

1468 color: gray;

1469 }

1470

1471 .trace_pending {

1472 color: red;

1473 }

1474

1475 .trace_public {

1476 color: green;

1477 }

1478

1479 .trace_identifiable {

1480 color: green;

1481 }

1482

1483 .trace_trackable {

1484 color: red;

1485 }

1486

1487 .trace_private {

1488 color: red;

1489 }

1490 }

1491

1492 /* Rules for the trace view */

1493

1494 .trace-view {

1495 .trace_pending {

1496 color: red;

1497 }

1498

1499 .geo {

1500 display: inline;

1501 }

1502 }

1503

1504 /* Rules for the new trace form */

1505

1506 #new_trace {

1507 input[type=text] {

1508 width: 50%;

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

1510 max-width: 500px;

1511 }

1512 }

1513

1514 /* Rules for the edit trace form */

1515

1516 .edit_trace {

1517 .form-row p {

1518 margin-bottom: 0px;

1519 }

1520

1521 input[type=text] {

1522 width: 50%;

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

1524 max-width: 500px;

1525 }

1526 }

1527

1528 /* Rules for the user profile page */

1529

1530 #userinformation {

1531

1532 min-height: 100px;

1533 .userinformation-inner {

1534 float: left;

1535 }

1536 h2 {

1537 margin-top: 0;

1538 }

1539 .user-description {

1540 width: 100%;

1541 clear: both;

1542 }

1543 .deemphasize {

1544 margin: 0;

1545 }

1546 }

1547

1548 .admin-user-info small {

1549 margin-bottom: $lineheight/2;

1550 display: inline;

1551 margin-right: $lineheight;

1552 }

1553

1554 .activity-block {

1555 clear: left;

1556 border-bottom: 1px solid #ccc;

1557 padding-bottom: $lineheight;

1558 float: left;

1559 h3 {

1560 margin-bottom: $lineheight/2;

1561 }

1562 }

1563

1564 .contact-activity {

1565 margin-top: $lineheight;

1566 width: 100%;

1567 }

1568

1569 .activity-details p {

1570 margin-left: 70px;

1571 margin-bottom: 0;

1572 }

1573

1574 #friends-container .contact-activity ul {

1575 margin-left: 70px;

1576 }

1577

1578 .user-view {

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

1580 .content-inner {

1581 max-width: none;

1582 }

1583 p#no_home_location {

1584 margin: $lineheight;

1585 }

1586 .user_thumbnail {

1587 margin-top: $lineheight/4;

1588 float: left;

1589 }

1590 }

1591

1592 /* Rules for the user map */

1593

1594 .content_map .leaflet-popup-content {

1595 margin: $lineheight/2;

1596 min-height: 50px;

1597 }

1598

1599 /* Rules for user popups on maps */

1600

1601 .user_popup {

1602 min-width: 200px;

1603 p {

1604 padding: 0 0 5px 0;

1605 margin-top: 0 0 0 60px;

1606 font-size: 12px;

1607 }

1608 img.user_thumbnail {

1609 float: left;

1610 margin: 0 $lineheight/2 0 0;

1611 }

1612 }

1613

1614 /* Rules for the user list */

1615

1616 #user_list {

1617 font-size: $lineheight/2;

1618 width: 100%;

1619

1620 tr {

1621 vertical-align: middle;

1622 }

1623

1624 p {

1625 margin-top: 0px;

1626 margin-bottom: 0px;

1627 }

1628 }

1629

1630 #user_list_actions {

1631 float: right;

1632 margin-top: $lineheight/2;

1633 }

1634

1635 /* Rules for the diary list page */

1636

1637 .diary_post {

1638 position: relative;

1639 margin-top: $lineheight/2;

1640 padding-top: $lineheight;

1641 border-top: 1px solid #ccc;

1642

1643 .post_heading {

1644 margin-bottom: $lineheight;

1645

1646 h2 {

1647 margin-top: 0;

1648 margin-bottom: $lineheight/2;

1649 font-size: 24px;

1650 }

1651 }

1652

1653 img.user_thumbnail {

1654 float: left;

1655 }

1656

1657 small.deemphasize {

1658 float: left;

1659 display: block;

1660 }

1661 }

1662

1663 .content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div

1664 display: inline;

1665 }

1666

1667 /* Rules for the diary entry page */

1668

1669 .diary_entry {

1670 #map {

1671 position: relative;

1672 width: 90%;

1673 height: 400px;

1674 border: 1px solid #ccc;

1675 display: none;

1676 margin-bottom: $lineheight;

1677 }

1678 #newcomment {

1679 border-top: 1px solid #ccc;

1680 padding-top: $lineheight;

1681 margin-top: $lineheight/2;

1682 }

1683 .comments {

1684 max-width: 740px;

1685 }

1686 .diary-comment {

1687 margin-top: $lineheight/2;

1688 border-top: 1px dashed #ccc;

1689 padding-top: $lineheight/2;

1690 &:first-child {

1691 margin-top: $lineheight;

1692 padding-top: $lineheight;

1693 border-top: 1px solid #ccc;

1694 }

1695 p {

1696 margin-bottom: $lineheight/2;

1697 }

1698 .comment-heading {

1699 margin-bottom: 0;

1700 margin-top: 0;

1701 }

1702 }

1703 }

1704

1705 .diary_entry-view img.user_thumbnail {

1706 float: left;

1707 }

1708

1709

1710 .diary-subscribe-buttons {

1711 position:relative;

1712 top: -30px;

1713 left: 130px;

1714 }

1715

1716 /* Rules for the log in page */

1717

1718 #login_auth_buttons {

1719 margin-bottom: 0;

1720 }

1721

1722 #login_auth_buttons li {

1723 float: left;

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

1725 }

1726

1727 /* Rules for the account confirmation page */

1728

1729 .user-terms {

1730 .legale {

1731 border: 1px solid #ccc;

1732 padding: $lineheight;

1733 margin-bottom: $lineheight;

1734 overflow: auto;

1735 height: 20em;

1736

1737 li {

1738 list-style: inherit;

1739 }

1740

1741 ol ol {

1742 list-style-type: lower-alpha;

1743 }

1744 }

1745

1746 #decline {

1747 background: $lightblue;

1748 &:hover {

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

1750 }

1751 }

1752 }

1753

1754 /* Rules for the account settings page */

1755

1756 #accountForm .user_map {

1757 position: relative;

1758 width: 500px;

1759 height: 400px;

1760 border: 1px solid #ccc;

1761 }

1762

1763 #accountForm .user_image {

1764 margin-bottom: 0;

1765 }

1766

1767 #accountForm #user_image {

1768 margin-left: 20px;

1769 }

1770

1771 #accountForm ul.accountImage-options {

1772 margin-left: 120px;

1773 }

1774

1775 .nohome .location {

1776 display: none;

1777 }

1778

1779 #homerow .message {

1780 display: none;

1781 }

1782

1783 .nohome .message {

1784 display: inline !important;

1785 }

1786

1787 .content_map.settings_map {

1788 width: 50%;

1789 float: none;

1790 }

1791

1792 /* Rules for the oauth settings page */

1793

1794 .oauth_clients .buttons .oauth-edit {

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

1796 }

1797

1798 .oauth_clients .buttons .oauth-delete {

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

1800 }

1801

1802 /* Rules for the oauth authorization page */

1803

1804 .oauth-authorize ul {

1805 list-style: none;

1806 }

1807

1808 /* Rules for messages pages */

1809

1810 .messages {

1811 width: 100%;

1812 border: 1px solid #ddd;

1813

1814 input[type="submit"] {

1815 margin: auto;

1816 }

1817 tbody tr {

1818 border-top: 1px solid #ccc;

1819 }

1820

1821 .inbox-row {

1822 background: #f8f8ff;

1823 }

1824

1825 .inbox-row-unread {

1826 background:#CBEEA7;

1827 }

1828

1829 .right {

1830 float: right;

1831 }

1832

1833 tr td,

1834 tr th {

1835 padding: $lineheight/4;

1836 }

1837 p:last-child,

1838 h2:last-child,

1839 h3:last-child,

1840 ol:last-child,

1841 ul:last-child {

1842 margin-bottom:0;

1843 }

1844 tr td {

1845 height: 30px;

1846 border-right: 1px solid $lightgrey;

1847 }

1848 }

1849

1850 .inbox-row .inbox-mark-read {

1851 display: none;

1852 }

1853

1854 .info-line {

1855 margin-bottom: $lineheight;

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

1857 border-bottom: 1px solid #ccc;

1858

1859 form, form div {

1860 display: inline;

1861 }

1862 }

1863

1864 .info-line .user_thumbnail_tiny {

1865 vertical-align: middle;

1866 }

1867

1868 .inbox-sent {

1869 white-space: nowrap;

1870 }

1871

1872 .inbox-mark-unread,

1873 .inbox-mark-read,

1874 .inbox-delete {

1875 width: 1%;

1876 }

1877

1878 .inbox-row-unread .inbox-mark-unread {

1879 display: none;

1880 }

1881

1882 .message-read .message-buttons {

1883 margin-top: $lineheight;

1884 margin-bottom: $lineheight * 1.5;

1885 padding-top: $lineheight;

1886 border-top: 1px solid $lightgrey;

1887 }

1888

1889 .message-read .buttons .mark-unread-button {

1890 border-radius: 0;

1891 }

1892

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

1894

1895 .flash {

1896 padding: $lineheight;

1897

1898 &.error {

1899 background-color: #ff7070;

1900 }

1901

1902 &.warning {

1903 background-color: #ffe0cc;

1904 }

1905

1906 &.notice {

1907 background-color: #CBEEA7;

1908 }

1909

1910 div.message {

1911 display: inline-block;

1912 margin-left: $lineheight / 2;

1913 vertical-align: middle;

1914

1915 p {

1916 margin-top: $lineheight * 0.5;

1917 margin-bottom: $lineheight * 0.5;

1918

1919 &:first-child {

1920 margin-top: 0px;

1921 }

1922

1923 &:last-child {

1924 margin-bottom: 0px;

1925 }

1926 }

1927 }

1928 }

1929

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

1931

1932 .formError {

1933 display: inline-block;

1934 padding: 5px 10px;

1935 margin-top: 5px;

1936 border-radius: 4px;

1937 font-size: 12px;

1938 color: #fff;

1939 background-color: #ff7070;

1940 }

1941

1942 /* Rules for rails validation error boxes */

1943

1944 #errorExplanation {

1945 width: 400px;

1946 border: 2px solid #ff7070;

1947 padding: 0 $lineheight/2;

1948 margin-bottom: $lineheight;

1949 background-color: #f0f0f0;

1950

1951 h2 {

1952 margin: 0 -10px 10px -10px;

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

1954 font-weight: bold;

1955 font-size: 12px;

1956 background-color: #c00;

1957 color: #fff;

1958 text-align: left;

1959 }

1960

1961 p {

1962 color: #333;

1963 margin-bottom: 0px;

1964 padding: $lineheight/4;

1965 }

1966

1967 ul {

1968 padding-left: $lineheight;

1969

1970 li {

1971 font-size: 12px;

1972 list-style: disc;

1973 }

1974 }

1975 }

1976

1977 /* Rules for forms */

1978

1979 .standard-form {

1980 fieldset {

1981 margin-bottom: $lineheight;

1982 }

1983 label.standard-label {

1984 display: block;

1985 margin-bottom: $lineheight/4;

1986 font-size: $typeheight;

1987 font-weight: bold;

1988 line-height: 1.5;

1989 }

1990 label.standard-label.secondary {

1991 display: inline-block;

1992 font-weight: normal;

1993 }

1994 .form-help {

1995 font-weight: normal;

1996 }

1997 .form-column {

1998 float: left;

1999 margin-right: 20px;

2000 }

2001 .form-divider {

2002 margin-top: $lineheight;

2003 padding-top: $lineheight;

2004 border-top: 1px solid $lightgrey;

2005 }

2006 .horizontal-list .form-row {

2007 float: left;

2008 padding-right: 10px;

2009 }

2010 .form-row {

2011 margin-bottom: $lineheight/2;

2012 }

2013 .form-list {

2014 margin-bottom: 0;

2015 }

2016 .form-list li {

2017 margin-bottom: 5px;

2018 }

2019 input[type="checkbox"],

2020 input[type="radio"] {

2021 float: left;

2022 margin-top: 5px;

2023 }

2024 }

2025

2026 #remember_me_openid {

2027 display: block;

2028 }

2029

2030 select {

2031 padding: 2px;

2032 }

2033

2034 input[type="checkbox"],

2035 input[type="radio"] {

2036 margin-right: 5px;

2037 }

2038

2039 input[type="text"],

2040 input[type="email"],

2041 input[type="url"],

2042 input[type="password"],

2043 textarea {

2044 color: #222;

2045 background-color: #fff;

2046 border: 1px solid #ccc;

2047 padding: 2px 5px;

2048 margin: 0;

2049 width: 200px;

2050

2051 &.field_with_errors {

2052 border: 2px solid #ff7070;

2053 }

2054 }

2055

2056 textarea {

2057 padding: 5px;

2058 width: 100%;

2059 }

2060

2061 /* Rules for user images */

2062

2063 img.user_image {

2064 max-width: 100px;

2065 max-height: 100px;

2066 border: 1px solid #ccc;

2067 margin-bottom: $lineheight;

2068 float: left;

2069 margin-right: $lineheight;

2070 }

2071

2072 img.user_thumbnail {

2073 max-width: 50px;

2074 max-height: 50px;

2075 border: 1px solid #ccc;

2076 margin-right: $lineheight;

2077 }

2078

2079 img.user_thumbnail_tiny {

2080 width: auto;

2081 height: auto;

2082 max-width: 25px;

2083 max-height: 25px;

2084 border: 1px solid #ccc;

2085 }

2086

2087 /* Rules for geo microformats */

2088

2089 abbr.geo {

2090 border-bottom: none;

2091 }

2092

2093 /* Rules for RSS buttons */

2094

2095 .rsssmall {

2096 position: relative;

2097 top: 3px;

2098 }

2099

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

2101

2102 ul.secondary-actions {

2103 font-style: normal;

2104 margin-bottom: 0;

2105 margin-left: 0;

2106 &.pager {

2107 display: inline-block;

2108 margin-right: 60px;

2109 }

2110 > li {

2111 display: block;

2112 float: left;

2113 list-style: none;

2114 border-left: 1px solid #ccc;

2115 padding-left: $lineheight/2;

2116 margin-right: $lineheight/2;

2117 &:first-child {

2118 border-left: 0;

2119 padding-left: 0;

2120 }

2121 &:last-child {

2122 margin-right: 0px;

2123 }

2124 }

2125 }

2126

2127 div.secondary-actions {

2128 padding: 10px;

2129 text-align: center;

2130 }

2131

2132 /* Utility for managing inner content areas */

2133

2134 .inner22 { padding: $lineheight;}

2135

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

2137

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

2139

2140 .inner20 { padding: $lineheight 0;}

2141

2142 .inner02 { padding: 0 $lineheight;}

2143

2144 /* Utility for general button styles */

2145

2146 input[type="button"],

2147 input[type="submit"],

2148 input[type="reset"],

2149 a.button {

2150 cursor: pointer;

2151 border: 0;

2152 display: inline-block;

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

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

2155 min-width: 120px;

2156 margin: 0 0 $lineheight/2 0;

2157 color: white;

2158 background: $blue;

2159 text-align: center;

2160 border-radius: 2px;

2161 &:hover {

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

2163 text-decoration: none;

2164 }

2165 &.deemphasize {

2166 background: $lightblue;

2167 &:hover {

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

2169 }

2170 }

2171 &:disabled {

2172 background: $lightgrey;

2173 &:hover {

2174 background: $lightgrey;

2175 }

2176 }

2177 &:last-child {

2178 margin-bottom: 0;

2179 }

2180 }

2181

2182 input[type="button"],

2183 input[type="submit"],

2184 input[type="reset"] {

2185 line-height: normal;

2186 }

2187

2188 a.button {

2189 line-height: 20px;

2190 }

2191

2192 .buttons {

2193 min-width: 200px;

2194 input[type="submit"],

2195 input[type="button"],

2196 input[type="reset"],

2197 .button,

2198 .button_to {

2199 box-sizing: border-box;

2200 float: left;

2201 border-radius: 0;

2202 margin:0;

2203 min-width: 75px;

2204 max-width: 180px;

2205 border-right:1px solid white;

2206 text-overflow: ellipsis;

2207 white-space: nowrap;

2208 overflow: hidden;

2209 }

2210 input:first-child,

2211 .button:first-child,

2212 .button_to:first-child {

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

2214 }

2215 input:last-child,

2216 .button:last-child,

2217 .button_to:last-child {

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

2219 border-right-width: 0;

2220 }

2221 input:only-child,

2222 .button:only-child,

2223 .button_to:only-child,

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

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

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

2227 border-radius:2px;

2228 border-right-width: 0;

2229 }

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

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

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

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

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

2235 border-right-width: 0;

2236 }

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

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

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

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

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

2242 border-right-width: 1px;

2243 }

2244 }

2245

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

2247

2248 .table0,

2249 .item0 {

2250 background: $offwhite;

2251 }

2252

2253 .table1,

2254 .item1 {

2255 background: #fff;

2256 }

2257

2258 /* Rules for OpenID logo */

2259

2260 .openid_logo {

2261 vertical-align: text-bottom;

2262 border: 0;

2263 }

2264

2265 /* Rules for rich text */

2266

2267 .richtext,

2268 .prose {

2269 h1, h2 {

2270 padding-bottom: $lineheight/2;

2271 border-bottom: 1px dashed #cccccc;

2272 margin-bottom: $lineheight/2;

2273 }

2274

2275 h1 {

2276 font-size: 24px;

2277 }

2278

2279 h2 {

2280 font-size: 18px;

2281 }

2282

2283 h3 {

2284 font-size: $typeheight;

2285 }

2286

2287 code {

2288 font-size: 13px;

2289 background: #e8e8e8;

2290 padding: 2px 3px;

2291 }

2292

2293 pre {

2294 font-size: 13px;

2295 background: #e8e8e8;

2296 padding: 2px 3px;

2297

2298 code {

2299 padding: 0;

2300 }

2301 }

2302

2303 img {

2304 padding: $lineheight;

2305 background-color: $offwhite;

2306 display: block;

2307 max-width: 100%;

2308 margin: auto;

2309 }

2310

2311 blockquote {

2312 border-left: $lineheight solid $offwhite;

2313 padding-left: $lineheight;

2314 margin: 0;

2315 color: #7E7E7E;

2316 }

2317

2318 ul, ol {

2319 padding-left: $lineheight;

2320 margin-bottom: $lineheight;

2321 margin-left: $lineheight;

2322 }

2323

2324 ul li {

2325 list-style: disc;

2326 }

2327

2328 ol li {

2329 list-style: decimal;

2330 }

2331 }

2332

2333 .diary_post .richtext {

2334 margin-top: $lineheight;

2335 }

2336

2337 .comments .richtext {

2338 margin-left: 70px;

2339 margin-top: 0;

2340 }

2341

2342 /* Rules for rich text editors */

2343

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

2345 width: 50%;

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

2347

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

2349 width: 100%;

2350 }

2351 }

2352

2353 .richtext_container {

2354 margin-bottom: $lineheight;

2355

2356 .richtext_content {

2357 width: 50%;

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

2359 display: inline-block;

2360 vertical-align: top;

2361

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

2363 width: 100%;

2364 }

2365

2366 .richtext_preview {

2367 display: inline-block;

2368 padding: $lineheight;

2369 background-color: $offwhite;

2370 overflow-x: auto;

2371

2372 &.loading {

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

2374 background-repeat: no-repeat;

2375 background-position: center;

2376 }

2377

2378 > :first-child {

2379 margin-top: 0px;

2380 }

2381 }

2382 }

2383

2384 .richtext_help {

2385 display: inline-block;

2386 vertical-align: top;

2387 margin-left: 15px;

2388 background-color: #f8f8ff;

2389 padding: $lineheight/2;

2390 width: 220px;

2391

2392 ul {

2393 margin-bottom: 0;

2394 }

2395

2396 h4.heading, li {

2397 border-bottom: 1px solid #ccc;

2398 margin-bottom: $lineheight/4;

2399 padding-bottom: $lineheight/4;

2400 }

2401

2402 li h4, li span, li p {

2403 display: inline-block;

2404 vertical-align: top;

2405 font-size: 11px;

2406 }

2407

2408 li h4 {

2409 width: 40%;

2410 margin: 0;

2411 }

2412

2413 li span, li p {

2414 width: 50%;

2415 margin-left: $lineheight/2;

2416 margin-bottom: $lineheight/4;

2417 white-space: nowrap;

2418 }

2419 }

2420 }

2421

2422 /* Rules for the user notes list */

2423

2424 .note_list {

2425 tr.creator {

2426 background-color: #eeeeee;

2427 }

2428

2429 td {

2430 padding: 3px;

2431 }

2432

2433 p {

2434 margin-bottom: 0px;

2435 }

2436 }

2437

2438 /* Rules for the iD editor */

2439

2440 .id-embed {

2441 width: 100%;

2442 height: 100%;

2443 }

2444

2445 /* Rules for dropdown menus */

2446

2447 .dropdown {

2448 position: relative;

2449 }

2450

2451 .dropdown-toggle {

2452 *margin-bottom: -3px;

2453 }

2454

2455 .dropdown-toggle:active,

2456 .open .dropdown-toggle {

2457 outline: 0;

2458 }

2459

2460 .caret {

2461 display: inline-block;

2462 width: 0;

2463 height: 0;

2464 vertical-align: top;

2465 border-top: 4px solid #000000;

2466 border-right: 4px solid transparent;

2467 border-left: 4px solid transparent;

2468 content: "";

2469 }

2470

2471 .dropdown .caret {

2472 margin-top: 8px;

2473 margin-left: 2px;

2474 }

2475

2476 .dropdown-menu {

2477 position: absolute;

2478 top: 100%;

2479 left: -1px;

2480 z-index: 1000;

2481 display: none;

2482 float: left;

2483 min-width: 160px;

2484 padding: 5px 0;

2485 margin: 0;

2486 list-style: none;

2487 background-color: #ffffff;

2488 border: 1px solid #ccc;

2489 border-radius: 0 3px 3px;

2490 *border-right-width: 2px;

2491 *border-bottom-width: 2px;

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

2493 background-clip: padding-box;

2494 }

2495

2496 .dropdown-menu.pull-right {

2497 right: 0;

2498 left: auto;

2499 }

2500

2501 .dropdown-menu .divider {

2502 *width: 100%;

2503 height: 1px;

2504 margin: 9px 1px;

2505 *margin: -5px 0 5px;

2506 overflow: hidden;

2507 background-color: #e5e5e5;

2508 border-bottom: 1px solid #ffffff;

2509 }

2510

2511 .dropdown-menu > li > a {

2512 display: block;

2513 padding: 3px 10px;

2514 clear: both;

2515 font-weight: normal;

2516 line-height: 20px;

2517 color: #333333;

2518 white-space: nowrap;

2519 }

2520

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

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

2523 .dropdown-submenu:hover > a,

2524 .dropdown-submenu:focus > a {

2525 color: #ffffff;

2526 text-decoration: none;

2527 background-color: $green;

2528 }

2529

2530 .dropdown-menu > .active > a,

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

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

2533 color: #ffffff;

2534 text-decoration: none;

2535 background-color: $green;

2536 outline: 0;

2537 }

2538

2539 .dropdown-menu > .disabled > a,

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

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

2542 color: #999999;

2543 }

2544

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

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

2547 text-decoration: none;

2548 cursor: default;

2549 background-color: transparent;

2550 background-image: none;

2551 }

2552

2553 .open {

2554 *z-index: 1000;

2555 }

2556

2557 .open > .dropdown-menu {

2558 display: block;

2559 }

2560

2561 .dropdown-backdrop {

2562 position: fixed;

2563 top: 0;

2564 right: 0;

2565 bottom: 0;

2566 left: 0;

2567 z-index: 990;

2568 }

2569

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

2571 .site-welcome, .site-fixthemap {

2572 .center {

2573 text-align: center;

2574 .sprite {

2575 float: none;

2576 margin: auto;

2577 }

2578 }

2579

2580 .sprite {

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

2582 background-size: 500px 250px;

2583 display: block;

2584 float: left;

2585 }

2586

2587 .icon-list {

2588 padding-bottom: 20px;

2589 div {

2590 margin-bottom: 10px;

2591 p {

2592 padding-top: 10px;

2593 }

2594 }

2595 }

2596 .sprite.small {

2597 width: 50px;

2598 height: 50px;

2599 }

2600

2601 .sprite.x {

2602 background-position: -50px 0;

2603 }

2604

2605 .sprite.term {

2606 margin-right: 10px;

2607 vertical-align: middle;

2608 }

2609

2610 .sprite.node {

2611 background-position: -100px 0;

2612 }

2613

2614 .sprite.way {

2615 background-position: -150px 0;

2616 }

2617

2618 .sprite.tag {

2619 background-position: -200px 0;

2620 }

2621

2622 .sprite.editor {

2623 background-position: -250px 0;

2624 }

2625

2626 .sprite.question {

2627 background-position: -300px 0;

2628 }

2629

2630 .sprite.rules {

2631 background-position: -350px 0;

2632 }

2633

2634 .start-mapping {

2635 margin: auto;

2636 cursor: pointer;

2637 border: none;

2638 padding: 20px 40px;

2639 font-size: 30px;

2640 text-decoration: none;

2641 }

2642

2643 .note-box {

2644 margin-top: 20px;

2645 background-color: $offwhite;

2646 }

2647

2648 .icon.note {

2649 background-color: #333;

2650 border-radius: 4px;

2651 }

2652 }

2653

2654 .site-about #content {

2655 //background-color: #000;

2656 background-color: #eee;

2657 background-position: 50% 50%;

2658 background-repeat: no-repeat;

2659 background-size: cover;

2660 background-attachment: fixed;

2661

2662 .caption {

2663 max-width: 200px;

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

2665 position: fixed;

2666 text-align: right;

2667 right: 20px;

2668 bottom: 60px;

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

2670 color: #eee;

2671 opacity: 0.8;

2672 display: none;

2673 }

2674

2675 .caption a {

2676 color: white;

2677 white-space: nowrap;

2678 text-decoration: none;

2679 }

2680

2681 a.next {

2682 display: block;

2683 position: fixed;

2684 right: 10px;

2685 bottom: 10px;

2686 width: 40px;

2687 height: 40px;

2688 border-radius: 5px;

2689 text-indent: -9999px;

2690 overflow: hidden;

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

2692 background-color: #000;

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

2694 }

2695

2696 .content-inner {

2697 position: relative;

2698 color: #333;

2699 min-width: 320px;

2700 max-width: 640px;

2701

2702 .section {

2703 margin-bottom: 30px;

2704 }

2705

2706 .section:last-child {

2707 margin-bottom: 0;

2708 }

2709 }

2710

2711 .text {

2712 background: white;

2713 padding: 40px;

2714 }

2715

2716 .attr {

2717 position: relative;

2718 padding: 170px 40px 20px;

2719 background: #333;

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

2721 margin-bottom: 0;

2722 margin-top: -20px;

2723

2724 h1 {

2725 display: block;

2726 color: white;

2727 font-weight: 300;

2728 font-size: 34px;

2729 span {

2730 color: #76c551;

2731 }

2732 }

2733

2734 .user-image {

2735 position: absolute;

2736 top: 0px;

2737 right: 240px;

2738 left: 0px;

2739 height: 150px;

2740 background-position: 0 50%;

2741 background-repeat: no-repeat;

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

2743 background-size: cover;

2744 background-color: #76c551;

2745 }

2746

2747 .byosm {

2748 position: absolute;

2749 top: 0px;

2750 right: 0px;

2751 z-index: 1;

2752 width: 240px;

2753 height: 150px;

2754 padding: 20px 20px 20px 40px;

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

2756 white-space: nowrap;

2757 color: #fff;

2758 background: #76c551;

2759 }

2760

2761 .byosm span {

2762 display: inline-block;

2763 width: 20px;

2764 margin-left: -20px;

2765 }

2766 }

2767

2768 h2 {

2769 margin-bottom: 10px;

2770 }

2771

2772 .icon {

2773 width: 30px;

2774 height: 30px;

2775 margin-right: 10px;

2776 vertical-align: middle;

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

2778

2779 &.local { background-position: 0px 0px; }

2780 &.community { background-position: 0px -40px; }

2781 &.open { background-position: 0px -80px; }

2782 &.partners { background-position: 0px -120px; }

2783 &.infringement { background-position: 0px -160px; }

2784 &.legal { background-position: -45px -160px; }

2785 }

2786 }

2787

2788 @import 'browse';

2789

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

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

2792 display: none;

2793 }

2794 }