diff --git a/css/app.css b/css/app.css index cceffbb90..a448b212b 100644 --- a/css/app.css +++ b/css/app.css @@ -1,8 +1,17 @@ +/* Basics +------------------------------------------------------- */ + body { font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif; margin:0; padding:0; - color:#444; + color:#222; +} + +#iD * { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } h2 { @@ -35,6 +44,10 @@ a:hover { color:#000; } +table th { + text-align:left; +} + input[type=text] { font-size:12px; line-height:20px; @@ -45,22 +58,115 @@ input[type=text]:focus { border-color:#222; } -button { - background:#7092ff; - border:0; - color:#fff; - font-size:12px; - line-height:18px; - margin:5px 5px 0 0; - cursor:pointer; - border-radius:2px; +/* Utility Classes +------------------------------------------------------- */ + +.fillL { background-color: white;} +.fillL2 { background: #f7f7f7 url(/img/background-pattern-1.png) repeat;} +.fillD { + background-color: #222222; + color: white; +} +div.hide { + display:none; } -button.cancel { - background:#aaa; +a.selected { + background:#DDE4FF; } + +/* Buttons */ + +button { + border:0; + line-height:20px; + cursor:pointer; + border:1px solid #aaa; + box-shadow: inset 0 0 0 1px #fff; + color:#222; + background: white; + font-weight:bold; + white-space:nowrap; + font-size:14px; + display: inline-block; + height:40px; +} +.fillD button { border: 1px solid black; } + +button:hover { + background-color: #ececec; +} + +button.active:not([disabled]) { + background:#7392ff; + color:#fff; +} + +button.wide, +button.narrow { + border-radius:4px; +} + +button.wide { + margin: 10px; + width: 100px; +} + +button.add-button { + width: 80px; +} + +button.narrow, +button.Browse { + width:40px; +} + +.buttons-joined { + display: inline-block; + margin:10px; +} + +.buttons-joined button { + border-right-width: 0; + border-radius:0; + margin: 0; +} + +.buttons-joined button:first-child { + border-radius:4px 0 0 4px; +} + +.buttons-joined button:last-child { + border-right-width: 1px; + border-radius:0 4px 4px 0; +} + +button[disabled] { + color:#eee; + cursor:auto; +} + +button.save { + display:inline-block; + color:#6dc643; +} + button.delete { - background:#DD5757; + color:#ff7070; +} + +button.close { + position: absolute; + top: 10px; + right: 10px; +} + +input[type=text] { + width:150px; + height:20px; + border:1px solid #ccc; + padding:5px; + margin:0; } button small { @@ -71,219 +177,105 @@ button small { vertical-align: top; } -table th { - text-align:left; +button .label { + margin-right: 3px; + text-shadow: 0 1px 0 white; } -#map { - display:block; - position:absolute; - overflow:hidden; - top:45px; - left:0; - right:0; - bottom:0; - background:#fff; +.active .label { + text-shadow: 0 -1px 0 rgba(0,0,0,.25); } -#about { - position:absolute; - bottom:5px; - right:5px; - background:#fff; - padding:2px 5px; +/* Icons */ + +.icon { + display:inline-block; + vertical-align:top; + width:20px; + height:20px; + background:transparent url(/img/sprite.png) no-repeat 0px 0px; + text-indent:-9999px; + overflow:hidden; + } + +.icon.icon-pre-text { + margin-right: 3px; } +.icon.browse { background-position: 0px 0px;} +.icon.add-place { background-position: -20px 0px;} +.icon.add-road { background-position: -40px 0px;} +.icon.add-area { background-position: -60px 0px;} +.icon.undo { background-position: -80px 0px;} +.icon.redo { background-position: -100px 0px;} +.apply.icon { background-position: -120px 0px;} +.save.icon { background-position: -140px 0px;} +.close.icon { background-position: -160px 0px;} +.delete.icon { background-position: -180px 0px;} + +.active .icon.browse { background-position: 0px -20px;} +.active .icon.add-place { background-position: -20px -20px;} +.active .icon.add-road { background-position: -40px -20px;} +.active .icon.add-area { background-position: -60px -20px;} +.active .icon.undo { background-position: -80px -20px;} +.active .icon.redo { background-position: -100px -20px;} +.active .apply.icon { background-position: -120px -20px;} +.active .save.icon { background-position: -140px -20px;} +.active .close.icon { background-position: -160px -20px;} +.active .delete.icon { background-position: -180px -20px;} + + +button[disabled] .icon.browse { background-position: 0px -40px;} +button[disabled] .icon.add-place { background-position: -20px -40px;} +button[disabled] .icon.add-road { background-position: -40px -40px;} +button[disabled] .icon.add-area { background-position: -60px -40px;} +button[disabled] .icon.undo { background-position: -80px -40px;} +button[disabled] .icon.redo { background-position: -100px -40px;} +button[disabled] .apply.icon { background-position: -120px -40px;} +button[disabled] .save.icon { background-position: -140px -40px;} +button[disabled] .close.icon { background-position: -160px -40px;} +button[disabled] .delete.icon { background-position: -180px -40px;} + +/* ToolBar / Persistent UI Elements +------------------------------------------------------- */ + #bar { - background:#e8e8e8; - border-bottom:1px solid #aaa; + border-bottom:1px solid #ccc; position:absolute; left:0px; top:0px; - height:44px; right:0; + height:60px; } -div.layerswitcher-control { - position:absolute; - top:170px; - left:10px; - color:#222; -} +/* Special rules for toolbar icons */ -div.hide { +button.Browse .label { + display: none; + } + +/* Status box */ + +.messages { display:none; } -div.layerswitcher-control .content { - background:#fff; - padding:5px; - position:absolute; - left:40px; - width:100px; - top:0; -} - -div.layerswitcher-control div.opacity-options { - border:1px solid #000; - height:15px; - width:45px; -} - -div.layerswitcher-control a.layer { - display:block; -} - -div.layerswitcher-control a.opacity { - background:#000; - display:inline-block; - width:15px; - height:15px; -} - - -div.geocode-control { - position:absolute; - top:130px; - left:10px; - color:#222; -} - -#bar div.geocode-control button, -div.layerswitcher-control button { - width:40px; -} - -div.geocode-control input { - display:none; -} - -#bar button, -button.white { - width:80px; - white-space:nowrap; - cursor:pointer; - display:inline-block; - background:#fff; - color:#222; - font-weight:bold; - font-size:14px; - line-height:19px; - border-radius:3px; - border:1px solid #ccc; - padding:0 10px; - height:35px; - margin:0; -} - -div.buttons-joined { - margin:5px; - padding:1px; - background:#fff; - display:inline-block; - border-radius:3px; - border:1px solid #ccc; -} - -#bar div.buttons-joined button:first-child { - border-radius:2px 0 0 2px; -} - -#bar div.buttons-joined button:last-child { - border-right:0; - border-radius:0 2px 2px 0; -} - -#bar div.buttons-joined button { - height:31px; - border:0; - border-right:1px solid #ccc; - border-radius:0; -} - -#bar .messages { - display:none; -} - -.user { - width:200px; - position:absolute; - bottom:10px; - left:10px; - background:#fff; - padding:2px 5px; - border-radius:3px; - border:1px solid #aaa; -} - -.user .logout { - margin-left:10px; -} - -#bar button[disabled] { - color:#eee; - cursor:auto; -} - -#bar button.active:not([disabled]) { - background:#7392ff; - color:#fff; -} - -#bar button.save { - display:inline-block; - color:#6dc643; -} - -#bar button.mini, -#bar button.mini { - width:auto; -} - -#bar input[type=text] { - width:150px; - height:20px; - border:1px solid #ccc; - padding:5px; - margin:0; -} - -.zoombuttons { - position:absolute; - left:10px; - top:50px; - width:40px; -} - -#bar .zoombuttons button { - width:40px; - border:1px solid #ccc; -} - -#bar .zoombuttons button.zoom-in { - border-bottom:0; - border-radius:5px 5px 0 0; -} - -#bar .zoombuttons button.zoom-out { - border-radius:0 0 5px 5px; -} +/* Inspector */ .inspector-wrap { - border-radius:3px; border:1px solid #ccc; position:absolute; - top:50px; - left:50%; - margin-left:-175px; - overflow:auto; - padding:10px; - background:#fff; - width:350px; + right: 0; + left: 530px; + min-height: 60px; opacity:0; display:none; } +.inspector-inner { + padding: 10px; +} + .inspector-wrap a.permalink { text-decoration:none; margin-right:1em; @@ -304,7 +296,7 @@ div.buttons-joined { .inspector-wrap table { border-collapse: collapse; - width:347px; + width:100%; border-spacing:0; } @@ -318,12 +310,147 @@ div.buttons-joined { border-spacing:0; } -.inspector-wrap .close { - border: 0; - position: absolute; - top: 0; - right: 0; - cursor: pointer; +.inspector-wrap .buttons { + margin-top: 10px; + border-top: 1px solid #ccc; +} + +/* Map Controls */ + +.map-control { + left:10px; + position:absolute; +} + +.map-control button { + text-indent: -9999px; + overflow: hidden; + background-image: url(/img/sprite.png); +} + +/* Zoomer */ + +.zoombuttons { + top:70px; + width: 40px; +} + +.zoombuttons button.zoom-in { + background-position: 10px -90px; + border-bottom:0; + border-radius:4px 4px 0 0; +} + +.zoombuttons button.zoom-out { + background-position: -30px -90px; + border-radius:0 0 4px 4px; +} + +/* Layer Switcher */ + +.layerswitcher-control { + top:210px; +} + +.layerswitcher-control button { + background-position: -110px -90px; +} + +.layerswitcher-control .content { + background:#fff; + padding:5px; + position:absolute; + left:40px; + width:100px; + top:0; +} + +.layerswitcher-control .opacity-options { + border:1px solid #000; + height:15px; + width:45px; +} + +.layerswitcher-control a.layer { + display:block; +} + +.layerswitcher-control a.opacity { + background:#000; + display:inline-block; + width:15px; + height:15px; +} + +/* Geocoder */ + +.geocode-control { + top:160px; +} + +.geocode-control button { + background-position: -70px -90px; +} + +.geocode-control input { + display:none; +} + +/* Map +------------------------------------------------------- */ + +#map { + display:block; + position:absolute; + overflow:hidden; + top:45px; + left:0; + right:0; + bottom:0; + background:#fff; +} + +img.tile { + position:absolute; + transform-origin:0 0; + -ms-transform-origin:0 0; + -webkit-transform-origin:0 0; + -moz-transform-origin:0 0; + -o-transform-origin:0 0; +} + +#tile-g { + position:absolute; + top:0; +} + +/* About Section +------------------------------------------------------- */ + +#about { + position:absolute; + bottom:5px; + right:5px; + background:#fff; + padding:2px 5px; +} + +/* Account Information +------------------------------------------------------- */ + +.user { + width:200px; + position:absolute; + bottom:10px; + left:10px; + background:#fff; + padding:2px 5px; + border-radius:3px; + border:1px solid #aaa; +} + +.user .logout { + margin-left:10px; } div.typeahead { @@ -337,9 +464,8 @@ div.typeahead a { display:block; } -a.selected { - background:#DDE4FF; -} +/* Modals +------------------------------------------------------- */ .modal { width:640px; @@ -398,11 +524,8 @@ a.selected { overflow:auto; } -/* mobile tweaks */ -* { - -webkit-tap-highlight-color:rgba(0,0,0,0); - -webkit-touch-callout:none; -} +/* Tooltips +------------------------------------------------------- */ #bar button .tooltip { white-space: normal; @@ -411,15 +534,16 @@ a.selected { .tooltip { position: absolute; z-index: 1030; - display: block; padding: 5px; font-size: 11px; opacity: 0; + display: none; filter: alpha(opacity=0); visibility: visible; } .tooltip.in { + display: block; opacity: 0.8; filter: alpha(opacity=80); } @@ -452,16 +576,9 @@ a.selected { border-width: 0 5px 5px; } -img.tile { - position:absolute; - transform-origin:0 0; - -ms-transform-origin:0 0; - -webkit-transform-origin:0 0; - -moz-transform-origin:0 0; - -o-transform-origin:0 0; -} - -#tile-g { - position:absolute; - top:0; -} +/* Mobile Tweaks +------------------------------------------------------- */ +* { + -webkit-tap-highlight-color:rgba(0,0,0,0); + -webkit-touch-callout:none; +} \ No newline at end of file diff --git a/css/reset.css b/css/reset.css index e29c0f5f4..6e0beba61 100644 --- a/css/reset.css +++ b/css/reset.css @@ -1,4 +1,4 @@ -/* http://meyerweb.com/eric/tools/css/reset/ +/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ @@ -12,8 +12,8 @@ b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; @@ -24,7 +24,7 @@ time, mark, audio, video { vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } @@ -46,3 +46,112 @@ table { border-collapse: collapse; border-spacing: 0; } + +/* + * 1. Corrects font family not being inherited in all browsers. + * 2. Corrects font size not being inherited in all browsers. + * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ + padding: 0; +} + +/* + * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/* + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Corrects inability to style clickable `input` types in iOS. + * 3. Improves usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/* + * Re-set default cursor for disabled elements. + */ + +button[disabled], +input[disabled] { + cursor: default; +} + +/* + * 1. Addresses box sizing set to `content-box` in IE 8/9. + * 2. Removes excess padding in IE 8/9. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/* + * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/* + * Removes inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* + * Removes inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* +** Markup free clearing +** Details: http://www.positioniseverything.net/easyclearing.html +*/ +.cf:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; + } + +.cf { display: inline-block; } \ No newline at end of file diff --git a/img/background-pattern-1.png b/img/background-pattern-1.png new file mode 100644 index 000000000..8e3ffcbc4 Binary files /dev/null and b/img/background-pattern-1.png differ diff --git a/img/background-pattern-opacity.png b/img/background-pattern-opacity.png new file mode 100644 index 000000000..154dcf0b0 Binary files /dev/null and b/img/background-pattern-opacity.png differ diff --git a/img/source/design.svg b/img/source/design.svg index 0d245cfc2..c9f80174f 100644 --- a/img/source/design.svg +++ b/img/source/design.svg @@ -21,6 +21,28 @@ inkscape:export-ydpi="90"> + + + + @@ -112,43 +134,6 @@ inkscape:export-xdpi="90" inkscape:export-ydpi="90" /> - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -310,7 +476,8 @@ + inkscape:label="map" + style="display:inline"> @@ -329,50 +496,7 @@ inkscape:groupmode="layer" id="layer7" inkscape:label="shadows" - style="display:inline"> - - - - - - - + style="display:inline" /> + y="-131.63782" /> + id="g5774" + style="fill:#cccccc;fill-opacity:1"> + style="color:#000000;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + y="222.86218" /> logout - - - - - - - + d="M 278 54 L 277 55 L 277 57 L 278 58 L 278 62 L 277 63 L 277 65 L 278 66 L 280 66 L 281 65 L 285 65 L 286 66 L 288 66 L 289 65 L 289 63 L 288 62 L 288 58 L 289 57 L 289 55 L 288 54 L 286 54 L 285 55 L 281 55 L 280 54 L 278 54 z M 279 55 C 279.55228 55 280 55.447715 280 56 C 280 56.552285 279.55228 57 279 57 C 278.44772 57 278 56.552285 278 56 C 278 55.447715 278.44772 55 279 55 z M 287 55 C 287.55228 55 288 55.447715 288 56 C 288 56.552285 287.55228 57 287 57 C 286.44772 57 286 56.552285 286 56 C 286 55.447715 286.44772 55 287 55 z M 281 57 L 285 57 L 286 58 L 286 62 L 285 63 L 281 63 L 280 62 L 280 58 L 281 57 z M 279 63 C 279.55228 63 280 63.447715 280 64 C 280 64.552285 279.55228 65 279 65 C 278.44772 65 278 64.552285 278 64 C 278 63.447715 278.44772 63 279 63 z M 287 63 C 287.55228 63 288 63.447715 288 64 C 288 64.552285 287.55228 65 287 65 C 286.44772 65 286 64.552285 286 64 C 286 63.447715 286.44772 63 287 63 z " + transform="translate(594,-122.63782)" + id="path5288-4" /> - - + d="M 188 54 L 187 55 L 187 56.59375 L 180.59375 63 L 179 63 L 178 64 L 178 66 L 179 67 L 181 67 L 182 66 L 182 64.40625 L 188.40625 58 L 190 58 L 191 57 L 191 55 L 190 54 L 188 54 z M 189 55 C 189.55228 55 190 55.44772 190 56 C 190 56.55229 189.55228 57 189 57 C 188.74848 57 188.51948 56.903302 188.34375 56.75 C 188.30934 56.719983 188.28002 56.690659 188.25 56.65625 C 188.0967 56.480519 188 56.251521 188 56 C 188 55.44772 188.44772 55 189 55 z M 180 64 C 180.25152 64 180.48052 64.096697 180.65625 64.25 L 180.75 64.34375 C 180.9033 64.519481 181 64.748484 181 65 C 181 65.55229 180.55228 66 180 66 C 179.44772 66 179 65.55229 179 65 C 179 64.44772 179.44772 64 180 64 z " + transform="translate(81,51.362183)" + id="path5387" /> - - - - - - - - - - - - - - - - - - - - - - - - - - - this thing gets bigger areas. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Show a menu for doing operations, positioned relativeto selected feature. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Delete + + transform="translate(0,-309)" + inkscape:export-filename="/Users/saman/work_repos/iD/img/sprite.png" + inkscape:export-xdpi="90" + inkscape:export-ydpi="90"> Did you know? + y="-115">Did you know? Add a point of interest to the map. + Patterns + + + + + + + Baselayers + + + + + OpenStreetMap + + + Bing Satellite + + + Overlays + + + TIGER roads + + + Standard + + + + + + + + + + + + + Cycle Map + + + GPS Tracks + + + + + + + +