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.close:hover { background-position: -200px -20px; }

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

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

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

188

189 /* Rules for links */

190

191 a {

192 color: #00f;

193 text-decoration: none;

194 -webkit-appearance: none;

195 outline: 0;

196 &:hover {

197 text-decoration: underline;

198 }

199 }

200

201 /* Rules for horizontal lines */

202

203 hr {

204 border: none;

205 background-color: #ccc;

206 color: #ccc;

207 height: 1px;

208 }

209

210 /* General styles for tables */

211

212 table {

213 width: 100%;

214 margin-bottom: $lineheight;

215 th, td {

216 text-align: left;

217 padding: $lineheight/4;

218 line-height: $lineheight;

219 }

220 th {

221 font-weight: 500;

222 vertical-align: top;

223 }

224 td {

225 vertical-align: middle;

226 }

227 }

228

229 /* Utility for de-emphasizing content */

230

231 .deemphasize {

232 color: #999;

233 a {

234 color: $blue;

235 }

236 }

237

238 /* Rules for the header */

239

240 #menu-icon {

241 display: none !important;

242 float: right;

243 background: url("/assets/menu-icon.png") no-repeat;

244 background-size: 30px 30px;

245 display: block;

246 width: 30px;

247 height: 30px;

248 margin: 14px 10px 0 0;

249 opacity: 0.6;

250 }

251

252 header {

253 height: $headerHeight;

254 position: relative;

255 z-index: 1001;

256 font-size: 13px;

257

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

259 display: inline-block;

260 }

261

262 > * {

263 height: 100%;

264 padding: $lineheight/2 $lineheight;

265 }

266

267 h1, nav.primary {

268 float: left;

269 }

270

271 a, a:hover {

272 text-decoration: none;

273 }

274

275 img.logo {

276 width: 30px;

277 height: 30px;

278 margin-top: -4px;

279 vertical-align: middle;

280 }

281

282 h1 {

283 margin: 0;

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

285

286 a {

287 color: #000;

288 }

289 }

290 }

291

292 nav.primary {

293 > ul {

294 $border: 1px solid $green;

295

296 border: $border;

297 border-radius: $border-radius;

298

299 > li {

300 border-right: $border;

301 float: left;

302 &:last-child {

303 border-right: 0;

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

305 }

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

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

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

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

310 &.dropdown {

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

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

313 }

314 }

315 }

316

317 a.tab,

318 .dropdown-toggle {

319 display: inline-block;

320 font-weight: 500;

321 color: $green;

322 padding: 5px 15px;

323 }

324

325 .dropdown-toggle {

326 padding: 5px 6px;

327 }

328

329 .caret {

330 border-top-color: $green;

331 margin-top: 10px;

332 }

333

334 .disabled a {

335 color: #ccc;

336 cursor: default;

337

338 .caret {

339 border-top-color: #ccc;

340 }

341 }

342

343 > ul li.current {

344 background-color: $green;

345

346 .tab {

347 color: #fff;

348 }

349

350 .caret {

351 border-top-color: #fff;

352 }

353 }

354 }

355

356 nav.secondary {

357 position: absolute;

358 right: 0;

359

360 > ul {

361 vertical-align: middle;

362 a, .dropdown-toggle {

363 display: inline-block;

364 text-decoration: none;

365 color: $darkgrey;

366 padding: 5px;

367

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

369 }

370 }

371

372 > ul li.current a {

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

374 }

375

376 .user-menu {

377 $border: 1px solid $grey;

378

379 font-weight: 500;

380 border: $border;

381 border-radius: $border-radius;

382 margin-left: 10px;

383

384 > li {

385 border-right: $border;

386 float: left;

387 &:last-child {

388 border-right: 0;

389

390 > a {

391 border-radius: 0 $border-radius $border-radius 0;

392 }

393 }

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

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

396 }

397

398 a {

399 padding: 5px 15px;

400

401 }

402

403 &.logged-in > a {

404 padding: 0;

405 > .user-button {

406 padding: 5px 10px 5px 6px;

407 display: inline-block;

408 color: $darkgrey;

409 }

410 &:hover > .user-button { color: darken($darkgrey, 5%); }

411 }

412 }

413

414 .caret {

415 border-top-color: $grey;

416 margin-top: 9px;

417 }

418

419 img.user_thumbnail_tiny {

420 border: 0;

421 vertical-align: top;

422 margin-top: 0px;

423 margin: 3px 0 0 3px;

424 border-radius: 2px;

425 }

426

427 #inboxanchor {

428 display: inline-block;

429 vertical-align: top;

430 height: 25px;

431 margin: 3px 0 3px 3px;

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

433 line-height: 20px;

434 border-radius: 2;

435 }

436

437 .dropdown-menu {

438 left: auto;

439 right: -1px;

440 border-radius: 3px 0 3px 3px;

441

442 .count-number {

443 float: right;

444 padding: 0 5px;

445 margin: 0;

446 }

447 }

448 }

449

450 #compact-secondary-nav {

451 display: none;

452 ul li a {

453 width: 100%;

454 color: #333;

455 &:hover { color: #fff; }

456 }

457 }

458

459 @media only screen and (max-width:960px) {

460 #compact-secondary-nav {

461 display: inline-block;

462 }

463 .compact-hide {

464 display: none;

465 }

466 }

467

468

469 /* Utility for styling notification numbers */

470

471 .count-number {

472 padding: 2px $lineheight/4;

473 border-radius: 2px;

474 background: lighten($green, 30%);

475 margin: 0 2px;

476 font-size: 11px;

477 color: #333;

478 }

479

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

481

482 #noscript {

483 z-index: 20000000;

484 position: absolute;

485 top: 15px;

486 left: 15px;

487 }

488

489 /* Rules for bootstrap tooltips */

490

491 .tooltip {

492 position: absolute;

493 display: none;

494 color: #333;

495 text-align: left;

496 font-size: 12px;

497 max-width: 250px;

498 }

499

500 .tooltip.in {

501 opacity: 0.8;

502 z-index: 1030;

503 height: auto;

504 display: block;

505 }

506

507 .tooltip.top {

508 margin-top: -10px;

509 text-align: center;

510 }

511

512 .tooltip.right {

513 margin-left: 10px;

514 }

515

516 .tooltip.bottom {

517 margin-top: 10px;

518 text-align: center;

519 }

520

521 .tooltip.left {

522 margin-left: -10px;

523 text-align: right;

524 }

525

526 .tooltip-inner {

527 display: inline-block;

528 padding: 10px;

529 font-weight: normal;

530 background-color: white;

531 }

532

533 .tooltip-arrow {

534 position: absolute;

535 width: 0;

536 height: 0;

537 border-color: transparent;

538 border-style: solid;

539 }

540

541 .tooltip.top .tooltip-arrow {

542 bottom: -5px;

543 left: 50%;

544 margin-left: -5px;

545 border-top-color: white;

546 border-width: 5px 5px 0;

547 }

548

549 .tooltip.right .tooltip-arrow {

550 top: 50%;

551 left: -5px;

552 margin-top: -5px;

553 border-right-color: white;

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

555 }

556

557 .tooltip.left .tooltip-arrow {

558 top: 50%;

559 right: -5px;

560 margin-top: -5px;

561 border-left-color: white;

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

563 }

564

565 .tooltip.bottom .tooltip-arrow {

566 top: -5px;

567 left: 50%;

568 margin-left: -5px;

569 border-bottom-color: white;

570 border-width: 0 5px 5px;

571 }

572

573 /* Rules for Leaflet maps */

574

575 .leaflet-control .control-button {

576 display: block;

577 height: 40px;

578 width: 40px;

579 background-color: #333;

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

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

582 margin-bottom: 10px;

583 outline: none;

584

585 &:hover {

586 background-color: black;

587 }

588

589 &.active {

590 background-color: #9ed485;

591 }

592

593 &.disabled {

594 background-color: #333;

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

596 cursor: default;

597 }

598

599 .icon {

600 margin: 10px;

601 }

602 }

603

604 .leaflet-control .zoomin,

605 .control-layers .control-button {

606 margin-bottom: 0px;

607 border-radius: 4px 0 0 0;

608 }

609

610 .leaflet-control .zoomout,

611 .control-key .control-button {

612 margin-bottom: 0;

613 border-radius: 0;

614 }

615

616 .control-locate .control-button,

617 .control-share .control-button {

618 border-radius: 0 0 0 4px;

619 }

620

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

622

623 .map-layout {

624 #content {

625 position: absolute;

626 top: $headerHeight;

627 bottom: 0;

628 width: 100%;

629 }

630

631 #sidebar, #map {

632 position: relative;

633 height: 100%;

634 overflow-x: hidden;

635 overflow-y: auto;

636 }

637

638 #sidebar {

639 float: left;

640 width: $sidebarWidth;

641

642 h2, h3, h4 {

643 padding: $lineheight $lineheight $lineheight/2;

644 }

645

646 h4, span.user, span.date {

647 font-weight: normal;

648 color: #666;

649 font-size: 12px;

650 }

651

652 .icon.close {

653 position: absolute;

654 right: $lineheight;

655 cursor: pointer;

656 }

657

658 .footer {

659 position: absolute;

660 bottom: 0;

661 }

662

663 p.credits {

664 font-size: 11px;

665 color: #999;

666

667 a {

668 color: #666;

669 }

670 }

671

672 p.large-text {

673 font-size: 1.7em;

674 line-height: 1.4em;

675 font-weight: 300;

676 }

677 }

678

679 #sidebar.minimized {

680 position: absolute;

681 z-index: 1000;

682 height: auto;

683 border-right: none;

684

685 #sidebar_content {

686 display: none;

687 }

688

689 #search_form {

690 background: none;

691 width: 78%;

692 }

693 }

694

695 #map {

696 height: 100%;

697 overflow: hidden;

698 }

699

700 #map-ui {

701 display: none;

702 position: relative;

703 float: right;

704 width: 250px;

705 height: 100%;

706 background: white;

707 overflow: auto;

708

709 .section {

710 border-bottom: 1px solid #DDD;

711 padding: 10px 20px;

712 }

713

714 a.close-button {

715 float: right;

716 padding:5px;

717 font-size:20px;

718 line-height:10px;

719 color:#222;

720 border:1px solid #ddd;

721 }

722 }

723 }

724

725 .layers-ui,

726 .share-ui {

727 li:last-child {

728 margin-bottom: 0;

729 }

730 }

731

732 .layers-ui {

733 .base-layers {

734 .leaflet-container {

735 width: 100%;

736 height: 50px;

737 cursor: pointer;

738 }

739

740 li {

741 overflow: hidden;

742 border-radius: 3px;

743 border: 2px solid #fff;

744 margin-bottom: 8px;

745 position: relative;

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

747

748 label {

749 position: absolute;

750 top: 0;

751 left: 0;

752 padding: 2px 6px;

753 border-bottom-right-radius: 3px;

754 cursor: pointer;

755 font-weight: 500;

756 font-size: 16px;

757 text-stroke: 2px #fff;

758 background: rgba(255,255,255,.9);

759 text-shadow:

760 -2px -2px 1px #fff,

761 2px -2px 1px #fff,

762 -2px 2px 1px #fff,

763 2px 2px 1px #fff;

764 input[type="radio"] {

765 display: none;

766 }

767 }

768

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

770 &:hover {

771 border-color: $grey;

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

773 }

774 }

775 }

776

777 .overlay-layers {

778 p {

779 font-size: 13px;

780 margin-bottom: 8px;

781 }

782 }

783 }

784

785 .share-ui {

786 .share-tabs {

787 margin-bottom: 10px;

788

789 a {

790 color: #fff;

791 text-decoration: none;

792 background-color: $lightblue;

793 padding: 5px 10px;

794 }

795

796 a:first-child {

797 border-right: 1px solid #fff;

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

799 }

800

801 a:last-child {

802 border-left: 1px solid #fff;

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

804 }

805

806 a.active {

807 background-color: $blue;

808 }

809 }

810

811 .share-tab {

812 display: none;

813 }

814

815 .share-link {

816 input[type=text],

817 textarea {

818 width: 100%;

819 font-family: monospace;

820 font-size: small;

821 line-height: 1.3;

822 }

823 }

824

825 .share-image {

826 label {

827 margin-right: 10px;

828 }

829 }

830

831 #embed_html {

832 resize: vertical;

833 }

834

835 #mapnik_scale {

836 width: 100px;

837 }

838 }

839

840 .leaflet-top.leaflet-right {

841 top: $lineheight !important;

842 .leaflet-control {

843 margin-right: 0px !important;

844 margin-top: 0px !important;

845 }

846 }

847

848 .leaflet-popup-scrolled {

849 padding-right: $lineheight;

850 border-bottom: 0px !important;

851 border-top: 0px !important;

852 }

853

854 .leaflet-popup-content-wrapper {

855 border-radius: 4px !important;

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

857 }

858

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

860

861 #attribution {

862 display: none;

863 }

864

865 .attribution_license,

866 .attribution_project {

867 text-align: left;

868 }

869

870 .attribution_notice {

871 text-align: center;

872 }

873

874 .donate-attr { color: darken($green, 10%) !important; }

875

876 /* Rules for the sidebar */

877

878 .sidebar_heading {

879 position: relative;

880 padding: $lineheight/2 $lineheight;

881 // background: $offwhite;

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

883 > .close {

884 float: right;

885 margin-top: 2px;

886 cursor: pointer;

887 }

888 }

889

890 #sidebar_content {

891 position: absolute;

892 top: 50px;

893 bottom: 0;

894 width: 100%;

895 overflow-y: auto;

896

897 .loader,

898 .load_more {

899 text-align: center;

900 margin: $lineheight auto;

901 width: $lineheight;

902 display: block;

903 }

904 }

905

906 /* Rules for the search box */

907

908 #search_form {

909 position: relative;

910 padding: $lineheight/2 $lineheight;

911 background-color: $lightgrey;

912

913 #query_wrapper {

914 position: relative;

915 overflow: hidden;

916 }

917

918 input {

919 width: 100%;

920 height: 30px;

921 border-right: none;

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

923

924 transition: 300ms linear;

925 -webkit-transition: 300ms linear;

926 -moz-transition: 300ms linear;

927 }

928

929 input:focus {

930 outline: none;

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

932 }

933

934 input[type=submit] {

935 float: right;

936 width: auto;

937 min-width: 0;

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

939 }

940

941 #describe_location {

942 position: absolute;

943 top: 6px;

944 right: 6px;

945 font-size: 10px;

946 color: $blue;

947 }

948 }

949

950 /* Rules for donation request box */

951

952 a.donate {

953 display: block;

954 padding: $lineheight/4 $lineheight;

955 border: 1px solid $green;

956 font-size: $typeheight;

957 line-height: 1.4;

958 text-align: center;

959 border-radius: 2px;

960 color: #222;

961 margin: $lineheight/2 $lineheight;

962

963 &:hover {

964 background: $green;

965 text-decoration: none;

966 }

967 }

968

969 /* Rules for rotating sidebar ads */

970

971 .ad-container {

972 display: block;

973 height: 120px;

974 margin: auto;

975 overflow: hidden;

976 position: relative;

977 border-bottom: 1px solid #ccc;

978

979 a {

980 display: block;

981 width: 165px;

982 margin: auto;

983 }

984

985 .ad {

986 height: 100px;

987 border: 0;

988 background: #fff;

989 }

990 }

991

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

993

994 #mapkey {

995 .mapkey-table-key img {

996 display: block;

997 margin-left: auto;

998 margin-right: auto;

999 }

1000 td {

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

1002 }

1003 }

1004

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

1006

1007 .search_results_entry {

1008 ul li {

1009 border-bottom: $keyline;

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

1011 }

1012

1013 .search_details {

1014 display: block;

1015 float: right;

1016 text-align: right;

1017 margin-top: 0.2em;

1018 margin-left: 0.5em;

1019 }

1020 }

1021

1022 .search_results_error {

1023 color: #f00;

1024 }

1025

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

1027

1028 #browse_content {

1029 position: relative;

1030 .browse_show_list.button {

1031 position: absolute;

1032 left: $lineheight;

1033 right: $lineheight;

1034 bottom: -40px;

1035 margin-bottom: 0;

1036 }

1037 a.more-details {

1038 position: absolute;

1039 top: 0;

1040 right: $lineheight;

1041 }

1042 ul li {

1043 margin-bottom: 0;

1044 }

1045 }

1046

1047 /* Rules for entity history */

1048 #sidebar_content {

1049 .browse_details {

1050 position: relative;

1051 border-bottom: $keyline;

1052 }

1053 }

1054

1055 .browse_status {

1056 display: none;

1057 }

1058

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

1060

1061 #sidebar .changesets {

1062 li {

1063 padding: $lineheight;

1064 border-bottom: $keyline;

1065 cursor: pointer;

1066

1067 &.selected { background: #FFFFE6; }

1068 /* color is derived from changeset bbox fillColor in history.js */

1069 }

1070

1071 .comment a {

1072 font-weight: 500;

1073 color: #000;

1074 }

1075 }

1076

1077 /* Rules for the data browser */

1078

1079 #sidebar_content {

1080 .browse-section {

1081 padding: 10px 20px;

1082

1083 h4 {

1084 padding: 0;

1085 border-radius: 3px;

1086

1087 &.paginate {

1088 margin-top: 4px;

1089 padding: 1px 6px;

1090 border: 1px solid #eee;

1091 span {

1092 padding: 0 0 0 14px;

1093 float: right;

1094 border-left: 1px solid #eee;

1095 > a { padding-left: 5px; }

1096 }

1097 }

1098 }

1099 }

1100

1101 .paginate ul, .note-comments ul {

1102 padding-left: 20px;

1103 }

1104

1105 .browse-field {

1106 margin-bottom: 10px;

1107

1108 h4 {

1109 padding: 5px 0 5px 10px;

1110 font-size: 12px;

1111 border: 1px solid #CCC;

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

1113 background-color: #F6F6F6;

1114 }

1115

1116 p {

1117 padding: 7px 10px;

1118 font-size: 12px;

1119 background-color: #FFF;

1120 border: 1px solid #CCC;

1121 border-top: 0;

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

1123 }

1124 }

1125

1126 .browse-tag-list {

1127 border-top: 1px solid #ddd;

1128 border-bottom: 1px solid #ddd;

1129 font-size: 12px;

1130 margin-left: -$lineheight;

1131 margin-right: -$lineheight;

1132

1133 li {

1134 border-bottom: 1px solid #ddd;

1135 }

1136

1137 li:last-child {

1138 border-bottom: 0;

1139 }

1140

1141 .browse-tag-k,

1142 .browse-tag-v {

1143 display: inline-block;

1144 width: 50%;

1145 height: 30px;

1146 float: left;

1147 padding: 6px 10px 6px $lineheight;

1148 }

1149

1150 .browse-tag-k {

1151 font-weight: 500;

1152 background-color: #F6F6F6;

1153 }

1154

1155 .browse-tag-v {

1156 border-left: 1px solid #ddd;

1157 }

1158 }

1159 }

1160

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

1162

1163 .export_bounds {

1164 text-align: center;

1165 }

1166

1167 .export_area_inputs {

1168 margin-bottom: $lineheight/2;

1169 input[type="text"] {

1170 width: 80px;

1171 margin-bottom: 5px;

1172 }

1173 }

1174

1175 .export_bound {

1176 margin: $lineheight/4;

1177 }

1178

1179 #export_osm {

1180 span.small-title {

1181 font-weight: 500;

1182 display: block;

1183 font-size: 14px;

1184 padding-bottom: 5px;

1185 }

1186

1187 dl {

1188 padding-left: 30px;

1189 font-size: 13px;

1190 color: #666;

1191 dd {

1192 margin-left: 0;

1193 margin-bottom: 10px;

1194 }

1195 }

1196 }

1197

1198 /* Rules for edit pages */

1199

1200 .site-edit {

1201 #content {

1202 position: absolute;

1203 top: $headerHeight;

1204 bottom: 0;

1205 width: 100%;

1206 }

1207

1208 #map {

1209 height: 100%;

1210 }

1211 }

1212

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

1214

1215 .content-heading {

1216 background: $lightgrey;

1217

1218 h1 { font-size: 22px; }

1219 }

1220

1221 .content-body {

1222 h1, h2, h3, p {

1223 margin-bottom: $lineheight;

1224 }

1225

1226 h1, h2, h3 {

1227 margin-top: $lineheight/2;

1228 }

1229 }

1230

1231 .content-inner {

1232 position: relative;

1233 max-width: 900px;

1234 margin: auto;

1235 padding: $lineheight;

1236 }

1237

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

1239

1240 .user-new,

1241 .user-create,

1242 .user-terms {

1243 .content-body .content-inner {

1244 padding: 0;

1245 }

1246 }

1247

1248 .user-new,

1249 .user-create,

1250 .user-terms,

1251 .user-confirm {

1252 .content-heading .content-inner {

1253 height: 200px;

1254 }

1255 }

1256

1257 .header-illustration {

1258 background-position: 0 0;

1259 background-repeat: no-repeat;

1260 position: absolute;

1261 height: 200px;

1262 width: 100%;

1263 left: 0;

1264 bottom: 0;

1265

1266 &.new-user-main {

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

1268 }

1269

1270 &.confirm-main {

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

1272 }

1273

1274 &.new-user-terms {

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

1276 }

1277

1278 &.new-user-arm {

1279 height: 110px;

1280 width: 130px;

1281 left: 260px;

1282 top: 160px;

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

1284 z-index: 100;

1285 }

1286 }

1287

1288 #content.maximised {

1289 top: 0;

1290 left: 0;

1291 right: 0;

1292 bottom: 0;

1293 border: 0;

1294 z-index: 1000;

1295 }

1296

1297 #slim_container {

1298 width: 100%;

1299 }

1300

1301 #slim_container_content {

1302 max-width: 50em;

1303 background-color: #FFFFFF;

1304 margin: $lineheight/2 auto;

1305 padding: 3px;

1306 border-radius: 25px;

1307 -moz-border-radius: 25px;

1308 border: 1px solid #e6e6e6;

1309 }

1310

1311 #slim_content {

1312 margin: $lineheight/2;

1313 margin-top: 95px;

1314 max-width: 50em;

1315

1316 .content-heading {

1317 margin-bottom: 15px;

1318 }

1319 }

1320

1321 #slim_header {

1322 margin: 30px $lineheight/2;

1323 position: absolute;

1324 top: 0px;

1325 margin-right: $lineheight/4;

1326 img {

1327 vertical-align: middle;

1328 margin-bottom: $lineheight/4;

1329 margin-right: $lineheight/4;

1330 }

1331 }

1332

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

1334

1335 .content_map {

1336 position: relative;

1337 width: 45%;

1338 height: 400px;

1339 border: 1px solid #ccc;

1340 margin-bottom: $lineheight;

1341 float: right;

1342 }

1343

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

1345

1346 #trace_list {

1347 font-size: $lineheight/2;

1348 border-width: 0px;

1349 text-align: right;

1350

1351 .trace_summary {

1352 font-size: 12px;

1353 color: gray;

1354 }

1355

1356 .trace_pending {

1357 color: red;

1358 }

1359

1360 .trace_public {

1361 color: green;

1362 }

1363

1364 .trace_identifiable {

1365 color: green;

1366 }

1367

1368 .trace_trackable {

1369 color: red;

1370 }

1371

1372 .trace_private {

1373 color: red;

1374 }

1375 }

1376

1377 /* Rules for the user profile page */

1378

1379 #userinformation {

1380

1381 min-height: 100px;

1382 .userinformation-inner {

1383 float: left;

1384 }

1385 h2 {

1386 margin-top: 0;

1387 }

1388 .user-description {

1389 width: 100%;

1390 clear: both;

1391 }

1392 .deemphasize {

1393 margin: 0;

1394 }

1395 }

1396

1397 .admin-user-info small {

1398 margin-bottom: $lineheight/2;

1399 display: inline;

1400 margin-right: $lineheight;

1401 }

1402

1403 .activity-block {

1404 clear: left;

1405 border-bottom: 1px solid #ccc;

1406 padding-bottom: $lineheight;

1407 float: left;

1408 h3 {

1409 margin-bottom: $lineheight/2;

1410 }

1411 }

1412

1413 .contact-activity {

1414 margin-top: $lineheight;

1415 width: 100%;

1416 }

1417

1418 .activity-details p {

1419 margin-left: 70px;

1420 margin-bottom: 0;

1421 }

1422

1423 #friends-container .contact-activity ul {

1424 margin-left: 70px;

1425 }

1426

1427 .user-view {

1428 p#no_home_location {

1429 margin: $lineheight;

1430 }

1431 .user_thumbnail {

1432 margin-top: $lineheight/4;

1433 float: left;

1434 }

1435 }

1436

1437 /* Rules for the user map */

1438

1439 .content_map .leaflet-popup-content {

1440 margin: $lineheight/2;

1441 min-height: 50px;

1442 }

1443

1444 /* Rules for user popups on maps */

1445

1446 .user_popup {

1447 min-width: 200px;

1448 p {

1449 padding: 0 0 5px 0;

1450 margin-top: 0 0 0 60px;

1451 font-size: 12px;

1452 }

1453 img.user_thumbnail {

1454 float: left;

1455 margin: 0 $lineheight/2 0 0;

1456 }

1457 }

1458

1459 /* Rules for the user list */

1460

1461 #user_list {

1462 font-size: $lineheight/2;

1463 width: 100%;

1464

1465 tr {

1466 vertical-align: middle;

1467 }

1468

1469 p {

1470 margin-top: 0px;

1471 margin-bottom: 0px;

1472 }

1473 }

1474

1475 #user_list_actions {

1476 float: right;

1477 margin-top: $lineheight/2;

1478 }

1479

1480 /* Rules for the diary list page */

1481

1482 .diary_post {

1483 position: relative;

1484 margin-top: $lineheight/2;

1485 padding-top: $lineheight;

1486 border-top: 1px solid #ccc;

1487

1488 .post_heading {

1489 margin-bottom: $lineheight;

1490

1491 h2 {

1492 margin-top: 0;

1493 margin-bottom: $lineheight/2;

1494 font-size: 24px;

1495 }

1496 }

1497

1498 img.user_thumbnail {

1499 float: left;

1500 }

1501

1502 small.deemphasize {

1503 float: left;

1504 display: block;

1505 }

1506

1507 ul.secondary-actions {

1508 display: inline-block;

1509 }

1510 }

1511

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

1513 display: inline;

1514 }

1515

1516 /* Rules for the diary entry page */

1517

1518 .diary_entry {

1519 #map {

1520 position: relative;

1521 width: 90%;

1522 height: 400px;

1523 border: 1px solid #ccc;

1524 display: none;

1525 margin-bottom: $lineheight;

1526 }

1527 #newcomment {

1528 border-top: 1px solid #ccc;

1529 padding-top: $lineheight;

1530 margin-top: $lineheight/2;

1531 }

1532 .comments {

1533 max-width: 740px;

1534 }

1535 .diary-comment {

1536 margin-top: $lineheight/2;

1537 border-top: 1px dashed #ccc;

1538 padding-top: $lineheight/2;

1539 &:first-child {

1540 margin-top: $lineheight;

1541 padding-top: $lineheight;

1542 border-top: 1px solid #ccc;

1543 }

1544 p {

1545 margin-bottom: $lineheight/2;

1546 }

1547 .comment-heading {

1548 margin-bottom: 0;

1549 margin-top: 0;

1550 }

1551 }

1552 }

1553

1554 .diary_entry-view img.user_thumbnail {

1555 float: left;

1556 }

1557

1558 /* Rules for the log in page */

1559

1560 #login_openid_buttons {

1561 margin-bottom: 0;

1562 }

1563

1564 #login_openid_buttons li {

1565 float: left;

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

1567 }

1568

1569 /* Rules for the account confirmation page */

1570

1571 .user-terms {

1572 .legale {

1573 border: 1px solid #ccc;

1574 padding: $lineheight;

1575 margin-bottom: $lineheight;

1576 overflow: auto;

1577 height: 10em;

1578 }

1579

1580 #decline {

1581 background: $lightblue;

1582 &:hover {

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

1584 }

1585 }

1586

1587 .form-row {

1588 margin: auto;

1589 max-width: 370px;

1590 }

1591 }

1592

1593 /* Rules for the account settings page */

1594

1595 #accountForm .user_map {

1596 position: relative;

1597 width: 500px;

1598 height: 400px;

1599 border: 1px solid #ccc;

1600 }

1601

1602 #accountForm .user_image {

1603 margin-bottom: 0;

1604 }

1605

1606 #accountForm #user_image {

1607 margin-left: 20px;

1608 }

1609

1610 #accountForm ul.accountImage-options {

1611 margin-left: 120px;

1612 }

1613

1614 .nohome .location {

1615 display: none;

1616 }

1617

1618 #homerow .message {

1619 display: none;

1620 }

1621

1622 .nohome .message {

1623 display: inline !important;

1624 }

1625

1626 .content_map.settings_map {

1627 width: 50%;

1628 float: none;

1629 }

1630

1631 /* Rules for the oauth settings page */

1632

1633 .oauth_clients .buttons .oauth-edit {

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

1635 }

1636

1637 .oauth_clients .buttons .oauth-delete {

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

1639 }

1640

1641 /* Rules for messages pages */

1642

1643 .messages {

1644 width: 100%;

1645 border: 1px solid #ddd;

1646

1647 input[type="submit"] {

1648 margin: auto;

1649 }

1650 tbody tr {

1651 border-top: 1px solid #ccc;

1652 }

1653

1654 .inbox-row {

1655 background: #f8f8ff;

1656 }

1657

1658 .inbox-row-unread {

1659 background:#CBEEA7;

1660 }

1661

1662 .right {

1663 float: right;

1664 }

1665

1666 tr td,

1667 tr th {

1668 padding: $lineheight/4;

1669 }

1670 p:last-child,

1671 h2:last-child,

1672 h3:last-child,

1673 ol:last-child,

1674 ul:last-child {

1675 margin-bottom:0;

1676 }

1677 tr td {

1678 height: 30px;

1679 border-right: 1px solid $lightgrey;

1680 }

1681 }

1682

1683 .inbox-row .inbox-mark-read {

1684 display: none;

1685 }

1686

1687 .info-line {

1688 margin-bottom: $lineheight;

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

1690 border-bottom: 1px solid #ccc;

1691

1692 form, form div {

1693 display: inline;

1694 }

1695 }

1696

1697 .info-line .user_thumbnail_tiny {

1698 vertical-align: middle;

1699 }

1700

1701 .inbox-mark-unread,

1702 .inbox-mark-read,

1703 .inbox-delete {

1704 width: 1%;

1705 }

1706

1707 .inbox-row-unread .inbox-mark-unread {

1708 display: none;

1709 }

1710

1711 .message-read .message-buttons {

1712 margin-top: $lineheight;

1713 padding-top: $lineheight;

1714 border-top: 1px solid $lightgrey;

1715 }

1716

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

1718 border-radius: 0;

1719 }

1720

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

1722

1723 .error {

1724 padding: $lineheight;

1725 background-color: #ff7070;

1726 }

1727

1728 .warning {

1729 padding: $lineheight;

1730 background-color: #ffe0cc;

1731 }

1732

1733 .notice {

1734 padding: $lineheight;

1735 background-color: #CBEEA7;

1736 }

1737

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

1739

1740 .field_with_errors {

1741 padding: 2px;

1742 background-color: #ff7070;

1743 display: inline-block;

1744 }

1745

1746 .formError {

1747 display: inline-block;

1748 padding: 5px 10px;

1749 margin-top: 5px;

1750 border-radius: 4px;

1751 font-size: 12px;

1752 color: #fff;

1753 background-color: #ff7070;

1754 }

1755

1756 /* Rules for rails validation error boxes */

1757

1758 #errorExplanation {

1759 width: 400px;

1760 border: 2px solid #ff7070;

1761 padding: 0 $lineheight/2;

1762 margin-bottom: $lineheight;

1763 background-color: #f0f0f0;

1764

1765 h2 {

1766 margin: 0 -10px 10px -10px;

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

1768 font-weight: 500;

1769 font-size: 12px;

1770 background-color: #c00;

1771 color: #fff;

1772 text-align: left;

1773 }

1774

1775 p {

1776 color: #333;

1777 margin-bottom: 0px;

1778 padding: $lineheight/4;

1779 }

1780

1781 ul {

1782 padding-left: $lineheight;

1783

1784 li {

1785 font-size: 12px;

1786 list-style: disc;

1787 }

1788 }

1789 }

1790

1791 /* Rules for forms */

1792

1793 .standard-form {

1794 fieldset {

1795 margin-bottom: $lineheight;

1796 }

1797 label.standard-label {

1798 display: block;

1799 margin-bottom: $lineheight/4;

1800 font-size: $typeheight;

1801 font-weight: 500;

1802 line-height: 1.5;

1803 }

1804 label.standard-label.secondary {

1805 display: inline-block;

1806 font-weight: normal;

1807 }

1808 .form-help {

1809 font-weight: normal;

1810 }

1811 .form-column {

1812 float: left;

1813 margin-right: 20px;

1814 }

1815 .form-divider {

1816 margin-top: $lineheight;

1817 padding-top: $lineheight;

1818 border-top: 1px solid $lightgrey;

1819 }

1820 .horizontal-list .form-row {

1821 float: left;

1822 padding-right: 10px;

1823 }

1824 .form-row {

1825 margin-bottom: $lineheight/2;

1826 }

1827 .form-list {

1828 margin-bottom: 0;

1829 }

1830 .form-list li {

1831 margin-bottom: 5px;

1832 }

1833 input[type="checkbox"],

1834 input[type="radio"] {

1835 float: left;

1836 margin-top: 5px;

1837 }

1838 }

1839

1840 #remember_me_openid {

1841 display: block;

1842 }

1843

1844 input[type="checkbox"],

1845 input[type="radio"] {

1846 margin-right: 5px;

1847 }

1848

1849 input[type="text"],

1850 input[type="email"],

1851 input[type="url"],

1852 input[type="password"],

1853 textarea {

1854 border: 1px solid #ccc;

1855 padding: 2px 5px;

1856 margin: 0;

1857 width: 200px;

1858 }

1859

1860 textarea {

1861 padding: 5px;

1862 width: 100%;

1863 }

1864

1865 /* Rules for user images */

1866

1867 img.user_image {

1868 max-width: 100px;

1869 max-height: 100px;

1870 border: 1px solid #ccc;

1871 margin-bottom: $lineheight;

1872 float: left;

1873 margin-right: $lineheight;

1874 }

1875

1876 img.user_thumbnail {

1877 max-width: 50px;

1878 max-height: 50px;

1879 border: 1px solid #ccc;

1880 margin-right: $lineheight;

1881 }

1882

1883 img.user_thumbnail_tiny {

1884 max-width: 25px;

1885 max-height: 25px;

1886 border: 1px solid #ccc;

1887 }

1888

1889 /* Rules for geo microformats */

1890

1891 abbr.geo {

1892 border-bottom: none;

1893 }

1894

1895 /* Rules for RSS buttons */

1896

1897 .rsssmall {

1898 position: relative;

1899 top: 3px;

1900 }

1901

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

1903

1904 ul.secondary-actions {

1905 font-style: normal;

1906 margin-bottom: 0;

1907 margin-left: 0;

1908 &.pager {

1909 display: inline-block;

1910 margin-right: 60px;

1911 }

1912 > li {

1913 display: block;

1914 float: left;

1915 list-style: none;

1916 border-left: 1px solid #ccc;

1917 padding-left: $lineheight/2;

1918 margin-right: $lineheight/2;

1919 &:first-child {

1920 border-left: 0;

1921 padding-left: 0;

1922 }

1923 &:last-child {

1924 margin-right: 0px;

1925 }

1926 }

1927 }

1928

1929 div.secondary-actions {

1930 padding: 10px;

1931 border-top: 1px solid #ccc;

1932 text-align: center;

1933 }

1934

1935 /* Utility for managing inner content areas */

1936

1937 .inner22 { padding: $lineheight;}

1938

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

1940

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

1942

1943 .inner20 { padding: $lineheight 0;}

1944

1945 .inner02 { padding: 0 $lineheight;}

1946

1947 /* Utility for general button styles */

1948

1949 input[type="button"],

1950 input[type="submit"],

1951 input[type="reset"],

1952 a.button {

1953 cursor: pointer;

1954 border: 0;

1955 display: inline-block;

1956 line-height: 20px;

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

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

1959 min-width: 120px;

1960 margin: 0 0 $lineheight/2 0;

1961 color: white;

1962 background: $blue;

1963 text-align: center;

1964 border-radius: 2px;

1965 -moz-border-radius: 2px;

1966 &:hover {

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

1968 text-decoration: none;

1969 }

1970 &.deemphasize {

1971 background: $lightblue;

1972 &:hover {

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

1974 }

1975 }

1976 &:disabled {

1977 background: $lightgrey;

1978 &:hover {

1979 background: $lightgrey;

1980 }

1981 }

1982 &:last-child {

1983 margin-bottom: 0;

1984 }

1985 }

1986

1987 .buttons {

1988 min-width: 200px;

1989 input[type="submit"],

1990 input[type="button"],

1991 input[type="reset"],

1992 .button {

1993 box-sizing: border-box;

1994 float: left;

1995 border-radius: 0;

1996 margin:0;

1997 min-width: 100px;

1998 max-width: 180px;

1999 border-right:1px solid white;

2000 text-overflow: ellipsis;

2001 white-space: nowrap;

2002 overflow: hidden;

2003 }

2004 input:first-child,

2005 .button:first-child {

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

2007 }

2008 input:last-child,

2009 .button:last-child {

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

2011 border-right-width: 0;

2012 }

2013 input:only-child,

2014 .button:only-child,

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

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

2017 border-radius:2px;

2018 border-right-width: 0;

2019 }

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

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

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

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

2024 border-right-width: 0;

2025 }

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

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

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

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

2030 border-right-width: 1px;

2031 }

2032 }

2033

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

2035

2036 .table0,

2037 .item0 {

2038 background: $offwhite;

2039 }

2040

2041 .table1,

2042 .item1 {

2043 background: #fff;

2044 }

2045

2046 /* Rules for OpenID logo */

2047

2048 .openid_logo {

2049 vertical-align: text-bottom;

2050 border: 0;

2051 }

2052

2053 /* Rules for rich text */

2054

2055 .richtext,

2056 .prose {

2057 h1, h2 {

2058 padding-bottom: $lineheight/2;

2059 border-bottom: 1px dashed #cccccc;

2060 margin-bottom: $lineheight/2;

2061 }

2062

2063 h1 {

2064 font-size: 24px;

2065 }

2066

2067 h2 {

2068 font-size: 18px;

2069 }

2070

2071 h3 {

2072 font-size: $typeheight;

2073 }

2074

2075 code {

2076 font-size: 13px;

2077 background: #e8e8e8;

2078 padding: 2px 3px;

2079 }

2080

2081 pre {

2082 font-size: 13px;

2083 background: #e8e8e8;

2084 padding: 2px 3px;

2085

2086 code {

2087 padding: 0;

2088 }

2089 }

2090

2091 img {

2092 padding: $lineheight;

2093 background-color: $offwhite;

2094 display: block;

2095 max-width: 100%;

2096 margin: auto;

2097 }

2098

2099 blockquote {

2100 border-left: $lineheight solid $offwhite;

2101 padding-left: $lineheight;

2102 margin: 0;

2103 color: #7E7E7E;

2104 }

2105

2106 ul, ol {

2107 padding-left: $lineheight;

2108 margin-bottom: $lineheight;

2109 margin-left: $lineheight;

2110 }

2111

2112 ul li {

2113 list-style: disc;

2114 }

2115

2116 ol li {

2117 list-style: decimal;

2118 }

2119 }

2120

2121 .diary_post .richtext {

2122 margin-top: $lineheight;

2123 }

2124

2125 .comments .richtext {

2126 margin-left: 70px;

2127 margin-top: 0;

2128 }

2129

2130 /* Rules for rich text editors */

2131

2132 .richtext_container {

2133 margin-bottom: $lineheight;

2134

2135 .richtext_content {

2136 width: 50%;

2137 display: inline-block;

2138 vertical-align: top;

2139

2140 .richtext_preview {

2141 display: inline-block;

2142 padding: $lineheight;

2143 background-color: $offwhite;

2144 overflow-x: auto;

2145

2146 &.loading {

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

2148 background-repeat: no-repeat;

2149 background-position: center;

2150 }

2151

2152 > :first-child {

2153 margin-top: 0px;

2154 }

2155 }

2156 }

2157

2158 .richtext_help {

2159 display: inline-block;

2160 vertical-align: top;

2161 margin-left: 15px;

2162 background-color: #f8f8ff;

2163 padding: $lineheight/2;

2164 width: 220px;

2165

2166 ul {

2167 margin-bottom: 0;

2168 }

2169

2170 h4.heading, li {

2171 border-bottom: 1px solid #ccc;

2172 margin-bottom: $lineheight/4;

2173 padding-bottom: $lineheight/4;

2174 }

2175

2176 li h4, li span, li p {

2177 display: inline-block;

2178 vertical-align: top;

2179 font-size: 11px;

2180 }

2181

2182 li h4 {

2183 width: 40%;

2184 margin: 0;

2185 }

2186

2187 li span, li p {

2188 width: 50%;

2189 margin-left: $lineheight/2;

2190 margin-bottom: $lineheight/4;

2191 white-space: nowrap;

2192 }

2193 }

2194 }

2195

2196 /* Rules for the user notes list */

2197

2198 .note_list {

2199 tr.creator {

2200 background-color: #eeeeee;

2201 }

2202

2203 td {

2204 padding: 3px;

2205 }

2206

2207 p {

2208 margin-bottom: 0px;

2209 }

2210 }

2211

2212 /* Rules for the notes interface */

2213

2214 .leaflet-popup-content .note {

2215 padding-top: $lineheight/2;

2216 }

2217

2218 .leaflet-popup-content .note {

2219 h2 {

2220 margin-bottom: $lineheight/2;

2221 }

2222

2223 div {

2224 margin-top: $lineheight/2;

2225 }

2226

2227 .permalink {

2228 position: absolute;

2229 top: $lineheight/4;

2230 left: $lineheight/4;

2231 min-width: 15px;

2232 min-height: 15px;

2233 }

2234

2235 .permalink span {

2236 display: none;

2237 padding-left: $lineheight;

2238 }

2239

2240 .permalink:hover span {

2241 display: block;

2242 }

2243

2244 .warning {

2245 display: block;

2246 background-color: #ffe0cc;

2247 padding: 4px 6px;

2248 margin-bottom: $lineheight/2;

2249 }

2250

2251 .comment_body {

2252 margin-top: 2px;

2253 margin-bottom: 2px;

2254

2255 p {

2256 margin-top: 0px;

2257 margin-bottom: 0px;

2258 }

2259 }

2260

2261 .comment {

2262 width: 100%;

2263 height: 100px;

2264 }

2265

2266 .buttons {

2267 margin-top: $lineheight/4;

2268 text-align: right;

2269 }

2270 }

2271

2272 /* Rules for the iD editor */

2273

2274 .id-embed {

2275 width: 100%;

2276 height: 100%;

2277 }

2278

2279 /* Rules for dropdown menus */

2280

2281 .dropdown {

2282 position: relative;

2283 }

2284

2285 .dropdown-toggle {

2286 *margin-bottom: -3px;

2287 }

2288

2289 .dropdown-toggle:active,

2290 .open .dropdown-toggle {

2291 outline: 0;

2292 }

2293

2294 .caret {

2295 display: inline-block;

2296 width: 0;

2297 height: 0;

2298 vertical-align: top;

2299 border-top: 4px solid #000000;

2300 border-right: 4px solid transparent;

2301 border-left: 4px solid transparent;

2302 content: "";

2303 }

2304

2305 .dropdown .caret {

2306 margin-top: 8px;

2307 margin-left: 2px;

2308 }

2309

2310 .dropdown-menu {

2311 position: absolute;

2312 top: 100%;

2313 left: -1px;

2314 z-index: 1000;

2315 display: none;

2316 float: left;

2317 min-width: 160px;

2318 padding: 5px 0;

2319 margin: 0;

2320 list-style: none;

2321 background-color: #ffffff;

2322 border: 1px solid #ccc;

2323 border-radius: 0 3px 3px;

2324 *border-right-width: 2px;

2325 *border-bottom-width: 2px;

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

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

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

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

2330 -moz-background-clip: padding;

2331 background-clip: padding-box;

2332 }

2333

2334 .dropdown-menu.pull-right {

2335 right: 0;

2336 left: auto;

2337 }

2338

2339 .dropdown-menu .divider {

2340 *width: 100%;

2341 height: 1px;

2342 margin: 9px 1px;

2343 *margin: -5px 0 5px;

2344 overflow: hidden;

2345 background-color: #e5e5e5;

2346 border-bottom: 1px solid #ffffff;

2347 }

2348

2349 .dropdown-menu > li > a {

2350 display: block;

2351 padding: 3px 10px;

2352 clear: both;

2353 font-weight: normal;

2354 line-height: 20px;

2355 color: #333333;

2356 white-space: nowrap;

2357 }

2358

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

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

2361 .dropdown-submenu:hover > a,

2362 .dropdown-submenu:focus > a {

2363 color: #ffffff;

2364 text-decoration: none;

2365 background-color: $green;

2366 }

2367

2368 .dropdown-menu > .active > a,

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

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

2371 color: #ffffff;

2372 text-decoration: none;

2373 background-color: $green;

2374 outline: 0;

2375 }

2376

2377 .dropdown-menu > .disabled > a,

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

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

2380 color: #999999;

2381 }

2382

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

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

2385 text-decoration: none;

2386 cursor: default;

2387 background-color: transparent;

2388 background-image: none;

2389 }

2390

2391 .open {

2392 *z-index: 1000;

2393 }

2394

2395 .open > .dropdown-menu {

2396 display: block;

2397 }

2398

2399 .dropdown-backdrop {

2400 position: fixed;

2401 top: 0;

2402 right: 0;

2403 bottom: 0;

2404 left: 0;

2405 z-index: 990;

2406 }

2407

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

2409 .site-welcome {

2410 .center {

2411 text-align: center;

2412 .sprite {

2413 float: none;

2414 margin: auto;

2415 }

2416 }

2417

2418 .sprite {

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

2420 background-size: 500px 250px;

2421 display: block;

2422 float: left;

2423 }

2424

2425 .icon-list {

2426 padding-bottom: 20px;

2427 div {

2428 margin-bottom: 10px;

2429 p {

2430 padding-top: 10px;

2431 }

2432 }

2433 }

2434 .sprite.small {

2435 width: 50px;

2436 height: 50px;

2437 }

2438

2439 .sprite.x {

2440 background-position: -50px 0;

2441 }

2442

2443 .sprite.term {

2444 margin-right: 10px;

2445 vertical-align: middle;

2446 }

2447

2448 .sprite.node {

2449 background-position: -100px 0;

2450 }

2451

2452 .sprite.way {

2453 background-position: -150px 0;

2454 }

2455

2456 .sprite.tag {

2457 background-position: -200px 0;

2458 }

2459

2460 .sprite.editor {

2461 background-position: -250px 0;

2462 }

2463

2464 .sprite.question {

2465 background-position: -300px 0;

2466 }

2467

2468 .start-mapping {

2469 margin: auto;

2470 cursor: pointer;

2471 border: none;

2472 padding: 20px 40px;

2473 font-size: 30px;

2474 text-decoration: none;

2475 }

2476

2477 .note-box {

2478 margin-top: 20px;

2479 background-color: $offwhite;

2480 }

2481

2482 .icon.note {

2483 background-color: #333;

2484 border-radius: 4px;

2485 }

2486 }

2487

2488 .site-about #content {

2489 //background-color: #000;

2490 background-color: #eee;

2491 background-position: 50% 50%;

2492 background-repeat: no-repeat;

2493 background-size: cover;

2494 background-attachment: fixed;

2495

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

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

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

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

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

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

2502

2503 .caption {

2504 max-width: 200px;

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

2506 position: fixed;

2507 text-align: right;

2508 right: 20px;

2509 bottom: 60px;

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

2511 color: #eee;

2512 opacity: 0.8;

2513 display: none;

2514 }

2515

2516 .caption a {

2517 color: white;

2518 white-space: nowrap;

2519 text-decoration: none;

2520 }

2521

2522 a.next {

2523 display: block;

2524 position: fixed;

2525 right: 10px;

2526 bottom: 10px;

2527 width: 40px;

2528 height: 40px;

2529 border-radius: 5px;

2530 text-indent: -9999px;

2531 overflow: hidden;

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

2533 background-color: #000;

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

2535 }

2536

2537 .content-inner {

2538 position: relative;

2539 color: #333;

2540 min-width: 320px;

2541 max-width: 640px;

2542

2543 .section {

2544 margin-bottom: 30px;

2545 }

2546

2547 .section:last-child {

2548 margin-bottom: 0;

2549 }

2550 }

2551

2552 .text {

2553 background: white;

2554 padding: 40px;

2555 }

2556

2557 .attr {

2558 position: relative;

2559 padding: 170px 40px 20px;

2560 background: #333;

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

2562 margin-bottom: 0;

2563 margin-top: -20px;

2564

2565 h1 {

2566 display: block;

2567 color: white;

2568 font-weight: 300;

2569 font-size: 34px;

2570 span {

2571 color: #76c551;

2572 }

2573 }

2574

2575 .user-image {

2576 position: absolute;

2577 top: 0px;

2578 right: 240px;

2579 left: 0px;

2580 height: 150px;

2581 background-position: 0 50%;

2582 background-repeat: no-repeat;

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

2584 background-size: cover;

2585 background-color: #76c551;

2586 }

2587

2588 .byosm {

2589 position: absolute;

2590 top: 0px;

2591 right: 0px;

2592 z-index: 1;

2593 width: 240px;

2594 height: 150px;

2595 padding: 20px 20px 20px 40px;

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

2597 white-space: nowrap;

2598 color: #fff;

2599 background: #76c551;

2600 }

2601

2602 .byosm span {

2603 display: inline-block;

2604 width: 20px;

2605 margin-left: -20px;

2606 }

2607 }

2608

2609 h2 {

2610 margin-bottom: 10px;

2611 }

2612

2613 .icon {

2614 width: 30px;

2615 height: 30px;

2616 margin-right: 10px;

2617 vertical-align: middle;

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

2619

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

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

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

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

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

2625 }

2626 }

2627

2628 @import 'browse';

2629

2630 @media only screen and (max-width:960px) {

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

2632 display: none;

2633 }

2634 }

2635