/* Default rules for the body of every page */
* {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
+ box-sizing: border-box;
}
body {
height: 100%;
}
-body.slim {
- background-color: #f0f0f0;
-}
-
h1, h2, h3 {
font-weight: 600;
line-height: 1.2;
.icon.close:hover { background-position: -200px -20px; }
.icon.check { background-position: -220px 0; }
.icon.note { background-position: -240px 0; }
-.icon.gear { background-position: -260px 0; }
+.icon.query { background-position: -260px 0; }
/* Rules for links */
#noscript {
z-index: 20000000;
- position: absolute;
- top: 15px;
- left: 15px;
+ margin-left: 400px;
+ margin-top: 50px;
}
/* Rules for bootstrap tooltips */
background-color: black;
}
- &.active {
- background-color: #9ed485;
- }
-
&.disabled {
background-color: #333;
background-color: rgba(0,0,0,.5);
cursor: default;
}
+ &.active {
+ background-color: #9ed485;
+ }
+
.icon {
margin: 10px;
}
#map {
height: 100%;
overflow: hidden;
+
+ &.query-active {
+ cursor: help;
+ }
+
+ &.query-disabled {
+ cursor: not-allowed;
+ }
}
#map-ui {
.leaflet-popup-content-wrapper {
border-radius: 4px !important;
- -webkit-border-radius: 4px !important;
}
/* Rules for attribution text under the main map shown on printouts */
p {
padding: $lineheight;
}
+
+ input {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ }
}
#sidebar {
}
}
-/* Rules for the search box */
+/* Rules for the search and direction forms */
-header .search_form {
+header .search_forms,
+.directions_form {
display: none;
}
-.search_form {
+.search_form,
+.directions_form {
position: relative;
padding: $lineheight/2;
background-color: $lightgrey;
input[type=text] {
width: 100%;
height: 30px;
- border-right: none;
-
transition: 300ms linear;
- -webkit-transition: 300ms linear;
- -moz-transition: 300ms linear;
+ }
+
+ input[type=text].overflow {
+ border-right: none;
}
input:focus {
box-shadow: 0px 0px 7px #9ED485;
}
- input[type=submit] {
+ input[type=submit].float {
float: right;
width: auto;
min-width: 0;
border-radius: 0 2px 2px 0;
}
+ select {
+ /* this next line is to polyfill the vertical alignment of text within a select element,
+ * which is different between firefox and chrome. */
+ padding: 0.3em 0;
+ }
+
+ .query_options {
+ text-align: right;
+ font-size: 10px;
+ color: $blue;
+ }
+
.describe_location {
position: absolute;
top: 6px;
font-size: 10px;
color: $blue;
}
+
+ .switch_link {
+ float: right;
+ width: auto;
+ min-width: 0;
+ margin-left: 6px;
+ }
+
+ img.button {
+ display: block;
+ }
+
+ span.force_width {
+ width: 100%;
+ padding-right: 25px;
+ display: block;
+ }
+
+ select.routing_engines {
+ min-height: 30px;
+ margin: 0px 0px 5px 25px;
+ }
+
+ div.line {
+ width: 100%;
+ margin: 0px 0px 5px 0px;
+ }
}
/* Rules for the map key which appears in the popout sidebar */
.search_results_entry {
ul li {
border-bottom: $keyline;
+ cursor: pointer;
&:first-child { border-top: $keyline; }
+ &.selected { background: $list-highlight; }
}
.search_details {
color: #f00;
}
+/* Rules for routing */
+
+#sidebar_content>table {
+ padding: 5px 20px 10px 15px;
+ width: 100%;
+ border-collapse: separate;
+}
+
+div.direction {
+ background-image: image-url('routing-sprite.png');
+ width: 20px;
+ height: 20px;
+ background-repeat: no-repeat;
+}
+@for $i from 1 through 17 {
+div.direction.i#{$i} { background-position: #{($i)*-20+20}px 0px; }
+}
+
+p#routing_summary {
+ padding: 0 $lineheight $lineheight/4;
+}
+
+td.instruction, td.distance {
+ padding-top: $lineheight/5;
+ padding-bottom: $lineheight/5;
+ border-bottom: 1px solid #DDD;
+}
+td.distance {
+ color: #BBB;
+ text-align: right;
+ font-size: x-small;
+}
+tr.turn {
+ cursor: pointer;
+}
+tr.turn:hover {
+ background: $list-highlight;
+}
+.routing_engines, #route_from, #route_to { margin-left: 25px; }
+.routing_marker { width: 15px; position: absolute; }
+
/* Rules for entity history */
#sidebar_content {
border-bottom: 1px solid #ddd;
cursor: pointer;
- &.selected { background: #FFFFE6; }
+ &.selected { background: $list-highlight; }
/* color is derived from changeset bbox fillColor in history.js */
}
h4:first-child {
margin-top: 0;
+ word-wrap: break-word;
}
}
border: 1px solid #ddd;
border-radius: 3px;
font-size: 12px;
+ table-layout: fixed;
+ border-collapse: separate;
- li {
+ th, td {
border-bottom: 1px solid #ddd;
}
- li:last-child {
+ tr:last-child th, tr:last-child td {
border-bottom: 0;
}
.browse-tag-k,
.browse-tag-v {
- display: inline-block;
width: 50%;
- float: left;
padding: 6px 10px;
+ word-wrap: break-word;
}
.browse-tag-k {
font-size: 90%;
}
- .note-comments li {
+ .note-comments li, .changeset-comments li {
margin: $lineheight/2 0;
p {
}
}
+ .comments-header {
+ float: left;
+ }
+
+ .subscribe-buttons {
+ float: left;
+ margin: 18px 10px 10px;
+ min-width: 80px;
+ }
+
+ .subscribe-buttons input {
+ font-size: 90%;
+ line-height: 15px;
+ min-height: 20px;
+ }
+
+ span.action-button:hover {
+ cursor: pointer;
+ text-decoration: underline;
+ }
+
.note-description {
overflow: hidden;
margin: 0 0 10px 10px;
}
+
+ .query-intro p {
+ padding: $lineheight $lineheight $lineheight/2;
+ }
+
+ .query-results {
+ display: none;
+
+ h3 {
+ padding: $lineheight $lineheight $lineheight/2;
+ margin: 0;
+ }
+
+ ul {
+ li {
+ padding: 15px 20px;
+ border-bottom: 1px solid #ddd;
+
+ &.query-result {
+ cursor: pointer;
+ }
+
+ &.selected {
+ background: $list-highlight;
+ }
+ }
+ }
+ }
}
/* Rules for export sidebar */
.export_button {
margin-top: $lineheight;
+ margin-bottom: $lineheight;
}
dl {
}
}
+/* Rules for the routing sidebar */
+
+#sidebar_content {
+ #routing_credit {
+ text-align: center;
+ padding: 0.5em;
+ }
+}
+
/* Rules for edit pages */
.site-edit {
right: 0;
bottom: 0;
border: 0;
- z-index: 1000;
-}
-
-#slim_container {
- width: 100%;
-}
-
-#slim_container_content {
- max-width: 50em;
- background-color: #FFFFFF;
- margin: $lineheight/2 auto;
- padding: 3px;
- border-radius: 25px;
- -moz-border-radius: 25px;
- border: 1px solid #e6e6e6;
-}
-
-#slim_content {
- margin: $lineheight/2;
- margin-top: 95px;
- max-width: 50em;
-
- .content-heading {
- margin-bottom: 15px;
- }
-}
-
-#slim_header {
- margin: 30px $lineheight/2;
- position: absolute;
- top: 0px;
- margin-right: $lineheight/4;
- img {
- vertical-align: middle;
- margin-bottom: $lineheight/4;
- margin-right: $lineheight/4;
- }
+ z-index: 2000;
}
/* Rules for small maps in content areas */
}
}
+/* Rules for the new trace form */
+
+#new_trace {
+ input[type=text] {
+ width: 50%;
+ width: calc(100% - 150px);
+ max-width: 500px;
+ }
+}
+
+/* Rules for the edit trace form */
+
+.edit_trace {
+ .form-row p {
+ margin-bottom: 0px;
+ }
+
+ input[type=text] {
+ width: 50%;
+ width: calc(100% - 150px);
+ max-width: 500px;
+ }
+}
+
/* Rules for the user profile page */
#userinformation {
.message-read .message-buttons {
margin-top: $lineheight;
+ margin-bottom: $lineheight * 1.5;
padding-top: $lineheight;
border-top: 1px solid $lightgrey;
}
/* Rules for highlighting fields with rails validation errors */
-.field_with_errors {
- padding: 2px;
- background-color: #ff7070;
- display: inline-block;
-}
-
.formError {
display: inline-block;
padding: 5px 10px;
padding: 2px 5px;
margin: 0;
width: 200px;
+
+ &.field_with_errors {
+ border: 2px solid #ff7070;
+ }
}
textarea {
}
img.user_thumbnail_tiny {
+ width: auto;
+ height: auto;
max-width: 25px;
max-height: 25px;
border: 1px solid #ccc;
cursor: pointer;
border: 0;
display: inline-block;
- line-height: 20px;
padding: $lineheight/4 $lineheight/2;
min-height: 20px + $lineheight/2;
min-width: 120px;
background: $blue;
text-align: center;
border-radius: 2px;
- -moz-border-radius: 2px;
&:hover {
background: darken($blue, $hovercolor);
text-decoration: none;
}
}
+input[type="button"],
+input[type="submit"],
+input[type="reset"] {
+ line-height: normal;
+}
+
+a.button {
+ line-height: 20px;
+}
+
.buttons {
min-width: 200px;
input[type="submit"],
input[type="button"],
input[type="reset"],
- .button {
+ .button,
+ .button_to {
box-sizing: border-box;
float: left;
border-radius: 0;
overflow: hidden;
}
input:first-child,
- .button:first-child {
+ .button:first-child,
+ .button_to:first-child {
border-radius:2px 0 0 2px;
}
input:last-child,
- .button:last-child {
+ .button:last-child,
+ .button_to:last-child {
border-radius:0 2px 2px 0;
border-right-width: 0;
}
input:only-child,
.button:only-child,
+ .button_to:only-child,
*[value="Hide"] + input:last-child,
- *[value="Hide"] + .button:last-child {
+ *[value="Hide"] + .button:last-child,
+ *[value="Hide"] + .button_to:last-child {
border-radius:2px;
border-right-width: 0;
}
/* if a 3-button set has a hidden middle button */
*[value="Hide"] + input:nth-child(3),
- *[value="Hide"] + .button:nth-child(3) {
+ *[value="Hide"] + .button:nth-child(3),
+ *[value="Hide"] + .button_to:nth-child(3) {
border-radius:0 2px 2px 0;
border-right-width: 0;
}
/* if a 3-button set starts with a hidden button */
*[value="Hide"] + input:nth-child(2):not(:last-child),
- *[value="Hide"] + .button:nth-child(2):not(:last-child) {
+ *[value="Hide"] + .button:nth-child(2):not(:last-child),
+ *[value="Hide"] + .button_to:nth-child(2):not(:last-child) {
border-radius:2px 0 0 2px;
border-right-width: 1px;
}
/* Rules for rich text editors */
+input.richtext_title[type="text"] {
+ width: 50%;
+ width: calc(100% - 235px);
+
+ @media only screen and (max-width:768px) {
+ width: 100%;
+ }
+}
+
.richtext_container {
margin-bottom: $lineheight;
.richtext_content {
width: 50%;
+ width: calc(100% - 235px);
display: inline-block;
vertical-align: top;
+ @media only screen and (max-width:768px) {
+ width: 100%;
+ }
+
.richtext_preview {
display: inline-block;
padding: $lineheight;
border-radius: 0 3px 3px;
*border-right-width: 2px;
*border-bottom-width: 2px;
- -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
- -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- background-clip: padding-box;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+ background-clip: padding-box;
}
.dropdown-menu.pull-right {
}
/* Rules for the "Welcome" page */
-.site-welcome {
+.site-welcome, .site-fixthemap {
.center {
text-align: center;
.sprite {
background-size: cover;
background-attachment: fixed;
- &.photo-0 { background-image: image-url('about/0.jpg'); .photo-0 { display: block; } }
- &.photo-1 { background-image: image-url('about/1.jpg'); .photo-1 { display: block; } }
- &.photo-2 { background-image: image-url('about/2.jpg'); .photo-2 { display: block; } }
- &.photo-3 { background-image: image-url('about/4.jpg'); .photo-3 { display: block; } }
- &.photo-4 { background-image: image-url('about/4.jpg'); .photo-4 { display: block; } }
- &.photo-5 { background-image: image-url('about/5.jpg'); .photo-5 { display: block; } }
-
.caption {
max-width: 200px;
font: 13px/20px Helvetica, Arial, sans-serif;
projects / rails.git / blobdiff