aboutsummaryrefslogtreecommitdiff
path: root/css/ninja.css
diff options
context:
space:
mode:
Diffstat (limited to 'css/ninja.css')
-rw-r--r--css/ninja.css220
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 */
49input.nj-skinned, textarea.nj-skinned, button.nj-skinned, select.nj-skinned, select.nj-skinned option, button.nj-skinned { -webkit-appearance: none; outline: none; } 19input.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 */
52input[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; } 21input[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 */
55input.nj-skinned:disabled, textarea.nj-skinned:disabled, select.nj-skinned:disabled, button.nj-skinned:disabled { opacity: 0.4; } 23input.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 */
58input[type="text"].nj-skinned, input[type="password"].nj-skinned, input[type="search"].nj-skinned, select.nj-skinned, select.nj-skinned option { height: 13px; } 25input[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/* 27input[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; }
61input[type="text"].nj-skinned:focus, 28
62input[type="password"].nj-skinned:focus,
63input[type="search"].nj-skinned:focus,
64textarea.nj-skinned:focus,
65select.nj-skinned:focus,
66select.nj-skinned option:focus {
67 -webkit-box-shadow: 0px 0px 3px $color-focus-outline;
68}
69*/
70select.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; } 29select.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
72input[type="search"].nj-skinned { height: 17px; -webkit-box-shadow: none; } 31input[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
76input[type="search"].nj-skinned::-webkit-search-cancel-button:after { content: "\2716"; } 35input[type="search"].nj-skinned::-webkit-search-cancel-button:after { content: "\2716"; }
77 36
78/* Buttons */
79button.nj-skinned { font-size: 9px; cursor: pointer; } 37button.nj-skinned { font-size: 9px; cursor: pointer; }
80 38
81/* Radio buttons */
82input[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); } 39input[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
84input[type="radio"].nj-skinned:checked { background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); border: 2px solid #282828; } 41input[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
86input[type="radio"].nj-skinned:hover { border: 2px solid #282828; } 43input[type="radio"].nj-skinned:hover { border: 2px solid #282828; }
87 44
88input[type="radio"].nj-skinned:checked:after { content: "\a0 \a0 \2022"; }
89
90input[type="radio"].nj-skinned:active { background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #646464 100%); } 45input[type="radio"].nj-skinned:active { background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #646464 100%); }
91 46
92input[type="radio"].nj-skinned:disabled { background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); border: 2px solid #282828; cursor: default; } 47input[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 */
95input[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; } 49input[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
97input[type="checkbox"].nj-skinned:checked:after { content: "\2714"; } 51input[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
101input[type="checkbox"].nj-skinned:disabled { background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); cursor: default; } 55input[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 */
113body { position: absolute; margin: 0px; width: 100%; height: 100%; background-color: black; overflow: hidden; -webkit-user-select: none; font-family: 'Droid Sans', sans-serif; } 63body { 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; }
130background: 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 208
272#mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: auto; } 209#mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: auto; }
273 210
274/* PanelUI.scss Styles governing the panels in the UI. Note that colors and font definitions go in _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss */ 211.panelContainer { margin: 0px; padding: 0