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 $lineheight/2 $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

337 /*

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

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

340 * and the tag cloud on the traces pages.

341 */

342

343 .optionalbox {

344 left: 0px;

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

346 margin: $lineheight/4 0;

347 text-align: left;

348 }

349

350 /* Rules for the search box */

351

352 #search_field {

353 position: relative;

354

355 form {

356 width: 165px;

357 }

358

359 input[type="text"] {

360 width: 165px;

361 padding: 3px;

362 font-size: $typeheight;

363 line-height: 1.1;

364 height: 25px;

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

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

367 }

368

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

370 outline: none;

371 border: 1px solid #000;

372 }

373

374 input[type="submit"] {

375 border: 0;

376 margin: 0;

377 padding: 0;

378 width: 15px;

379 height: 15px;

380 min-width: 0;

381 text-indent: -1000px;

382 overflow: hidden;

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

384 position: absolute;

385 top: $lineheight/4;

386 right: $lineheight/4;

387 cursor: pointer;

388 }

389 }

390

391 .search_help {

392 margin: $lineheight/4 0 0 0;

393 }

394

395 /* Utility for de-emphasizing content */

396

397 .deemphasize {

398 color: #999;

399 a {

400 color: $blue;

401 }

402 }

403

404 /* Rules for donation request box */

405

406 a.donate {

407 display: block;

408 width: 163px;

409 padding: $lineheight/4;

410 border: 1px solid #AED1A0;

411 background: #cbeea7;

412 font-size: $typeheight;

413 line-height: 1.4;

414 text-align: center;

415 border-radius: 2px;

416 color: #222;

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

418

419 &:hover {

420 background: #9ed485;

421 text-decoration: none;

422 }

423 }

424

425 /* Rules for Creative Commons logo button */

426

427 #cclogo {

428 margin: $lineheight/2 0;

429 float: right;

430 }

431

432 /* Rules for tabbed navigation bar */

433

434 #top-bar {

435 position: relative;

436 margin-left: 185px;

437 height: 30px;

438 border-bottom: 1px solid #ccc;

439 background: white;

440 z-index: 100;

441 }

442

443 .site-edit #top-bar,

444 .site-index #top-bar,

445 .site-export #top-bar {

446 position: fixed;

447 left: 0;

448 right: 0;

449 }

450

451 #tabnav {

452 height: 29px;

453 margin-bottom:0;

454 overflow: hidden;

455 li {

456 display: inline;

457 }

458 a, a:link, a:visited {

459 float: left;

460 font-weight: bold;

461 padding: 3px $lineheight/2;

462 text-decoration: none;

463 color: #333;

464 float: left;

465 margin-right: 1px;

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

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

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

469 transition: color 200ms ease-in;

470 }

471 }

472

473 .site-index #tabnav a#viewanchor,

474 .site-edit #tabnav a#editanchor,

475 .changeset-list #tabnav a#historyanchor {

476 border-bottom: 1px solid #aaa;

477 background: #9ed485;

478 color: #000;

479 }

480

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

482 text-decoration: underline;

483 }

484

485 #tabnav a:link.disabled,

486 #tabnav a:visited.disabled,

487 #tabnav a:link:hover.disabled,

488 #tabnav a:visited:hover.disabled {

489 color: #ccc;

490 cursor: default;

491 &:hover {

492 text-decoration: none;

493 }

494 }

495

496 /* Utility for styling notification numbers */

497

498 .count-number {

499 padding: 2px $lineheight/4;

500 border-radius: 2px;

501 background: #d7d7ff;

502 margin: 0 2px;

503 font-size: 11px;

504 color: #333;

505 }

506

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

508

509 #greeting {

510 float: right;

511 padding-top: 3px;

512 margin-right: $lineheight/4;

513 }

514

515 .greeting-bar-unread {

516 font-weight: bold;

517 }

518

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

520

521 #noscript {

522 z-index: 20000000;

523 position: absolute;

524 top: 15px;

525 left: 15px;

526 }

527

528 /* Rules for Leaflet maps */

529

530 .leaflet-control .control-button {

531 display: block;

532 height: 40px;

533 width: 40px;

534 background-color: #333;

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

536 -bottom: 1px solid #333;

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

538 margin-bottom: 10px;

539 outline: none;

540 }

541

542 .leaflet-control .zoomin,

543 .control-layers .control-button {

544 margin-bottom: 0px;

545 border-radius: 4px 0 0 0;

546 }

547

548 .site .leaflet-control .zoomout,

549 .control-key .control-button {

550 margin-bottom: 0;

551 border-radius: 0;

552 }

553

554 .control-locate .control-button,

555 .control-share .control-button {

556 border-radius: 0 0 0 4px;

557 }

558

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

560 background-color: black;

561 }

562

563 .leaflet-control .control-button.active {

564 background-color: #9ed485;

565 }

566

567 .leaflet-control .control-button .icon {

568 margin: 10px;

569 }

570

571 /* Rules for the home page */

572

573 .site-export #map,

574 .site-index #map,

575 .site-edit #map {

576 height: 100%;

577 overflow: hidden;

578 }

579

580 #map-ui {

581 display: none;

582 position: relative;

583 float: right;

584 width: 250px;

585 height: 100%;

586 background: white;

587 border-left: 1px solid #CCC;

588 overflow: auto;

589

590 .section {

591 border-bottom: 1px solid #DDD;

592 padding: 15px;

593 }

594

595 a.close-button {

596 float: right;

597 padding:5px;

598 font-size:20px;

599 line-height:10px;

600 color:#222;

601 border:1px solid #ddd;

602 }

603 }

604

605 .layers-ui,

606 .share-ui {

607 ul, li:last-child, p:last-child {

608 margin-bottom: 0;

609 }

610 }

611

612 .layers-ui {

613 li {

614 border-radius: 4px;

615 overflow: hidden;

616 margin-bottom: 10px;

617 }

618

619 label {

620 display: block;

621 padding: 5px 5px 5px 7px;

622 background-color: #eee;

623 cursor: pointer;

624 }

625

626 li.active label {

627 background-color: #ccc;

628 }

629

630 .base-layers {

631 .leaflet-container {

632 width: 100%;

633 height: 50px;

634 cursor: pointer;

635 }

636 }

637 }

638

639 .share-ui {

640 .share-link {

641 a {

642 margin-left: 5px;

643 }

644

645 input,

646 textarea {

647 font-family: monospace;

648 font-size: small;

649 }

650 }

651

652 #embed_html {

653 resize: vertical;

654 }

655

656 #mapnik_scale {

657 width: 100px;

658 }

659 }

660

661 .site-index .leaflet-top,

662 .site-export .leaflet-top {

663 top: $lineheight/2 !important;

664 .leaflet-control {

665 margin-right: 0px !important;

666 margin-top: 0px !important;

667 }

668 }

669

670 .leaflet-popup-scrolled {

671 padding-right: $lineheight;

672 border-bottom: 0px !important;

673 border-top: 0px !important;

674 }

675

676 .leaflet-popup-content-wrapper {

677 border-radius: 4px !important;

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

679 }

680

681 /* Rules for edit menu */

682

683 .menuicon {

684 padding: 0 $lineheight/4;

685 font-weight: normal;

686 display: inline-block;

687 &:hover {

688 text-decoration: none !important;

689 }

690 }

691

692 .menu {

693 display: none;

694 z-index: 10000;

695 position: absolute;

696 background-color: #ffffff;

697 border: 1px solid $lightgrey;

698 border-top: 0px;

699 ul {

700 margin: 0px;

701 }

702 li {

703 padding: 2px $lineheight/4;

704 border-top: 1px solid #eee;

705 white-space: nowrap;

706 }

707 }

708

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

710

711 #attribution {

712 display: none;

713 }

714

715 .attribution_license,

716 .attribution_project {

717 text-align: left;

718 }

719

720 .attribution_notice {

721 text-align: center;

722 }

723

724 /* Rules for the popout map sidebar */

725

726 #sidebar {

727 display: none;

728 position: relative;

729 float: left;

730 border-right: 1px solid $lightgrey;

731 width: 33.3333%;

732 height: 100%;

733 ul {

734 margin-bottom: 0;

735 &:last-child {

736 border-bottom: 1px solid #ccc;

737 }

738 li {

739 margin-bottom: $lineheight/4;

740 &:last-child {

741 margin-bottom: 0;

742 }

743 }

744 }

745 }

746

747 .sidebar_heading {

748 position: relative;

749 padding: $lineheight/2 $lineheight;

750 z-index: 9999;

751 background: $offwhite;

752 border-bottom: 1px solid #ccc;

753 h4 {

754 margin: 0;

755 }

756 }

757

758 .sidebar_close {

759 position: absolute;

760 height: $lineheight;

761 top: 0px;

762 bottom: 0;

763 right: $lineheight;

764 margin: auto;

765 }

766

767 #sidebar_content {

768 position: relative;

769 margin-bottom: 20px;

770 overflow: auto;

771 height: 100%;

772 width: 100%;

773 h4 {

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

775 margin-top: $lineheight/2;

776 margin-bottom: 0;

777 border-bottom: 1px solid #ddd;

778 }

779 }

780

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

782

783 #mapkey {

784 .mapkey-table-key img {

785 display: block;

786 margin-left: auto;

787 margin-right: auto;

788 }

789 td {

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

791 }

792 }

793

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

795

796 .search_searching {

797 margin-top: $lineheight/4;

798 margin-bottom: $lineheight/4;

799 }

800

801 .search_results_entry {

802 margin-bottom: 0;

803

804 .search_details {

805 display: block;

806 text-align: right;

807 }

808 }

809

810 .search_results_entry .search_searching {

811 text-align: center;

812 margin: $lineheight auto;

813 width: $lineheight;

814 display: block;

815 }

816

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

818

819 .search_results_error {

820 color: #f00;

821 }

822

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

824

825 #browse_content {

826 position: relative;

827 .browse_show_list.button {

828 position: absolute;

829 left: $lineheight;

830 right: $lineheight;

831 bottom: -40px;

832 margin-bottom: 0;

833 }

834 a.more-details {

835 position: absolute;

836 top: 0;

837 right: $lineheight;

838 }

839 ul li {

840 margin-bottom: 0;

841 }

842 }

843

844 .browse_details {

845 position: relative;

846 }

847

848 .browse_status {

849 display: none;

850 }

851

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

853

854 .export_bounds {

855 text-align: center;

856 }

857

858 .export_area_inputs {

859 margin-bottom: $lineheight/2;

860 input[type="text"] {

861 width: 80px;

862 margin-bottom: 5px;

863 }

864 }

865

866 .export_bound {

867 margin: $lineheight/4;

868 }

869

870 /* Rules for the main content area */

871

872 #content {

873 padding: $lineheight;

874 position: relative;

875 }

876

877 .site-edit #content,

878 .site-index #content,

879 .site-export #content {

880 position: fixed;

881 padding: 0;

882 top: 30px; bottom: 0;

883 left: 184px; right: 0;

884 border-left: 1px solid #ccc;

885 }

886

887 .wrapper {

888 margin-left: 184px;

889 border-left: 1px solid #ccc;

890 text-align: left;

891 }

892

893 .site-edit #content {

894 top: 30px;

895 }

896

897 #content.maximised {

898 top: 0;

899 left: 0;

900 right: 0;

901 bottom: 0;

902 border: 0;

903 z-index: 1000;

904 }

905

906 #slim_container {

907 width: 100%;

908 }

909

910 #slim_container_content {

911 max-width: 50em;

912 background-color: #FFFFFF;

913 margin: $lineheight/2 auto;

914 padding: 3px;

915 border-radius: 25px;

916 -moz-border-radius: 25px;

917 border: 1px solid #e6e6e6;

918 }

919

920 #slim_content {

921 margin: $lineheight/2;

922 margin-top: 95px;

923 max-width: 50em;

924

925 .content-heading {

926 margin-bottom: 15px;

927 }

928 }

929

930 #slim_header {

931 margin: 30px $lineheight/2;

932 position: absolute;

933 top: 0px;

934 margin-right: $lineheight/4;

935 img {

936 vertical-align: middle;

937 margin-bottom: $lineheight/4;

938 margin-right: $lineheight/4;

939 }

940 }

941

942 .content-heading {

943 position: relative;

944 padding: $lineheight;

945 background: $offwhite;

946 h1, h2 {

947 margin-bottom: $lineheight/2;

948 line-height: 100%;

949 &:last-child {

950 margin-bottom: 0;

951 }

952 }

953 p {

954 margin-top: $lineheight/2;

955 margin-bottom: 0px;

956 }

957 }

958

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

960

961 .content_map {

962 position: relative;

963 width: 45%;

964 height: 400px;

965 border: 1px solid #ccc;

966 margin-bottom: $lineheight;

967 float: right;

968 }

969

970 .content_map #small_map {

971 height: 100%;

972 width: 100%;

973 margin-bottom: $lineheight;

974 }

975

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

977

978 #changeset_list {

979 width: 100%;

980 ul {

981 padding: $lineheight/2 0;

982 margin-bottom: 0px;

983 border-top: 1px solid #ccc;

984 &:last-child {

985 border-bottom: 1px solid #ccc;

986 }

987 }

988 .selected {

989 background: #FFFFC0;

990 }

991 .date,

992 .user {

993 border-left: 1px solid #ccc;

994 padding-left: $lineheight/4;

995 margin-right: $lineheight/4;

996 }

997 }

998

999 #changeset_list_map_wrapper {

1000 position: absolute;

1001 width: 50%;

1002 height: 490px;

1003 top: 0;

1004 right: 0;

1005 }

1006

1007 #changeset_list_map_wrapper.scrolled {

1008 position: fixed;

1009 }

1010

1011 #changeset_list_map {

1012 position: absolute;

1013 bottom: $lineheight;

1014 top: $lineheight;

1015 right: $lineheight;

1016 left: $lineheight;

1017 border: 1px solid #ccc;

1018 }

1019

1020 #changeset_list_map_wrapper.scrolled #changeset_list_map {

1021 margin-left: 93px;

1022 }

1023

1024 /* Rules for the data browser */

1025

1026 .browse-section {

1027 border-top: 1px solid #ccc;

1028 margin-top: $lineheight/2;

1029 padding-top: $lineheight/2;

1030 &:first-child {

1031 margin-top: 0;

1032 }

1033 .warning {

1034 background-color: #ffe0cc;

1035 margin: 0px;

1036 padding: 4px 6px;

1037 max-width: 100%;

1038 }

1039 h4, p {

1040 margin-bottom: $lineheight/4;

1041 }

1042 ul, .bbox, .geo {

1043 display: inline-block;

1044 vertical-align: top;

1045 max-width: 65%;

1046 }

1047 ul p {

1048 margin-left: 0;

1049 margin-bottom: 0;

1050 }

1051 h4 {

1052 float: left;

1053 width: 33.3333%;

1054 display: inline-block;

1055 vertical-align: top;

1056 }

1057 }

1058

1059 .bbox {

1060 div {

1061 width: 33.3333%;

1062 text-align: center;

1063 padding: $lineheight/4 0;

1064 overflow: hidden;

1065 text-overflow: ellipsis;

1066 float: left;

1067 }

1068 .max_lat,

1069 .min_lat {

1070 margin-left: auto;

1071 margin-right: auto;

1072 width: 100%;

1073 }

1074 }

1075

1076 #browse_map .geolink {

1077 display: none;

1078 }

1079

1080 #browse_map .secondary-actions {

1081 margin-bottom: $lineheight/2;

1082 }

1083

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

1085

1086 #trace_list {

1087 font-size: $lineheight/2;

1088 border-width: 0px;

1089 text-align: right;

1090

1091 .trace_summary {

1092 font-size: 12px;

1093 color: gray;

1094 }

1095

1096 .trace_pending {

1097 color: red;

1098 }

1099

1100 .trace_public {

1101 color: green;

1102 }

1103

1104 .trace_identifiable {

1105 color: green;

1106 }

1107

1108 .trace_trackable {

1109 color: red;

1110 }

1111

1112 .trace_private {

1113 color: red;

1114 }

1115 }

1116

1117 /* Rules for the user profile page */

1118

1119 #userinformation {

1120

1121 min-height: 100px;

1122 .userinformation-inner {

1123 float: left;

1124 }

1125 h2 {

1126 margin-top: 0;

1127 }

1128 .user-description {

1129 width: 100%;

1130 clear: both;

1131 }

1132 .deemphasize {

1133 margin: 0;

1134 }

1135 }

1136

1137 .admin-user-info small {

1138 margin-bottom: $lineheight/2;

1139 display: inline;

1140 margin-right: $lineheight;

1141 }

1142

1143 .activity-block {

1144 clear: left;

1145 border-bottom: 1px solid #ccc;

1146 padding-bottom: $lineheight;

1147 float: left;

1148 h3 {

1149 margin-bottom: $lineheight/2;

1150 }

1151 }

1152

1153 .contact-activity {

1154 margin-top: $lineheight;

1155 width: 100%;

1156 }

1157

1158 .activity-details p {

1159 margin-left: 70px;

1160 margin-bottom: 0;

1161 }

1162

1163 #friends-container .contact-activity ul {

1164 margin-left: 70px;

1165 }

1166

1167 .user-view {

1168 p#no_home_location {

1169 margin: $lineheight;

1170 }

1171 .user_thumbnail {

1172 margin-top: $lineheight/4;

1173 float: left;

1174 }

1175 }

1176

1177 /* Rules for the user map */

1178

1179 .content_map .leaflet-popup-content {

1180 margin: $lineheight/2;

1181 min-height: 50px;

1182 }

1183

1184 /* Rules for user popups on maps */

1185

1186 .user_popup {

1187 min-width: 200px;

1188 p {

1189 padding: 0 0 5px 0;

1190 margin-top: 0 0 0 60px;

1191 font-size: 12px;

1192 }

1193 img.user_thumbnail {

1194 float: left;

1195 margin: 0 $lineheight/2 0 0;

1196 }

1197 }

1198

1199 /* Rules for the user list */

1200

1201 #user_list {

1202 font-size: $lineheight/2;

1203 width: 100%;

1204

1205 tr {

1206 vertical-align: middle;

1207 }

1208

1209 p {

1210 margin-top: 0px;

1211 margin-bottom: 0px;

1212 }

1213 }

1214

1215 #user_list_actions {

1216 float: right;

1217 margin-top: $lineheight/2;

1218 }

1219

1220 /* Rules for the diary list page */

1221

1222 .diary_entry-list img.user_thumbnail {

1223 float: left;

1224 }

1225

1226 .diary_post {

1227 max-width: 740px;

1228 position: relative;

1229 margin-top: $lineheight/2;

1230 padding-top: $lineheight;

1231 border-top: 1px solid #ccc;

1232

1233 &:first-child {

1234 margin-top: 0;

1235 border-top: 0;

1236 padding-top: 0;

1237 }

1238 h1, h2 {

1239 font-size: 21px;

1240 line-height: 1em;

1241 }

1242 small.deemphasize {

1243 float: left;

1244 display: block;

1245 }

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

1247 }

1248

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

1250 display: inline;

1251 }

1252

1253 #content .post_heading {

1254 margin-bottom: $lineheight;

1255 h2 {

1256 margin-top: 0;

1257 margin-bottom: $lineheight/2;

1258 font-size: 24px;

1259 }

1260 }

1261

1262 /* Rules for the diary entry page */

1263

1264 .diary_entry {

1265 #map {

1266 position: relative;

1267 width: 90%;

1268 height: 400px;

1269 border: 1px solid #ccc;

1270 display: none;

1271 margin-bottom: $lineheight;

1272 }

1273 #newcomment {

1274 border-top: 1px solid #ccc;

1275 padding-top: $lineheight;

1276 margin-top: $lineheight/2;

1277 }

1278 .comments {

1279 max-width: 740px;

1280 }

1281 .diary-comment {

1282 margin-top: $lineheight/2;

1283 border-top: 1px dashed #ccc;

1284 padding-top: $lineheight/2;

1285 &:first-child {

1286 margin-top: $lineheight;

1287 padding-top: $lineheight;

1288 border-top: 1px solid #ccc;

1289 }

1290 p {

1291 margin-bottom: $lineheight/2;

1292 }

1293 .comment-heading {

1294 margin-bottom: 0;

1295 margin-top: 0;

1296 }

1297 }

1298 }

1299

1300 .diary_entry-view img.user_thumbnail {

1301 float: left;

1302 }

1303

1304 /* Rules for the login page */

1305

1306 #login_openid_buttons {

1307 margin-bottom: 0;

1308 }

1309

1310 #login_openid_buttons li {

1311 float: left;

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

1313 }

1314

1315 /* Rules for the account confirmation page */

1316

1317 #terms {

1318 .legale {

1319 border: 1px solid #ccc;

1320 padding: $lineheight;

1321 margin-bottom: $lineheight;

1322 overflow: auto;

1323 height: 10em;

1324

1325 &:p#last {

1326 margin-bottom: 0px;

1327 }

1328

1329 &:ol {

1330 margin-bottom: 0px;

1331 }

1332

1333 &:img {

1334 display: block;

1335 margin: $lineheight auto inherit auto;

1336 }

1337 }

1338

1339 form.sign {

1340 input[type=submit] {

1341 float: left;

1342 }

1343 #decline {

1344 background: $grey;

1345 &:hover {

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

1347 }

1348 }

1349 }

1350 fieldset {

1351 margin-bottom: $lineheight;

1352 }

1353 #contributorGuidance {

1354 background-color: $offwhite;

1355 border-radius: 4px;

1356 -moz-border-radius: 4px;

1357 }

1358 .signing-buttons {

1359 height: 50px;

1360 }

1361 }

1362

1363 /* Rules for the account settings page */

1364

1365 #accountForm .user_map {

1366 position: relative;

1367 width: 500px;

1368 height: 400px;

1369 border: 1px solid #ccc;

1370 }

1371

1372 #accountForm .user_image {

1373 margin-bottom: 0;

1374 }

1375

1376 #accountForm #user_image {

1377 margin-left: 20px;

1378 }

1379

1380 #accountForm ul.accountImage-options {

1381 margin-left: 120px;

1382 }

1383

1384 .nohome .location {

1385 display: none;

1386 }

1387

1388 #homerow .message {

1389 display: none;

1390 }

1391

1392 .nohome .message {

1393 display: inline !important;

1394 }

1395

1396 .content_map.settings_map {

1397 width: 50%;

1398 float: none;

1399 }

1400

1401 /* Rules for the oauth settings page */

1402

1403 .oauth_clients .buttons .oauth-edit {

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

1405 }

1406

1407 .oauth_clients .buttons .oauth-delete {

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

1409 }

1410

1411 /* Rules for messages pages */

1412

1413 .messages {

1414 width: 100%;

1415 border: 1px solid #ddd;

1416

1417 input[type="submit"] {

1418 margin: auto;

1419 }

1420 tbody tr {

1421 border-top: 1px solid #ccc;

1422 }

1423

1424 .inbox-row {

1425 background: #f8f8ff;

1426 }

1427

1428 .inbox-row-unread {

1429 background:#CBEEA7;

1430 }

1431

1432 .right {

1433 float: right;

1434 }

1435

1436 tr td,

1437 tr th {

1438 padding: $lineheight/4;

1439 }

1440 p:last-child,

1441 h2:last-child,

1442 h3:last-child,

1443 ol:last-child,

1444 ul:last-child {

1445 margin-bottom:0;

1446 }

1447 tr td {

1448 height: 30px;

1449 border-right: 1px solid $lightgrey;

1450 }

1451 }

1452

1453 .inbox-row .inbox-mark-read {

1454 display: none;

1455 }

1456

1457 .info-line {

1458 margin-bottom: $lineheight;

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

1460 border-bottom: 1px solid #ccc;

1461

1462 form, form div {

1463 display: inline;

1464 }

1465 }

1466

1467 .info-line .user_thumbnail_tiny {

1468 vertical-align: middle;

1469 }

1470

1471 .inbox-mark-unread,

1472 .inbox-mark-read,

1473 .inbox-delete {

1474 width: 1%;

1475 }

1476

1477 .inbox-row-unread .inbox-mark-unread {

1478 display: none;

1479 }

1480

1481 .message-read .message-buttons {

1482 margin-top: $lineheight;

1483 padding-top: $lineheight;

1484 border-top: 1px solid $lightgrey;

1485 }

1486

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

1488 border-radius: 0;

1489 }

1490

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

1492

1493 .flash {

1494 padding: $lineheight;

1495 &#error {

1496 background-color: #ff7070;

1497 }

1498 &#warning {

1499 background-color: #ffe0cc;

1500 }

1501 &#notice {

1502 background-color: #CBEEA7;

1503 }

1504 }

1505

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

1507

1508 .field_with_errors {

1509 padding: 2px;

1510 background-color: #ff7070;

1511 display: table;

1512 }

1513

1514 /* Rules for rails validation error boxes */

1515

1516 #errorExplanation {

1517 width: 400px;

1518 border: 2px solid #ff7070;

1519 padding: 0 $lineheight/2;

1520 margin-bottom: $lineheight;

1521 background-color: #f0f0f0;

1522

1523 h2 {

1524 margin: 0 -10px 10px -10px;

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

1526 font-weight: bold;

1527 font-size: 12px;

1528 background-color: #c00;

1529 color: #fff;

1530 text-align: left;

1531 }

1532

1533 p {

1534 color: #333;

1535 margin-bottom: 0px;

1536 padding: $lineheight/4;

1537 }

1538

1539 ul {

1540 padding-left: $lineheight;

1541

1542 li {

1543 font-size: 12px;

1544 list-style: disc;

1545 }

1546 }

1547 }

1548

1549 /* Rules for forms */

1550

1551 .standard-form {

1552 fieldset {

1553 margin-bottom: $lineheight;

1554 }

1555 label.standard-label {

1556 display: block;

1557 margin-bottom: $lineheight/4;

1558 font-size: $typeheight;

1559 font-weight: bold;

1560 line-height: 1.5;

1561 }

1562 label.standard-label.secondary {

1563 display: inline-block;

1564 font-weight: normal;

1565 }

1566 .form-help {

1567 font-weight: normal;

1568 }

1569 .form-column {

1570 float: left;

1571 margin-right: 20px;

1572 }

1573 .form-divider {

1574 margin-top: $lineheight;

1575 padding-top: $lineheight;

1576 border-top: 1px solid $lightgrey;

1577 }

1578 .form-row {

1579 margin-bottom: $lineheight/2;

1580 }

1581 .form-list {

1582 margin-bottom: 0;

1583 }

1584 .form-list li {

1585 margin-bottom: 5px;

1586 }

1587 input[type="checkbox"],

1588 input[type="radio"] {

1589 float: left;

1590 margin-top: 5px;

1591 }

1592 }

1593

1594 #remember_me_openid {

1595 display: block;

1596 }

1597

1598 input[type="checkbox"],

1599 input[type="radio"] {

1600 margin-right: 5px;

1601 }

1602

1603 input[type="text"],

1604 input[type="email"],

1605 input[type="url"],

1606 input[type="password"],

1607 textarea {

1608 border: 1px solid #ccc;

1609 padding: 2px 5px;

1610 margin: 0;

1611 width: 200px;

1612 }

1613

1614 textarea {

1615 padding: 5px;

1616 width: 100%;

1617 }

1618

1619 /* Rules for user images */

1620

1621 img.user_image {

1622 max-width: 100px;

1623 max-height: 100px;

1624 border: 1px solid #ccc;

1625 margin-bottom: $lineheight;

1626 float: left;

1627 margin-right: $lineheight;

1628 }

1629

1630 img.user_thumbnail {

1631 max-width: 50px;

1632 max-height: 50px;

1633 border: 1px solid #ccc;

1634 margin-right: $lineheight;

1635 }

1636

1637 img.user_thumbnail_tiny {

1638 max-width: 25px;

1639 max-height: 25px;

1640 border: 1px solid #ccc;

1641 }

1642

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

1644

1645 .nowrap {

1646 white-space: nowrap;

1647 }

1648

1649 /* Rules for geo microformats */

1650

1651 abbr.geo {

1652 border-bottom: none;

1653 }

1654

1655 /* Rules for RSS buttons */

1656

1657 .rsssmall {

1658 position: relative;

1659 top: 5px;

1660 }

1661

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

1663

1664 ul.secondary-actions {

1665 font-style: normal;

1666 margin-bottom: 0;

1667 margin-left: 0;

1668 &.pager {

1669 display: inline-block;

1670 margin-right: 60px;

1671 }

1672 li {

1673 display: block;

1674 float: left;

1675 list-style: none;

1676 border-left: 1px solid #ccc;

1677 padding-left: $lineheight/4;

1678 margin-right: $lineheight/4;

1679 &:first-child {

1680 border-left: 0;

1681 padding-left: 0;

1682 }

1683 &:last-child {

1684 margin-right: 0px;

1685 }

1686 }

1687 }

1688

1689 /* Utility for managing inner content areas */

1690

1691 .inner22 { padding: $lineheight;}

1692

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

1694

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

1696

1697 .inner02 { padding: 0 $lineheight;}

1698

1699 /* Utility for general button styles */

1700

1701 input[type="button"],

1702 input[type="submit"],

1703 input[type="reset"],

1704 a.button {

1705 cursor: pointer;

1706 border: 0;

1707 display: inline-block;

1708 line-height: 20px;

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

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

1711 min-width: 120px;

1712 margin: 0 0 $lineheight/2 0;

1713 color: white;

1714 background: $blue;

1715 text-align: center;

1716 border-radius: 2px;

1717 -moz-border-radius: 2px;

1718 &:hover {

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

1720 text-decoration: none;

1721 }

1722 &.deemphasize {

1723 background: $lightblue;

1724 &:hover {

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

1726 }

1727 }

1728 &:disabled {

1729 background: $lightgrey;

1730 &:hover {

1731 background: $lightgrey;

1732 }

1733 }

1734 &:last-child {

1735 margin-bottom: 0;

1736 }

1737 }

1738

1739 .buttons {

1740 min-width: 200px;

1741 input[type="submit"],

1742 input[type="button"],

1743 input[type="reset"],

1744 .button {

1745 box-sizing: border-box;

1746 float: left;

1747 border-radius: 0;

1748 margin:0;

1749 min-width: 100px;

1750 max-width: 180px;

1751 border-right:1px solid white;

1752 text-overflow: ellipsis;

1753 white-space: nowrap;

1754 overflow: hidden;

1755 }

1756 input:first-child,

1757 .button:first-child {

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

1759 }

1760 input:last-child,

1761 .button:last-child {

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

1763 border-right-width: 0;

1764 }

1765 input:only-child,

1766 .button:only-child,

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

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

1769 border-radius:2px;

1770 border-right-width: 0;

1771 }

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

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

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

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

1776 border-right-width: 0;

1777 }

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

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

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

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

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

1783 }

1784 }

1785

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

1787

1788 .table0,

1789 .item0 {

1790 background: $offwhite;

1791 }

1792

1793 .table1,

1794 .item1 {

1795 background: #fff;

1796 }

1797

1798 /* Rules for OpenID logo */

1799

1800 .openid_logo {

1801 vertical-align: text-bottom;

1802 border: 0;

1803 }

1804

1805 /* Rules for rich text */

1806

1807 .richtext,

1808 .prose {

1809 h1, h2 {

1810 padding-bottom: $lineheight/2;

1811 border-bottom: 1px dashed #cccccc;

1812 margin-bottom: $lineheight/2;

1813 }

1814

1815 h1 {

1816 font-size: 24px;

1817 }

1818

1819 h2 {

1820 font-size: 18px;

1821 }

1822

1823 h3 {

1824 font-size: $typeheight;

1825 }

1826

1827 code {

1828 font-size: 13px;

1829 background: #e8e8e8;

1830 padding: 2px 3px;

1831 }

1832

1833 pre {

1834 font-size: 13px;

1835 background: #e8e8e8;

1836 padding: 2px 3px;

1837

1838 code {

1839 padding: 0;

1840 }

1841 }

1842

1843 img {

1844 padding: $lineheight;

1845 background-color: $offwhite;

1846 display: block;

1847 max-width: 100%;

1848 margin: auto;

1849 }

1850

1851 blockquote {

1852 border-left: $lineheight solid $offwhite;

1853 padding-left: $lineheight;

1854 margin: 0;

1855 color: #7E7E7E;

1856 }

1857

1858 ul, ol {

1859 padding-left: $lineheight;

1860 margin-bottom: $lineheight;

1861 margin-left: $lineheight;

1862 }

1863

1864 ul li {

1865 list-style: disc;

1866 }

1867

1868 ol li {

1869 list-style: decimal;

1870 }

1871 }

1872

1873 .diary_post .richtext {

1874 margin-top: $lineheight;

1875 }

1876

1877 .comments .richtext {

1878 margin-left: 70px;

1879 margin-top: 0;

1880 }

1881

1882 /* Rules for rich text editors */

1883

1884 .richtext_container {

1885 margin-bottom: $lineheight;

1886

1887 .richtext_content {

1888 width: 50%;

1889 display: inline-block;

1890 vertical-align: top;

1891

1892 .richtext_preview {

1893 display: inline-block;

1894 padding: $lineheight;

1895 background-color: $offwhite;

1896 overflow-x: auto;

1897

1898 &.loading {

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

1900 background-repeat: no-repeat;

1901 background-position: center;

1902 }

1903

1904 > :first-child {

1905 margin-top: 0px;

1906 }

1907 }

1908 }

1909

1910 .richtext_help {

1911 display: inline-block;

1912 vertical-align: top;

1913 margin-left: 15px;

1914 background-color: #f8f8ff;

1915 padding: $lineheight/2;

1916 width: 220px;

1917

1918 ul {

1919 margin-bottom: 0;

1920 }

1921

1922 h4.heading, li {

1923 border-bottom: 1px solid #ccc;

1924 margin-bottom: $lineheight/4;

1925 padding-bottom: $lineheight/4;

1926 }

1927

1928 li h4, li span, li p {

1929 display: inline-block;

1930 vertical-align: top;

1931 font-size: 11px;

1932 }

1933

1934 li h4 {

1935 width: 40%;

1936 margin: 0;

1937 }

1938

1939 li span, li p {

1940 width: 50%;

1941 margin-left: $lineheight/2;

1942 margin-bottom: $lineheight/4;

1943 white-space: nowrap;

1944 }

1945 }

1946 }

1947

1948 /* Rules for the user notes list */

1949

1950 .note_list {

1951 tr.creator {

1952 background-color: #eeeeee;

1953 }

1954

1955 td {

1956 padding: 3px;

1957 }

1958

1959 p {

1960 margin-bottom: 0px;

1961 }

1962 }

1963

1964 /* Rules for the notes interface */

1965

1966 .leaflet-popup-content .note {

1967 padding-top: $lineheight/2;

1968 }

1969

1970 .leaflet-popup-content .note {

1971 h2 {

1972 margin-bottom: $lineheight/2;

1973 }

1974

1975 div {

1976 margin-top: $lineheight/2;

1977 }

1978

1979 .permalink {

1980 position: absolute;

1981 top: $lineheight/4;

1982 left: $lineheight/4;

1983 min-width: 15px;

1984 min-height: 15px;

1985 }

1986

1987 .permalink span {

1988 display: none;

1989 padding-left: $lineheight;

1990 }

1991

1992 .permalink:hover span {

1993 display: block;

1994 }

1995

1996 .warning {

1997 display: block;

1998 background-color: #ffe0cc;

1999 padding: 4px 6px;

2000 margin-bottom: $lineheight/2;

2001 }

2002

2003 .comment_body {

2004 margin-top: 2px;

2005 margin-bottom: 2px;

2006

2007 p {

2008 margin-top: 0px;

2009 margin-bottom: 0px;

2010 }

2011 }

2012

2013 .comment {

2014 width: 100%;

2015 height: 100px;

2016 }

2017

2018 .buttons {

2019 margin-top: $lineheight/4;

2020 text-align: right;

2021 }

2022 }

2023

2024 /*

2025 * Rules for the iD editor

2026 */

2027 .id-embed {

2028 width: 100%;

2029 height: 100%;

2030 }

2031

2032 /* Rules for rotating sidebar ads */

2033 .ad-container {

2034 display: block;

2035 height: 120px;

2036 overflow: hidden;

2037 position: relative;

2038 border-bottom: 1px solid #ccc;

2039 }

2040

2041 .ad {

2042 height: 100px;

2043 border: 0;

2044 background: #fff;

2045 }