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 /*

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") 0 0 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 }

544

545 .leaflet-control .zoomin,

546 .control-layers .control-button {

547 margin-bottom: 0px;

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

549 }

550

551 .site .leaflet-control .zoomout,

552 .control-key .control-button {

553 margin-bottom: 0px;

554 border-radius: 0px;

555 }

556

557 .leaflet-control .zoomout,

558 .control-locate .control-button,

559 .control-share .control-button {

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

561 }

562

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

564 background-color: white;

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 ul, li:last-child {

607 margin-bottom: 0;

608 }

609

610 li {

611 border-radius: 4px;

612 overflow: hidden;

613 margin-bottom: 10px;

614 }

615

616 label {

617 display: block;

618 padding: 5px 5px 5px 7px;

619 background-color: #eee;

620 cursor: pointer;

621 }

622

623 li.active label {

624 background-color: #ccc;

625 }

626

627 .base-layers {

628 .leaflet-container {

629 width: 100%;

630 height: 50px;

631 cursor: pointer;

632 }

633 }

634 }

635

636 .share-ui {

637 .share-link {

638 li {

639 display: inline-block;

640 width: 50%;

641 }

642 }

643 }

644

645 .site-index .leaflet-top,

646 .site-export .leaflet-top {

647 top: $lineheight/2 !important;

648 .leaflet-control {

649 margin-top: 0px !important;

650 }

651 }

652

653 .leaflet-popup-scrolled {

654 padding-right: $lineheight;

655 border-bottom: 0px !important;

656 border-top: 0px !important;

657 }

658

659 .leaflet-popup-content-wrapper {

660 border-radius: 4px !important;

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

662 }

663

664 /* Rules for edit menu */

665

666 .menuicon {

667 padding: 0 $lineheight/4;

668 font-weight: normal;

669 display: inline-block;

670 &:hover {

671 text-decoration: none !important;

672 }

673 }

674

675 .menu {

676 display: none;

677 z-index: 10000;

678 position: absolute;

679 background-color: #ffffff;

680 border: 1px solid $keyline;

681 border-top: 0px;

682 ul {

683 margin: 0px;

684 }

685 li {

686 padding: 2px $lineheight/4;

687 border-top: 1px solid #eee;

688 white-space: nowrap;

689 }

690 }

691

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

693

694 #attribution {

695 display: none;

696 }

697

698 .attribution_license,

699 .attribution_project {

700 text-align: left;

701 }

702

703 .attribution_notice {

704 text-align: center;

705 }

706

707 /* Rules for the popout map sidebar */

708

709 #sidebar {

710 display: none;

711 position: relative;

712 float: left;

713 overflow: auto;

714 border-right: 1px solid $keyline;

715 width: 33.3333%;

716 ul {

717 margin-bottom: 0;

718 &:last-child {

719 border-bottom: 1px solid #ccc;

720 }

721 li {

722 margin-bottom: $lineheight/4;

723 &:last-child {

724 margin-bottom: 0;

725 }

726 }

727 }

728 }

729

730 .sidebar_heading {

731 position: relative;

732 padding: $lineheight/2 $lineheight;

733 z-index: 9999;

734 background: $offwhite;

735 border-bottom: 1px solid #ccc;

736 h4 {

737 margin: 0;

738 }

739 }

740

741 .sidebar_close {

742 position: absolute;

743 height: $lineheight;

744 top: 0px;

745 bottom: 0;

746 right: $lineheight;

747 margin: auto;

748 }

749

750 #sidebar_content {

751 position: relative;

752 margin-bottom: 20px;

753 width: 100%;

754 h4 {

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

756 margin-top: $lineheight/2;

757 margin-bottom: 0;

758 border-bottom: 1px solid #ddd;

759 }

760 }

761

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

763

764 #mapkey {

765 .mapkey-table-key img {

766 display: block;

767 margin-left: auto;

768 margin-right: auto;

769 }

770 td {

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

772 }

773 }

774

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

776

777 .search_searching {

778 margin-top: $lineheight/4;

779 margin-bottom: $lineheight/4;

780 }

781

782 .search_results_entry {

783 margin-bottom: 0;

784

785 .search_details {

786 display: block;

787 text-align: right;

788 }

789 }

790

791 .search_results_entry .search_searching {

792 text-align: center;

793 margin: $lineheight auto;

794 width: $lineheight;

795 display: block;

796 }

797

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

799

800 .search_results_error {

801 color: #f00;

802 }

803

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

805

806 #browse_content {

807 position: relative;

808 .browse_show_list.button {

809 position: absolute;

810 left: $lineheight;

811 right: $lineheight;

812 bottom: -40px;

813 margin-bottom: 0;

814 }

815 a.more-details {

816 position: absolute;

817 top: 0;

818 right: $lineheight;

819 }

820 ul li {

821 margin-bottom: 0;

822 }

823 }

824

825 .browse_details {

826 position: relative;

827 }

828

829 .browse_status {

830 display: none;

831 }

832

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

834

835 .export_bounds {

836 text-align: center;

837 }

838

839 .export_area_inputs {

840 margin-bottom: $lineheight/2;

841 input[type="text"] {

842 width: 60px;

843 margin-bottom: 5px;

844 }

845 }

846

847 .export_bound {

848 margin: $lineheight/4;

849 }

850

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

852 width: 100%;

853 }

854

855 #sidebar #marker_inputs li:last-child {

856 margin-bottom: $lineheight/2;

857 }

858

859 #export_osm,

860 #export_mapnik,

861 #export_osmarender {

862 display: none;

863 }

864

865 /* Rules for the main content area */

866

867 #content {

868 padding: $lineheight;

869 position: relative;

870 }

871

872 .site-edit #content,

873 .site-index #content,

874 .site-export #content {

875 position: fixed;

876 padding: 0;

877 top: 30px; bottom: 0;

878 left: 184px; right: 0;

879 border-left: 1px solid #ccc;

880 }

881

882 .wrapper {

883 margin-left: 184px;

884 border-left: 1px solid #ccc;

885 text-align: left;

886 }

887

888 .site-edit #content {

889 top: 30px;

890 }

891

892 #content.maximised {

893 top: 0;

894 left: 0;

895 right: 0;

896 bottom: 0;

897 border: 0;

898 z-index: 1000;

899 }

900

901 #slim_container {

902 width: 100%;

903 }

904

905 #slim_container_content {

906 max-width: 50em;

907 background-color: #FFFFFF;

908 margin: $lineheight/2 auto;

909 padding: 3px;

910 border-radius: 25px;

911 -moz-border-radius: 25px;

912 border: 1px solid #e6e6e6;

913 }

914

915 #slim_content {

916 margin: $lineheight/2;

917 margin-top: 95px;

918 max-width: 50em;

919

920 .content-heading {

921 margin-bottom: 15px;

922 }

923 }

924

925 #slim_header {

926 margin: 30px $lineheight/2;

927 position: absolute;

928 top: 0px;

929 margin-right: $lineheight/4;

930 img {

931 vertical-align: middle;

932 margin-bottom: $lineheight/4;

933 margin-right: $lineheight/4;

934 }

935 }

936

937 .content-heading {

938 position: relative;

939 padding: $lineheight;

940 background: $offwhite;

941 h1, h2 {

942 margin-bottom: $lineheight/2;

943 line-height: 100%;

944 &:last-child {

945 margin-bottom: 0;

946 }

947 }

948 p {

949 margin-top: $lineheight/2;

950 margin-bottom: 0px;

951 }

952 }

953

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

955

956 .content_map {

957 position: relative;

958 width: 45%;

959 height: 400px;

960 border: 1px solid #ccc;

961 margin-bottom: $lineheight;

962 float: right;

963 }

964

965 .content_map #small_map {

966 height: 100%;

967 width: 100%;

968 margin-bottom: $lineheight;

969 }

970

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

972

973 #changeset_list {

974 width: 100%;

975 ul {

976 padding: $lineheight/2 0;

977 margin-bottom: 0px;

978 border-top: 1px solid #ccc;

979 &:last-child {

980 border-bottom: 1px solid #ccc;

981 }

982 }

983 .selected {

984 background: #FFFFC0;

985 }

986 .date,

987 .user {

988 border-left: 1px solid #ccc;

989 padding-left: $lineheight/4;

990 margin-right: $lineheight/4;

991 }

992 }

993

994 #changeset_list_map_wrapper {

995 position: absolute;

996 width: 50%;

997 height: 490px;

998 top: 0;

999 right: 0;

1000 }

1001

1002 #changeset_list_map_wrapper.scrolled {

1003 position: fixed;

1004 }

1005

1006 #changeset_list_map {

1007 position: absolute;

1008 bottom: $lineheight;

1009 top: $lineheight;

1010 right: $lineheight;

1011 left: $lineheight;

1012 border: 1px solid #ccc;

1013 }

1014

1015 #changeset_list_map_wrapper.scrolled #changeset_list_map {

1016 margin-left: 93px;

1017 }

1018

1019 /* Rules for the data browser */

1020

1021 .browse-section {

1022 border-top: 1px solid #ccc;

1023 margin-top: $lineheight/2;

1024 padding-top: $lineheight/2;

1025 &:first-child {

1026 margin-top: 0;

1027 }

1028 .warning {

1029 background-color: #ffe0cc;

1030 margin: 0px;

1031 padding: 4px 6px;

1032 max-width: 100%;

1033 }

1034 h4, p {

1035 margin-bottom: $lineheight/4;

1036 }

1037 p, ul, .bbox, .geo {

1038 display: inline-block;

1039 vertical-align: top;

1040 max-width: 65%;

1041 }

1042 ul p {

1043 margin-left: 0;

1044 margin-bottom: 0;

1045 }

1046 h4 {

1047 width: 33.3333%;

1048 display: inline-block;

1049 vertical-align: top;

1050 }

1051 }

1052

1053 .bbox {

1054 div {

1055 width: 33.3333%;

1056 text-align: center;

1057 padding: $lineheight/4 0;

1058 overflow: hidden;

1059 text-overflow: ellipsis;

1060 float: left;

1061 }

1062 .max_lat,

1063 .min_lat {

1064 margin-left: auto;

1065 margin-right: auto;

1066 width: 100%;

1067 }

1068 }

1069

1070 #browse_map .geolink {

1071 display: none;

1072 }

1073

1074 #browse_map .secondary-actions {

1075 margin-bottom: $lineheight/2;

1076 }

1077

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

1079

1080 #trace_list {

1081 font-size: $lineheight/2;

1082 border-width: 0px;

1083 text-align: right;

1084

1085 .trace_summary {

1086 font-size: 12px;

1087 color: gray;

1088 }

1089

1090 .trace_pending {

1091 color: red;

1092 }

1093

1094 .trace_public {

1095 color: green;

1096 }

1097

1098 .trace_identifiable {

1099 color: green;

1100 }

1101

1102 .trace_trackable {

1103 color: red;

1104 }

1105

1106 .trace_private {

1107 color: red;

1108 }

1109 }

1110

1111 /* Rules for the user profile page */

1112

1113 #userinformation {

1114

1115 min-height: 100px;

1116 .userinformation-inner {

1117 float: left;

1118 }

1119 h2 {

1120 margin-top: 0;

1121 }

1122 .user-description {

1123 width: 100%;

1124 clear: both;

1125 }

1126 .deemphasize {

1127 margin: 0;

1128 }

1129 }

1130

1131 .admin-user-info small {

1132 margin-bottom: $lineheight/2;

1133 display: inline;

1134 margin-right: $lineheight;

1135 }

1136

1137 .activity-block {

1138 clear: left;

1139 border-bottom: 1px solid #ccc;

1140 padding-bottom: $lineheight;

1141 float: left;

1142 h3 {

1143 margin-bottom: $lineheight/2;

1144 }

1145 }

1146

1147 .contact-activity {

1148 margin-top: $lineheight;

1149 width: 100%;

1150 }

1151

1152 .activity-details p {

1153 margin-left: 70px;

1154 margin-bottom: 0;

1155 }

1156

1157 #friends-container .contact-activity ul {

1158 margin-left: 70px;

1159 }

1160

1161 .user-view {

1162 p#no_home_location {

1163 margin: $lineheight;

1164 }

1165 .user_thumbnail {

1166 margin-top: $lineheight/4;

1167 float: left;

1168 }

1169 }

1170

1171 /* Rules for the user map */

1172

1173 .content_map .leaflet-popup-content {

1174 margin: $lineheight/2;

1175 min-height: 50px;

1176 }

1177

1178 /* Rules for user popups on maps */

1179

1180 .user_popup {

1181 min-width: 200px;

1182 p {

1183 padding: 0 0 5px 0;

1184 margin-top: 0 0 0 60px;

1185 font-size: 12px;

1186 }

1187 img.user_thumbnail {

1188 float: left;

1189 margin: 0 $lineheight/2 0 0;

1190 }

1191 }

1192

1193 /* Rules for the user list */

1194

1195 #user_list {

1196 font-size: $lineheight/2;

1197 width: 100%;

1198

1199 tr {

1200 vertical-align: middle;

1201 }

1202

1203 p {

1204 margin-top: 0px;

1205 margin-bottom: 0px;

1206 }

1207 }

1208

1209 #user_list_actions {

1210 float: right;

1211 margin-top: $lineheight/2;

1212 }

1213

1214 /* Rules for the diary list page */

1215

1216 .diary_entry-list img.user_thumbnail {

1217 float: left;

1218 }

1219

1220 .diary_post {

1221 max-width: 740px;

1222 position: relative;

1223 margin-top: $lineheight/2;

1224 padding-top: $lineheight;

1225 border-top: 1px solid #ccc;

1226

1227 &:first-child {

1228 margin-top: 0;

1229 border-top: 0;

1230 padding-top: 0;

1231 }

1232 h1, h2 {

1233 font-size: 21px;

1234 line-height: 1em;

1235 }

1236 small.deemphasize {

1237 float: left;

1238 display: block;

1239 }

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

1241 }

1242

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

1244 display: inline;

1245 }

1246

1247 #content .post_heading {

1248 margin-bottom: $lineheight;

1249 h2 {

1250 margin-top: 0;

1251 margin-bottom: $lineheight/2;

1252 font-size: 24px;

1253 }

1254 }

1255

1256 /* Rules for the diary entry page */

1257

1258 .diary_entry {

1259 #map {

1260 position: relative;

1261 width: 90%;

1262 height: 400px;

1263 border: 1px solid #ccc;

1264 display: none;

1265 margin-bottom: $lineheight;

1266 }

1267 #newcomment {

1268 border-top: 1px solid #ccc;

1269 padding-top: $lineheight;

1270 margin-top: $lineheight/2;

1271 }

1272 .comments {

1273 max-width: 740px;

1274 }

1275 .diary-comment {

1276 margin-top: $lineheight/2;

1277 border-top: 1px dashed #ccc;

1278 padding-top: $lineheight/2;

1279 &:first-child {

1280 margin-top: $lineheight;

1281 padding-top: $lineheight;

1282 border-top: 1px solid #ccc;

1283 }

1284 p {

1285 margin-bottom: $lineheight/2;

1286 }

1287 .comment-heading {

1288 margin-bottom: 0;

1289 margin-top: 0;

1290 }

1291 }

1292 }

1293

1294 .diary_entry-view img.user_thumbnail {

1295 float: left;

1296 }

1297

1298 /* Rules for the login page */

1299

1300 #login_openid_buttons {

1301 margin-bottom: 0;

1302 }

1303

1304 #login_openid_buttons li {

1305 float: left;

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

1307 }

1308

1309 /* Rules for the account confirmation page */

1310

1311 #terms {

1312 .legale {

1313 border: 1px solid #ccc;

1314 padding: $lineheight;

1315 margin-bottom: $lineheight;

1316 overflow: auto;

1317 height: 10em;

1318

1319 &:p#last {

1320 margin-bottom: 0px;

1321 }

1322

1323 &:ol {

1324 margin-bottom: 0px;

1325 }

1326

1327 &:img {

1328 display: block;

1329 margin: $lineheight auto inherit auto;

1330 }

1331 }

1332

1333 form.sign {

1334 input[type=submit] {

1335 float: left;

1336 }

1337 #decline {

1338 background: $grey;

1339 &:hover {

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

1341 }

1342 }

1343 }

1344 fieldset {

1345 margin-bottom: $lineheight;

1346 }

1347 #contributorGuidance {

1348 background-color: $offwhite;

1349 border-radius: 4px;

1350 -moz-border-radius: 4px;

1351 }

1352 .signing-buttons {

1353 height: 50px;

1354 }

1355 }

1356

1357 /* Rules for the account settings page */

1358

1359 #accountForm .user_map {

1360 position: relative;

1361 width: 500px;

1362 height: 400px;

1363 border: 1px solid #ccc;

1364 }

1365

1366 #accountForm .user_image {

1367 margin-bottom: 0;

1368 }

1369

1370 #accountForm #user_image {

1371 margin-left: 20px;

1372 }

1373

1374 #accountForm ul.accountImage-options {

1375 margin-left: 120px;

1376 }

1377

1378 .nohome .location {

1379 display: none;

1380 }

1381

1382 #homerow .message {

1383 display: none;

1384 }

1385

1386 .nohome .message {

1387 display: inline !important;

1388 }

1389

1390 .content_map.settings_map {

1391 width: 50%;

1392 float: none;

1393 }

1394

1395 /* Rules for the oauth settings page */

1396

1397 .oauth_clients .buttons .oauth-edit {

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

1399 }

1400

1401 .oauth_clients .buttons .oauth-delete {

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

1403 }

1404

1405 /* Rules for messages pages */

1406

1407 .messages {

1408 width: 100%;

1409 border: 1px solid #ddd;

1410

1411 input[type="submit"] {

1412 margin: auto;

1413 }

1414 tbody tr {

1415 border-top: 1px solid #ccc;

1416 }

1417

1418 .inbox-row {

1419 background: #f8f8ff;

1420 }

1421

1422 .inbox-row-unread {

1423 background:#CBEEA7;

1424 }

1425

1426 .right {

1427 float: right;

1428 }

1429

1430 tr td,

1431 tr th {

1432 padding: $lineheight/4;

1433 }

1434 p:last-child,

1435 h2:last-child,

1436 h3:last-child,

1437 ol:last-child,

1438 ul:last-child {

1439 margin-bottom:0;

1440 }

1441 tr td {

1442 height: 30px;

1443 border-right: 1px solid $keyline;

1444 }

1445 }

1446

1447 .inbox-row .inbox-mark-read {

1448 display: none;

1449 }

1450

1451 .info-line {

1452 margin-bottom: $lineheight;

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

1454 border-bottom: 1px solid #ccc;

1455

1456 form, form div {

1457 display: inline;

1458 }

1459 }

1460

1461 .info-line .user_thumbnail_tiny {

1462 vertical-align: middle;

1463 }

1464

1465 .inbox-mark-unread,

1466 .inbox-mark-read,

1467 .inbox-delete {

1468 width: 1%;

1469 }

1470

1471 .inbox-row-unread .inbox-mark-unread {

1472 display: none;

1473 }

1474

1475 .message-read .message-buttons {

1476 margin-top: $lineheight;

1477 padding-top: $lineheight;

1478 border-top: 1px solid $keyline;

1479 }

1480

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

1482 border-radius: 0;

1483 }

1484

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

1486

1487 .flash {

1488 padding: $lineheight;

1489 &#error {

1490 background-color: #ff7070;

1491 }

1492 &#warning {

1493 background-color: #ffe0cc;

1494 }

1495 &#notice {

1496 background-color: #CBEEA7;

1497 }

1498 }

1499

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

1501

1502 .field_with_errors {

1503 padding: 2px;

1504 background-color: #ff7070;

1505 display: table;

1506 }

1507

1508 /* Rules for rails validation error boxes */

1509

1510 #errorExplanation {

1511 width: 400px;

1512 border: 2px solid #ff7070;

1513 padding: 0 $lineheight/2;

1514 margin-bottom: $lineheight;

1515 background-color: #f0f0f0;

1516

1517 h2 {

1518 margin: 0 -10px 10px -10px;

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

1520 font-weight: bold;

1521 font-size: 12px;

1522 background-color: #c00;

1523 color: #fff;

1524 text-align: left;

1525 }

1526

1527 p {

1528 color: #333;

1529 margin-bottom: 0px;

1530 padding: $lineheight/4;

1531 }

1532

1533 ul {

1534 padding-left: $lineheight;

1535

1536 li {

1537 font-size: 12px;

1538 list-style: disc;

1539 }

1540 }

1541 }

1542

1543 /* Rules for forms */

1544

1545 .standard-form {

1546 fieldset {

1547 margin-bottom: $lineheight;

1548 }

1549 label.standard-label {

1550 display: block;

1551 margin-bottom: $lineheight/4;

1552 font-size: $typeheight;

1553 font-weight: bold;

1554 line-height: 1.5;

1555 }

1556 label.standard-label.secondary {

1557 display: inline-block;

1558 font-weight: normal;

1559 }

1560 .form-help {

1561 font-weight: normal;

1562 }

1563 .form-column {

1564 float: left;

1565 margin-right: 20px;

1566 }

1567 .form-divider {

1568 margin-top: $lineheight;

1569 padding-top: $lineheight;

1570 border-top: 1px solid $keyline;

1571 }

1572 .form-row {

1573 margin-bottom: $lineheight/2;

1574 }

1575 .form-list {

1576 margin-bottom: 0;

1577 }

1578 .form-list li {

1579 margin-bottom: 5px;

1580 }

1581 input[type="checkbox"],

1582 input[type="radio"] {

1583 float: left;

1584 margin-top: 5px;

1585 }

1586 }

1587

1588 #remember_me_openid {

1589 display: block;

1590 }

1591

1592 input[type="checkbox"],

1593 input[type="radio"] {

1594 margin-right: 5px;

1595 }

1596

1597 input[type="text"],

1598 input[type="email"],

1599 input[type="url"],

1600 input[type="password"],

1601 textarea {

1602 border: 1px solid #ccc;

1603 padding: 2px 5px;

1604 margin: 0;

1605 width: 200px;

1606 }

1607

1608 textarea {

1609 padding: 5px;

1610 width: 100%;

1611 height: 100% !important;

1612 }

1613

1614 /* Rules for user images */

1615

1616 img.user_image {

1617 max-width: 100px;

1618 max-height: 100px;

1619 border: 1px solid #ccc;

1620 margin-bottom: $lineheight;

1621 float: left;

1622 margin-right: $lineheight;

1623 }

1624

1625 img.user_thumbnail {

1626 max-width: 50px;

1627 max-height: 50px;

1628 border: 1px solid #ccc;

1629 margin-right: $lineheight;

1630 }

1631

1632 img.user_thumbnail_tiny {

1633 max-width: 25px;

1634 max-height: 25px;

1635 border: 1px solid #ccc;

1636 }

1637

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

1639

1640 .nowrap {

1641 white-space: nowrap;

1642 }

1643

1644 /* Rules for geo microformats */

1645

1646 abbr.geo {

1647 border-bottom: none;

1648 }

1649

1650 /* Rules for RSS buttons */

1651

1652 .rsssmall {

1653 position: relative;

1654 top: 5px;

1655 }

1656

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

1658

1659 ul.secondary-actions {

1660 font-style: normal;

1661 margin-bottom: 0;

1662 margin-left: 0;

1663 &.pager {

1664 display: inline-block;

1665 margin-right: 60px;

1666 }

1667 li {

1668 display: block;

1669 float: left;

1670 list-style: none;

1671 border-left: 1px solid #ccc;

1672 padding-left: $lineheight/4;

1673 margin-right: $lineheight/4;

1674 &:first-child {

1675 border-left: 0;

1676 padding-left: 0;

1677 }

1678 &:last-child {

1679 margin-right: 0px;

1680 }

1681 }

1682 }

1683

1684 /* Utility for managing inner content areas */

1685

1686 .inner22 { padding: $lineheight;}

1687

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

1689

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

1691

1692 .inner02 { padding: 0 $lineheight;}

1693

1694 /* Utility for general button styles */

1695

1696 input[type="button"],

1697 input[type="submit"],

1698 input[type="reset"],

1699 a.button {

1700 cursor: pointer;

1701 border: 0;

1702 display: inline-block;

1703 line-height: 20px;

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

1705 min-width: 120px;

1706 margin: 0 0 $lineheight/2 0;

1707 color: white;

1708 background: $blue;

1709 text-align: center;

1710 border-radius: 2px;

1711 -moz-border-radius: 2px;

1712 &:hover {

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

1714 text-decoration: none;

1715 }

1716 &.deemphasize {

1717 background: $lightblue;

1718 &:hover {

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

1720 }

1721 }

1722 &:disabled {

1723 background: $lightblue;

1724 }

1725 &:last-child {

1726 margin-bottom: 0;

1727 }

1728 }

1729

1730 .buttons {

1731 min-width: 200px;

1732 input[type="submit"],

1733 input[type="button"],

1734 input[type="reset"],

1735 .button {

1736 box-sizing: border-box;

1737 float: left;

1738 border-radius: 0;

1739 margin:0;

1740 min-width: 100px;

1741 max-width: 150px;

1742 border-right:1px solid white;

1743 }

1744 input:first-child,

1745 .button:first-child {

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

1747 }

1748 input:last-child,

1749 .button:last-child {

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

1751 border-right-width: 0;

1752 }

1753 input:only-child,

1754 .button:only-child,

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

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

1757 border-radius:2px;

1758 border-right-width: 0;

1759 }

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

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

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

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

1764 border-right-width: 0;

1765 }

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

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

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

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

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

1771 }

1772 }

1773

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

1775

1776 .table0,

1777 .item0 {

1778 background: $offwhite;

1779 }

1780

1781 .table1,

1782 .item1 {

1783 background: #fff;

1784 }

1785

1786 /* Rules for OpenID logo */

1787

1788 .openid_logo {

1789 vertical-align: text-bottom;

1790 border: 0;

1791 }

1792

1793 /* Rules for rich text */

1794

1795 .richtext,

1796 .prose {

1797 h1, h2 {

1798 padding-bottom: $lineheight/2;

1799 border-bottom: 1px dashed #cccccc;

1800 margin-bottom: $lineheight/2;

1801 }

1802

1803 h1 {

1804 font-size: 24px;

1805 }

1806

1807 h2 {

1808 font-size: 18px;

1809 }

1810

1811 h3 {

1812 font-size: $typeheight;

1813 }

1814

1815 code {

1816 font-size: 13px;

1817 background: #e8e8e8;

1818 padding: 2px 3px;

1819 }

1820

1821 pre {

1822 font-size: 13px;

1823 background: #e8e8e8;

1824 padding: 2px 3px;

1825

1826 code {

1827 padding: 0;

1828 }

1829 }

1830

1831 img {

1832 padding: $lineheight;

1833 background-color: $offwhite;

1834 display: block;

1835 max-width: 100%;

1836 margin: auto;

1837 }

1838

1839 blockquote {

1840 border-left: $lineheight solid $offwhite;

1841 padding-left: $lineheight;

1842 margin: 0;

1843 color: #7E7E7E;

1844 }

1845

1846 ul, ol {

1847 font-style: italic;

1848 padding-left: $lineheight;

1849 margin-bottom: $lineheight;

1850 margin-left: $lineheight;

1851 }

1852

1853 ul li {

1854 list-style: disc;

1855 }

1856

1857 ol li {

1858 list-style: decimal;

1859 }

1860 }

1861

1862 .diary_post .richtext {

1863 margin-top: $lineheight;

1864 }

1865

1866 .comments .richtext {

1867 margin-left: 70px;

1868 margin-top: 0;

1869 }

1870

1871 /* Rules for rich text editors */

1872

1873 .richtext_container {

1874 margin-bottom: $lineheight;

1875

1876 .richtext_content {

1877 width: 50%;

1878 display: inline-block;

1879 vertical-align: top;

1880

1881 .richtext_preview {

1882 display: inline-block;

1883 padding: $lineheight;

1884 background-color: $offwhite;

1885 overflow-x: auto;

1886

1887 &.loading {

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

1889 background-repeat: no-repeat;

1890 background-position: center;

1891 }

1892

1893 > :first-child {

1894 margin-top: 0px;

1895 }

1896 }

1897 }

1898

1899 .richtext_help {

1900 display: inline-block;

1901 vertical-align: top;

1902 margin-left: 15px;

1903 background-color: #f8f8ff;

1904 padding: $lineheight/2;

1905 width: 220px;

1906

1907 ul {

1908 margin-bottom: 0;

1909 }

1910

1911 h4.heading, li {

1912 border-bottom: 1px solid #ccc;

1913 margin-bottom: $lineheight/4;

1914 padding-bottom: $lineheight/4;

1915 }

1916

1917 li h4, li span, li p {

1918 display: inline-block;

1919 vertical-align: top;

1920 font-size: 11px;

1921 }

1922

1923 li h4 {

1924 width: 40%;

1925 margin: 0;

1926 }

1927

1928 li span, li p {

1929 width: 50%;

1930 margin-left: $lineheight/2;

1931 margin-bottom: $lineheight/4;

1932 white-space: nowrap;

1933 }

1934 }

1935 }

1936

1937 /* Rules for the user notes list */

1938

1939 .note_list {

1940 tr.creator {

1941 background-color: #eeeeee;

1942 }

1943

1944 td {

1945 padding: 3px;

1946 }

1947

1948 p {

1949 margin-bottom: 0px;

1950 }

1951 }

1952

1953 /* Rules for the notes interface */

1954

1955 .leaflet-popup-content .note {

1956 padding-top: $lineheight/2;

1957 }

1958

1959 .leaflet-popup-content .note {

1960 h2 {

1961 margin-bottom: $lineheight/2;

1962 }

1963

1964 div {

1965 margin-top: $lineheight/2;

1966 }

1967

1968 .permalink {

1969 position: absolute;

1970 top: $lineheight/4;

1971 left: $lineheight/4;

1972 min-width: 15px;

1973 min-height: 15px;

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

1975 }

1976

1977 .permalink span {

1978 display: none;

1979 padding-left: $lineheight;

1980 }

1981

1982 .permalink:hover span {

1983 display: block;

1984 }

1985

1986 .warning {

1987 display: block;

1988 background-color: #ffe0cc;

1989 padding: 4px 6px;

1990 margin-bottom: $lineheight/2;

1991 }

1992

1993 .comment_body {

1994 margin-top: 2px;

1995 margin-bottom: 2px;

1996

1997 p {

1998 margin-top: 0px;

1999 margin-bottom: 0px;

2000 }

2001 }

2002

2003 .comment {

2004 width: 100%;

2005 height: 100px;

2006 }

2007

2008 .buttons {

2009 margin-top: $lineheight/4;

2010 text-align: right;

2011 }

2012 }

2013

2014 /*

2015 * Rules for the iD editor

2016 */

2017 .id-embed {

2018 width: 100%;

2019 height: 100%;

2020 }

2021

2022 /* Rules for rotating sidebar ads */

2023 .ad-container {

2024 display: block;

2025 height: 120px;

2026 overflow: hidden;

2027 position: relative;

2028 border-bottom: 1px solid #ccc;

2029 }

2030

2031 .ad {

2032 height: 100px;

2033 border: 0;

2034 background: #fff;

2035 }