diff options
author | Valerio Virgillito | 2012-01-27 16:39:22 -0800 |
---|---|---|
committer | Valerio Virgillito | 2012-01-27 16:39:22 -0800 |
commit | a53d4ef4d26d5c4c8e5f4859f8fd3e95ccce8c3b (patch) | |
tree | 436668182ef20ab30fb59701deb2e25c5da4498f /css | |
parent | 302e3eb01037ff550bc93547cb8d5d0a0780b312 (diff) | |
parent | 01e7e2448bc58698fb5808d141c1a8a5dfbdaaf7 (diff) | |
download | ninja-a53d4ef4d26d5c4c8e5f4859f8fd3e95ccce8c3b.tar.gz |
Merge pull request #2 from jreid01/pullrequest
Fixes to radio button base styles. Comment clean-up.
Diffstat (limited to 'css')
-rw-r--r-- | css/ninja.css | 220 |
1 files changed, 39 insertions, 181 deletions
diff --git a/css/ninja.css b/css/ninja.css index 2fcb1380..9126c1d3 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 */ | ||
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; } | 19 | 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,18 @@ 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 */ | ||
79 | button.nj-skinned { font-size: 9px; cursor: pointer; } | 37 | button.nj-skinned { font-size: 9px; cursor: pointer; } |
80 | 38 | ||
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); } | 39 | 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 | 40 | ||
84 | input[type="radio"].nj-skinned:checked { background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); border: 2px solid #282828; } | 41 | 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 | 42 | ||
86 | input[type="radio"].nj-skinned:hover { border: 2px solid #282828; } | 43 | input[type="radio"].nj-skinned:hover { border: 2px solid #282828; } |
87 | 44 | ||
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%); } | 45 | input[type="radio"].nj-skinned:active { background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #646464 100%); } |
91 | 46 | ||
92 | input[type="radio"].nj-skinned:disabled { background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); border: 2px solid #282828; cursor: default; } | 47 | input[type="radio"].nj-skinned:disabled { background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); border: 2px solid #282828; cursor: default; } |
93 | 48 | ||
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; } | 49 | 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 | 50 | ||
97 | input[type="checkbox"].nj-skinned:checked:after { content: "\2714"; } | 51 | input[type="checkbox"].nj-skinned:checked:after { content: "\2714"; } |
@@ -100,16 +54,12 @@ input[type="checkbox"].nj-skinned:active { background-image: -webkit-linear-grad | |||
100 | 54 | ||
101 | input[type="checkbox"].nj-skinned:disabled { background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); cursor: default; } | 55 | input[type="checkbox"].nj-skinned:disabled { background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); cursor: default; } |
102 | 56 | ||
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; } | 57 | .nj-divider { background-color: black; border-width: 0px; overflow: hidden; } |
106 | 58 | ||
107 | .nj-divider.divider-horizontal { border-top: 1px solid #232323; border-bottom: 1px solid #3a3a3a; height: 1px; } | 59 | .nj-divider.divider-horizontal { border-top: 1px solid #232323; border-bottom: 1px solid #3a3a3a; height: 1px; } |
108 | 60 | ||
109 | .nj-divider.divider-vertical { border-left: 1px solid #232323; border-right: 1px solid #3a3a3a; width: 1px; } | 61 | .nj-divider.divider-vertical { border-left: 1px solid #232323; border-right: 1px solid #3a3a3a; width: 1px; } |
110 | 62 | ||
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; } | 63 | 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 | 64 | ||
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%; } | 65 | #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 +76,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co | |||
126 | 76 | ||
127 | #topPanelContainer { overflow: hidden; margin-bottom: 2px; height: 32px; } | 77 | #topPanelContainer { overflow: hidden; margin-bottom: 2px; height: 32px; } |
128 | 78 | ||
129 | #bottomPanelContainer { /*border: 1px solid #333; | 79 | #bottomPanelContainer { background: transparent; min-height: 80px; max-height: 50%; overflow: auto; } |
130 | background: transparent; | ||
131 | */ min-height: 80px; max-height: 50%; overflow: auto; } | ||
132 | 80 | ||
133 | .panelContainer { display: block; -webkit-box-orient: vertical; position: relative; } | 81 | .panelContainer { display: block; -webkit-box-orient: vertical; position: relative; } |
134 | 82 | ||
@@ -166,9 +114,9 @@ background: transparent; | |||
166 | 114 | ||
167 | #sceneBar { height: 70px; background-color: #474747; } | 115 | #sceneBar { height: 70px; background-color: #474747; } |
168 | 116 | ||
169 | #mainContainer #rulerTop { /* TODO: temporary background please replace when component is implemented */ background: url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; } | 117 | #mainContainer #rulerTop { background: url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; } |
170 | 118 | ||
171 | #rulerLeft { /* TODO: temporary background please replace when component is implemented */ background: url("../images/temp/ruler-left.png"); width: 16px; } | 119 | #rulerLeft { background: url("../images/temp/ruler-left.png"); width: 16px; } |
172 | 120 | ||
173 | #stateBar { height: 20px; background-color: #282828; margin-bottom: 0px; } | 121 | #stateBar { height: 20px; background-color: #282828; margin-bottom: 0px; } |
174 | 122 | ||
@@ -184,7 +132,6 @@ background: transparent; | |||
184 | 132 | ||
185 | .resizeBar { -webkit-transition: all 0.15s linear; } | 133 | .resizeBar { -webkit-transition: all 0.15s linear; } |
186 | 134 | ||
187 | /* Splitters Collapsed */ | ||
188 | .panelContainer, .panelContainer.collapsed { -webkit-transition: all 0.15s ease-in; } | 135 | .panelContainer, .panelContainer.collapsed { -webkit-transition: all 0.15s ease-in; } |
189 | 136 | ||
190 | .panel.disableTransition { -webkit-transition: none !important; -webkit-box-flex: 0.1 !important; } | 137 | .panel.disableTransition { -webkit-transition: none !important; -webkit-box-flex: 0.1 !important; } |
@@ -203,18 +150,10 @@ background: transparent; | |||
203 | 150 | ||
204 | .bottomSplitter.collapsed { -webkit-transform: rotate(0deg); } | 151 | .bottomSplitter.collapsed { -webkit-transform: rotate(0deg); } |
205 | 152 | ||
206 | /* | 153 | .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 | |||
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; | ||
210 | } | ||
211 | 154 | ||
212 | */ | 155 | .baseBox { display: -webkit-box; display: -moz-box; display: box; } |
213 | /* | ||
214 | .baseBox { display:-webkit-box; display:-moz-box; display: box; | ||
215 | } | ||
216 | 156 | ||
217 | /* Generic style to make any element unselectable */ | ||
218 | .unselectable { -webkit-user-select: none; } | 157 | .unselectable { -webkit-user-select: none; } |
219 | 158 | ||
220 | .verticalBox { -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; } | 159 | .verticalBox { -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; } |
@@ -235,19 +174,17 @@ background: transparent; | |||
235 | 174 | ||
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; } | 175 | #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 | 176 | ||
238 | /* Used for the Iframe Version | 177 | #mainStageIFrame { border: none; margin: 4px; } |
239 | #mainStageIFrame { border: none; margin: 4px; | 178 | |
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; } | 179 | #mainStageArea { -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; overflow: scroll; position: relative; margin: 0px; padding: 0px; border: none; } |
243 | 180 | ||
244 | #pasteBoard { /*position: relative;*/ top: 0px; left: 0px; margin: 0px; padding: 0px; border: none; /*overflow: scroll;*/ } | 181 | #pasteBoard { top: 0px; left: 0px; margin: 0px; padding: 0px; border: none; } |
245 | 182 | ||
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; } | 183 | #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 | 184 | ||
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; } | 185 | #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 | 186 | ||
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;*/ } | 187 | #stageParent { z-index: 2; opacity: 0.99; position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; } |
251 | 188 | ||
252 | .global3DSettings { -webkit-transform-style: preserve-3d; -webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } | 189 | .global3DSettings { -webkit-transform-style: preserve-3d; -webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
253 | 190 | ||
@@ -271,19 +208,13 @@ background: transparent; | |||
271 |