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 #map-ui {

572 position: absolute;

573 display: none;

574 right: 0;

575 width: 250px;

576 height: 100%;

577 background: white;

578 border-left: 1px solid #CCC;

579 overflow: auto;

580 }

581

582 #map-ui {

583 section {

584 border-bottom: 1px solid #DDD;

585 padding: 15px;

586 }

587

588 a.close-button {

589 float: right;

590 padding:5px;

591 font-size:20px;

592 line-height:10px;

593 color:#222;

594 border:1px solid #ddd;

595 }

596

597 li {

598 border-radius: 4px;

599 overflow: hidden;

600 margin-bottom: 10px;

601 }

602

603 label {

604 display: block;

605 padding: 5px;

606 background-color: #eee;

607 cursor: pointer;

608 }

609

610 li.active label {

611 background-color: #ccc;

612 }

613

614 input[type=text] {

615 width:220px;

616 }

617

618 .base-layers {

619 .leaflet-container {

620 width: 100%;

621 height: 50px;

622 cursor: pointer;

623 }

624 }

625 }

626

627 .share-ui {

628 .share-link {

629 li {

630 display: inline-block;

631 width: 50%;

632 }

633 }

634 }

635

636 .site-index .leaflet-top,

637 .site-export .leaflet-top {

638 top: $lineheight/2 !important;

639 .leaflet-control {

640 margin-top: 0px !important;

641 }

642 }

643

644 .leaflet-popup-scrolled {

645 padding-right: $lineheight;

646 border-bottom: 0px !important;

647 border-top: 0px !important;

648 }

649

650 .leaflet-popup-content-wrapper {

651 border-radius: 4px !important;

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

653 }

654

655 /* Rules for edit menu */

656

657 .menuicon {

658 padding: 0 $lineheight/4;

659 font-weight: normal;

660 display: inline-block;

661 &:hover {

662 text-decoration: none !important;

663 }

664 }

665

666 .menu {

667 display: none;

668 z-index: 10000;

669 position: absolute;

670 background-color: #ffffff;

671 border: 1px solid $keyline;

672 border-top: 0px;

673 ul {

674 margin: 0px;

675 }

676 li {

677 padding: 2px $lineheight/4;

678 border-top: 1px solid #eee;

679 white-space: nowrap;

680 }

681 }

682

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

684

685 #attribution {

686 display: none;

687 }

688

689 .attribution_license,

690 .attribution_project {

691 text-align: left;

692 }

693

694 .attribution_notice {

695 text-align: center;

696 }

697

698 /* Rules for the popout map sidebar */

699

700 #sidebar {

701 display: none;

702 position: absolute;

703 overflow: auto;

704 top: 0px;

705 bottom: 0px;

706 left: 0px;

707 border-right: 1px solid $keyline;

708 width: 33.3333%;

709 ul {

710 margin-bottom: 0;

711 &:last-child {

712 border-bottom: 1px solid #ccc;

713 }

714 li {

715 margin-bottom: $lineheight/4;

716 &:last-child {

717 margin-bottom: 0;

718 }

719 }

720 }

721 }

722

723 .sidebar_heading {

724 position: relative;

725 padding: $lineheight/2 $lineheight;

726 z-index: 9999;

727 background: $offwhite;

728 border-bottom: 1px solid #ccc;

729 h4 {

730 margin: 0;

731 }

732 }

733

734 .sidebar_close {

735 position: absolute;

736 height: $lineheight;

737 top: 0px;

738 bottom: 0;

739 right: $lineheight;

740 margin: auto;

741 }

742

743 #sidebar_content {

744 position: relative;

745 margin-bottom: 20px;

746 width: 100%;

747 h4 {

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

749 margin-top: $lineheight/2;

750 margin-bottom: 0;

751 border-bottom: 1px solid #ddd;

752 }

753 }

754

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

756

757 #mapkey {

758 .mapkey-table-key img {

759 display: block;

760 margin-left: auto;

761 margin-right: auto;

762 }

763 td {

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

765 }

766 }

767

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

769

770 .search_searching {

771 margin-top: $lineheight/4;

772 margin-bottom: $lineheight/4;

773 }

774

775 .search_results_entry {

776 margin-bottom: 0;

777

778 .search_details {

779 display: block;

780 text-align: right;

781 }

782 }

783

784 .search_results_entry .search_searching {

785 text-align: center;

786 margin: $lineheight auto;

787 width: $lineheight;

788 display: block;

789 }

790

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

792

793 .search_results_error {

794 color: #f00;

795 }

796

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

798

799 #browse_content {

800 position: relative;

801 .browse_show_list.button {

802 position: absolute;

803 left: $lineheight;

804 right: $lineheight;

805 bottom: -40px;

806 margin-bottom: 0;

807 }

808 a.more-details {

809 position: absolute;

810 top: 0;

811 right: $lineheight;

812 }

813 ul li {

814 margin-bottom: 0;

815 }

816 }

817

818 .browse_details {

819 position: relative;

820 }

821

822 .browse_status {

823 display: none;

824 }

825

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

827

828 .export_bounds {

829 text-align: center;

830 }

831

832 .export_area_inputs {

833 margin-bottom: $lineheight/2;

834 input[type="text"] {

835 width: 60px;

836 margin-bottom: 5px;

837 }

838 }

839

840 .export_bound {

841 margin: $lineheight/4;

842 }

843

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

845 width: 100%;

846 }

847

848 #sidebar #marker_inputs li:last-child {

849 margin-bottom: $lineheight/2;

850 }

851

852 #export_osm,

853 #export_mapnik,

854 #export_osmarender {

855 display: none;

856 }

857

858 /* Rules for the main content area */

859

860 #content {

861 padding: $lineheight;

862 position: relative;

863 }

864

865 .site-edit #content,

866 .site-index #content,

867 .site-export #content {

868 position: fixed;

869 padding: 0;

870 top: 30px; bottom: 0;

871 left: 184px; right: 0;

872 border-left: 1px solid #ccc;

873 }

874

875 .wrapper {

876 margin-left: 184px;

877 border-left: 1px solid #ccc;

878 text-align: left;

879 }

880

881 .site-edit #content {

882 top: 30px;

883 }

884

885 #content.maximised {

886 top: 0;

887 left: 0;

888 right: 0;

889 bottom: 0;

890 border: 0;

891 z-index: 1000;

892 }

893

894 #slim_container {

895 width: 100%;

896 }

897

898 #slim_container_content {

899 max-width: 50em;

900 background-color: #FFFFFF;

901 margin: $lineheight/2 auto;

902 padding: 3px;

903 border-radius: 25px;

904 -moz-border-radius: 25px;

905 border: 1px solid #e6e6e6;

906 }

907

908 #slim_content {

909 margin: $lineheight/2;

910 margin-top: 95px;

911 max-width: 50em;

912

913 .content-heading {

914 margin-bottom: 15px;

915 }

916 }

917

918 #slim_header {

919 margin: 30px $lineheight/2;

920 position: absolute;

921 top: 0px;

922 margin-right: $lineheight/4;

923 img {

924 vertical-align: middle;

925 margin-bottom: $lineheight/4;

926 margin-right: $lineheight/4;

927 }

928 }

929

930 .content-heading {

931 position: relative;

932 padding: $lineheight;

933 background: $offwhite;

934 h1, h2 {

935 margin-bottom: $lineheight/2;

936 line-height: 100%;

937 &:last-child {

938 margin-bottom: 0;

939 }

940 }

941 p {

942 margin-top: $lineheight/2;

943 margin-bottom: 0px;

944 }

945 }

946

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

948

949 .content_map {

950 position: relative;

951 width: 45%;

952 height: 400px;

953 border: 1px solid #ccc;

954 margin-bottom: $lineheight;

955 float: right;

956 }

957

958 .content_map #small_map {

959 height: 100%;

960 width: 100%;

961 margin-bottom: $lineheight;

962 }

963

964 /* Rules for the home page */

965

966 .site-export #map,

967 .site-index #map {

968 position: absolute;

969 top: 0px;

970 bottom: 0px;

971 left: 0px;

972 right: 0px;

973 }

974

975 /* Rules for the edit page */

976

977 .site-edit #map {

978 position: absolute;

979 top: 0px;

980 bottom: 0px;

981 left: 0px;

982 right: 0px;

983 overflow: hidden;

984 }

985

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

987

988 #changeset_list {

989 width: 100%;

990 ul {

991 padding: $lineheight/2 0;

992 margin-bottom: 0px;

993 border-top: 1px solid #ccc;

994 &:last-child {

995 border-bottom: 1px solid #ccc;

996 }

997 }

998 .selected {

999 background: #FFFFC0;

1000 }

1001 .date,

1002 .user {

1003 border-left: 1px solid #ccc;

1004 padding-left: $lineheight/4;

1005 margin-right: $lineheight/4;

1006 }

1007 }

1008

1009 #changeset_list_map_wrapper {

1010 position: absolute;

1011 width: 50%;

1012 height: 490px;

1013 top: 0;

1014 right: 0;

1015 }

1016

1017 #changeset_list_map_wrapper.scrolled {

1018 position: fixed;

1019 }

1020

1021 #changeset_list_map {

1022 position: absolute;

1023 bottom: $lineheight;

1024 top: $lineheight;

1025 right: $lineheight;

1026 left: $lineheight;

1027 border: 1px solid #ccc;

1028 }

1029

1030 #changeset_list_map_wrapper.scrolled #changeset_list_map {

1031 margin-left: 93px;

1032 }

1033

1034 /* Rules for the data browser */

1035

1036 .browse-section {

1037 border-top: 1px solid #ccc;

1038 margin-top: $lineheight/2;

1039 padding-top: $lineheight/2;

1040 &:first-child {

1041 margin-top: 0;

1042 }

1043 .warning {

1044 background-color: #ffe0cc;

1045 margin: 0px;

1046 padding: 4px 6px;

1047 max-width: 100%;

1048 }

1049 h4, p {

1050 margin-bottom: $lineheight/4;

1051 }

1052 p, ul, .bbox, .geo {

1053 display: inline-block;

1054 vertical-align: top;

1055 max-width: 65%;

1056 }

1057 ul p {

1058 margin-left: 0;

1059 margin-bottom: 0;

1060 }

1061 h4 {

1062 width: 33.3333%;

1063 display: inline-block;

1064 vertical-align: top;

1065 }

1066 }

1067

1068 .bbox {

1069 div {

1070 width: 33.3333%;

1071 text-align: center;

1072 padding: $lineheight/4 0;

1073 overflow: hidden;

1074 text-overflow: ellipsis;

1075 float: left;

1076 }

1077 .max_lat,

1078 .min_lat {

1079 margin-left: auto;

1080 margin-right: auto;

1081 width: 100%;

1082 }

1083 }

1084

1085 #browse_map .geolink {

1086 display: none;

1087 }

1088

1089 #browse_map .secondary-actions {

1090 margin-bottom: $lineheight/2;

1091 }

1092

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

1094

1095 #trace_list {

1096 font-size: $lineheight/2;

1097 border-width: 0px;

1098 text-align: right;

1099

1100 .trace_summary {

1101 font-size: 12px;

1102 color: gray;

1103 }

1104

1105 .trace_pending {

1106 color: red;

1107 }

1108

1109 .trace_public {

1110 color: green;

1111 }

1112

1113 .trace_identifiable {

1114 color: green;

1115 }

1116

1117 .trace_trackable {

1118 color: red;

1119 }

1120

1121 .trace_private {

1122 color: red;

1123 }

1124 }

1125

1126 /* Rules for the user profile page */

1127

1128 #userinformation {

1129

1130 min-height: 100px;

1131 .userinformation-inner {

1132 float: left;

1133 }

1134 h2 {

1135 margin-top: 0;

1136 }

1137 .user-description {

1138 width: 100%;

1139 clear: both;

1140 }

1141 .deemphasize {

1142 margin: 0;

1143 }

1144 }

1145

1146 .admin-user-info small {

1147 margin-bottom: $lineheight/2;

1148 display: inline;

1149 margin-right: $lineheight;

1150 }

1151

1152 .activity-block {

1153 clear: left;

1154 border-bottom: 1px solid #ccc;

1155 padding-bottom: $lineheight;

1156 float: left;

1157 h3 {

1158 margin-bottom: $lineheight/2;

1159 }

1160 }

1161

1162 .contact-activity {

1163 margin-top: $lineheight;

1164 width: 100%;

1165 }

1166

1167 .activity-details p {

1168 margin-left: 70px;

1169 margin-bottom: 0;

1170 }

1171

1172 #friends-container .contact-activity ul {

1173 margin-left: 70px;

1174 }

1175

1176 .user-view {

1177 p#no_home_location {

1178 margin: $lineheight;

1179 }

1180 .user_thumbnail {

1181 margin-top: $lineheight/4;

1182 float: left;

1183 }

1184 }

1185

1186 /* Rules for the user map */

1187

1188 .content_map .leaflet-popup-content {

1189 margin: $lineheight/2;

1190 min-height: 50px;

1191 }

1192

1193 /* Rules for user popups on maps */

1194

1195 .user_popup {

1196 min-width: 200px;

1197 p {

1198 padding: 0 0 5px 0;

1199 margin-top: 0 0 0 60px;

1200 font-size: 12px;

1201 }

1202 img.user_thumbnail {

1203 float: left;

1204 margin: 0 $lineheight/2 0 0;

1205 }

1206 }

1207

1208 /* Rules for the user list */

1209

1210 #user_list {

1211 font-size: $lineheight/2;

1212 width: 100%;

1213

1214 tr {

1215 vertical-align: middle;

1216 }

1217

1218 p {

1219 margin-top: 0px;

1220 margin-bottom: 0px;

1221 }

1222 }

1223

1224 #user_list_actions {

1225 float: right;

1226 margin-top: $lineheight/2;

1227 }

1228

1229 /* Rules for the diary list page */

1230

1231 .diary_entry-list img.user_thumbnail {

1232 float: left;

1233 }

1234

1235 .diary_post {

1236 max-width: 740px;

1237 position: relative;

1238 margin-top: $lineheight/2;

1239 padding-top: $lineheight;

1240 border-top: 1px solid #ccc;

1241

1242 &:first-child {

1243 margin-top: 0;

1244 border-top: 0;

1245 padding-top: 0;

1246 }

1247 h1, h2 {

1248 font-size: 21px;

1249 line-height: 1em;

1250 }

1251 small.deemphasize {

1252 float: left;

1253 display: block;

1254 }

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

1256 }

1257

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

1259 display: inline;

1260 }

1261

1262 #content .post_heading {

1263 margin-bottom: $lineheight;

1264 h2 {

1265 margin-top: 0;

1266 margin-bottom: $lineheight/2;

1267 font-size: 24px;

1268 }

1269 }

1270

1271 /* Rules for the diary entry page */

1272

1273 .diary_entry {

1274 #map {

1275 position: relative;

1276 width: 90%;

1277 height: 400px;

1278 border: 1px solid #ccc;

1279 display: none;

1280 margin-bottom: $lineheight;

1281 }

1282 #newcomment {

1283 border-top: 1px solid #ccc;

1284 padding-top: $lineheight;

1285 margin-top: $lineheight/2;

1286 }

1287 .comments {

1288 max-width: 740px;

1289 }

1290 .diary-comment {

1291 margin-top: $lineheight/2;

1292 border-top: 1px dashed #ccc;

1293 padding-top: $lineheight/2;

1294 &:first-child {

1295 margin-top: $lineheight;

1296 padding-top: $lineheight;

1297 border-top: 1px solid #ccc;

1298 }

1299 p {

1300 margin-bottom: $lineheight/2;

1301 }

1302 .comment-heading {

1303 margin-bottom: 0;

1304 margin-top: 0;

1305 }

1306 }

1307 }

1308

1309 .diary_entry-view img.user_thumbnail {

1310 float: left;

1311 }

1312

1313 /* Rules for the login page */

1314

1315 #login_openid_buttons {

1316 margin-bottom: 0;

1317 }

1318

1319 #login_openid_buttons li {

1320 float: left;

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

1322 }

1323

1324 /* Rules for the account confirmation page */

1325

1326 #terms {

1327 .legale {

1328 border: 1px solid #ccc;

1329 padding: $lineheight;

1330 margin-bottom: $lineheight;

1331 overflow: auto;

1332 height: 10em;

1333

1334 &:p#last {

1335 margin-bottom: 0px;

1336 }

1337

1338 &:ol {

1339 margin-bottom: 0px;

1340 }

1341

1342 &:img {

1343 display: block;

1344 margin: $lineheight auto inherit auto;

1345 }

1346 }

1347

1348 form.sign {

1349 input[type=submit] {

1350 float: left;

1351 }

1352 #decline {

1353 background: $grey;

1354 &:hover {

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

1356 }

1357 }

1358 }

1359 fieldset {

1360 margin-bottom: $lineheight;

1361 }

1362 #contributorGuidance {

1363 background-color: $offwhite;

1364 border-radius: 4px;

1365 -moz-border-radius: 4px;

1366 }

1367 .signing-buttons {

1368 height: 50px;

1369 }

1370 }

1371

1372 /* Rules for the account settings page */

1373

1374 #accountForm .user_map {

1375 position: relative;

1376 width: 500px;

1377 height: 400px;

1378 border: 1px solid #ccc;

1379 }

1380

1381 #accountForm .user_image {

1382 margin-bottom: 0;

1383 }

1384

1385 #accountForm #user_image {

1386 margin-left: 20px;

1387 }

1388

1389 #accountForm ul.accountImage-options {

1390 margin-left: 120px;

1391 }

1392

1393 .nohome .location {

1394 display: none;

1395 }

1396

1397 #homerow .message {

1398 display: none;

1399 }

1400

1401 .nohome .message {

1402 display: inline !important;

1403 }

1404

1405 .content_map.settings_map {

1406 width: 50%;

1407 float: none;

1408 }

1409

1410 /* Rules for the oauth settings page */

1411

1412 .oauth_clients .buttons .oauth-edit {

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

1414 }

1415

1416 .oauth_clients .buttons .oauth-delete {

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

1418 }

1419

1420 /* Rules for messages pages */

1421

1422 .messages {

1423 width: 100%;

1424 border: 1px solid #ddd;

1425

1426 input[type="submit"] {

1427 margin: auto;

1428 }

1429 tbody tr {

1430 border-top: 1px solid #ccc;

1431 }

1432

1433 .inbox-row {

1434 background: #f8f8ff;

1435 }

1436

1437 .inbox-row-unread {

1438 background:#CBEEA7;

1439 }

1440

1441 .right {

1442 float: right;

1443 }

1444

1445 tr td,

1446 tr th {

1447 padding: $lineheight/4;

1448 }

1449 p:last-child,

1450 h2:last-child,

1451 h3:last-child,

1452 ol:last-child,

1453 ul:last-child {

1454 margin-bottom:0;

1455 }

1456 tr td {

1457 height: 30px;

1458 border-right: 1px solid $keyline;

1459 }

1460 }

1461

1462 .inbox-row .inbox-mark-read {

1463 display: none;

1464 }

1465

1466 .info-line {

1467 margin-bottom: $lineheight;

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

1469 border-bottom: 1px solid #ccc;

1470

1471 form, form div {

1472 display: inline;

1473 }

1474 }

1475

1476 .info-line .user_thumbnail_tiny {

1477 vertical-align: middle;

1478 }

1479

1480 .inbox-mark-unread,

1481 .inbox-mark-read,

1482 .inbox-delete {

1483 width: 1%;

1484 }

1485

1486 .inbox-row-unread .inbox-mark-unread {

1487 display: none;

1488 }

1489

1490 .message-read .message-buttons {

1491 margin-top: $lineheight;

1492 padding-top: $lineheight;

1493 border-top: 1px solid $keyline;

1494 }

1495

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

1497 border-radius: 0;

1498 }

1499

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

1501

1502 .flash {

1503 padding: $lineheight;

1504 &#error {

1505 background-color: #ff7070;

1506 }

1507 &#warning {

1508 background-color: #ffe0cc;

1509 }

1510 &#notice {

1511 background-color: #CBEEA7;

1512 }

1513 }

1514

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

1516

1517 .field_with_errors {

1518 padding: 2px;

1519 background-color: #ff7070;

1520 display: table;

1521 }

1522

1523 /* Rules for rails validation error boxes */

1524

1525 #errorExplanation {

1526 width: 400px;

1527 border: 2px solid #ff7070;

1528 padding: 0 $lineheight/2;

1529 margin-bottom: $lineheight;

1530 background-color: #f0f0f0;

1531

1532 h2 {

1533 margin: 0 -10px 10px -10px;

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

1535 font-weight: bold;

1536 font-size: 12px;

1537 background-color: #c00;

1538 color: #fff;

1539 text-align: left;

1540 }

1541

1542 p {

1543 color: #333;

1544 margin-bottom: 0px;

1545 padding: $lineheight/4;

1546 }

1547

1548 ul {

1549 padding-left: $lineheight;

1550

1551 li {

1552 font-size: 12px;

1553 list-style: disc;

1554 }

1555 }

1556 }

1557

1558 /* Rules for forms */

1559

1560 .standard-form {

1561 fieldset {

1562 margin-bottom: $lineheight;

1563 }

1564 label.standard-label {

1565 display: block;

1566 margin-bottom: $lineheight/4;

1567 font-size: $typeheight;

1568 font-weight: bold;

1569 line-height: 1.5;

1570 }

1571 label.standard-label.secondary {

1572 display: inline-block;

1573 font-weight: normal;

1574 }

1575 .form-help {

1576 font-weight: normal;

1577 }

1578 .form-column {

1579 float: left;

1580 margin-right: 20px;

1581 }

1582 .form-divider {

1583 margin-top: $lineheight;

1584 padding-top: $lineheight;

1585 border-top: 1px solid $keyline;

1586 }

1587 .form-row {

1588 margin-bottom: $lineheight/2;

1589 }

1590 .form-list {

1591 margin-bottom: 0;

1592 }

1593 .form-list li {

1594 margin-bottom: 5px;

1595 }

1596 input[type="checkbox"],

1597 input[type="radio"] {

1598 float: left;

1599 margin-top: 5px;

1600 }

1601 }

1602

1603 #remember_me_openid {

1604 display: block;

1605 }

1606

1607 input[type="checkbox"],

1608 input[type="radio"] {

1609 margin-right: 5px;

1610 }

1611

1612 input[type="text"],

1613 input[type="email"],

1614 input[type="url"],

1615 input[type="password"],

1616 textarea {

1617 border: 1px solid #ccc;

1618 padding: 2px 5px;

1619 margin: 0;

1620 width: 200px;

1621 }

1622

1623 textarea {

1624 padding: 5px;

1625 width: 100%;

1626 height: 100% !important;

1627 }

1628

1629 /* Rules for user images */

1630

1631 img.user_image {

1632 max-width: 100px;

1633 max-height: 100px;

1634 border: 1px solid #ccc;

1635 margin-bottom: $lineheight;

1636 float: left;

1637 margin-right: $lineheight;

1638 }

1639

1640 img.user_thumbnail {

1641 max-width: 50px;

1642 max-height: 50px;

1643 border: 1px solid #ccc;

1644 margin-right: $lineheight;

1645 }

1646

1647 img.user_thumbnail_tiny {

1648 max-width: 25px;

1649 max-height: 25px;

1650 border: 1px solid #ccc;

1651 }

1652

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

1654

1655 .nowrap {

1656 white-space: nowrap;

1657 }

1658

1659 /* Rules for geo microformats */

1660

1661 abbr.geo {

1662 border-bottom: none;

1663 }

1664

1665 /* Rules for RSS buttons */

1666

1667 .rsssmall {

1668 position: relative;

1669 top: 5px;

1670 }

1671

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

1673

1674 ul.secondary-actions {

1675 font-style: normal;

1676 margin-bottom: 0;

1677 margin-left: 0;

1678 &.pager {

1679 display: inline-block;

1680 margin-right: 60px;

1681 }

1682 li {

1683 display: block;

1684 float: left;

1685 list-style: none;

1686 border-left: 1px solid #ccc;

1687 padding-left: $lineheight/4;

1688 margin-right: $lineheight/4;

1689 &:first-child {

1690 border-left: 0;

1691 padding-left: 0;

1692 }

1693 &:last-child {

1694 margin-right: 0px;

1695 }

1696 }

1697 }

1698

1699 /* Utility for managing inner content areas */

1700

1701 .inner22 { padding: $lineheight;}

1702

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

1704

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

1706

1707 .inner02 { padding: 0 $lineheight;}

1708

1709 /* Utility for general button styles */

1710

1711 input[type="button"],

1712 input[type="submit"],

1713 input[type="reset"],

1714 a.button {

1715 cursor: pointer;

1716 border: 0;

1717 display: inline-block;

1718 line-height: 20px;

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

1720 min-width: 120px;

1721 margin: 0 0 $lineheight/2 0;

1722 color: white;

1723 background: $blue;

1724 text-align: center;

1725 border-radius: 2px;

1726 -moz-border-radius: 2px;

1727 &:hover {

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

1729 text-decoration: none;

1730 }

1731 &.deemphasize {

1732 background: $lightblue;

1733 &:hover {

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

1735 }

1736 }

1737 &:disabled {

1738 background: $lightblue;

1739 }

1740 &:last-child {

1741 margin-bottom: 0;

1742 }

1743 }

1744

1745 .buttons {

1746 min-width: 200px;

1747 input[type="submit"],

1748 input[type="button"],

1749 input[type="reset"],

1750 .button {

1751 box-sizing: border-box;

1752 float: left;

1753 border-radius: 0;

1754 margin:0;

1755 min-width: 100px;

1756 max-width: 150px;

1757 border-right:1px solid white;

1758 }

1759 input:first-child,

1760 .button:first-child {

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

1762 }

1763 input:last-child,

1764 .button:last-child {

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

1766 border-right-width: 0;

1767 }

1768 input:only-child,

1769 .button:only-child,

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

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

1772 border-radius:2px;

1773 border-right-width: 0;

1774 }

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

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

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

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

1779 border-right-width: 0;

1780 }

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

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

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

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

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

1786 }

1787 }

1788

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

1790

1791 .table0,

1792 .item0 {

1793 background: $offwhite;

1794 }

1795

1796 .table1,

1797 .item1 {

1798 background: #fff;

1799 }

1800

1801 /* Rules for OpenID logo */

1802

1803 .openid_logo {

1804 vertical-align: text-bottom;

1805 border: 0;

1806 }

1807

1808 /* Rules for rich text */

1809

1810 .richtext,

1811 .prose {

1812 h1, h2 {

1813 padding-bottom: $lineheight/2;

1814 border-bottom: 1px dashed #cccccc;

1815 margin-bottom: $lineheight/2;

1816 }

1817

1818 h1 {

1819 font-size: 24px;

1820 }

1821

1822 h2 {

1823 font-size: 18px;

1824 }

1825

1826 h3 {

1827 font-size: $typeheight;

1828 }

1829

1830 code {

1831 font-size: 13px;

1832 background: #e8e8e8;

1833 padding: 2px 3px;

1834 }

1835

1836 pre {

1837 font-size: 13px;

1838 background: #e8e8e8;

1839 padding: 2px 3px;

1840

1841 code {

1842 padding: 0;

1843 }

1844 }

1845

1846 img {

1847 padding: $lineheight;

1848 background-color: $offwhite;

1849 display: block;

1850 max-width: 100%;

1851 margin: auto;

1852 }

1853

1854 blockquote {

1855 border-left: $lineheight solid $offwhite;

1856 padding-left: $lineheight;

1857 margin: 0;

1858 color: #7E7E7E;

1859 }

1860

1861 ul, ol {

1862 font-style: italic;

1863 padding-left: $lineheight;

1864 margin-bottom: $lineheight;

1865 margin-left: $lineheight;

1866 }

1867

1868 ul li {

1869 list-style: disc;

1870 }

1871

1872 ol li {

1873 list-style: decimal;

1874 }

1875 }

1876

1877 .diary_post .richtext {

1878 margin-top: $lineheight;

1879 }

1880

1881 .comments .richtext {

1882 margin-left: 70px;

1883 margin-top: 0;

1884 }

1885

1886 /* Rules for rich text editors */

1887

1888 .richtext_container {

1889 margin-bottom: $lineheight;

1890

1891 .richtext_content {

1892 width: 50%;

1893 display: inline-block;

1894 vertical-align: top;

1895

1896 .richtext_preview {

1897 display: inline-block;

1898 padding: $lineheight;

1899 background-color: $offwhite;

1900 overflow-x: auto;

1901

1902 &.loading {

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

1904 background-repeat: no-repeat;

1905 background-position: center;

1906 }

1907

1908 > :first-child {

1909 margin-top: 0px;

1910 }

1911 }

1912 }

1913

1914 .richtext_help {

1915 display: inline-block;

1916 vertical-align: top;

1917 margin-left: 15px;

1918 background-color: #f8f8ff;

1919 padding: $lineheight/2;

1920 width: 220px;

1921

1922 ul {

1923 margin-bottom: 0;

1924 }

1925

1926 h4.heading, li {

1927 border-bottom: 1px solid #ccc;

1928 margin-bottom: $lineheight/4;

1929 padding-bottom: $lineheight/4;

1930 }

1931

1932 li h4, li span, li p {

1933 display: inline-block;

1934 vertical-align: top;

1935 font-size: 11px;

1936 }

1937

1938 li h4 {

1939 width: 40%;

1940 margin: 0;

1941 }

1942

1943 li span, li p {

1944 width: 50%;

1945 margin-left: $lineheight/2;

1946 margin-bottom: $lineheight/4;

1947 white-space: nowrap;

1948 }

1949 }

1950 }

1951

1952 /* Rules for the user notes list */

1953

1954 .note_list {

1955 tr.creator {

1956 background-color: #eeeeee;

1957 }

1958

1959 td {

1960 padding: 3px;

1961 }

1962

1963 p {

1964 margin-bottom: 0px;

1965 }

1966 }

1967

1968 /* Rules for the notes interface */

1969

1970 .leaflet-popup-content .note {

1971 padding-top: $lineheight/2;

1972 }

1973

1974 .leaflet-popup-content .note {

1975 h2 {

1976 margin-bottom: $lineheight/2;

1977 }

1978

1979 div {

1980 margin-top: $lineheight/2;

1981 }

1982

1983 .permalink {

1984 position: absolute;

1985 top: $lineheight/4;

1986 left: $lineheight/4;

1987 min-width: 15px;

1988 min-height: 15px;

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

1990 }

1991

1992 .permalink span {

1993 display: none;

1994 padding-left: $lineheight;

1995 }

1996

1997 .permalink:hover span {

1998 display: block;

1999 }

2000

2001 .warning {

2002 display: block;

2003 background-color: #ffe0cc;

2004 padding: 4px 6px;

2005 margin-bottom: $lineheight/2;

2006 }

2007

2008 .comment_body {

2009 margin-top: 2px;

2010 margin-bottom: 2px;

2011

2012 p {

2013 margin-top: 0px;

2014 margin-bottom: 0px;

2015 }

2016 }

2017

2018 .comment {

2019 width: 100%;

2020 height: 100px;

2021 }

2022

2023 .buttons {

2024 margin-top: $lineheight/4;

2025 text-align: right;

2026 }

2027 }

2028

2029 /*

2030 * Rules for the iD editor

2031 */

2032 .id-embed {

2033 width: 100%;

2034 height: 100%;

2035 }

2036

2037 /* Rules for rotating sidebar ads */

2038 .ad-container {

2039 display: block;

2040 height: 120px;

2041 overflow: hidden;

2042 position: relative;

2043 border-bottom: 1px solid #ccc;

2044 }

2045

2046 .ad {

2047 height: 100px;

2048 border: 0;

2049 background: #fff;

2050 }