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 $lightgrey: #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 /*

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

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

344 * and the tag cloud on the traces pages.

345 */

346

347 .optionalbox {

348 left: 0px;

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

350 margin: $lineheight/4 0;

351 text-align: left;

352 }

353

354 /* Rules for the search box */

355

356 #search_field {

357 position: relative;

358

359 form {

360 width: 165px;

361 }

362

363 input[type="text"] {

364 width: 165px;

365 padding: 3px;

366 font-size: $typeheight;

367 line-height: 1.1;

368 height: 25px;

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

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

371 }

372

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

374 outline: none;

375 border: 1px solid #000;

376 }

377

378 input[type="submit"] {

379 border: 0;

380 margin: 0;

381 padding: 0;

382 width: 15px;

383 height: 15px;

384 min-width: 0;

385 text-indent: -1000px;

386 overflow: hidden;

387 background: image-url("sprite.png") -2px -2px no-repeat;

388 position: absolute;

389 top: $lineheight/4;

390 right: $lineheight/4;

391 cursor: pointer;

392 }

393 }

394

395 .search_help {

396 margin: $lineheight/4 0 0 0;

397 }

398

399 /* Utility for de-emphasizing content */

400

401 .deemphasize {

402 color: #999;

403 a {

404 color: $blue;

405 }

406 }

407

408 /* Rules for donation request box */

409

410 a.donate {

411 display: block;

412 width: 163px;

413 padding: $lineheight/4;

414 border: 1px solid #AED1A0;

415 background: #cbeea7;

416 font-size: $typeheight;

417 line-height: 1.4;

418 text-align: center;

419 border-radius: 2px;

420 color: #222;

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

422

423 &:hover {

424 background: #9ed485;

425 text-decoration: none;

426 }

427 }

428

429 /* Rules for Creative Commons logo button */

430

431 #cclogo {

432 margin: $lineheight/2 0;

433 float: right;

434 }

435

436 /* Rules for tabbed navigation bar */

437

438 #top-bar {

439 position: relative;

440 margin-left: 185px;

441 height: 30px;

442 border-bottom: 1px solid #ccc;

443 background: white;

444 z-index: 100;

445 }

446

447 .site-edit #top-bar,

448 .site-index #top-bar,

449 .site-export #top-bar {

450 position: fixed;

451 left: 0;

452 right: 0;

453 }

454

455 #tabnav {

456 height: 29px;

457 margin-bottom:0;

458 overflow: hidden;

459 li {

460 display: inline;

461 }

462 a, a:link, a:visited {

463 float: left;

464 font-weight: bold;

465 padding: 3px $lineheight/2;

466 text-decoration: none;

467 color: #333;

468 float: left;

469 margin-right: 1px;

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

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

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

473 transition: color 200ms ease-in;

474 }

475 }

476

477 .site-index #tabnav a#viewanchor,

478 .site-edit #tabnav a#editanchor,

479 .changeset-list #tabnav a#historyanchor,

480 .site-export #tabnav a#exportanchor {

481 border-bottom: 1px solid #aaa;

482 background: #9ed485;

483 color: #000;

484 }

485

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

487 text-decoration: underline;

488 }

489

490 #tabnav a:link.disabled,

491 #tabnav a:visited.disabled,

492 #tabnav a:link:hover.disabled,

493 #tabnav a:visited:hover.disabled {

494 color: #ccc;

495 cursor: default;

496 &:hover {

497 text-decoration: none;

498 }

499 }

500

501 /* Utility for styling notification numbers */

502

503 .count-number {

504 padding: 2px $lineheight/4;

505 border-radius: 2px;

506 background: #d7d7ff;

507 margin: 0 2px;

508 font-size: 11px;

509 color: #333;

510 }

511

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

513

514 #greeting {

515 float: right;

516 padding-top: 3px;

517 margin-right: $lineheight/4;

518 }

519

520 .greeting-bar-unread {

521 font-weight: bold;

522 }

523

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

525

526 #noscript {

527 z-index: 20000000;

528 position: absolute;

529 top: 15px;

530 left: 15px;

531 }

532

533 /* Rules for Leaflet maps */

534

535 .leaflet-control .control-button {

536 display: block;

537 height: 40px;

538 width: 40px;

539 background-color: white;

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

541 border-radius: 4px;

542 margin-bottom: 10px;

543 outline: none;

544 }

545

546 .leaflet-control .zoomin,

547 .control-layers .control-button {

548 margin-bottom: 0px;

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

550 }

551

552 .site .leaflet-control .zoomout,

553 .control-key .control-button {

554 margin-bottom: 0px;

555 border-radius: 0px;

556 }

557

558 .leaflet-control .zoomout,

559 .control-locate .control-button,

560 .control-share .control-button {

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

562 }

563

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

565 background-color: white;

566 }

567

568 .leaflet-control .control-button .icon {

569 margin: 10px;

570 }

571

572 /* Rules for the home page */

573

574 .site-export #map,

575 .site-index #map,

576 .site-edit #map {

577 height: 100%;

578 overflow: hidden;

579 }

580

581 #map-ui {

582 display: none;

583 position: relative;

584 float: right;

585 width: 250px;

586 height: 100%;

587 background: white;

588 border-left: 1px solid #CCC;

589 overflow: auto;

590

591 .section {

592 border-bottom: 1px solid #DDD;

593 padding: 15px;

594 }

595

596 a.close-button {

597 float: right;

598 padding:5px;

599 font-size:20px;

600 line-height:10px;

601 color:#222;

602 border:1px solid #ddd;

603 }

604 }

605

606 .layers-ui {

607 ul, li:last-child {

608 margin-bottom: 0;

609 }

610

611 li {

612 border-radius: 4px;

613 overflow: hidden;

614 margin-bottom: 10px;

615 }

616

617 label {

618 display: block;

619 padding: 5px 5px 5px 7px;

620 background-color: #eee;

621 cursor: pointer;

622 }

623

624 li.active label {

625 background-color: #ccc;

626 }

627

628 .base-layers {

629 .leaflet-container {

630 width: 100%;

631 height: 50px;

632 cursor: pointer;

633 }

634 }

635 }

636

637 .share-ui {

638 .share-link {

639 li {

640 display: inline-block;

641 width: 50%;

642 }

643 }

644 }

645

646 .site-index .leaflet-top,

647 .site-export .leaflet-top {

648 top: $lineheight/2 !important;

649 .leaflet-control {

650 margin-top: 0px !important;

651 }

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 $lightgrey;

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: relative;

713 float: left;

714 border-right: 1px solid $lightgrey;

715 width: 33.3333%;

716 height: 100%;

717 ul {

718 margin-bottom: 0;

719 &:last-child {

720 border-bottom: 1px solid #ccc;

721 }

722 li {

723 margin-bottom: $lineheight/4;

724 &:last-child {

725 margin-bottom: 0;

726 }

727 }

728 }

729 }

730

731 .sidebar_heading {

732 position: relative;

733 padding: $lineheight/2 $lineheight;

734 z-index: 9999;

735 background: $offwhite;

736 border-bottom: 1px solid #ccc;

737 h4 {

738 margin: 0;

739 }

740 }

741

742 .sidebar_close {

743 position: absolute;

744 height: $lineheight;

745 top: 0px;

746 bottom: 0;

747 right: $lineheight;

748 margin: auto;

749 }

750

751 #sidebar_content {

752 position: relative;

753 margin-bottom: 20px;

754 overflow: auto;

755 height: 100%;

756 width: 100%;

757 h4 {

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

759 margin-top: $lineheight/2;

760 margin-bottom: 0;

761 border-bottom: 1px solid #ddd;

762 }

763 }

764

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

766

767 #mapkey {

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: 80px;

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 changeset list shown by the history tab etc */

975

976 #changeset_list {

977 width: 100%;

978 ul {

979 padding: $lineheight/2 0;

980 margin-bottom: 0px;

981 border-top: 1px solid #ccc;

982 &:last-child {

983 border-bottom: 1px solid #ccc;

984 }

985 }

986 .selected {

987 background: #FFFFC0;

988 }

989 .date,

990 .user {

991 border-left: 1px solid #ccc;

992 padding-left: $lineheight/4;

993 margin-right: $lineheight/4;

994 }

995 }

996

997 #changeset_list_map_wrapper {

998 position: absolute;

999 width: 50%;

1000 height: 490px;

1001 top: 0;

1002 right: 0;

1003 }

1004

1005 #changeset_list_map_wrapper.scrolled {

1006 position: fixed;

1007 }

1008

1009 #changeset_list_map {

1010 position: absolute;

1011 bottom: $lineheight;

1012 top: $lineheight;

1013 right: $lineheight;

1014 left: $lineheight;

1015 border: 1px solid #ccc;

1016 }

1017

1018 #changeset_list_map_wrapper.scrolled #changeset_list_map {

1019 margin-left: 93px;

1020 }

1021

1022 /* Rules for the data browser */

1023

1024 .browse-section {

1025 border-top: 1px solid #ccc;

1026 margin-top: $lineheight/2;

1027 padding-top: $lineheight/2;

1028 &:first-child {

1029 margin-top: 0;

1030 }

1031 .warning {

1032 background-color: #ffe0cc;

1033 margin: 0px;

1034 padding: 4px 6px;

1035 max-width: 100%;

1036 }

1037 h4, p {

1038 margin-bottom: $lineheight/4;

1039 }

1040 ul, .bbox, .geo {

1041 display: inline-block;

1042 vertical-align: top;

1043 max-width: 65%;

1044 }

1045 ul p {

1046 margin-left: 0;

1047 margin-bottom: 0;

1048 }

1049 h4 {

1050 float: left;

1051 width: 33.3333%;

1052 display: inline-block;

1053 vertical-align: top;

1054 }

1055 }

1056

1057 .bbox {

1058 div {

1059 width: 33.3333%;

1060 text-align: center;

1061 padding: $lineheight/4 0;

1062 overflow: hidden;

1063 text-overflow: ellipsis;

1064 float: left;

1065 }

1066 .max_lat,

1067 .min_lat {

1068 margin-left: auto;

1069 margin-right: auto;

1070 width: 100%;

1071 }

1072 }

1073

1074 #browse_map .geolink {

1075 display: none;

1076 }

1077

1078 #browse_map .secondary-actions {

1079 margin-bottom: $lineheight/2;

1080 }

1081

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

1083

1084 #trace_list {

1085 font-size: $lineheight/2;

1086 border-width: 0px;

1087 text-align: right;

1088

1089 .trace_summary {

1090 font-size: 12px;

1091 color: gray;

1092 }

1093

1094 .trace_pending {

1095 color: red;

1096 }

1097

1098 .trace_public {

1099 color: green;

1100 }

1101

1102 .trace_identifiable {

1103 color: green;

1104 }

1105

1106 .trace_trackable {

1107 color: red;

1108 }

1109

1110 .trace_private {

1111 color: red;

1112 }

1113 }

1114

1115 /* Rules for the user profile page */

1116

1117 #userinformation {

1118

1119 min-height: 100px;

1120 .userinformation-inner {

1121 float: left;

1122 }

1123 h2 {

1124 margin-top: 0;

1125 }

1126 .user-description {

1127 width: 100%;

1128 clear: both;

1129 }

1130 .deemphasize {

1131 margin: 0;

1132 }

1133 }

1134

1135 .admin-user-info small {

1136 margin-bottom: $lineheight/2;

1137 display: inline;

1138 margin-right: $lineheight;

1139 }

1140

1141 .activity-block {

1142 clear: left;

1143 border-bottom: 1px solid #ccc;

1144 padding-bottom: $lineheight;

1145 float: left;

1146 h3 {

1147 margin-bottom: $lineheight/2;

1148 }

1149 }

1150

1151 .contact-activity {

1152 margin-top: $lineheight;

1153 width: 100%;

1154 }

1155

1156 .activity-details p {

1157 margin-left: 70px;

1158 margin-bottom: 0;

1159 }

1160

1161 #friends-container .contact-activity ul {

1162 margin-left: 70px;

1163 }

1164

1165 .user-view {

1166 p#no_home_location {

1167 margin: $lineheight;

1168 }

1169 .user_thumbnail {

1170 margin-top: $lineheight/4;

1171 float: left;

1172 }

1173 }

1174

1175 /* Rules for the user map */

1176

1177 .content_map .leaflet-popup-content {

1178 margin: $lineheight/2;

1179 min-height: 50px;

1180 }

1181

1182 /* Rules for user popups on maps */

1183

1184 .user_popup {

1185 min-width: 200px;

1186 p {

1187 padding: 0 0 5px 0;

1188 margin-top: 0 0 0 60px;

1189 font-size: 12px;

1190 }

1191 img.user_thumbnail {

1192 float: left;

1193 margin: 0 $lineheight/2 0 0;

1194 }

1195 }

1196

1197 /* Rules for the user list */

1198

1199 #user_list {

1200 font-size: $lineheight/2;

1201 width: 100%;

1202

1203 tr {

1204 vertical-align: middle;

1205 }

1206

1207 p {

1208 margin-top: 0px;

1209 margin-bottom: 0px;

1210 }

1211 }

1212

1213 #user_list_actions {

1214 float: right;

1215 margin-top: $lineheight/2;

1216 }

1217

1218 /* Rules for the diary list page */

1219

1220 .diary_entry-list img.user_thumbnail {

1221 float: left;

1222 }

1223

1224 .diary_post {

1225 max-width: 740px;

1226 position: relative;

1227 margin-top: $lineheight/2;

1228 padding-top: $lineheight;

1229 border-top: 1px solid #ccc;

1230

1231 &:first-child {

1232 margin-top: 0;

1233 border-top: 0;

1234 padding-top: 0;

1235 }

1236 h1, h2 {

1237 font-size: 21px;

1238 line-height: 1em;

1239 }

1240 small.deemphasize {

1241 float: left;

1242 display: block;

1243 }

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

1245 }

1246

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

1248 display: inline;

1249 }

1250

1251 #content .post_heading {

1252 margin-bottom: $lineheight;

1253 h2 {

1254 margin-top: 0;

1255 margin-bottom: $lineheight/2;

1256 font-size: 24px;

1257 }

1258 }

1259

1260 /* Rules for the diary entry page */

1261

1262 .diary_entry {

1263 #map {

1264 position: relative;

1265 width: 90%;

1266 height: 400px;

1267 border: 1px solid #ccc;

1268 display: none;

1269 margin-bottom: $lineheight;

1270 }

1271 #newcomment {

1272 border-top: 1px solid #ccc;

1273 padding-top: $lineheight;

1274 margin-top: $lineheight/2;

1275 }

1276 .comments {

1277 max-width: 740px;

1278 }

1279 .diary-comment {

1280 margin-top: $lineheight/2;

1281 border-top: 1px dashed #ccc;

1282 padding-top: $lineheight/2;

1283 &:first-child {

1284 margin-top: $lineheight;

1285 padding-top: $lineheight;

1286 border-top: 1px solid #ccc;

1287 }

1288 p {

1289 margin-bottom: $lineheight/2;

1290 }

1291 .comment-heading {

1292 margin-bottom: 0;

1293 margin-top: 0;

1294 }

1295 }

1296 }

1297

1298 .diary_entry-view img.user_thumbnail {

1299 float: left;

1300 }

1301

1302 /* Rules for the login page */

1303

1304 #login_openid_buttons {

1305 margin-bottom: 0;

1306 }

1307

1308 #login_openid_buttons li {

1309 float: left;

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

1311 }

1312

1313 /* Rules for the account confirmation page */

1314

1315 #terms {

1316 .legale {

1317 border: 1px solid #ccc;

1318 padding: $lineheight;

1319 margin-bottom: $lineheight;

1320 overflow: auto;

1321 height: 10em;

1322

1323 &:p#last {

1324 margin-bottom: 0px;

1325 }

1326

1327 &:ol {

1328 margin-bottom: 0px;

1329 }

1330

1331 &:img {

1332 display: block;

1333 margin: $lineheight auto inherit auto;

1334 }

1335 }

1336

1337 form.sign {

1338 input[type=submit] {

1339 float: left;

1340 }

1341 #decline {

1342 background: $grey;

1343 &:hover {

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

1345 }

1346 }

1347 }

1348 fieldset {

1349 margin-bottom: $lineheight;

1350 }

1351 #contributorGuidance {

1352 background-color: $offwhite;

1353 border-radius: 4px;

1354 -moz-border-radius: 4px;

1355 }

1356 .signing-buttons {

1357 height: 50px;

1358 }

1359 }

1360

1361 /* Rules for the account settings page */

1362

1363 #accountForm .user_map {

1364 position: relative;

1365 width: 500px;

1366 height: 400px;

1367 border: 1px solid #ccc;

1368 }

1369

1370 #accountForm .user_image {

1371 margin-bottom: 0;

1372 }

1373

1374 #accountForm #user_image {

1375 margin-left: 20px;

1376 }

1377

1378 #accountForm ul.accountImage-options {

1379 margin-left: 120px;

1380 }

1381

1382 .nohome .location {

1383 display: none;

1384 }

1385

1386 #homerow .message {

1387 display: none;

1388 }

1389

1390 .nohome .message {

1391 display: inline !important;

1392 }

1393

1394 .content_map.settings_map {

1395 width: 50%;

1396 float: none;

1397 }

1398

1399 /* Rules for the oauth settings page */

1400

1401 .oauth_clients .buttons .oauth-edit {

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

1403 }

1404

1405 .oauth_clients .buttons .oauth-delete {

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

1407 }

1408

1409 /* Rules for messages pages */

1410

1411 .messages {

1412 width: 100%;

1413 border: 1px solid #ddd;

1414

1415 input[type="submit"] {

1416 margin: auto;

1417 }

1418 tbody tr {

1419 border-top: 1px solid #ccc;

1420 }

1421

1422 .inbox-row {

1423 background: #f8f8ff;

1424 }

1425

1426 .inbox-row-unread {

1427 background:#CBEEA7;

1428 }

1429

1430 .right {

1431 float: right;

1432 }

1433

1434 tr td,

1435 tr th {

1436 padding: $lineheight/4;

1437 }

1438 p:last-child,

1439 h2:last-child,

1440 h3:last-child,

1441 ol:last-child,

1442 ul:last-child {

1443 margin-bottom:0;

1444 }

1445 tr td {

1446 height: 30px;

1447 border-right: 1px solid $lightgrey;

1448 }

1449 }

1450

1451 .inbox-row .inbox-mark-read {

1452 display: none;

1453 }

1454

1455 .info-line {

1456 margin-bottom: $lineheight;

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

1458 border-bottom: 1px solid #ccc;

1459

1460 form, form div {

1461 display: inline;

1462 }

1463 }

1464

1465 .info-line .user_thumbnail_tiny {

1466 vertical-align: middle;

1467 }

1468

1469 .inbox-mark-unread,

1470 .inbox-mark-read,

1471 .inbox-delete {

1472 width: 1%;

1473 }

1474

1475 .inbox-row-unread .inbox-mark-unread {

1476 display: none;

1477 }

1478

1479 .message-read .message-buttons {

1480 margin-top: $lineheight;

1481 padding-top: $lineheight;

1482 border-top: 1px solid $lightgrey;

1483 }

1484

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

1486 border-radius: 0;

1487 }

1488

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

1490

1491 .flash {

1492 padding: $lineheight;

1493 &#error {

1494 background-color: #ff7070;

1495 }

1496 &#warning {

1497 background-color: #ffe0cc;

1498 }

1499 &#notice {

1500 background-color: #CBEEA7;

1501 }

1502 }

1503

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

1505

1506 .field_with_errors {

1507 padding: 2px;

1508 background-color: #ff7070;

1509 display: table;

1510 }

1511

1512 /* Rules for rails validation error boxes */

1513

1514 #errorExplanation {

1515 width: 400px;

1516 border: 2px solid #ff7070;

1517 padding: 0 $lineheight/2;

1518 margin-bottom: $lineheight;

1519 background-color: #f0f0f0;

1520

1521 h2 {

1522 margin: 0 -10px 10px -10px;

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

1524 font-weight: bold;

1525 font-size: 12px;

1526 background-color: #c00;

1527 color: #fff;

1528 text-align: left;

1529 }

1530

1531 p {

1532 color: #333;

1533 margin-bottom: 0px;

1534 padding: $lineheight/4;

1535 }

1536

1537 ul {

1538 padding-left: $lineheight;

1539

1540 li {

1541 font-size: 12px;

1542 list-style: disc;

1543 }

1544 }

1545 }

1546

1547 /* Rules for forms */

1548

1549 .standard-form {

1550 fieldset {

1551 margin-bottom: $lineheight;

1552 }

1553 label.standard-label {

1554 display: block;

1555 margin-bottom: $lineheight/4;

1556 font-size: $typeheight;

1557 font-weight: bold;

1558 line-height: 1.5;

1559 }

1560 label.standard-label.secondary {

1561 display: inline-block;

1562 font-weight: normal;

1563 }

1564 .form-help {

1565 font-weight: normal;

1566 }

1567 .form-column {

1568 float: left;

1569 margin-right: 20px;

1570 }

1571 .form-divider {

1572 margin-top: $lineheight;

1573 padding-top: $lineheight;

1574 border-top: 1px solid $lightgrey;

1575 }

1576 .form-row {

1577 margin-bottom: $lineheight/2;

1578 }

1579 .form-list {

1580 margin-bottom: 0;

1581 }

1582 .form-list li {

1583 margin-bottom: 5px;

1584 }

1585 input[type="checkbox"],

1586 input[type="radio"] {

1587 float: left;

1588 margin-top: 5px;

1589 }

1590 }

1591

1592 #remember_me_openid {

1593 display: block;

1594 }

1595

1596 input[type="checkbox"],

1597 input[type="radio"] {

1598 margin-right: 5px;

1599 }

1600

1601 input[type="text"],

1602 input[type="email"],

1603 input[type="url"],

1604 input[type="password"],

1605 textarea {

1606 border: 1px solid #ccc;

1607 padding: 2px 5px;

1608 margin: 0;

1609 width: 200px;

1610 }

1611

1612 textarea {

1613 padding: 5px;

1614 width: 100%;

1615 height: 100% !important;

1616 }

1617

1618 /* Rules for user images */

1619

1620 img.user_image {

1621 max-width: 100px;

1622 max-height: 100px;

1623 border: 1px solid #ccc;

1624 margin-bottom: $lineheight;

1625 float: left;

1626 margin-right: $lineheight;

1627 }

1628

1629 img.user_thumbnail {

1630 max-width: 50px;

1631 max-height: 50px;

1632 border: 1px solid #ccc;

1633 margin-right: $lineheight;

1634 }

1635

1636 img.user_thumbnail_tiny {

1637 max-width: 25px;

1638 max-height: 25px;

1639 border: 1px solid #ccc;

1640 }

1641

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

1643

1644 .nowrap {

1645 white-space: nowrap;

1646 }

1647

1648 /* Rules for geo microformats */

1649

1650 abbr.geo {

1651 border-bottom: none;

1652 }

1653

1654 /* Rules for RSS buttons */

1655

1656 .rsssmall {

1657 position: relative;

1658 top: 5px;

1659 }

1660

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

1662

1663 ul.secondary-actions {

1664 font-style: normal;

1665 margin-bottom: 0;

1666 margin-left: 0;

1667 &.pager {

1668 display: inline-block;

1669 margin-right: 60px;

1670 }

1671 li {

1672 display: block;

1673 float: left;

1674 list-style: none;

1675 border-left: 1px solid #ccc;

1676 padding-left: $lineheight/4;

1677 margin-right: $lineheight/4;

1678 &:first-child {

1679 border-left: 0;

1680 padding-left: 0;

1681 }

1682 &:last-child {

1683 margin-right: 0px;

1684 }

1685 }

1686 }

1687

1688 /* Utility for managing inner content areas */

1689

1690 .inner22 { padding: $lineheight;}

1691

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

1693

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

1695

1696 .inner02 { padding: 0 $lineheight;}

1697

1698 /* Utility for general button styles */

1699

1700 input[type="button"],

1701 input[type="submit"],

1702 input[type="reset"],

1703 a.button {

1704 cursor: pointer;

1705 border: 0;

1706 display: inline-block;

1707 line-height: 20px;

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

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

1710 min-width: 120px;

1711 margin: 0 0 $lineheight/2 0;

1712 color: white;

1713 background: $blue;

1714 text-align: center;

1715 border-radius: 2px;

1716 -moz-border-radius: 2px;

1717 &:hover {

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

1719 text-decoration: none;

1720 }

1721 &.deemphasize {

1722 background: $lightblue;

1723 &:hover {

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

1725 }

1726 }

1727 &:disabled {

1728 background: $lightgrey;

1729 &:hover {

1730 background: $lightgrey;

1731 }

1732 }

1733 &:last-child {

1734 margin-bottom: 0;

1735 }

1736 }

1737

1738 .buttons {

1739 min-width: 200px;

1740 input[type="submit"],

1741 input[type="button"],

1742 input[type="reset"],

1743 .button {

1744 box-sizing: border-box;

1745 float: left;

1746 border-radius: 0;

1747 margin:0;

1748 min-width: 100px;

1749 max-width: 180px;

1750 border-right:1px solid white;

1751 text-overflow: ellipsis;

1752 white-space: nowrap;

1753 overflow: hidden;

1754 }

1755 input:first-child,

1756 .button:first-child {

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

1758 }

1759 input:last-child,

1760 .button:last-child {

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

1762 border-right-width: 0;

1763 }

1764 input:only-child,

1765 .button:only-child,

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

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

1768 border-radius:2px;

1769 border-right-width: 0;

1770 }

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

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

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

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

1775 border-right-width: 0;

1776 }

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

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

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

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

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

1782 }

1783 }

1784

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

1786

1787 .table0,

1788 .item0 {

1789 background: $offwhite;

1790 }

1791

1792 .table1,

1793 .item1 {

1794 background: #fff;

1795 }

1796

1797 /* Rules for OpenID logo */

1798

1799 .openid_logo {

1800 vertical-align: text-bottom;

1801 border: 0;

1802 }

1803

1804 /* Rules for rich text */

1805

1806 .richtext,

1807 .prose {

1808 h1, h2 {

1809 padding-bottom: $lineheight/2;

1810 border-bottom: 1px dashed #cccccc;

1811 margin-bottom: $lineheight/2;

1812 }

1813

1814 h1 {

1815 font-size: 24px;

1816 }

1817

1818 h2 {

1819 font-size: 18px;

1820 }

1821

1822 h3 {

1823 font-size: $typeheight;

1824 }

1825

1826 code {

1827 font-size: 13px;

1828 background: #e8e8e8;

1829 padding: 2px 3px;

1830 }

1831

1832 pre {

1833 font-size: 13px;

1834 background: #e8e8e8;

1835 padding: 2px 3px;

1836

1837 code {

1838 padding: 0;

1839 }

1840 }

1841

1842 img {

1843 padding: $lineheight;

1844 background-color: $offwhite;

1845 display: block;

1846 max-width: 100%;

1847 margin: auto;

1848 }

1849

1850 blockquote {

1851 border-left: $lineheight solid $offwhite;

1852 padding-left: $lineheight;

1853 margin: 0;

1854 color: #7E7E7E;

1855 }

1856

1857 ul, ol {

1858 padding-left: $lineheight;

1859 margin-bottom: $lineheight;

1860 margin-left: $lineheight;

1861 }

1862

1863 ul li {

1864 list-style: disc;

1865 }

1866

1867 ol li {

1868 list-style: decimal;

1869 }

1870 }

1871

1872 .diary_post .richtext {

1873 margin-top: $lineheight;

1874 }

1875

1876 .comments .richtext {

1877 margin-left: 70px;

1878 margin-top: 0;

1879 }

1880

1881 /* Rules for rich text editors */

1882

1883 .richtext_container {

1884 margin-bottom: $lineheight;

1885

1886 .richtext_content {

1887 width: 50%;

1888 display: inline-block;

1889 vertical-align: top;

1890

1891 .richtext_preview {

1892 display: inline-block;

1893 padding: $lineheight;

1894 background-color: $offwhite;

1895 overflow-x: auto;

1896

1897 &.loading {

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

1899 background-repeat: no-repeat;

1900 background-position: center;

1901 }

1902

1903 > :first-child {

1904 margin-top: 0px;

1905 }

1906 }

1907 }

1908

1909 .richtext_help {

1910 display: inline-block;

1911 vertical-align: top;

1912 margin-left: 15px;

1913 background-color: #f8f8ff;

1914 padding: $lineheight/2;

1915 width: 220px;

1916

1917 ul {

1918 margin-bottom: 0;

1919 }

1920

1921 h4.heading, li {

1922 border-bottom: 1px solid #ccc;

1923 margin-bottom: $lineheight/4;

1924 padding-bottom: $lineheight/4;

1925 }

1926

1927 li h4, li span, li p {

1928 display: inline-block;

1929 vertical-align: top;

1930 font-size: 11px;

1931 }

1932

1933 li h4 {

1934 width: 40%;

1935 margin: 0;

1936 }

1937

1938 li span, li p {

1939 width: 50%;

1940 margin-left: $lineheight/2;

1941 margin-bottom: $lineheight/4;

1942 white-space: nowrap;

1943 }

1944 }

1945 }

1946

1947 /* Rules for the user notes list */

1948

1949 .note_list {

1950 tr.creator {

1951 background-color: #eeeeee;

1952 }

1953

1954 td {

1955 padding: 3px;

1956 }

1957

1958 p {

1959 margin-bottom: 0px;

1960 }

1961 }

1962

1963 /* Rules for the notes interface */

1964

1965 .leaflet-popup-content .note {

1966 padding-top: $lineheight/2;

1967 }

1968

1969 .leaflet-popup-content .note {

1970 h2 {

1971 margin-bottom: $lineheight/2;

1972 }

1973

1974 div {

1975 margin-top: $lineheight/2;

1976 }

1977

1978 .permalink {

1979 position: absolute;

1980 top: $lineheight/4;

1981 left: $lineheight/4;

1982 min-width: 15px;

1983 min-height: 15px;

1984 }

1985

1986 .permalink span {

1987 display: none;

1988 padding-left: $lineheight;

1989 }

1990

1991 .permalink:hover span {

1992 display: block;

1993 }

1994

1995 .warning {

1996 display: block;

1997 background-color: #ffe0cc;

1998 padding: 4px 6px;

1999 margin-bottom: $lineheight/2;

2000 }

2001

2002 .comment_body {

2003 margin-top: 2px;

2004 margin-bottom: 2px;

2005

2006 p {

2007 margin-top: 0px;

2008 margin-bottom: 0px;

2009 }

2010 }

2011

2012 .comment {

2013 width: 100%;

2014 height: 100px;

2015 }

2016

2017 .buttons {

2018 margin-top: $lineheight/4;

2019 text-align: right;

2020 }

2021 }

2022

2023 /*

2024 * Rules for the iD editor

2025 */

2026 .id-embed {

2027 width: 100%;

2028 height: 100%;

2029 }

2030

2031 /* Rules for rotating sidebar ads */

2032 .ad-container {

2033 display: block;

2034 height: 120px;

2035 overflow: hidden;

2036 position: relative;

2037 border-bottom: 1px solid #ccc;

2038 }

2039

2040 .ad {

2041 height: 100px;

2042 border: 0;

2043 background: #fff;

2044 }