diff options
author | Armen Kesablyan | 2012-02-07 16:51:14 -0800 |
---|---|---|
committer | Armen Kesablyan | 2012-02-07 16:51:14 -0800 |
commit | 8110e01dc5093ac6baf621103dcaa5f769e5be92 (patch) | |
tree | ecf339e3097b6ba25d81cbe44d913ee67591bf4b /css/ninja.css | |
parent | 5f506542d28e12b707c3bfa41b53383519838477 (diff) | |
parent | 668510892537eaaeb2e11520831d87b44b2489b7 (diff) | |
download | ninja-8110e01dc5093ac6baf621103dcaa5f769e5be92.tar.gz |
Merge branch 'master' of github.com:Motorola-Mobility/ninja-internal
Diffstat (limited to 'css/ninja.css')
-rw-r--r-- | css/ninja.css | 226 |
1 files changed, 43 insertions, 183 deletions
diff --git a/css/ninja.css b/css/ninja.css index 2fcb1380..8ce60a10 100644 --- a/css/ninja.css +++ b/css/ninja.css | |||
@@ -1,33 +1,5 @@ | |||
1 | @charset "UTF-8"; | 1 | @charset "UTF-8"; |
2 | /* <copyright> This file contains proprietary software owned by Motorola Mobility, Inc.<br/> No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. </copyright> */ | 2 | /* <copyright> This file contains proprietary software owned by Motorola Mobility, Inc.<br/> No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. </copyright> */ |
3 | /* */ | ||
4 | /* ninja.scss Main SCSS file for ninja, compiled by SASS into the file ninja.css. */ | ||
5 | /* _colors.scss Defines the colors for the UI of the application. To create a new theme, copy this file and change the values as desired. Note: Some colors are defined as both rgb and rgba; some of the rgba versions have multiple a values. */ | ||
6 | /* Colors for radio buttons and other form elements */ | ||
7 | /* Base colors for dividers Dividers consist of a div with a background color and either a top & bottom border (in the case of horizontal dividers) or a left & right border (in the case of vertical dividers), for a total of three different colors. */ | ||
8 | /* top and left */ | ||
9 | /* Middle */ | ||
10 | /* Bottom and right */ | ||
11 | /* Main background color of entire app */ | ||
12 | /* Main app background color. */ | ||
13 | /* rgba version */ | ||
14 | /* Main app border color */ | ||
15 | /* color of drop shadows */ | ||
16 | /* Stage color */ | ||
17 | /* body border color */ | ||
18 | /* Body background color */ | ||
19 | /* Colors for main dropdown menus: background & text for both regular and highlighted states, dividers */ | ||
20 | /* Colors for tools: background, text, how they interact with the UI */ | ||
21 | /* Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc. */ | ||
22 | /* used for editable items in their non-edit state, etc. */ | ||
23 | /* Border for panel and for block elements */ | ||
24 | /* Shadow for text and block elements */ | ||
25 | /* Colors for scroll bars */ | ||
26 | /* _fonts.scss Defines the fonts for the application. */ | ||
27 | /* Droid Sans: Normal, bold asdf*/ | ||
28 | /* themes/themename/mixins.scss Mixins that are theme-dependent (e.g. sprite mixins, etc) */ | ||
29 | /* mixins.scss Generic mixins. Theme-specific mixins (e.g. for sprites) should go in the theme/themename/mixins.scss file. */ | ||
30 | /* Base.scss Base styles for entire application. Note that colors and font definitions go in _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss */ | ||
31 | .clear { display: block; clear: both; height: 0px; overflow: hidden; } | 3 | .clear { display: block; clear: both; height: 0px; overflow: hidden; } |
32 | 4 | ||
33 | .bold { font-weight: bold; } | 5 | .bold { font-weight: bold; } |
@@ -44,29 +16,16 @@ | |||
44 | 16 | ||
45 | .layout-table .flexor div:last-child { float: right; } | 17 | .layout-table .flexor div:last-child { float: right; } |
46 | 18 | ||
47 | /* Begin: Basic skinning for form fields */ | 19 | input.nj-skinned, textarea.nj-skinned, button.nj-skinned, select.nj-skinned, select.nj-skinned option { -webkit-appearance: none; outline: none; } |
48 | /* Reset all */ | ||
49 | input.nj-skinned, textarea.nj-skinned, button.nj-skinned, select.nj-skinned, select.nj-skinned option, button.nj-skinned { -webkit-appearance: none; outline: none; } | ||
50 | 20 | ||
51 | /* Base styles */ | ||
52 | input[type="text"].nj-skinned, input[type="password"].nj-skinned, input[type="search"].nj-skinned, textarea.nj-skinned, select.nj-skinned, select.nj-skinned option { border: 1px solid #313131; color: white; background-color: #444444; font-size: 12px; font-family: 'Droid Sans', sans-serif; } | 21 | input[type="text"].nj-skinned, input[type="password"].nj-skinned, input[type="search"].nj-skinned, textarea.nj-skinned, select.nj-skinned, select.nj-skinned option { border: 1px solid #313131; color: white; background-color: #444444; font-size: 12px; font-family: 'Droid Sans', sans-serif; } |
53 | 22 | ||
54 | /* Disabled styles */ | ||
55 | input.nj-skinned:disabled, textarea.nj-skinned:disabled, select.nj-skinned:disabled, button.nj-skinned:disabled { opacity: 0.4; } | 23 | input.nj-skinned:disabled, textarea.nj-skinned:disabled, select.nj-skinned:disabled, button.nj-skinned:disabled { opacity: 0.4; } |
56 | 24 | ||
57 | /* Text inputs and select boxes */ | ||
58 | input[type="text"].nj-skinned, input[type="password"].nj-skinned, input[type="search"].nj-skinned, select.nj-skinned, select.nj-skinned option { height: 13px; } | 25 | input[type="text"].nj-skinned, input[type="password"].nj-skinned, input[type="search"].nj-skinned, select.nj-skinned, select.nj-skinned option { height: 13px; } |
59 | 26 | ||
60 | /* | 27 | input[type="text"].nj-skinned:focus, input[type="password"].nj-skinned:focus, input[type="search"].nj-skinned:focus, textarea.nj-skinned:focus, select.nj-skinned:focus, select.nj-skinned option:focus { -webkit-box-shadow: 0px 0px 3px #b4b4b4; } |
61 | input[type="text"].nj-skinned:focus, | 28 | |
62 | input[type="password"].nj-skinned:focus, | ||
63 | input[type="search"].nj-skinned:focus, | ||
64 | textarea.nj-skinned:focus, | ||
65 | select.nj-skinned:focus, | ||
66 | select.nj-skinned option:focus { | ||
67 | -webkit-box-shadow: 0px 0px 3px $color-focus-outline; | ||
68 | } | ||
69 | */ | ||
70 | select.nj-skinned { background-image: url("../images/dropdown-bg.png"); background-repeat: no-repeat; background-position: right center; font-size: 12px; height: 16px; padding-right: 20px; } | 29 | select.nj-skinned { background-image: url("../images/dropdown-bg.png"); background-repeat: no-repeat; background-position: right center; font-size: 12px; height: 16px; padding-right: 20px; } |
71 | 30 | ||
72 | input[type="search"].nj-skinned { height: 17px; -webkit-box-shadow: none; } | 31 | input[type="search"].nj-skinned { height: 17px; -webkit-box-shadow: none; } |
@@ -75,23 +34,22 @@ input[type="search"].nj-skinned::-webkit-search-cancel-button { -webkit-appearan | |||
75 | 34 | ||
76 | input[type="search"].nj-skinned::-webkit-search-cancel-button:after { content: "\2716"; } | 35 | input[type="search"].nj-skinned::-webkit-search-cancel-button:after { content: "\2716"; } |
77 | 36 | ||
78 | /* Buttons */ | 37 | button.nj-skinned { font-size: 9px; cursor: pointer; display: block; border: 0px; margin: 0px; padding: 4px; border: 1px #313131 solid; background-color: #474747; background-image: -webkit-linear-gradient(top, #505050 0%, #3c3c3c 100%); border-radius: 4px; color: white; text-transform: uppercase; cursor: pointer; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); } |
79 | button.nj-skinned { font-size: 9px; cursor: pointer; } | 38 | |
39 | button.nj-skinned:active { background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #505050 100%); } | ||
40 | |||
41 | button.nj-skinned:hover { -webkit-box-shadow: 0px 0px 3px #b4b4b4; } | ||
80 | 42 | ||
81 | /* Radio buttons */ | ||
82 | input[type="radio"].nj-skinned { background-color: #474747; background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); color: #c8c8c8; border: 2px solid #282828; width: 12px; height: 12px; overflow: hidden; border-radius: 10px; font-size: 16px; line-height: 7px; text-indent: -7px; cursor: pointer; -webkit-box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); -moz-box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); } | 43 | input[type="radio"].nj-skinned { background-color: #474747; background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); color: #c8c8c8; border: 2px solid #282828; width: 12px; height: 12px; overflow: hidden; border-radius: 10px; font-size: 16px; line-height: 7px; text-indent: -7px; cursor: pointer; -webkit-box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); -moz-box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); } |
83 | 44 | ||
84 | input[type="radio"].nj-skinned:checked { background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); border: 2px solid #282828; } | 45 | input[type="radio"].nj-skinned:checked { background: -webkit-radial-gradient(center, circle cover, #c8c8c8 0%, #c8c8c8 15%, #c8c8c8 30%, rgba(0, 0, 0, 0) 31%), -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); border: 2px solid #282828; } |
85 | 46 | ||
86 | input[type="radio"].nj-skinned:hover { border: 2px solid #282828; } | 47 | input[type="radio"].nj-skinned:hover { border: 2px solid #282828; } |
87 | 48 | ||
88 | input[type="radio"].nj-skinned:checked:after { content: "\a0 \a0 \2022"; } | ||
89 | |||
90 | input[type="radio"].nj-skinned:active { background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #646464 100%); } | 49 | input[type="radio"].nj-skinned:active { background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #646464 100%); } |
91 | 50 | ||
92 | input[type="radio"].nj-skinned:disabled { background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); border: 2px solid #282828; cursor: default; } | 51 | input[type="radio"].nj-skinned:disabled { background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); border: 2px solid #282828; cursor: default; } |
93 | 52 | ||
94 | /* Checkboxes */ | ||
95 | input[type="checkbox"].nj-skinned { background-color: #474747; background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); color: #c8c8c8; border: 1px solid #282828; width: 10px; height: 10px; font-size: 12px; overflow: visible; cursor: pointer; -webkit-box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); -moz-box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); line-height: 9px; } | 53 | input[type="checkbox"].nj-skinned { background-color: #474747; background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); color: #c8c8c8; border: 1px solid #282828; width: 10px; height: 10px; font-size: 12px; overflow: visible; cursor: pointer; -webkit-box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); -moz-box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); box-shadow: 0px 0px 2px rgba(200, 200, 200, 0.5); line-height: 9px; } |
96 | 54 | ||
97 | input[type="checkbox"].nj-skinned:checked:after { content: "\2714"; } | 55 | input[type="checkbox"].nj-skinned:checked:after { content: "\2714"; } |
@@ -100,16 +58,12 @@ input[type="checkbox"].nj-skinned:active { background-image: -webkit-linear-grad | |||
100 | 58 | ||
101 | input[type="checkbox"].nj-skinned:disabled { background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); cursor: default; } | 59 | input[type="checkbox"].nj-skinned:disabled { background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); cursor: default; } |
102 | 60 | ||
103 | /* End: Basic skinning for form fields */ | ||
104 | /* Begin: Basic skinning for visual dividers */ | ||
105 | .nj-divider { background-color: black; border-width: 0px; overflow: hidden; } | 61 | .nj-divider { background-color: black; border-width: 0px; overflow: hidden; } |
106 | 62 | ||
107 | .nj-divider.divider-horizontal { border-top: 1px solid #232323; border-bottom: 1px solid #3a3a3a; height: 1px; } | 63 | .nj-divider.divider-horizontal { border-top: 1px solid #232323; border-bottom: 1px solid #3a3a3a; height: 1px; } |
108 | 64 | ||
109 | .nj-divider.divider-vertical { border-left: 1px solid #232323; border-right: 1px solid #3a3a3a; width: 1px; } | 65 | .nj-divider.divider-vertical { border-left: 1px solid #232323; border-right: 1px solid #3a3a3a; width: 1px; } |
110 | 66 | ||
111 | /* End: Basic skinning for visual dividers */ | ||
112 | /* MainWindow.scss Styles governing the main window and overall layout of the application. Note that colors and font definitions go in _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss */ | ||
113 | body { position: absolute; margin: 0px; width: 100%; height: 100%; background-color: black; overflow: hidden; -webkit-user-select: none; font-family: 'Droid Sans', sans-serif; } | 67 | body { position: absolute; margin: 0px; width: 100%; height: 100%; background-color: black; overflow: hidden; -webkit-user-select: none; font-family: 'Droid Sans', sans-serif; } |
114 | 68 | ||
115 | #appContainer { position: absolute; margin: 0px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-align: stretch; width: 100%; height: 100%; border-left: 16px solid #000; border-right: 16px solid #000; border-top: 28px solid #000; -webkit-box-sizing: border-box; max-width: 100%; max-height: 100%; } | 69 | #appContainer { position: absolute; margin: 0px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-align: stretch; width: 100%; height: 100%; border-left: 16px solid #000; border-right: 16px solid #000; border-top: 28px solid #000; -webkit-box-sizing: border-box; max-width: 100%; max-height: 100%; } |
@@ -126,9 +80,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co | |||
126 | 80 | ||
127 | #topPanelContainer { overflow: hidden; margin-bottom: 2px; height: 32px; } | 81 | #topPanelContainer { overflow: hidden; margin-bottom: 2px; height: 32px; } |
128 | 82 | ||
129 | #bottomPanelContainer { /*border: 1px solid #333; | 83 | #bottomPanelContainer { background: transparent; min-height: 80px; max-height: 50%; overflow: auto; } |
130 | background: transparent; | ||
131 | */ min-height: 80px; max-height: 50%; overflow: auto; } | ||
132 | 84 | ||
133 | .panelContainer { display: block; -webkit-box-orient: vertical; position: relative; } | 85 | .panelContainer { display: block; -webkit-box-orient: vertical; position: relative; } |
134 | 86 | ||
@@ -166,9 +118,9 @@ background: transparent; | |||
166 | 118 | ||
167 | #sceneBar { height: 70px; background-color: #474747; } | 119 | #sceneBar { height: 70px; background-color: #474747; } |
168 | 120 | ||
169 | #mainContainer #rulerTop { /* TODO: temporary background please replace when component is implemented */ background: url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; } | 121 | #mainContainer #rulerTop { background: url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; } |
170 | 122 | ||
171 | #rulerLeft { /* TODO: temporary background please replace when component is implemented */ background: url("../images/temp/ruler-left.png"); width: 16px; } | 123 | #rulerLeft { background: url("../images/temp/ruler-left.png"); width: 16px; } |
172 | 124 | ||
173 | #stateBar { height: 20px; background-color: #282828; margin-bottom: 0px; } | 125 | #stateBar { height: 20px; background-color: #282828; margin-bottom: 0px; } |
174 | 126 | ||
@@ -184,7 +136,6 @@ background: transparent; | |||
184 | 136 | ||
185 | .resizeBar { -webkit-transition: all 0.15s linear; } | 137 | .resizeBar { -webkit-transition: all 0.15s linear; } |
186 | 138 | ||
187 | /* Splitters Collapsed */ | ||
188 | .panelContainer, .panelContainer.collapsed { -webkit-transition: all 0.15s ease-in; } | 139 | .panelContainer, .panelContainer.collapsed { -webkit-transition: all 0.15s ease-in; } |
189 | 140 | ||
190 | .panel.disableTransition { -webkit-transition: none !important; -webkit-box-flex: 0.1 !important; } | 141 | .panel.disableTransition { -webkit-transition: none !important; -webkit-box-flex: 0.1 !important; } |
@@ -203,18 +154,10 @@ background: transparent; | |||
203 | 154 | ||
204 | .bottomSplitter.collapsed { -webkit-transform: rotate(0deg); } | 155 | .bottomSplitter.collapsed { -webkit-transform: rotate(0deg); } |
205 | 156 | ||
206 | /* | 157 | .stageContentShadow { -webkit-box-shadow: 3px 5px 4px rgba(0, 0, 0, 0.5); -moz-box-shadow: 3px 5px 4px rgba(0, 0, 0, 0.5); box-shadow: 3px 5px 4px rgba(0, 0, 0, 0.5); } |
207 | |||
208 | 158 | ||
209 | .stageContentShadow { -webkit-box-shadow: 3px 5px 4px $color-app-shadow; -moz-box-shadow: 3px 5px 4px $color-app-shadow; box-shadow: 3px 5px 4px $color-app-shadow; | 159 | .baseBox { display: -webkit-box; display: -moz-box; display: box; } |
210 | } | ||
211 | 160 | ||
212 | */ | ||
213 | /* | ||
214 | .baseBox { display:-webkit-box; display:-moz-box; display: box; | ||
215 | } | ||
216 | |||
217 | /* Generic style to make any element unselectable */ | ||
218 | .unselectable { -webkit-user-select: none; } | 161 | .unselectable { -webkit-user-select: none; } |
219 | 162 | ||
220 | .verticalBox { -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; } | 163 | .verticalBox { -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; } |
@@ -235,19 +178,17 @@ background: transparent; | |||
235 | 178 | ||
236 | #middleDocArea { -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; margin: 1px; margin-bottom: 3px; border-style: solid; border-width: 1px; } | 179 | #middleDocArea { -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; margin: 1px; margin-bottom: 3px; border-style: solid; border-width: 1px; } |
237 | 180 | ||
238 | /* Used for the Iframe Version | 181 | #mainStageIFrame { border: none; margin: 4px; } |
239 | #mainStageIFrame { border: none; margin: 4px; | 182 | |
240 | } | ||
241 | */ | ||
242 | #mainStageArea { -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; overflow: scroll; position: relative; margin: 0px; padding: 0px; border: none; } | 183 | #mainStageArea { -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; overflow: scroll; position: relative; margin: 0px; padding: 0px; border: none; } |
243 | 184 | ||
244 | #pasteBoard { /*position: relative;*/ top: 0px; left: 0px; margin: 0px; padding: 0px; border: none; /*overflow: scroll;*/ } | 185 | #pasteBoard { top: 0px; left: 0px; margin: 0px; padding: 0px; border: none; } |
245 | 186 | ||
246 | #stageBG { width: 100%; height: 100%; background-color: red; position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 150px; z-index: 0; } | 187 | #stageBG { width: 100%; height: 100%; background-color: red; position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 150px; z-index: 0; } |
247 | 188 | ||
248 | #stageUserContent { width: 100%; height: 100%; background-color: transparent; border: 1px solid black; position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 150px; z-index: 1; } | 189 | #stageUserContent { width: 100%; height: 100%; background-color: transparent; border: 1px solid black; position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 150px; z-index: 1; } |
249 | 190 | ||
250 | #stageParent { /* we aren't entirely sure why this works but putting a slight opacity on this div seems to keep the users content from breaking through the overlay canvas and eating mouse events John Mayhew */ z-index: 2; opacity: 0.99; /*height: 1000px;*/ /*width: 2000px;*/ position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; /*background-color: red;*/ } | 191 | #stageParent { z-index: 2; opacity: 0.99; position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; } |
251 |