git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/common.scss

1 @import "parameters";

2 @import "bootstrap-custom";

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

6 /* Minimal CSS reset */

8 html, body, form, fieldset, legend, input {

9 margin: 0;

10 padding: 0;

11 border: 0;

12 }

14 fieldset,img { border: 0; }

16 legend { color: #000; }

18 sup {

19 vertical-align: super;

20 font-size: smaller;

21 }

23 sub {

24 vertical-align: sub;

25 font-size: smaller;

26 }

28 table {

29 border-collapse: collapse;

30 border-spacing: 0;

31 }

33 input,

34 select,

35 textarea,

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

38 abbr, acronym {

39 text-decoration: underline dotted;

40 cursor: help;

41 }

43 strong {

44 font-weight: bold;

45 }

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

49 .clearfix:before,

50 .clearfix:after {

51 content: " ";

52 display: table;

53 }

55 .clearfix:after {

56 clear: both;

57 }

59 .fillL { background-color: white; }

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

63 * {

64 box-sizing: border-box;

65 }

67 body {

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

69 font-size: $typeheight;

70 line-height: 1.6666;

71 color: #222;

72 background-color: #fff;

73 margin: 0px;

74 padding: 0px;

75 text-align: left;

76 height: 100%;

77 }

79 p > img {

80 width: auto;

81 max-width: 100%;

82 }

84 small, aside {

85 font-size: 12px;

86 }

88 #container { position: relative; }

90 .column-1 {

91 width: 50%;

92 margin: 0 0 $lineheight/2 0;

93 }

95 .small_icon {

96 vertical-align: middle;

97 margin-right: $lineheight/4;

98 }

100 .red { color: $red; }

101

102 .piwik { border: 0; }

103

104 [dir=rtl] { /* no-r2 */ text-align: right; }

105

106 [dir=ltr] { /* no-r2 */ text-align: left; }

107

108 /* Rules for icons */

109

110 .icon {

111 display: inline-block;

112 vertical-align: top;

113 width: 20px;

114 height: 20px;

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

116 background-image: image-url("sprite.svg");

117 text-indent: -9999px;

118 overflow: hidden;

119 }

120

121 .icon.search { /* no-r2 */ background-position: 0 0; }

122 .icon.donate { /* no-r2 */ background-position: -20px 0; }

123 .icon.zoomin { /* no-r2 */ background-position: -40px 0; }

124 .icon.zoomout { /* no-r2 */ background-position: -60px 0; }

125 .icon.geolocate { /* no-r2 */ background-position: -80px 0; }

126 .active .icon.geolocate { /* no-r2 */ background-position: -80px -20px; }

127 .icon.layers { /* no-r2 */ background-position: -100px 0; }

128 .icon.key { /* no-r2 */ background-position: -120px 0; }

129 .icon.share { /* no-r2 */ background-position: -140px 0; }

130 .icon.clipboard { /* no-r2 */ background-position: -160px 0; }

131 .icon.link { /* no-r2 */ background-position: -180px 0; }

132 .icon.close { /* no-r2 */ background-position: -200px 0; }

133 .close-wrap:hover .icon.close,

134 .icon.close:hover { /* no-r2 */ background-position: -200px -20px; }

135 .icon.check { /* no-r2 */ background-position: -220px 0; }

136 .icon.note { /* no-r2 */ background-position: -240px 0; }

137 .icon.note.grey { /* no-r2 */ background-position: -240px -20px; }

138 .icon.query { /* no-r2 */ background-position: -260px 0; }

139

140 /* Rules for links */

141

142 a {

143 color: #24d;

144 text-decoration: none;

145 -webkit-appearance: none;

146 outline: 0;

147 &:hover {

148 text-decoration: underline;

149 }

150 }

151

152 /* Rules for horizontal lines */

153

154 hr {

155 border: none;

156 background-color: $grey;

157 color: $grey;

158 height: 1px;

159 }

160

161 /* General styles for tables */

162

163 table {

164 width: 100%;

165 margin-bottom: $lineheight;

166 th, td {

167 text-align: left;

168 padding: $lineheight/4;

169 line-height: $lineheight;

170 }

171 th {

172 font-weight: 600;

173 vertical-align: top;

174 }

175 td {

176 vertical-align: middle;

177 }

178 }

179

180 /* Utility for de-emphasizing content */

181

182 .deemphasize {

183 color: $darkgrey;

184 a {

185 color: $blue;

186 }

187 }

188

189 /* Rules for the header */

190

191 #menu-icon {

192 display: none !important;

193 float: right;

194 background: image-url("menu-icon.png") no-repeat;

195 background-size: 30px 30px;

196 display: block;

197 width: 30px;

198 height: 30px;

199 margin: 14px 10px 0 0;

200 opacity: 0.6;

201 }

202

203 header {

204 height: $headerHeight;

205 position: relative;

206 z-index: 1001;

207 font-size: 14px;

208

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

210 display: inline-block;

211 }

212

213 > * {

214 height: 100%;

215 padding: $lineheight/2;

216 }

217

218 h1, nav.primary {

219 float: left;

220 }

221

222 a, a:hover {

223 text-decoration: none;

224 }

225

226 img.logo {

227 width: 30px;

228 height: 30px;

229 margin-top: -2px;

230 vertical-align: middle;

231 }

232

233 h1 {

234 font-size: 18px;

235 font-weight: 600;

236 line-height: 1.2;

237 margin: 0;

238 padding-top: 15px;

239

240 a {

241 color: #000;

242 }

243

244 a:hover {

245 color: #000;

246 }

247 }

248 }

249

250 nav.primary {

251 > ul {

252 padding: 0;

253 $border: 1px solid $green;

254

255 border: $border;

256 border-radius: $border-radius;

257

258 > li {

259 border-right: $border;

260 float: left;

261 &:last-child {

262 border-right: 0;

263 }

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

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

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

267 &.dropdown {

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

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

270 }

271 }

272 }

273

274 a.tab,

275 .dropdown-toggle {

276 display: inline-block;

277 font-weight: 500;

278 color: $green;

279 padding: 5px 15px;

280 }

281

282 .dropdown-toggle {

283 padding: 5px 6px;

284 }

285

286 .caret {

287 border-top-color: $green;

288 margin-top: 10px;

289 }

290

291 .disabled a {

292 color: $grey;

293 cursor: default;

294

295 .caret {

296 border-top-color: $grey;

297 }

298 }

299

300 > ul li.current {

301 background-color: $green;

302

303 .tab {

304 color: #fff;

305 }

306

307 .caret {

308 border-top-color: #fff;

309 }

310 }

311 }

312

313 nav.secondary {

314 position: absolute;

315 right: 0;

316

317 > ul {

318 vertical-align: middle;

319 margin: 0;

320 padding: 0;

321

322 a, .dropdown-toggle {

323 display: inline-block;

324 text-decoration: none;

325 color: $darkgrey;

326 padding: 5px;

327

328 &:hover { color: darken($darkgrey, 25%); }

329 }

330 }

331

332 > ul li.current a {

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

334 }

335

336 .user-menu {

337 $border: 1px solid $grey;

338 border: $border;

339 border-radius: $border-radius;

340 margin-left: 10px;

341 padding: 0;

342

343 > li {

344 border-right: $border;

345 float: left;

346 &:last-child {

347 border-right: 0;

348

349 > a {

350 border-radius: 0 $border-radius $border-radius 0;

351 }

352 }

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

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

355 }

356

357 a {

358 padding: 5px 15px;

359

360 }

361

362 &.logged-in > a {

363 padding: 0;

364 > .user-button {

365 line-height: 1.8;

366 padding: 5px 10px 3px 6px;

367 display: inline-block;

368 color: $darkgrey;

369 }

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

371 }

372 }

373

374 .caret {

375 border-top-color: $grey;

376 margin-top: 9px;

377 }

378

379 img.user_thumbnail_tiny {

380 border: 0;

381 vertical-align: top;

382 margin-top: 0px;

383 margin: 4px 0 0 4px;

384 border-radius: 2px;

385 }

386

387 #inboxanchor {

388 display: inline-block;

389 vertical-align: top;

390 height: 25px;

391 margin: 3px 0 3px 3px;

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

393 line-height: 20px;

394 border-radius: 2;

395 }

396

397 .dropdown-menu {

398 left: auto;

399 right: -1px;

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

401

402 .count-number {

403 float: right;

404 padding: 0 5px;

405 margin: 0;

406 }

407 }

408 }

409

410 #compact-secondary-nav {

411 display: none;

412 ul li a {

413 width: 100%;

414 color: #333;

415 &:hover { color: #fff; }

416 }

417 }

418

419 body.compact {

420 #compact-secondary-nav {

421 display: inline-block;

422 }

423 .compact-hide {

424 display: none;

425 }

426 }

427

428 /* Utility for styling notification numbers */

429

430 .count-number {

431 padding: 2px $lineheight/4;

432 border-radius: 2px;

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

434 margin: 0 2px;

435 font-size: 11px;

436 color: #333;

437 }

438

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

440

441 #noscript {

442 z-index: 20000000;

443 margin-left: 400px;

444 margin-top: 50px;

445 }

446

447 /* Rules for Leaflet maps */

448

449 .leaflet-control .control-button {

450 display: block;

451 height: 40px;

452 width: 40px;

453 background-color: #333;

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

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

456 margin-bottom: 10px;

457 outline: none;

458

459 &:hover {

460 background-color: black;

461 }

462

463 &.disabled,

464 &.leaflet-disabled {

465 background-color: #333;

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

467 cursor: default;

468 }

469

470 &.active {

471 background-color: $vibrant-green;

472 }

473

474 .icon {

475 margin: 10px;

476 }

477 }

478

479 .leaflet-control .zoomin,

480 .control-layers .control-button {

481 margin-bottom: 0px;

482 border-radius: 4px 0 0 0;

483 }

484

485 .leaflet-control .zoomout,

486 .control-key .control-button {

487 margin-bottom: 0;

488 border-radius: 0;

489 }

490

491 .control-locate .control-button,

492 .control-share .control-button {

493 border-radius: 0 0 0 4px;

494 }

495

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

497

498 .map-layout {

499 #content {

500 overflow: hidden;

501 position: absolute;

502 top: $headerHeight;

503 bottom: 0;

504 width: 100%;

505 }

506

507 #sidebar, #map {

508 position: relative;

509 height: 100%;

510 overflow-x: hidden;

511 overflow-y: auto;

512 }

513

514 #sidebar {

515 float: left;

516 width: $sidebarWidth;

517 background: #fff;

518

519 #sidebar_loader {

520 display: none;

521 }

522

523 > div {

524 position: relative;

525 float: left;

526 clear: both;

527 width: 100%;

528 }

529

530 h2 {

531 padding: $lineheight $lineheight $lineheight/2;

532 font-size: 1.5rem;

533 }

534

535 h3, h4 {

536 margin-top: $lineheight;

537 margin-bottom: $lineheight/2;

538 font-size: 1.25rem;

539 }

540

541 .close-wrap {

542 cursor: pointer;

543 position: absolute;

544 top: 0;

545 right: 0;

546 width: 60px;

547 height: 60px;

548

549 .icon.close {

550 pointer-events: none;

551 position: absolute;

552 right: 20px;

553 top: 20px;

554 }

555 }

556

557 .icon.close {

558 float: right;

559 cursor: pointer;

560 }

561

562 .flash {

563 padding: 15px;

564

565 picture {

566 margin-right: -25px;

567 }

568

569 div.message {

570 margin-left: 30px;

571 }

572 }

573 }

574

575 .overlay-sidebar #sidebar {

576 position: absolute;

577 z-index: 1000;

578 height: auto;

579 overflow: hidden;

580

581 #banner {

582 display: block;

583 }

584

585 .welcome {

586 display: none;

587

588 &.visible {

589 display: block;

590 }

591 }

592

593 #sidebar_content {

594 display: none;

595 }

596 }

597

598 .welcome {

599 display: none;

600 padding-bottom: 5px;

601

602 p {

603 padding: $lineheight/2 $lineheight $lineheight;

604 font-size: 110%;

605 font-weight: 300;

606 }

607

608 .button {

609 width: 50%;

610 float: left;

611 margin: 0;

612 border-radius: 0;

613 font-weight: normal;

614 padding: .6em;

615

616 &.learn-more {

617 border-right: 1px solid #fff;

618 }

619 }

620 }

621

622 #banner {

623 display: none;

624

625 img {

626 display: block;

627 width: $sidebarWidth;

628 }

629 }

630

631 #map {

632 height: 100%;

633 overflow: hidden;

634

635 &.query-active {

636 cursor: help;

637 }

638

639 &.query-disabled {

640 cursor: not-allowed;

641 }

642

643 .leaflet-marker-draggable {

644 cursor: move;

645 }

646 }

647

648 #map-ui {

649 display: none;

650 position: relative;

651 float: right;

652 width: 250px;

653 height: 100%;

654 background: white;

655 overflow: auto;

656

657 .section {

658 border-bottom: 1px solid $grey;

659 padding: 10px 20px;

660 }

661

662 a.close-button {

663 float: right;

664 padding:5px;

665 font-size:20px;

666 line-height:10px;

667 color:#222;

668 border:1px solid $grey;

669 }

670

671 .tooltip {

672 opacity: 1;

673 border: 1px solid $grey;

674 .tooltip-arrow {

675 border-top-color: $grey;

676 }

677 }

678 }

679 }

680

681 .layers-ui,

682 .share-ui {

683 li:last-child {

684 margin-bottom: 0;

685 }

686 }

687

688 .layers-ui {

689 .base-layers {

690 .leaflet-container {

691 width: 100%;

692 height: 50px;

693 cursor: pointer;

694 }

695

696 li {

697 overflow: hidden;

698 border-radius: 3px;

699 border: 2px solid #fff;

700 margin-bottom: 8px;

701 position: relative;

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

703

704 label {

705 position: absolute;

706 top: 0;

707 left: 0;

708 padding: 2px 6px;

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

710 cursor: pointer;

711 font-weight: 600;

712 font-size: 16px;

713 text-stroke: 2px #fff;

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

715 z-index: 1000;

716 input[type="radio"] {

717 display: none;

718 }

719 }

720

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

722 &:hover {

723 border-color: $grey;

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

725 }

726 }

727 }

728

729 .overlay-layers {

730 p {

731 font-size: 13px;

732 margin-bottom: 8px;

733 }

734 li.disabled { color: $darkgrey; }

735 }

736 }

737

738 .share-ui {

739 .share-tabs {

740 margin-bottom: 10px;

741

742 a {

743 color: #fff;

744 text-decoration: none;

745 background-color: $lightblue;

746 padding: 5px 10px;

747 border-right: 1px solid #fff;

748 }

749

750 a:first-child {

751 border-right: 1px solid #fff;

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

753 }

754

755 a:last-child {

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

757 }

758

759 a.active {

760 background-color: $blue;

761 }

762 }

763

764 .share-tab {

765 display: none;

766 }

767

768 .share-link {

769 input[type=text],

770 textarea {

771 width: 100%;

772 font-family: monospace;

773 font-size: small;

774 line-height: 1.3;

775 }

776 }

777

778 .share-image {

779 label {

780 margin-right: 10px;

781 }

782 }

783

784 #embed_html {

785 resize: vertical;

786 }

787

788 #mapnik_scale {

789 width: 100px;

790 }

791 }

792

793 .leaflet-top {

794 top: $lineheight/2 !important;

795 .leaflet-control {

796 margin-right: 0px !important;

797 margin-top: 0px !important;

798 }

799 }

800

801 .leaflet-popup-scrolled {

802 padding-right: $lineheight;

803 border-bottom: 0px !important;

804 border-top: 0px !important;

805 }

806

807 .leaflet-popup-content-wrapper {

808 border-radius: 4px !important;

809 }

810

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

812

813 #attribution {

814 display: none;

815

816 table {

817 width: 100%

818 }

819 }

820

821 .attribution_license,

822 .attribution_project {

823 text-align: left;

824 }

825

826 .attribution_notice {

827 text-align: center;

828 }

829

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

831

832 /* Rules for the sidebar */

833

834 .sidebar_heading {

835 position: relative;

836 padding: $lineheight/2 $lineheight;

837 // background: $offwhite;

838 // border-bottom: 1px solid $grey;

839 > .close {

840 float: right;

841 margin-top: 2px;

842 cursor: pointer;

843 }

844 }

845

846 #browse_status {

847 p {

848 padding: $lineheight;

849 }

850

851 input {

852 display: block;

853 margin-left: auto;

854 margin-right: auto;

855 }

856 }

857

858 #sidebar {

859 #sidebar_loader,

860 .search_more {

861 width: 100%;

862 margin: $lineheight auto;

863 }

864

865 .loader,

866 .load_more {

867 text-align: center;

868 margin: auto;

869 width: 40px;

870 display: block;

871 }

872 }

873

874 /* Rules for the search and direction forms */

875

876 header .search_forms,

877 .directions_form {

878 display: none;

879 }

880

881 .search_form,

882 .directions_form {

883 position: relative;

884 padding: $lineheight/2;

885 background-color: $lightgrey;

886

887 .query_wrapper {

888 position: relative;

889 overflow: hidden;

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

891 }

892

893 input[type=text] {

894 width: 100%;

895 height: 30px;

896 transition: 300ms linear;

897 }

898

899 input[type=text].overflow {

900 border-right: none;

901 }

902

903 input:focus {

904 outline: none;

905 box-shadow: 0px 0px 7px $vibrant-green;

906 }

907

908 input[type=submit].float {

909 float: right;

910 width: auto;

911 min-width: 0;

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

913 }

914

915 input.error {

916 background-color: rgba($red, 0.4);

917 }

918

919 select {

920 /* this next line is to polyfill the vertical alignment of text within a select element,

921 * which is different between firefox and chrome. */

922 padding: 0.3em 0;

923 }

924

925 .query_options {

926 text-align: right;

927 font-size: 10px;

928 color: $blue;

929 }

930

931 .describe_location {

932 position: absolute;

933 top: 6px;

934 right: 6px;

935 font-size: 10px;

936 color: $blue;

937 }

938

939 .switch_link {

940 float: right;

941 width: auto;

942 min-width: 0;

943 margin-left: 6px;

944 }

945

946 img.button {

947 display: block;

948 width: 20px;

949 height: 20px;

950 }

951

952 span.force_width {

953 width: 100%;

954 padding-right: 25px;

955 display: block;

956 }

957

958 select.routing_engines {

959 min-height: 30px;

960 margin: 0px 0px 5px 25px;

961 }

962

963 input.routing_go {

964 min-width: 100px;

965 float: right;

966 }

967

968 div.header {

969 width: 100%;

970 height: 30px;

971 }

972

973 div.line {

974 width: 100%;

975 margin: 0px 0px 5px 0px;

976 }

977

978 div.loader_copy {

979 display: none;

980

981 img {

982 vertical-align: middle;

983 }

984 }

985

986 a.reverse_directions {

987 cursor: pointer;

988 margin: 0px 0px 5px 25px;

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

1006

1007 #sidebar .search_results_entry {

1008 ul {

1009 padding: 0;

1010 }

1011

1012 ul li {

1013 border-bottom: $keyline;

1014 cursor: pointer;

1015 list-style-type: none;

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

1017 &.selected { background: $list-highlight; }

1018 }

1019

1020 .search_more .loader {

1021 display: none;

1022 width: 100%;

1023 }

1024 }

1025

1026 .search_results_error {

1027 color: #f00;

1028 padding: 10px 20px;

1029 }

1030

1031 /* Rules for routing */

1032

1033 #sidebar_content>table {

1034 padding: 5px 20px 10px 15px;

1035 width: 100%;

1036 border-collapse: separate;

1037 }

1038

1039 div.direction {

1040 background-image: image-url('routing-sprite.png');

1041 width: 20px;

1042 height: 20px;

1043 background-repeat: no-repeat;

1044 }

1045 @for $i from 0 through 25 {

1046 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }

1047 }

1048

1049 p#routing_summary {

1050 padding: 0 $lineheight $lineheight/4;

1051 }

1052

1053 td.instruction, td.distance {

1054 padding-top: $lineheight/5;

1055 padding-bottom: $lineheight/5;

1056 border-bottom: 1px solid $grey;

1057 }

1058 td.distance {

1059 color: $darkgrey;

1060 text-align: right;

1061 font-size: x-small;

1062 }

1063 tr.turn {

1064 cursor: pointer;

1065 }

1066 tr.turn:hover {

1067 background: $list-highlight;

1068 }

1069 .routing_engines, #route_from, #route_to { margin-left: 25px; }

1070 .routing_marker { width: 15px; position: absolute; cursor: move; }

1071

1072 /* Rules for entity history */

1073

1074 #sidebar_content {

1075 .browse_details {

1076 position: relative;

1077 border-bottom: $keyline;

1078 }

1079 }

1080

1081 .browse_status {

1082 display: none;

1083 }

1084

1085 /* Rules for the history sidebar */

1086

1087 #sidebar .changesets {

1088 li {

1089 cursor: pointer;

1090

1091 &.selected { background: $list-highlight; }

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

1093 }

1094

1095 .comments {

1096 float: right;

1097 color: $darkgrey;

1098 }

1099

1100 .comments-0 {

1101 opacity: 0.5;

1102 }

1103

1104 .changeset_more .loader {

1105 display: none;

1106 width: 100%;

1107 }

1108 }

1109

1110 /* Rules for the browse sidebar */

1111

1112 #sidebar_content {

1113 .browse-section {

1114 padding: $lineheight/2 $lineheight;

1115 border-bottom: 1px solid $grey;

1116

1117 h4:first-child {

1118 margin-top: 0;

1119 word-wrap: break-word;

1120 }

1121 }

1122

1123 .browse-section:last-of-type {

1124 border-bottom: none;

1125 }

1126

1127 .paginate {

1128 float: right;

1129 padding: 1px 6px;

1130 border: 1px solid $lightgrey;

1131 border-radius: 3px;

1132 }

1133

1134 .browse-field {

1135 margin-bottom: 10px;

1136

1137 h4 {

1138 padding: 5px 0 5px 10px;

1139 font-size: 12px;

1140 border: 1px solid $grey;

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

1142 background-color: $offwhite;

1143 }

1144

1145 p {

1146 padding: 7px 10px;

1147 font-size: 12px;

1148 background-color: #FFF;

1149 border: 1px solid $grey;

1150 border-top: 0;

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

1152 }

1153 }

1154

1155 .browse-tag-list {

1156 background-color: $offwhite;

1157 border: 1px solid $grey;

1158 border-radius: 3px;

1159 table-layout: fixed;

1160 border-collapse: separate;

1161

1162 th, td {

1163 border-bottom: 1px solid $grey;

1164 }

1165

1166 tr:last-child th, tr:last-child td {

1167 border-bottom: 0;

1168 }

1169

1170 .browse-tag-k,

1171 .browse-tag-v {

1172 width: 50%;

1173 padding: 6px 10px;

1174 word-wrap: break-word;

1175 white-space: pre-wrap;

1176 }

1177

1178 .browse-tag-k {

1179 font-weight: 500;

1180 background-color: $offwhite;

1181 }

1182

1183 .browse-tag-v {

1184 border-left: 1px solid $grey;

1185 background-color: #fff;

1186 }

1187

1188 .colour-preview-box {

1189 float: right;

1190 width: 14px;

1191 height: 14px;

1192 margin: 4px 0px;

1193 border: 1px solid rgba(0, 0, 0, .1);

1194 // add color via inline css on element: background-color: <tag value>;

1195 }

1196 }

1197

1198 .warning {

1199 margin: 0 0 $lineheight/2 0;

1200 padding: 0 $lineheight/2;

1201 }

1202

1203 .note-comments li, .changeset-comments li {

1204 margin: $lineheight/2 0;

1205

1206 p {

1207 margin: 10px 6px 0 6px;

1208 line-height: 1.5;

1209 }

1210 }

1211

1212 .comments-header {

1213 float: left;

1214 }

1215

1216 .subscribe-buttons {

1217 float: left;

1218 margin: 18px 10px 10px;

1219 min-width: 80px;

1220 }

1221

1222 .subscribe-buttons input {

1223 font-size: 90%;

1224 line-height: 15px;

1225 min-height: 20px;

1226 }

1227

1228 span.action-button:hover {

1229 cursor: pointer;

1230 text-decoration: underline;

1231 }

1232

1233 .note-description {

1234 overflow: hidden;

1235 margin: 0 0 10px 10px;

1236 }

1237

1238 .query-intro p {

1239 padding: $lineheight $lineheight $lineheight/2;

1240 }

1241

1242 .query-results {

1243 display: none;

1244 padding-bottom: $lineheight/2;

1245

1246 h3 {

1247 padding: 0 $lineheight;

1248 }

1249

1250 ul {

1251 li {

1252 &.query-result {

1253 cursor: pointer;

1254 }

1255

1256 &.selected {

1257 background: $list-highlight;

1258 }

1259 }

1260 }

1261 }

1262 }

1263

1264 /* Rules for export sidebar */

1265

1266 .export_form {

1267 padding: $lineheight;

1268

1269 .export_area_inputs,

1270 .export_button {

1271 text-align: center;

1272 }

1273

1274 .export_area_inputs {

1275 margin-bottom: $lineheight/2;

1276 input[type="text"] {

1277 width: 80px;

1278 text-align: center;

1279 margin-bottom: 5px;

1280 }

1281 }

1282

1283 .export_boxy {

1284 background: $lightgrey;

1285 border: 1px solid $grey;

1286 border-radius: 3px;

1287

1288 #maxlat { margin-top: -1px; }

1289 #minlon {

1290 float: left;

1291 /* no-r2 */ margin-left: -1px;

1292 }

1293 #maxlon {

1294 float: right;

1295 /* no-r2 */ margin-right: -1px;

1296 }

1297 #minlat { margin-bottom: 0; }

1298 }

1299

1300 .export_bound {

1301 margin: $lineheight/4;

1302 }

1303

1304 .export_button {

1305 margin-top: $lineheight;

1306 margin-bottom: $lineheight;

1307 }

1308

1309 dl {

1310 padding-left: $lineheight/2;

1311 dd {

1312 margin-left: 0;

1313 margin-bottom: 10px;

1314 }

1315 }

1316 }

1317

1318 /* Rules for the routing sidebar */

1319

1320 #sidebar_content {

1321 #routing_credit {

1322 text-align: center;

1323 padding: 0.5em;

1324 }

1325 }

1326

1327 /* Rules for edit pages */

1328

1329 .site-edit {

1330 #content {

1331 position: absolute;

1332 top: $headerHeight;

1333 bottom: 0;

1334 width: 100%;

1335 }

1336

1337 #map {

1338 height: 100%;

1339 overflow: hidden;

1340 }

1341 }

1342

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

1344

1345 .content-heading {

1346 background: $lightgrey;

1347 }

1348

1349 .content-body {

1350 h1, h2, h3, p, ul, ol {

1351 margin-bottom: $lineheight;

1352 }

1353

1354 h1, h2, h3 {

1355 margin-top: $lineheight/2;

1356 }

1357 }

1358

1359 .content-inner {

1360 position: relative;

1361 max-width: 900px;

1362 margin: auto;

1363 padding: $lineheight;

1364 }

1365

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

1367

1368 .users-new,

1369 .users-create,

1370 .users-terms,

1371 .users-confirm {

1372 .content-heading .content-inner {

1373 height: 200px;

1374 }

1375 }

1376

1377 .header-illustration {

1378 background-position: 0 0;

1379 background-repeat: no-repeat;

1380 position: absolute;

1381 height: 200px;

1382 width: 100%;

1383 left: 0;

1384 bottom: 0;

1385

1386 &.new-user-main {

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

1388 }

1389

1390 &.confirm-main {

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

1392 }

1393

1394 &.new-user-terms {

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

1396 }

1397

1398 &.new-user-arm {

1399 height: 110px;

1400 width: 130px;

1401 left: 260px;

1402 top: 160px;

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

1404 z-index: 100;

1405 }

1406 }

1407

1408 [dir=rtl] .header-illustration {

1409 transform: scaleX(-1);

1410 }

1411

1412 #content.maximised {

1413 top: 0;

1414 left: 0;

1415 right: 0;

1416 bottom: 0;

1417 border: 0;

1418 z-index: 2000;

1419 }

1420

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

1422

1423 .content_map {

1424 position: relative;

1425 width: 45%;

1426 height: 400px;

1427 border: 1px solid $grey;

1428 margin-bottom: $lineheight;

1429 float: right;

1430 }

1431

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

1433

1434 #trace_list {

1435 border-width: 0px;

1436 text-align: right;

1437

1438 .trace_summary {

1439 font-size: 12px;

1440 color: gray;

1441 }

1442 }

1443

1444 /* Rules for the new trace form */

1445

1446 #new_trace {

1447 input[type=text] {

1448 width: 50%;

1449 width: calc(100% - 150px);

1450 max-width: 500px;

1451 }

1452 }

1453

1454 /* Rules for the edit trace form */

1455

1456 .edit_trace {

1457 .standard-form-row p {

1458 margin-bottom: 0px;

1459 }

1460

1461 input[type=text] {

1462 width: 50%;

1463 width: calc(100% - 150px);

1464 max-width: 500px;

1465 }

1466 }

1467

1468 /* Rules for the user profile page */

1469

1470 #userinformation {

1471

1472 min-height: 100px;

1473 .userinformation-inner {

1474 float: left;

1475 }

1476 h2 {

1477 margin-top: 0;

1478 }

1479 .user-description {

1480 width: 100%;

1481 clear: both;

1482 }

1483 .deemphasize {

1484 margin: 0;

1485 }

1486 }

1487

1488 .admin-user-info small {

1489 margin-bottom: $lineheight/2;

1490 display: inline;

1491 margin-right: $lineheight;

1492 }

1493

1494 .activity-block {

1495 clear: left;

1496 border-bottom: 1px solid $grey;

1497 padding-bottom: $lineheight;

1498 float: left;

1499 h3 {

1500 margin-bottom: $lineheight/2;

1501 }

1502 }

1503

1504 .contact-activity {

1505 margin-top: $lineheight;

1506 width: 100%;

1507 }

1508

1509 .activity-details p {

1510 margin-left: 70px;

1511 margin-bottom: 0;

1512 }

1513

1514 .users-show {

1515 // Silly exception; remove when user page is redesigned.

1516 .content-inner {

1517 max-width: none;

1518 }

1519 p#no_home_location {

1520 margin: $lineheight;

1521 }

1522 .user_thumbnail {

1523 margin-top: $lineheight/4;

1524 float: left;

1525 }

1526 }

1527

1528 /* Rules for the user map */

1529

1530 .content_map .leaflet-popup-content {

1531 margin: $lineheight/2;

1532 min-height: 50px;

1533 }

1534

1535 /* Rules for user popups on maps */

1536

1537 .user_popup {

1538 min-width: 200px;

1539 p {

1540 padding: 0 0 5px 0;

1541 margin-top: 0 0 0 60px;

1542 font-size: 12px;

1543 }

1544 img.user_thumbnail {

1545 float: left;

1546 margin: 0 $lineheight/2 0 0;

1547 }

1548 }

1549

1550 /* Rules for the user list */

1551

1552 #user_list {

1553 width: 100%;

1554

1555 tr {

1556 vertical-align: middle;

1557 }

1558

1559 p {

1560 margin-top: 0px;

1561 margin-bottom: 0px;

1562 }

1563 }

1564

1565 #user_list_actions {

1566 float: right;

1567 margin-top: $lineheight/2;

1568 }

1569

1570 /* Rules for the diary list page */

1571

1572 .diary_post {

1573 position: relative;

1574 padding-top: $lineheight;

1575 padding-bottom: $lineheight/2;

1576 border-top: 1px solid $grey;

1577

1578 &:first-of-type {

1579 margin-top: $lineheight/2;

1580 }

1581

1582 &.deemphasize {

1583 background-color: #fee;

1584 }

1585

1586 .post_heading {

1587 margin-bottom: $lineheight;

1588

1589 h2 {

1590 margin-top: 0;

1591 margin-bottom: $lineheight/2;

1592 }

1593 }

1594

1595 img.user_thumbnail {

1596 float: left;

1597 }

1598

1599 small.deemphasize {

1600 float: left;

1601 display: block;

1602 }

1603 }

1604

1605 .pagination {

1606 padding-top: $lineheight;

1607 }

1608

1609 /* Rules for the diary entry page */

1610

1611 .diary_entries {

1612 #map {

1613 position: relative;

1614 width: 90%;

1615 height: 400px;

1616 border: 1px solid $grey;

1617 display: none;

1618 margin-bottom: $lineheight;

1619 }

1620 #newcomment {

1621 border-top: 1px solid $grey;

1622 padding-top: $lineheight;

1623 margin-top: $lineheight/2;

1624 }

1625 .comments {

1626 max-width: 740px;

1627 }

1628 .diary-comment {

1629 border-top: 1px dashed $grey;

1630 padding-top: $lineheight/2;

1631 padding-bottom: $lineheight/2;

1632 &:first-child {

1633 margin-top: $lineheight/2;

1634 padding-top: $lineheight;

1635 border-top: 1px solid $grey;

1636 }

1637 &.deemphasize {

1638 background-color: #fee;

1639 }

1640 p {

1641 margin-bottom: $lineheight/2;

1642 }

1643 .comment-heading {

1644 margin-bottom: 0;

1645 margin-top: 0;

1646 }

1647 }

1648 }

1649

1650 .diary_entries-show img.user_thumbnail {

1651 float: left;

1652 }

1653

1654

1655 .diary-subscribe-buttons {

1656 position:relative;

1657 top: -30px;

1658 left: 130px;

1659 }

1660

1661 /* Rules for the log in page */

1662

1663 #login_auth_buttons {

1664 margin-bottom: 0;

1665 }

1666

1667 #login_auth_buttons li {

1668 float: left;

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

1670 }

1671

1672 /* Rules for the account confirmation page */

1673

1674 .users-terms {

1675 .legale {

1676 border: 1px solid $grey;

1677 padding: $lineheight;

1678 margin-bottom: $lineheight;

1679 overflow: auto;

1680 height: 20em;

1681

1682 li {

1683 list-style: inherit;

1684 }

1685

1686 ol ol {

1687 list-style-type: lower-alpha;

1688 }

1689 }

1690

1691 #decline {

1692 background: $lightblue;

1693 &:hover {

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

1695 }

1696 }

1697 }

1698

1699 /* Rules for the account settings page */

1700

1701 #accountForm .user_map {

1702 position: relative;

1703 width: 500px;

1704 height: 400px;

1705 border: 1px solid $grey;

1706 }

1707

1708 #accountForm .user_image {

1709 margin-bottom: 0;

1710 }

1711

1712 #accountForm #user_image {

1713 margin-left: 20px;

1714 }

1715

1716 #accountForm ul.accountImage-options {

1717 margin-left: 120px;

1718 }

1719

1720 .nohome .location {

1721 display: none;

1722 }

1723

1724 #homerow .message {

1725 display: none;

1726 }

1727

1728 .nohome .message {

1729 display: inline !important;

1730 }

1731

1732 .content_map.settings_map {

1733 width: 50%;

1734 float: none;

1735 }

1736

1737 /* Rules for the oauth settings page */

1738

1739 .oauth_clients .buttons .oauth-edit {

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

1741 }

1742

1743 .oauth_clients .buttons .oauth-delete {

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

1745 }

1746

1747 /* Rules for the oauth authorization page */

1748

1749 .oauth-authorize ul {

1750 list-style: none;

1751 }

1752

1753 /* Rules for messages pages */

1754

1755 .messages {

1756 width: 100%;

1757 border: 1px solid $grey;

1758

1759 input[type="submit"] {

1760 margin: auto;

1761 }

1762 tbody tr {

1763 border-top: 1px solid $grey;

1764 }

1765

1766 .inbox-row {

1767 background: $offwhite;

1768 }

1769

1770 .inbox-row-unread {

1771 background:#CBEEA7;

1772 }

1773

1774 .right {

1775 float: right;

1776 }

1777

1778 tr td,

1779 tr th {

1780 padding: $lineheight/4;

1781 }

1782 p:last-child,

1783 h2:last-child,

1784 h3:last-child,

1785 ol:last-child,

1786 ul:last-child {

1787 margin-bottom:0;

1788 }

1789 tr td {

1790 height: 30px;

1791 border-right: 1px solid $lightgrey;

1792 }

1793 }

1794

1795 .inbox-row .inbox-mark-read {

1796 display: none;

1797 }

1798

1799 .info-line {

1800 margin-bottom: $lineheight;

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

1802 border-bottom: 1px solid $grey;

1803

1804 form, form div {

1805 display: inline;

1806 }

1807 }

1808

1809 .info-line .user_thumbnail_tiny {

1810 vertical-align: middle;

1811 }

1812

1813 .inbox-sent {

1814 white-space: nowrap;

1815 }

1816

1817 .inbox-mark-unread,

1818 .inbox-mark-read,

1819 .inbox-delete {

1820 width: 1%;

1821 }

1822

1823 .inbox-row-unread .inbox-mark-unread {

1824 display: none;

1825 }

1826

1827 .messages-show .message-buttons {

1828 margin-top: $lineheight;

1829 margin-bottom: $lineheight * 1.5;

1830 padding-top: $lineheight;

1831 border-top: 1px solid $lightgrey;

1832 }

1833

1834 .messages-show .buttons .mark-unread-button {

1835 border-radius: 0;

1836 }

1837

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

1839

1840 .flash {

1841 padding: $lineheight;

1842

1843 &.error {

1844 background-color: #ff7070;

1845 }

1846

1847 &.warning {

1848 background-color: #ffe0cc;

1849 }

1850

1851 &.notice {

1852 background-color: #CBEEA7;

1853 }

1854

1855 div.message {

1856 display: inline-block;

1857 margin-left: $lineheight / 2;

1858 vertical-align: middle;

1859

1860 p {

1861 margin-top: $lineheight * 0.5;

1862 margin-bottom: $lineheight * 0.5;

1863

1864 &:first-child {

1865 margin-top: 0px;

1866 }

1867

1868 &:last-child {

1869 margin-bottom: 0px;

1870 }

1871 }

1872 }

1873 }

1874

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

1876

1877 .formError {

1878 display: inline-block;

1879 padding: 5px 10px;

1880 margin-top: 5px;

1881 border-radius: 4px;

1882 font-size: 12px;

1883 color: #fff;

1884 background-color: #ff7070;

1885 }

1886

1887 /* Rules for rails validation error boxes */

1888

1889 #errorExplanation {

1890 width: 400px;

1891 border: 2px solid #ff7070;

1892 padding: 0 $lineheight/2;

1893 margin-bottom: $lineheight;

1894 background-color: #f0f0f0;

1895

1896 h2 {

1897 margin: 0 -10px 10px -10px;

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

1899 font-weight: bold;

1900 font-size: 12px;

1901 background-color: #c00;

1902 color: #fff;

1903 text-align: left;

1904 }

1905

1906 p {

1907 color: #333;

1908 margin-bottom: 0px;

1909 padding: $lineheight/4;

1910 }

1911 }

1912

1913 /* Rules for forms */

1914

1915 .standard-form {

1916 fieldset {

1917 margin-bottom: $lineheight;

1918 }

1919 label.standard-label {

1920 display: block;

1921 margin-bottom: $lineheight/4;

1922 font-size: $typeheight;

1923 font-weight: bold;

1924 line-height: 1.5;

1925 }

1926 label.standard-label.secondary {

1927 display: inline-block;

1928 font-weight: normal;

1929 }

1930 .form-help {

1931 font-weight: normal;

1932 }

1933 .form-column {

1934 float: left;

1935 margin-right: 20px;

1936 }

1937 .form-divider {

1938 margin-top: $lineheight;

1939 padding-top: $lineheight;

1940 border-top: 1px solid $lightgrey;

1941 }

1942 .horizontal-list .standard-form-row {

1943 float: left;

1944 padding-right: 10px;

1945 }

1946 .standard-form-row {

1947 margin-bottom: $lineheight/2;

1948 }

1949 .form-list {

1950 margin-bottom: 0;

1951 }

1952 .form-list li {

1953 margin-bottom: 5px;

1954 list-style-type: none;

1955 }

1956 input[type="checkbox"],

1957 input[type="radio"] {

1958 float: left;

1959 margin-top: 5px;

1960 }

1961 }

1962

1963 #remember_me_openid {

1964 display: block;

1965 }

1966

1967 select {

1968 padding: 2px;

1969 }

1970

1971 input[type="checkbox"],

1972 input[type="radio"] {

1973 margin-right: 5px;

1974 }

1975

1976 input[type="text"],

1977 input[type="email"],

1978 input[type="url"],

1979 input[type="password"],

1980 textarea {

1981 color: #222;

1982 background-color: #fff;

1983 border: 1px solid $grey;

1984 border-radius: 3px;

1985 padding: 2px 5px;

1986 margin: 0;

1987 width: 200px;

1988

1989 &.field_with_errors {

1990 border: 2px solid #ff7070;

1991 }

1992 }

1993

1994 textarea {

1995 padding: 5px;

1996 width: 100%;

1997 min-height: 50px;

1998 resize: vertical;

1999 }

2000

2001 /* Rules for user images */

2002

2003 img.user_image {

2004 max-width: 100px;

2005 max-height: 100px;

2006 border: 1px solid $grey;

2007 margin-bottom: $lineheight;

2008 float: left;

2009 margin-right: $lineheight;

2010 }

2011

2012 img.user_thumbnail {

2013 max-width: 50px;

2014 max-height: 50px;

2015 border: 1px solid $grey;

2016 margin-right: $lineheight;

2017 }

2018

2019 img.user_thumbnail_tiny {

2020 width: auto;

2021 height: auto;

2022 max-width: 25px;

2023 max-height: 25px;

2024 border: 1px solid $grey;

2025 }

2026

2027 /* Rules for geo microformats */

2028

2029 abbr.geo {

2030 border-bottom: none;

2031 }

2032

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

2034

2035 ul.secondary-actions {

2036 font-style: normal;

2037 margin-bottom: 0;

2038 margin-left: 0;

2039 padding: 0;

2040 &.pager {

2041 display: inline-block;

2042 margin-right: 60px;

2043 }

2044 > li {

2045 display: block;

2046 float: left;

2047 list-style: none;

2048 border-left: 1px solid $grey;

2049 padding-left: $lineheight/2;

2050 margin-right: $lineheight/2;

2051 &:first-child {

2052 border-left: 0;

2053 padding-left: 0;

2054 }

2055 &:last-child {

2056 margin-right: 0px;

2057 }

2058 }

2059 }

2060

2061 div.secondary-actions {

2062 padding: 10px;

2063 text-align: center;

2064 }

2065

2066 /* Utility for managing inner content areas */

2067

2068 .inner22 { padding: $lineheight;}

2069

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

2071

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

2073

2074 .inner20 { padding: $lineheight 0;}

2075

2076 .inner02 { padding: 0 $lineheight;}

2077

2078 /* Utility for general button styles */

2079

2080 input[type="button"],

2081 input[type="submit"],

2082 input[type="reset"],

2083 a.button {

2084 cursor: pointer;

2085 border: 0;

2086 display: inline-block;

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

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

2089 min-width: 120px;

2090 margin: 0 0 $lineheight/2 0;

2091 color: white;

2092 background: $blue;

2093 text-align: center;

2094 border-radius: 2px;

2095 &:hover {

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

2097 text-decoration: none;

2098 }

2099 &.deemphasize {

2100 background: $lightblue;

2101 &:hover {

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

2103 }

2104 }

2105 &:disabled {

2106 background: $lightgrey;

2107 &:hover {

2108 background: $lightgrey;

2109 }

2110 }

2111 &:last-child {

2112 margin-bottom: 0;

2113 }

2114 }

2115

2116 input[type="button"],

2117 input[type="submit"],

2118 input[type="reset"] {

2119 line-height: normal;

2120 }

2121

2122 a.button {

2123 line-height: 20px;

2124 }

2125

2126 .buttons {

2127 min-width: 200px;

2128 input[type="submit"],

2129 input[type="button"],

2130 input[type="reset"],

2131 .button,

2132 .button_to {

2133 box-sizing: border-box;

2134 float: left;

2135 border-radius: 0;

2136 margin:0;

2137 min-width: 75px;

2138 max-width: 180px;

2139 border-right:1px solid white;

2140 text-overflow: ellipsis;

2141 white-space: nowrap;

2142 overflow: hidden;

2143 }

2144 input:first-child,

2145 .button:first-child,

2146 .button_to:first-child {

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

2148 }

2149 input:last-child,

2150 .button:last-child,

2151 .button_to:last-child {

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

2153 border-right-width: 0;

2154 }

2155 input:only-child,

2156 .button:only-child,

2157 .button_to:only-child,

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

2159 *[value="Hide"] + .button:last-child,

2160 *[value="Hide"] + .button_to:last-child {

2161 border-radius:2px;

2162 border-right-width: 0;

2163 }

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

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

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

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

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

2169 border-right-width: 0;

2170 }

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

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

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

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

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

2176 border-right-width: 1px;

2177 }

2178 }

2179

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

2181

2182 .table0,

2183 .item0 {

2184 background: $offwhite;

2185 }

2186

2187 .table1,

2188 .item1 {

2189 background: #fff;

2190 }

2191

2192 /* Rules for OpenID logo */

2193

2194 .openid_logo {

2195 vertical-align: text-bottom;

2196 border: 0;

2197 }

2198

2199 /* Rules for rich text */

2200

2201 .richtext,

2202 .prose {

2203 code {

2204 font-size: 13px;

2205 background: $lightgrey;

2206 padding: 2px 3px;

2207 }

2208

2209 pre {

2210 font-size: 13px;

2211 background: $lightgrey;

2212 padding: 2px 3px;

2213 white-space: pre-wrap;

2214

2215 code {

2216 padding: 0;

2217 }

2218 }

2219

2220 img {

2221 padding: $lineheight;

2222 background-color: $offwhite;

2223 display: block;

2224 max-width: 100%;

2225 margin: auto;

2226 }

2227

2228 blockquote {

2229 border-left: $lineheight solid $offwhite;

2230 padding-left: $lineheight;

2231 margin: 0;

2232 color: $darkgrey;

2233 }

2234 }

2235

2236 .diary_post .richtext {

2237 margin-top: $lineheight;

2238 }

2239

2240 .comments .richtext {

2241 margin-left: 70px;

2242 margin-top: 0;

2243 }

2244

2245 /* Rules for rich text editors */

2246

2247 input.richtext_title[type="text"] {

2248 width: 50%;

2249 width: calc(100% - 235px);

2250

2251 @media only screen and (max-width:768px) {

2252 width: 100%;

2253 }

2254 }

2255

2256 .richtext_container {

2257 margin-bottom: $lineheight;

2258

2259 .richtext_content {

2260 width: 50%;

2261 width: calc(100% - 235px);

2262 display: inline-block;

2263 vertical-align: top;

2264

2265 @media only screen and (max-width:768px) {

2266 width: 100%;

2267 }

2268

2269 .richtext_preview {

2270 display: inline-block;

2271 padding: $lineheight;

2272 background-color: $offwhite;

2273 overflow-x: auto;

2274

2275 &.loading {

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

2277 background-repeat: no-repeat;

2278 background-position: center;

2279 }

2280

2281 > :first-child {

2282 margin-top: 0px;

2283 }

2284 }

2285 }

2286

2287 .richtext_help {

2288 display: inline-block;

2289 vertical-align: top;

2290 margin-left: 15px;

2291 background-color: $offwhite;

2292 padding: $lineheight/2;

2293 width: 220px;

2294

2295 ul {

2296 margin-bottom: 0;

2297 }

2298

2299 h4.heading, li {

2300 border-bottom: 1px solid $grey;

2301 margin-bottom: $lineheight/4;

2302 padding-bottom: $lineheight/4;

2303 }

2304

2305 li h4, li span, li p {

2306 display: inline-block;

2307 vertical-align: top;

2308 font-size: 11px;

2309 }

2310

2311 li h4 {

2312 width: 40%;

2313 margin: 0;

2314 }

2315

2316 li span, li p {

2317 width: 50%;

2318 margin-left: $lineheight/2;

2319 margin-bottom: $lineheight/4;

2320 white-space: nowrap;

2321 }

2322 }

2323 }

2324

2325 /* Rules for the user notes list */

2326

2327 .note_list {

2328 tr.creator {

2329 background-color: $lightgrey;

2330 }

2331

2332 td {

2333 padding: 3px;

2334 }

2335

2336 p {

2337 margin-bottom: 0px;

2338 }

2339 }

2340

2341 /* Rules for the iD editor */

2342

2343 .id-embed {

2344 width: 100%;

2345 height: 100%;

2346 }

2347

2348 /* Rules for dropdown menus */

2349

2350 .dropdown {

2351 position: relative;

2352 }

2353

2354 .dropdown-toggle {

2355 *margin-bottom: -3px;

2356 }

2357

2358 .dropdown-toggle:active,

2359 .open .dropdown-toggle {

2360 outline: 0;

2361 }

2362

2363 .caret {

2364 display: inline-block;

2365 width: 0;

2366 height: 0;

2367 vertical-align: top;

2368 border-top: 4px solid #000000;

2369 border-right: 4px solid transparent;

2370 border-left: 4px solid transparent;

2371 content: "";

2372 }

2373

2374 .dropdown .caret {

2375 margin-top: 8px;

2376 margin-left: 2px;

2377 }

2378

2379 .dropdown-menu {

2380 position: absolute;

2381 top: 100%;

2382 left: -1px;

2383 z-index: 1000;

2384 display: none;

2385 float: left;

2386 min-width: 160px;

2387 padding: 5px 0;

2388 margin: 0;

2389 list-style: none;

2390 background-color: #ffffff;

2391 border: 1px solid $grey;

2392 border-radius: 0 3px 3px;

2393 *border-right-width: 2px;

2394 *border-bottom-width: 2px;

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

2396 background-clip: padding-box;

2397 }

2398

2399 .dropdown-menu.pull-right {

2400 right: 0;

2401 left: auto;

2402 }

2403

2404 .dropdown-menu .divider {

2405 *width: 100%;

2406 height: 1px;

2407 margin: 9px 1px;

2408 *margin: -5px 0 5px;

2409 overflow: hidden;

2410 background-color: $lightgrey;

2411 border-bottom: 1px solid #ffffff;

2412 }

2413

2414 .dropdown-menu > li > a {

2415 display: block;

2416 padding: 3px 10px;

2417 clear: both;

2418 font-weight: normal;

2419 line-height: 20px;

2420 color: #333333;

2421 white-space: nowrap;

2422 }

2423

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

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

2426 .dropdown-submenu:hover > a,

2427 .dropdown-submenu:focus > a {

2428 color: #ffffff;

2429 text-decoration: none;

2430 background-color: $green;

2431 }

2432

2433 .dropdown-menu > .active > a,

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

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

2436 color: #ffffff;

2437 text-decoration: none;

2438 background-color: $green;

2439 outline: 0;

2440 }

2441

2442 .dropdown-menu > .disabled > a,

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

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

2445 color: $darkgrey;

2446 }

2447

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

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

2450 text-decoration: none;

2451 cursor: default;

2452 background-color: transparent;

2453 background-image: none;

2454 }

2455

2456 .open {

2457 *z-index: 1000;

2458 }

2459

2460 .open > .dropdown-menu {

2461 display: block;

2462 }

2463

2464 .dropdown-backdrop {

2465 position: fixed;

2466 top: 0;

2467 right: 0;

2468 bottom: 0;

2469 left: 0;

2470 z-index: 990;

2471 }

2472

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

2474 .site-welcome, .site-fixthemap {

2475 .center {

2476 text-align: center;

2477 .sprite {

2478 float: none;

2479 margin: auto;

2480 }

2481 }

2482

2483 .sprite {

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

2485 background-size: 500px 250px;

2486 display: block;

2487 float: left;

2488 }

2489

2490 .icon-list {

2491 padding-bottom: 20px;

2492 div {

2493 margin-bottom: 10px;

2494 p {

2495 padding-top: 10px;

2496 }

2497 }

2498 }

2499 .sprite.small {

2500 width: 50px;

2501 height: 50px;

2502 }

2503

2504 .sprite.x {

2505 /* no-r2 */ background-position: -50px 0;

2506 }

2507

2508 .sprite.term {

2509 margin-right: 10px;

2510 vertical-align: middle;

2511 }

2512

2513 .sprite.node {

2514 /* no-r2 */ background-position: -100px 0;

2515 }

2516

2517 .sprite.way {

2518 /* no-r2 */ background-position: -150px 0;

2519 }

2520

2521 .sprite.tag {

2522 /* no-r2 */ background-position: -200px 0;

2523 }

2524

2525 .sprite.editor {

2526 /* no-r2 */ background-position: -250px 0;

2527 }

2528

2529 .sprite.question {

2530 /* no-r2 */ background-position: -300px 0;

2531 }

2532

2533 .sprite.rules {

2534 /* no-r2 */ background-position: -350px 0;

2535 }

2536

2537 .start-mapping {

2538 margin: auto;

2539 cursor: pointer;

2540 border: none;

2541 padding: 20px 40px;

2542 font-size: 30px;

2543 text-decoration: none;

2544 }

2545

2546 .icon.note {

2547 background-color: #333;

2548 border-radius: 4px;

2549 }

2550 }

2551

2552 .site-about #content {

2553 background-color: $lightgrey;

2554 background-position: 50% 50%;

2555 background-repeat: no-repeat;

2556 background-size: cover;

2557 background-attachment: fixed;

2558

2559

2560 .content-inner {

2561 position: relative;

2562 color: #333;

2563 min-width: 320px;

2564 max-width: 640px;

2565 }

2566

2567 .text {

2568 background: white;

2569 padding: 40px;

2570 }

2571

2572 .attr {

2573 position: relative;

2574 padding: 170px 40px 20px;

2575 background: #333;

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

2577 margin-bottom: 0;

2578 margin-top: -20px;

2579

2580 h1 {

2581 display: block;

2582 color: white;

2583 font-weight: 300;

2584 font-size: 34px;

2585 span {

2586 color: $vibrant-green;

2587 }

2588 }

2589

2590 .user-image {

2591 position: absolute;

2592 top: 0px;

2593 right: 240px;

2594 left: 0px;

2595 height: 150px;

2596 background-position: 0 50%;

2597 background-repeat: no-repeat;

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

2599 background-size: cover;

2600 background-color: $vibrant-green;

2601 }

2602

2603 .byosm {

2604 position: absolute;

2605 top: 0px;

2606 right: 0px;

2607 z-index: 1;

2608 width: 240px;

2609 height: 150px;

2610 padding: 20px 20px 20px 40px;

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

2612 white-space: nowrap;

2613 color: #fff;

2614 background: $vibrant-green;

2615 }

2616

2617 .byosm span {

2618 display: inline-block;

2619 width: 20px;

2620 margin-left: -20px;

2621 }

2622 }

2623

2624 .icon {

2625 width: 30px;

2626 height: 30px;

2627 margin-right: 10px;

2628 vertical-align: middle;

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

2630

2631 &.local {

2632 /* no-r2 */

2633 background-position: 0px 0px;

2634 }

2635 &.community {

2636 /* no-r2 */

2637 background-position: 0px -40px;

2638 }

2639 &.open {

2640 /* no-r2 */

2641 background-position: 0px -80px;

2642 }

2643 &.partners {

2644 /* no-r2 */

2645 background-position: 0px -120px;

2646 }

2647 &.infringement {

2648 /* no-r2 */

2649 background-position: 0px -160px;

2650 }

2651 &.legal {

2652 /* no-r2 */

2653 background-position: -45px -160px;

2654 }

2655 }

2656 }

2657

2658 @import 'browse';

2659

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

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

2662 display: none;

2663 }

2664 }

2665

2666 .read-reports {

2667 background: $lightgrey;

2668 opacity: 0.7;

2669 }

2670

2671 .issues-list {

2672 td:nth-child(2) {

2673 white-space: nowrap;

2674 }

2675 }