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 $green: #7ebc6f;

9 $grey: #CCC;

10 $red: red;

11 $lightgrey: #EEE;

12 $darkgrey: #AAA;

13 $hovercolor: 20%;

14 $headerHeight: 54px;

15 $sidebarWidth: 300px;

16 $keyline: 1px solid $lightgrey;

17 $border-radius: 3px;

19 /* Styles common to large and small screens */

21 /* Minimal CSS reset */

23 html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, input {

24 margin: 0;

25 padding: 0;

26 border: 0;

27 font-size:100%;

28 }

30 fieldset,img { border: 0; }

32 legend { color: #000; }

34 sup { vertical-align: text-top; }

36 sub { vertical-align: text-bottom; }

38 table {

39 border-collapse: collapse;

40 border-spacing: 0;

41 }

43 li { list-style: none; }

45 input,

46 select,

47 textarea,

48 body { font: #{$typeheight}/#{$lineheight} "Helvetica Neue",Arial,sans-serif; }

50 abbr, acronym {

51 border-bottom: .1em dotted;

52 cursor: help;

53 }

55 strong { font-weight: 500; }

57 /* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */

59 .clearfix:before,

60 .clearfix:after {

61 content: " ";

62 display: table;

63 }

65 .clearfix:after {

66 clear: both;

67 }

69 /* Basic grid */

71 .col0 { float:left; width:04.1666%; }

72 .col1 { float:left; width:08.3333%; }

73 .col2 { float:left; width:16.6666%; }

74 .col3 { float:left; width:25.0000%; }

75 .col4 { float:left; width:33.3333%; }

76 .col5 { float:left; width:41.6666%; }

77 .col6 { float:left; width:50.0000%; }

78 .col7 { float:left; width:58.3333%; }

79 .col8 { float:left; width:66.6666%; }

80 .col9 { float:left; width:75.0000%; }

81 .col10 { float:left; width:83.3333%; }

82 .col11 { float:left; width:91.6666%; }

83 .col12 { width:100%; }

85 .margin0 { margin-left:04.1666%; }

86 .margin1 { margin-left:08.3333%; }

87 .margin2 { margin-left:16.6666%; }

88 .margin3 { margin-left:25.0000%; }

89 .margin4 { margin-left:33.3333%; }

90 .margin5 { margin-left:41.6666%; }

91 .margin6 { margin-left:50.0000%; }

92 .margin7 { margin-left:58.3333%; }

93 .margin8 { margin-left:66.6666%; }

94 .margin9 { margin-left:75.0000%; }

95 .margin10 { margin-left:83.3333%; }

96 .margin11 { margin-left:91.6666%; }

97 .margin12 { margin-left:100.0000%; }

99 .fillL { background-color: white; }

100

101 /* Default rules for the body of every page */

102

103 * {

104 -webkit-box-sizing: border-box;

105 -moz-box-sizing: border-box;

106 box-sizing: border-box;

107 }

108

109 body {

110 font-family: 'Helvetica Neue',Arial,sans-serif;

111 font-size: $typeheight;

112 line-height: 1.6666;

113 color: #222;

114 background-color: #fff;

115 margin: 0px;

116 padding: 0px;

117 text-align: left;

118 }

119

120 body.slim {

121 background-color: #f0f0f0;

122 }

123

124 h1, h2, h3 {

125 font-weight: 500;

126 line-height: 1.2;

127 }

128

129 h4, h5 { font-weight: 500; }

130

131 h1 {

132 font-size: 18px;

133 }

134

135 h2, h3 {

136 font-size: 16px;

137 }

138

139 p > img {

140 width: auto;

141 max-width: 100%;

142 }

143

144 small, aside {

145 font-size: 12px;

146 }

147

148 .column-1 {

149 width: 50%;

150 margin: 0 0 $lineheight/2 0;

151 }

152

153 .small_icon {

154 vertical-align: middle;

155 margin-right: $lineheight/4;

156 }

157

158 .red { color: $red; }

159

160 /* Rules for icons */

161

162 .icon {

163 display:inline-block;

164 vertical-align:top;

165 width:20px;

166 height:20px;

167 background:transparent image-url("sprite.png") no-repeat 0 0;

168 text-indent:-9999px;

169 overflow:hidden;

170 }

171

172 .icon.search { background-position: 0 0; }

173 .icon.donate { background-position: -20px 0; }

174 .icon.zoomin { background-position: -40px 0; }

175 .icon.zoomout { background-position: -60px 0; }

176 .icon.geolocate { background-position: -80px 0; }

177 .active .icon.geolocate { background-position: -80px -20px; }

178 .icon.layers { background-position: -100px 0; }

179 .icon.key { background-position: -120px 0; }

180 .icon.share { background-position: -140px 0; }

181 .icon.clipboard { background-position: -160px 0; }

182 .icon.link { background-position: -180px 0; }

183 .icon.close { background-position: -200px 0; }

184 .icon.check { background-position: -220px 0; }

185 .icon.note { background-position: -240px 0; }

186 .icon.gear { background-position: -260px 0; }

187

188 /* Rules for links */

189

190 a {

191 color: #00f;

192 text-decoration: none;

193 -webkit-appearance: none;

194 outline: 0;

195 &:hover {

196 text-decoration: underline;

197 }

198 }

199

200 /* Rules for horizontal lines */

201

202 hr {

203 border: none;

204 background-color: #ccc;

205 color: #ccc;

206 height: 1px;

207 }

208

209 /* General styles for tables */

210

211 table {

212 width: 100%;

213 margin-bottom: $lineheight;

214 th, td {

215 text-align: left;

216 padding: $lineheight/4;

217 line-height: $lineheight;

218 }

219 th {

220 font-weight: 500;

221 vertical-align: top;

222 }

223 td {

224 vertical-align: middle;

225 }

226 }

227

228 /* Utility for de-emphasizing content */

229

230 .deemphasize {

231 color: #999;

232 a {

233 color: $blue;

234 }

235 }

236

237 /* Rules for the header */

238

239 header {

240 height: $headerHeight;

241 position: relative;

242 // border-bottom: $keyline;

243 z-index: 1001;

244 font-size: 13px;

245

246 h1, nav, nav > ul, nav > ul > li, .dropdown {

247 display: inline-block;

248 }

249

250 > * {

251 height: 100%;

252 padding: $lineheight/2 $lineheight;

253 }

254

255 h1, nav.primary {

256 float: left;

257 }

258

259 a, a:hover {

260 text-decoration: none;

261 }

262

263 img.logo {

264 width: 30px;

265 height: 30px;

266 margin-top: -4px;

267 vertical-align: middle;

268 }

269

270 h1 {

271 margin: 0;

272 padding: ($lineheight - 3) $lineheight ($lineheight + 3);

273

274 a {

275 color: #000;

276 }

277 }

278 }

279

280 nav.primary {

281 > ul {

282 $border: 1px solid $green;

283

284 border: $border;

285 border-radius: $border-radius;

286

287 > li {

288 border-right: $border;

289 &:last-child {

290 border-right: 0;

291 > a { border-radius: 0 $border-radius $border-radius 0; }

292 }

293 &:first-child > a { border-radius: $border-radius 0 0 $border-radius; }

294 > a:hover { background: lighten($green, 30%); }

295 &.current > a:hover { background: $green; }

296 &.disabled > a:hover { background: lighten($green, 38%); }

297 &.dropdown {

298 > a.tab { border-right: 1px solid lighten($green, 30%); }

299 &.current > a.tab { border-right: 1px solid lighten($green, 10%); }

300 }

301 }

302 }

303

304 a.tab,

305 .dropdown-toggle {

306 display: inline-block;

307 font-weight: 500;

308 color: $green;

309 padding: 5px 15px;

310 }

311

312 .dropdown-toggle {

313 padding: 5px 6px;

314 }

315

316 .caret {

317 border-top-color: $green;

318 margin-top: 10px;

319 }

320

321 .disabled a {

322 color: #ccc;

323 cursor: default;

324

325 .caret {

326 border-top-color: #ccc;

327 }

328 }

329

330 > ul li.current {

331 background-color: $green;

332

333 .tab {

334 color: #fff;

335 }

336

337 .caret {

338 border-top-color: #fff;

339 }

340 }

341 }

342

343 nav.secondary {

344 position: absolute;

345 right: 0;

346

347 > ul a,

348 .dropdown-toggle {

349 display: inline-block;

350 text-decoration: none;

351 color: $darkgrey;

352 padding: 5px;

353

354 &:hover { color: darken($darkgrey, 10%); }

355 }

356

357 > ul li.current a {

358 color: darken($darkgrey, 25%);

359 }

360

361 .user-menu {

362 $border: 1px solid $grey;

363

364 font-weight: 500;

365 border: $border;

366 border-radius: $border-radius;

367 margin-left: 10px;

368

369 > li {

370 border-right: $border;

371 &:last-child {

372 border-right: 0;

373

374 > a {

375 border-radius: 0 $border-radius $border-radius 0;

376 }

377 }

378 &:first-child > a { border-radius: $border-radius 0 0 $border-radius; }

379 &:hover a { background: lighten($darkgrey, 30%); }

380 }

381

382 a {

383 padding: 5px 15px;

384 }

385

386 &.logged-in > a {

387 padding: 0;

388 > .user-button {

389 padding: 5px 10px 5px 6px;

390 display: inline-block;

391 }

392 }

393 }

394

395 .caret {

396 border-top-color: $grey;

397 margin-top: 9px;

398 }

399

400 img.user_thumbnail_tiny {

401 border: 0;

402 vertical-align: top;

403 margin-top: 0px;

404 margin: 3px 0 0 3px;

405 border-radius: 2px;

406 }

407

408 #inboxanchor {

409 display: inline-block;

410 vertical-align: top;

411 height: 25px;

412 margin: 3px 0 3px 3px;

413 background-color: lighten($grey, 10%);

414 line-height: 20px;

415 border-radius: 2;

416 }

417

418 .dropdown-menu {

419 left: auto;

420 right: 0;

421

422 .count-number {

423 float: right;

424 padding: 0 5px;

425 margin: 0;

426 }

427 }

428 }

429

430 /* Utility for styling notification numbers */

431

432 .count-number {

433 padding: 2px $lineheight/4;

434 border-radius: 2px;

435 background: #d7d7ff;

436 margin: 0 2px;

437 font-size: 11px;

438 color: #333;

439 }

440

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

442

443 #noscript {

444 z-index: 20000000;

445 position: absolute;

446 top: 15px;

447 left: 15px;

448 }

449

450 /* Rules for bootstrap tooltips */

451

452 .tooltip {

453 position: absolute;

454 display: none;

455 color: #333;

456 text-align: left;

457 font-size: 12px;

458 max-width: 250px;

459 }

460

461 .tooltip.in {

462 opacity: 0.8;

463 z-index: 1030;

464 height: auto;

465 display: block;

466 }

467

468 .tooltip.top {

469 margin-top: -10px;

470 text-align: center;

471 }

472

473 .tooltip.right {

474 margin-left: 10px;

475 }

476

477 .tooltip.bottom {

478 margin-top: 10px;

479 text-align: center;

480 }

481

482 .tooltip.left {

483 margin-left: -10px;

484 text-align: right;

485 }

486

487 .tooltip-inner {

488 display: inline-block;

489 padding: 10px;

490 font-weight: normal;

491 background-color: white;

492 }

493

494 .tooltip-arrow {

495 position: absolute;

496 width: 0;

497 height: 0;

498 border-color: transparent;

499 border-style: solid;

500 }

501

502 .tooltip.top .tooltip-arrow {

503 bottom: -5px;

504 left: 50%;

505 margin-left: -5px;

506 border-top-color: white;

507 border-width: 5px 5px 0;

508 }

509

510 .tooltip.right .tooltip-arrow {

511 top: 50%;

512 left: -5px;

513 margin-top: -5px;

514 border-right-color: white;

515 border-width: 5px 5px 5px 0;

516 }

517

518 .tooltip.left .tooltip-arrow {

519 top: 50%;

520 right: -5px;

521 margin-top: -5px;

522 border-left-color: white;

523 border-width: 5px 0 5px 5px;

524 }

525

526 .tooltip.bottom .tooltip-arrow {

527 top: -5px;

528 left: 50%;

529 margin-left: -5px;

530 border-bottom-color: white;

531 border-width: 0 5px 5px;

532 }

533

534 /* Rules for Leaflet maps */

535

536 .leaflet-control .control-button {

537 display: block;

538 height: 40px;

539 width: 40px;

540 background-color: #333;

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

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

543 margin-bottom: 10px;

544 outline: none;

545

546 &:hover {

547 background-color: black;

548 }

549

550 &.active {

551 background-color: #9ed485;

552 }

553

554 &.disabled {

555 background-color: #333;

556 background-color: rgba(0,0,0,.5);

557 cursor: default;

558 }

559

560 .icon {

561 margin: 10px;

562 }

563 }

564

565 .leaflet-control .zoomin,

566 .control-layers .control-button {

567 margin-bottom: 0px;

568 border-radius: 4px 0 0 0;

569 }

570

571 .leaflet-control .zoomout,

572 .control-key .control-button {

573 margin-bottom: 0;

574 border-radius: 0;

575 }

576

577 .control-locate .control-button,

578 .control-share .control-button {

579 border-radius: 0 0 0 4px;

580 }

581

582 /* Rules for the sidebar and main map area */

583

584 .map-layout {

585 #content {

586 position: absolute;

587 top: $headerHeight;

588 bottom: 0;

589 width: 100%;

590 }

591

592 #sidebar, #map {

593 position: relative;

594 height: 100%;

595 overflow-x: hidden;

596 overflow-y: auto;

597 }

598

599 #sidebar {

600 float: left;

601 width: $sidebarWidth;

602

603 h2, h3, h4 {

604 padding: $lineheight $lineheight $lineheight/2;

605 }

606

607 h4 {

608 font-weight: normal;

609 color: #666;

610 font-size: 12px;

611 }

612

613 .icon.close {

614 position: absolute;

615 right: $lineheight;

616 cursor: pointer;

617 }

618

619 .footer {

620 position: absolute;

621 bottom: 0;

622 }

623

624 p.credits {

625 font-size: 11px;

626 color: #999;

627

628 a {

629 color: #666;

630 }

631 }

632

633 p.large-text {

634 font-size: 1.7em;

635 line-height: 1.4em;

636 font-weight: 300;

637 }

638 }

639

640 #sidebar.minimized {

641 position: absolute;

642 z-index: 1000;

643 height: auto;

644 border-right: none;

645

646 #sidebar_content {

647 display: none;

648 }

649

650 #search_form {

651 background: none;

652 width: 78%;

653 }

654 }

655

656 #map {

657 height: 100%;

658 overflow: hidden;

659 }

660

661 #map-ui {

662 display: none;

663 position: relative;

664 float: right;

665 width: 250px;

666 height: 100%;

667 background: white;

668 overflow: auto;

669

670 .section {

671 border-bottom: 1px solid #DDD;

672 padding: 10px 20px;

673 }

674

675 a.close-button {

676 float: right;

677 padding:5px;

678 font-size:20px;

679 line-height:10px;

680 color:#222;

681 border:1px solid #ddd;

682 }

683 }

684 }

685

686 .layers-ui,

687 .share-ui {

688 li:last-child {

689 margin-bottom: 0;

690 }

691 }

692

693 .layers-ui {

694 .base-layers {

695 .leaflet-container {

696 width: 100%;

697 height: 50px;

698 cursor: pointer;

699 }

700

701 li {

702 overflow: hidden;

703 border-radius: 3px;

704 border: 2px solid #fff;

705 margin-bottom: 8px;

706 position: relative;

707 transition: border-color 0.08s ease-in;

708

709 label {

710 position: absolute;

711 top: 10px;

712 left: 8px;

713 padding: 2px 6px;

714 border-radius: 3px;

715 cursor: pointer;

716 font-weight: 500;

717 font-size: 16px;

718 text-stroke: 2px #fff;

719 background: rgba(255,255,255,.8);

720 text-shadow:

721 -2px -2px 1px #fff,

722 2px -2px 1px #fff,

723 -2px 2px 1px #fff,

724 2px 2px 1px #fff;

725 input[type="radio"] {

726 vertical-align: middle;

727 margin-bottom: 4px;

728 }

729 }

730

731 &.active { border-color: darken($green, 10%); }

732 &:hover {

733 border-color: $grey;

734 &.active { border-color: darken($green, 20%); }

735 }

736 }

737 }

738

739 .overlay-layers {

740 p {

741 font-size: 13px;

742 margin-bottom: 8px;

743 }

744 }

745 }

746

747 .share-ui {

748 .share-tabs {

749 margin-bottom: 10px;

750

751 a {

752 color: #fff;

753 text-decoration: none;

754 background-color: $lightblue;

755 padding: 5px 10px;

756 }

757

758 a:first-child {

759 border-right: 1px solid #fff;

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

761 }

762

763 a:last-child {

764 border-left: 1px solid #fff;

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

766 }

767

768 a.active {

769 background-color: $blue;

770 }

771 }

772

773 .share-tab {

774 display: none;

775 }

776

777 .share-link {

778 input[type=text],

779 textarea {

780 width: 100%;

781 font-family: monospace;

782 font-size: small;

783 line-height: 1.3;

784 }

785 }

786

787 .share-image {

788 label {

789 margin-right: 10px;

790 }

791 }

792

793 #embed_html {

794 resize: vertical;

795 }

796

797 #mapnik_scale {

798 width: 100px;

799 }

800 }

801

802 .leaflet-top.leaflet-right {

803 top: $lineheight !important;

804 .leaflet-control {

805 margin-right: 0px !important;

806 margin-top: 0px !important;

807 }

808 }

809

810 .leaflet-popup-scrolled {

811 padding-right: $lineheight;

812 border-bottom: 0px !important;

813 border-top: 0px !important;

814 }

815

816 .leaflet-popup-content-wrapper {

817 border-radius: 4px !important;

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

819 }

820

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

822

823 #attribution {

824 display: none;

825 }

826

827 .attribution_license,

828 .attribution_project {

829 text-align: left;

830 }

831

832 .attribution_notice {

833 text-align: center;

834 }

835

836 /* Rules for the sidebar */

837

838 .sidebar_heading {

839 position: relative;

840 padding: $lineheight/2 $lineheight;

841 // background: $offwhite;

842 // border-bottom: 1px solid #ccc;

843 > .close {

844 float: right;

845 margin-top: 2px;

846 cursor: pointer;

847 }

848 }

849

850 #sidebar_content {

851 position: absolute;

852 top: 50px;

853 bottom: 0;

854 width: 100%;

855 overflow-y: auto;

856

857 .loader,

858 .load_more {

859 text-align: center;

860 margin: $lineheight auto;

861 width: $lineheight;

862 display: block;

863 }

864 }

865

866 /* Rules for the search box */

867

868 #search_form {

869 position: relative;

870 padding: $lineheight/2 $lineheight;

871 background-color: $lightgrey;

872

873 #query_wrapper {

874 position: relative;

875 overflow: hidden;

876 }

877

878 input {

879 width: 100%;

880 height: 30px;

881 border-right: none;

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

883

884 transition: 300ms linear;

885 -webkit-transition: 300ms linear;

886 -moz-transition: 300ms linear;

887 }

888

889 input:focus {

890 outline: none;

891 box-shadow: 0px 0px 7px #9ED485;

892 }

893

894 input[type=submit] {

895 float: right;

896 width: auto;

897 min-width: 0;

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

899 }

900

901 #describe_location {

902 position: absolute;

903 top: 6px;

904 right: 6px;

905 font-size: 10px;

906 color: $blue;

907 }

908 }

909

910 /* Rules for donation request box */

911

912 a.donate {

913 display: block;

914 padding: $lineheight/4 $lineheight;

915 border: 1px solid $green;

916 font-size: $typeheight;

917 line-height: 1.4;

918 text-align: center;

919 border-radius: 2px;

920 color: #222;

921 margin: $lineheight/2 $lineheight;

922

923 &:hover {

924 background: $green;

925 text-decoration: none;

926 }

927 }

928

929 /* Rules for rotating sidebar ads */

930

931 .ad-container {

932 display: block;

933 height: 120px;

934 margin: auto;

935 overflow: hidden;

936 position: relative;

937 border-bottom: 1px solid #ccc;

938

939 a {

940 display: block;

941 width: 165px;

942 margin: auto;

943 }

944

945 .ad {

946 height: 100px;

947 border: 0;

948 background: #fff;

949 }

950 }

951

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

953

954 #mapkey {

955 .mapkey-table-key img {

956 display: block;

957 margin-left: auto;

958 margin-right: auto;

959 }

960 td {

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

962 }

963 }

964

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

966

967 .search_results_entry {

968 ul li {

969 border-bottom: $keyline;

970 &:first-child { border-top: $keyline; }

971 }

972

973 .search_details {

974 display: block;

975 float: right;

976 text-align: right;

977 margin-top: 0.2em;

978 margin-left: 0.5em;

979 }

980 }

981

982 .search_results_error {

983 color: #f00;

984 }

985

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

987

988 #browse_content {

989 position: relative;

990 .browse_show_list.button {

991 position: absolute;

992 left: $lineheight;

993 right: $lineheight;

994 bottom: -40px;

995 margin-bottom: 0;

996 }

997 a.more-details {

998 position: absolute;

999 top: 0;

1000 right: $lineheight;

1001 }

1002 ul li {

1003 margin-bottom: 0;

1004 }

1005 }

1006

1007 /* Rules for entity history */

1008 #sidebar_content {

1009 .browse_details {

1010 position: relative;

1011 border-bottom: $keyline;

1012 }

1013 }

1014

1015 .browse_status {

1016 display: none;

1017 }

1018

1019 /* Rules for the changeset list shown by the history tab */

1020

1021 #sidebar .changesets {

1022 li {

1023 padding: $lineheight;

1024 border-bottom: $keyline;

1025 cursor: pointer;

1026

1027 &.selected { background: lighten($green, 35%); }

1028 }

1029 }

1030

1031 /* Rules for the data browser */

1032

1033 #sidebar_content {

1034 .browse-section {

1035 padding: 10px 20px;

1036

1037 h4 {

1038 padding: 0;

1039 }

1040 }

1041

1042 .paginate ul, .note-comments ul {

1043 padding-left: 20px;

1044 }

1045

1046 .browse-field {

1047 margin-bottom: 10px;

1048

1049 h4 {

1050 padding: 5px 0 5px 10px;

1051 font-size: 12px;

1052 border: 1px solid #CCC;

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

1054 background-color: #F6F6F6;

1055 }

1056

1057 p {

1058 padding: 7px 10px;

1059 font-size: 12px;

1060 background-color: #FFF;

1061 border: 1px solid #CCC;

1062 border-top: 0;

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

1064 }

1065 }

1066

1067 .browse-tag-list {

1068 border: 1px solid #CCC;

1069 border-radius: 4px;

1070 font-size: 12px;

1071

1072 li {

1073 border-bottom: 1px solid #CCC;

1074 }

1075

1076 li:last-child {

1077 border-bottom: 0;

1078 }

1079

1080 .browse-tag-k,

1081 .browse-tag-v {

1082 display: inline-block;

1083 width: 50%;

1084 height: 30px;

1085 float: left;

1086 padding: 6px 10px;

1087 }

1088

1089 .browse-tag-k {

1090 font-weight: 500;

1091 background-color: #F6F6F6;

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

1093 }

1094

1095 .browse-tag-v {

1096 border-left: 1px solid #CCC;

1097 }

1098 }

1099 }

1100

1101 /* Rules for the changeset details */

1102

1103 #sidebar_content {

1104 .browse-section.header {

1105 padding: 20px;

1106 border-bottom: 1px solid #ccc;

1107

1108 h2 {

1109 padding: 0 0 5px 0;

1110 border-bottom: none;

1111 }

1112 }

1113 }

1114

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

1116

1117 .export_bounds {

1118 text-align: center;

1119 }

1120

1121 .export_area_inputs {

1122 margin-bottom: $lineheight/2;

1123 input[type="text"] {

1124 width: 80px;

1125 margin-bottom: 5px;

1126 }

1127 }

1128

1129 .export_bound {

1130 margin: $lineheight/4;

1131 }

1132

1133 #export_osm {

1134 span.small-title {

1135 font-weight: 500;

1136 display: block;

1137 font-size: 14px;

1138 padding-bottom: 5px;

1139 }

1140

1141 dl {

1142 padding-left: 30px;

1143 font-size: 13px;

1144 color: #666;

1145 dd {

1146 margin-left: 0;

1147 margin-bottom: 10px;

1148 }

1149 }

1150 }

1151

1152 /* Rules for edit pages */

1153

1154 .site-edit {

1155 #content {

1156 position: absolute;

1157 top: $headerHeight;

1158 bottom: 0;

1159 width: 100%;

1160 }

1161

1162 #map {

1163 height: 100%;

1164 }

1165 }

1166

1167 /* Rules for non-map content pages */

1168

1169 .content-heading {

1170 background: $lightgrey;

1171

1172 h1 { font-size: 22px; }

1173 }

1174

1175 .content-body {

1176 h1, h2, h3, p {

1177 margin-bottom: $lineheight;

1178 }

1179

1180 h1, h2, h3 {

1181 margin-top: $lineheight/2;

1182 }

1183 }

1184

1185 .content-inner {

1186 position: relative;

1187 max-width: 900px;

1188 margin: auto;

1189 padding: $lineheight;

1190 }

1191

1192 /* Overrides for pages that use new layout conventions */

1193

1194 .user-new,

1195 .user-create,

1196 .user-terms {

1197 .content-body .content-inner {

1198 padding: 0;

1199 }

1200 }

1201

1202 .user-new,

1203 .user-create,

1204 .user-terms,

1205 .user-confirm {

1206 .content-heading .content-inner {

1207 height: 200px;

1208 }

1209 }

1210

1211 .header-illustration {

1212 background-position: 0 0;

1213 background-repeat: no-repeat;

1214 position: absolute;

1215 height: 200px;

1216 width: 100%;

1217 left: 0;

1218 bottom: 0;

1219

1220 &.new-user-main {

1221 background-image: image-url("sign-up-illustration.png");

1222 }

1223

1224 &.confirm-main {

1225 background-image: image-url("confirm-illustration.png");

1226 }

1227

1228 &.new-user-terms {

1229 background-image: image-url("terms-illustration.png");

1230 }

1231

1232 &.new-user-arm {

1233 height: 110px;

1234 width: 130px;

1235 left: 260px;

1236 top: 160px;

1237 background-image: image-url("sign-up-illustration-arm.png");

1238 z-index: 100;

1239 }

1240 }

1241

1242 @media only screen and (max-width:900px) {

1243 .header-illustration.new-user-arm {

1244 display: none;

1245 }

1246 }

1247

1248 #content.maximised {

1249 top: 0;

1250 left: 0;

1251 right: 0;

1252 bottom: 0;

1253 border: 0;

1254 z-index: 1000;

1255 }

1256

1257 #slim_container {

1258 width: 100%;

1259 }

1260

1261 #slim_container_content {

1262 max-width: 50em;

1263 background-color: #FFFFFF;

1264 margin: $lineheight/2 auto;

1265 padding: 3px;

1266 border-radius: 25px;

1267 -moz-border-radius: 25px;

1268 border: 1px solid #e6e6e6;

1269 }

1270

1271 #slim_content {

1272 margin: $lineheight/2;

1273 margin-top: 95px;

1274 max-width: 50em;

1275

1276 .content-heading {

1277 margin-bottom: 15px;

1278 }

1279 }

1280

1281 #slim_header {

1282 margin: 30px $lineheight/2;

1283 position: absolute;

1284 top: 0px;

1285 margin-right: $lineheight/4;

1286 img {

1287 vertical-align: middle;

1288 margin-bottom: $lineheight/4;

1289 margin-right: $lineheight/4;

1290 }

1291 }

1292

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

1294

1295 .content_map {

1296 position: relative;

1297 width: 45%;

1298 height: 400px;

1299 border: 1px solid #ccc;

1300 margin-bottom: $lineheight;

1301 float: right;

1302 }

1303

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

1305

1306 #trace_list {

1307 font-size: $lineheight/2;

1308 border-width: 0px;

1309 text-align: right;

1310

1311 .trace_summary {

1312 font-size: 12px;

1313 color: gray;

1314 }

1315

1316 .trace_pending {

1317 color: red;

1318 }

1319

1320 .trace_public {

1321 color: green;

1322 }

1323

1324 .trace_identifiable {

1325 color: green;

1326 }

1327

1328 .trace_trackable {

1329 color: red;

1330 }

1331

1332 .trace_private {

1333 color: red;

1334 }

1335 }

1336

1337 /* Rules for the user profile page */

1338

1339 #userinformation {

1340

1341 min-height: 100px;

1342 .userinformation-inner {

1343 float: left;

1344 }

1345 h2 {

1346 margin-top: 0;

1347 }

1348 .user-description {

1349 width: 100%;

1350 clear: both;

1351 }

1352 .deemphasize {

1353 margin: 0;

1354 }

1355 }

1356

1357 .admin-user-info small {

1358 margin-bottom: $lineheight/2;

1359 display: inline;

1360 margin-right: $lineheight;

1361 }

1362

1363 .activity-block {

1364 clear: left;

1365 border-bottom: 1px solid #ccc;

1366 padding-bottom: $lineheight;

1367 float: left;

1368 h3 {

1369 margin-bottom: $lineheight/2;

1370 }

1371 }

1372

1373 .contact-activity {

1374 margin-top: $lineheight;

1375 width: 100%;

1376 }

1377

1378 .activity-details p {

1379 margin-left: 70px;

1380 margin-bottom: 0;

1381 }

1382

1383 #friends-container .contact-activity ul {

1384 margin-left: 70px;

1385 }

1386

1387 .user-view {

1388 p#no_home_location {

1389 margin: $lineheight;

1390 }

1391 .user_thumbnail {

1392 margin-top: $lineheight/4;

1393 float: left;

1394 }

1395 }

1396

1397 /* Rules for the user map */

1398

1399 .content_map .leaflet-popup-content {

1400 margin: $lineheight/2;

1401 min-height: 50px;

1402 }

1403

1404 /* Rules for user popups on maps */

1405

1406 .user_popup {

1407 min-width: 200px;

1408 p {

1409 padding: 0 0 5px 0;

1410 margin-top: 0 0 0 60px;

1411 font-size: 12px;

1412 }

1413 img.user_thumbnail {

1414 float: left;

1415 margin: 0 $lineheight/2 0 0;

1416 }

1417 }

1418

1419 /* Rules for the user list */

1420

1421 #user_list {

1422 font-size: $lineheight/2;

1423 width: 100%;

1424

1425 tr {

1426 vertical-align: middle;

1427 }

1428

1429 p {

1430 margin-top: 0px;

1431 margin-bottom: 0px;

1432 }

1433 }

1434

1435 #user_list_actions {

1436 float: right;

1437 margin-top: $lineheight/2;

1438 }

1439

1440 /* Rules for the diary list page */

1441

1442 .diary_post {

1443 position: relative;

1444 margin-top: $lineheight/2;

1445 padding-top: $lineheight;

1446 border-top: 1px solid #ccc;

1447

1448 .post_heading {

1449 margin-bottom: $lineheight;

1450

1451 h2 {

1452 margin-top: 0;

1453 margin-bottom: $lineheight/2;

1454 font-size: 24px;

1455 }

1456 }

1457

1458 img.user_thumbnail {

1459 float: left;

1460 }

1461

1462 small.deemphasize {

1463 float: left;

1464 display: block;

1465 }

1466

1467 ul.secondary-actions {

1468 display: inline-block;

1469 }

1470 }

1471

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

1473 display: inline;

1474 }

1475

1476 /* Rules for the diary entry page */

1477

1478 .diary_entry {

1479 #map {

1480 position: relative;

1481 width: 90%;

1482 height: 400px;

1483 border: 1px solid #ccc;

1484 display: none;

1485 margin-bottom: $lineheight;

1486 }

1487 #newcomment {

1488 border-top: 1px solid #ccc;

1489 padding-top: $lineheight;

1490 margin-top: $lineheight/2;

1491 }

1492 .comments {

1493 max-width: 740px;

1494 }

1495 .diary-comment {

1496 margin-top: $lineheight/2;

1497 border-top: 1px dashed #ccc;

1498 padding-top: $lineheight/2;

1499 &:first-child {

1500 margin-top: $lineheight;

1501 padding-top: $lineheight;

1502 border-top: 1px solid #ccc;

1503 }

1504 p {

1505 margin-bottom: $lineheight/2;

1506 }

1507 .comment-heading {

1508 margin-bottom: 0;

1509 margin-top: 0;

1510 }

1511 }

1512 }

1513

1514 .diary_entry-view img.user_thumbnail {

1515 float: left;

1516 }

1517

1518 /* Rules for the log in page */

1519

1520 #login_openid_buttons {

1521 margin-bottom: 0;

1522 }

1523

1524 #login_openid_buttons li {

1525 float: left;

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

1527 }

1528

1529 /* Rules for the account confirmation page */

1530

1531 .user-terms {

1532 .legale {

1533 border: 1px solid #ccc;

1534 padding: $lineheight;

1535 margin-bottom: $lineheight;

1536 overflow: auto;

1537 height: 10em;

1538 }

1539

1540 #decline {

1541 background: $lightblue;

1542 &:hover {

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

1544 }

1545 }

1546

1547 .form-row {

1548 margin: auto;

1549 max-width: 370px;

1550 }

1551 }

1552

1553 /* Rules for the account settings page */

1554

1555 #accountForm .user_map {

1556 position: relative;

1557 width: 500px;

1558 height: 400px;

1559 border: 1px solid #ccc;

1560 }

1561

1562 #accountForm .user_image {

1563 margin-bottom: 0;

1564 }

1565

1566 #accountForm #user_image {

1567 margin-left: 20px;

1568 }

1569

1570 #accountForm ul.accountImage-options {

1571 margin-left: 120px;

1572 }

1573

1574 .nohome .location {

1575 display: none;

1576 }

1577

1578 #homerow .message {

1579 display: none;

1580 }

1581

1582 .nohome .message {

1583 display: inline !important;

1584 }

1585

1586 .content_map.settings_map {

1587 width: 50%;

1588 float: none;

1589 }

1590

1591 /* Rules for the oauth settings page */

1592

1593 .oauth_clients .buttons .oauth-edit {

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

1595 }

1596

1597 .oauth_clients .buttons .oauth-delete {

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

1599 }

1600

1601 /* Rules for messages pages */

1602

1603 .messages {

1604 width: 100%;

1605 border: 1px solid #ddd;

1606

1607 input[type="submit"] {

1608 margin: auto;

1609 }

1610 tbody tr {

1611 border-top: 1px solid #ccc;

1612 }

1613

1614 .inbox-row {

1615 background: #f8f8ff;

1616 }

1617

1618 .inbox-row-unread {

1619 background:#CBEEA7;

1620 }

1621

1622 .right {

1623 float: right;

1624 }

1625

1626 tr td,

1627 tr th {

1628 padding: $lineheight/4;

1629 }

1630 p:last-child,

1631 h2:last-child,

1632 h3:last-child,

1633 ol:last-child,

1634 ul:last-child {

1635 margin-bottom:0;

1636 }

1637 tr td {

1638 height: 30px;

1639 border-right: 1px solid $lightgrey;

1640 }

1641 }

1642

1643 .inbox-row .inbox-mark-read {

1644 display: none;

1645 }

1646

1647 .info-line {

1648 margin-bottom: $lineheight;

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

1650 border-bottom: 1px solid #ccc;

1651

1652 form, form div {

1653 display: inline;

1654 }

1655 }

1656

1657 .info-line .user_thumbnail_tiny {

1658 vertical-align: middle;

1659 }

1660

1661 .inbox-mark-unread,

1662 .inbox-mark-read,

1663 .inbox-delete {

1664 width: 1%;

1665 }

1666

1667 .inbox-row-unread .inbox-mark-unread {

1668 display: none;

1669 }

1670

1671 .message-read .message-buttons {

1672 margin-top: $lineheight;

1673 padding-top: $lineheight;

1674 border-top: 1px solid $lightgrey;

1675 }

1676

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

1678 border-radius: 0;

1679 }

1680

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

1682

1683 .error {

1684 padding: $lineheight;

1685 background-color: #ff7070;

1686 }

1687

1688 .warning {

1689 padding: $lineheight;

1690 background-color: #ffe0cc;

1691 }

1692

1693 .notice {

1694 padding: $lineheight;

1695 background-color: #CBEEA7;

1696 }

1697

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

1699

1700 .field_with_errors {

1701 padding: 2px;

1702 background-color: #ff7070;

1703 display: inline-block;

1704 }

1705

1706 .formError {

1707 display: inline-block;

1708 padding: 5px 10px;

1709 margin-top: 5px;

1710 border-radius: 4px;

1711 font-size: 12px;

1712 color: #fff;

1713 background-color: #ff7070;

1714 }

1715

1716 /* Rules for rails validation error boxes */

1717

1718 #errorExplanation {

1719 width: 400px;

1720 border: 2px solid #ff7070;

1721 padding: 0 $lineheight/2;

1722 margin-bottom: $lineheight;

1723 background-color: #f0f0f0;

1724

1725 h2 {

1726 margin: 0 -10px 10px -10px;

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

1728 font-weight: 500;

1729 font-size: 12px;

1730 background-color: #c00;

1731 color: #fff;

1732 text-align: left;

1733 }

1734

1735 p {

1736 color: #333;

1737 margin-bottom: 0px;

1738 padding: $lineheight/4;

1739 }

1740

1741 ul {

1742 padding-left: $lineheight;

1743

1744 li {

1745 font-size: 12px;

1746 list-style: disc;

1747 }

1748 }

1749 }

1750

1751 /* Rules for forms */

1752

1753 .standard-form {

1754 fieldset {

1755 margin-bottom: $lineheight;

1756 }

1757 label.standard-label {

1758 display: block;

1759 margin-bottom: $lineheight/4;

1760 font-size: $typeheight;

1761 font-weight: 500;

1762 line-height: 1.5;

1763 }

1764 label.standard-label.secondary {

1765 display: inline-block;

1766 font-weight: normal;

1767 }

1768 .form-help {

1769 font-weight: normal;

1770 }

1771 .form-column {

1772 float: left;

1773 margin-right: 20px;

1774 }

1775 .form-divider {

1776 margin-top: $lineheight;

1777 padding-top: $lineheight;

1778 border-top: 1px solid $lightgrey;

1779 }

1780 .horizontal-list .form-row {

1781 float: left;

1782 padding-right: 10px;

1783 }

1784 .form-row {

1785 margin-bottom: $lineheight/2;

1786 }

1787 .form-list {

1788 margin-bottom: 0;

1789 }

1790 .form-list li {

1791 margin-bottom: 5px;

1792 }

1793 input[type="checkbox"],

1794 input[type="radio"] {

1795 float: left;

1796 margin-top: 5px;

1797 }

1798 }

1799

1800 #remember_me_openid {

1801 display: block;

1802 }

1803

1804 input[type="checkbox"],

1805 input[type="radio"] {

1806 margin-right: 5px;

1807 }

1808

1809 input[type="text"],

1810 input[type="email"],

1811 input[type="url"],

1812 input[type="password"],

1813 textarea {

1814 border: 1px solid #ccc;

1815 padding: 2px 5px;

1816 margin: 0;

1817 width: 200px;

1818 }

1819

1820 textarea {

1821 padding: 5px;

1822 width: 100%;

1823 }

1824

1825 /* Rules for user images */

1826

1827 img.user_image {

1828 max-width: 100px;

1829 max-height: 100px;

1830 border: 1px solid #ccc;

1831 margin-bottom: $lineheight;

1832 float: left;

1833 margin-right: $lineheight;

1834 }

1835

1836 img.user_thumbnail {

1837 max-width: 50px;

1838 max-height: 50px;

1839 border: 1px solid #ccc;

1840 margin-right: $lineheight;

1841 }

1842

1843 img.user_thumbnail_tiny {

1844 max-width: 25px;

1845 max-height: 25px;

1846 border: 1px solid #ccc;

1847 }

1848

1849 /* Rules for geo microformats */

1850

1851 abbr.geo {

1852 border-bottom: none;

1853 }

1854

1855 /* Rules for RSS buttons */

1856

1857 .rsssmall {

1858 position: relative;

1859 top: 3px;

1860 }

1861

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

1863

1864 ul.secondary-actions {

1865 font-style: normal;

1866 margin-bottom: 0;

1867 margin-left: 0;

1868 &.pager {

1869 display: inline-block;

1870 margin-right: 60px;

1871 }

1872 > li {

1873 display: block;

1874 float: left;

1875 list-style: none;

1876 border-left: 1px solid #ccc;

1877 padding-left: $lineheight/2;

1878 margin-right: $lineheight/2;

1879 &:first-child {

1880 border-left: 0;

1881 padding-left: 0;

1882 }

1883 &:last-child {

1884 margin-right: 0px;

1885 }

1886 }

1887 }

1888

1889 div.secondary-actions {

1890 padding: 10px;

1891 border-top: 1px solid #ccc;

1892 text-align: center;

1893 }

1894

1895 /* Utility for managing inner content areas */

1896

1897 .inner22 { padding: $lineheight;}

1898

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

1900

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

1902

1903 .inner20 { padding: $lineheight 0;}

1904

1905 .inner02 { padding: 0 $lineheight;}

1906

1907 /* Utility for general button styles */

1908

1909 input[type="button"],

1910 input[type="submit"],

1911 input[type="reset"],

1912 a.button {

1913 cursor: pointer;

1914 border: 0;

1915 display: inline-block;

1916 line-height: 20px;

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

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

1919 min-width: 120px;

1920 margin: 0 0 $lineheight/2 0;

1921 color: white;

1922 background: $blue;

1923 text-align: center;

1924 border-radius: 2px;

1925 -moz-border-radius: 2px;

1926 &:hover {

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

1928 text-decoration: none;

1929 }

1930 &.deemphasize {

1931 background: $lightblue;

1932 &:hover {

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

1934 }

1935 }

1936 &:disabled {

1937 background: $lightgrey;

1938 &:hover {

1939 background: $lightgrey;

1940 }

1941 }

1942 &:last-child {

1943 margin-bottom: 0;

1944 }

1945 }

1946

1947 .buttons {

1948 min-width: 200px;

1949 input[type="submit"],

1950 input[type="button"],

1951 input[type="reset"],

1952 .button {

1953 box-sizing: border-box;

1954 float: left;

1955 border-radius: 0;

1956 margin:0;

1957 min-width: 100px;

1958 max-width: 180px;

1959 border-right:1px solid white;

1960 text-overflow: ellipsis;

1961 white-space: nowrap;

1962 overflow: hidden;

1963 }

1964 input:first-child,

1965 .button:first-child {

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

1967 }

1968 input:last-child,

1969 .button:last-child {

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

1971 border-right-width: 0;

1972 }

1973 input:only-child,

1974 .button:only-child,

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

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

1977 border-radius:2px;

1978 border-right-width: 0;

1979 }

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

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

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

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

1984 border-right-width: 0;

1985 }

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

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

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

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

1990 border-right-width: 1px;

1991 }

1992 }

1993

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

1995

1996 .table0,

1997 .item0 {

1998 background: $offwhite;

1999 }

2000

2001 .table1,

2002 .item1 {

2003 background: #fff;

2004 }

2005

2006 /* Rules for OpenID logo */

2007

2008 .openid_logo {

2009 vertical-align: text-bottom;

2010 border: 0;

2011 }

2012

2013 /* Rules for rich text */

2014

2015 .richtext,

2016 .prose {

2017 h1, h2 {

2018 padding-bottom: $lineheight/2;

2019 border-bottom: 1px dashed #cccccc;

2020 margin-bottom: $lineheight/2;

2021 }

2022

2023 h1 {

2024 font-size: 24px;

2025 }

2026

2027 h2 {

2028 font-size: 18px;

2029 }

2030

2031 h3 {

2032 font-size: $typeheight;

2033 }

2034

2035 code {

2036 font-size: 13px;

2037 background: #e8e8e8;

2038 padding: 2px 3px;

2039 }

2040

2041 pre {

2042 font-size: 13px;

2043 background: #e8e8e8;

2044 padding: 2px 3px;

2045

2046 code {

2047 padding: 0;

2048 }

2049 }

2050

2051 img {

2052 padding: $lineheight;

2053 background-color: $offwhite;

2054 display: block;

2055 max-width: 100%;

2056 margin: auto;

2057 }

2058

2059 blockquote {

2060 border-left: $lineheight solid $offwhite;

2061 padding-left: $lineheight;

2062 margin: 0;

2063 color: #7E7E7E;

2064 }

2065

2066 ul, ol {

2067 padding-left: $lineheight;

2068 margin-bottom: $lineheight;

2069 margin-left: $lineheight;

2070 }

2071

2072 ul li {

2073 list-style: disc;

2074 }

2075

2076 ol li {

2077 list-style: decimal;

2078 }

2079 }

2080

2081 .diary_post .richtext {

2082 margin-top: $lineheight;

2083 }

2084

2085 .comments .richtext {

2086 margin-left: 70px;

2087 margin-top: 0;

2088 }

2089

2090 /* Rules for rich text editors */

2091

2092 .richtext_container {

2093 margin-bottom: $lineheight;

2094

2095 .richtext_content {

2096 width: 50%;

2097 display: inline-block;

2098 vertical-align: top;

2099

2100 .richtext_preview {

2101 display: inline-block;

2102 padding: $lineheight;

2103 background-color: $offwhite;

2104 overflow-x: auto;

2105

2106 &.loading {

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

2108 background-repeat: no-repeat;

2109 background-position: center;

2110 }

2111

2112 > :first-child {

2113 margin-top: 0px;

2114 }

2115 }

2116 }

2117

2118 .richtext_help {

2119 display: inline-block;

2120 vertical-align: top;

2121 margin-left: 15px;

2122 background-color: #f8f8ff;

2123 padding: $lineheight/2;

2124 width: 220px;

2125

2126 ul {

2127 margin-bottom: 0;

2128 }

2129

2130 h4.heading, li {

2131 border-bottom: 1px solid #ccc;

2132 margin-bottom: $lineheight/4;

2133 padding-bottom: $lineheight/4;

2134 }

2135

2136 li h4, li span, li p {

2137 display: inline-block;

2138 vertical-align: top;

2139 font-size: 11px;

2140 }

2141

2142 li h4 {

2143 width: 40%;

2144 margin: 0;

2145 }

2146

2147 li span, li p {

2148 width: 50%;

2149 margin-left: $lineheight/2;

2150 margin-bottom: $lineheight/4;

2151 white-space: nowrap;

2152 }

2153 }

2154 }

2155

2156 /* Rules for the user notes list */

2157

2158 .note_list {

2159 tr.creator {

2160 background-color: #eeeeee;

2161 }

2162

2163 td {

2164 padding: 3px;

2165 }

2166

2167 p {

2168 margin-bottom: 0px;

2169 }

2170 }

2171

2172 /* Rules for the notes interface */

2173

2174 .leaflet-popup-content .note {

2175 padding-top: $lineheight/2;

2176 }

2177

2178 .leaflet-popup-content .note {

2179 h2 {

2180 margin-bottom: $lineheight/2;

2181 }

2182

2183 div {

2184 margin-top: $lineheight/2;

2185 }

2186

2187 .permalink {

2188 position: absolute;

2189 top: $lineheight/4;

2190 left: $lineheight/4;

2191 min-width: 15px;

2192 min-height: 15px;

2193 }

2194

2195 .permalink span {

2196 display: none;

2197 padding-left: $lineheight;

2198 }

2199

2200 .permalink:hover span {

2201 display: block;

2202 }

2203

2204 .warning {

2205 display: block;

2206 background-color: #ffe0cc;

2207 padding: 4px 6px;

2208 margin-bottom: $lineheight/2;

2209 }

2210

2211 .comment_body {

2212 margin-top: 2px;

2213 margin-bottom: 2px;

2214

2215 p {

2216 margin-top: 0px;

2217 margin-bottom: 0px;

2218 }

2219 }

2220

2221 .comment {

2222 width: 100%;

2223 height: 100px;

2224 }

2225

2226 .buttons {

2227 margin-top: $lineheight/4;

2228 text-align: right;

2229 }

2230 }

2231

2232 /* Rules for the iD editor */

2233

2234 .id-embed {

2235 width: 100%;

2236 height: 100%;

2237 }

2238

2239 /* Rules for dropdown menus */

2240

2241 .dropdown {

2242 position: relative;

2243 }

2244

2245 .dropdown-toggle {

2246 *margin-bottom: -3px;

2247 }

2248

2249 .dropdown-toggle:active,

2250 .open .dropdown-toggle {

2251 outline: 0;

2252 }

2253

2254 .caret {

2255 display: inline-block;

2256 width: 0;

2257 height: 0;

2258 vertical-align: top;

2259 border-top: 4px solid #000000;

2260 border-right: 4px solid transparent;

2261 border-left: 4px solid transparent;

2262 content: "";

2263 }

2264

2265 .dropdown .caret {

2266 margin-top: 8px;

2267 margin-left: 2px;

2268 }

2269

2270 .dropdown-menu {

2271 position: absolute;

2272 top: 100%;

2273 left: -1px;

2274 z-index: 1000;

2275 display: none;

2276 float: left;

2277 min-width: 160px;

2278 padding: 5px 0;

2279 margin: 0;

2280 list-style: none;

2281 background-color: #ffffff;

2282 border: 1px solid #ccc;

2283 *border-right-width: 2px;

2284 *border-bottom-width: 2px;

2285 -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

2286 -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

2287 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

2288 -webkit-background-clip: padding-box;

2289 -moz-background-clip: padding;

2290 background-clip: padding-box;

2291 }

2292

2293 .dropdown-menu.pull-right {

2294 right: 0;

2295 left: auto;

2296 }

2297

2298 .dropdown-menu .divider {

2299 *width: 100%;

2300 height: 1px;

2301 margin: 9px 1px;

2302 *margin: -5px 0 5px;

2303 overflow: hidden;

2304 background-color: #e5e5e5;

2305 border-bottom: 1px solid #ffffff;

2306 }

2307

2308 .dropdown-menu > li > a {

2309 display: block;

2310 padding: 3px 10px;

2311 clear: both;

2312 font-weight: normal;

2313 line-height: 20px;

2314 color: #333333;

2315 white-space: nowrap;

2316 }

2317

2318 .dropdown-menu > li > a:hover,

2319 .dropdown-menu > li > a:focus,

2320 .dropdown-submenu:hover > a,

2321 .dropdown-submenu:focus > a {

2322 color: #ffffff;

2323 text-decoration: none;

2324 background-color: $green;

2325 }

2326

2327 .dropdown-menu > .active > a,

2328 .dropdown-menu > .active > a:hover,

2329 .dropdown-menu > .active > a:focus {

2330 color: #ffffff;

2331 text-decoration: none;

2332 background-color: $green;

2333 outline: 0;

2334 }

2335

2336 .dropdown-menu > .disabled > a,

2337 .dropdown-menu > .disabled > a:hover,

2338 .dropdown-menu > .disabled > a:focus {

2339 color: #999999;

2340 }

2341

2342 .dropdown-menu > .disabled > a:hover,

2343 .dropdown-menu > .disabled > a:focus {

2344 text-decoration: none;

2345 cursor: default;

2346 background-color: transparent;

2347 background-image: none;

2348 }

2349

2350 .open {

2351 *z-index: 1000;

2352 }

2353

2354 .open > .dropdown-menu {

2355 display: block;

2356 }

2357

2358 .dropdown-backdrop {

2359 position: fixed;

2360 top: 0;

2361 right: 0;

2362 bottom: 0;

2363 left: 0;

2364 z-index: 990;

2365 }

2366

2367 /* Rules for the "Welcome" page */

2368 .site-welcome {

2369 .center {

2370 text-align: center;

2371 .sprite {

2372 float: none;

2373 margin: auto;

2374 }

2375 }

2376

2377 .sprite {

2378 background-image: image-url("welcome-sprite.png");

2379 background-size: 500px 250px;

2380 display: block;

2381 float: left;

2382 }

2383

2384 .icon-list {

2385 padding-bottom: 20px;

2386 div {

2387 margin-bottom: 10px;

2388 p {

2389 padding-top: 10px;

2390 }

2391 }

2392 }

2393 .sprite.small {

2394 width: 50px;

2395 height: 50px;

2396 }

2397

2398 .sprite.x {

2399 background-position: -50px 0;

2400 }

2401

2402 .sprite.term {

2403 margin-right: 10px;

2404 vertical-align: middle;

2405 }

2406

2407 .sprite.node {

2408 background-position: -100px 0;

2409 }

2410

2411 .sprite.way {

2412 background-position: -150px 0;

2413 }

2414

2415 .sprite.tag {

2416 background-position: -200px 0;

2417 }

2418

2419 .sprite.editor {

2420 background-position: -250px 0;

2421 }

2422

2423 .sprite.question {

2424 background-position: -300px 0;

2425 }

2426

2427 .start-mapping {

2428 margin: auto;

2429 cursor: pointer;

2430 border: none;

2431 padding: 20px 40px;

2432 font-size: 30px;

2433 text-decoration: none;

2434 }

2435

2436 .note-box {

2437 margin-top: 20px;

2438 background-color: $offwhite;

2439 }

2440

2441 .icon.note {

2442 background-color: #333;

2443 border-radius: 4px;

2444 }

2445 }

2446

2447 .site-about #content {

2448 background-color: #000;

2449 background-position: 50% 50%;

2450 background-repeat: no-repeat;

2451 background-size: cover;

2452 background-attachment: fixed;

2453

2454 &.photo-0 { background-image: image-url('about/0.jpg'); .photo-0 { display: block; } }

2455 &.photo-1 { background-image: image-url('about/1.jpg'); .photo-1 { display: block; } }

2456 &.photo-2 { background-image: image-url('about/2.jpg'); .photo-2 { display: block; } }

2457 &.photo-3 { background-image: image-url('about/4.jpg'); .photo-3 { display: block; } }

2458 &.photo-4 { background-image: image-url('about/4.jpg'); .photo-4 { display: block; } }

2459 &.photo-5 { background-image: image-url('about/5.jpg'); .photo-5 { display: block; } }

2460

2461 .caption {

2462 max-width: 200px;

2463 font: 13px/20px Helvetica, Arial, sans-serif;

2464 position: fixed;

2465 text-align: right;

2466 right: 20px;

2467 bottom: 60px;

2468 text-shadow: #000 0px 1px 5px;

2469 color: #eee;

2470 opacity: 0.8;

2471 display: none;

2472 }

2473

2474 .caption a {

2475 color: white;

2476 white-space: nowrap;

2477 text-decoration: none;

2478 }

2479

2480 a.next {

2481 display: block;

2482 position: fixed;

2483 right: 10px;

2484 bottom: 10px;

2485 width: 40px;

2486 height: 40px;

2487 border-radius: 5px;

2488 text-indent: -9999px;

2489 overflow: hidden;

2490 background: image-url('about/sprite.png') -120px 0px no-repeat;

2491 background-color: #000;

2492 background-color: rgba(0, 0, 0, 0.5);

2493 }

2494

2495 .content-inner {

2496 position: relative;

2497 color: #333;

2498 min-width: 320px;

2499 max-width: 640px;

2500

2501 .section {

2502 margin-bottom: 30px;

2503 }

2504

2505 .section:last-child {

2506 margin-bottom: 0;

2507 }

2508 }

2509

2510 .text {

2511 background: white;

2512 padding: 40px;

2513 }

2514

2515 .attr {

2516 position: relative;

2517 padding: 170px 40px 20px;

2518 background: #333;

2519 background: rgba(0, 0, 0, .8);

2520 margin-bottom: 0;

2521 margin-top: -20px;

2522

2523 h1 {

2524 display: block;

2525 color: white;

2526 font-weight: 300;

2527 font-size: 34px;

2528 span {

2529 color: #76c551;

2530 }

2531 }

2532

2533 .user-image {

2534 position: absolute;

2535 top: 0px;

2536 right: 240px;

2537 left: 0px;

2538 height: 150px;

2539 background-position: 0 50%;

2540 background-repeat: no-repeat;

2541 background-image: image-url('about/osm.png');

2542 background-size: cover;

2543 background-color: #76c551;

2544 }

2545

2546 .byosm {

2547 position: absolute;

2548 top: 0px;

2549 right: 0px;

2550 z-index: 1;

2551 width: 240px;

2552 height: 150px;

2553 padding: 20px 20px 20px 40px;

2554 font: 500 20px/24px Helvetica, Arial, sans-serif;

2555 white-space: nowrap;

2556 color: #fff;

2557 background: #76c551;

2558 }

2559

2560 .byosm span {

2561 display: inline-block;

2562 width: 20px;

2563 margin-left: -20px;

2564 }

2565 }

2566

2567 h2 {

2568 margin-bottom: 10px;

2569 }

2570

2571 .icon {

2572 width: 30px;

2573 height: 30px;

2574 margin-right: 10px;

2575 vertical-align: middle;

2576 background: 40px 40px image-url('about/sprite.png') no-repeat;

2577

2578 &.local { background-position: 0px 0px; }

2579 &.community { background-position: 0px -40px; }

2580 &.open { background-position: 0px -80px; }

2581 &.contributors { background-position: 0px -120px; }

2582 &.infringement { background-position: 0px -160px; }

2583 }

2584 }

2585

2586 @import 'browse';