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

1 /* Parameters */

2 $lineheight: 20px;

3 $typeheight: 14px;

5 $offwhite: #f4f4ff;

6 $blue: #7092FF;

7 $lightblue: #B8C5F0;

8 $green: #7ebc6f;

9 $grey: #CCC;

10 $red: red;

11 $lightgrey: #EEE;

12 $darkgrey: #AAA;

13 $hovercolor: 20%;

14 $headerHeight: 54px;

15 $sidebarWidth: 300px;

16 $keyline: 1px solid $lightgrey;

17 $border-radius: 3px;

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

21 /* Minimal CSS reset */

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

24 margin: 0;

25 padding: 0;

26 border: 0;

27 font-size:100%;

28 }

30 fieldset,img { border: 0; }

32 legend { color: #000; }

34 sup { vertical-align: text-top; }

36 sub { vertical-align: text-bottom; }

38 table {

39 border-collapse: collapse;

40 border-spacing: 0;

41 }

43 li { list-style: none; }

45 input,

46 select,

47 textarea,

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

50 abbr, acronym {

51 border-bottom: .1em dotted;

52 cursor: help;

53 }

55 strong { font-weight: 500; }

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

59 .clearfix:before,

60 .clearfix:after {

61 content: " ";

62 display: table;

63 }

65 .clearfix:after {

66 clear: both;

67 }

69 /* Basic grid */

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

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

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

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

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

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

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

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

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

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

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

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

83 .col12 { width:100%; }

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

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

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

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

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

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

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

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

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

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

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

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

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

99 .fillL { background-color: white; }

100

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

102

103 * {

104 -webkit-box-sizing: border-box;

105 -moz-box-sizing: border-box;

106 box-sizing: border-box;

107 }

108

109 body {

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

111 font-size: $typeheight;

112 line-height: 1.6666;

113 color: #222;

114 background-color: #fff;

115 margin: 0px;

116 padding: 0px;

117 text-align: left;

118 height: 100%;

119 }

120

121 body.slim {

122 background-color: #f0f0f0;

123 }

124

125 h1, h2, h3 {

126 font-weight: 500;

127 line-height: 1.2;

128 }

129

130 h4, h5 { font-weight: 500; }

131

132 h1 {

133 font-size: 18px;

134 }

135

136 h2, h3 {

137 font-size: 16px;

138 }

139

140 p > img {

141 width: auto;

142 max-width: 100%;

143 }

144

145 small, aside {

146 font-size: 12px;

147 }

148

149 #container { position: relative; }

150

151 .column-1 {

152 width: 50%;

153 margin: 0 0 $lineheight/2 0;

154 }

155

156 .small_icon {

157 vertical-align: middle;

158 margin-right: $lineheight/4;

159 }

160

161 .red { color: $red; }

162

163 /* Rules for icons */

164

165 .icon {

166 display:inline-block;

167 vertical-align:top;

168 width:20px;

169 height:20px;

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

171 text-indent:-9999px;

172 overflow:hidden;

173 }

174

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

190 .icon.gear { background-position: -260px 0; }

191

192 /* Rules for links */

193

194 a {

195 color: #00f;

196 text-decoration: none;

197 -webkit-appearance: none;

198 outline: 0;

199 &:hover {

200 text-decoration: underline;

201 }

202 }

203

204 /* Rules for horizontal lines */

205

206 hr {

207 border: none;

208 background-color: #ccc;

209 color: #ccc;

210 height: 1px;

211 }

212

213 /* General styles for tables */

214

215 table {

216 width: 100%;

217 margin-bottom: $lineheight;

218 th, td {

219 text-align: left;

220 padding: $lineheight/4;

221 line-height: $lineheight;

222 }

223 th {

224 font-weight: 500;

225 vertical-align: top;

226 }

227 td {

228 vertical-align: middle;

229 }

230 }

231

232 /* Utility for de-emphasizing content */

233

234 .deemphasize {

235 color: #999;

236 a {

237 color: $blue;

238 }

239 }

240

241 /* Rules for the header */

242

243 #menu-icon {

244 display: none !important;

245 float: right;

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

247 background-size: 30px 30px;

248 display: block;

249 width: 30px;

250 height: 30px;

251 margin: 14px 10px 0 0;

252 opacity: 0.6;

253 }

254

255 header {

256 height: $headerHeight;

257 position: relative;

258 z-index: 1001;

259 font-size: 13px;

260

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

262 display: inline-block;

263 }

264

265 > * {

266 height: 100%;

267 padding: $lineheight/2 $lineheight;

268 }

269

270 h1, nav.primary {

271 float: left;

272 }

273

274 a, a:hover {

275 text-decoration: none;

276 }

277

278 img.logo {

279 width: 30px;

280 height: 30px;

281 margin-top: -4px;

282 vertical-align: middle;

283 }

284

285 h1 {

286 margin: 0;

287 padding: ($lineheight - 3) $lineheight ($lineheight + 3);

288

289 a {

290 color: #000;

291 }

292 }

293 }

294

295 nav.primary {

296 > ul {

297 $border: 1px solid $green;

298

299 border: $border;

300 border-radius: $border-radius;

301

302 > li {

303 border-right: $border;

304 float: left;

305 &:last-child {

306 border-right: 0;

307 > a { border-radius: 0 $border-radius $border-radius 0; }

308 }

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

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

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

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

313 &.dropdown {

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

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

316 }

317 }

318 }

319

320 a.tab,

321 .dropdown-toggle {

322 display: inline-block;

323 font-weight: 500;

324 color: $green;

325 padding: 5px 15px;

326 }

327

328 .dropdown-toggle {

329 padding: 5px 6px;

330 }

331

332 .caret {

333 border-top-color: $green;

334 margin-top: 10px;

335 }

336

337 .disabled a {

338 color: #ccc;

339 cursor: default;

340

341 .caret {

342 border-top-color: #ccc;

343 }

344 }

345

346 > ul li.current {

347 background-color: $green;

348

349 .tab {

350 color: #fff;

351 }

352

353 .caret {

354 border-top-color: #fff;

355 }

356 }

357 }

358

359 nav.secondary {

360 position: absolute;

361 right: 0;

362

363 > ul {

364 vertical-align: middle;

365 a, .dropdown-toggle {

366 display: inline-block;

367 text-decoration: none;

368 color: $darkgrey;

369 padding: 5px;

370

371 &:hover { color: darken($darkgrey, 10%); }

372 }

373 }

374

375 > ul li.current a {

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

377 }

378

379 .user-menu {

380 $border: 1px solid $grey;

381

382 font-weight: 500;

383 border: $border;

384 border-radius: $border-radius;

385 margin-left: 10px;

386

387 > li {

388 border-right: $border;

389 float: left;

390 &:last-child {

391 border-right: 0;

392

393 > a {

394 border-radius: 0 $border-radius $border-radius 0;

395 }

396 }

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

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

399 }

400

401 a {

402 padding: 5px 15px;

403

404 }

405

406 &.logged-in > a {

407 padding: 0;

408 > .user-button {

409 padding: 5px 10px 5px 6px;

410 display: inline-block;

411 color: $darkgrey;

412 }

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

414 }

415 }

416

417 .caret {

418 border-top-color: $grey;

419 margin-top: 9px;

420 }

421

422 img.user_thumbnail_tiny {

423 border: 0;

424 vertical-align: top;

425 margin-top: 0px;

426 margin: 3px 0 0 3px;

427 border-radius: 2px;

428 }

429

430 #inboxanchor {

431 display: inline-block;

432 vertical-align: top;

433 height: 25px;

434 margin: 3px 0 3px 3px;

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

436 line-height: 20px;

437 border-radius: 2;

438 }

439

440 .dropdown-menu {

441 left: auto;

442 right: -1px;

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

444

445 .count-number {

446 float: right;

447 padding: 0 5px;

448 margin: 0;

449 }

450 }

451 }

452

453 a#ad {

454 width: 100%;

455 display: block;

456 background: rgb(240,151,53);

457 z-index: 999;

458 padding: 1px $lineheight;

459 color: #fff;

460 font-size: 11px;

461 text-transform: uppercase;

462 span.close {

463 float: right;

464 color: #fff;

465 font-size: 10px;

466 line-height: 18px;

467 opacity: .5;

468 text-transform: none;

469 &:hover { opacity: .9; }

470 }

471 &:hover {

472 background: rgb(220,151,53);

473 text-decoration: none;

474 }

475 }

476

477 #compact-secondary-nav {

478 display: none;

479 ul li a {

480 width: 100%;

481 color: #333;

482 &:hover { color: #fff; }

483 }

484 }

485

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

487 #compact-secondary-nav {

488 display: inline-block;

489 }

490 .compact-hide {

491 display: none;

492 }

493 }

494

495

496 /* Utility for styling notification numbers */

497

498 .count-number {

499 padding: 2px $lineheight/4;

500 border-radius: 2px;

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

502 margin: 0 2px;

503 font-size: 11px;

504 color: #333;

505 }

506

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

508

509 #noscript {

510 z-index: 20000000;

511 position: absolute;

512 top: 15px;

513 left: 15px;

514 }

515

516 /* Rules for bootstrap tooltips */

517

518 .tooltip {

519 position: absolute;

520 display: none;

521 color: #333;

522 text-align: left;

523 font-size: 12px;

524 max-width: 250px;

525 }

526

527 .tooltip.in {

528 opacity: 0.8;

529 z-index: 1030;

530 height: auto;

531 display: block;

532 }

533

534 .tooltip.top {

535 margin-top: -10px;

536 text-align: center;

537 }

538

539 .tooltip.right {

540 margin-left: 10px;

541 }

542

543 .tooltip.bottom {

544 margin-top: 10px;

545 text-align: center;

546 }

547

548 .tooltip.left {

549 margin-left: -10px;

550 text-align: right;

551 }

552

553 .tooltip-inner {

554 display: inline-block;

555 padding: 10px;

556 font-weight: normal;

557 background-color: white;

558 }

559

560 .tooltip-arrow {

561 position: absolute;

562 width: 0;

563 height: 0;

564 border-color: transparent;

565 border-style: solid;

566 }

567

568 .tooltip.top .tooltip-arrow {

569 bottom: -5px;

570 left: 50%;

571 margin-left: -5px;

572 border-top-color: white;

573 border-width: 5px 5px 0;

574 }

575

576 .tooltip.right .tooltip-arrow {

577 top: 50%;

578 left: -5px;

579 margin-top: -5px;

580 border-right-color: white;

581 border-width: 5px 5px 5px 0;

582 }

583

584 .tooltip.left .tooltip-arrow {

585 top: 50%;

586 right: -5px;

587 margin-top: -5px;

588 border-left-color: white;

589 border-width: 5px 0 5px 5px;

590 }

591

592 .tooltip.bottom .tooltip-arrow {

593 top: -5px;

594 left: 50%;

595 margin-left: -5px;

596 border-bottom-color: white;

597 border-width: 0 5px 5px;

598 }

599

600 /* Rules for Leaflet maps */

601

602 .leaflet-control .control-button {

603 display: block;

604 height: 40px;

605 width: 40px;

606 background-color: #333;

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

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

609 margin-bottom: 10px;

610 outline: none;

611

612 &:hover {

613 background-color: black;

614 }

615

616 &.active {

617 background-color: #9ed485;

618 }

619

620 &.disabled {

621 background-color: #333;

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

623 cursor: default;

624 }

625

626 .icon {

627 margin: 10px;

628 }

629 }

630

631 .leaflet-control .zoomin,

632 .control-layers .control-button {

633 margin-bottom: 0px;

634 border-radius: 4px 0 0 0;

635 }

636

637 .leaflet-control .zoomout,

638 .control-key .control-button {

639 margin-bottom: 0;

640 border-radius: 0;

641 }

642

643 .control-locate .control-button,

644 .control-share .control-button {

645 border-radius: 0 0 0 4px;

646 }

647

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

649

650 .map-layout {

651 #content {

652 position: absolute;

653 top: $headerHeight;

654 bottom: 0;

655 width: 100%;

656 }

657

658 #sidebar, #map {

659 position: relative;

660 height: 100%;

661 overflow-x: hidden;

662 overflow-y: auto;

663 }

664

665 #sidebar {

666 float: left;

667 width: $sidebarWidth;

668

669 h2, h3, h4 {

670 padding: $lineheight $lineheight $lineheight/2;

671 }

672

673 h4, span.user, span.date {

674 font-weight: normal;

675 color: #666;

676 font-size: 12px;

677 }

678

679 .icon.close {

680 position: absolute;

681 right: $lineheight;

682 cursor: pointer;

683 }

684

685 .footer {

686 position: absolute;

687 bottom: 0;

688 }

689

690 p.credits {

691 font-size: 11px;

692 color: #999;

693

694 a {

695 color: #666;

696 }

697 }

698

699 p.large-text {

700 font-size: 1.7em;

701 line-height: 1.4em;

702 font-weight: 300;

703 }

704 }

705

706 #sidebar.minimized {

707 position: absolute;

708 z-index: 1000;

709 height: auto;

710 border-right: none;

711

712 #sidebar_content {

713 display: none;

714 }

715

716 #search_form {

717 background: none;

718 width: 78%;

719 }

720

721 a#ad {

722 margin: 0 $lineheight;

723 width: 64%;

724 padding: 0 6px;

725 border-radius: 3px;

726 }

727 }

728

729 #map {

730 height: 100%;

731 overflow: hidden;

732 }

733

734 #map-ui {

735 display: none;

736 position: relative;

737 float: right;

738 width: 250px;

739 height: 100%;

740 background: white;

741 overflow: auto;

742

743 .section {

744 border-bottom: 1px solid #DDD;

745 padding: 10px 20px;

746 }

747

748 a.close-button {

749 float: right;

750 padding:5px;

751 font-size:20px;

752 line-height:10px;

753 color:#222;

754 border:1px solid #ddd;

755 }

756 }

757 }

758

759 .layers-ui,

760 .share-ui {

761 li:last-child {

762 margin-bottom: 0;

763 }

764 }

765

766 .layers-ui {

767 .base-layers {

768 .leaflet-container {

769 width: 100%;

770 height: 50px;

771 cursor: pointer;

772 }

773

774 li {

775 overflow: hidden;

776 border-radius: 3px;

777 border: 2px solid #fff;

778 margin-bottom: 8px;

779 position: relative;

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

781

782 label {

783 position: absolute;

784 top: 0;

785 left: 0;

786 padding: 2px 6px;

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

788 cursor: pointer;

789 font-weight: 500;

790 font-size: 16px;

791 text-stroke: 2px #fff;

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

793 text-shadow:

794 -2px -2px 1px #fff,

795 2px -2px 1px #fff,

796 -2px 2px 1px #fff,

797 2px 2px 1px #fff;

798 input[type="radio"] {

799 display: none;

800 }

801 }

802

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

804 &:hover {

805 border-color: $grey;

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

807 }

808 }

809 }

810

811 .overlay-layers {

812 p {

813 font-size: 13px;

814 margin-bottom: 8px;

815 }

816 }

817 }

818

819 .share-ui {

820 .share-tabs {

821 margin-bottom: 10px;

822

823 a {

824 color: #fff;

825 text-decoration: none;

826 background-color: $lightblue;

827 padding: 5px 10px;

828 }

829

830 a:first-child {

831 border-right: 1px solid #fff;

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

833 }

834

835 a:last-child {

836 border-left: 1px solid #fff;

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

838 }

839

840 a.active {

841 background-color: $blue;

842 }

843 }

844

845 .share-tab {

846 display: none;

847 }

848

849 .share-link {

850 input[type=text],

851 textarea {

852 width: 100%;

853 font-family: monospace;

854 font-size: small;

855 line-height: 1.3;

856 }

857 }

858

859 .share-image {

860 label {

861 margin-right: 10px;

862 }

863 }

864

865 #embed_html {

866 resize: vertical;

867 }

868

869 #mapnik_scale {

870 width: 100px;

871 }

872 }

873

874 .leaflet-top.leaflet-right {

875 top: $lineheight !important;

876 .leaflet-control {

877 margin-right: 0px !important;

878 margin-top: 0px !important;

879 }

880 }

881

882 .leaflet-popup-scrolled {

883 padding-right: $lineheight;

884 border-bottom: 0px !important;

885 border-top: 0px !important;

886 }

887

888 .leaflet-popup-content-wrapper {

889 border-radius: 4px !important;

890 -webkit-border-radius: 4px !important;

891 }

892

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

894

895 #attribution {

896 display: none;

897 }

898

899 .attribution_license,

900 .attribution_project {

901 text-align: left;

902 }

903

904 .attribution_notice {

905 text-align: center;

906 }

907

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

909

910 /* Rules for the sidebar */

911

912 .sidebar_heading {

913 position: relative;

914 padding: $lineheight/2 $lineheight;

915 // background: $offwhite;

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

917 > .close {

918 float: right;

919 margin-top: 2px;

920 cursor: pointer;

921 }

922 }

923

924 #ad + #sidebar_content {

925 top: 70px;

926 }

927

928 #sidebar_content {

929 position: absolute;

930 top: 50px;

931 bottom: 0;

932 width: 100%;

933 overflow-y: auto;

934

935 .loader,

936 .load_more {

937 text-align: center;

938 margin: $lineheight auto;

939 width: $lineheight;

940 display: block;

941 }

942 }

943

944 /* Rules for the search box */

945

946 #search_form {

947 position: relative;

948 padding: $lineheight/2 $lineheight;

949 background-color: $lightgrey;

950

951 #query_wrapper {

952 position: relative;

953 overflow: hidden;

954 }

955

956 input {

957 width: 100%;

958 height: 30px;

959 border-right: none;

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

961

962 transition: 300ms linear;

963 -webkit-transition: 300ms linear;

964 -moz-transition: 300ms linear;

965 }

966

967 input:focus {

968 outline: none;

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

970 }

971

972 input[type=submit] {

973 float: right;

974 width: auto;

975 min-width: 0;

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

977 }

978

979 #describe_location {

980 position: absolute;

981 top: 6px;

982 right: 6px;

983 font-size: 10px;

984 color: $blue;

985 }

986 }

987

988 /* Rules for donation request box */

989

990 a.donate {

991 display: block;

992 padding: $lineheight/4 $lineheight;

993 border: 1px solid $green;

994 font-size: $typeheight;

995 line-height: 1.4;

996 text-align: center;

997 border-radius: 2px;

998 color: #222;

999 margin: $lineheight/2 $lineheight;

1000

1001 &:hover {

1002 background: $green;

1003 text-decoration: none;

1004 }

1005 }

1006

1007 /* Rules for rotating sidebar ads */

1008

1009 .ad-container {

1010 display: block;

1011 height: 120px;

1012 margin: auto;

1013 overflow: hidden;

1014 position: relative;

1015 border-bottom: 1px solid #ccc;

1016

1017 a {

1018 display: block;

1019 width: 165px;

1020 margin: auto;

1021 }

1022

1023 .ad {

1024 height: 100px;

1025 border: 0;

1026 background: #fff;

1027 }

1028 }

1029

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

1031

1032 #mapkey {

1033 .mapkey-table-key img {

1034 display: block;

1035 margin-left: auto;

1036 margin-right: auto;

1037 }

1038 td {

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

1040 }

1041 }

1042

1043 /* Rules for search results which appear in the popout sidebar */

1044

1045 .search_results_entry {

1046 ul li {

1047 border-bottom: $keyline;

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

1049 }

1050

1051 .search_details {

1052 display: block;

1053 float: right;

1054 text-align: right;

1055 margin-top: 0.2em;

1056 margin-left: 0.5em;

1057 }

1058 }

1059

1060 .search_results_error {

1061 color: #f00;

1062 }

1063

1064 /* Rules for data browser information which appears in the popout sidebar */

1065

1066 #browse_content {

1067 position: relative;

1068 .browse_show_list.button {

1069 position: absolute;

1070 left: $lineheight;

1071 right: $lineheight;

1072 bottom: -40px;

1073 margin-bottom: 0;

1074 }

1075 a.more-details {

1076 position: absolute;

1077 top: 0;

1078 right: $lineheight;

1079 }

1080 ul li {

1081 margin-bottom: 0;

1082 }

1083 }

1084

1085 /* Rules for entity history */

1086 #sidebar_content {

1087 .browse_details {

1088 position: relative;

1089 border-bottom: $keyline;

1090 }

1091 }

1092

1093 .browse_status {

1094 display: none;

1095 }

1096

1097 /* Rules for the changeset list shown by the history tab */

1098

1099 #sidebar .changesets {

1100 li {

1101 padding: $lineheight;

1102 border-bottom: $keyline;

1103 cursor: pointer;

1104

1105 &.selected { background: #FFFFE6; }

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

1107 }

1108

1109 .comment a {

1110 font-weight: 500;

1111 color: #000;

1112 }

1113 }

1114

1115 /* Rules for the data browser */

1116

1117 #sidebar_content {

1118 .browse-section {

1119 padding: 10px 20px;

1120

1121 h4 {

1122 padding: 0;

1123 border-radius: 3px;

1124

1125 &.paginate {

1126 margin-top: 4px;

1127 padding: 1px 6px;

1128 border: 1px solid #eee;

1129 span {

1130 padding: 0 0 0 14px;

1131 float: right;

1132 border-left: 1px solid #eee;

1133 > a { padding-left: 5px; }

1134 }

1135 }

1136 }

1137 }

1138

1139 .paginate ul, .note-comments ul {

1140 padding-left: 20px;

1141 }

1142

1143 .browse-field {

1144 margin-bottom: 10px;

1145

1146 h4 {

1147 padding: 5px 0 5px 10px;

1148 font-size: 12px;

1149 border: 1px solid #CCC;

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

1151 background-color: #F6F6F6;

1152 }

1153

1154 p {

1155 padding: 7px 10px;

1156 font-size: 12px;

1157 background-color: #FFF;

1158 border: 1px solid #CCC;

1159 border-top: 0;

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

1161 }

1162 }

1163

1164 .browse-tag-list {

1165 border-top: 1px solid #ddd;

1166 border-bottom: 1px solid #ddd;

1167 font-size: 12px;

1168 margin-left: -$lineheight;

1169 margin-right: -$lineheight;

1170

1171 li {

1172 border-bottom: 1px solid #ddd;

1173 }

1174

1175 li:last-child {

1176 border-bottom: 0;

1177 }

1178

1179 .browse-tag-k,

1180 .browse-tag-v {

1181 display: inline-block;

1182 width: 50%;

1183 height: 30px;

1184 float: left;

1185 padding: 6px 10px 6px $lineheight;

1186 }

1187

1188 .browse-tag-k {

1189 font-weight: 500;

1190 background-color: #F6F6F6;

1191 }

1192

1193 .browse-tag-v {

1194 border-left: 1px solid #ddd;

1195 }

1196 }

1197 }

1198

1199 /* Rules for export information which appears in the popout sidebar */

1200

1201 .export_bounds {

1202 text-align: center;

1203 }

1204

1205 .export_area_inputs {

1206 margin-bottom: $lineheight/2;

1207 input[type="text"] {

1208 width: 80px;

1209 margin-bottom: 5px;

1210 }

1211 }

1212

1213 .export_bound {

1214 margin: $lineheight/4;

1215 }

1216

1217 #export_osm {

1218 span.small-title {

1219 font-weight: 500;

1220 display: block;

1221 font-size: 14px;

1222 padding-bottom: 5px;

1223 }

1224

1225 dl {

1226 padding-left: 30px;

1227 font-size: 13px;

1228 color: #666;

1229 dd {

1230 margin-left: 0;

1231 margin-bottom: 10px;

1232 }

1233 }

1234 }

1235

1236 /* Rules for edit pages */

1237

1238 .site-edit {

1239 #content {

1240 position: absolute;

1241 top: $headerHeight;

1242 bottom: 0;

1243 width: 100%;

1244 }

1245

1246 #map {

1247 height: 100%;

1248 }

1249 }

1250

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

1252

1253 .content-heading {

1254 background: $lightgrey;

1255

1256 h1 { font-size: 22px; }

1257 }

1258

1259 .content-body {

1260 h1, h2, h3, p {

1261 margin-bottom: $lineheight;

1262 }

1263

1264 h1, h2, h3 {

1265 margin-top: $lineheight/2;

1266 }

1267 }

1268

1269 .content-inner {

1270 position: relative;

1271 max-width: 900px;

1272 margin: auto;

1273 padding: $lineheight;

1274 }

1275

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

1277

1278 .user-new,

1279 .user-create,

1280 .user-terms {

1281 .content-body .content-inner {

1282 padding: 0;

1283 }

1284 }

1285

1286 .user-new,

1287 .user-create,

1288 .user-terms,

1289 .user-confirm {

1290 .content-heading .content-inner {

1291 height: 200px;

1292 }

1293 }

1294

1295 .header-illustration {

1296 background-position: 0 0;

1297 background-repeat: no-repeat;

1298 position: absolute;

1299 height: 200px;

1300 width: 100%;

1301 left: 0;

1302 bottom: 0;

1303

1304 &.new-user-main {

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

1306 }

1307

1308 &.confirm-main {

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

1310 }

1311

1312 &.new-user-terms {

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

1314 }

1315

1316 &.new-user-arm {

1317 height: 110px;

1318 width: 130px;

1319 left: 260px;

1320 top: 160px;

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

1322 z-index: 100;

1323 }

1324 }

1325

1326 #content.maximised {

1327 top: 0;

1328 left: 0;

1329 right: 0;

1330 bottom: 0;

1331 border: 0;

1332 z-index: 1000;

1333 }

1334

1335 #slim_container {

1336 width: 100%;

1337 }

1338

1339 #slim_container_content {

1340 max-width: 50em;

1341 background-color: #FFFFFF;

1342 margin: $lineheight/2 auto;

1343 padding: 3px;

1344 border-radius: 25px;

1345 -moz-border-radius: 25px;

1346 border: 1px solid #e6e6e6;

1347 }

1348

1349 #slim_content {

1350 margin: $lineheight/2;

1351 margin-top: 95px;

1352 max-width: 50em;

1353

1354 .content-heading {

1355 margin-bottom: 15px;

1356 }

1357 }

1358

1359 #slim_header {

1360 margin: 30px $lineheight/2;

1361 position: absolute;

1362 top: 0px;

1363 margin-right: $lineheight/4;

1364 img {

1365 vertical-align: middle;

1366 margin-bottom: $lineheight/4;

1367 margin-right: $lineheight/4;

1368 }

1369 }

1370

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

1372

1373 .content_map {

1374 position: relative;

1375 width: 45%;

1376 height: 400px;

1377 border: 1px solid #ccc;

1378 margin-bottom: $lineheight;

1379 float: right;

1380 }

1381

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

1383

1384 #trace_list {

1385 font-size: $lineheight/2;

1386 border-width: 0px;

1387 text-align: right;

1388

1389 .trace_summary {

1390 font-size: 12px;

1391 color: gray;

1392 }

1393

1394 .trace_pending {

1395 color: red;

1396 }

1397

1398 .trace_public {

1399 color: green;

1400 }

1401

1402 .trace_identifiable {

1403 color: green;

1404 }

1405

1406 .trace_trackable {

1407 color: red;

1408 }

1409

1410 .trace_private {

1411 color: red;

1412 }

1413 }

1414

1415 /* Rules for the user profile page */

1416

1417 #userinformation {

1418

1419 min-height: 100px;

1420 .userinformation-inner {

1421 float: left;

1422 }

1423 h2 {

1424 margin-top: 0;

1425 }

1426 .user-description {

1427 width: 100%;

1428 clear: both;

1429 }

1430 .deemphasize {

1431 margin: 0;

1432 }

1433 }

1434

1435 .admin-user-info small {

1436 margin-bottom: $lineheight/2;

1437 display: inline;

1438 margin-right: $lineheight;

1439 }

1440

1441 .activity-block {

1442 clear: left;

1443 border-bottom: 1px solid #ccc;

1444 padding-bottom: $lineheight;

1445 float: left;

1446 h3 {

1447 margin-bottom: $lineheight/2;

1448 }

1449 }

1450

1451 .contact-activity {

1452 margin-top: $lineheight;

1453 width: 100%;

1454 }

1455

1456 .activity-details p {

1457 margin-left: 70px;

1458 margin-bottom: 0;

1459 }

1460

1461 #friends-container .contact-activity ul {

1462 margin-left: 70px;

1463 }

1464

1465 .user-view {

1466 p#no_home_location {

1467 margin: $lineheight;

1468 }

1469 .user_thumbnail {

1470 margin-top: $lineheight/4;

1471 float: left;

1472 }

1473 }

1474

1475 /* Rules for the user map */

1476

1477 .content_map .leaflet-popup-content {

1478 margin: $lineheight/2;

1479 min-height: 50px;

1480 }

1481

1482 /* Rules for user popups on maps */

1483

1484 .user_popup {

1485 min-width: 200px;

1486 p {

1487 padding: 0 0 5px 0;

1488 margin-top: 0 0 0 60px;

1489 font-size: 12px;

1490 }

1491 img.user_thumbnail {

1492 float: left;

1493 margin: 0 $lineheight/2 0 0;

1494 }

1495 }

1496

1497 /* Rules for the user list */

1498

1499 #user_list {

1500 font-size: $lineheight/2;

1501 width: 100%;

1502

1503 tr {

1504 vertical-align: middle;

1505 }

1506

1507 p {

1508 margin-top: 0px;

1509 margin-bottom: 0px;

1510 }

1511 }

1512

1513 #user_list_actions {

1514 float: right;

1515 margin-top: $lineheight/2;

1516 }

1517

1518 /* Rules for the diary list page */

1519

1520 .diary_post {

1521 position: relative;

1522 margin-top: $lineheight/2;

1523 padding-top: $lineheight;

1524 border-top: 1px solid #ccc;

1525

1526 .post_heading {

1527 margin-bottom: $lineheight;

1528

1529 h2 {

1530 margin-top: 0;

1531 margin-bottom: $lineheight/2;

1532 font-size: 24px;

1533 }

1534 }

1535

1536 img.user_thumbnail {

1537 float: left;

1538 }

1539

1540 small.deemphasize {

1541 float: left;

1542 display: block;

1543 }

1544

1545 ul.secondary-actions {

1546 display: inline-block;

1547 }

1548 }

1549

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

1551 display: inline;

1552 }

1553

1554 /* Rules for the diary entry page */

1555

1556 .diary_entry {

1557 #map {

1558 position: relative;

1559 width: 90%;

1560 height: 400px;

1561 border: 1px solid #ccc;

1562 display: none;

1563 margin-bottom: $lineheight;

1564 }

1565 #newcomment {

1566 border-top: 1px solid #ccc;

1567 padding-top: $lineheight;

1568 margin-top: $lineheight/2;

1569 }

1570 .comments {

1571 max-width: 740px;

1572 }

1573 .diary-comment {

1574 margin-top: $lineheight/2;

1575 border-top: 1px dashed #ccc;

1576 padding-top: $lineheight/2;

1577 &:first-child {

1578 margin-top: $lineheight;

1579 padding-top: $lineheight;

1580 border-top: 1px solid #ccc;

1581 }

1582 p {

1583 margin-bottom: $lineheight/2;

1584 }

1585 .comment-heading {

1586 margin-bottom: 0;

1587 margin-top: 0;

1588 }

1589 }

1590 }

1591

1592 .diary_entry-view img.user_thumbnail {

1593 float: left;

1594 }

1595

1596 /* Rules for the log in page */

1597

1598 #login_openid_buttons {

1599 margin-bottom: 0;

1600 }

1601

1602 #login_openid_buttons li {

1603 float: left;

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

1605 }

1606

1607 /* Rules for the account confirmation page */

1608

1609 .user-terms {

1610 .legale {

1611 border: 1px solid #ccc;

1612 padding: $lineheight;

1613 margin-bottom: $lineheight;

1614 overflow: auto;

1615 height: 10em;

1616 }

1617

1618 #decline {

1619 background: $lightblue;

1620 &:hover {

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

1622 }

1623 }

1624

1625 .form-row {

1626 margin: auto;

1627 max-width: 370px;

1628 }

1629 }

1630

1631 /* Rules for the account settings page */

1632

1633 #accountForm .user_map {

1634 position: relative;

1635 width: 500px;

1636 height: 400px;

1637 border: 1px solid #ccc;

1638 }

1639

1640 #accountForm .user_image {

1641 margin-bottom: 0;

1642 }

1643

1644 #accountForm #user_image {

1645 margin-left: 20px;

1646 }

1647

1648 #accountForm ul.accountImage-options {

1649 margin-left: 120px;

1650 }

1651

1652 .nohome .location {

1653 display: none;

1654 }

1655

1656 #homerow .message {

1657 display: none;

1658 }

1659

1660 .nohome .message {

1661 display: inline !important;

1662 }

1663

1664 .content_map.settings_map {

1665 width: 50%;

1666 float: none;

1667 }

1668

1669 /* Rules for the oauth settings page */

1670

1671 .oauth_clients .buttons .oauth-edit {

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

1673 }

1674

1675 .oauth_clients .buttons .oauth-delete {

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

1677 }

1678

1679 /* Rules for messages pages */

1680

1681 .messages {

1682 width: 100%;

1683 border: 1px solid #ddd;

1684

1685 input[type="submit"] {

1686 margin: auto;

1687 }

1688 tbody tr {

1689 border-top: 1px solid #ccc;

1690 }

1691

1692 .inbox-row {

1693 background: #f8f8ff;

1694 }

1695

1696 .inbox-row-unread {

1697 background:#CBEEA7;

1698 }

1699

1700 .right {

1701 float: right;

1702 }

1703

1704 tr td,

1705 tr th {

1706 padding: $lineheight/4;

1707 }

1708 p:last-child,

1709 h2:last-child,

1710 h3:last-child,

1711 ol:last-child,

1712 ul:last-child {

1713 margin-bottom:0;

1714 }

1715 tr td {

1716 height: 30px;

1717 border-right: 1px solid $lightgrey;

1718 }

1719 }

1720

1721 .inbox-row .inbox-mark-read {

1722 display: none;

1723 }

1724

1725 .info-line {

1726 margin-bottom: $lineheight;

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

1728 border-bottom: 1px solid #ccc;

1729

1730 form, form div {

1731 display: inline;

1732 }

1733 }

1734

1735 .info-line .user_thumbnail_tiny {

1736 vertical-align: middle;

1737 }

1738

1739 .inbox-mark-unread,

1740 .inbox-mark-read,

1741 .inbox-delete {

1742 width: 1%;

1743 }

1744

1745 .inbox-row-unread .inbox-mark-unread {

1746 display: none;

1747 }

1748

1749 .message-read .message-buttons {

1750 margin-top: $lineheight;

1751 padding-top: $lineheight;

1752 border-top: 1px solid $lightgrey;

1753 }

1754

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

1756 border-radius: 0;

1757 }

1758

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

1760

1761 .error {

1762 padding: $lineheight;

1763 background-color: #ff7070;

1764 }

1765

1766 .warning {

1767 padding: $lineheight;

1768 background-color: #ffe0cc;

1769 }

1770

1771 .notice {

1772 padding: $lineheight;

1773 background-color: #CBEEA7;

1774 }

1775

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

1777

1778 .field_with_errors {

1779 padding: 2px;

1780 background-color: #ff7070;

1781 display: inline-block;

1782 }

1783

1784 .formError {

1785 display: inline-block;

1786 padding: 5px 10px;

1787 margin-top: 5px;

1788 border-radius: 4px;

1789 font-size: 12px;

1790 color: #fff;

1791 background-color: #ff7070;

1792 }

1793

1794 /* Rules for rails validation error boxes */

1795

1796 #errorExplanation {

1797 width: 400px;

1798 border: 2px solid #ff7070;

1799 padding: 0 $lineheight/2;

1800 margin-bottom: $lineheight;

1801 background-color: #f0f0f0;

1802

1803 h2 {

1804 margin: 0 -10px 10px -10px;

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

1806 font-weight: 500;

1807 font-size: 12px;

1808 background-color: #c00;

1809 color: #fff;

1810 text-align: left;

1811 }

1812

1813 p {

1814 color: #333;

1815 margin-bottom: 0px;

1816 padding: $lineheight/4;

1817 }

1818

1819 ul {

1820 padding-left: $lineheight;

1821

1822 li {

1823 font-size: 12px;

1824 list-style: disc;

1825 }

1826 }

1827 }

1828

1829 /* Rules for forms */

1830

1831 .standard-form {

1832 fieldset {

1833 margin-bottom: $lineheight;

1834 }

1835 label.standard-label {

1836 display: block;

1837 margin-bottom: $lineheight/4;

1838 font-size: $typeheight;

1839 font-weight: 500;

1840 line-height: 1.5;

1841 }

1842 label.standard-label.secondary {

1843 display: inline-block;

1844 font-weight: normal;

1845 }

1846 .form-help {

1847 font-weight: normal;

1848 }

1849 .form-column {

1850 float: left;

1851 margin-right: 20px;

1852 }

1853 .form-divider {

1854 margin-top: $lineheight;

1855 padding-top: $lineheight;

1856 border-top: 1px solid $lightgrey;

1857 }

1858 .horizontal-list .form-row {

1859 float: left;

1860 padding-right: 10px;

1861 }

1862 .form-row {

1863 margin-bottom: $lineheight/2;

1864 }

1865 .form-list {

1866 margin-bottom: 0;

1867 }

1868 .form-list li {

1869 margin-bottom: 5px;

1870 }

1871 input[type="checkbox"],

1872 input[type="radio"] {

1873 float: left;

1874 margin-top: 5px;

1875 }

1876 }

1877

1878 #remember_me_openid {

1879 display: block;

1880 }

1881

1882 input[type="checkbox"],

1883 input[type="radio"] {

1884 margin-right: 5px;

1885 }

1886

1887 input[type="text"],

1888 input[type="email"],

1889 input[type="url"],

1890 input[type="password"],

1891 textarea {

1892 border: 1px solid #ccc;

1893 padding: 2px 5px;

1894 margin: 0;

1895 width: 200px;

1896 }

1897

1898 textarea {

1899 padding: 5px;

1900 width: 100%;

1901 }

1902

1903 /* Rules for user images */

1904

1905 img.user_image {

1906 max-width: 100px;

1907 max-height: 100px;

1908 border: 1px solid #ccc;

1909 margin-bottom: $lineheight;

1910 float: left;

1911 margin-right: $lineheight;

1912 }

1913

1914 img.user_thumbnail {

1915 max-width: 50px;

1916 max-height: 50px;

1917 border: 1px solid #ccc;

1918 margin-right: $lineheight;

1919 }

1920

1921 img.user_thumbnail_tiny {

1922 max-width: 25px;

1923 max-height: 25px;

1924 border: 1px solid #ccc;

1925 }

1926

1927 /* Rules for geo microformats */

1928

1929 abbr.geo {

1930 border-bottom: none;

1931 }

1932

1933 /* Rules for RSS buttons */

1934

1935 .rsssmall {

1936 position: relative;

1937 top: 3px;

1938 }

1939

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

1941

1942 ul.secondary-actions {

1943 font-style: normal;

1944 margin-bottom: 0;

1945 margin-left: 0;

1946 &.pager {

1947 display: inline-block;

1948 margin-right: 60px;

1949 }

1950 > li {

1951 display: block;

1952 float: left;

1953 list-style: none;

1954 border-left: 1px solid #ccc;

1955 padding-left: $lineheight/2;

1956 margin-right: $lineheight/2;

1957 &:first-child {

1958 border-left: 0;

1959 padding-left: 0;

1960 }

1961 &:last-child {

1962 margin-right: 0px;

1963 }

1964 }

1965 }

1966

1967 div.secondary-actions {

1968 padding: 10px;

1969 border-top: 1px solid #ccc;

1970 text-align: center;

1971 }

1972

1973 /* Utility for managing inner content areas */

1974

1975 .inner22 { padding: $lineheight;}

1976

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

1978

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

1980

1981 .inner20 { padding: $lineheight 0;}

1982

1983 .inner02 { padding: 0 $lineheight;}

1984

1985 /* Utility for general button styles */

1986

1987 input[type="button"],

1988 input[type="submit"],

1989 input[type="reset"],

1990 a.button {

1991 cursor: pointer;

1992 border: 0;

1993 display: inline-block;

1994 line-height: 20px;

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

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

1997 min-width: 120px;

1998 margin: 0 0 $lineheight/2 0;

1999 color: white;

2000 background: $blue;

2001 text-align: center;

2002 border-radius: 2px;

2003 -moz-border-radius: 2px;

2004 &:hover {

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

2006 text-decoration: none;

2007 }

2008 &.deemphasize {

2009 background: $lightblue;

2010 &:hover {

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

2012 }

2013 }

2014 &:disabled {

2015 background: $lightgrey;

2016 &:hover {

2017 background: $lightgrey;

2018 }

2019 }

2020 &:last-child {

2021 margin-bottom: 0;

2022 }

2023 }

2024

2025 .buttons {

2026 min-width: 200px;

2027 input[type="submit"],

2028 input[type="button"],

2029 input[type="reset"],

2030 .button {

2031 box-sizing: border-box;

2032 float: left;

2033 border-radius: 0;

2034 margin:0;

2035 min-width: 100px;

2036 max-width: 180px;

2037 border-right:1px solid white;

2038 text-overflow: ellipsis;

2039 white-space: nowrap;

2040 overflow: hidden;

2041 }

2042 input:first-child,

2043 .button:first-child {

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

2045 }

2046 input:last-child,

2047 .button:last-child {

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

2049 border-right-width: 0;

2050 }

2051 input:only-child,

2052 .button:only-child,

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

2054 *[value="Hide"] + .button:last-child {

2055 border-radius:2px;

2056 border-right-width: 0;

2057 }

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

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

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

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

2062 border-right-width: 0;

2063 }

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

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

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

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

2068 border-right-width: 1px;

2069 }

2070 }

2071

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

2073

2074 .table0,

2075 .item0 {

2076 background: $offwhite;

2077 }

2078

2079 .table1,

2080 .item1 {

2081 background: #fff;

2082 }

2083

2084 /* Rules for OpenID logo */

2085

2086 .openid_logo {

2087 vertical-align: text-bottom;

2088 border: 0;

2089 }

2090

2091 /* Rules for rich text */

2092

2093 .richtext,

2094 .prose {

2095 h1, h2 {

2096 padding-bottom: $lineheight/2;

2097 border-bottom: 1px dashed #cccccc;

2098 margin-bottom: $lineheight/2;

2099 }

2100

2101 h1 {

2102 font-size: 24px;

2103 }

2104

2105 h2 {

2106 font-size: 18px;

2107 }

2108

2109 h3 {

2110 font-size: $typeheight;

2111 }

2112

2113 code {

2114 font-size: 13px;

2115 background: #e8e8e8;

2116 padding: 2px 3px;

2117 }

2118

2119 pre {

2120 font-size: 13px;

2121 background: #e8e8e8;

2122 padding: 2px 3px;

2123

2124 code {

2125 padding: 0;

2126 }

2127 }

2128

2129 img {

2130 padding: $lineheight;

2131 background-color: $offwhite;

2132 display: block;

2133 max-width: 100%;

2134 margin: auto;

2135 }

2136

2137 blockquote {

2138 border-left: $lineheight solid $offwhite;

2139 padding-left: $lineheight;

2140 margin: 0;

2141 color: #7E7E7E;

2142 }

2143

2144 ul, ol {

2145 padding-left: $lineheight;

2146 margin-bottom: $lineheight;

2147 margin-left: $lineheight;

2148 }

2149

2150 ul li {

2151 list-style: disc;

2152 }

2153

2154 ol li {

2155 list-style: decimal;

2156 }

2157 }

2158

2159 .diary_post .richtext {

2160 margin-top: $lineheight;

2161 }

2162

2163 .comments .richtext {

2164 margin-left: 70px;

2165 margin-top: 0;

2166 }

2167

2168 /* Rules for rich text editors */

2169

2170 .richtext_container {

2171 margin-bottom: $lineheight;

2172

2173 .richtext_content {

2174 width: 50%;

2175 display: inline-block;

2176 vertical-align: top;

2177

2178 .richtext_preview {

2179 display: inline-block;

2180 padding: $lineheight;

2181 background-color: $offwhite;

2182 overflow-x: auto;

2183

2184 &.loading {

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

2186 background-repeat: no-repeat;

2187 background-position: center;

2188 }

2189

2190 > :first-child {

2191 margin-top: 0px;

2192 }

2193 }

2194 }

2195

2196 .richtext_help {

2197 display: inline-block;

2198 vertical-align: top;

2199 margin-left: 15px;

2200 background-color: #f8f8ff;

2201 padding: $lineheight/2;

2202 width: 220px;

2203

2204 ul {

2205 margin-bottom: 0;

2206 }

2207

2208 h4.heading, li {

2209 border-bottom: 1px solid #ccc;

2210 margin-bottom: $lineheight/4;

2211 padding-bottom: $lineheight/4;

2212 }

2213

2214 li h4, li span, li p {

2215 display: inline-block;

2216 vertical-align: top;

2217 font-size: 11px;

2218 }

2219

2220 li h4 {

2221 width: 40%;

2222 margin: 0;

2223 }

2224

2225 li span, li p {

2226 width: 50%;

2227 margin-left: $lineheight/2;

2228 margin-bottom: $lineheight/4;

2229 white-space: nowrap;

2230 }

2231 }

2232 }

2233

2234 /* Rules for the user notes list */

2235

2236 .note_list {

2237 tr.creator {

2238 background-color: #eeeeee;

2239 }

2240

2241 td {

2242 padding: 3px;

2243 }

2244

2245 p {

2246 margin-bottom: 0px;

2247 }

2248 }

2249

2250 /* Rules for the notes interface */

2251

2252 .leaflet-popup-content .note {

2253 padding-top: $lineheight/2;

2254 }

2255

2256 .leaflet-popup-content .note {

2257 h2 {

2258 margin-bottom: $lineheight/2;

2259 }

2260

2261 div {

2262 margin-top: $lineheight/2;

2263 }

2264

2265 .permalink {

2266 position: absolute;

2267 top: $lineheight/4;

2268 left: $lineheight/4;

2269 min-width: 15px;

2270 min-height: 15px;

2271 }

2272

2273 .permalink span {

2274 display: none;

2275 padding-left: $lineheight;

2276 }

2277

2278 .permalink:hover span {

2279 display: block;

2280 }

2281

2282 .warning {

2283 display: block;

2284 background-color: #ffe0cc;

2285 padding: 4px 6px;

2286 margin-bottom: $lineheight/2;

2287 }

2288

2289 .comment_body {

2290 margin-top: 2px;

2291 margin-bottom: 2px;

2292

2293 p {

2294 margin-top: 0px;

2295 margin-bottom: 0px;

2296 }

2297 }

2298

2299 .comment {

2300 width: 100%;

2301 height: 100px;

2302 }

2303

2304 .buttons {

2305 margin-top: $lineheight/4;

2306 text-align: right;

2307 }

2308 }

2309

2310 /* Rules for the iD editor */

2311

2312 .id-embed {

2313 width: 100%;

2314 height: 100%;

2315 }

2316

2317 /* Rules for dropdown menus */

2318

2319 .dropdown {

2320 position: relative;

2321 }

2322

2323 .dropdown-toggle {

2324 *margin-bottom: -3px;

2325 }

2326

2327 .dropdown-toggle:active,

2328 .open .dropdown-toggle {

2329 outline: 0;

2330 }

2331

2332 .caret {

2333 display: inline-block;

2334 width: 0;

2335 height: 0;

2336 vertical-align: top;

2337 border-top: 4px solid #000000;

2338 border-right: 4px solid transparent;

2339 border-left: 4px solid transparent;

2340 content: "";

2341 }

2342

2343 .dropdown .caret {

2344 margin-top: 8px;

2345 margin-left: 2px;

2346 }

2347

2348 .dropdown-menu {

2349 position: absolute;

2350 top: 100%;

2351 left: -1px;

2352 z-index: 1000;

2353 display: none;

2354 float: left;

2355 min-width: 160px;

2356 padding: 5px 0;

2357 margin: 0;

2358 list-style: none;

2359 background-color: #ffffff;

2360 border: 1px solid #ccc;

2361 border-radius: 0 3px 3px;

2362 *border-right-width: 2px;

2363 *border-bottom-width: 2px;

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

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

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

2367 -webkit-background-clip: padding-box;

2368 -moz-background-clip: padding;

2369 background-clip: padding-box;

2370 }

2371

2372 .dropdown-menu.pull-right {

2373 right: 0;

2374 left: auto;

2375 }

2376

2377 .dropdown-menu .divider {

2378 *width: 100%;

2379 height: 1px;

2380 margin: 9px 1px;

2381 *margin: -5px 0 5px;

2382 overflow: hidden;

2383 background-color: #e5e5e5;

2384 border-bottom: 1px solid #ffffff;

2385 }

2386

2387 .dropdown-menu > li > a {

2388 display: block;

2389 padding: 3px 10px;

2390 clear: both;

2391 font-weight: normal;

2392 line-height: 20px;

2393 color: #333333;

2394 white-space: nowrap;

2395 }

2396

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

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

2399 .dropdown-submenu:hover > a,

2400 .dropdown-submenu:focus > a {

2401 color: #ffffff;

2402 text-decoration: none;

2403 background-color: $green;

2404 }

2405

2406 .dropdown-menu > .active > a,

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

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

2409 color: #ffffff;

2410 text-decoration: none;

2411 background-color: $green;

2412 outline: 0;

2413 }

2414

2415 .dropdown-menu > .disabled > a,

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

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

2418 color: #999999;

2419 }

2420

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

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

2423 text-decoration: none;

2424 cursor: default;

2425 background-color: transparent;

2426 background-image: none;

2427 }

2428

2429 .open {

2430 *z-index: 1000;

2431 }

2432

2433 .open > .dropdown-menu {

2434 display: block;

2435 }

2436

2437 .dropdown-backdrop {

2438 position: fixed;

2439 top: 0;

2440 right: 0;

2441 bottom: 0;

2442 left: 0;

2443 z-index: 990;

2444 }

2445

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

2447 .site-welcome {

2448 .center {

2449 text-align: center;

2450 .sprite {

2451 float: none;

2452 margin: auto;

2453 }

2454 }

2455

2456 .sprite {

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

2458 background-size: 500px 250px;

2459 display: block;

2460 float: left;

2461 }

2462

2463 .icon-list {

2464 padding-bottom: 20px;

2465 div {

2466 margin-bottom: 10px;

2467 p {

2468 padding-top: 10px;

2469 }

2470 }

2471 }

2472 .sprite.small {

2473 width: 50px;

2474 height: 50px;

2475 }

2476

2477 .sprite.x {

2478 background-position: -50px 0;

2479 }

2480

2481 .sprite.term {

2482 margin-right: 10px;

2483 vertical-align: middle;

2484 }

2485

2486 .sprite.node {

2487 background-position: -100px 0;

2488 }

2489

2490 .sprite.way {

2491 background-position: -150px 0;

2492 }

2493

2494 .sprite.tag {

2495 background-position: -200px 0;

2496 }

2497

2498 .sprite.editor {

2499 background-position: -250px 0;

2500 }

2501

2502 .sprite.question {

2503 background-position: -300px 0;

2504 }

2505

2506 .start-mapping {

2507 margin: auto;

2508 cursor: pointer;

2509 border: none;

2510 padding: 20px 40px;

2511 font-size: 30px;

2512 text-decoration: none;

2513 }

2514

2515 .note-box {

2516 margin-top: 20px;

2517 background-color: $offwhite;

2518 }

2519

2520 .icon.note {

2521 background-color: #333;

2522 border-radius: 4px;

2523 }

2524 }

2525

2526 .site-about #content {

2527 //background-color: #000;

2528 background-color: #eee;

2529 background-position: 50% 50%;

2530 background-repeat: no-repeat;

2531 background-size: cover;

2532 background-attachment: fixed;

2533

2534 &.photo-0 { background-image: image-url('about/0.jpg'); .photo-0 { display: block; } }

2535 &.photo-1 { background-image: image-url('about/1.jpg'); .photo-1 { display: block; } }

2536 &.photo-2 { background-image: image-url('about/2.jpg'); .photo-2 { display: block; } }

2537 &.photo-3 { background-image: image-url('about/4.jpg'); .photo-3 { display: block; } }

2538 &.photo-4 { background-image: image-url('about/4.jpg'); .photo-4 { display: block; } }

2539 &.photo-5 { background-image: image-url('about/5.jpg'); .photo-5 { display: block; } }

2540

2541 .caption {

2542 max-width: 200px;

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

2544 position: fixed;

2545 text-align: right;

2546 right: 20px;

2547 bottom: 60px;

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

2549 color: #eee;

2550 opacity: 0.8;

2551 display: none;

2552 }

2553

2554 .caption a {

2555 color: white;

2556 white-space: nowrap;

2557 text-decoration: none;

2558 }

2559

2560 a.next {

2561 display: block;

2562 position: fixed;

2563 right: 10px;

2564 bottom: 10px;

2565 width: 40px;

2566 height: 40px;

2567 border-radius: 5px;

2568 text-indent: -9999px;

2569 overflow: hidden;

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

2571 background-color: #000;

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

2573 }

2574

2575 .content-inner {

2576 position: relative;

2577 color: #333;

2578 min-width: 320px;

2579 max-width: 640px;

2580

2581 .section {

2582 margin-bottom: 30px;

2583 }

2584

2585 .section:last-child {

2586 margin-bottom: 0;

2587 }

2588 }

2589

2590 .text {

2591 background: white;

2592 padding: 40px;

2593 }

2594

2595 .attr {

2596 position: relative;

2597 padding: 170px 40px 20px;

2598 background: #333;

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

2600 margin-bottom: 0;

2601 margin-top: -20px;

2602

2603 h1 {

2604 display: block;

2605 color: white;

2606 font-weight: 300;

2607 font-size: 34px;

2608 span {

2609 color: #76c551;

2610 }

2611 }

2612

2613 .user-image {

2614 position: absolute;

2615 top: 0px;

2616 right: 240px;

2617 left: 0px;

2618 height: 150px;

2619 background-position: 0 50%;

2620 background-repeat: no-repeat;

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

2622 background-size: cover;

2623 background-color: #76c551;

2624 }

2625

2626 .byosm {

2627 position: absolute;

2628 top: 0px;

2629 right: 0px;

2630 z-index: 1;

2631 width: 240px;

2632 height: 150px;

2633 padding: 20px 20px 20px 40px;

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

2635 white-space: nowrap;

2636 color: #fff;

2637 background: #76c551;

2638 }

2639

2640 .byosm span {

2641 display: inline-block;

2642 width: 20px;

2643 margin-left: -20px;

2644 }

2645 }

2646

2647 h2 {

2648 margin-bottom: 10px;

2649 }

2650

2651 .icon {

2652 width: 30px;

2653 height: 30px;

2654 margin-right: 10px;

2655 vertical-align: middle;

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

2657

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

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

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

2661 &.contributors { background-position: 0px -120px; }

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

2663 }

2664 }

2665

2666 @import 'browse';

2667

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

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

2670 display: none;

2671 }

2672 }

2673