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 li {

607 border-radius: 4px;

608 overflow: hidden;

609 margin-bottom: 10px;

610 }

611

612 label {

613 display: block;

614 padding: 5px 5px 5px 7px;

615 background-color: #eee;

616 cursor: pointer;

617 }

618

619 li.active label {

620 background-color: #ccc;

621 }

622

623 .base-layers {

624 .leaflet-container {

625 width: 100%;

626 height: 50px;

627 cursor: pointer;

628 }

629 }

630 }

631

632 .share-ui {

633 .share-link {

634 li {

635 display: inline-block;

636 width: 50%;

637 }

638 }

639 }

640

641 .site-index .leaflet-top,

642 .site-export .leaflet-top {

643 top: $lineheight/2 !important;

644 .leaflet-control {

645 margin-top: 0px !important;

646 }

647 }

648

649 .leaflet-popup-scrolled {

650 padding-right: $lineheight;

651 border-bottom: 0px !important;

652 border-top: 0px !important;

653 }

654

655 .leaflet-popup-content-wrapper {

656 border-radius: 4px !important;

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

658 }

659

660 /* Rules for edit menu */

661

662 .menuicon {

663 padding: 0 $lineheight/4;

664 font-weight: normal;

665 display: inline-block;

666 &:hover {

667 text-decoration: none !important;

668 }

669 }

670

671 .menu {

672 display: none;

673 z-index: 10000;

674 position: absolute;

675 background-color: #ffffff;

676 border: 1px solid $keyline;

677 border-top: 0px;

678 ul {

679 margin: 0px;

680 }

681 li {

682 padding: 2px $lineheight/4;

683 border-top: 1px solid #eee;

684 white-space: nowrap;

685 }

686 }

687

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

689

690 #attribution {

691 display: none;

692 }

693

694 .attribution_license,

695 .attribution_project {

696 text-align: left;

697 }

698

699 .attribution_notice {

700 text-align: center;

701 }

702

703 /* Rules for the popout map sidebar */

704

705 #sidebar {

706 display: none;

707 position: relative;

708 float: left;

709 overflow: auto;

710 border-right: 1px solid $keyline;

711 width: 33.3333%;

712 ul {

713 margin-bottom: 0;

714 &:last-child {

715 border-bottom: 1px solid #ccc;

716 }

717 li {

718 margin-bottom: $lineheight/4;

719 &:last-child {

720 margin-bottom: 0;

721 }

722 }

723 }

724 }

725

726 .sidebar_heading {

727 position: relative;

728 padding: $lineheight/2 $lineheight;

729 z-index: 9999;

730 background: $offwhite;

731 border-bottom: 1px solid #ccc;

732 h4 {

733 margin: 0;

734 }

735 }

736

737 .sidebar_close {

738 position: absolute;

739 height: $lineheight;

740 top: 0px;

741 bottom: 0;

742 right: $lineheight;

743 margin: auto;

744 }

745

746 #sidebar_content {

747 position: relative;

748 margin-bottom: 20px;

749 width: 100%;

750 h4 {

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

752 margin-top: $lineheight/2;

753 margin-bottom: 0;

754 border-bottom: 1px solid #ddd;

755 }

756 }

757

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

759

760 #mapkey {

761 .mapkey-table-key img {

762 display: block;

763 margin-left: auto;

764 margin-right: auto;

765 }

766 td {

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

768 }

769 }

770

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

772

773 .search_searching {

774 margin-top: $lineheight/4;

775 margin-bottom: $lineheight/4;

776 }

777

778 .search_results_entry {

779 margin-bottom: 0;

780

781 .search_details {

782 display: block;

783 text-align: right;

784 }

785 }

786

787 .search_results_entry .search_searching {

788 text-align: center;

789 margin: $lineheight auto;

790 width: $lineheight;

791 display: block;

792 }

793

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

795

796 .search_results_error {

797 color: #f00;

798 }

799

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

801

802 #browse_content {

803 position: relative;

804 .browse_show_list.button {

805 position: absolute;

806 left: $lineheight;

807 right: $lineheight;

808 bottom: -40px;

809 margin-bottom: 0;

810 }

811 a.more-details {

812 position: absolute;

813 top: 0;

814 right: $lineheight;

815 }

816 ul li {

817 margin-bottom: 0;

818 }

819 }

820

821 .browse_details {

822 position: relative;

823 }

824

825 .browse_status {

826 display: none;

827 }

828

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

830

831 .export_bounds {

832 text-align: center;

833 }

834

835 .export_area_inputs {

836 margin-bottom: $lineheight/2;

837 input[type="text"] {

838 width: 60px;

839 margin-bottom: 5px;

840 }

841 }

842

843 .export_bound {

844 margin: $lineheight/4;

845 }

846

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

848 width: 100%;

849 }

850

851 #sidebar #marker_inputs li:last-child {

852 margin-bottom: $lineheight/2;

853 }

854

855 #export_osm,

856 #export_mapnik,

857 #export_osmarender {

858 display: none;

859 }

860

861 /* Rules for the main content area */

862

863 #content {

864 padding: $lineheight;

865 position: relative;

866 }

867

868 .site-edit #content,

869 .site-index #content,

870 .site-export #content {

871 position: fixed;

872 padding: 0;

873 top: 30px; bottom: 0;

874 left: 184px; right: 0;

875 border-left: 1px solid #ccc;

876 }

877

878 .wrapper {

879 margin-left: 184px;

880 border-left: 1px solid #ccc;

881 text-align: left;

882 }

883

884 .site-edit #content {

885 top: 30px;

886 }

887

888 #content.maximised {

889 top: 0;

890 left: 0;

891 right: 0;

892 bottom: 0;

893 border: 0;

894 z-index: 1000;

895 }

896

897 #slim_container {

898 width: 100%;

899 }

900

901 #slim_container_content {

902 max-width: 50em;

903 background-color: #FFFFFF;

904 margin: $lineheight/2 auto;

905 padding: 3px;

906 border-radius: 25px;

907 -moz-border-radius: 25px;

908 border: 1px solid #e6e6e6;

909 }

910

911 #slim_content {

912 margin: $lineheight/2;

913 margin-top: 95px;

914 max-width: 50em;

915

916 .content-heading {

917 margin-bottom: 15px;

918 }

919 }

920

921 #slim_header {

922 margin: 30px $lineheight/2;

923 position: absolute;

924 top: 0px;

925 margin-right: $lineheight/4;

926 img {

927 vertical-align: middle;

928 margin-bottom: $lineheight/4;

929 margin-right: $lineheight/4;

930 }

931 }

932

933 .content-heading {

934 position: relative;

935 padding: $lineheight;

936 background: $offwhite;

937 h1, h2 {

938 margin-bottom: $lineheight/2;

939 line-height: 100%;

940 &:last-child {

941 margin-bottom: 0;

942 }

943 }

944 p {

945 margin-top: $lineheight/2;

946 margin-bottom: 0px;

947 }

948 }

949

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

951

952 .content_map {

953 position: relative;

954 width: 45%;

955 height: 400px;

956 border: 1px solid #ccc;

957 margin-bottom: $lineheight;

958 float: right;

959 }

960

961 .content_map #small_map {

962 height: 100%;

963 width: 100%;

964 margin-bottom: $lineheight;

965 }

966

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

968

969 #changeset_list {

970 width: 100%;

971 ul {

972 padding: $lineheight/2 0;

973 margin-bottom: 0px;

974 border-top: 1px solid #ccc;

975 &:last-child {

976 border-bottom: 1px solid #ccc;

977 }

978 }

979 .selected {

980 background: #FFFFC0;

981 }

982 .date,

983 .user {

984 border-left: 1px solid #ccc;

985 padding-left: $lineheight/4;

986 margin-right: $lineheight/4;

987 }

988 }

989

990 #changeset_list_map_wrapper {

991 position: absolute;

992 width: 50%;

993 height: 490px;

994 top: 0;

995 right: 0;

996 }

997

998 #changeset_list_map_wrapper.scrolled {

999 position: fixed;

1000 }

1001

1002 #changeset_list_map {

1003 position: absolute;

1004 bottom: $lineheight;

1005 top: $lineheight;

1006 right: $lineheight;

1007 left: $lineheight;

1008 border: 1px solid #ccc;

1009 }

1010

1011 #changeset_list_map_wrapper.scrolled #changeset_list_map {

1012 margin-left: 93px;

1013 }

1014

1015 /* Rules for the data browser */

1016

1017 .browse-section {

1018 border-top: 1px solid #ccc;

1019 margin-top: $lineheight/2;

1020 padding-top: $lineheight/2;

1021 &:first-child {

1022 margin-top: 0;

1023 }

1024 .warning {

1025 background-color: #ffe0cc;

1026 margin: 0px;

1027 padding: 4px 6px;

1028 max-width: 100%;

1029 }

1030 h4, p {

1031 margin-bottom: $lineheight/4;

1032 }

1033 p, ul, .bbox, .geo {

1034 display: inline-block;

1035 vertical-align: top;

1036 max-width: 65%;

1037 }

1038 ul p {

1039 margin-left: 0;

1040 margin-bottom: 0;

1041 }

1042 h4 {

1043 width: 33.3333%;

1044 display: inline-block;

1045 vertical-align: top;

1046 }

1047 }

1048

1049 .bbox {

1050 div {

1051 width: 33.3333%;

1052 text-align: center;

1053 padding: $lineheight/4 0;

1054 overflow: hidden;

1055 text-overflow: ellipsis;

1056 float: left;

1057 }

1058 .max_lat,

1059 .min_lat {

1060 margin-left: auto;

1061 margin-right: auto;

1062 width: 100%;

1063 }

1064 }

1065

1066 #browse_map .geolink {

1067 display: none;

1068 }

1069

1070 #browse_map .secondary-actions {

1071 margin-bottom: $lineheight/2;

1072 }

1073

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

1075

1076 #trace_list {

1077 font-size: $lineheight/2;

1078 border-width: 0px;

1079 text-align: right;

1080

1081 .trace_summary {

1082 font-size: 12px;

1083 color: gray;

1084 }

1085

1086 .trace_pending {

1087 color: red;

1088 }

1089

1090 .trace_public {

1091 color: green;

1092 }

1093

1094 .trace_identifiable {

1095 color: green;

1096 }

1097

1098 .trace_trackable {

1099 color: red;

1100 }

1101

1102 .trace_private {

1103 color: red;

1104 }

1105 }

1106

1107 /* Rules for the user profile page */

1108

1109 #userinformation {

1110

1111 min-height: 100px;

1112 .userinformation-inner {

1113 float: left;

1114 }

1115 h2 {

1116 margin-top: 0;

1117 }

1118 .user-description {

1119 width: 100%;

1120 clear: both;

1121 }

1122 .deemphasize {

1123 margin: 0;

1124 }

1125 }

1126

1127 .admin-user-info small {

1128 margin-bottom: $lineheight/2;

1129 display: inline;

1130 margin-right: $lineheight;

1131 }

1132

1133 .activity-block {

1134 clear: left;

1135 border-bottom: 1px solid #ccc;

1136 padding-bottom: $lineheight;

1137 float: left;

1138 h3 {

1139 margin-bottom: $lineheight/2;

1140 }

1141 }

1142

1143 .contact-activity {

1144 margin-top: $lineheight;

1145 width: 100%;

1146 }

1147

1148 .activity-details p {

1149 margin-left: 70px;

1150 margin-bottom: 0;

1151 }

1152

1153 #friends-container .contact-activity ul {

1154 margin-left: 70px;

1155 }

1156

1157 .user-view {

1158 p#no_home_location {

1159 margin: $lineheight;

1160 }

1161 .user_thumbnail {

1162 margin-top: $lineheight/4;

1163 float: left;

1164 }

1165 }

1166

1167 /* Rules for the user map */

1168

1169 .content_map .leaflet-popup-content {

1170 margin: $lineheight/2;

1171 min-height: 50px;

1172 }

1173

1174 /* Rules for user popups on maps */

1175

1176 .user_popup {

1177 min-width: 200px;

1178 p {

1179 padding: 0 0 5px 0;

1180 margin-top: 0 0 0 60px;

1181 font-size: 12px;

1182 }

1183 img.user_thumbnail {

1184 float: left;

1185 margin: 0 $lineheight/2 0 0;

1186 }

1187 }

1188

1189 /* Rules for the user list */

1190

1191 #user_list {

1192 font-size: $lineheight/2;

1193 width: 100%;

1194

1195 tr {

1196 vertical-align: middle;

1197 }

1198

1199 p {

1200 margin-top: 0px;

1201 margin-bottom: 0px;

1202 }

1203 }

1204

1205 #user_list_actions {

1206 float: right;

1207 margin-top: $lineheight/2;

1208 }

1209

1210 /* Rules for the diary list page */

1211

1212 .diary_entry-list img.user_thumbnail {

1213 float: left;

1214 }

1215

1216 .diary_post {

1217 max-width: 740px;

1218 position: relative;

1219 margin-top: $lineheight/2;

1220 padding-top: $lineheight;

1221 border-top: 1px solid #ccc;

1222

1223 &:first-child {

1224 margin-top: 0;

1225 border-top: 0;

1226 padding-top: 0;

1227 }

1228 h1, h2 {

1229 font-size: 21px;

1230 line-height: 1em;

1231 }

1232 small.deemphasize {

1233 float: left;

1234 display: block;

1235 }

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

1237 }

1238

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

1240 display: inline;

1241 }

1242

1243 #content .post_heading {

1244 margin-bottom: $lineheight;

1245 h2 {

1246 margin-top: 0;

1247 margin-bottom: $lineheight/2;

1248 font-size: 24px;

1249 }

1250 }

1251

1252 /* Rules for the diary entry page */

1253

1254 .diary_entry {

1255 #map {

1256 position: relative;

1257 width: 90%;

1258 height: 400px;

1259 border: 1px solid #ccc;

1260 display: none;

1261 margin-bottom: $lineheight;

1262 }

1263 #newcomment {

1264 border-top: 1px solid #ccc;

1265 padding-top: $lineheight;

1266 margin-top: $lineheight/2;

1267 }

1268 .comments {

1269 max-width: 740px;

1270 }

1271 .diary-comment {

1272 margin-top: $lineheight/2;

1273 border-top: 1px dashed #ccc;

1274 padding-top: $lineheight/2;

1275 &:first-child {

1276 margin-top: $lineheight;

1277 padding-top: $lineheight;

1278 border-top: 1px solid #ccc;

1279 }

1280 p {

1281 margin-bottom: $lineheight/2;

1282 }

1283 .comment-heading {

1284 margin-bottom: 0;

1285 margin-top: 0;

1286 }

1287 }

1288 }

1289

1290 .diary_entry-view img.user_thumbnail {

1291 float: left;

1292 }

1293

1294 /* Rules for the login page */

1295

1296 #login_openid_buttons {

1297 margin-bottom: 0;

1298 }

1299

1300 #login_openid_buttons li {

1301 float: left;

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

1303 }

1304

1305 /* Rules for the account confirmation page */

1306

1307 #terms {

1308 .legale {

1309 border: 1px solid #ccc;

1310 padding: $lineheight;

1311 margin-bottom: $lineheight;

1312 overflow: auto;

1313 height: 10em;

1314

1315 &:p#last {

1316 margin-bottom: 0px;

1317 }

1318

1319 &:ol {

1320 margin-bottom: 0px;

1321 }

1322

1323 &:img {

1324 display: block;

1325 margin: $lineheight auto inherit auto;

1326 }

1327 }

1328

1329 form.sign {

1330 input[type=submit] {

1331 float: left;

1332 }

1333 #decline {

1334 background: $grey;

1335 &:hover {

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

1337 }

1338 }

1339 }

1340 fieldset {

1341 margin-bottom: $lineheight;

1342 }

1343 #contributorGuidance {

1344 background-color: $offwhite;

1345 border-radius: 4px;

1346 -moz-border-radius: 4px;

1347 }

1348 .signing-buttons {

1349 height: 50px;

1350 }

1351 }

1352

1353 /* Rules for the account settings page */

1354

1355 #accountForm .user_map {

1356 position: relative;

1357 width: 500px;

1358 height: 400px;

1359 border: 1px solid #ccc;

1360 }

1361

1362 #accountForm .user_image {

1363 margin-bottom: 0;

1364 }

1365

1366 #accountForm #user_image {

1367 margin-left: 20px;

1368 }

1369

1370 #accountForm ul.accountImage-options {

1371 margin-left: 120px;

1372 }

1373

1374 .nohome .location {

1375 display: none;

1376 }

1377

1378 #homerow .message {

1379 display: none;

1380 }

1381

1382 .nohome .message {

1383 display: inline !important;

1384 }

1385

1386 .content_map.settings_map {

1387 width: 50%;

1388 float: none;

1389 }

1390

1391 /* Rules for the oauth settings page */

1392

1393 .oauth_clients .buttons .oauth-edit {

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

1395 }

1396

1397 .oauth_clients .buttons .oauth-delete {

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

1399 }

1400

1401 /* Rules for messages pages */

1402

1403 .messages {

1404 width: 100%;

1405 border: 1px solid #ddd;

1406

1407 input[type="submit"] {

1408 margin: auto;

1409 }

1410 tbody tr {

1411 border-top: 1px solid #ccc;

1412 }

1413

1414 .inbox-row {

1415 background: #f8f8ff;

1416 }

1417

1418 .inbox-row-unread {

1419 background:#CBEEA7;

1420 }

1421

1422 .right {

1423 float: right;

1424 }

1425

1426 tr td,

1427 tr th {

1428 padding: $lineheight/4;

1429 }

1430 p:last-child,

1431 h2:last-child,

1432 h3:last-child,

1433 ol:last-child,

1434 ul:last-child {

1435 margin-bottom:0;

1436 }

1437 tr td {

1438 height: 30px;

1439 border-right: 1px solid $keyline;

1440 }

1441 }

1442

1443 .inbox-row .inbox-mark-read {

1444 display: none;

1445 }

1446

1447 .info-line {

1448 margin-bottom: $lineheight;

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

1450 border-bottom: 1px solid #ccc;

1451

1452 form, form div {

1453 display: inline;

1454 }

1455 }

1456

1457 .info-line .user_thumbnail_tiny {

1458 vertical-align: middle;

1459 }

1460

1461 .inbox-mark-unread,

1462 .inbox-mark-read,

1463 .inbox-delete {

1464 width: 1%;

1465 }

1466

1467 .inbox-row-unread .inbox-mark-unread {

1468 display: none;

1469 }

1470

1471 .message-read .message-buttons {

1472 margin-top: $lineheight;

1473 padding-top: $lineheight;

1474 border-top: 1px solid $keyline;

1475 }

1476

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

1478 border-radius: 0;

1479 }

1480

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

1482

1483 .flash {

1484 padding: $lineheight;

1485 &#error {

1486 background-color: #ff7070;

1487 }

1488 &#warning {

1489 background-color: #ffe0cc;

1490 }

1491 &#notice {

1492 background-color: #CBEEA7;

1493 }

1494 }

1495

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

1497

1498 .field_with_errors {

1499 padding: 2px;

1500 background-color: #ff7070;

1501 display: table;

1502 }

1503

1504 /* Rules for rails validation error boxes */

1505

1506 #errorExplanation {

1507 width: 400px;

1508 border: 2px solid #ff7070;

1509 padding: 0 $lineheight/2;

1510 margin-bottom: $lineheight;

1511 background-color: #f0f0f0;

1512

1513 h2 {

1514 margin: 0 -10px 10px -10px;

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

1516 font-weight: bold;

1517 font-size: 12px;

1518 background-color: #c00;

1519 color: #fff;

1520 text-align: left;

1521 }

1522

1523 p {

1524 color: #333;

1525 margin-bottom: 0px;

1526 padding: $lineheight/4;

1527 }

1528

1529 ul {

1530 padding-left: $lineheight;

1531

1532 li {

1533 font-size: 12px;

1534 list-style: disc;

1535 }

1536 }

1537 }

1538

1539 /* Rules for forms */

1540

1541 .standard-form {

1542 fieldset {

1543 margin-bottom: $lineheight;

1544 }

1545 label.standard-label {

1546 display: block;

1547 margin-bottom: $lineheight/4;

1548 font-size: $typeheight;

1549 font-weight: bold;

1550 line-height: 1.5;

1551 }

1552 label.standard-label.secondary {

1553 display: inline-block;

1554 font-weight: normal;

1555 }

1556 .form-help {

1557 font-weight: normal;

1558 }

1559 .form-column {

1560 float: left;

1561 margin-right: 20px;

1562 }

1563 .form-divider {

1564 margin-top: $lineheight;

1565 padding-top: $lineheight;

1566 border-top: 1px solid $keyline;

1567 }

1568 .form-row {

1569 margin-bottom: $lineheight/2;

1570 }

1571 .form-list {

1572 margin-bottom: 0;

1573 }

1574 .form-list li {

1575 margin-bottom: 5px;

1576 }

1577 input[type="checkbox"],

1578 input[type="radio"] {

1579 float: left;

1580 margin-top: 5px;

1581 }

1582 }

1583

1584 #remember_me_openid {

1585 display: block;

1586 }

1587

1588 input[type="checkbox"],

1589 input[type="radio"] {

1590 margin-right: 5px;

1591 }

1592

1593 input[type="text"],

1594 input[type="email"],

1595 input[type="url"],

1596 input[type="password"],

1597 textarea {

1598 border: 1px solid #ccc;

1599 padding: 2px 5px;

1600 margin: 0;

1601 width: 200px;

1602 }

1603

1604 textarea {

1605 padding: 5px;

1606 width: 100%;

1607 height: 100% !important;

1608 }

1609

1610 /* Rules for user images */

1611

1612 img.user_image {

1613 max-width: 100px;

1614 max-height: 100px;

1615 border: 1px solid #ccc;

1616 margin-bottom: $lineheight;

1617 float: left;

1618 margin-right: $lineheight;

1619 }

1620

1621 img.user_thumbnail {

1622 max-width: 50px;

1623 max-height: 50px;

1624 border: 1px solid #ccc;

1625 margin-right: $lineheight;

1626 }

1627

1628 img.user_thumbnail_tiny {

1629 max-width: 25px;

1630 max-height: 25px;

1631 border: 1px solid #ccc;

1632 }

1633

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

1635

1636 .nowrap {

1637 white-space: nowrap;

1638 }

1639

1640 /* Rules for geo microformats */

1641

1642 abbr.geo {

1643 border-bottom: none;

1644 }

1645

1646 /* Rules for RSS buttons */

1647

1648 .rsssmall {

1649 position: relative;

1650 top: 5px;

1651 }

1652

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

1654

1655 ul.secondary-actions {

1656 font-style: normal;

1657 margin-bottom: 0;

1658 margin-left: 0;

1659 &.pager {

1660 display: inline-block;

1661 margin-right: 60px;

1662 }

1663 li {

1664 display: block;

1665 float: left;

1666 list-style: none;

1667 border-left: 1px solid #ccc;

1668 padding-left: $lineheight/4;

1669 margin-right: $lineheight/4;

1670 &:first-child {

1671 border-left: 0;

1672 padding-left: 0;

1673 }

1674 &:last-child {

1675 margin-right: 0px;

1676 }

1677 }

1678 }

1679

1680 /* Utility for managing inner content areas */

1681

1682 .inner22 { padding: $lineheight;}

1683

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

1685

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

1687

1688 .inner02 { padding: 0 $lineheight;}

1689

1690 /* Utility for general button styles */

1691

1692 input[type="button"],

1693 input[type="submit"],

1694 input[type="reset"],

1695 a.button {

1696 cursor: pointer;

1697 border: 0;

1698 display: inline-block;

1699 line-height: 20px;

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

1701 min-width: 120px;

1702 margin: 0 0 $lineheight/2 0;

1703 color: white;

1704 background: $blue;

1705 text-align: center;

1706 border-radius: 2px;

1707 -moz-border-radius: 2px;

1708 &:hover {

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

1710 text-decoration: none;

1711 }

1712 &.deemphasize {

1713 background: $lightblue;

1714 &:hover {

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

1716 }

1717 }

1718 &:disabled {

1719 background: $lightblue;

1720 }

1721 &:last-child {

1722 margin-bottom: 0;

1723 }

1724 }

1725

1726 .buttons {

1727 min-width: 200px;

1728 input[type="submit"],

1729 input[type="button"],

1730 input[type="reset"],

1731 .button {

1732 box-sizing: border-box;

1733 float: left;

1734 border-radius: 0;

1735 margin:0;

1736 min-width: 100px;

1737 max-width: 150px;

1738 border-right:1px solid white;

1739 }

1740 input:first-child,

1741 .button:first-child {

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

1743 }

1744 input:last-child,

1745 .button:last-child {

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

1747 border-right-width: 0;

1748 }

1749 input:only-child,

1750 .button:only-child,

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

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

1753 border-radius:2px;

1754 border-right-width: 0;

1755 }

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

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

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

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

1760 border-right-width: 0;

1761 }

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

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

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

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

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

1767 }

1768 }

1769

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

1771

1772 .table0,

1773 .item0 {

1774 background: $offwhite;

1775 }

1776

1777 .table1,

1778 .item1 {

1779 background: #fff;

1780 }

1781

1782 /* Rules for OpenID logo */

1783

1784 .openid_logo {

1785 vertical-align: text-bottom;

1786 border: 0;

1787 }

1788

1789 /* Rules for rich text */

1790

1791 .richtext,

1792 .prose {

1793 h1, h2 {

1794 padding-bottom: $lineheight/2;

1795 border-bottom: 1px dashed #cccccc;

1796 margin-bottom: $lineheight/2;

1797 }

1798

1799 h1 {

1800 font-size: 24px;

1801 }

1802

1803 h2 {

1804 font-size: 18px;

1805 }

1806

1807 h3 {

1808 font-size: $typeheight;

1809 }

1810

1811 code {

1812 font-size: 13px;

1813 background: #e8e8e8;

1814 padding: 2px 3px;

1815 }

1816

1817 pre {

1818 font-size: 13px;

1819 background: #e8e8e8;

1820 padding: 2px 3px;

1821

1822 code {

1823 padding: 0;

1824 }

1825 }

1826

1827 img {

1828 padding: $lineheight;

1829 background-color: $offwhite;

1830 display: block;

1831 max-width: 100%;

1832 margin: auto;

1833 }

1834

1835 blockquote {

1836 border-left: $lineheight solid $offwhite;

1837 padding-left: $lineheight;

1838 margin: 0;

1839 color: #7E7E7E;

1840 }

1841

1842 ul, ol {

1843 font-style: italic;

1844 padding-left: $lineheight;

1845 margin-bottom: $lineheight;

1846 margin-left: $lineheight;

1847 }

1848

1849 ul li {

1850 list-style: disc;

1851 }

1852

1853 ol li {

1854 list-style: decimal;

1855 }

1856 }

1857

1858 .diary_post .richtext {

1859 margin-top: $lineheight;

1860 }

1861

1862 .comments .richtext {

1863 margin-left: 70px;

1864 margin-top: 0;

1865 }

1866

1867 /* Rules for rich text editors */

1868

1869 .richtext_container {

1870 margin-bottom: $lineheight;

1871

1872 .richtext_content {

1873 width: 50%;

1874 display: inline-block;

1875 vertical-align: top;

1876

1877 .richtext_preview {

1878 display: inline-block;

1879 padding: $lineheight;

1880 background-color: $offwhite;

1881 overflow-x: auto;

1882

1883 &.loading {

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

1885 background-repeat: no-repeat;

1886 background-position: center;

1887 }

1888

1889 > :first-child {

1890 margin-top: 0px;

1891 }

1892 }

1893 }

1894

1895 .richtext_help {

1896 display: inline-block;

1897 vertical-align: top;

1898 margin-left: 15px;

1899 background-color: #f8f8ff;

1900 padding: $lineheight/2;

1901 width: 220px;

1902

1903 ul {

1904 margin-bottom: 0;

1905 }

1906

1907 h4.heading, li {

1908 border-bottom: 1px solid #ccc;

1909 margin-bottom: $lineheight/4;

1910 padding-bottom: $lineheight/4;

1911 }

1912

1913 li h4, li span, li p {

1914 display: inline-block;

1915 vertical-align: top;

1916 font-size: 11px;

1917 }

1918

1919 li h4 {

1920 width: 40%;

1921 margin: 0;

1922 }

1923

1924 li span, li p {

1925 width: 50%;

1926 margin-left: $lineheight/2;

1927 margin-bottom: $lineheight/4;

1928 white-space: nowrap;

1929 }

1930 }

1931 }

1932

1933 /* Rules for the user notes list */

1934

1935 .note_list {

1936 tr.creator {

1937 background-color: #eeeeee;

1938 }

1939

1940 td {

1941 padding: 3px;

1942 }

1943

1944 p {

1945 margin-bottom: 0px;

1946 }

1947 }

1948

1949 /* Rules for the notes interface */

1950

1951 .leaflet-popup-content .note {

1952 padding-top: $lineheight/2;

1953 }

1954

1955 .leaflet-popup-content .note {

1956 h2 {

1957 margin-bottom: $lineheight/2;

1958 }

1959

1960 div {

1961 margin-top: $lineheight/2;

1962 }

1963

1964 .permalink {

1965 position: absolute;

1966 top: $lineheight/4;

1967 left: $lineheight/4;

1968 min-width: 15px;

1969 min-height: 15px;

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

1971 }

1972

1973 .permalink span {

1974 display: none;

1975 padding-left: $lineheight;

1976 }

1977

1978 .permalink:hover span {

1979 display: block;

1980 }

1981

1982 .warning {

1983 display: block;

1984 background-color: #ffe0cc;

1985 padding: 4px 6px;

1986 margin-bottom: $lineheight/2;

1987 }

1988

1989 .comment_body {

1990 margin-top: 2px;

1991 margin-bottom: 2px;

1992

1993 p {

1994 margin-top: 0px;

1995 margin-bottom: 0px;

1996 }

1997 }

1998

1999 .comment {

2000 width: 100%;

2001 height: 100px;

2002 }

2003

2004 .buttons {

2005 margin-top: $lineheight/4;

2006 text-align: right;

2007 }

2008 }

2009

2010 /*

2011 * Rules for the iD editor

2012 */

2013 .id-embed {

2014 width: 100%;

2015 height: 100%;

2016 }

2017

2018 /* Rules for rotating sidebar ads */

2019 .ad-container {

2020 display: block;

2021 height: 120px;

2022 overflow: hidden;

2023 position: relative;

2024 border-bottom: 1px solid #ccc;

2025 }

2026

2027 .ad {

2028 height: 100px;

2029 border: 0;

2030 background: #fff;

2031 }