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 .active .icon.geolocate { background-position: -80px -20px; }

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

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

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

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

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

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

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

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

174

175 /* Rules for links */

176

177 a {

178 color: #00f;

179 text-decoration: none;

180 &:hover {

181 text-decoration: underline;

182 }

183 }

184

185 /* Rules for horizontal lines */

186

187 hr {

188 border: none;

189 background-color: #ccc;

190 color: #ccc;

191 height: 1px;

192 }

193

194 /* General styles for tables */

195

196 table {

197 width: 100%;

198 margin-bottom: $lineheight;

199 th, td {

200 text-align: left;

201 padding: $lineheight/4;

202 line-height: $lineheight;

203 }

204 th {

205 font-weight: bold;

206 vertical-align: top;

207 }

208 td {

209 vertical-align: middle;

210 }

211 }

212

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

214

215 #left {

216 position: absolute;

217 height: 100%;

218 width: 185px;

219 font-size: 11px;

220 line-height: 1.1;

221 z-index: 100;

222 border-right: 1px solid #ccc;

223 }

224

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

226

227 #logo {

228 display: block;

229 width: 170px;

230 min-width: 170px;

231 padding: $lineheight $lineheight/4;

232 text-align: center;

233 margin: auto;

234 }

235

236 #logo h1 {

237 font-size: 18px;

238 line-height: 1;

239 text-align: center;

240 margin: 0;

241 }

242

243 #logo h2 {

244 font-size: $lineheight/2;

245 line-height: 15px;

246 margin: 0;

247 }

248

249 /* Rules for the site name */

250

251 #small-title {

252 display: none;

253 }

254

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

256

257 .sidebar-copy {

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

259 p {

260 margin: $lineheight/4 0;

261 }

262 }

263 .sidebar-copy.intro {

264 border-top: 1px solid #ccc;

265 }

266

267 /*

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

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

270 * undergoing maintenance.

271 */

272

273 .sidebar-alert {

274 padding: $lineheight/4;

275 border-top: 1px solid #ccc;

276 margin-top: 4px;

277 margin-bottom: -5px;

278 background: #e00;

279 font-size: 12px;

280 font-weight: bold;

281 p {

282 margin: $lineheight/4;

283 }

284 }

285

286 /*

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

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

289 * donation drives.

290 */

291

292 .sidebar-notice {

293 padding: $lineheight/4;

294 border-top: 1px solid #ccc;

295 margin-top: 4px;

296 margin-bottom: -5px;

297 background: #ea0;

298 font-size: 12px;

299 p {

300 margin: $lineheight/4;

301 }

302 }

303

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

305

306 .left_menu {

307 left: 0px;

308 margin: 0;

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

310 font-size: 12px;

311 line-height: 1.25;

312 list-style-type: none;

313 border-bottom: 1px solid #ccc;

314 border-top: 1px solid #ccc;

315 img {

316 margin: $lineheight/2 0px;

317 }

318

319 ul {

320 padding: 0;

321 margin: 0;

322 }

323

324 li {

325 list-style-type: none;

326 padding: 0;

327 margin: 0;

328 }

329

330 h4 {

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

332 font-size: 12px;

333 margin: 0;

334 }

335

336 li:last-child h4 {

337 padding-top: 0;

338 }

339 }

340

341 /* Rules for SOTM advert */

342

343 #sotm {

344 width: 165px;

345 margin: $lineheight/2;

346 padding: 0px;

347 border: 0px;

348 background: #fff;

349 img {

350 width: 165px;

351 }

352 }

353

354 /*

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

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

357 * and the tag cloud on the traces pages.

358 */

359

360 .optionalbox {

361 left: 0px;

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

363 margin: $lineheight/4 0;

364 text-align: left;

365 }

366

367 /* Rules for the search box */

368

369 #search_field {

370 position: relative;

371

372 form {

373 width: 165px;

374 }

375

376 input[type="text"] {

377 width: 165px;

378 padding: 3px;

379 font-size: $typeheight;

380 line-height: 1.1;

381 height: 25px;

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

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

384 }

385

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

387 outline: none;

388 border: 1px solid #000;

389 }

390

391 input[type="submit"] {

392 border: 0;

393 margin: 0;

394 padding: 0;

395 width: 15px;

396 height: 15px;

397 min-width: 0;

398 text-indent: -1000px;

399 overflow: hidden;

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

401 position: absolute;

402 top: $lineheight/4;

403 right: $lineheight/4;

404 cursor: pointer;

405 }

406 }

407

408 .search_help {

409 margin: $lineheight/4 0 0 0;

410 }

411

412 /* Utility for de-emphasizing content */

413

414 .deemphasize {

415 color: #999;

416 a {

417 color: $blue;

418 }

419 }

420

421 /* Rules for donation request box */

422

423 a.donate {

424 display: block;

425 width: 163px;

426 padding: $lineheight/4;

427 border: 1px solid #AED1A0;

428 background: #cbeea7;

429 font-size: $typeheight;

430 line-height: 1.4;

431 text-align: center;

432 border-radius: 2px;

433 color: #222;

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

435

436 &:hover {

437 background: #9ed485;

438 text-decoration: none;

439 }

440 }

441

442 /* Rules for Creative Commons logo button */

443

444 #cclogo {

445 margin: $lineheight/2 0;

446 float: right;

447 }

448

449 /* Rules for tabbed navigation bar */

450

451 #top-bar {

452 position: relative;

453 margin-left: 185px;

454 height: 30px;

455 border-bottom: 1px solid #ccc;

456 background: white;

457 z-index: 100;

458 }

459

460 .site-edit #top-bar,

461 .site-index #top-bar,

462 .site-export #top-bar {

463 position: fixed;

464 left: 0;

465 right: 0;

466 }

467

468 #tabnav {

469 height: 29px;

470 margin-bottom:0;

471 overflow: hidden;

472 li {

473 display: inline;

474 }

475 a, a:link, a:visited {

476 float: left;

477 font-weight: bold;

478 padding: 3px $lineheight/2;

479 text-decoration: none;

480 color: #333;

481 float: left;

482 margin-right: 1px;

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

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

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

486 transition: color 200ms ease-in;

487 }

488 }

489

490 .site-index #tabnav a#viewanchor,

491 .site-edit #tabnav a#editanchor,

492 .changeset-list #tabnav a#historyanchor,

493 .site-export #tabnav a#exportanchor {

494 border-bottom: 1px solid #aaa;

495 background: #9ed485;

496 color: #000;

497 }

498

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

500 text-decoration: underline;

501 }

502

503 #tabnav a:link.disabled,

504 #tabnav a:visited.disabled,

505 #tabnav a:link:hover.disabled,

506 #tabnav a:visited:hover.disabled {

507 color: #ccc;

508 cursor: default;

509 &:hover {

510 text-decoration: none;

511 }

512 }

513

514 /* Utility for styling notification numbers */

515

516 .count-number {

517 padding: 2px $lineheight/4;

518 border-radius: 2px;

519 background: #d7d7ff;

520 margin: 0 2px;

521 font-size: 11px;

522 color: #333;

523 }

524

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

526

527 #greeting {

528 float: right;

529 padding-top: 3px;

530 margin-right: $lineheight/4;

531 }

532

533 .greeting-bar-unread {

534 font-weight: bold;

535 }

536

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

538

539 #noscript {

540 z-index: 20000000;

541 position: absolute;

542 top: 15px;

543 left: 15px;

544 }

545

546 /* Rules for Leaflet maps */

547

548 .leaflet-control .control-button {

549 display: block;

550 height: 40px;

551 width: 40px;

552 background-color: white;

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

554 border-radius: 4px;

555 margin-bottom: 10px;

556 }

557

558 .leaflet-control .zoomin,

559 .control-layers .control-button,

560 .control-note .control-button {

561 margin-bottom: 0px;

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

563 }

564

565 .leaflet-control .zoomout {

566 margin-bottom: 0px;

567 border-radius: 0px;

568 }

569

570 .control-locate .control-button,

571 .control-key .control-button,

572 .control-share .control-button {

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

574 }

575

576 .leaflet-control .control-button:hover {

577 background-color: white;

578 }

579

580 .leaflet-control .control-button .icon {

581 margin: 10px;

582 }

583

584 #map-ui {

585 position: absolute;

586 display: none;

587 right: 0;

588 width: 250px;

589 height: 100%;

590 background: white;

591 overflow: auto;

592 }

593

594 #map-ui {

595 section {

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

597 padding: 15px;

598 }

599

600 section:first-child {

601 border-top:0;

602 }

603

604 h2 {

605 margin:0;

606 }

607

608 a.close-button {

609 float: right;

610 padding:5px;

611 font-size:20px;

612 line-height:15px;

613 color:#222;

614 border:1px solid #ddd;

615 }

616

617 li {

618 border-radius: 4px;

619 overflow: hidden;

620 margin-bottom: 10px;

621 }

622

623 label {

624 display: block;

625 padding: 5px;

626 background-color: #eee;

627 cursor: pointer;

628 }

629

630 li.active label {

631 background-color: #ccc;

632 }

633

634 input[type=text] {

635 width:220px;

636 }

637

638 .base-layers {

639 .leaflet-container {

640 width: 100%;

641 height: 50px;

642 cursor: pointer;

643 }

644 }

645 }

646

647 .leaflet-control-attribution {

648 a.disabled {

649 color: #99c9dc;

650 cursor: default;

651 text-decoration: none;

652 }

653

654 ul.secondary-actions {

655 float: left;

656 margin-right: $lineheight/4;

657

658 &:only-child {

659 margin-right: 0px;

660 }

661 }

662 }

663

664 .site-index .leaflet-top,

665 .site-export .leaflet-top {

666 top: $lineheight/2 !important;

667 .leaflet-control {

668 margin-top: 0px !important;

669 }

670 }

671

672 .site-index #map .olControlScaleLine,

673 .site-export #map .olControlScaleLine {

674 left: $lineheight/2 !important;

675 }

676

677 .leaflet-popup-scrolled {

678 padding-right: $lineheight;

679 border-bottom: 0px !important;

680 border-top: 0px !important;

681 }

682

683 .leaflet-popup-content-wrapper {

684 border-radius: 4px !important;

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

686 }

687

688 /* Rules for edit menu */

689

690 .menuicon {

691 padding: 0 $lineheight/4;

692 font-weight: normal;

693 display: inline-block;

694 &:hover {

695 text-decoration: none !important;

696 }

697 }

698

699 .menu {

700 display: none;

701 z-index: 10000;

702 position: absolute;

703 background-color: #ffffff;

704 border: 1px solid $keyline;

705 border-top: 0px;

706 ul {

707 margin: 0px;

708 }

709 li {

710 padding: 2px $lineheight/4;

711 border-top: 1px solid #eee;

712 white-space: nowrap;

713 }

714 }

715

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

717

718 #attribution {

719 display: none;

720 }

721

722 .attribution_license,

723 .attribution_project {

724 text-align: left;

725 }

726

727 .attribution_notice {

728 text-align: center;

729 }

730

731 /* Rules for the popout map sidebar */

732

733 #sidebar {

734 display: none;

735 position: absolute;

736 overflow: auto;

737 top: 0px;

738 bottom: 0px;

739 left: 0px;

740 border-right: 1px solid $keyline;

741 width: 33.3333%;

742 .sidebar_heading {

743 position: relative;

744 padding: $lineheight/2 $lineheight;

745 z-index: 9999;

746 background: $offwhite;

747 border-bottom: 1px solid #ccc;

748 }

749 h4 {

750 margin: 0;

751 }

752 ul {

753 margin-bottom: 0;

754 &:last-child {

755 border-bottom: 1px solid #ccc;

756 }

757 li {

758 margin-bottom: $lineheight/4;

759 &:last-child {

760 margin-bottom: 0;

761 }

762 }

763 }

764 }

765

766 #sidebar_close {

767 position: absolute;

768 height: $lineheight;

769 top: 0px;

770 bottom: 0;

771 right: $lineheight;

772 margin: auto;

773 }

774

775 #sidebar_content {

776 position: relative;

777 margin-bottom: 20px;

778 width: 100%;

779 h4 {

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

781 margin-top: $lineheight/2;

782 margin-bottom: 0;

783 border-bottom: 1px solid #ddd;

784 }

785 }

786

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

788

789 #mapkey {

790 .mapkey-table-key img {

791 display: block;

792 margin-left: auto;

793 margin-right: auto;

794 }

795 td {

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

797 }

798 }

799

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

801

802 .search_searching {

803 margin-top: $lineheight/4;

804 margin-bottom: $lineheight/4;

805 }

806

807 .search_results_entry {

808 margin-bottom: 0;

809

810 .search_details {

811 display: block;

812 text-align: right;

813 }

814 }

815

816 .search_results_entry .search_searching {

817 text-align: center;

818 margin: $lineheight auto;

819 width: $lineheight;

820 display: block;

821 }

822

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

824

825 .search_results_error {

826 color: #f00;

827 }

828

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

830

831 #browse_content {

832 position: relative;

833 .browse_show_list.button {

834 position: absolute;

835 left: $lineheight;

836 right: $lineheight;

837 bottom: -40px;

838 margin-bottom: 0;

839 }

840 a.more-details {

841 position: absolute;

842 top: 0;

843 right: $lineheight;

844 }

845 ul li {

846 margin-bottom: 0;

847 }

848 }

849

850 .browse_details {

851 position: relative;

852 }

853

854 .browse_status {

855 display: none;

856 }

857

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

859

860 .export_bounds {

861 text-align: center;

862 }

863

864 .export_area_inputs {

865 margin-bottom: $lineheight/2;

866 input[type="text"] {

867 width: 60px;

868 margin-bottom: 5px;

869 }

870 }

871

872 .export_bound {

873 margin: $lineheight/4;

874 }

875

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

877 width: 100%;

878 }

879

880 #sidebar #marker_inputs li:last-child {

881 margin-bottom: $lineheight/2;

882 }

883

884 #export_osm,

885 #export_mapnik,

886 #export_osmarender {

887 display: none;

888 }

889

890 /* Rules for the main content area */

891

892 #content {

893 padding: $lineheight;

894 position: relative;

895 }

896

897 .site-edit #content,

898 .site-index #content,

899 .site-export #content {

900 position: fixed;

901 padding: 0;

902 top: 30px; bottom: 0;

903 left: 184px; right: 0;

904 border-left: 1px solid #ccc;

905 }

906

907 .wrapper {

908 margin-left: 184px;

909 border-left: 1px solid #ccc;

910 text-align: left;

911 }

912

913 .site-edit #content {

914 top: 30px;

915 }

916

917 #content.maximised {

918 top: 0;

919 left: 0;

920 right: 0;

921 bottom: 0;

922 border: 0;

923 z-index: 1000;

924 }

925

926 #slim_container {

927 width: 100%;

928 }

929

930 #slim_container_content {

931 max-width: 50em;

932 background-color: #FFFFFF;

933 margin: $lineheight/2 auto;

934 padding: 3px;

935 border-radius: 25px;

936 -moz-border-radius: 25px;

937 border: 1px solid #e6e6e6;

938 }

939

940 #slim_content {

941 margin: $lineheight/2;

942 margin-top: 95px;

943 max-width: 50em;

944

945 .content-heading {

946 margin-bottom: 15px;

947 }

948 }

949

950 #slim_header {

951 margin: 30px $lineheight/2;

952 position: absolute;

953 top: 0px;

954 margin-right: $lineheight/4;

955 img {

956 vertical-align: middle;

957 margin-bottom: $lineheight/4;

958 margin-right: $lineheight/4;

959 }

960 }

961

962 .content-heading {

963 position: relative;

964 padding: $lineheight;

965 background: $offwhite;

966 h1, h2 {

967 margin-bottom: $lineheight/2;

968 line-height: 100%;

969 &:last-child {

970 margin-bottom: 0;

971 }

972 }

973 p {

974 margin-top: $lineheight/2;

975 margin-bottom: 0px;

976 }

977 }

978

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

980

981 .content_map {

982 position: relative;

983 width: 45%;

984 height: 400px;

985 border: 1px solid #ccc;

986 margin-bottom: $lineheight;

987 float: right;

988 }

989

990 .content_map #small_map {

991 height: 100%;

992 width: 100%;

993 margin-bottom: $lineheight;

994 }

995

996 /* Rules for the home page */

997

998 .site-export #map,

999 .site-index #map {

1000 position: absolute;

1001 top: 0px;

1002 bottom: 0px;

1003 left: 0px;

1004 right: 0px;

1005 }

1006

1007 /* Rules for the edit page */

1008

1009 .site-edit #map {

1010 position: absolute;

1011 top: 0px;

1012 bottom: 0px;

1013 left: 0px;

1014 right: 0px;

1015 overflow: hidden;

1016 }

1017

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

1019

1020 #changeset_list {

1021 width: 100%;

1022 ul {

1023 padding: $lineheight/2 0;

1024 margin-bottom: 0px;

1025 border-top: 1px solid #ccc;

1026 &:last-child {

1027 border-bottom: 1px solid #ccc;

1028 }

1029 }

1030 .selected {

1031 background: #FFFFC0;

1032 }

1033 .date,

1034 .user {

1035 border-left: 1px solid #ccc;

1036 padding-left: $lineheight/4;

1037 margin-right: $lineheight/4;

1038 }

1039 }

1040

1041 #changeset_list_map_wrapper {

1042 position: absolute;

1043 width: 50%;

1044 height: 490px;

1045 top: 0;

1046 right: 0;

1047 }

1048

1049 #changeset_list_map_wrapper.scrolled {

1050 position: fixed;

1051 }

1052

1053 #changeset_list_map {

1054 position: absolute;

1055 bottom: $lineheight;

1056 top: $lineheight;

1057 right: $lineheight;

1058 left: $lineheight;

1059 border: 1px solid #ccc;

1060 }

1061

1062 #changeset_list_map_wrapper.scrolled #changeset_list_map {

1063 margin-left: 93px;

1064 }

1065

1066 /* Rules for the data browser */

1067

1068 .browse-section {

1069 border-top: 1px solid #ccc;

1070 margin-top: $lineheight/2;

1071 padding-top: $lineheight/2;

1072 &:first-child {

1073 margin-top: 0;

1074 }

1075 .warning {

1076 background-color: #ffe0cc;

1077 margin: 0px;

1078 padding: 4px 6px;

1079 max-width: 100%;

1080 }

1081 h4, p {

1082 margin-bottom: $lineheight/4;

1083 }

1084 p, ul, .bbox, .geo {

1085 display: inline-block;

1086 vertical-align: top;

1087 max-width: 65%;

1088 }

1089 ul p {

1090 margin-left: 0;

1091 margin-bottom: 0;

1092 }

1093 h4 {

1094 width: 33.3333%;

1095 display: inline-block;

1096 vertical-align: top;

1097 }

1098 }

1099

1100 .bbox {

1101 div {

1102 width: 33.3333%;

1103 text-align: center;

1104 padding: $lineheight/4 0;

1105 overflow: hidden;

1106 text-overflow: ellipsis;

1107 float: left;

1108 }

1109 .max_lat,

1110 .min_lat {

1111 margin-left: auto;

1112 margin-right: auto;

1113 width: 100%;

1114 }

1115 }

1116

1117 #browse_map .geolink {

1118 display: none;

1119 }

1120

1121 #browse_map .secondary-actions {

1122 margin-bottom: $lineheight/2;

1123 }

1124

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

1126

1127 #trace_list {

1128 font-size: $lineheight/2;

1129 border-width: 0px;

1130 text-align: right;

1131

1132 .trace_summary {

1133 font-size: 12px;

1134 color: gray;

1135 }

1136

1137 .trace_pending {

1138 color: red;

1139 }

1140

1141 .trace_public {

1142 color: green;

1143 }

1144

1145 .trace_identifiable {

1146 color: green;

1147 }

1148

1149 .trace_trackable {

1150 color: red;

1151 }

1152

1153 .trace_private {

1154 color: red;

1155 }

1156 }

1157

1158 /* Rules for the user profile page */

1159

1160 #userinformation {

1161

1162 min-height: 100px;

1163 .userinformation-inner {

1164 float: left;

1165 }

1166 h2 {

1167 margin-top: 0;

1168 }

1169 .user-description {

1170 width: 100%;

1171 clear: both;

1172 }

1173 .deemphasize {

1174 margin: 0;

1175 }

1176 }

1177

1178 .admin-user-info small {

1179 margin-bottom: $lineheight/2;

1180 display: inline;

1181 margin-right: $lineheight;

1182 }

1183

1184 .activity-block {

1185 clear: left;

1186 border-bottom: 1px solid #ccc;

1187 padding-bottom: $lineheight;

1188 float: left;

1189 h3 {

1190 margin-bottom: $lineheight/2;

1191 }

1192 }

1193

1194 .contact-activity {

1195 margin-top: $lineheight;

1196 width: 100%;

1197 }

1198

1199 .activity-details p {

1200 margin-left: 70px;

1201 margin-bottom: 0;

1202 }

1203

1204 #friends-container .contact-activity ul {

1205 margin-left: 70px;

1206 }

1207

1208 .user-view {

1209 p#no_home_location {

1210 margin: $lineheight;

1211 }

1212 .user_thumbnail {

1213 margin-top: $lineheight/4;

1214 float: left;

1215 }

1216 }

1217

1218 /* Rules for the user map */

1219

1220 .content_map .leaflet-popup-content {

1221 margin: $lineheight/2;

1222 min-height: 50px;

1223 }

1224

1225 /* Rules for user popups on maps */

1226

1227 .user_popup {

1228 min-width: 200px;

1229 p {

1230 padding: 0 0 5px 0;

1231 margin-top: 0 0 0 60px;

1232 font-size: 12px;

1233 }

1234 img.user_thumbnail {

1235 float: left;

1236 margin: 0 $lineheight/2 0 0;

1237 }

1238 }

1239

1240 /* Rules for the user list */

1241

1242 #user_list {

1243 font-size: $lineheight/2;

1244 width: 100%;

1245

1246 tr {

1247 vertical-align: middle;

1248 }

1249

1250 p {

1251 margin-top: 0px;

1252 margin-bottom: 0px;

1253 }

1254 }

1255

1256 #user_list_actions {

1257 float: right;

1258 margin-top: $lineheight/2;

1259 }

1260

1261 /* Rules for the diary list page */

1262

1263 .diary_entry-list img.user_thumbnail {

1264 float: left;

1265 }

1266

1267 .diary_post {

1268 max-width: 740px;

1269 position: relative;

1270 margin-top: $lineheight/2;

1271 padding-top: $lineheight;

1272 border-top: 1px solid #ccc;

1273

1274 &:first-child {

1275 margin-top: 0;

1276 border-top: 0;

1277 padding-top: 0;

1278 }

1279 h1, h2 {

1280 font-size: 21px;

1281 line-height: 1em;

1282 }

1283 small.deemphasize {

1284 float: left;

1285 display: block;

1286 }

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

1288 }

1289

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

1291 display: inline;

1292 }

1293

1294 #content .post_heading {

1295 margin-bottom: $lineheight;

1296 h2 {

1297 margin-top: 0;

1298 margin-bottom: $lineheight/2;

1299 font-size: 24px;

1300 }

1301 }

1302

1303 /* Rules for the diary entry page */

1304

1305 .diary_entry {

1306 #map {

1307 position: relative;

1308 width: 90%;

1309 height: 400px;

1310 border: 1px solid #ccc;

1311 display: none;

1312 margin-bottom: $lineheight;

1313 }

1314 #newcomment {

1315 border-top: 1px solid #ccc;

1316 padding-top: $lineheight;

1317 margin-top: $lineheight/2;

1318 }

1319 .comments {

1320 max-width: 740px;

1321 }

1322 .diary-comment {

1323 margin-top: $lineheight/2;

1324 border-top: 1px dashed #ccc;

1325 padding-top: $lineheight/2;

1326 &:first-child {

1327 margin-top: $lineheight;

1328 padding-top: $lineheight;

1329 border-top: 1px solid #ccc;

1330 }

1331 p {

1332 margin-bottom: $lineheight/2;

1333 }

1334 .comment-heading {

1335 margin-bottom: 0;

1336 margin-top: 0;

1337 }

1338 }

1339 }

1340

1341 .diary_entry-view img.user_thumbnail {

1342 float: left;

1343 }

1344

1345 /* Rules for the login page */

1346

1347 #login_openid_buttons {

1348 margin-bottom: 0;

1349 }

1350

1351 #login_openid_buttons li {

1352 float: left;

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

1354 }

1355

1356 /* Rules for the account confirmation page */

1357

1358 #terms {

1359 .legale {

1360 border: 1px solid #ccc;

1361 padding: $lineheight;

1362 margin-bottom: $lineheight;

1363 overflow: auto;

1364 height: 10em;

1365

1366 &:p#last {

1367 margin-bottom: 0px;

1368 }

1369

1370 &:ol {

1371 margin-bottom: 0px;

1372 }

1373

1374 &:img {

1375 display: block;

1376 margin: $lineheight auto inherit auto;

1377 }

1378 }

1379

1380 form.sign {

1381 input[type=submit] {

1382 float: left;

1383 }

1384 #decline {

1385 background: $grey;

1386 &:hover {

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

1388 }

1389 }

1390 }

1391 fieldset {

1392 margin-bottom: $lineheight;

1393 }

1394 #contributorGuidance {

1395 background-color: $offwhite;

1396 border-radius: 4px;

1397 -moz-border-radius: 4px;

1398 }

1399 .signing-buttons {

1400 height: 50px;

1401 }

1402 }

1403

1404 /* Rules for the account settings page */

1405

1406 #accountForm .user_map {

1407 position: relative;

1408 width: 500px;

1409 height: 400px;

1410 border: 1px solid #ccc;

1411 }

1412

1413 #accountForm .user_image {

1414 margin-bottom: 0;

1415 }

1416

1417 #accountForm #user_image {

1418 margin-left: 20px;

1419 }

1420

1421 #accountForm ul.accountImage-options {

1422 margin-left: 120px;

1423 }

1424

1425 .nohome .location {

1426 display: none;

1427 }

1428

1429 #homerow .message {

1430 display: none;

1431 }

1432

1433 .nohome .message {

1434 display: inline !important;

1435 }

1436

1437 .content_map.settings_map {

1438 width: 50%;

1439 float: none;

1440 }

1441

1442 /* Rules for the oauth settings page */

1443

1444 .oauth_clients .buttons .oauth-edit {

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

1446 }

1447

1448 .oauth_clients .buttons .oauth-delete {

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

1450 }

1451

1452 /* Rules for messages pages */

1453

1454 .messages {

1455 width: 100%;

1456 border: 1px solid #ddd;

1457

1458 input[type="submit"] {

1459 margin: auto;

1460 }

1461 tbody tr {

1462 border-top: 1px solid #ccc;

1463 }

1464

1465 .inbox-row {

1466 background: #f8f8ff;

1467 }

1468

1469 .inbox-row-unread {

1470 background:#CBEEA7;

1471 }

1472

1473 .right {

1474 float: right;

1475 }

1476

1477 tr td,

1478 tr th {

1479 padding: $lineheight/4;

1480 }

1481 p:last-child,

1482 h2:last-child,

1483 h3:last-child,

1484 ol:last-child,

1485 ul:last-child {

1486 margin-bottom:0;

1487 }

1488 tr td {

1489 height: 30px;

1490 border-right: 1px solid $keyline;

1491 }

1492 }

1493

1494 .inbox-row .inbox-mark-read {

1495 display: none;

1496 }

1497

1498 .info-line {

1499 margin-bottom: $lineheight;

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

1501 border-bottom: 1px solid #ccc;

1502

1503 form, form div {

1504 display: inline;

1505 }

1506 }

1507

1508 .info-line .user_thumbnail_tiny {

1509 vertical-align: middle;

1510 }

1511

1512 .inbox-mark-unread,

1513 .inbox-mark-read,

1514 .inbox-delete {

1515 width: 1%;

1516 }

1517

1518 .inbox-row-unread .inbox-mark-unread {

1519 display: none;

1520 }

1521

1522 .message-read .message-buttons {

1523 margin-top: $lineheight;

1524 padding-top: $lineheight;

1525 border-top: 1px solid $keyline;

1526 }

1527

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

1529 border-radius: 0;

1530 }

1531

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

1533

1534 .flash {

1535 padding: $lineheight;

1536 &#error {

1537 background-color: #ff7070;

1538 }

1539 &#warning {

1540 background-color: #ffe0cc;

1541 }

1542 &#notice {

1543 background-color: #CBEEA7;

1544 }

1545 }

1546

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

1548

1549 .field_with_errors {

1550 padding: 2px;

1551 background-color: #ff7070;

1552 display: table;

1553 }

1554

1555 /* Rules for rails validation error boxes */

1556

1557 #errorExplanation {

1558 width: 400px;

1559 border: 2px solid #ff7070;

1560 padding: 0 $lineheight/2;

1561 margin-bottom: $lineheight;

1562 background-color: #f0f0f0;

1563

1564 h2 {

1565 margin: 0 -10px 10px -10px;

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

1567 font-weight: bold;

1568 font-size: 12px;

1569 background-color: #c00;

1570 color: #fff;

1571 text-align: left;

1572 }

1573

1574 p {

1575 color: #333;

1576 margin-bottom: 0px;

1577 padding: $lineheight/4;

1578 }

1579

1580 ul {

1581 padding-left: $lineheight;

1582

1583 li {

1584 font-size: 12px;

1585 list-style: disc;

1586 }

1587 }

1588 }

1589

1590 /* Rules for forms */

1591

1592 .standard-form {

1593 fieldset {

1594 margin-bottom: $lineheight;

1595 }

1596 label.standard-label {

1597 display: block;

1598 margin-bottom: $lineheight/4;

1599 font-size: $typeheight;

1600 font-weight: bold;

1601 line-height: 1.5;

1602 }

1603 label.standard-label.secondary {

1604 display: inline-block;

1605 font-weight: normal;

1606 }

1607 .form-help {

1608 font-weight: normal;

1609 }

1610 .form-column {

1611 float: left;

1612 margin-right: 20px;

1613 }

1614 .form-divider {

1615 margin-top: $lineheight;

1616 padding-top: $lineheight;

1617 border-top: 1px solid $keyline;

1618 }

1619 .form-row {

1620 margin-bottom: $lineheight/2;

1621 }

1622 .form-list {

1623 margin-bottom: 0;

1624 }

1625 .form-list li {

1626 margin-bottom: 5px;

1627 }

1628 input[type="checkbox"],

1629 input[type="radio"] {

1630 float: left;

1631 margin-top: 5px;

1632 }

1633 }

1634

1635 #remember_me_openid {

1636 display: block;

1637 }

1638

1639 input[type="checkbox"],

1640 input[type="radio"] {

1641 margin-right: 5px;

1642 }

1643

1644 input[type="text"],

1645 input[type="email"],

1646 input[type="url"],

1647 input[type="password"],

1648 textarea {

1649 border: 1px solid #ccc;

1650 padding: 2px 5px;

1651 margin: 0;

1652 width: 200px;

1653 }

1654

1655 textarea {

1656 padding: 5px;

1657 width: 100%;

1658 height: 100% !important;

1659 }

1660

1661 /* Rules for user images */

1662

1663 img.user_image {

1664 max-width: 100px;

1665 max-height: 100px;

1666 border: 1px solid #ccc;

1667 margin-bottom: $lineheight;

1668 float: left;

1669 margin-right: $lineheight;

1670 }

1671

1672 img.user_thumbnail {

1673 max-width: 50px;

1674 max-height: 50px;

1675 border: 1px solid #ccc;

1676 margin-right: $lineheight;

1677 }

1678

1679 img.user_thumbnail_tiny {

1680 max-width: 25px;

1681 max-height: 25px;

1682 border: 1px solid #ccc;

1683 }

1684

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

1686

1687 .nowrap {

1688 white-space: nowrap;

1689 }

1690

1691 /* Rules for geo microformats */

1692

1693 abbr.geo {

1694 border-bottom: none;

1695 }

1696

1697 /* Rules for RSS buttons */

1698

1699 .rsssmall {

1700 position: relative;

1701 top: 5px;

1702 }

1703

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

1705

1706 ul.secondary-actions {

1707 font-style: normal;

1708 margin-bottom: 0;

1709 margin-left: 0;

1710 &.pager {

1711 display: inline-block;

1712 margin-right: 60px;

1713 }

1714 li {

1715 display: block;

1716 float: left;

1717 list-style: none;

1718 border-left: 1px solid #ccc;

1719 padding-left: $lineheight/4;

1720 margin-right: $lineheight/4;

1721 &:first-child {

1722 border-left: 0;

1723 padding-left: 0;

1724 }

1725 &:last-child {

1726 margin-right: 0px;

1727 }

1728 }

1729 }

1730

1731 /* Utility for managing inner content areas */

1732

1733 .inner22 { padding: $lineheight;}

1734

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

1736

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

1738

1739 .inner02 { padding: 0 $lineheight;}

1740

1741 /* Utility for general button styles */

1742

1743 input[type="button"],

1744 input[type="submit"],

1745 input[type="reset"],

1746 a.button {

1747 cursor: pointer;

1748 border: 0;

1749 display: inline-block;

1750 line-height: 20px;

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

1752 min-width: 120px;

1753 margin: 0 0 $lineheight/2 0;

1754 color: white;

1755 background: $blue;

1756 text-align: center;

1757 border-radius: 2px;

1758 -moz-border-radius: 2px;

1759 &:hover {

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

1761 text-decoration: none;

1762 }

1763 &.deemphasize {

1764 background: $lightblue;

1765 &:hover {

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

1767 }

1768 }

1769 &:disabled {

1770 background: $lightblue;

1771 }

1772 &:last-child {

1773 margin-bottom: 0;

1774 }

1775 }

1776

1777 .buttons {

1778 min-width: 200px;

1779 input[type="submit"],

1780 input[type="button"],

1781 input[type="reset"],

1782 .button {

1783 box-sizing: border-box;

1784 float: left;

1785 border-radius: 0;

1786 margin:0;

1787 min-width: 100px;

1788 max-width: 150px;

1789 border-right:1px solid white;

1790 }

1791 input:first-child,

1792 .button:first-child {

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

1794 }

1795 input:last-child,

1796 .button:last-child {

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

1798 border-right-width: 0;

1799 }

1800 input:only-child,

1801 .button:only-child,

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

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

1804 border-radius:2px;

1805 border-right-width: 0;

1806 }

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

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

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

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

1811 border-right-width: 0;

1812 }

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

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

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

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

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

1818 }

1819 }

1820

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

1822

1823 .table0,

1824 .item0 {

1825 background: $offwhite;

1826 }

1827

1828 .table1,

1829 .item1 {

1830 background: #fff;

1831 }

1832

1833 /* Rules for OpenID logo */

1834

1835 .openid_logo {

1836 vertical-align: text-bottom;

1837 border: 0;

1838 }

1839

1840 /* Rules for rich text */

1841

1842 .richtext,

1843 .prose {

1844 h1, h2 {

1845 padding-bottom: $lineheight/2;

1846 border-bottom: 1px dashed #cccccc;

1847 margin-bottom: $lineheight/2;

1848 }

1849

1850 h1 {

1851 font-size: 24px;

1852 }

1853

1854 h2 {

1855 font-size: 18px;

1856 }

1857

1858 h3 {

1859 font-size: $typeheight;

1860 }

1861

1862 code {

1863 font-size: 13px;

1864 background: #e8e8e8;

1865 padding: 2px 3px;

1866 }

1867

1868 pre {

1869 font-size: 13px;

1870 background: #e8e8e8;

1871 padding: 2px 3px;

1872

1873 code {

1874 padding: 0;

1875 }

1876 }

1877

1878 img {

1879 padding: $lineheight;

1880 background-color: $offwhite;

1881 display: block;

1882 max-width: 100%;

1883 margin: auto;

1884 }

1885

1886 blockquote {

1887 border-left: $lineheight solid $offwhite;

1888 padding-left: $lineheight;

1889 margin: 0;

1890 color: #7E7E7E;

1891 }

1892

1893 ul, ol {

1894 font-style: italic;

1895 padding-left: $lineheight;

1896 margin-bottom: $lineheight;

1897 margin-left: $lineheight;

1898 }

1899

1900 ul li {

1901 list-style: disc;

1902 }

1903

1904 ol li {

1905 list-style: decimal;

1906 }

1907 }

1908

1909 .diary_post .richtext {

1910 margin-top: $lineheight;

1911 }

1912

1913 .comments .richtext {

1914 margin-left: 70px;

1915 margin-top: 0;

1916 }

1917

1918 /* Rules for rich text editors */

1919

1920 .richtext_container {

1921 margin-bottom: $lineheight;

1922

1923 .richtext_content {

1924 width: 50%;

1925 display: inline-block;

1926 vertical-align: top;

1927

1928 .richtext_preview {

1929 display: inline-block;

1930 padding: $lineheight;

1931 background-color: $offwhite;

1932 overflow-x: auto;

1933

1934 &.loading {

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

1936 background-repeat: no-repeat;

1937 background-position: center;

1938 }

1939

1940 > :first-child {

1941 margin-top: 0px;

1942 }

1943 }

1944 }

1945

1946 .richtext_help {

1947 display: inline-block;

1948 vertical-align: top;

1949 margin-left: 15px;

1950 background-color: #f8f8ff;

1951 padding: $lineheight/2;

1952 width: 220px;

1953

1954 ul {

1955 margin-bottom: 0;

1956 }

1957

1958 h4.heading, li {

1959 border-bottom: 1px solid #ccc;

1960 margin-bottom: $lineheight/4;

1961 padding-bottom: $lineheight/4;

1962 }

1963

1964 li h4, li span, li p {

1965 display: inline-block;

1966 vertical-align: top;

1967 font-size: 11px;

1968 }

1969

1970 li h4 {

1971 width: 40%;

1972 margin: 0;

1973 }

1974

1975 li span, li p {

1976 width: 50%;

1977 margin-left: $lineheight/2;

1978 margin-bottom: $lineheight/4;

1979 white-space: nowrap;

1980 }

1981 }

1982 }

1983

1984 /* Rules for the user notes list */

1985

1986 .note_list {

1987 tr.creator {

1988 background-color: #eeeeee;

1989 }

1990

1991 td {

1992 padding: 3px;

1993 }

1994

1995 p {

1996 margin-bottom: 0px;

1997 }

1998 }

1999

2000 /* Rules for the notes interface */

2001

2002 .leaflet-popup-content .note {

2003 padding-top: $lineheight/2;

2004 }

2005

2006 .leaflet-popup-content .note {

2007 h2 {

2008 margin-bottom: $lineheight/2;

2009 }

2010

2011 div {

2012 margin-top: $lineheight/2;

2013 }

2014

2015 .permalink {

2016 position: absolute;

2017 top: $lineheight/4;

2018 left: $lineheight/4;

2019 min-width: 15px;

2020 min-height: 15px;

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

2022 }

2023

2024 .permalink span {

2025 display: none;

2026 padding-left: $lineheight;

2027 }

2028

2029 .permalink:hover span {

2030 display: block;

2031 }

2032

2033 .warning {

2034 display: block;

2035 background-color: #ffe0cc;

2036 padding: 4px 6px;

2037 margin-bottom: $lineheight/2;

2038 }

2039

2040 .comment_body {

2041 margin-top: 2px;

2042 margin-bottom: 2px;

2043

2044 p {

2045 margin-top: 0px;

2046 margin-bottom: 0px;

2047 }

2048 }

2049

2050 .comment {

2051 width: 100%;

2052 height: 100px;

2053 }

2054

2055 .buttons {

2056 margin-top: $lineheight/4;

2057 text-align: right;

2058 }

2059 }

2060

2061 /*

2062 * Rules for the iD editor

2063 */

2064 .id-embed {

2065 width: 100%;

2066 height: 100%;

2067 }

2068

2069 /* Rules for rotating sidebar ads */

2070 .ad-container {

2071 display: block;

2072 height: 120px;

2073 overflow: hidden;

2074 position: relative;

2075 border-bottom: 1px solid #ccc;

2076 }

2077

2078 .ad {

2079 height: 100px;

2080 border: 0;

2081 background: #fff;

2082 }