X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/1769971cde94eb07854f3b9c1a830c885ca858a3..50ea797f33409aecb6061f3f6baceb5c499edb2a:/app/assets/stylesheets/common.css.scss
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index d96a04eae..9e614f906 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -38,7 +38,6 @@ abbr, acronym {
strong {
font-weight: bold;
- font-weight: 500;
}
/* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */
@@ -105,18 +104,12 @@ body {
height: 100%;
}
-body.slim {
- background-color: #f0f0f0;
-}
-
h1, h2, h3 {
- font-weight: bold;
- font-weight: 500;
+ font-weight: 600;
line-height: 1.2;
}
h4, h5 {
- font-weight: bold;
font-weight: 500;
}
@@ -178,7 +171,7 @@ small, aside {
.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 */
@@ -212,8 +205,7 @@ table {
line-height: $lineheight;
}
th {
- font-weight: bold;
- font-weight: 500;
+ font-weight: 600;
vertical-align: top;
}
td {
@@ -248,7 +240,7 @@ header {
height: $headerHeight;
position: relative;
z-index: 1001;
- font-size: 13px;
+ font-size: 14px;
h1, nav, nav > ul, nav > ul > li, .dropdown {
display: inline-block;
@@ -270,7 +262,7 @@ header {
img.logo {
width: 30px;
height: 30px;
- margin-top: -4px;
+ margin-top: -2px;
vertical-align: middle;
}
@@ -310,7 +302,6 @@ nav.primary {
a.tab,
.dropdown-toggle {
display: inline-block;
- font-weight: bold;
font-weight: 500;
color: $green;
padding: 5px 15px;
@@ -359,7 +350,7 @@ nav.secondary {
color: $darkgrey;
padding: 5px;
- &:hover { color: darken($darkgrey, 10%); }
+ &:hover { color: darken($darkgrey, 25%); }
}
}
@@ -369,8 +360,6 @@ nav.secondary {
.user-menu {
$border: 1px solid $grey;
- font-weight: bold;
- font-weight: 500;
border: $border;
border-radius: $border-radius;
margin-left: 10px;
@@ -397,7 +386,8 @@ nav.secondary {
&.logged-in > a {
padding: 0;
> .user-button {
- padding: 5px 10px 5px 6px;
+ line-height: 1.8;
+ padding: 5px 10px 3px 6px;
display: inline-block;
color: $darkgrey;
}
@@ -414,7 +404,7 @@ nav.secondary {
border: 0;
vertical-align: top;
margin-top: 0px;
- margin: 3px 0 0 3px;
+ margin: 4px 0 0 4px;
border-radius: 2px;
}
@@ -633,7 +623,7 @@ nav.secondary {
float: left;
width: $sidebarWidth;
background: #fff;
- font-size: 13px;
+ font-size: 12px;
h2 {
padding: $lineheight $lineheight $lineheight/2;
@@ -642,6 +632,7 @@ nav.secondary {
h3, h4 {
margin-top: $lineheight;
margin-bottom: $lineheight/2;
+ font-size: 13px;
}
.icon.close {
@@ -650,19 +641,28 @@ nav.secondary {
}
}
+ .welcome {
+ display: none;
+ }
+
.overlay-sidebar #sidebar {
position: absolute;
z-index: 1000;
height: auto;
border-bottom-right-radius: 5px;
overflow: hidden;
+ .welcome {
+ display: block;
+ }
+ #sidebar_content {
+ display: none;
+ }
}
.welcome {
p {
padding: $lineheight/2 $lineheight $lineheight;
font-size: 110%;
- font-weight: normal;
font-weight: 300;
}
@@ -683,6 +683,14 @@ nav.secondary {
#map {
height: 100%;
overflow: hidden;
+
+ &.query-active {
+ cursor: help;
+ }
+
+ &.query-disabled {
+ cursor: not-allowed;
+ }
}
#map-ui {
@@ -707,6 +715,14 @@ nav.secondary {
color:#222;
border:1px solid #ddd;
}
+
+ .tooltip {
+ opacity: 1;
+ border: 1px solid #ccc;
+ .tooltip-arrow {
+ border-top-color: #ccc;
+ }
+ }
}
}
@@ -740,11 +756,11 @@ nav.secondary {
padding: 2px 6px;
border-bottom-right-radius: 3px;
cursor: pointer;
- font-weight: bold;
- font-weight: 500;
+ font-weight: 600;
font-size: 16px;
text-stroke: 2px #fff;
background: rgba(255,255,255,.9);
+ z-index: 2; // For IE9
input[type="radio"] {
display: none;
}
@@ -763,6 +779,7 @@ nav.secondary {
font-size: 13px;
margin-bottom: 8px;
}
+ li.disabled { color: #999; }
}
}
@@ -875,6 +892,12 @@ nav.secondary {
p {
padding: $lineheight;
}
+
+ input {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ }
}
#sidebar {
@@ -883,7 +906,7 @@ nav.secondary {
.load_more {
text-align: center;
margin: $lineheight auto;
- width: $lineheight;
+ width: 40px;
display: block;
}
}
@@ -987,8 +1010,8 @@ header .search_form {
#sidebar .changesets {
li {
- padding: $lineheight;
- border-bottom: $keyline;
+ padding: 15px 20px;
+ border-bottom: 1px solid #ddd;
cursor: pointer;
&.selected { background: #FFFFE6; }
@@ -996,7 +1019,7 @@ header .search_form {
}
h4 {
- margin-top: 0;
+ margin: 0;
a {
color: #000;
}
@@ -1008,12 +1031,18 @@ header .search_form {
#sidebar_content {
.browse-section {
padding: $lineheight/2 $lineheight;
+ border-bottom: 1px solid #ddd;
h4:first-child {
margin-top: 0;
+ word-wrap: break-word;
}
}
+ .browse-section:last-of-type {
+ border-bottom: none;
+ }
+
.paginate {
float: right;
padding: 1px 6px;
@@ -1051,25 +1080,25 @@ header .search_form {
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-weight: bold;
font-weight: 500;
background-color: #F6F6F6;
}
@@ -1094,8 +1123,41 @@ header .search_form {
}
}
- .note-description p {
- margin-left: 10px;
+ .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: #FFFFE6;
+ }
+
+ a {
+ color: #000;
+ }
+ }
+ }
}
}
@@ -1113,16 +1175,35 @@ header .search_form {
margin-bottom: $lineheight/2;
input[type="text"] {
width: 80px;
+ text-align: center;
margin-bottom: 5px;
}
}
+ .export_boxy {
+ background: #eee;
+ border: 1px solid #ccc;
+ border-radius: 3px;
+
+ #maxlat { margin-top: -1px; }
+ #minlon {
+ float: left;
+ margin-left: -1px;
+ }
+ #maxlon {
+ float: right;
+ margin-right: -1px;
+ }
+ #minlat { margin-bottom: 0; }
+ }
+
.export_bound {
margin: $lineheight/4;
}
.export_button {
margin-top: $lineheight;
+ margin-bottom: $lineheight;
}
dl {
@@ -1146,6 +1227,7 @@ header .search_form {
#map {
height: 100%;
+ overflow: hidden;
}
}
@@ -1158,7 +1240,7 @@ header .search_form {
}
.content-body {
- h1, h2, h3, p {
+ h1, h2, h3, p, ul, ol {
margin-bottom: $lineheight;
}
@@ -1230,43 +1312,7 @@ header .search_form {
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 */
@@ -1364,6 +1410,10 @@ header .search_form {
}
.user-view {
+ // Silly exception; remove when user page is redesigned.
+ .content-inner {
+ max-width: none;
+ }
p#no_home_location {
margin: $lineheight;
}
@@ -1513,7 +1563,7 @@ header .search_form {
padding: $lineheight;
margin-bottom: $lineheight;
overflow: auto;
- height: 10em;
+ height: 20em;
}
#decline {
@@ -1522,11 +1572,6 @@ header .search_form {
background: darken($lightblue, $hovercolor);
}
}
-
- .form-row {
- margin: auto;
- max-width: 370px;
- }
}
/* Rules for the account settings page */
@@ -1637,6 +1682,10 @@ header .search_form {
vertical-align: middle;
}
+.inbox-sent {
+ white-space: nowrap;
+}
+
.inbox-mark-unread,
.inbox-mark-read,
.inbox-delete {
@@ -1649,6 +1698,7 @@ header .search_form {
.message-read .message-buttons {
margin-top: $lineheight;
+ margin-bottom: $lineheight * 1.5;
padding-top: $lineheight;
border-top: 1px solid $lightgrey;
}
@@ -1676,12 +1726,6 @@ header .search_form {
/* 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;
@@ -1705,7 +1749,6 @@ header .search_form {
margin: 0 -10px 10px -10px;
padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
font-weight: bold;
- font-weight: 500;
font-size: 12px;
background-color: #c00;
color: #fff;
@@ -1739,7 +1782,6 @@ header .search_form {
margin-bottom: $lineheight/4;
font-size: $typeheight;
font-weight: bold;
- font-weight: 500;
line-height: 1.5;
}
label.standard-label.secondary {
@@ -1796,6 +1838,10 @@ textarea {
padding: 2px 5px;
margin: 0;
width: 200px;
+
+ &.field_with_errors {
+ border: 2px solid #ff7070;
+ }
}
textarea {
@@ -1822,6 +1868,8 @@ img.user_thumbnail {
}
img.user_thumbnail_tiny {
+ width: auto;
+ height: auto;
max-width: 25px;
max-height: 25px;
border: 1px solid #ccc;
@@ -1869,7 +1917,6 @@ ul.secondary-actions {
div.secondary-actions {
padding: 10px;
- border-top: 1px solid #ccc;
text-align: center;
}
@@ -2070,14 +2117,32 @@ a.button {
/* Rules for rich text editors */
+input.richtext_title[type="text"] {
+ width: 50%;
+ width: -moz-calc(100% - 235px);
+ width: -webkit-calc(100% - 235px);
+ width: calc(100% - 235px);
+
+ @media only screen and (max-width:768px) {
+ width: 100%;
+ }
+}
+
.richtext_container {
margin-bottom: $lineheight;
.richtext_content {
width: 50%;
+ width: -moz-calc(100% - 235px);
+ width: -webkit-calc(100% - 235px);
+ 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;
@@ -2287,7 +2352,7 @@ a.button {
}
/* Rules for the "Welcome" page */
-.site-welcome {
+.site-welcome, .site-fixthemap {
.center {
text-align: center;
.sprite {
@@ -2446,7 +2511,6 @@ a.button {
h1 {
display: block;
color: white;
- font-weight: normal;
font-weight: 300;
font-size: 34px;
span {