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 $grey: #AAA;

9 $keyline: #CCC;

10 $hovercolor: 20%;

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

14 /* Minimal CSS reset */

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

17 margin: 0;

18 padding: 0;

19 border: 0;

20 font-size:100%;

21 }

23 fieldset,img { border: 0; }

25 legend { color: #000; }

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

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

31 table {

32 border-collapse: collapse;

33 border-spacing: 0;

34 }

36 li { list-style: none; }

38 input,

39 select,

40 textarea,

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

43 abbr, acronym {

44 border-bottom: .1em dotted;

45 cursor: help;

46 }

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

50 .clearfix:before,

51 .clearfix:after {

52 content: " ";

53 display: table;

54 }

56 .clearfix:after {

57 clear: both;

58 }

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

62 * {

63 -moz-box-sizing: border-box;

64 -webkit-box-sizing: border-box;

65 box-sizing: border-box;

66 }

68 body {

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

70 font-size: $typeheight;

71 line-height: 1.6666;

72 color: #222;

73 background-color: #fff;

74 margin: 0px;

75 padding: 0px;

76 text-align: left;

77 }

79 body.slim {

80 background-color: #f0f0f0;

81 }

83 h1, h2, h3 {

84 margin-top: $lineheight/2;

85 margin-bottom: $lineheight;

86 font-weight: bold;

87 line-height: 1.2;

88 }

90 h1, h2 {

91 font-size: 32px;

92 }

94 #content h2 {

95 font-size: 21px;

96 }

98 h3 {

99 font-size: 21px;

100 margin-top: $lineheight/2;

101 margin-bottom: $lineheight;

102 }

103

104 h4,h5,h6 {

105 font-size: $typeheight;

106 margin-top: $lineheight/2;

107 margin-bottom: $lineheight/2;

108 font-weight: bold;

109 line-height: 1.5;

110 }

111

112 p, ul {

113 margin-bottom: $lineheight;

114 }

115

116 p > img {

117 width: auto;

118 max-width: 100%;

119 }

120

121 small, aside {

122 font-size: 12px;

123 }

124

125 h1:first-child,

126 h2:first-child,

127 h3:first-child,

128 h4:first-child,

129 h5:first-child,

130 h6:first-child {

131 margin-top: 0;

132 }

133

134 .column-1 {

135 width: 50%;

136 margin: 0 0 $lineheight/2 0;

137 }

138

139 .small_icon {

140 vertical-align: middle;

141 margin-right: $lineheight/4;

142 }

143

144 /* Rules for icons */

145

146 .icon {

147 display:inline-block;

148 vertical-align:top;

149 width:20px;

150 height:20px;

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

152 text-indent:-9999px;

153 overflow:hidden;

154 }

155

156 .icon-pre-text {

157 margin-right: 5px;

158 }

159

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

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

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

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

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

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

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

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

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

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

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

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

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

173

174 /* Rules for links */

175

176 a {

177 color: #00f;

178 text-decoration: none;

179 &:hover {

180 text-decoration: underline;

181 }

182 }

183

184 /* Rules for horizontal lines */

185

186 hr {

187 border: none;

188 background-color: #ccc;

189 color: #ccc;

190 height: 1px;

191 }

192

193 /* General styles for tables */

194

195 table {

196 width: 100%;

197 margin-bottom: $lineheight;

198 th, td {

199 text-align: left;

200 padding: $lineheight/4;

201 line-height: $lineheight;

202 }

203 th {

204 font-weight: bold;

205 vertical-align: top;

206 }

207 td {

208 vertical-align: middle;

209 }

210 }

211

212 /* Rules for the whole left sidebar, including the logo */

213

214 #left {

215 position: absolute;

216 height: 100%;

217 width: 185px;

218 font-size: 11px;

219 line-height: 1.1;

220 z-index: 100;

221 border-right: 1px solid #ccc;

222 }

223

224 /* Rules for the OpenStreetMap logo in the top left corner */

225

226 #logo {

227 display: block;

228 width: 170px;

229 min-width: 170px;

230 padding: $lineheight $lineheight/4;

231 text-align: center;

232 margin: auto;

233 }

234

235 #logo h1 {

236 font-size: 18px;

237 line-height: 1;

238 text-align: center;

239 margin: 0;

240 }

241

242 #logo h2 {

243 font-size: $lineheight/2;

244 line-height: 15px;

245 margin: 0;

246 }

247

248 /* Rules for the site name */

249

250 #small-title {

251 display: none;

252 }

253

254 /* Rules for the introductory text displayed in the left sidebar to new users */

255

256 .sidebar-copy {

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

258 p {

259 margin: $lineheight/4 0;

260 }

261 }

262 .sidebar-copy.intro {

263 border-top: 1px solid #ccc;

264 }

265

266 /*

267 * Rules for alert boxes shown in the left sidebar when important

268 * information needs to be conveyed such as when the site is

269 * undergoing maintenance.

270 */

271

272 .sidebar-alert {

273 padding: $lineheight/4;

274 border-top: 1px solid #ccc;

275 margin-top: 4px;

276 margin-bottom: -5px;

277 background: #e00;

278 font-size: 12px;

279 font-weight: bold;

280 p {

281 margin: $lineheight/4;

282 }

283 }

284

285 /*

286 * Rules for notice boxes shown in the left sidebar when important, but

287 * non-critical information needs to be conveyed such as notices about

288 * donation drives.

289 */

290

291 .sidebar-notice {

292 padding: $lineheight/4;

293 border-top: 1px solid #ccc;

294 margin-top: 4px;

295 margin-bottom: -5px;

296 background: #ea0;

297 font-size: 12px;

298 p {

299 margin: $lineheight/4;

300 }

301 }

302

303 /* Rules for the menu displayed in the left sidebar */

304

305 .left_menu {

306 left: 0px;

307 margin: 0;

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

309 font-size: 12px;

310 line-height: 1.25;

311 list-style-type: none;

312 border-bottom: 1px solid #ccc;

313 border-top: 1px solid #ccc;

314 img {

315 margin: $lineheight/2 0px;

316 }

317

318 ul {

319 padding: 0;

320 margin: 0;

321 }

322

323 li {

324 list-style-type: none;

325 padding: 0;

326 margin: 0;

327 }

328

329 h4 {

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

331 font-size: 12px;

332 margin: 0;

333 }

334

335 li:last-child h4 {

336 padding-top: 0;

337 }

338 }

339

340 /* Rules for SOTM advert */

341

342 #sotm {

343 width: 165px;

344 margin: $lineheight/2;

345 padding: 0px;

346 border: 0px;

347 background: #fff;

348 img {

349 width: 165px;

350 }

351 }

352

353 /*

354 * Rules for "optional boxes" which appear in the left sidebar on

355 * certain pages. Current users are the seach box on the main page

356 * and the tag cloud on the traces pages.

357 */

358

359 .optionalbox {

360 left: 0px;

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

362 margin: $lineheight/4 0;

363 text-align: left;

364 }

365

366 /* Rules for the search box */

367

368 #search_field {

369 position: relative;

370

371 form {

372 width: 165px;

373 }

374

375 input[type="text"] {

376 width: 165px;

377 padding: 3px;

378 font-size: $typeheight;

379 line-height: 1.1;

380 height: 25px;

381 padding: 2px 0px 2px $lineheight/4;

382 box-shadow: inset #DDD 0px 1px 3px;

383 }

384

385 input[type="text"]:focus {

386 outline: none;

387 border: 1px solid #000;

388 }

389

390 input[type="submit"] {

391 border: 0;

392 margin: 0;

393 padding: 0;

394 width: 15px;

395 height: 15px;

396 min-width: 0;

397 text-indent: -1000px;

398 overflow: hidden;

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

400 position: absolute;

401 top: $lineheight/4;

402 right: $lineheight/4;

403 cursor: pointer;

404 }

405 }

406

407 .search_help {

408 margin: $lineheight/4 0 0 0;

409 }

410

411 /* Utility for de-emphasizing content */

412

413 .deemphasize {

414 color: #999;

415 a {

416 color: $blue;

417 }

418 }

419

420 /* Rules for donation request box */

421

422 a.donate {

423 display: block;

424 width: 163px;

425 padding: $lineheight/4;

426 border: 1px solid #AED1A0;

427 background: #cbeea7;

428 font-size: $typeheight;

429 line-height: 1.4;

430 text-align: center;

431 border-radius: 2px;

432 color: #222;

433 margin: $lineheight/2 $lineheight/2 0px $lineheight/2;

434

435 &:hover {

436 background: #9ed485;

437 text-decoration: none;

438 }

439 }

440

441 /* Rules for Creative Commons logo button */

442

443 #cclogo {

444 margin: $lineheight/2 0;

445 float: right;

446 }

447

448 /* Rules for tabbed navigation bar */

449

450 #top-bar {

451 position: relative;

452 margin-left: 185px;

453 height: 30px;

454 border-bottom: 1px solid #ccc;

455 background: white;

456 z-index: 100;

457 }

458

459 .site-edit #top-bar,

460 .site-index #top-bar,

461 .site-export #top-bar {

462 position: fixed;

463 left: 0;

464 right: 0;

465 }

466

467 #tabnav {

468 height: 29px;

469 margin-bottom:0;

470 overflow: hidden;

471 li {

472 display: inline;

473 }

474 a, a:link, a:visited {

475 float: left;

476 font-weight: bold;

477 padding: 3px $lineheight/2;

478 text-decoration: none;

479 color: #333;

480 float: left;

481 margin-right: 1px;

482 -webkit-transition: color 200ms ease-in;

483 -moz-transition: color 200ms ease-in;

484 -o-transition: color 200ms ease-in;

485 transition: color 200ms ease-in;

486 }

487 }

488

489 .site-index #tabnav a#viewanchor,

490 .site-edit #tabnav a#editanchor,

491 .changeset-list #tabnav a#historyanchor,

492 .site-export #tabnav a#exportanchor {

493 border-bottom: 1px solid #aaa;

494 background: #9ed485;

495 color: #000;

496 }

497

498 #tabnav a:link:hover, #tabnav a:visited:hover {

499 text-decoration: underline;

500 }

501

502 #tabnav a:link.disabled,

503 #tabnav a:visited.disabled,

504 #tabnav a:link:hover.disabled,

505 #tabnav a:visited:hover.disabled {

506 color: #ccc;

507 cursor: default;

508 &:hover {

509 text-decoration: none;

510 }

511 }

512

513 /* Utility for styling notification numbers */

514

515 .count-number {

516 padding: 2px $lineheight/4;

517 border-radius: 2px;

518 background: #d7d7ff;

519 margin: 0 2px;

520 font-size: 11px;

521 color: #333;

522 }

523

524 /* Rules for greeting bar in the top right corner */

525

526 #greeting {

527 float: right;

528 padding-top: 3px;

529 margin-right: $lineheight/4;

530 }

531

532 .greeting-bar-unread {

533 font-weight: bold;

534 }

535

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

537

538 #noscript {

539 z-index: 20000000;

540 position: absolute;

541 top: 15px;

542 left: 15px;

543 }

544

545 /* Rules for Leaflet maps */

546

547 .leaflet-control a {

548 display: block;

549 height: 40px;

550 width: 40px;

551 background-color: white;

552 background-color: rgba(255,255,255,.8);

553 border-radius: 4px;

554 margin-bottom: 10px;

555 }

556

557 .leaflet-control a.zoomin,

558 .control-layers a,

559 .control-note a {

560 margin-bottom: 0px;

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

562 }

563

564 .leaflet-control a.zoomout {

565 margin-bottom: 0px;

566 border-radius: 0px;

567 }

568

569 .control-locate a,

570 .control-key a,

571 .control-share a {

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

573 }

574

575 .leaflet-control a:hover {

576 background-color: white;

577 }

578

579 .leaflet-control a .icon {

580 margin: 10px;

581 }

582

583 #map-ui {

584 position: absolute;

585 display: none;

586 right: 0;

587 width: 200px;

588 height: 100%;

589 background: white;

590 }

591

592 .layers-ui {

593 section {

594 border-top: 1px solid #868e85;

595 padding: 15px;

596 }

597

598 li {

599 border-radius: 4px;

600 overflow: hidden;

601 margin-bottom: 10px;

602 }

603

604 label {

605 display: block;

606 padding: 5px;

607 background-color: #868e85;

608 cursor: pointer;

609 }

610

611 li.active label {

612 background-color: #68c879;

613 }

614

615 .base-layers {

616 .leaflet-container {

617 width: 100%;

618 height: 50px;

619 cursor: pointer;

620 }

621 }

622 }

623

624 .leaflet-control-attribution {

625 a.disabled {

626 color: #99c9dc;

627 cursor: default;

628 text-decoration: none;

629 }

630

631 ul.secondary-actions {

632 float: left;

633 margin-right: $lineheight/4;

634

635 &:only-child {

636 margin-right: 0px;

637 }

638 }

639 }

640

641 .site-index .leaflet-top,

642 .site-export .leaflet-top {

643 top: $lineheight/2 !important;

644 .leaflet-control {

645 margin-top: 0px !important;

646 }

647 }

648

649 .site-index #map .olControlScaleLine,

650 .site-export #map .olControlScaleLine {

651 left: $lineheight/2 !important;

652 }

653

654 .leaflet-popup-scrolled {

655 padding-right: $lineheight;

656 border-bottom: 0px !important;

657 border-top: 0px !important;

658 }

659

660 .leaflet-popup-content-wrapper {

661 border-radius: 4px !important;

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

663 }

664

665 /* Rules for edit menu */

666

667 .menuicon {

668 padding: 0 $lineheight/4;

669 font-weight: normal;

670 display: inline-block;

671 &:hover {

672 text-decoration: none !important;

673 }

674 }

675

676 .menu {

677 display: none;

678 z-index: 10000;

679 position: absolute;

680 background-color: #ffffff;

681 border: 1px solid $keyline;

682 border-top: 0px;

683 ul {

684 margin: 0px;

685 }

686 li {

687 padding: 2px $lineheight/4;

688 border-top: 1px solid #eee;

689 white-space: nowrap;

690 }

691 }

692

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

694

695 #attribution {

696 display: none;

697 }

698

699 .attribution_license,

700 .attribution_project {

701 text-align: left;

702 }

703

704 .attribution_notice {

705 text-align: center;

706 }

707

708 /* Rules for the popout map sidebar */

709

710 #sidebar {

711 display: none;

712 position: absolute;

713 overflow: auto;

714 top: 0px;

715 bottom: 0px;

716 left: 0px;

717 border-right: 1px solid $keyline;

718 width: 33.3333%;

719 .sidebar_heading {

720 position: relative;

721 padding: $lineheight/2 $lineheight;

722 z-index: 9999;

723 background: $offwhite;

724 border-bottom: 1px solid #ccc;

725 }

726 h4 {

727 margin: 0;

728 }

729 ul {

730 margin-bottom: 0;

731 &:last-child {

732 border-bottom: 1px solid #ccc;

733 }

734 li {

735 margin-bottom: $lineheight/4;

736 &:last-child {

737 margin-bottom: 0;

738 }

739 }

740 }

741 }

742

743 #sidebar_close {

744 position: absolute;

745 height: $lineheight;

746 top: 0px;

747 bottom: 0;

748 right: $lineheight;

749 margin: auto;

750 }

751

752 #sidebar_content {

753 position: relative;

754 margin-bottom: 20px;

755 width: 100%;

756 h4 {

757 padding: 0 $lineheight $lineheight/2 $lineheight;

758 margin-top: $lineheight/2;

759 margin-bottom: 0;

760 border-bottom: 1px solid #ddd;

761 }

762 }

763

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

765

766 #mapkey {

767 padding: $lineheight $lineheight 0 $lineheight;

768 .mapkey-table-key img {

769 display: block;

770 margin-left: auto;

771 margin-right: auto;

772 }

773 td {

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

775 }

776 }

777

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

779

780 .search_searching {

781 margin-top: $lineheight/4;

782 margin-bottom: $lineheight/4;

783 }

784

785 .search_results_entry {

786 margin-bottom: 0;

787

788 .search_details {

789 display: block;

790 text-align: right;

791 }

792 }

793

794 .search_results_entry .search_searching {

795 text-align: center;

796 margin: $lineheight auto;

797 width: $lineheight;

798 display: block;

799 }

800

801 ul.results-list li { border-bottom: 1px solid #ccc; }

802

803 .search_results_error {

804 color: #f00;

805 }

806

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

808

809 #browse_content {

810 position: relative;

811 .browse_show_list.button {

812 position: absolute;

813 left: $lineheight;

814 right: $lineheight;

815 bottom: -40px;

816 margin-bottom: 0;

817 }

818 a.more-details {

819 position: absolute;

820 top: 0;

821 right: $lineheight;

822 }

823 ul li {

824 margin-bottom: 0;

825 }

826 }

827

828 .browse_details {

829 position: relative;

830 }

831

832 .browse_status {

833 display: none;

834 }

835

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

837

838 .export_bounds {

839 text-align: center;

840 }

841

842 .export_area_inputs {

843 margin-bottom: $lineheight/2;

844 input[type="text"] {

845 width: 60px;

846 margin-bottom: 5px;

847 }

848 }

849

850 .export_bound {

851 margin: $lineheight/4;

852 }

853

854 .export_details input[type="text"]#export_html_text {

855 width: 100%;

856 }

857

858 #sidebar #marker_inputs li:last-child {

859 margin-bottom: $lineheight/2;

860 }

861

862 #export_osm,

863 #export_mapnik,

864 #export_osmarender {

865 display: none;

866 }

867

868 /* Rules for the main content area */

869

870 #content {

871 padding: $lineheight;

872 position: relative;

873 }

874

875 .site-edit #content,

876 .site-index #content,

877 .site-export #content {

878 position: fixed;

879 padding: 0;

880 top: 30px; bottom: 0;

881 left: 184px; right: 0;

882 border-left: 1px solid #ccc;

883 }

884

885 .wrapper {

886 margin-left: 184px;

887 border-left: 1px solid #ccc;

888 text-align: left;

889 }

890

891 .site-edit #content {

892 top: 30px;

893 }

894

895 #content.maximised {

896 top: 0;

897 left: 0;

898 right: 0;

899 bottom: 0;

900 border: 0;

901 z-index: 1000;

902 }

903

904 #slim_container {

905 width: 100%;

906 }

907

908 #slim_container_content {

909 max-width: 50em;

910 background-color: #FFFFFF;

911 margin: $lineheight/2 auto;

912 padding: 3px;

913 border-radius: 25px;

914 -moz-border-radius: 25px;

915 border: 1px solid #e6e6e6;

916 }

917

918 #slim_content {

919 margin: $lineheight/2;

920 margin-top: 95px;

921 max-width: 50em;

922

923 .content-heading {

924 margin-bottom: 15px;

925 }

926 }

927

928 #slim_header {

929 margin: 30px $lineheight/2;

930 position: absolute;

931 top: 0px;

932 margin-right: $lineheight/4;

933 img {

934 vertical-align: middle;

935 margin-bottom: $lineheight/4;

936 margin-right: $lineheight/4;

937 }

938 }

939

940 .content-heading {

941 position: relative;

942 padding: $lineheight;

943 background: $offwhite;

944 h1, h2 {

945 margin-bottom: $lineheight/2;

946 line-height: 100%;

947 &:last-child {

948 margin-bottom: 0;

949 }

950 }

951 p {

952 margin-top: $lineheight/2;

953 margin-bottom: 0px;

954 }

955 }

956

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

958

959 .content_map {

960 position: relative;

961 width: 45%;

962 height: 400px;

963 border: 1px solid #ccc;

964 margin-bottom: $lineheight;

965 float: right;

966 }

967

968 .content_map #small_map {

969 height: 100%;

970 width: 100%;

971 margin-bottom: $lineheight;

972 }

973

974 /* Rules for the home page */

975

976 .site-export #map,

977 .site-index #map {

978 position: absolute;

979 top: 0px;

980 bottom: 0px;

981 left: 0px;

982 right: 0px;

983 }

984

985 /* Rules for the edit page */

986

987 .site-edit #map {

988 position: absolute;

989 top: 0px;

990 bottom: 0px;

991 left: 0px;

992 right: 0px;

993 overflow: hidden;

994 }

995

996 /* Rules for the changeset list shown by the history tab etc */

997

998 #changeset_list {

999 width: 100%;

1000 ul {

1001 padding: $lineheight/2 0;

1002 margin-bottom: 0px;

1003 border-top: 1px solid #ccc;

1004 &:last-child {

1005 border-bottom: 1px solid #ccc;

1006 }

1007 }

1008 .selected {

1009 background: #FFFFC0;

1010 }

1011 .date,

1012 .user {

1013 border-left: 1px solid #ccc;

1014 padding-left: $lineheight/4;

1015 margin-right: $lineheight/4;

1016 }

1017 }

1018

1019 #changeset_list_map_wrapper {

1020 position: absolute;

1021 width: 50%;

1022 height: 490px;

1023 top: 0;

1024 right: 0;

1025 }

1026

1027 #changeset_list_map_wrapper.scrolled {

1028 position: fixed;

1029 }

1030

1031 #changeset_list_map {

1032 position: absolute;

1033 bottom: $lineheight;

1034 top: $lineheight;

1035 right: $lineheight;

1036 left: $lineheight;

1037 border: 1px solid #ccc;

1038 }

1039

1040 #changeset_list_map_wrapper.scrolled #changeset_list_map {

1041 margin-left: 93px;

1042 }

1043

1044 /* Rules for the data browser */

1045

1046 .browse-section {

1047 border-top: 1px solid #ccc;

1048 margin-top: $lineheight/2;

1049 padding-top: $lineheight/2;

1050 &:first-child {

1051 margin-top: 0;

1052 }

1053 .warning {

1054 background-color: #ffe0cc;

1055 margin: 0px;

1056 padding: 4px 6px;

1057 max-width: 100%;

1058 }

1059 h4, p {

1060 margin-bottom: $lineheight/4;

1061 }

1062 p, ul, .bbox, .geo {

1063 display: inline-block;

1064 vertical-align: top;

1065 max-width: 65%;

1066 }

1067 ul p {

1068 margin-left: 0;

1069 margin-bottom: 0;

1070 }

1071 h4 {

1072 width: 33.3333%;

1073 display: inline-block;

1074 vertical-align: top;

1075 }

1076 }

1077

1078 .bbox {

1079 div {

1080 width: 33.3333%;

1081 text-align: center;

1082 padding: $lineheight/4 0;

1083 overflow: hidden;

1084 text-overflow: ellipsis;

1085 float: left;

1086 }

1087 .max_lat,

1088 .min_lat {

1089 margin-left: auto;

1090 margin-right: auto;

1091 width: 100%;

1092 }

1093 }

1094

1095 #browse_map .geolink {

1096 display: none;

1097 }

1098

1099 #browse_map .secondary-actions {

1100 margin-bottom: $lineheight/2;

1101 }

1102

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

1104

1105 #trace_list {

1106 font-size: $lineheight/2;

1107 border-width: 0px;

1108 text-align: right;

1109

1110 .trace_summary {

1111 font-size: 12px;

1112 color: gray;

1113 }

1114

1115 .trace_pending {

1116 color: red;

1117 }

1118

1119 .trace_public {

1120 color: green;

1121 }

1122

1123 .trace_identifiable {

1124 color: green;

1125 }

1126

1127 .trace_trackable {

1128 color: red;

1129 }

1130

1131 .trace_private {

1132 color: red;

1133 }

1134 }

1135

1136 /* Rules for the user profile page */

1137

1138 #userinformation {

1139

1140 min-height: 100px;

1141 .userinformation-inner {

1142 float: left;

1143 }

1144 h2 {

1145 margin-top: 0;

1146 }

1147 .user-description {

1148 width: 100%;

1149 clear: both;

1150 }

1151 .deemphasize {

1152 margin: 0;

1153 }

1154 }

1155

1156 .admin-user-info small {

1157 margin-bottom: $lineheight/2;

1158 display: inline;

1159 margin-right: $lineheight;

1160 }

1161

1162 .activity-block {

1163 clear: left;

1164 border-bottom: 1px solid #ccc;

1165 padding-bottom: $lineheight;

1166 float: left;

1167 h3 {

1168 margin-bottom: $lineheight/2;

1169 }

1170 }

1171

1172 .contact-activity {

1173 margin-top: $lineheight;

1174 width: 100%;

1175 }

1176

1177 .activity-details p {

1178 margin-left: 70px;

1179 margin-bottom: 0;

1180 }

1181

1182 #friends-container .contact-activity ul {

1183 margin-left: 70px;

1184 }

1185

1186 .user-view {

1187 p#no_home_location {

1188 margin: $lineheight;

1189 }

1190 .user_thumbnail {

1191 margin-top: $lineheight/4;

1192 float: left;

1193 }

1194 }

1195

1196 /* Rules for the user map */

1197

1198 .content_map .leaflet-popup-content {

1199 margin: $lineheight/2;

1200 min-height: 50px;

1201 }

1202

1203 /* Rules for user popups on maps */

1204

1205 .user_popup {

1206 min-width: 200px;

1207 p {

1208 padding: 0 0 5px 0;

1209 margin-top: 0 0 0 60px;

1210 font-size: 12px;

1211 }

1212 img.user_thumbnail {

1213 float: left;

1214 margin: 0 $lineheight/2 0 0;

1215 }

1216 }

1217

1218 /* Rules for the user list */

1219

1220 #user_list {

1221 font-size: $lineheight/2;

1222 width: 100%;

1223

1224 tr {

1225 vertical-align: middle;

1226 }

1227

1228 p {

1229 margin-top: 0px;

1230 margin-bottom: 0px;

1231 }

1232 }

1233

1234 #user_list_actions {

1235 float: right;

1236 margin-top: $lineheight/2;

1237 }

1238

1239 /* Rules for the diary list page */

1240

1241 .diary_entry-list img.user_thumbnail {

1242 float: left;

1243 }

1244

1245 .diary_post {

1246 max-width: 740px;

1247 position: relative;

1248 margin-top: $lineheight/2;

1249 padding-top: $lineheight;

1250 border-top: 1px solid #ccc;

1251

1252 &:first-child {

1253 margin-top: 0;

1254 border-top: 0;

1255 padding-top: 0;

1256 }

1257 h1, h2 {

1258 font-size: 21px;

1259 line-height: 1;

1260 }

1261 small.deemphasize {

1262 float: left;

1263 display: block;

1264 }

1265 ul.secondary-actions { display: inline-block;}

1266 }

1267

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

1269 display: inline;

1270 }

1271

1272 #content .post_heading {

1273 margin-bottom: $lineheight;

1274 h2 {

1275 margin-top: 0;

1276 margin-bottom: $lineheight/2;

1277 font-size: 24px;

1278 }

1279 }

1280

1281 /* Rules for the diary entry page */

1282

1283 .diary_entry {

1284 #map {

1285 position: relative;

1286 width: 90%;

1287 height: 400px;

1288 border: 1px solid #ccc;

1289 display: none;

1290 margin-bottom: $lineheight;

1291 }

1292 #newcomment {

1293 border-top: 1px solid #ccc;

1294 padding-top: $lineheight;

1295 margin-top: $lineheight/2;

1296 }

1297 .comments {

1298 max-width: 740px;

1299 }

1300 .diary-comment {

1301 margin-top: $lineheight/2;

1302 border-top: 1px dashed #ccc;

1303 padding-top: $lineheight/2;

1304 &:first-child {

1305 margin-top: $lineheight;

1306 padding-top: $lineheight;

1307 border-top: 1px solid #ccc;

1308 }

1309 p {

1310 margin-bottom: $lineheight/2;

1311 }

1312 .comment-heading {

1313 margin-bottom: 0;

1314 margin-top: 0;

1315 }

1316 }

1317 }

1318

1319 .diary_entry-view img.user_thumbnail {

1320 float: left;

1321 }

1322

1323 /* Rules for the login page */

1324

1325 #login_openid_buttons {

1326 margin-bottom: 0;

1327 }

1328

1329 #login_openid_buttons li {

1330 float: left;

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

1332 }

1333

1334 /* Rules for the account confirmation page */

1335

1336 #terms {

1337 .legale {

1338 border: 1px solid #ccc;

1339 padding: $lineheight;

1340 margin-bottom: $lineheight;

1341 overflow: auto;

1342 height: 10em;

1343

1344 &:p#last {

1345 margin-bottom: 0px;

1346 }

1347

1348 &:ol {

1349 margin-bottom: 0px;

1350 }

1351

1352 &:img {

1353 display: block;

1354 margin: $lineheight auto inherit auto;

1355 }

1356 }

1357

1358 form.sign {

1359 input[type=submit] {

1360 float: left;

1361 }

1362 #decline {

1363 background: $grey;

1364 &:hover {

1365 background: darken($grey, $hovercolor);

1366 }

1367 }

1368 }

1369 fieldset {

1370 margin-bottom: $lineheight;

1371 }

1372 #contributorGuidance {

1373 background-color: $offwhite;

1374 border-radius: 4px;

1375 -moz-border-radius: 4px;

1376 }

1377 .signing-buttons {

1378 height: 50px;

1379 }

1380 }

1381

1382 /* Rules for the account settings page */

1383

1384 #accountForm .user_map {

1385 position: relative;

1386 width: 500px;

1387 height: 400px;

1388 border: 1px solid #ccc;

1389 }

1390

1391 #accountForm .user_image {

1392 margin-bottom: 0;

1393 }

1394

1395 #accountForm #user_image {

1396 margin-left: 20px;

1397 }

1398

1399 #accountForm ul.accountImage-options {

1400 margin-left: 120px;

1401 }

1402

1403 .nohome .location {

1404 display: none;

1405 }

1406

1407 #homerow .message {

1408 display: none;

1409 }

1410

1411 .nohome .message {

1412 display: inline !important;

1413 }

1414

1415 .content_map.settings_map {

1416 width: 50%;

1417 float: none;

1418 }

1419

1420 /* Rules for the oauth settings page */

1421

1422 .oauth_clients .buttons .oauth-edit {

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

1424 }

1425

1426 .oauth_clients .buttons .oauth-delete {

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

1428 }

1429

1430 /* Rules for messages pages */

1431

1432 .messages {

1433 width: 100%;

1434 border: 1px solid #ddd;

1435

1436 input[type="submit"] {

1437 margin: auto;

1438 }

1439 tbody tr {

1440 border-top: 1px solid #ccc;

1441 }

1442

1443 .inbox-row {

1444 background: #f8f8ff;

1445 }

1446

1447 .inbox-row-unread {

1448 background:#CBEEA7;

1449 }

1450

1451 .right {

1452 float: right;

1453 }

1454

1455 tr td,

1456 tr th {

1457 padding: $lineheight/4;

1458 }

1459 p:last-child,

1460 h2:last-child,

1461 h3:last-child,

1462 ol:last-child,

1463 ul:last-child {

1464 margin-bottom:0;

1465 }

1466 tr td {

1467 height: 30px;

1468 border-right: 1px solid $keyline;

1469 }

1470 }

1471

1472 .inbox-row .inbox-mark-read {

1473 display: none;

1474 }

1475

1476 .info-line {

1477 margin-bottom: $lineheight;

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

1479 border-bottom: 1px solid #ccc;

1480

1481 form, form div {

1482 display: inline;

1483 }

1484 }

1485

1486 .info-line .user_thumbnail_tiny {

1487 vertical-align: middle;

1488 }

1489

1490 .inbox-mark-unread,

1491 .inbox-mark-read,

1492 .inbox-delete {

1493 width: 1%;

1494 }

1495

1496 .inbox-row-unread .inbox-mark-unread {

1497 display: none;

1498 }

1499

1500 .message-read .message-buttons {

1501 margin-top: $lineheight;

1502 padding-top: $lineheight;

1503 border-top: 1px solid $keyline;

1504 }

1505

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

1507 border-radius: 0;

1508 }

1509

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

1511

1512 .flash {

1513 padding: $lineheight;

1514 &#error {

1515 background-color: #ff7070;

1516 }

1517 &#warning {

1518 background-color: #ffe0cc;

1519 }

1520 &#notice {

1521 background-color: #CBEEA7;

1522 }

1523 }

1524

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

1526

1527 .field_with_errors {

1528 padding: 2px;

1529 background-color: #ff7070;

1530 display: table;

1531 }

1532

1533 /* Rules for rails validation error boxes */

1534

1535 #errorExplanation {

1536 width: 400px;

1537 border: 2px solid #ff7070;

1538 padding: 0 $lineheight/2;

1539 margin-bottom: $lineheight;

1540 background-color: #f0f0f0;

1541

1542 h2 {

1543 margin: 0 -10px 10px -10px;

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

1545 font-weight: bold;

1546 font-size: 12px;

1547 background-color: #c00;

1548 color: #fff;

1549 text-align: left;

1550 }

1551

1552 p {

1553 color: #333;

1554 margin-bottom: 0px;

1555 padding: $lineheight/4;

1556 }

1557

1558 ul {

1559 padding-left: $lineheight;

1560

1561 li {

1562 font-size: 12px;

1563 list-style: disc;

1564 }

1565 }

1566 }

1567

1568 /* Rules for forms */

1569

1570 .standard-form {

1571 fieldset {

1572 margin-bottom: $lineheight;

1573 }

1574 label.standard-label {

1575 display: block;

1576 margin-bottom: $lineheight/4;

1577 font-size: $typeheight;

1578 font-weight: bold;

1579 line-height: 1.5;

1580 }

1581 label.standard-label.secondary {

1582 display: inline-block;

1583 font-weight: normal;

1584 }

1585 .form-help {

1586 font-weight: normal;

1587 }

1588 .form-column {

1589 float: left;

1590 margin-right: 20px;

1591 }

1592 .form-divider {

1593 margin-top: $lineheight;

1594 padding-top: $lineheight;

1595 border-top: 1px solid $keyline;

1596 }

1597 .form-row {

1598 margin-bottom: $lineheight/2;

1599 }

1600 .form-list {

1601 margin-bottom: 0;

1602 }

1603 .form-list li {

1604 margin-bottom: 5px;

1605 }

1606 input[type="checkbox"],

1607 input[type="radio"] {

1608 float: left;

1609 margin-top: 5px;

1610 }

1611 }

1612

1613 #remember_me_openid {

1614 display: block;

1615 }

1616

1617 input[type="checkbox"],

1618 input[type="radio"] {

1619 margin-right: 5px;

1620 }

1621

1622 input[type="text"],

1623 input[type="email"],

1624 input[type="url"],

1625 input[type="password"],

1626 textarea {

1627 border: 1px solid #ccc;

1628 padding: 2px 5px;

1629 margin: 0;

1630 width: 200px;

1631 }

1632

1633 textarea {

1634 padding: 5px;

1635 width: 100%;

1636 height: 100% !important;

1637 }

1638

1639 /* Rules for user images */

1640

1641 img.user_image {

1642 max-width: 100px;

1643 max-height: 100px;

1644 border: 1px solid #ccc;

1645 margin-bottom: $lineheight;

1646 float: left;

1647 margin-right: $lineheight;

1648 }

1649

1650 img.user_thumbnail {

1651 max-width: 50px;

1652 max-height: 50px;

1653 border: 1px solid #ccc;

1654 margin-right: $lineheight;

1655 }

1656

1657 img.user_thumbnail_tiny {

1658 max-width: 25px;

1659 max-height: 25px;

1660 border: 1px solid #ccc;

1661 }

1662

1663 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */

1664

1665 .nowrap {

1666 white-space: nowrap;

1667 }

1668

1669 /* Rules for geo microformats */

1670

1671 abbr.geo {

1672 border-bottom: none;

1673 }

1674

1675 /* Rules for RSS buttons */

1676

1677 .rsssmall {

1678 position: relative;

1679 top: 5px;

1680 }

1681

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

1683

1684 ul.secondary-actions {

1685 font-style: normal;

1686 margin-bottom: 0;

1687 margin-left: 0;

1688 &.pager {

1689 display: inline-block;

1690 margin-right: 60px;

1691 }

1692 li {

1693 display: block;

1694 float: left;

1695 list-style: none;

1696 border-left: 1px solid #ccc;

1697 padding-left: $lineheight/4;

1698 margin-right: $lineheight/4;

1699 &:first-child {

1700 border-left: 0;

1701 padding-left: 0;

1702 }

1703 &:last-child {

1704 margin-right: 0px;

1705 }

1706 }

1707 }

1708

1709 /* Utility for managing inner content areas */

1710

1711 .inner22 { padding: $lineheight;}

1712

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

1714

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

1716

1717 .inner02 { padding: 0 $lineheight;}

1718

1719 /* Utility for general button styles */

1720

1721 input[type="button"],

1722 input[type="submit"],

1723 input[type="reset"],

1724 a.button {

1725 cursor: pointer;

1726 border: 0;

1727 display: inline-block;

1728 line-height: 20px;

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

1730 min-width: 120px;

1731 margin: 0 0 $lineheight/2 0;

1732 color: white;

1733 background: $blue;

1734 text-align: center;

1735 border-radius: 2px;

1736 -moz-border-radius: 2px;

1737 &:hover {

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

1739 text-decoration: none;

1740 }

1741 &.deemphasize {

1742 background: $lightblue;

1743 &:hover {

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

1745 }

1746 }

1747 &:disabled {

1748 background: $lightblue;

1749 }

1750 &:last-child {

1751 margin-bottom: 0;

1752 }

1753 }

1754

1755 .buttons {

1756 min-width: 200px;

1757 input[type="submit"],

1758 input[type="button"],

1759 input[type="reset"],

1760 .button {

1761 box-sizing: border-box;

1762 float: left;

1763 border-radius: 0;

1764 margin:0;

1765 min-width: 100px;

1766 max-width: 150px;

1767 border-right:1px solid white;

1768 }

1769 input:first-child,

1770 .button:first-child {

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

1772 }

1773 input:last-child,

1774 .button:last-child {

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

1776 border-right-width: 0;

1777 }

1778 input:only-child,

1779 .button:only-child,

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

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

1782 border-radius:2px;

1783 border-right-width: 0;

1784 }

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

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

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

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

1789 border-right-width: 0;

1790 }

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

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

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

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

1795 border-right-width: 1px solid white;

1796 }

1797 }

1798

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

1800

1801 .table0,

1802 .item0 {

1803 background: $offwhite;

1804 }

1805

1806 .table1,

1807 .item1 {

1808 background: #fff;

1809 }

1810

1811 /* Rules for OpenID logo */

1812

1813 .openid_logo {

1814 vertical-align: text-bottom;

1815 border: 0;

1816 }

1817

1818 /* Rules for rich text */

1819

1820 .richtext,

1821 .prose {

1822 h1, h2 {

1823 padding-bottom: $lineheight/2;

1824 border-bottom: 1px dashed #cccccc;

1825 margin-bottom: $lineheight/2;

1826 }

1827

1828 h1 {

1829 font-size: 24px;

1830 }

1831

1832 h2 {

1833 font-size: 18px;

1834 }

1835

1836 h3 {

1837 font-size: $typeheight;

1838 }

1839

1840 code {

1841 font-size: 13px;

1842 background: #e8e8e8;

1843 padding: 2px 3px;

1844 }

1845

1846 pre {

1847 font-size: 13px;

1848 background: #e8e8e8;

1849 padding: 2px 3px;

1850

1851 code {

1852 padding: 0;

1853 }

1854 }

1855

1856 img {

1857 padding: $lineheight;

1858 background-color: $offwhite;

1859 display: block;

1860 max-width: 100%;

1861 margin: auto;

1862 }

1863

1864 blockquote {

1865 border-left: $lineheight solid $offwhite;

1866 padding-left: $lineheight;

1867 margin: 0;

1868 color: #7E7E7E;

1869 }

1870

1871 ul, ol {

1872 font-style: italic;

1873 padding-left: $lineheight;

1874 margin-bottom: $lineheight;

1875 margin-left: $lineheight;

1876 }

1877

1878 ul li {

1879 list-style: disc;

1880 }

1881

1882 ol li {

1883 list-style: decimal;

1884 }

1885 }

1886

1887 .diary_post .richtext {

1888 margin-top: $lineheight;

1889 }

1890

1891 .comments .richtext {

1892 margin-left: 70px;

1893 margin-top: 0;

1894 }

1895

1896 /* Rules for rich text editors */

1897

1898 .richtext_container {

1899 margin-bottom: $lineheight;

1900

1901 .richtext_content {

1902 width: 50%;

1903 display: inline-block;

1904 vertical-align: top;

1905

1906 .richtext_preview {

1907 display: inline-block;

1908 padding: $lineheight;

1909 background-color: $offwhite;

1910 overflow-x: auto;

1911

1912 &.loading {

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

1914 background-repeat: no-repeat;

1915 background-position: center;

1916 }

1917

1918 > :first-child {

1919 margin-top: 0px;

1920 }

1921 }

1922 }

1923

1924 .richtext_help {

1925 display: inline-block;

1926 vertical-align: top;

1927 margin-left: 15px;

1928 background-color: #f8f8ff;

1929 padding: $lineheight/2;

1930 width: 220px;

1931

1932 ul {

1933 margin-bottom: 0;

1934 }

1935

1936 h4.heading, li {

1937 border-bottom: 1px solid #ccc;

1938 margin-bottom: $lineheight/4;

1939 padding-bottom: $lineheight/4;

1940 }

1941

1942 li h4, li span, li p {

1943 display: inline-block;

1944 vertical-align: top;

1945 font-size: 11px;

1946 }

1947

1948 li h4 {

1949 width: 40%;

1950 margin: 0;

1951 }

1952

1953 li span, li p {

1954 width: 50%;

1955 margin-left: $lineheight/2;

1956 margin-bottom: $lineheight/4;

1957 white-space: nowrap;

1958 }

1959 }

1960 }

1961

1962 /* Rules for the user notes list */

1963

1964 .note_list {

1965 tr.creator {

1966 background-color: #eeeeee;

1967 }

1968

1969 td {

1970 padding: 3px;

1971 }

1972

1973 p {

1974 margin-bottom: 0px;

1975 }

1976 }

1977

1978 /* Rules for the notes interface */

1979

1980 .leaflet-popup-content .note {

1981 padding-top: $lineheight/2;

1982 }

1983

1984 .leaflet-popup-content .note {

1985 h2 {

1986 margin-bottom: $lineheight/2;

1987 }

1988

1989 div {

1990 margin-top: $lineheight/2;

1991 }

1992

1993 .permalink {

1994 position: absolute;

1995 top: $lineheight/4;

1996 left: $lineheight/4;

1997 min-width: 15px;

1998 min-height: 15px;

1999 background: image-url("sprite.png") 0 -45px no-repeat;

2000 }

2001

2002 .permalink span {

2003 display: none;

2004 padding-left: $lineheight;

2005 }

2006

2007 .permalink:hover span {

2008 display: block;

2009 }

2010

2011 .warning {

2012 display: block;

2013 background-color: #ffe0cc;

2014 padding: 4px 6px;

2015 margin-bottom: $lineheight/2;

2016 }

2017

2018 .comment_body {

2019 margin-top: 2px;

2020 margin-bottom: 2px;

2021

2022 p {

2023 margin-top: 0px;

2024 margin-bottom: 0px;

2025 }

2026 }

2027

2028 .comment {

2029 width: 100%;

2030 height: 100px;

2031 }

2032

2033 .buttons {

2034 margin-top: $lineheight/4;

2035 text-align: right;

2036 }

2037 }

2038

2039 /*

2040 * Rules for the iD editor

2041 */

2042 .id-embed {

2043 width: 100%;

2044 height: 100%;

2045 }

2046

2047 /* Rules for rotating sidebar ads */

2048 .ad-container {

2049 display: block;

2050 height: 120px;

2051 overflow: hidden;

2052 position: relative;

2053 border-bottom: 1px solid #ccc;

2054 }

2055

2056 .ad {

2057 height: 100px;

2058 border: 0;

2059 background: #fff;

2060 }