From cb266a79c03968cf68efca015b2db8d6d221ac6d Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 27 Jan 2012 16:15:38 -0800 Subject: Fixes to radio button base styles. Comment clean-up. --- _scss/imports/scss/_Base.scss | 49 +++---- _scss/imports/scss/_Components.scss | 4 +- _scss/imports/scss/_MainWindow.scss | 30 ++-- _scss/imports/scss/_MenuUI.scss | 15 +- _scss/imports/scss/_PanelUI.scss | 99 +++++++------- _scss/imports/scss/_ScrollBars.scss | 42 +++--- _scss/imports/scss/_Stage.scss | 52 +++++++ _scss/imports/scss/_Tools.scss | 48 +++---- _scss/imports/scss/_ToolsSample.scss | 2 +- _scss/imports/scss/_mixins.scss | 10 +- _scss/imports/scss/_toolbar.scss | 18 +-- _scss/imports/themes/default/_colors.scss | 65 +++++---- _scss/imports/themes/default/_fonts.scss | 5 - _scss/imports/themes/default/_mixins.scss | 6 +- _scss/ninja.scss | 8 +- css/ninja.css | 220 ++++++------------------------ 16 files changed, 288 insertions(+), 385 deletions(-) diff --git a/_scss/imports/scss/_Base.scss b/_scss/imports/scss/_Base.scss index f9a1cfa3..75ccc07d 100755 --- a/_scss/imports/scss/_Base.scss +++ b/_scss/imports/scss/_Base.scss @@ -4,12 +4,12 @@ // (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. // -/* - * 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 - */ + +//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 + .clear { display: block; @@ -42,8 +42,8 @@ float: right; } -/* Begin: Basic skinning for form fields */ -/* Reset all */ +// Begin: Basic skinning for form fields +// Reset all input.nj-skinned, textarea.nj-skinned, button.nj-skinned, @@ -54,7 +54,7 @@ button.nj-skinned { outline: none; } -/* Base styles */ +// Base styles input[type="text"].nj-skinned, input[type="password"].nj-skinned, input[type="search"].nj-skinned, @@ -68,7 +68,7 @@ select.nj-skinned option { font-family: 'Droid Sans', sans-serif; } -/* Disabled styles */ +// Disabled styles input.nj-skinned:disabled, textarea.nj-skinned:disabled, select.nj-skinned:disabled, @@ -76,7 +76,7 @@ button.nj-skinned:disabled { opacity: 0.4; } -/* Text inputs and select boxes */ +// Text inputs and select boxes input[type="text"].nj-skinned, input[type="password"].nj-skinned, input[type="search"].nj-skinned, @@ -84,7 +84,7 @@ select.nj-skinned, select.nj-skinned option { height: 13px; } -/* +// input[type="text"].nj-skinned:focus, input[type="password"].nj-skinned:focus, input[type="search"].nj-skinned:focus, @@ -93,7 +93,7 @@ select.nj-skinned:focus, select.nj-skinned option:focus { -webkit-box-shadow: 0px 0px 3px $color-focus-outline; } -*/ + select.nj-skinned { background-image: url("../images/dropdown-bg.png"); @@ -118,13 +118,13 @@ input[type="search"].nj-skinned::-webkit-search-cancel-button:after { content:"\2716"; } -/* Buttons */ +// Buttons button.nj-skinned { font-size: 9px; cursor: pointer; } -/* Radio buttons */ +// Radio buttons input[type="radio"].nj-skinned { background-color: $color-menu-bg; background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%); @@ -143,15 +143,18 @@ input[type="radio"].nj-skinned { box-shadow: 0px 0px 2px $color-radio-shadow; } input[type="radio"].nj-skinned:checked { - background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%); + background: -webkit-radial-gradient(center, + circle cover, + $color-radio 0%, + $color-radio 15%, + $color-radio 30%, + $color-transparent 31%), + -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%); border: 2px solid $color-radio-border; } input[type="radio"].nj-skinned:hover { border: 2px solid $color-radio-border; } -input[type="radio"].nj-skinned:checked:after { - content:"\a0 \a0 \2022"; -} input[type="radio"].nj-skinned:active { background-image: -webkit-linear-gradient(top, $color-radio-gradient-bottom 0%, $color-radio-gradient-top 100%); } @@ -160,7 +163,7 @@ input[type="radio"].nj-skinned:disabled { border: 2px solid $color-radio-border; cursor: default; } -/* Checkboxes */ +// Checkboxes input[type="checkbox"].nj-skinned { background-color: $color-menu-bg; background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%); @@ -190,9 +193,9 @@ input[type="checkbox"].nj-skinned:disabled { background-image: -webkit-linear-gradient(top, $color-radio-gradient-top 0%, $color-radio-gradient-bottom 100%); cursor: default; } -/* End: Basic skinning for form fields */ +// End: Basic skinning for form fields -/* Begin: Basic skinning for visual dividers */ +// Begin: Basic skinning for visual dividers .nj-divider { background-color: $color-divider-second; border-width: 0px; @@ -208,4 +211,4 @@ input[type="checkbox"].nj-skinned:disabled { border-right: 1px solid $color-divider-third; width: 1px; } -/* End: Basic skinning for visual dividers */ +// End: Basic skinning for visual dividers diff --git a/_scss/imports/scss/_Components.scss b/_scss/imports/scss/_Components.scss index 2fda5afc..c4182c73 100755 --- a/_scss/imports/scss/_Components.scss +++ b/_scss/imports/scss/_Components.scss @@ -6,7 +6,7 @@ -/* Begin: Styles for the Tree component */ +// Begin: Styles for the Tree component .tree { @@ -30,4 +30,4 @@ -webkit-transition: -webkit-transform 0.05s linear; } -/* End: styles for the Tree component */ \ No newline at end of file +// End: styles for the Tree component \ No newline at end of file diff --git a/_scss/imports/scss/_MainWindow.scss b/_scss/imports/scss/_MainWindow.scss index c5552e4e..b33426ba 100755 --- a/_scss/imports/scss/_MainWindow.scss +++ b/_scss/imports/scss/_MainWindow.scss @@ -4,12 +4,12 @@ // (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. // -/* - * 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 - */ + +// 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 + body { position: absolute; @@ -83,9 +83,9 @@ } #bottomPanelContainer { - /*border: 1px solid #333; + //border: 1px solid #333; background: transparent; - */ + min-height:80px; max-height:50%; overflow:auto; @@ -200,14 +200,14 @@ } #mainContainer #rulerTop { - /* TODO: temporary background please replace when component is implemented */ + // TODO: temporary background please replace when component is implemented background: url("../images/temp/ruler-top.png"); height:15px; margin-bottom: 0px; } #rulerLeft { - /* TODO: temporary background please replace when component is implemented */ + // TODO: temporary background please replace when component is implemented background: url("../images/temp/ruler-left.png"); width:16px; } @@ -246,7 +246,7 @@ .resizeBar { -webkit-transition: all 0.15s linear; } -/* Splitters Collapsed */ +// Splitters Collapsed .panelContainer, .panelContainer.collapsed { -webkit-transition: all 0.15s ease-in; } .panel.disableTransition { -webkit-transition: none !important; -webkit-box-flex:0.1 !important; } .disableTransition { -webkit-transition: none !important; -webkit-box-flex:0 !important; } @@ -258,7 +258,7 @@ .topSplitter.collapsed { -webkit-transform:rotate(180deg); } .bottomSplitter.collapsed { -webkit-transform:rotate(0deg); } -/* +// .stageContentShadow { @@ -267,15 +267,15 @@ box-shadow: 3px 5px 4px $color-app-shadow; } -*/ -/* + +// .baseBox { display:-webkit-box; display:-moz-box; display: box; } -/* Generic style to make any element unselectable */ +// Generic style to make any element unselectable .unselectable { -webkit-user-select: none; } diff --git a/_scss/imports/scss/_MenuUI.scss b/_scss/imports/scss/_MenuUI.scss index e821e5cc..e1fb149a 100755 --- a/_scss/imports/scss/_MenuUI.scss +++ b/_scss/imports/scss/_MenuUI.scss @@ -4,12 +4,11 @@ // (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. // -/* - * MenuUI.scss - * Styles governing the main dropdown menu. - * Note that colors and font definitions go in - * _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss - */ +// MenuUI.scss +// Styles governing the main dropdown menu. +// Note that colors and font definitions go in +// _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss + .menuBar { width:100%; border-style: solid; @@ -49,8 +48,8 @@ background : $color-menu-active-bg; } -/*Styles for positioning and display -Supports fly-out of sub-menus two levels deep only */ +// Styles for positioning and display +Supports fly-out of sub-menus two levels deep only .menuBar ul ul { position: absolute; diff --git a/_scss/imports/scss/_PanelUI.scss b/_scss/imports/scss/_PanelUI.scss index e72a1502..ac82adf8 100755 --- a/_scss/imports/scss/_PanelUI.scss +++ b/_scss/imports/scss/_PanelUI.scss @@ -4,24 +4,23 @@ // (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. // -/* - * 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 - */ -/* layout for the container of all panels within a dock area */ +// +// 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 + +// layout for the container of all panels within a dock area .panelContainer { margin: 0px; padding: 0px 0px; position:relative; - /* - this is here to hopefully show vertical scroll bars when the panels exceed the height of the panel - unfortunately it doesn't seem to work properly. this is probably due to some of our box styling or positioning - overflow: auto; */ + // this is here to hopefully show vertical scroll bars when the panels exceed the height of the panel + // unfortunately it doesn't seem to work properly. this is probably due to some of our box styling or positioning + overflow: auto; } -/* base layout style for all panels*/ +// base layout style for all panels .panelDisclosureIcon { background-image:url("../images/panels/panelDisclosureIcon.png"); @@ -40,7 +39,7 @@ } .panelCollapseArrowFill { - color: rgba(76,76,76,1); /* this is never really used but is set so we can get it via javascript to draw the control via script on the canvas */ + color: rgba(76,76,76,1); // this is never really used but is set so we can get it via javascript to draw the control via script on the canvas padding:0px 4px; } @@ -87,11 +86,11 @@ padding-right:3px; width:32px; - /*This is a hack to get the tools panel to extend all the way to the bottom.*/ + // This is a hack to get the tools panel to extend all the way to the bottom. padding-bottom:450px; } -/* sizes for the specific panels */ +// sizes for the specific panels #toolPropertiesPanel { height: 32px; @@ -102,7 +101,7 @@ height: 116px; } -/* Only used by Animation Presets Panel currently */ +// Only used by Animation Presets Panel currently .treeComponent { @@ -119,7 +118,7 @@ list-style: none; } -/*This sets the style for a tree folder's icon*/ +// This sets the style for a tree folder's icon ul.treeComponent > img:first-child { margin-left: -35px; @@ -139,7 +138,7 @@ ul.treeComponent > img:first-child margin-left: -20px; padding-right:10px; vertical-align:middle; - /*border-bottom:1px solid #555555;*/ + // border-bottom:1px solid #555555; } .treeCategory @@ -153,8 +152,8 @@ ul.treeComponent > img:first-child color: $color-panel-text; } -/* ====== Used by Properties Panel ====== */ -/* Removed the outline text input style -> Causing problems with the Canvas */ +// ====== Used by Properties Panel ====== +// Removed the outline text input style -> Causing problems with the Canvas .propertiesPanel { @@ -210,7 +209,7 @@ ul.treeComponent > img:first-child background-color: $color-panel-shadow; } -/* ====== Indexed table row and column classes for Properties Panel layout ====== */ +// ====== Indexed table row and column classes for Properties Panel layout ====== .propRow1{ width:100%; } @@ -313,7 +312,7 @@ ul.treeComponent > img:first-child -/* Begin: Project Panel UI classes */ +// Begin: Project Panel UI classes .Project-Panel { height: 100%; } @@ -354,14 +353,14 @@ ul.treeComponent > img:first-child margin-bottom: 36px; } -/* +// #pp-container-list, #pp-container-assets { height: 310px; width: 100%; overflow: auto; } -*/ + .pp-scroll-main { display: block; @@ -388,12 +387,12 @@ ul.treeComponent > img:first-child #pp-view-assets { display: none; } -/* +// #pp-container-assets .pp-scroll-linked, #pp-container-list .pp-scroll-linked { width: 420px; } -*/ + .pp-header-container { position: relative; @@ -518,10 +517,10 @@ span.pp-span-all:focus { display: block; width: 9px; height: 5px; - /* + // margin-right: 10px; margin-top: 2px; - */ + background-image: url("../images/panels/project-panel/icon-sort-arrow.png"); background-repeat: no-repeat; position: absolute; @@ -559,7 +558,7 @@ span.pp-span-all:focus { color: $color-menu-bg; } -/* Icons! */ +// Icons! #pp-container-list li, #pp-container-list span.span-space { background-repeat: no-repeat; @@ -660,7 +659,7 @@ span.pp-span-all:focus { } -/* Buttons */ +// Buttons .pp-button, #pp-col-buttons .pp-button div { margin: 0px; @@ -748,7 +747,7 @@ div.pp-button.button-divider div { display: none; } -/* Hide and Show different types of assets */ +// Hide and Show different types of assets .pp-type-script, .pp-type-video, .pp-type-audio, @@ -777,7 +776,7 @@ div.pp-button.button-divider div { display: block; } -/* New file flyout */ +// New file flyout .pp-popup { position: absolute; top: -53px; @@ -796,7 +795,7 @@ div.pp-button.button-divider div { margin: 0px; padding: 0px; } -/* Search subwidget */ +// Search subwidget #pp-search { position: absolute; display: block; @@ -850,7 +849,7 @@ div.pp-button.button-divider div { } -/* Inline editor styling */ +// Inline editor styling #pp-container-assets input.inline-editor { height: 11px; width: 80%; @@ -862,7 +861,7 @@ div.pp-button.button-divider div { } -/* End: Tree component for Project Panel */ +// End: Tree component for Project Panel .subToolHolderPanel{ @@ -873,17 +872,17 @@ div.pp-button.button-divider div { margin-top:-6px } -/*.marginposition{*/ - /*margin-top:-26px*/ -/*}*/ -/* Begin: Properties Panel styles */ +// .marginposition{ + // margin-top:-26px +// } +// Begin: Properties Panel styles .properties_panel { overflow-x: hidden; color: $color-panel-text; } -/* Begin: styling the form elements */ +// Begin: styling the form elements .properties_panel select { -webkit-appearance: none; font-size: 9px; @@ -932,10 +931,10 @@ button.panel-button { background-color: $color-panel-input-bg; color: $color-panel-input; } -/* End: styling the form elements */ +// End: styling the form elements -/* main section styles */ +// main section styles .pp_sectionHeader{ font-size:12px; padding-left:37px; @@ -952,7 +951,7 @@ button.panel-button { margin-top: 5px; } -/* control groups */ +// control groups .pp_group{ width: 100%; clear: both; @@ -969,7 +968,7 @@ button.panel-button { left: 25px; } -/* controls */ +// controls .pp_proplabel{ float: left; width: auto; @@ -1004,7 +1003,7 @@ button.panel-button { line-height: 12px; height: 16px; } -/* Style overrides/extensions for tabular layout classes within panels */ +// Style overrides/extensions for tabular layout classes within panels .panel .layout-cell { vertical-align: top; text-align: left; @@ -1025,7 +1024,7 @@ button.panel-button { .panel .layout-table.table-2col-wide .layout-cell { width: 50%; } -/* Slider properties */ +// Slider properties .slider_props .layout-table.table-2col-wide .layout-cell:first-child, .button_props .layout-table.table-2col-wide .layout-cell:first-child, .hottext_props .layout-table.table-2col-wide .layout-cell:first-child, @@ -1079,7 +1078,7 @@ button.panel-button { margin-bottom: 10px; } -/* Begin: Styles for DivPIProperties */ +// Begin: Styles for DivPIProperties .pp_colorpicker{ width: 35px; height: 20px; @@ -1100,13 +1099,13 @@ button.panel-button { border-width: none; margin: -1px 8px 0px 34px; } -/* End Styles for DivPIProperties */ +// End Styles for DivPIProperties -/* End: Properties Panel styles */ +// End: Properties Panel styles -/* New Panel Layout Stuff */ +// New Panel Layout Stuff .panels { display: -webkit-box; diff --git a/_scss/imports/scss/_ScrollBars.scss b/_scss/imports/scss/_ScrollBars.scss index 9066c3ff..1c2f30ea 100755 --- a/_scss/imports/scss/_ScrollBars.scss +++ b/_scss/imports/scss/_ScrollBars.scss @@ -4,25 +4,25 @@ // (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. // -/* Begin: Scroll Bar skinning */ +// Begin: Scroll Bar skinning ::-webkit-scrollbar { width: 11px; height: 11px; } -/* Turn off single button up on top, and down on bottom */ +// Turn off single button up on top, and down on bottom ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { - display: none; /*we have these off by default */ + display: none; // we have these off by default } -/* Turn off the down area up on top, and up area on bottom */ +// Turn off the down area up on top, and up area on bottom ::-webkit-scrollbar-button:vertical:start:increment, ::-webkit-scrollbar-button:vertical:end:decrement { display: none; } -/* Turn off the down area up on top, and up area on bottom */ +// Turn off the down area up on top, and up area on bottom ::-webkit-scrollbar-button:horizontal:start:increment, ::-webkit-scrollbar-button:horizontal:end:decrement { display: none; @@ -36,27 +36,27 @@ background-color: $color-sb-border; } -/* Track area above thumb and below up button */ +// Track area above thumb and below up button ::-webkit-scrollbar-track-piece:vertical:start { background-color: transparent; } -/* Track area left of thumb and right of button */ +// Track area left of thumb and right of button ::-webkit-scrollbar-track-piece:horizontal:start { background-color: transparent; } -/* Track area below thumb and down button */ +// Track area below thumb and down button ::-webkit-scrollbar-track-piece:vertical:end { background-color: transparent; } -/* Track area right of thumb and left of button */ +// Track area right of thumb and left of button ::-webkit-scrollbar-track-piece:horizontal:end { background-color: transparent; } -/* The thumb itself */ +// The thumb itself ::-webkit-scrollbar-thumb:vertical { border-color: $color-sb-border; border-style: solid; @@ -101,13 +101,13 @@ } ::-webkit-scrollbar-corner { - /*background-color: black;*/ - /* - For some reason this is the only way I can find to not show the corner. - Setting the ::-webkit-scrollbar-corner:disabled style doesn't work as that - pseudo-class seems to be ignored. - John Mayhew - */ + // background-color: black; + + //For some reason this is the only way I can find to not show the corner. + //Setting the ::-webkit-scrollbar-corner:disabled style doesn't work as that + //pseudo-class seems to be ignored. + //John Mayhew + background-color: $color-sb-border; } ::-webkit-scrollbar-corner:window-inactive { @@ -124,12 +124,12 @@ background-repeat: no-repeat; } -/* disabled state */ +// disabled state ::-webkit-scrollbar-track:disabled { display: none; } -/* These don't seem to be necessary or in some cases, they just seem to be ignored +// These don't seem to be necessary or in some cases, they just seem to be ignored :-webkit-scrollbar-track:vertical:disabled { display: none; } @@ -153,6 +153,6 @@ ::-webkit-resizer:disabled { display: none; } -*/ -/* End: Scroll Bar Skinning */ + +// End: Scroll Bar Skinning diff --git a/_scss/imports/scss/_Stage.scss b/_scss/imports/scss/_Stage.scss index bed29d98..faf8ee94 100755 --- a/_scss/imports/scss/_Stage.scss +++ b/_scss/imports/scss/_Stage.scss @@ -20,6 +20,40 @@ border-width: 1px; } +// Used for the Iframe Version +#mainStageIFrame { + border: none; + margin: 4px; +} + + + + +#mainStageArea { + -moz-box-flex: 1; + -webkit-box-flex: 1; + box-flex: 1; + + overflow: scroll; + position: relative; + + margin: 0px; + padding: 0px; + border: none; +} + +#pasteBoard { + // position: relative; + top: 0px; + left: 0px; + margin: 0px; + padding: 0px; + border: none; + + // overflow: scroll; +} + + #stageBG { width:100%; height:100%; @@ -50,6 +84,24 @@ z-index: 1; } +#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; +} + .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); diff --git a/_scss/imports/scss/_Tools.scss b/_scss/imports/scss/_Tools.scss index 8614285f..935c4cd6 100755 --- a/_scss/imports/scss/_Tools.scss +++ b/_scss/imports/scss/_Tools.scss @@ -4,15 +4,15 @@ // (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. // -/* - * Tools.scss - * For individual tool styles in the toolbar, see toolbar.scss. - * Note that colors and font definitions go in - * _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss - * - */ +// +// Tools.scss +// For individual tool styles in the toolbar, see toolbar.scss. +// Note that colors and font definitions go in +// _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss +// + -/*Made changes to toolButton */ +// Made changes to toolButton .toolButton { width:26px; @@ -33,7 +33,7 @@ .subOption{ float:left; - /*margin:10px;*/ + // margin:10px; margin-top: 5px; margin-left: 10px; margin-right: 10px; @@ -57,8 +57,8 @@ .toolSeparator { height:1px; width:30px; - /*margin-left: 3px;*/ - /*margin-right: 3px;*/ + // margin-left: 3px; + // margin-right: 3px; } .toolSeparatorTop { @@ -94,13 +94,13 @@ } -/* Added new styling Sub Tool Shape Options*/ +// Added new styling Sub Tool Shape Options .textBox { padding-top:3px; min-width:10em; - /*height:14px;*/ + // height:14px; margin-left:5px; position:relative; margin-top:0px; @@ -113,7 +113,7 @@ float:left; display:block; background-color: $color-tool-select-bg; - /*-webkit-border-radius: 0;*/ + // -webkit-border-radius: 0; border: 1px solid $color-tool-select-border; color:$color-tool-text; outline:none; @@ -129,8 +129,8 @@ padding-top:3px; margin-left:10px; font-size:12px; - /*display:inline;*/ - /*line-height:10px;*/ + // display:inline; + // line-height:10px; float:left; margin-right:5px; } @@ -201,7 +201,7 @@ { display:inline; float:left; - /*margin-left: 20px;*/ + // margin-left: 20px; } .leftLabel{ @@ -209,7 +209,7 @@ float:left; } -/* Skin Radio Buttons */ +// Skin Radio Buttons input[type="radio"] { -webkit-appearance: none; background: $color-radio-bg; @@ -236,7 +236,7 @@ input[type="radio"]:checked { border-style: solid; } -/*disabled settings for checkbox and radiobutton*/ +// disabled settings for checkbox and radiobutton input[type="radio"]:disabled { opacity: .3; background: $color-radio-border; @@ -258,8 +258,8 @@ input[type="radio"]:disabled { } .checkBoxLabel{ - /*margin-top:0.5em;*/ - /*margin-left:-5em;*/ + // margin-top:0.5em; + // margin-left:-5em; padding-top:3px; font-size:12px; float:left; @@ -286,7 +286,7 @@ input[type="radio"]:disabled { .toolButtonSelectedColor { border-top-color: $color-tool-border-selected; border-left-color: $color-tool-border-selected; - /* background: $color-tool-bg-active;*/ + // background: $color-tool-bg-active; } @@ -328,7 +328,7 @@ input[type="radio"]:disabled { @include marginTop(5px); } -/* Begin: styles for tag toolbar */ +// Begin: styles for tag toolbar #tagToolContainer input.tag-type, #rotateObjectToolContainer input.tag-type, #translateObjectToolContainer input.tag-type { @@ -484,4 +484,4 @@ input[type="radio"]:disabled { } -/* Endi: styles for tag toolbar */ \ No newline at end of file +// Endi: styles for tag toolbar \ No newline at end of file diff --git a/_scss/imports/scss/_ToolsSample.scss b/_scss/imports/scss/_ToolsSample.scss index 8c354f14..2e1da9a8 100755 --- a/_scss/imports/scss/_ToolsSample.scss +++ b/_scss/imports/scss/_ToolsSample.scss @@ -5,7 +5,7 @@ // (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. // -/*Image Sprinting */ +// Image Sprinting .ovalToolUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet.png"); background-repeat: no-repeat; diff --git a/_scss/imports/scss/_mixins.scss b/_scss/imports/scss/_mixins.scss index e654aecf..061262f7 100755 --- a/_scss/imports/scss/_mixins.scss +++ b/_scss/imports/scss/_mixins.scss @@ -4,11 +4,11 @@ // (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. // -/* - * mixins.scss - * Generic mixins. Theme-specific mixins (e.g. for sprites) - * should go in the theme/themename/mixins.scss file. - */ + +// mixins.scss +// Generic mixins. Theme-specific mixins (e.g. for sprites) +// should go in the theme/themename/mixins.scss file. + // Mixin to set the Opacity of an Element @mixin opacity($opacity){ diff --git a/_scss/imports/scss/_toolbar.scss b/_scss/imports/scss/_toolbar.scss index 64fb32de..048c1f88 100755 --- a/_scss/imports/scss/_toolbar.scss +++ b/_scss/imports/scss/_toolbar.scss @@ -4,14 +4,14 @@ // (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. // -/* - * toolbar.scss - * Styles governing the individual tools. - * Note that colors and font definitions go in - * _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss - */ - -/* New Tool List CSS */ +// +// toolbar.scss +// Styles governing the individual tools. +// Note that colors and font definitions go in +// _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss + + +// New Tool List CSS .SelectionToolPressed { @include background-pos(12,1,26px,23px); @include opacity(1.0); @@ -219,7 +219,7 @@ opacity: 0.7; } -/* Selection Tool Options */ +// Selection Tool Options .topAlignUp { @include background-pos(8,2,26px,23px); diff --git a/_scss/imports/themes/default/_colors.scss b/_scss/imports/themes/default/_colors.scss index 2fbe7956..34d5ffc9 100755 --- a/_scss/imports/themes/default/_colors.scss +++ b/_scss/imports/themes/default/_colors.scss @@ -4,14 +4,13 @@ // (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. // -/* - * _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. - */ +//_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. -/* Colors for radio buttons and other form elements */ + +// Colors for radio buttons and other form elements $color-radio-border: rgb(40,40,40); $color-radio-shadow: rgba(200,200,200,0.5); $color-radio-gradient-top: rgb(100,100,100); @@ -22,29 +21,29 @@ $color-input: rgb(255,255,255); $color-input-bg: rgb(68, 68, 68); $color-input-border: rgb(49, 49, 49); $color-focus-outline: rgb(180, 180, 180); +$color-transparent: rgba(0,0,0,0); -/* 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. - * - */ -$color-divider-first: rgb(35,35,35); /* top and left */ -$color-divider-second: rgb(0,0,0); /* Middle */ -$color-divider-third: rgb(58,58,58); /* Bottom and right */ +// 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. +// + +$color-divider-first: rgb(35,35,35); // top and left +$color-divider-second: rgb(0,0,0); // Middle +$color-divider-third: rgb(58,58,58); // Bottom and right -/* Main background color of entire app */ -$color-app-bg: rgb(0,0,0); /* Main app background color. */ -$color-app-bg-a1: rgba(0,0,0,1); /* rgba version */ -$color-app-border: rgb(51,51,51); /* Main app border color */ -$color-app-shadow: rgba(0,0,0,.5); /* color of drop shadows */ -$color-stage: rgb(128,128,128); /* Stage color */ -$color-body-border: rgb(0,0,0); /* body border color */ -$color-body-bg: rgb(255,255,255); /* Body background color */ +// Main background color of entire app +$color-app-bg: rgb(0,0,0); // Main app background color. +$color-app-bg-a1: rgba(0,0,0,1); // rgba version +$color-app-border: rgb(51,51,51); // Main app border color +$color-app-shadow: rgba(0,0,0,.5); // color of drop shadows +$color-stage: rgb(128,128,128); // Stage color +$color-body-border: rgb(0,0,0); // body border color +$color-body-bg: rgb(255,255,255); // Body background color -/* Colors for main dropdown menus: background & text for both regular and highlighted states, dividers */ +// Colors for main dropdown menus: background & text for both regular and highlighted states, dividers $color-menu-bg: rgb(71,71,71); $color-menu-text: rgb(255,255,255); $color-menu-hilite-bg: rgb(178,178,178); @@ -54,7 +53,7 @@ $color-menu-border: rgb(0,0,0); $color-menu-active-bg: rgb(181,122,10); -/* Colors for tools: background, text, how they interact with the UI */ +// Colors for tools: background, text, how they interact with the UI $color-tool-bg: rgb(41,41,41); $color-tool-bg-active: rgb(178,178,178); $color-tool-border-selected: rgb(89,89,89); @@ -69,15 +68,15 @@ $color-tool-select-border: rgb(0,0,0); $color-tool-select-hover-bg: rgb(221,221,221); -/* Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc. */ +// Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc. $color-panel-bg: $color-menu-bg; $color-panel-text: $color-menu-text; $color-panel-input: $color-panel-text; $color-panel-hilite-bg: $color-menu-hilite-bg; $color-panel-hilite-text: $color-menu-hilite-text; -$color-panel-clickable: rgb(215,215,215); /* used for editable items in their non-edit state, etc. */ -$color-panel-border: $color-menu-border; /* Border for panel and for block elements */ -$color-panel-shadow: rgb(58,58,58); /* Shadow for text and block elements */ +$color-panel-clickable: rgb(215,215,215); // used for editable items in their non-edit state, etc. +$color-panel-border: $color-menu-border; // Border for panel and for block elements +$color-panel-shadow: rgb(58,58,58); // Shadow for text and block elements $color-panel-input-bg: rgb(68, 68, 68); $color-panel-dividerlabel-bg: rgb(62, 62, 62); $color-panel-input-border: rgb(49, 49, 49); @@ -85,7 +84,7 @@ $color-panel-divider-top: rgb(62, 62, 62); $color-panel-divider: $color-menu-divider; $color-panel-divider-bottom: rgb(86, 86, 86); -/* Colors for scroll bars */ +// Colors for scroll bars $color-sb-border: rgb(0,0,0); $color-sb-1: rgb(140,140,140); $color-sb-2: rgb(173,173,173); diff --git a/_scss/imports/themes/default/_fonts.scss b/_scss/imports/themes/default/_fonts.scss index 9410dfd2..9174cff3 100755 --- a/_scss/imports/themes/default/_fonts.scss +++ b/_scss/imports/themes/default/_fonts.scss @@ -4,9 +4,4 @@ // (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. // -/* - * _fonts.scss - * Defines the fonts for the application. - */ -/* Droid Sans: Normal, bold asdf*/ diff --git a/_scss/imports/themes/default/_mixins.scss b/_scss/imports/themes/default/_mixins.scss index e6a38a93..9f61e7ef 100755 --- a/_scss/imports/themes/default/_mixins.scss +++ b/_scss/imports/themes/default/_mixins.scss @@ -4,10 +4,8 @@ // (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. // -/* - * themes/themename/mixins.scss - * Mixins that are theme-dependent (e.g. sprite mixins, etc) - */ +// themes/themename/mixins.scss +// Mixins that are theme-dependent (e.g. sprite mixins, etc) $Mx:0; $My:0; diff --git a/_scss/ninja.scss b/_scss/ninja.scss index 9980b04a..11c04afb 100755 --- a/_scss/ninja.scss +++ b/_scss/ninja.scss @@ -6,11 +6,11 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -/* */ -/* ninja.scss - * Main SCSS file for ninja, compiled by SASS into the file ninja.css. - */ + +// ninja.scss +// Main SCSS file for ninja, compiled by SASS into the file ninja.css. + // Import theme settings @import "imports/themes/default/colors"; diff --git a/css/ninja.css b/css/ninja.css index 2fcb1380..9126c1d3 100755 --- a/css/ninja.css +++ b/css/ninja.css @@ -1,33 +1,5 @@ @charset "UTF-8"; /* This file contains proprietary software owned by Motorola Mobility, Inc.
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
*/ -/* */ -/* ninja.scss Main SCSS file for ninja, compiled by SASS into the file ninja.css. */ -/* _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. */ -/* Colors for radio buttons and other form elements */ -/* 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. */ -/* top and left */ -/* Middle */ -/* Bottom and right */ -/* Main background color of entire app */ -/* Main app background color. */ -/* rgba version */ -/* Main app border color */ -/* color of drop shadows */ -/* Stage color */ -/* body border color */ -/* Body background color */ -/* Colors for main dropdown menus: background & text for both regular and highlighted states, dividers */ -/* Colors for tools: background, text, how they interact with the UI */ -/* Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc. */ -/* used for editable items in their non-edit state, etc. */ -/* Border for panel and for block elements */ -/* Shadow for text and block elements */ -/* Colors for scroll bars */ -/* _fonts.scss Defines the fonts for the application. */ -/* Droid Sans: Normal, bold asdf*/ -/* themes/themename/mixins.scss Mixins that are theme-dependent (e.g. sprite mixins, etc) */ -/* mixins.scss Generic mixins. Theme-specific mixins (e.g. for sprites) should go in the theme/themename/mixins.scss file. */ -/* 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 */ .clear { display: block; clear: both; height: 0px; overflow: hidden; } .bold { font-weight: bold; } @@ -44,29 +16,16 @@ .layout-table .flexor div:last-child { float: right; } -/* Begin: Basic skinning for form fields */ -/* Reset all */ input.nj-skinned, textarea.nj-skinned, button.nj-skinned, select.nj-skinned, select.nj-skinned option, button.nj-skinned { -webkit-appearance: none; outline: none; } -/* Base styles */ 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; } -/* Disabled styles */ input.nj-skinned:disabled, textarea.nj-skinned:disabled, select.nj-skinned:disabled, button.nj-skinned:disabled { opacity: 0.4; } -/* Text inputs and select boxes */ input[type="text"].nj-skinned, input[type="password"].nj-skinned, input[type="search"].nj-skinned, select.nj-skinned, select.nj-skinned option { height: 13px; } -/* -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 $color-focus-outline; -} -*/ +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; } + 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; } 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 input[type="search"].nj-skinned::-webkit-search-cancel-button:after { content: "\2716"; } -/* Buttons */ button.nj-skinned { font-size: 9px; cursor: pointer; } -/* Radio buttons */ 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); } -input[type="radio"].nj-skinned:checked { background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); border: 2px solid #282828; } +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; } input[type="radio"].nj-skinned:hover { border: 2px solid #282828; } -input[type="radio"].nj-skinned:checked:after { content: "\a0 \a0 \2022"; } - input[type="radio"].nj-skinned:active { background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #646464 100%); } input[type="radio"].nj-skinned:disabled { background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); border: 2px solid #282828; cursor: default; } -/* Checkboxes */ 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; } input[type="checkbox"].nj-skinned:checked:after { content: "\2714"; } @@ -100,16 +54,12 @@ input[type="checkbox"].nj-skinned:active { background-image: -webkit-linear-grad input[type="checkbox"].nj-skinned:disabled { background-image: -webkit-linear-gradient(top, #646464 0%, #3c3c3c 100%); cursor: default; } -/* End: Basic skinning for form fields */ -/* Begin: Basic skinning for visual dividers */ .nj-divider { background-color: black; border-width: 0px; overflow: hidden; } .nj-divider.divider-horizontal { border-top: 1px solid #232323; border-bottom: 1px solid #3a3a3a; height: 1px; } .nj-divider.divider-vertical { border-left: 1px solid #232323; border-right: 1px solid #3a3a3a; width: 1px; } -/* End: Basic skinning for visual dividers */ -/* 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 */ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-color: black; overflow: hidden; -webkit-user-select: none; font-family: 'Droid Sans', sans-serif; } #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 #topPanelContainer { overflow: hidden; margin-bottom: 2px; height: 32px; } -#bottomPanelContainer { /*border: 1px solid #333; -background: transparent; -*/ min-height: 80px; max-height: 50%; overflow: auto; } +#bottomPanelContainer { background: transparent; min-height: 80px; max-height: 50%; overflow: auto; } .panelContainer { display: block; -webkit-box-orient: vertical; position: relative; } @@ -166,9 +114,9 @@ background: transparent; #sceneBar { height: 70px; background-color: #474747; } -#mainContainer #rulerTop { /* TODO: temporary background please replace when component is implemented */ background: url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; } +#mainContainer #rulerTop { background: url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; } -#rulerLeft { /* TODO: temporary background please replace when component is implemented */ background: url("../images/temp/ruler-left.png"); width: 16px; } +#rulerLeft { background: url("../images/temp/ruler-left.png"); width: 16px; } #stateBar { height: 20px; background-color: #282828; margin-bottom: 0px; } @@ -184,7 +132,6 @@ background: transparent; .resizeBar { -webkit-transition: all 0.15s linear; } -/* Splitters Collapsed */ .panelContainer, .panelContainer.collapsed { -webkit-transition: all 0.15s ease-in; } .panel.disableTransition { -webkit-transition: none !important; -webkit-box-flex: 0.1 !important; } @@ -203,18 +150,10 @@ background: transparent; .bottomSplitter.collapsed { -webkit-transform: rotate(0deg); } -/* - - -.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; -} +.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); } -*/ -/* -.baseBox { display:-webkit-box; display:-moz-box; display: box; -} +.baseBox { display: -webkit-box; display: -moz-box; display: box; } -/* Generic style to make any element unselectable */ .unselectable { -webkit-user-select: none; } .verticalBox { -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; } @@ -235,19 +174,17 @@ background: transparent; #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; } -/* Used for the Iframe Version -#mainStageIFrame { border: none; margin: 4px; -} -*/ +#mainStageIFrame { border: none; margin: 4px; } + #mainStageArea { -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; overflow: scroll; position: relative; margin: 0px; padding: 0px; border: none; } -#pasteBoard { /*position: relative;*/ top: 0px; left: 0px; margin: 0px; padding: 0px; border: none; /*overflow: scroll;*/ } +#pasteBoard { top: 0px; left: 0px; margin: 0px; padding: 0px; border: none; } #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; } #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; } -#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;*/ } +#stageParent { z-index: 2; opacity: 0.99; position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; } .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); } @@ -271,19 +208,13 @@ background: transparent; #mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: auto; } -/* 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 */ -/* layout for the container of all panels within a dock area */ -.panelContainer { margin: 0px; padding: 0px 0px; position: relative; /* -this is here to hopefully show vertical scroll bars when the panels exceed the height of the panel -unfortunately it doesn't seem to work properly. this is probably due to some of our box styling or positioning -overflow: auto; */ } +.panelContainer { margin: 0px; padding: 0px 0px; position: relative; overflow: auto; } -/* base layout style for all panels*/ .panelDisclosureIcon { background-image: url("../images/panels/panelDisclosureIcon.png"); background-repeat: no-repeat; width: 16px; height: 16px; float: left; -webkit-transition-property: rotate; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: linear; padding-right: 2px; } .panelBackground { color: white; background: #292929; } -.panelCollapseArrowFill { color: #4c4c4c; /* this is never really used but is set so we can get it via javascript to draw the control via script on the canvas */ padding: 0px 4px; } +.panelCollapseArrowFill { color: #4c4c4c; padding: 0px 4px; } .panelContentColor { background: #474747; border-color: black; } @@ -297,31 +228,26 @@ overflow: auto; */ } .panelCloseIcon:hover { opacity: 1.0; } -.toolsPanelContainer { margin-top: -2px; margin-left: -2px; padding-top: 20px; padding-left: 3px; padding-right: 3px; width: 32px; /*This is a hack to get the tools panel to extend all the way to the bottom.*/ padding-bottom: 450px; } +.toolsPanelContainer { margin-top: -2px; margin-left: -2px; padding-top: 20px; padding-left: 3px; padding-right: 3px; width: 32px; padding-bottom: 450px; } -/* sizes for the specific panels */ #toolPropertiesPanel { height: 32px; margin: 0px; } #timelinePanel { height: 116px; } -/* Only used by Animation Presets Panel currently */ .treeComponent { -webkit-user-select: none; font-size: 11px; margin-left: 20px; cursor: default; color: white; } .treeComponent ul { position: relative; list-style: none; } -/*This sets the style for a tree folder's icon*/ ul.treeComponent > img:first-child { margin-left: -35px; margin-right: 5px; -webkit-transition: -webkit-transform 0.1s linear; } .treeComponent li { position: relative; list-style: none; border-bottom: 1px solid #505050; } -.treeComponent li img { margin-left: -20px; padding-right: 10px; vertical-align: middle; /*border-bottom:1px solid #555555;*/ } +.treeComponent li img { margin-left: -20px; padding-right: 10px; vertical-align: middle; } .treeCategory { font-weight: bold; } .treeItem { font-weight: normal; vertical-align: middle; color: white; } -/* ====== Used by Properties Panel ====== */ -/* Removed the outline text input style -> Causing problems with the Canvas */ .propertiesPanel { min-height: 300px; margin-top: 4px; } .panelHRule { border: none; display: block; float: left; clear: both; width: 100%; height: 3px; background-color: #505050; } @@ -332,7 +258,6 @@ ul.treeComponent > img:first-child { margin-left: -35px; margin-right: 5px; -web .piCollapsibleSectionHeader { font-size: 12px; padding-left: 10px; vertical-align: top; height: 16px; background-color: #3a3a3a; } -/* ====== Indexed table row and column classes for Properties Panel layout ====== */ .propRow1 { width: 100%; } .propRow1Col1 { width: 30%; text-align: right; } @@ -393,7 +318,6 @@ ul.treeComponent > img:first-child { margin-left: -35px; margin-right: 5px; -web .splitterBackground { background: black; } -/* Begin: Project Panel UI classes */ .Project-Panel { height: 100%; } #pp-container { height: 100%; background-color: #292929; border: 0px; overflow-y: hidden !IMPORTANT; position: relative; } @@ -404,23 +328,16 @@ ul.treeComponent > img:first-child { margin-left: -35px; margin-right: 5px; -web #pp-col-files { display: block; position: absolute; height: auto; overflow: hidden; bottom: 0; top: 0; left: 0; right: 0; border: 2px solid black; border-bottom-width: 0px; background-color: #474747; margin-left: 30px; margin-right: 10px; margin-bottom: 36px; } -/* -#pp-container-list, -#pp-container-assets { height: 310px; width: 100%; overflow: auto; -} -*/ +#pp-container-list, #pp-container-assets { height: 310px; width: 100%; overflow: auto; } + .pp-scroll-main { display: block; position: absolute; height: auto; bottom: 0; top: 0; left: 0; right: 0; margin-top: 18px; overflow: auto; } .pp-scroll-main .pp-scroll-linked { display: block; position: absolute; height: auto; bottom: 0; top: 0; left: 0; right: 0; overflow: visible; } #pp-view-assets { display: none; } -/* -#pp-container-assets .pp-scroll-linked, -#pp-container-list .pp-scroll-linked { - width: 420px; -} -*/ +#pp-container-assets .pp-scroll-linked, #pp-container-list .pp-scroll-linked { width: 420px; } + .pp-header-container { position: relative; overflow: hidden; border-bottom: 1px solid black; background-color: #3a3a3a; min-width: 390px; } .pp-header { border-right: 1px solid black; color: white; padding-top: 4px; padding-left: 6px; font-weight: bold; display: block; float: left; overflow: visible; position: relative; } @@ -473,10 +390,7 @@ span.pp-span-all:focus { -webkit-box-shadow: none; background-color: #b4b4b4; bo .pp-sort-arrow { display: none; } -.pp-sort .pp-sort-arrow { display: block; width: 9px; height: 5px; /* -margin-right: 10px; -margin-top: 2px; -*/ background-image: url("../images/panels/project-panel/icon-sort-arrow.png"); background-repeat: no-repeat; position: absolute; top: 5px; right: 10px; } +.pp-sort .pp-sort-arrow { display: block; width: 9px; height: 5px; margin-right: 10px; margin-top: 2px; background-image: url("../images/panels/project-panel/icon-sort-arrow.png"); background-repeat: no-repeat; position: absolute; top: 5px; right: 10px; } .pp-sort.sort-ascending .pp-sort-arrow { background-position: 0 0; } @@ -490,7 +404,6 @@ margin-top: 2px; #pp-view-assets #pp-container-assets :focus, #pp-view-assets #pp-container-assets .focused { background-color: #b4b4b4; border-color: #b4b4b4; color: #474747; } -/* Icons! */ #pp-container-list li, #pp-container-list span.span-space { background-repeat: no-repeat; } #pp-container-list li.directory.open > span.pp-span-all > span.pp-col-files > span.span-space { background-image: url("../images/panels/project-panel/icon-file-folderopen.png"); background-position: 100% 0px; } @@ -531,7 +444,6 @@ margin-top: 2px; #pp-container-list span.span-space { display: block; float: left; margin-right: 5px; height: 15px; } -/* Buttons */ .pp-button, #pp-col-buttons .pp-button div { margin: 0px; padding: 0px; width: 26px; height: 25px; background-repeat: no-repeat; overflow: hidden; } .pp-button { margin-top: 5px; cursor: pointer; position: relative; left: 2px; } @@ -576,7 +488,6 @@ div.pp-button.button-divider div { height: 1px; width: 24px; background-color: b .pp-button.button-undefined { display: none; } -/* Hide and Show different types of assets */ .pp-type-script, .pp-type-video, .pp-type-audio, .pp-type-image, .pp-type-flash, .pp-type-other { display: none; } .pp-show-all .pp-asset-col div { display: block; } @@ -591,12 +502,10 @@ div.pp-button.button-divider div { height: 1px; width: 24px; background-color: b .pp-show-flash .pp-type-flash { display: block; } -/* New file flyout */ .pp-popup { position: absolute; top: -53px; left: -40px; width: 80px; height: 50px; overflow: hidden; border-radius: 5px; background-color: #292929; border: 2px solid #333333; z-index: 100; display: none; } .pp-popup p { color: white; margin: 0px; padding: 0px; } -/* Search subwidget */ #pp-search { position: absolute; display: block; height: 24px; border: 2px solid black; background-color: #474747; margin-left: 30px; margin-right: 10px; left: 0px; bottom: 10px; right: 0px; } #pp-search label { position: absolute; top: 7px; left: 12px; width: 20px; height: 20px; background-image: url("../images/panels/project-panel/icon-button-search.png"); background-repeat: no-repeat; z-index: 10; } @@ -611,21 +520,14 @@ div.pp-button.button-divider div { height: 1px; width: 24px; background-color: b #pp-view-assets #pp-container-assets .pp-filter-hidden { display: none; } -/* Inline editor styling */ #pp-container-assets input.inline-editor { height: 11px; width: 80%; background-color: #242424 !important; color: #b2b2b2 !important; top: -2px; border-width: 0px; font-size: 11px; } -/* End: Tree component for Project Panel */ .subToolHolderPanel { margin-left: 42px; } .subToolPanel { margin-top: -6px; } -/*.marginposition{*/ -/*margin-top:-26px*/ -/*}*/ -/* Begin: Properties Panel styles */ .properties_panel { overflow-x: hidden; color: white; } -/* Begin: styling the form elements */ .properties_panel select { -webkit-appearance: none; font-size: 9px; color: white; background-color: #444444; border: 1px solid #313131; width: 120px; height: 15px; outline: none; background-image: url("../images/dropdown-bg.png"); background-repeat: no-repeat; background-position: right center; } .properties_panel select:focus { outline: none; border: 1px solid #313131; } @@ -638,20 +540,16 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba .properties_panel .hottextunit input { width: 40px; height: 12px; font-size: 10px; -webkit-appearance: none; border-color: #313131; background-color: #444444; color: white; } -/* End: styling the form elements */ -/* main section styles */ .pp_sectionHeader { font-size: 12px; padding-left: 37px; height: 15px; background-color: #3e3e3e; background-image: url("../images/panels/panelDisclosureIcon.png"); background-repeat: no-repeat; background-position: 11px 0px; margin-bottom: 8px; } .pp_section { width: 227px; margin-top: 5px; } -/* control groups */ .pp_group { width: 100%; clear: both; margin-left: 5px; } .pp_propset { float: left; width: auto; height: 20px; } .pp_lock { position: absolute; top: -2px; left: 25px; } -/* controls */ .pp_proplabel { float: left; width: auto; } .pp_proplabel_sm { float: left; width: auto; } @@ -664,7 +562,6 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba .properties_panel label { display: block; float: left; line-height: 12px; height: 16px; } -/* Style overrides/extensions for tabular layout classes within panels */ .panel .layout-cell { vertical-align: top; text-align: left; } #props_defaultids label, .panel .layout-table .layout-cell:first-child, .panel .layout-table.table-2col .layout-cell:first-child { width: 70px; text-align: right; margin-right: 7px; } @@ -675,7 +572,6 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba .panel .layout-table.table-2col-wide .layout-cell { width: 50%; } -/* Slider properties */ .slider_props .layout-table.table-2col-wide .layout-cell:first-child, .button_props .layout-table.table-2col-wide .layout-cell:first-child, .hottext_props .layout-table.table-2col-wide .layout-cell:first-child, .imagecont_props .layout-table.table-2col-wide .layout-cell:first-child, .toggle_props .layout-table.table-2col-wide .layout-cell:first-child, .image_props .layout-table.table-2col-wide .layout-cell:first-child { width: 100%; } .image_props .layout-table.table-2col-wide .layout-cell:first-child { width: 200%; } @@ -698,16 +594,12 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba .properties_panel .layout-table { position: relative; margin-bottom: 10px; } -/* Begin: Styles for DivPIProperties */ .pp_colorpicker { width: 35px; height: 20px; overflow: hidden; text-indent: -9999px; padding: 0px 0px 0px 0px; display: block; float: left; cursor: pointer; background-color: #333; border: solid 1px #000; } .pp_strokelabel { border: none; margin: -1px 8px 0px 27px; } .pp_filllabel { border-width: none; margin: -1px 8px 0px 34px; } -/* End Styles for DivPIProperties */ -/* End: Properties Panel styles */ -/* New Panel Layout Stuff */ .panels { display: -webkit-box; position: absolute; -webkit-box-orient: vertical; -webkit-box-align: stretch; height: 100%; width: 100%; } .panel .resizeBar { height: 4px; cursor: row-resize; } @@ -754,7 +646,6 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba .over { border-top: 1px solid #0000FF; } -/* MenuUI.scss Styles governing the main dropdown menu. Note that colors and font definitions go in _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss */ .menuBar { width: 100%; border-style: solid; border-width: 1px; height: 22px; color: white; background: #474747; border-color: black; } .menuBar ul { list-style: none; margin: 0; padding: 0; float: left; cursor: default; } @@ -767,9 +658,7 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba .menuBar li:active { background: #b57a0a; } -/*Styles for positioning and display -Supports fly-out of sub-menus two levels deep only */ -.menuBar ul ul { position: absolute; z-index: 500; } +Supports fly-out of sub-menus two levels deep only .menuBar ul ul { position: absolute; z-index: 500; } .menuBar ul ul ul { position: absolute; top: 0; left: 100%; } @@ -777,19 +666,17 @@ nav.menuBar ul ul, nav.menuBar ul li:hover ul ul, nav.menuBar ul ul li:hover ul nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul li:hover ul { display: block; } -/* Tools.scss For individual tool styles in the toolbar, see toolbar.scss. Note that colors and font definitions go in _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss */ -/*Made changes to toolButton */ .toolButton { width: 26px; height: 23px; padding: 0px; margin: 1px; border-width: 1px; border-style: solid; } .subToolButton { float: left; } -.subOption { float: left; /*margin:10px;*/ margin-top: 5px; margin-left: 10px; margin-right: 10px; } +.subOption { float: left; margin-top: 5px; margin-left: 10px; margin-right: 10px; } .toolButton:active { border-top-width: 1px; border-top-style: solid; border-left-width: 1px; border-left-style: solid; } .toolButtonSelected { border-top-width: 1px; border-top-style: solid; border-left-width: 1px; border-left-style: solid; } -.toolSeparator { height: 1px; width: 30px; /*margin-left: 3px;*/ /*margin-right: 3px;*/ } +.toolSeparator { height: 1px; width: 30px; } .toolSeparatorTop { margin-top: 3px; margin-bottom: 0px; } @@ -803,14 +690,13 @@ nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul .drawingMode { outline: blue solid thin; } -/* Added new styling Sub Tool Shape Options*/ -.textBox { padding-top: 3px; min-width: 10em; /*height:14px;*/ margin-left: 5px; position: relative; margin-top: 0px; } +.textBox { padding-top: 3px; min-width: 10em; margin-left: 5px; position: relative; margin-top: 0px; } -.selectBox { width: 10em; opacity: 0.9; margin-left: 10px; float: left; display: block; background-color: #666666; /*-webkit-border-radius: 0;*/ border: 1px solid black; color: white; outline: none; } +.selectBox { width: 10em; opacity: 0.9; margin-left: 10px; float: left; display: block; background-color: #666666; border: 1px solid black; color: white; outline: none; } .selectBox:hover, .selectBox:active { background-color: #dddddd; opacity: 1; color: black; } -.label { padding-top: 3px; margin-left: 10px; font-size: 12px; /*display:inline;*/ /*line-height:10px;*/ float: left; margin-right: 5px; } +.label { padding-top: 3px; margin-left: 10px; font-size: 12px; float: left; margin-right: 5px; } .subToolPropertiespanel { margin-left: 43px; } @@ -830,25 +716,23 @@ nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul .cornerRadius.bottomRight { margin-top: 3px; -webkit-transform: rotate(180deg); margin-right: -2px; } -#toolOptionsContainer { display: inline; float: left; /*margin-left: 20px;*/ } +#toolOptionsContainer { display: inline; float: left; } .leftLabel { margin-top: 3px; float: left; } -/* Skin Radio Buttons */ input[type="radio"] { -webkit-appearance: none; background: black; width: 28px; height: 24px; vertical-align: middle; border-width: 1px; border-style: solid; border-color: #282828; font-size: 10px; color: #c8c8c8; margin: 4px; } input[type="radio"]:hover { border-width: 1px; border-style: solid; } input[type="radio"]:checked { background: #282828; border-width: 1px; border-style: solid; } -/*disabled settings for checkbox and radiobutton*/ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1px; border-style: solid; } .toolPropertiesContainer { float: left; margin-left: 10%; width: 100%; } .optionButtons { padding: 2px; margin: 1px 4px; float: left; } -.checkBoxLabel { /*margin-top:0.5em;*/ /*margin-left:-5em;*/ padding-top: 3px; font-size: 12px; float: left; margin-right: 5px; } +.checkBoxLabel { padding-top: 3px; font-size: 12px; float: left; margin-right: 5px; } .customTextBox { float: right; margin-left: 2em; margin-right: 4em; margin-top: 3px; height: 15px; } @@ -856,7 +740,7 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1 .toolButtonColor:active { background: #b2b2b2; } -.toolButtonSelectedColor { border-top-color: #595959; border-left-color: #595959; /* background: $color-tool-bg-active;*/ } +.toolButtonSelectedColor { border-top-color: #595959; border-left-color: #595959; } .toolSeparatorTopColor { background: #232323; } @@ -874,7 +758,6 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; bor