R2.0 GRAPHICAL DESIGN SPECIFICATION · R2.0 GRAPHICAL DESIGN SPECIFICATION Version 1.10 Document...
41
R2.0 GRAPHICAL DESIGN SPECIFICATION Version 1.10 Document Control Number xxxx-xxxxx 18 November 2012 Consortium for Ocean Leadership 1201 New York Ave NW, 4 th Floor, Washington DC 20005 www.OceanLeadership.org in Cooperation with University of California, San Diego University of Washington Woods Hole Oceanographic Institution Oregon State University Rutgers, The State University of New Jersey Scripps Institution of Oceanograph
Transcript of R2.0 GRAPHICAL DESIGN SPECIFICATION · R2.0 GRAPHICAL DESIGN SPECIFICATION Version 1.10 Document...
R2.0 GRAPHICAL DESIGN SPECIFICATION
Version 1.10 Document Control Number xxxx-xxxxx
18 November 2012
Consortium for Ocean Leadership 1201 New York Ave NW, 4th Floor, Washington DC 20005
www.OceanLeadership.org
in Cooperation with
University of California, San Diego University of Washington
Woods Hole Oceanographic Institution Oregon State University
Rutgers, The State University of New Jersey Scripps Institution of Oceanograph
R2.0 Graphical Design Specification
v1.00 i
CI User Experience
v1.00 R2.0 Graphical Design Specification
Funding for the Ocean Observatories Initiative is provided by the National Science Foundation through a Cooperative Agreement with the Consortium for Ocean Leadership. The OOI Program Implementing Organizations are funded through sub-awards from the Consortium for Ocean Leadership.
Prepared By Martin Locker OOI CI User Experience Interaction Designer [email protected] +66 896992033
Susanne Jul, PhD OOI CI User Experience Strategist [email protected] +1 650-488-7886
18 November 2012
R2.0 Graphical Design Specification
v1.00 ii
Table of Contents R2.0 Graphical Design Specification 1 1 Summary iii 2 Visual treatment 3
2.1 Fonts 3 2.2 Screen layout 2 2.3 Banner 3
2.3.1 Banner buttons 4 2.4 Background 4 2.5 Title Area 5
2.5.1 View Title 5 2.5.2 Notifications 5
2.6 Footer area 7 2.7 Left Column 9
2.7.1 Search 9 2.7.2 Context Search Map 9 2.7.3 Search text field 9 2.7.4 Advanced Search 10 2.7.5 Left Column: Navigation 11
2.8 View Area: tabs 13 2.8.1 Tabs 13
2.9 View area: panels 15 2.9.1 Attribute Group 17 2.9.2 Attribute Group with image 17 2.9.3 Attribute group heading (Optional) 17 2.9.4 Text–Extended 17 2.9.5 Text–Short and Text–Static 17 2.9.6 List 18 2.9.7 Tile list 18 2.9.8 Tile widget 18 2.9.9 News tab 19 2.9.10 Map legend 19 2.9.11 Tables 20 2.9.12 Table header 20 2.9.13 Table body 21 2.9.14 Table cells 21 2.9.15 Charts 22 2.9.16 Graphs 23 2.9.17 Map 24 2.9.18 Advanced Search 26 2.9.19 Callouts 30
2.10 Editing 31 2.10.1 Table filter 31 2.10.2 Edit Information 32 2.10.3 Other graphics 33
2.11 css sprite artwork 34
R2.0 Graphical Design Specification
v1.00 iii
1 SUMMARY The Ocean Observatories Initiative (OOI) project is aimed at developing a national infrastructure to allow scientists, educators and the general public to interact in real time with networks of sensors in the ocean and on the sea floor, and with the data the networks provide. The networks and infrastructure are intended to be extensible to allow for integration of new networks and sensors as they become available and to allow for future users and uses as they emerge. The OOI Cyberinfrastructure (CI) is the component of the project that is charged with developing a computational framework and operational management facilities for data management, exchange and access. Design and development of user interfaces and experiences for OOI are part of CI’s responsibilities, including that of the initial application that provides access to OOI data and resources.
This document contains the high-‐level specification of the graphic user interfaces for Release 2 of the CI-‐provided application.
2 VISUAL TREATMENT 2.1 FONTS The Font used for the Banner Heading “Ocean Observatories Initiative” is Absara TF Regular SC 25px.
The remaining User Interface uses the Open Source Google Web Fonts: Signika Negative for the dark version and Signika for the light version. It is envisioned that future developments will enable users to select from a list of suitable fonts as well as sizes.
Designed by Anna Giedryś, Signika is a sans-‐serif with a gentle character, developed for wayfinding, signage, and other media where clarity of information is required. It has a low contrast and tall x-‐height to improve readability of texts in small sizes as well as in large distances from the reader. Being a typical signage typeface it is inspired by typefaces such as Ronnia, Meta, and Tahoma.
F
R2.0 Graphical Design Specification
v1.00 2
The typeface comes with a wide character set supporting Western European languages, Polish, and Czech. The figures are designed as tabular.
The Negative version is optimized to solve the effect of juxtaposed positive and negative text setting, where the text in negative tends to look thicker.
To download this font and read the license agreement see: http://www.google.com/webfonts#HomePlace:home
In order to use web fonts the following link needs to be included in the html documents:
Dark Light
<link href='http://fonts.googleapis.com/css?family=Signika+Negative:300,400,600,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Signika:300,400,600,700' rel='stylesheet' type='text/css'>
2.2 SCREEN LAYOUT The primary visual organization consists of two main sections organized vertically on the screen (Figure 1). The left-‐most area is reserved for Search and Navigation, leaving the balance of the screen, the View Area to display content and provide the main working area.
All measurements are in pixels and all design dimensions follow a 5-‐pixel grid as much as is possible.
R2.0 Graphical Design Specification
v1.00 3
Figure 1. High-‐Level Screen Layout and Organization
Across the top of the screen is the Banner Area that contains application-‐level controls and across the bottom the Footer contains view-‐level controls.
height width
Banner: 70 px x full browser width Title Area: 40 px x full browser width Left column: full height – 150 px x 230 px View Area: full height – 150 px x full browser width – 245 px Right margin: full height – 150 px x 15 px Footer: 40 px x full browser width
BANNER TITLE AREA AND STATUS NOTIFICATION LEFT COLUMN SEARCH & MENU
VIEW AREA
FOOTER
2.3 BANNER The banner remains the same for both the light and dark version. For wider screens, the logo remains left and buttons remain right.
The artwork for the logo, heading, and background wave is provided as a png bitmap.
R2.0 Graphical Design Specification
v1.00 4
Background color: #004972
Horizontal highlight: size: 1; width: 100%; color: #0079AF
ID banner 2110061
ID logo 2110085
2.3.1 Banner buttons
The buttons contained within the banner reflect two user types: Guests and Registered Users. Registered users may or may not need to ‘sign in’.
Registered user Guest
CSS specification: (Buttons are spaced 10px apart)
Button: CAPS .button {font-family: Signika Negative; color: #FFFFFF; font-size: 11px; font-weight: 400; letter-spacing: 2px; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; -webkit-border-radius: 7px; -moz-border-radius: 7px; border: solid #00354C 1px; background: -webkit-gradient(linear, 0 0, 0 100%, from(#0079AF), to(#025C99)); background: -moz-linear-gradient(top, #0079AF, #025C99);}
Button: rollover .button:hover {background: #0079AF;}
Button: mousedown .button:active {background: #025C99;}
2.4 BACKGROUND The remaining screen area below the banner follows two graphic styles: Dark and Light.
Dark Light
Background colors: #000000 #CCCCCC
Default font: font-family: Signika Negative; color:#CCCCCC; font-size:12px; font-weight:300; line-height:20px;
font-family: Signika Negative; color:#4D4D4D; font-size:12px; font-weight:300; line-height:20px;
R2.0 Graphical Design Specification
v1.00 5
2.5 TITLE AREA The title area is made up of two sections: View Title (align left) and Notifications (align right).
2.5.1 View Title
The view title is made up of two components: The resource type followed by colon ‘:’ and the resource name.
Dark Light
Resource type: CAPS font-family: Signika Negative;
font-size: 15px; font-weight: 300; color: #CCCCCC;
font-family: Signika;
font-size: 15px; font-weight: 300; color: #1A1A1A;
Resource name: CAPS font-size: 16px; font-weight: 600;
color: #CCCCCC;
font-size: 16px; font-weight: 600;
color: #1A1A1A;
The title is indented 230px from the left edge, with a baseline alignment of 30px from the bottom of the banner.
2.5.2 Notifications
Aligned 15px right in the title area are also the notifications. The bottom of the icons align (not the grey panel) horizontally with the view title. 30px from the bottom of the banner.
Dark Light
Typography: font-family: Signika Negative;
font-size:12px;
font-weight:400; color:#999999; padding-right:10px;
font-family: Signika;
font-size:12px;
font-weight:400; color:#999999; padding-right:10px;
Icons: (spaced 7px) width:”20px”; height:”20px”; width:”20px”; height:”20px”;
Badges width:”14px”; height:”14px”;
position: -5, 10
width:”14px”; height:”14px”;
position: -5, 10
Graphic icons
Power 2110028 Data
2110031
Communications 2110029 Location
2110030
R2.0 Graphical Design Specification
v1.00 6
Graphic badges (white outline)
Badges overlap the background icon and are positioned 10x, -‐5y pixels to the origin of the background icon.
Critical Alert 2110140 Off
2110140
Warning Alert 2110140 Status unknown
2110140
R2.0 Graphical Design Specification
v1.00 7
2.6 FOOTER AREA The footer area should remain in view at all times – appears right and fixed to the bottom of the browser.
Note: The checkbox and layout buttons are shown as placeholders in the illustration below:
CSS specification: (Buttons are 20px high and spaced apart by 10px)
Dark Light
View button: CAPS .footer-button {font-family: Signika Negative; color: #999; font-size: 11px; font-weight:400; letter-spacing:2px; padding-top: 4px; padding-right: 15px; padding-bottom: 4px; padding-left:15px; margin-top:5px; margin-bottom:5px; text decoration: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: solid #808080 1px; background: #333333; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#414042), color-stop(75%,#333333), color-stop(75%,#333333), color-stop(100%,#231F20)); background: -moz-linear-gradient(center top, #414042 0%, #333333 75%, #333333 75%, #231F20 100%);}
.footer-button {font-family: Signika; color: #FFFFFF; font-size:11px; font-weight: 400; letter-spacing:2px; padding-top: 4px; padding-right:10px; padding-bottom:4px; padding-left:10px; text-decoration: none; -webkit-border-radius:5px; -moz-border-radius:5px; border: solid #808080 1px; background: #B3B3B3; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#BDBDBD), color-stop(75%,#B3B3B3), color-stop(75%,#B3B3B3), color-stop(100%,#ABABAB)); background: -moz-linear-gradient(center top, #BDBDBD 0%, #B3B3B3 75%, #B3B3B3 75%, #ABABAB 100%);}
View button selected: .button-selected-view {color: #FFFFFF; border: solid #FFFFFF 1px; background: #666666;}
.button-selected-view {color: #FFFFFF; border: solid #333333 1px; background: #7F7F7F;}
View button rollover: .button:hover {border: solid #FFFFFF 1px; color: #FFFFFF}
.button:hover {border: solid #333333 1px; color: #FFFFFF}
Checkbox label: CAPS letter-spacing:2px; color:#999999 letter-spacing:2px; color:#FFFFFF; text-shadow:#999;
Layout buttons: height:23px; width:31px; height:23px; width:31px;
view buttons: spacing 15px 15px
layout buttons: spacing
10px 10px
Stand alone checkbox: 12px x 12px 12px x 12px
R2.0 Graphical Design Specification
v1.00 8
The standalone checkbox is used for ‘news’
Graphic image
passive hover (mouse down)
Checkbox unchecked ID 2500151
Checkbox checked ID 2500151
View buttons follow the same as buttons for the screen layout buttons.
Graphic image ID 2110109
Full view 2500077 Menu 2500082 Menu split 2500081
Passive Hover Selected Passive Hover Selected Passive Hover Selected
light
dark
R2.0 Graphical Design Specification
v1.00 9
2.7 LEFT COLUMN
2.7.1 Search
The left column can be divided up in to two sections: ‘Search’ and ‘Navigation’.
Search has 3 components: search map, search text field, advanced search button. Spaced 10px apart.
2.7.2 Context Search Map
Dimensions: 120px by 200px
Dark Light
Background: #000000; #E6E6E6;
Focus land area: #333333; #B3B3B3;
Other land area: #282828; #999999;
Outline: #808080; line: 1px solid; #808080; line: 1px solid;
Focus area: #3FA9F5; line: 1px dashed:2px; #3FA9F5; line: 1px dashed:2px;
2.7.3 Search text field
CSS graphical specification for Search (same for dark and light):
Dark Light
Search text entry field
CAPS
.textfield {font-family: Signika Negative; color: #666666; font-size: 11px; font-weight:400; letter-spacing:2px; padding-top:
.textfield {font-family: Signika Negative; color: #666666; font-size: 11px; font-weight:400; letter-spacing:2px; padding-top:
R2.0 Graphical Design Specification
v1.00 10
3px; padding-bottom: 2px; padding-right: 10px; padding-left: 10px; margin-top: 10px; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border: solid #999 1px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(25%,#e6e3e6), color-stop(25%,#e6e3e6), color-stop(100%,#ffffff)); background: -moz-linear-gradient(center top, #e0e0e0 0%, #e6e3e6 25%, #e6e3e6 25%, #ffffff 100%);}
3px; padding-bottom: 2px; padding-right: 10px; padding-left: 10px; margin-top: 10px; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border: solid #999 1px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(25%,#e6e3e6), color-stop(25%,#e6e3e6), color-stop(100%,#ffffff)); background: -moz-linear-gradient(center top, #e0e0e0 0%, #e6e3e6 25%, #e6e3e6 25%, #ffffff 100%);}
Graphic icon
Search 2110035
2.7.4 Advanced Search
CSS specification for Advanced Search:
Dark Light
Advanced Search button: CAPS
.button {font-family: Signika; color:#999; font-size:11px; font-weight:400; letter-spacing:2px; padding-top:2px; padding-bottom: 1px; padding-right:10px; padding-left: 10px; margin-bottom:5px; margin-left:15px; margin-right:67px; margin-top:10px; text-decoration: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: solid #808080 1px; background:#333333; background:-webkit-gradient (linear, left top, left bottom, color-stop(0%,#3d3d3d), color-stop(75%,#333333), color-stop(75%,#333333), color-stop(100%,#2e2e2e)); background: -moz-linear-gradient(center top, #3d3d3d 0%, #333333 75%, #333333 75%, #2e2e2e 100%);}
.button {font-family: Signika; color:#fff; font-size:11px; font-weight:400; letter-spacing:2px; padding-top:2px; padding-bottom:1px; padding-right:10px; padding-left:10px; margin-bottom:5px; margin-left:15px; margin-right:67px; margin-top:10px; text-decoration: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: solid #808080 1px; background:#B3B3B3; background:-webkit-gradient (linear, left top, left bottom, color-stop(0%,#BDBDBD), color-stop(75%,#B3B3B3), color-stop(75%,#B3B3B3), color-stop(100%,#ABABAB)); background:-moz-linear-gradient(center top, #BDBDBD 0%, #B3B3B3 75%, #B3B3B3 75%, #ABABAB 100%);}
Advanced Search button: rollover
.button:hover {background: #666666; color:#fff; border: solid #fff 1px;}
.button:hover {background: #999999; color:#fff; border: solid #333333 1px;}
Advanced Search button: mousedown
.button:active {background: #333333; color:#fff; border: solid #fff 1px;}
.button:active {background: #666666; color:#fff; border: solid #333333 1px;}
See below for details on the advanced search dialog.
R2.0 Graphical Design Specification
v1.00 11
2.7.5 Left Column: Navigation
Navigation headings have 3 levels. Rules divide each level-‐one section.
ALL navigation headings are spaced vertically baseline to baseline: 20px
Bullet icons are represented as placeholders. There are also values or icons aligned right for navigation levels 1 and 2. See previous illustration for reference.
Navigation-‐One: Can expand or collapse child list
Dark Light
Horizontal Rule: size="1" color="#4D4D4D" size="1" color="#7A7A7A"
Typography: CAPS font-weight:400;
font-size:10px; letter-spacing:2px; color:#CCCCCC;
font-weight:400;
font-size:10px; letter-spacing:2px; color:#333333;
Collapse/Expand icon: Aligned right: shows on rollover Aligned right: shows on rollover
R2.0 Graphical Design Specification
v1.00 12
Navigation-‐Two: Has different icon for each bullet; can expand or collapse child list; can have value indicated by number or check-‐mark aligned right (200)
Dark Light
Bullet icon: height:14px;
width:14px;
margin-left:10px;
height:14px;
width:14px;
margin-left:10px;
Typography: font-weight:300;
font-size:13px; color:#CCCCCC; margin-left:3px;
font-weight:300;
font-size:13px; color:#333333; margin-left:3px;
Value: Aligned right: number or check Aligned right: number or check
Navigation-‐Three:
Dark Light
Typography: font-weight:300;
font-size:13px; color:#CCCCCC; margin-left:44px;
font-weight:300;
font-size:13px; color:#333333; margin-left:44px;
Navigation: Interaction
Dark Light
Hover: color:#FFFFFF; color:#FFFFFF;
Mousedown: color:#666666; color:#000000;
Selected: font-weight:400; color:#FFFFFF; font-weight:400; color:#000000;
Graphic icons
All Resources (Mini) 2110043
Attachment (Mini) 2110118
Bookmark (Min i) 2110040
Checkmark (Mini) 2110081
Collection (Mini) 2110019
Communications Flow (Mini) 2110111
Data Document (Mini) 2110050
Data Flow (Mini) 2110113
Data Producer (Mini) 2110119
Data Product (Mini) 2110120
Data Set (Mini) 2110121
Deployment (Mini) 2110122
Device (Mini) 2110123
Document (Mini) 2110102
Folder (Mini) 2110048
Glider (Mini) 2110124
Instrument (Mini) 2110125
Leakage (Mini) 2110126
Location (Mini) 2110114
Mooring (Mini) 2110127
Observatory (Mini) 2110128
Platform (Mini) 2110129
Policy (Mini) 2110034
Power Flow (Mini) 2110112
Resource (Mini) 2110130
Saved Search (Mini) 2110026
Sensor (Mini) 2110131
Site (Mini) 2110132
Subscription (Mini) 2110097
User (Mini) 2110025
Vacuum (Mini) 2110134
Arrow down (Mini) 2110079
Arrow right (Mini) 2110066
R2.0 Graphical Design Specification
v1.00 13
2.8 VIEW AREA: TABS The View Area is the main display area for resources. The View Area supports four primary view types.
Dashboard Facepage Related Status
All these views may or may not include ‘News’. The view area is subdivided by tabs, which in turn, are subdivided by panels.
2.8.1 Tabs
The view area is made up of one or more tabbed sections. Tabs can be presented in the view area side-‐by-‐side or stacked. Space between tabs is 10px. A single tab can be made up of one or more panels.
Above: shows foreground/background tabs. Below: shows flexibility required for tab layout
CSS Specification for tab header: (Minimum width: 100px)
Dark Light
Foreground tab .tab {background: -webkit-gradient(linear, left top, left bottom, color-stop (0%,#999999), color-stop(80%,#808080), color-stop(80%,#808080), color-stop (100%,#333333)); background: -moz-linear-gradient(center top, #999999 0%, #808080 80%, #808080 80%, #333333 100%); -webkit-box-shadow: 1px 1px #999999 inset; -moz-box-shadow: 1px 1px #999999 inset; box-shadow: 1px 1px #999999 inset; -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; text-shadow: 1px 1px 0px #333333;
.tab {background: -webkit-gradient(linear, left top, left bottom, color-stop (0%,#FFFFFF), color-stop(80%,#E6E6E6), color-stop(80%,#E6E6E6), color-stop (100%,#CCCCCC)); background: -moz-linear-gradient(center top, #FFFFFF 0%, #E6E6E6 80%, #E6E6E6 80%, #CCCCCC 100%); -webkit-box-shadow: 1px 1px #FFFFFF inset; -moz-box-shadow: 1px 1px #FFFFFF inset; box-shadow: 1px 1px #FFFFFF inset; -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; text-shadow: 1px 1px 0px #FFFFFF;
R2.0 Graphical Design Specification
v1.00 14
padding:5px 30px 5px 10px; font-family: Signika; font-size: 15px; color: #FFFFFF; letter-spacing:1px; margin-right: 10px; width:115px;}
padding:5px 30px 5px 10px; font-family: Signika; font-size: 15px; color: #333333; letter-spacing:1px; margin-right:10px; width:115px;}
Foreground tab: rollover
.tab:hover {color:#000000; text-shadow:none;}
.tab:hover {color:#999999; text-shadow:none;}
Settings button: (appears on rollover)
width:14px; height:14px align:right
width:14px; height:14px align:right
Foreground tab: mousedown
.tab:active {color:#000000; background:#CCC;}
.tab:active {color:#000000; background:#FFF;}
Background tab: .tab-back {background: #1A1A1A; -webkit-box-shadow: 1px 1px #333333 inset; -moz-box-shadow: 1px 1px #333333 inset; box-shadow: 1px 1px #333333 inset; -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; padding: 5px 30px 5px 10px; font-family: Signika; font-size: 15px; color: #808080; letter-spacing:1px; margin-right:10px; width:115px;}
.tab-back {background: #B3B3B3; -webkit-box-shadow: 1px 1px #D8D8D8 inset; -moz-box-shadow: 1px 1px #D8D8D8 inset; box-shadow: 1px 1px #D8D8D8 inset; -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; padding: 5px 30px 5px 10px; font-family: Signika; font-size:15px; color:#666666; letter-spacing:1px; margin-right:10px; width:115px;}
Background tab: rollover
.tab-back:hover {color:#999; text-shadow:none;}
.tab-back:hover {color:#FFFFFF; text-shadow:none;}}
Background tab: mousedown
.tab-back:active {color:#999; background:#FFF;}
.tab-back:active {color:#999; background:#FFF;}
On Rollover of the tab, the menu widget appears aligned right.
Hover tab Mouse down
Menu (dark) 2110041
Menu (light) 2110041
R2.0 Graphical Design Specification
v1.00 15
2.9 VIEW AREA: PANELS One or more panels are contained within a tab. Panels are made up of a panel header and the panel area. Panel headers may or may not contain text and/or widgets such as check boxes or buttons.
Panels a can be arranged to fit the full width of the tab or may sub-‐divide the tab horizontally.
Left: Panels arranged vertically to full width of tab area. Above: Panels horizontally sub-‐dividing width of tab area (spaced 10px)
CSS Specification for a panel within the ‘Information’ tab (width 280px):
Dark Light
Panel Header: .panel-header { background:#4D4D4D; border-left:#666666 solid 1px; border-top:#666666 solid 1px; -webkit-box-shadow: 1px 1px #000000; -moz-box-shadow: 1px 1px #000000; box-shadow: 1px 1px #000000; padding: 5px 30px 5px 10px; letter-spacing: 3px; font-size:10px; font-weight:600; color:#CCCCCC;}
.panel-header { background:#E6E6E6; border-left:#FFFFFF solid 1px; border-top:#FFFFFF solid 1px; border-bottom:#999 solid 1px; -webkit-box-shadow: 1px 1px #999; -moz-box-shadow: 1px 1px #999; box-shadow: 1px 1px #999; padding: 5px 30px 5px 10px; letter-spacing:3px; font-size:10px; font-weight:600; color:#4D4D4D; }
Panel Body: .panel { background:#1E1E1E; border-left:#333333 solid 1px; -webkit-box-shadow: 1px 1px #000000; -moz-box-shadow: 1px 1px #000000; box-shadow: 1px 1px #000000; padding: 5px 30px 5px 10px; color:#CCCCCC; font-size:12px; font-weight:300; line-height:20px;}
.panel { background:#FFFFFF; border-left:#FFFFFF solid 1px; -webkit-box-shadow: 1px 1px #999; -moz-box-shadow: 1px 1px #999999; box-shadow: 1px 1px #999999; padding: 5px 30px 5px 10px; color:#4D4D4D; font-size:12px; font-weight:300; line-height:20px;}
CSS Specification for a button within the panel header:
Dark Light
Panel Header Button:
.panel-head-button { font-family: Signika Negative; color: #999999; font-size: 11px; font-weight:400; letter-spacing:2px; padding-top: 1px; padding-bottom: 0px; padding-right: 10px; padding-left: 10px; margin-bottom:2px; margin-left:10px; margin-right:10px; margin-top:2px; text-decoration: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: solid #808080 1px; background:
.panel-head-button { font-family: Signika; color: #FFFFFF; font-size: 11px; font-weight:400; letter-spacing:2px; padding-top: 1px; padding-bottom: 0px; padding-right: 10px; padding-left: 10px; margin-bottom:5px; margin-left:15px; margin-right:10px; margin-top:10px; text-decoration: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: solid #808080 1px; background: #B3B3B3;
R2.0 Graphical Design Specification
v1.00 16
#333333; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3d3d3d), color-stop(75%,#333333), color-stop(75%,#333333), color-stop(100%,#2e2e2e)); background: -moz-linear-gradient(center top, #3d3d3d 0%, #333333 75%, #333333 75%, #2e2e2e 100%);}
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#BDBDBD), color-stop(75%,#B3B3B3), color-stop(75%,#B3B3B3), color-stop(100%,#ABABAB)); background: -moz-linear-gradient(center top, #BDBDBD 0%, #B3B3B3 75%, #B3B3B3 75%, #ABABAB 100%);}
Panel Header Button: rollover
.panel-head-button:hover { background: #666666; color:#FFFFFF; border: solid #FFFFFF 1px;}
.panel-head-button:hover { background: #999999; color:#FFFFFF; border: solid #333333 1px;}
Panel Header Button: mousedown
.panel-head-button:active {background: #333333; color:#FFFFFF; border: solid #FFFFFF 1px;}
.panel-head-button:active { background: #666666; color:#FFFFFF; border: solid #333333 1px;}
On rollover of panel headers, the filter (where appropriate) and the panel menu appears. The graphic icon for menu is the same one used with tabs.
Hover tab Mouse down
Menu (dark) ??
Menu (light) ??
Hover tab Mouse down
Filter (dark)
2110036
Filter (light)
2110036
To see the flexibility required for panels see Single Object Facepage below:
R2.0 Graphical Design Specification
v1.00 17
2.9.1 Attribute Group
An attribute group consists of a two-‐column table with attribute-‐names on the left and attribute-‐values on the right. Both columns are aligned left. Padding between columns: 10px.
Attribute-‐names: CAPS:
.attr-name { color:#CCCCCC; font-size:9px; font-weight:300; line-height:20px; padding-right:15px;}
.attr-name { color:#4D4D4D; font-size:9px; font-weight:300; line-height:20px; padding-right:15px;}
Attribute-‐values:
.attr-value { color:#CCCCCC; font-size:12px; font-weight:300; line-height:20px; padding-right:15px;}
.attr-value { color:#4D4D4D; font-size:12px; font-weight:300; line-height:20px; padding-right:15px;}
2.9.2 Attribute Group with image
Attribute group with image and heading
When an image is used with an attribute group, it forms the left column of a simple 3-‐column table. The image is 55px x 55px with column gutter of 20px in front of the attribute group.
2.9.3 Attribute group heading (Optional)
The initial attribute value (Usually the name) can be displayed as a heading. In this case, no attribute-‐name is displayed. The text is align fully left.
Attribute-‐header:
.attr-value NONE .attr-head { color:#4D4D4D; font-size:15px; font-weight:300; line-height:20px; padding-right:15px;}
2.9.4 Text–Extended
Only the first 5 lines of text are displayed. Where the text is cut off include an elipse “…” followed by a space and “more…”. The “more…” is clickable for drill-‐down or pop-‐up display of the full text.
Text-‐extended:
.text-ext { padding: 5px 30px 5px 10px; color:#CCCCCC; font-size:12px; font-weight:300; line-height:20px;}
.text-ext { padding: 5px 30px 5px 10px; color: #4D4D4D; font-size:12px; font-weight:300; line-height:20px;}
2.9.5 Text–Short and Text–Static
Follow the same typography as Text–Extended, but are displayed as single line widgets. Text-‐short can be edited, text-‐static cannot be edited.
R2.0 Graphical Design Specification
v1.00 18
2.9.6 List
A list is a vertical concatenation. It can look very similar to a table in that is may be made up of tabbed elements, however it does not have table headings or table behavior. List rows are separated with line heights of 20px.
2.9.7 Tile list
A tile list is a vertical concatenation of 2-‐dimensional data sets such as attribute groups. Tiles are separated by horizontal dividers.
2.9.8 Tile widget
A tile widget is a 2-‐dimensional data set such as an attribute group, a chart, a map, or a graph. The following spec is for an attribute group used in the dashboard view.
Image bounding box: height:55px; width:55px; margin-right: 10px; padding-top:9px
Heading: font-size:13px; font-weight:400; line-height:15px
Sublist: font-size:11px; font-weight:300; line-height:15px
divider: Padding-bottom 10px; line: 1px (same color as panel header)
Status indicator: Height:14px; width:14px: margin-right:10px;
R2.0 Graphical Design Specification
v1.00 19
2.9.9 News tab
Guest Registered user
The News tab is made up of a combination of standard panels, lists and tile lists. For the graphics used for status indicators, see tables below.
2.9.10 Map legend
The map legend is made up of 3 panels consisting of 2 lists and a table. The lists in this case are vertically spaced with a 15px line-‐height. The range widget shows the min-‐max recency and is rendered in CSS. Text is high lite by emboldening.
R2.0 Graphical Design Specification
v1.00 20
2.9.11 Tables
Tables appear inside panels. The panel header can be used to hold functions such as filters and settings. Tables are made up of table header and table body. Large tables have a two-‐tone alternating background.
2.9.12 Table header
The table header contains the column headings. And is fixed directly under the panel header. If the table needs to be scrolled vertically, the table header remains fixed.
CSS Specification for a table header:
Dark Light
Table Header: .table-header { background:#333333; border-left:#666666 solid 1px; border-top:#000 solid 1px; -webkit-box-shadow: 1px 1px #000000; -moz-box-shadow: 1px 1px #000000; box-shadow: 1px 1px #000000; padding: 5px 30px 5px 10px;}
.table-header { background:#CCCCCC; border-left:#fff solid 1px; border-bottom:#b3b3b3 solid 1px; -webkit-box-shadow: 1px 1px #999; -moz-box-shadow: 1px 1px #999; box-shadow: 1px 1px #999; padding: 5px 30px 5px 10px;}
Column Headings: .column-head { letter-spacing:1px; font-size:9px; font-weight:300; color:#999999; padding-right:15px;}
.table-head { letter-spacing:1px; font-size:9px; font-weight:300; color:#4D4D4D; padding-right:15px;}
R2.0 Graphical Design Specification
v1.00 21
2.9.13 Table body
The body of the table can follow two approaches:
Dark Light
For data-‐heavy tables:
alternating two-‐tone background: color:#1E1E1E and color:#282828, 20px high.
alternating two-‐tone background: color:#F2F2F2 and color:#FFFFFF, 20px high.
For data-‐light tables: simply use panel background: color#1E1E1E. No need for table header.
simply use panel background: color: #FFFFFF. No need for table header.
CSS Specification for a table body data:
Table Body: .table-body { background:#1E1E1E; border-left:#333333 solid 1px; -webkit-box-shadow: 1px 1px #000000; -moz-box-shadow: 1px 1px #000000; box-shadow: 1px 1px #000000; padding: 5px 30px 5px 10px;}
.table-body { background:#FFF; border-left:#fff solid 1px; -webkit-box-shadow: 1px 1px #999999; -moz-box-shadow: 1px 1px #999999; box-shadow: 1px 1px #999999; padding: 5px 30px 5px 10px;}
Table Cells: .table-cell { color:#CCCCCC; font-size:12px; font-weight:300; line-height:20px; padding-right:15px;}
.table-cell { color:#4D4D4D; font-size:12px; font-weight:300; line-height:20px; padding-right:15px;}
Graphics badges (no outline)
Critical Alert 2110052 Off
2110110
Warning Alert 2110053 Status unknown
2110055
OK 2110057
2.9.14 Table cells
Table cells follow the typography defined in the table body above.
Rules for alignment Text entries and dates: align left Numeric entries: align right Column heads: align left
Above: shows panel header, Table header, Column headings, Table cells
Note: All numeric entries should carry the same number of decimal places for any particular column.
100.00 100 Left column: correct alignment 1.35 1.35 Right column: wrong alignment 0.60 0.6
R2.0 Graphical Design Specification
v1.00 22
2.9.15 Charts
Google charts are used to draw data sets.
The following guidelines apply:
Dark Light
Background color: #282828; #E6E6E6;
Text and axis: #CCCCCC; font-size: 8px; font-weight:300;
#4D4D4D; font-size: 8px; font-weight:300;
Data: 2px line-width. Each data set should vary in color and dash style.
2px line-width. Each data set should vary in color and dash style.
R2.0 Graphical Design Specification
v1.00 23
2.9.16 Graphs
Graphs are used for network diagrams with connecting nodes.
In order to keep the layout simple, graphs are organized on matrix of cells (in the above example, a matrix of 5 by 3 cells. Each cell contains a node, a connector or is blank.
Nodes follow the CSS for Column-‐heading and Table-‐cells (pp. 14-‐15). The background color of the cells follows the same treatment as for Charts and Maps. In this case it is #282828. Nodes are spaced 20px apart.
R2.0 Graphical Design Specification
v1.00 24
2.9.17 Map
When map icons overlap more than half the diameter, they are replaced with an aggregate icon.
The badge of the aggregate icon shows the most critical state of one or more of its components. ie ‘critical alert’ or ‘warning’. If everything is ok, there is not badge. ‘Off’ and ‘unknown’ badges are only used when all the components of an aggregate share the same state.
When icons overlap, ones to the left and lower should appear in front of ones to the right and higher.
Map graphic background:#ABD6F3; Land-area:#C0E4F9; Outline:#7B9FB4; Selection:#70AED8; Selection-outline:#1B6C9B;
Map widget use Google widget
Map icons Outer-ring: 36px x 36px (transparent ink)
Outer-ring (Rollover): 36px x 36px (matt ink) Inner-icon: 26px x 26px (matt ink)
Graphic badges (white outline with transparent black ring.)
Critical Alert 2110051 Off 2110051
Warning Alert 2110051 Status unknown 2110051
More than one 2110051
R2.0 Graphical Design Specification
v1.00 25
Graphic mm icons (black ring is transparent)
Attachment (MM)
2110033 Instrument (MM)
2110092
AUV (MM)
2110096 Leakage (MM)
2110099
Battery (MM)
2110098 Mooring (MM)
2110094
Buoy (MM)
2110093 Observatory (MM)
2110088
Data Producer (MM)
2110020 Platform (MM)
2110024
Data Product (MM) 2110089 Resource (MM)
2110087
Data Set (MM)
2110090 Sensor (MM)
2110032
Deployment (MM)
2110022 Site (MM)
2110027
Device (MM)
2110091 Vacuum (MM)
2110100
Glider (MM)
2110095
Illustration showing the 3 states for map icons.
Badges align top right within the 36 x 36 px bounding box. (20 px right of origin)
When an icon is in the selected state, it’s callout will appear.
R2.0 Graphical Design Specification
v1.00 26
2.9.18 Advanced Search
The advanced search dialog animates right from the left panel when the ‘advanced search’ button is depressed.
correct position and alignment incorrect position
The map used in this window is the same as for the context map in the left menu.
R2.0 Graphical Design Specification
v1.00 27
CSS Specification
Title header text Font-‐family:Signika-‐Negative; font-‐size:15px; weight:400; color:#FFFFFF; letter-‐spacing:1px;
text-‐shadow: 1px 1px 0px #333333; align-‐left:15px; close-‐widget:align-‐right:15px
Title header background
Rounded-‐corners:5px; highlight:#FFFFFFF; shadow:#000000;
Gradient: top 10%:#999999; middle 80%:#666666; bottom 10%:#333333; Width: 960px; Height:30px;
Main background Background-‐color:#999999; width: 960px; highlight:#FFFFFFF; shadow: #000000;
Panel header text Font-‐family:Signika-‐Negative; font-‐size:11px; weight:600; color:#FFFFFF; letter-‐spacing:1px;
Panel header background
highlight:#FFFFFFF; shadow:#000000;
background: #999999; Width: 220px; Height:20px;
Panel text Font-‐family:Signika; font-‐size:11px; weight:300; color:#000000; line-‐height:20px; Aligned-‐left:10px; aligned-‐left:15px;
Panel divider Horizontal-‐rule-‐top:#666666 1px; Horizontal-‐rule-‐bottom:#E6E6E6; width:220px
Footer button (CANCEL)
Background: #808080; border:#666666; rounded-‐corners:3px; width:90px; height:20px; Font-‐family:Signika-‐negative; font-‐size:11px; weight:600; color:#FFFFFF; letter-‐spacing:1px;
Footer button (SAVE/SEARCH)
Background gradient: top 10%:#999999; middle 80%:#6666666; bottom 10%:#333333; border:#333333; rounded corners:3px; width:90px; height:20px; Font-‐family:Signika-‐negative; font-‐size:11px; weight:600; color:#FFFFFF; letter-‐spacing:1px;
button hover Border:#FFFFFF
button mousedown Background:#333333
Context map area Width:680px; highlight:#FFFFFF; shadow:#000000;
sea-‐color: CFCFCF; land-‐area: DEDEDE; focus-‐area-‐border:#666666; focus-‐area-‐fill:20% transparent.
Map widget Follow google spec.
R2.0 Graphical Design Specification
v1.00 28
Search Criteria
Additional criteria can be added or removed using the plus/minus widget.
Plus/minus widget Align: bottom-‐right of the panel block.
2110076 (-‐) 2110075 (+)
CSS for combo widgets
Combo: Font-‐family:Signika; font-‐size:9px; weight:400; color:#333333; letter-‐spacing:1px; align-‐left 5px; Expand-‐combo-‐widget align right 5px; Background-‐gradient: top 20%:#FFFFFF; middle 50%:#F2F2F2; bottom 20%:#CCCCCC; rounded-‐corners: 3px; border:#666666; Height: 16px; width: 150px;
Combo list: Font-‐family:Signika; font-‐size:9px; weight:400; color:#333333; letter-‐spacing:1px; align-‐left 5px; Line-‐height:15px; Background:#F2F2F2; border:#666666;
Combo list text highlight:
Font-‐family:Signika; font-‐size:9px; weight:400; color:#FFFFFF; letter-‐spacing:1px; align-‐left 5px; background:#666666;
Combo-‐expand widget ID2110117
CSS for text field
Text field (search): Font-‐family:Signika; font-‐size:11px; weight:500; color:#333333; align-‐left 5px; Background-‐gradient: top 20%:#CCCCCC; middle 50%:#F2F2F2; bottom 20%:#FFFFFF; border:#666666; Height:20px; width varies;
Search Width 220px; Align left: 5px
geospatial Width: 80px; Align right: 5px; N-‐S/W-‐E widget ID2110148/2110149: align left: 2px inside text field Align apart 15px; bounding box:#666666
vertical Width: 80px; Align right: 5px; sea-‐level widget ID2110063 align right 5px;
temporal Width: 120px; Align left: 5px; calendar widget ID2110065 align right 5px
R2.0 Graphical Design Specification
v1.00 29
Radio Button
Radio widget height:10px; width:10px; margin-‐right:5px (artwork provided)
Label font-‐weight:300; font-‐size:11px; color:#000000; line-‐height:20px
widget
Id 2110069
Checkbox
checkbox widget height:10px; width:10px; margin-‐right:5px (artwork provided)
Label font-‐weight:300; font-‐size:11px; color:#000000; line-‐height:20px
widget
ID 2110068
Slider
slider widget height:90px; width:12px; rounded-‐courner:2px; border:#666666
graphics background:#FFFFFF; handle:##1A1A1A; extent:#B3B3B3; (sealevel:#FFF)
widget
Other widgets
Calendar
2110065
Sea-‐level
2110063
NSWE
2110148, 2110149
Busy
2110116
Delete
2110083
Settings
2110037
R2.0 Graphical Design Specification
v1.00 30
2.9.19 Callouts
Callouts use the same graphic treatment for both Dark and Light versions. Call outs appear as a layer on top of the present view, see below:
CSS Specification
Title header Follow spec for ‘header’ and ‘header text’ from ‘Advanced search’. (see above)
Title & status Title: same as title header; Status-‐text: 11pt 400 align right; Status-‐indicators: same treatment as in the headers of the main view area.
Panel header Follow spec for ‘panel header’ from ‘Advanced search’. (see above)
Panel map Use context map with location pin icon; split map/chart/information into thirds of full width.
Panel chart Simplified view of key data: follow spec for dark skin
Panel information Follow spec for ‘panel’ from ‘Advanced search’. (see above)
Table header .table-header { background:#4D4D4D; border-left:#FFFFFF solid 1px; border-bottom:#000000 solid 1px; border-right:#000 solid 1px; border-top:#FFF solid 1px; padding: 5px 30px 5px 10px; }
Column heading CAPS
.column-head { letter-spacing:1px; font-size:9px; font-weight:300; color:#FFFFFF; padding-right:15px; }
Table body .table-body { background:#333333; border-left:#FFFFFF solid 1px; padding: 3px 10px 3px 10px; }
Table cell .table-cell { color:#FFFFFF; font-size:11px; font-weight:300; line-height:15px; padding-right:10px; }
Sub-‐panel header Background:#4D4D4D; (split width of callout equally into thirds)
Sub-‐panel body Background:#333333; line-‐height:15px (GOTO… column: use font-‐weight:400)
Position Callout triangle aligns to center of map icon, 12px in from left.
Graphic icon
Location pin
2110107
R2.0 Graphical Design Specification
v1.00 31
2.10 EDITING
2.10.1 Table filter
Filtering applies only to the specific data on view. The filter dialog animates down within the panel when the ‘filter’ button is selected.
User selects filter (icon) in the filter header…
CSS Specifications
Tab: Color treatment follows spec for ‘Advanced search’ (see above)
Panel header: Follow spec for ‘Panel Header’ of ‘Advanced search’. (see above)
Panel header widgets:
‘Close filter’ and ‘Settings’ widget align-‐right 15px
Combo Follow spec for ‘Combo widgets’ from ‘Advanced search’. (see above)
Dropdown (Combo) Follow spec for ‘Combo widgets’ from ‘Advanced search’. (see above)
Text field Follow spec for ‘Text field’ from ‘Advanced search’. (see above)
Space between rows Row increment every 20px
Buttons Follow spec for ‘buttons’ from ‘Advanced search’. (see above)
R2.0 Graphical Design Specification
v1.00 32
2.10.2 Edit Information
Entering edit mode is achieved through the icon that appears when rolling over the tab.
For CSS specification, everything can be derived from the CSS spec for ‘Advanced search’ (see above).
Additional functionality
Panels can be expanded or collapsed using the expand/collapse panel widget aligned-‐right 15px.
panel header: collapsed Background-‐color:#999999; Use collapsed widget align-‐right 15px
Graphic icon
Expand/collapse panel
R2.0 Graphical Design Specification
v1.00 33
2.10.3 Other graphics
Dashboard (guest users)
For guest users, information about funding and sponsorship is provided in the left column below the search and menu details.
Light Dark
Welcome… 300, 12px #333333
300, 12px #CCCCCC
Logos Bounding box 55px; align left; spaced 20px
National science…
500, 300, 12px
500, 300, 12px
Funding for… 300, 10px #004972
300, 10px #60A2BF
NSF logo
2110107
COL Logo
2110086
R2.0 Graphical Design Specification
v1.00 34
2.11 CSS SPRITE ARTWORK The artwork ready for css is comprised of four files:
css_sprite_salt.png
css_sprite_pepper.png
2110116_busy_indicator.gif
2110061_banner_no_logo.png (note: variations of this are available so that the ooi logo and title text are included as flat artwork)
The graphic images contained within the sprites use the same reference system, so they are interchangeable without requiring adjustment in the code.
To make coding straightforward it is recommended to us the plugin sgLESSPlugin. This is available at http://www.symfony-‐project.org/plugins/sgLESSPlugin and is simply illustrated at http://blog.servergrove.com/2009/12/03/simplifying-‐css-‐sprites-‐with-‐the-‐sglessplugin/
Using the above plugin, the following image referencing can be used (images are spaced at 60px intervals)
@xwidth: 60px @ywidth: 60px In the following list, each image reference has a comment (clipbox) specifying the DIV height and width. Small Icons (mini) 2110019 @collection_mini: @xwidth*0 @ywidth*0; //clipbox 14 x 14 2110026 @saved_search_mini: @xwidth*0 @ywidth*-‐1; //clipbox 14 x 14 2110043 @resources_all_mini: @xwidth*0 @ywidth*-‐2; //clipbox 14 x 14 2110048 @folder_mini: @xwidth*0 @ywidth*-‐3; //clipbox 14 x 14 2110050 @data_document_mini: @xwidth*0 @ywidth*-‐4; //clipbox 14 x 14 2110052 @status_critical_alert_mini: @xwidth*0 @ywidth*-‐5; //clipbox 14 x 14 2110053 @status_warning_alert_mini: @xwidth*0 @ywidth*-‐6; //clipbox 14 x 14 2110055 @status_unknown_mini: @xwidth*0 @ywidth*-‐7; //clipbox 14 x 14 2110057 @status_ok_mini: @xwidth*0 @ywidth*-‐8; //clipbox 14 x 14 2110081 @checkmark_mini: @xwidth*0 @ywidth*-‐9; //clipbox 14 x 14 2110097 @subscription_mini: @xwidth*0 @ywidth*-‐10; //clipbox 14 x 14 2110102 @document_mini: @xwidth*0 @ywidth*-‐11; //clipbox 14 x 14 2110110 @status_off_mini: @xwidth*0 @ywidth*-‐12; //clipbox 14 x 14 2110111 @flow_communications_mini: @xwidth*0 @ywidth*-‐13; //clipbox 14 x 14 2110112 @flow_power_mini: @xwidth*0 @ywidth*-‐14; //clipbox 14 x 14 2110113 @flow_data_mini: @xwidth*0 @ywidth*-‐15; //clipbox 14 x 14 2110114 @location_mini: @xwidth*-‐1 @ywidth*0; //clipbox 14 x 14 2110118 @attachment_mini: @xwidth*-‐1 @ywidth*-‐1; //clipbox 14 x 14 2110119 @data_producer_mini: @xwidth*-‐1 @ywidth*-‐2; //clipbox 14 x 14 2110120 @data_product_mini: @xwidth*-‐1 @ywidth*-‐3; //clipbox 14 x 14 2110121 @data_set_mini: @xwidth*-‐1 @ywidth*-‐4; //clipbox 14 x 14 2110122 @deployment_mini: @xwidth*-‐1 @ywidth*-‐5; //clipbox 14 x 14 2110123 @device_mini: @xwidth*-‐1 @ywidth*-‐6; //clipbox 14 x 14 2110125 @instrument_mini: @xwidth*-‐1 @ywidth*-‐7; //clipbox 14 x 14 2110128 @observatory_mini: @xwidth*-‐1 @ywidth*-‐8; //clipbox 14 x 14 2110129 @platform_mini: @xwidth*-‐1 @ywidth*-‐9; //clipbox 14 x 14 2110130 @resource_mini: @xwidth*-‐1 @ywidth*-‐10; //clipbox 14 x 14 2110131 @sensor_mini: @xwidth*-‐1 @ywidth*-‐11; //clipbox 14 x 14 2110132 @site_mini: @xwidth*-‐1 @ywidth*-‐12; //clipbox 14 x 14 Badges 2110140 @badge_status_graphic_critical: @xwidth*-‐2 @ywidth*0; //clipbox 14 x 14 2110140 @badge_status_graphic_warning: @xwidth*-‐2 @ywidth*-‐1; //clipbox 14 x 14 2110140 @badge_status_graphic_unknown: @xwidth*-‐2 @ywidth*-‐2; //clipbox 14 x 14 2110140 @badge_status_graphic_off: @xwidth*-‐2 @ywidth*-‐3; //clipbox 14 x 14 2110140 @badge_status_graphic_ok: @xwidth*-‐2 @ywidth*-‐4; //clipbox 14 x 14
R2.0 Graphical Design Specification
v1.00 35
2110141 @badge_numeric_graphic: @xwidth*-‐2 @ywidth*-‐5; //clipbox 14 x 14 2110051 @badge_status_map_critical: @xwidth*-‐2 @ywidth*-‐6; //clipbox 16 x 16 2110051 @badge_status_map_warning: @xwidth*-‐2 @ywidth*-‐7; //clipbox 16 x 16 2110051 @badge_status_map_unknown: @xwidth*-‐2 @ywidth*-‐8; //clipbox 16 x 16 2110051 @badge_status_map_off: @xwidth*-‐2 @ywidth*-‐9; //clipbox 16 x 16 2110051 @badge_status_map_ok: @xwidth*-‐2 @ywidth*-‐10; //clipbox 16 x 16 2110137 @badge_numeric_map: @xwidth*-‐2 @ywidth*-‐11; //clipbox 16 x 16 Widget graphics (passive) 2110035 @search_passive: @xwidth*-‐3 @ywidth*0; //clipbox 14 x 14 2110036 @filter_passive: @xwidth*-‐3 @ywidth*-‐1; //clipbox 18 x 18 2110037 @settings_passive: @xwidth*-‐3 @ywidth*-‐2; //clipbox 18 x 18 2110041 @menu_passive: @xwidth*-‐3 @ywidth*-‐3; //clipbox 18 x 18 2110063 @toggle_sealevel_passive: @xwidth*-‐3 @ywidth*-‐4; //clipbox 14 x 14 2110065 @calendar_passive: @xwidth*-‐3 @ywidth*-‐5; //clipbox 14 x 14 2110066 @arrow_passive: @xwidth*-‐3 @ywidth*-‐6; //clipbox 14 x 14 2110068 @checkbox_edit_passive: @xwidth*-‐3 @ywidth*-‐7; //clipbox 14 x 14 2110069 @radiobutton_passive: @xwidth*-‐3 @ywidth*-‐8; //clipbox 14 x 14 2110075 @plus_passive: @xwidth*-‐3 @ywidth*-‐9; //clipbox 14 x 14 2110076 @minus_passive: @xwidth*-‐3 @ywidth*-‐10; //clipbox 14 x 14 2110083 @delete_passive: @xwidth*-‐3 @ywidth*-‐11; //clipbox 14 x 14 2110117 @expand_combo_passive: @xwidth*-‐3 @ywidth*-‐13; //clipbox 14 x 14 2110148 @toggle_ns_passive: @xwidth*-‐3 @ywidth*-‐14; //clipbox 14 x 14 2110149 @toggle_ew_passive: @xwidth*-‐3 @ywidth*-‐15; //clipbox 14 x 14 2110150 @edit_close_passive: @xwidth*-‐3 @ywidth*-‐16; //clipbox 18 x 18 @close_passive: @xwidth*-‐3 @ywidth*-‐17; //clipbox 18 x 18 2110151 @checkbox_standalone_passive: @xwidth*-‐3 @ywidth*-‐18; //clipbox 14 x 14 Widget graphics (hover) 2110035 @search_hover: @xwidth*-‐4 @ywidth*0; //clipbox 14 x 14 2110036 @filter_hover: @xwidth*-‐4 @ywidth*-‐1; //clipbox 18 x 18 2110037 @settings_hover: @xwidth*-‐4 @ywidth*-‐2; //clipbox 18 x 18 2110041 @menu_hover: @xwidth*-‐4 @ywidth*-‐3; //clipbox 18 x 18 2110063 @toggle_sealevel_hover: @xwidth*-‐4 @ywidth*-‐4; //clipbox 14 x 14 2110065 @calendar_hover: @xwidth*-‐4 @ywidth*-‐5; //clipbox 14 x 14 2110066 @arrow_hover: @xwidth*-‐4 @ywidth*-‐6; //clipbox 14 x 14 2110068 @checkbox_edit_hover: @xwidth*-‐4 @ywidth*-‐7; //clipbox 14 x 14 2110069 @radiobutton_hover: @xwidth*-‐4 @ywidth*-‐8; //clipbox 14 x 14 2110075 @plus_hover: @xwidth*-‐4 @ywidth*-‐9; //clipbox 14 x 14 2110076 @minus_hover: @xwidth*-‐4 @ywidth*-‐10; //clipbox 14 x 14 2110083 @delete_hover: @xwidth*-‐4 @ywidth*-‐11; //clipbox 14 x 14 2110117 @expand_combo_hover: @xwidth*-‐4 @ywidth*-‐13; //clipbox 14 x 14 2110148 @toggle_ns_hover: @xwidth*-‐4 @ywidth*-‐14; //clipbox 14 x 14 2110149 @toggle_ew_hover: @xwidth*-‐4 @ywidth*-‐15; //clipbox 14 x 14 2110150 @edit_close_hover: @xwidth*-‐4 @ywidth*-‐16; //clipbox 18 x 18 @close_hover: @xwidth*-‐4 @ywidth*-‐17; //clipbox 18 x 18 2110151 @checkbox_standalone_hover: @xwidth*-‐4 @ywidth*-‐18; //clipbox 14 x 14 Widget graphics (mousedown) 2110035 @search_mousedown: @xwidth*-‐5 @ywidth*0; //clipbox 14 x 14 2110036 @filter_mousedown: @xwidth*-‐5 @ywidth*-‐1; //clipbox 18 x 18 2110037 @settings_mousedown: @xwidth*-‐5 @ywidth*-‐2; //clipbox 18 x 18 2110041 @menu_mousedown: @xwidth*-‐5 @ywidth*-‐3; //clipbox 18 x 18 2110063 @toggle_sealevel_mousedown: @xwidth*-‐5 @ywidth*-‐4; //clipbox 14 x 14 2110065 @calendar_mousedown: @xwidth*-‐5 @ywidth*-‐5; //clipbox 14 x 14 2110066 @arrow_mousedown: @xwidth*-‐5 @ywidth*-‐6; //clipbox 14 x 14 2110068 @checkbox_edit_mousedown: @xwidth*-‐5 @ywidth*-‐7; //clipbox 14 x 14 2110069 @radiobutton_mousedown: @xwidth*-‐5 @ywidth*-‐8; //clipbox 14 x 14 2110075 @plus_mousedown: @xwidth*-‐5 @ywidth*-‐9; //clipbox 14 x 14 2110076 @minus_mousedown: @xwidth*-‐5 @ywidth*-‐10; //clipbox 14 x 14 2110083 @delete_mousedown: @xwidth*-‐5 @ywidth*-‐11; //clipbox 14 x 14 2110117 @expand_combo_mousedown: @xwidth*-‐5 @ywidth*-‐13; //clipbox 14 x 14 2110148 @toggle_ns_mousedown: @xwidth*-‐5 @ywidth*-‐14; //clipbox 14 x 14
R2.0 Graphical Design Specification
v1.00 36
2110149 @toggle_ew_mousedown: @xwidth*-‐5 @ywidth*-‐15; //clipbox 14 x 14 2110150 @edit_close_mousedown: @xwidth*-‐5 @ywidth*-‐16; //clipbox 18 x 18 @close_mousedown: @xwidth*-‐5 @ywidth*-‐17; //clipbox 18 x 18 2110151 @checkbox_standalone_mousedown: @xwidth*-‐5 @ywidth*-‐18; //clipbox 14 x 14 Widget graphics (result of action) 2110035 @search_result: @xwidth*-‐6 @ywidth*0; //clipbox 14 x 14 2110036 @filter_result: @xwidth*-‐6 @ywidth*-‐1; //clipbox 18 x 18 2110037 @settings_result: @xwidth*-‐6 @ywidth*-‐2; //clipbox 18 x 18 2110041 @menu_result: @xwidth*-‐6 @ywidth*-‐3; //clipbox 18 x 18 2110063 @toggle_sealevel_result: @xwidth*-‐6 @ywidth*-‐4; //clipbox 14 x 14 2110065 @calendar_result: @xwidth*-‐6 @ywidth*-‐5; //clipbox 14 x 14 2110066 @arrow_result: @xwidth*-‐6 @ywidth*-‐6; //clipbox 14 x 14 2110068 @checkbox_edit_result: @xwidth*-‐6 @ywidth*-‐7; //clipbox 14 x 14 2110069 @radiobutton_result: @xwidth*-‐6 @ywidth*-‐8; //clipbox 14 x 14 2110075 @plus_result: @xwidth*-‐6 @ywidth*-‐9; //clipbox 14 x 14 2110076 @minus_result: @xwidth*-‐6 @ywidth*-‐10; //clipbox 14 x 14 2110083 @delete_result: @xwidth*-‐6 @ywidth*-‐11; //clipbox 14 x 14 2110117 @expand_combo_result: @xwidth*-‐6 @ywidth*-‐13; //clipbox 14 x 14 2110148 @toggle_ns_result: @xwidth*-‐6 @ywidth*-‐14; //clipbox 14 x 14 2110149 @toggle_ew_result: @xwidth*-‐6 @ywidth*-‐15; //clipbox 14 x 14 2110150 @edit_close_result: @xwidth*-‐6 @ywidth*-‐16; //clipbox 18 x 18 @close_result: @xwidth*-‐6 @ywidth*-‐17; //clipbox 18 x 18 2110151 @checkbox_standalone_result: @xwidth*-‐6 @ywidth*-‐18; //clipbox 14 x 14 Large Icons (mm) (passive) 2110020 @data_producer_mm_passive: @xwidth*-‐7 @ywidth*0; //clipbox 36 x 36 2110022 @deployment_mm_passive: @xwidth*-‐7 @ywidth*-‐1; //clipbox 36 x 36 2110024 @platform_mm_passive: @xwidth*-‐7 @ywidth*-‐2; //clipbox 36 x 36 2110027 @site_mm_passive: @xwidth*-‐7 @ywidth*-‐3; //clipbox 36 x 36 2110032 @sensor_mm_passive: @xwidth*-‐7 @ywidth*-‐4; //clipbox 36 x 36 2110033 @attachment_mm_passive: @xwidth*-‐7 @ywidth*-‐5; //clipbox 36 x 36 2110087 @resource_mm_passive: @xwidth*-‐7 @ywidth*-‐6; //clipbox 36 x 36 2110088 @observatory_mm_passive: @xwidth*-‐7 @ywidth*-‐7; //clipbox 36 x 36 2110089 @data_product_mm_passive: @xwidth*-‐7 @ywidth*-‐8; //clipbox 36 x 36 2110090 @data_set_mm_passive: @xwidth*-‐7 @ywidth*-‐9; //clipbox 36 x 36 2110091 @device_mm_passive: @xwidth*-‐7 @ywidth*-‐10; //clipbox 36 x 36 2110092 @instrument_mm_passive: @xwidth*-‐7 @ywidth*-‐11; //clipbox 36 x 36 Large Icons (mm) (hover) 2110020 @data_producer_mm_hover: @xwidth*-‐8 @ywidth*0; //clipbox 36 x 36 2110022 @deployment_mm_hover: @xwidth*-‐8 @ywidth*-‐1; //clipbox 36 x 36 2110024 @platform_mm_hover: @xwidth*-‐8 @ywidth*-‐2; //clipbox 36 x 36 2110027 @site_mm_hover: @xwidth*-‐8 @ywidth*-‐3; //clipbox 36 x 36 2110032 @sensor_mm_hover: @xwidth*-‐8 @ywidth*-‐4; //clipbox 36 x 36 2110033 @attachment_mm_hover: @xwidth*-‐8 @ywidth*-‐5; //clipbox 36 x 36 2110087 @resource_mm_hover: @xwidth*-‐8 @ywidth*-‐6; //clipbox 36 x 36 2110088 @observatory_mm_hover: @xwidth*-‐8 @ywidth*-‐7; //clipbox 36 x 36 2110089 @data_product_mm_hover: @xwidth*-‐8 @ywidth*-‐8; //clipbox 36 x 36 2110090 @data_set_mm_hover: @xwidth*-‐8 @ywidth*-‐9; //clipbox 36 x 36 2110091 @device_mm_hover: @xwidth*-‐8 @ywidth*-‐10; //clipbox 36 x 36 2110092 @instrument_mm_hover: @xwidth*-‐8 @ywidth*-‐11; //clipbox 36 x 36 Large Icons (mm) (mousedown /click) 2110020 @data_producer_mm_mousedown: @xwidth*-‐9 @ywidth*0; //clipbox 36 x 36 2110022 @deployment_mm_mousedown: @xwidth*-‐9 @ywidth*-‐1; //clipbox 36 x 36 2110024 @platform_mm_mousedown: @xwidth*-‐9 @ywidth*-‐2; //clipbox 36 x 36 2110027 @site_mm_mousedown: @xwidth*-‐9 @ywidth*-‐3; //clipbox 36 x 36 2110032 @sensor_mm_mousedown: @xwidth*-‐9 @ywidth*-‐4; //clipbox 36 x 36 2110033 @attachment_mm_mousedown: @xwidth*-‐9 @ywidth*-‐5; //clipbox 36 x 36 2110087 @resource_mm_mousedown: @xwidth*-‐9 @ywidth*-‐6; //clipbox 36 x 36 2110088 @observatory_mm_mousedown: @xwidth*-‐9 @ywidth*-‐7; //clipbox 36 x 36
R2.0 Graphical Design Specification
v1.00 37
2110089 @data_product_mm_mousedown: @xwidth*-‐9 @ywidth*-‐8; //clipbox 36 x 36 2110090 @data_set_mm_mousedown: @xwidth*-‐9 @ywidth*-‐9; //clipbox 36 x 36 2110091 @device_mm_mousedown: @xwidth*-‐9 @ywidth*-‐10; //clipbox 36 x 36 2110092 @instrument_mm_mousedown: @xwidth*-‐9 @ywidth*-‐11; //clipbox 36 x 36 Other graphics 2110028 @flow_power: @xwidth*-‐10 @ywidth*0; //clipbox 20 x 20 2110029 @flow_communications: @xwidth*-‐10 @ywidth*-‐1; //clipbox 20 x 20 2110030 @location: @xwidth*-‐10 @ywidth*-‐2; //clipbox 20 x 20 2110031 @flow_data: @xwidth*-‐10 @ywidth*-‐3; //clipbox 20 x 20 2110085 @logo_ooi: @xwidth*-‐10 @ywidth*-‐4; //clipbox 86 x 39 2110086 @logo_col: @xwidth*-‐10 @ywidth*-‐5; //clipbox 57 x 38 2110107 @logo_nsf: @xwidth*-‐10 @ywidth*-‐6; //clipbox 47 x 47 2110142 @map_pin: @xwidth*-‐10 @ywidth*-‐7; //clipbox 11 x 18
0 -‐1 -‐2 -‐3 -‐4 -‐5 -‐6 -‐7 -‐8 -‐9 -‐10
0
-‐1
-‐2
-‐3
-‐4
-‐5
-‐6
-‐7
-‐8
-‐9
-‐10
-‐11
-‐12
R2.0 Graphical Design Specification
v1.00 38
0 -‐1 -‐2 -‐3 -‐4 -‐5 -‐6 -‐7 -‐8 -‐9 -‐10
-‐13
-‐14
-‐15
-‐16
-‐17
-‐18
Example css using sgLESSPlugin
.collection_mini {background-‐image: url(css_sprite_pepper.png); background-‐position: @collection_mini}
