diff options
author | Valerio Virgillito | 2012-05-16 15:40:06 -0700 |
---|---|---|
committer | Valerio Virgillito | 2012-05-16 15:40:06 -0700 |
commit | c37a876b373ddc7cb19277aaeaa6bb2d2d5a50ac (patch) | |
tree | 01be4d0fe4c96de8270411a32bb76378769d5b2d /css | |
parent | 27f4cacb39de1c2e3910748dadc9fc16d0655480 (diff) | |
parent | 26c4d00b3e5d39c1c313d48433abebd06f386a85 (diff) | |
download | ninja-c37a876b373ddc7cb19277aaeaa6bb2d2d5a50ac.tar.gz |
Merge pull request #239 from mayhewinator/WorkingBranch
Tool Options styling and Icon update
Diffstat (limited to 'css')
-rwxr-xr-x | css/ninja.css | 154 |
1 files changed, 54 insertions, 100 deletions
diff --git a/css/ninja.css b/css/ninja.css index cd7a35ab..682dfc9d 100755 --- a/css/ninja.css +++ b/css/ninja.css | |||
@@ -518,10 +518,6 @@ div.pp-button.button-divider div { height: 1px; width: 24px; background-color: b | |||
518 | 518 | ||
519 | #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; } | 519 | #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; } |
520 | 520 | ||
521 | .subToolHolderPanel { margin-left: 42px; } | ||
522 | |||
523 | .subToolPanel { margin-top: -6px; } | ||
524 | |||
525 | .properties_panel { overflow-x: hidden; color: white; } | 521 | .properties_panel { overflow-x: hidden; color: white; } |
526 | 522 | ||
527 | .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; } | 523 | .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; } |
@@ -669,25 +665,25 @@ nav.menuBar ul ul, nav.menuBar ul li:hover ul ul, nav.menuBar ul ul li:hover ul | |||
669 | 665 | ||
670 | nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul li:hover ul { display: block; } | 666 | nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul li:hover ul { display: block; } |
671 | 667 | ||
672 | .subToolHolderPanel .toolbutton { float: left; -webkit-transform: scale(0.6); } | 668 | .subToolHolderPanel { margin-left: 42px; padding: 6px; float: left; } |
673 | 669 | ||
674 | .subToolHolderPanel .toolbutton:hover, .subToolHolderPanel .toolbutton.active { -webkit-transform: scale(0.75); } | 670 | .subToolHolderPanel .toolbutton { float: left; -webkit-transform: scale(0.6); margin-top: -4px; } |
675 | 671 | ||
676 | .subOption { float: left; margin-top: 5px; margin-left: 10px; margin-right: 10px; } | 672 | .subToolHolderPanel .toolbutton:hover, .subToolHolderPanel .toolbutton.active { -webkit-transform: scale(0.75); } |
677 | 673 | ||
678 | .toolSeparator { height: 1px; width: 30px; } | 674 | .toolOptionsFloatChildren > * { float: left; } |
679 | 675 | ||
680 | .toolSeparatorTop { margin-top: 3px; margin-bottom: 0px; } | 676 | .toolOptionsSpacer { margin-right: 9px; } |
681 | 677 | ||
682 | .toolSeparatorMiddle { margin-top: 0px; margin-bottom: 0px; } | 678 | .toolColorChipCtrl { width: 18px; height: 18px; margin-top: 1px; margin-left: 3px; margin-right: 8px; border: 1px black solid; } |
683 | 679 | ||
684 | .toolSeparatorBottom { margin-top: 0px; margin-bottom: 3px; } | 680 | .toolColorChipIcon { width: 20px; height: 20px; margin-top: 1px; -webkit-transform: scale(0.8); background-color: #282828; } |
685 | 681 | ||
686 | .toolImageBase { padding: 0px; width: 26px; height: 23px; opacity: 0.7; background-repeat: no-repeat; } | 682 | .subToolHolderPanel input.toolOptsRadioButton { width: 24px; height: 24px; margin: 0px 5px 0px 0px; padding: 0px; cursor: pointer; border-radius: 3px; -webkit-user-select: none; border: 1px solid transparent; background: none; background-repeat: no-repeat; background-position: center center; -webkit-transform: scale(0.9); } |
687 | 683 | ||
688 | .toolImageBase:hover { opacity: 1.0; } | 684 | .subToolHolderPanel input.toolOptsRadioButton:hover { box-shadow: 0px 0px 2px 2px #999; -webkit-transform: scale(1); } |
689 | 685 | ||
690 | .drawingMode { outline: blue solid thin; } | 686 | .subToolHolderPanel input.toolOptsRadioButton:checked { box-shadow: inset 0px 0px 2px 2px #999; background-color: #363636; background-position: center center; background-repeat: no-repeat; -webkit-transform: scale(1); } |
691 | 687 | ||
692 | .textBox { padding-top: 3px; min-width: 10em; margin-left: 5px; position: relative; margin-top: 0px; } | 688 | .textBox { padding-top: 3px; min-width: 10em; margin-left: 5px; position: relative; margin-top: 0px; } |
693 | 689 | ||
@@ -703,13 +699,13 @@ nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul | |||
703 | 699 | ||
704 | .cornerRadius:hover, .cornerRadius:active { opacity: 1; } | 700 | .cornerRadius:hover, .cornerRadius:active { opacity: 1; } |
705 | 701 | ||
706 | .cornerRadius.topLeft { -webkit-transform: rotate(0deg); } | 702 | .cornerRadius.topLeft { -webkit-transform: rotate(0deg); margin-top: 1px; margin-right: 3px; } |
707 | 703 | ||
708 | .cornerRadius.topRight { -webkit-transform: rotate(90deg); margin-right: -2px; } | 704 | .cornerRadius.topRight { -webkit-transform: rotate(90deg); margin-right: 3px; margin-top: 1px; } |
709 | 705 | ||
710 | .cornerRadius.bottomLeft { margin-top: 3px; -webkit-transform: rotate(270deg); } | 706 | .cornerRadius.bottomLeft { -webkit-transform: rotate(270deg); margin-right: 2px; margin-top: -1px; } |
711 | 707 | ||
712 | .cornerRadius.bottomRight { margin-top: 3px; -webkit-transform: rotate(180deg); margin-right: -2px; } | 708 | .cornerRadius.bottomRight { -webkit-transform: rotate(180deg); margin-right: 4px; margin-top: -1px; } |
713 | 709 | ||
714 | #toolOptionsContainer { display: inline; float: left; } | 710 | #toolOptionsContainer { display: inline; float: left; } |
715 | 711 | ||
@@ -753,59 +749,71 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1 | |||
753 | 749 | ||
754 | .optionLabel { margin-top: 5px; } | 750 | .optionLabel { margin-top: 5px; } |
755 | 751 | ||
756 | #tagToolContainer input.tag-type, #rotateObjectToolContainer input.tag-type, #translateObjectToolContainer input.tag-type { background: none; width: 20px; height: 20px; display: block; float: left; margin: 0px; padding: 0px; margin-right: 5px; margin-top: 4px; background-repeat: no-repeat; opacity: 0.8; text-indent: -9999px; cursor: pointer; -webkit-border-radius: 3px; -webkit-user-select: none; border: 1px solid transparent; } | 752 | .tagRadioButtons input.divTool { background-image: url("../images/optionsbar/tag/div-tag.png"); } |
753 | |||
754 | .tagRadioButtons input.imageTool { background-image: url("../images/optionsbar/tag/img-tag.png"); } | ||
755 | |||
756 | .tagRadioButtons input.videoTool { background-image: url("../images/optionsbar/tag/vid-tag.png"); } | ||
757 | |||
758 | .tagRadioButtons input.canvasTool { background-image: url("../images/optionsbar/tag/canvas-tag.png"); } | ||
759 | |||
760 | .tagRadioButtons input.customTool { background-image: url("../images/optionsbar/tag/custom-tag.png"); } | ||
757 | 761 | ||
758 | #tagToolContainer input.tag-type { background-image: url("../images/tools/sprite-toolbar-tag.png"); } | 762 | .tagRadioButtons .nj-divider { height: 100%; float: left; position: relative; } |
759 | 763 | ||
760 | #rotateObjectToolContainer input.tag-type { background-image: url("../images/tools/sprite-toolbar-3d.png"); } | 764 | .tagRadioButtons select.nj-skinned { visibility: visible; position: relative; margin-top: 1px; } |
761 | 765 | ||
762 | #translateObjectToolContainer input.tag-type { background-image: url("../images/tools/sprite-toolbar-3d.png"); } | 766 | .tagRadioButtons select[disabled="true"].nj-skinned, .tagRadioButtons select[disabled].nj-skinned { visibility: hidden; } |
763 | 767 | ||
764 | #tagToolContainer input.tag-type:active, #rotateObjectToolContainer input.tag-type:active, #translateObjectToolContainer input.tag-type:active { border: 1px solid transparent; } | 768 | #zoomToolOptionHolder .zoomOutToolIcon { background-image: url("../images/optionsbar/zoom/zoom_minus.png"); } |
765 | 769 | ||
766 | #tagToolContainer input.tag-type:hover, #rotateObjectToolContainer input.tag-type:hover, #translateObjectToolContainer input.tag-type:hover { opacity: 1.0; -webkit-box-shadow: 0px 0px 4px #fff; } | 770 | #zoomToolOptionHolder .zoomInToolIcon { background-image: url("../images/optionsbar/zoom/zoom_plus.png"); } |
767 | 771 | ||
768 | #tagToolContainer input.tag-type:checked, #rotateObjectToolContainer input.tag-type:checked, #translateObjectToolContainer input.tag-type:checked { background-color: transparent; opacity: 1.0; cursor: default; -webkit-box-shadow: none; } | 772 | .object3DToolContainer input.rotateLocally { background-image: url("../images/optionsbar/options3D/rotate-locally.png"); } |
769 | 773 | ||
770 | #tagToolContainer input#divTool { background-position: -40px 0px; } | 774 | .object3DToolContainer input.rotateGlobally { background-image: url("../images/optionsbar/options3D/rotate-globally.png"); } |
771 | 775 | ||
772 | #tagToolContainer input#divTool:checked { background-position: -40px -20px; } | 776 | .optionsSelectionTool button { padding-top: 0px; } |
773 | 777 | ||
774 | #tagToolContainer input#imageTool { background-position: -60px 0px; } | 778 | .selectionToolIcon { width: 16px; height: 16px; background-repeat: no-repeat; background-position: 1px 2px; } |
775 | 779 | ||
776 | #tagToolContainer input#imageTool:checked { background-position: -60px -20px; } | 780 | .alignTopIcon { background-image: url("../images/optionsbar/selection/AlignTop.png"); } |
777 | 781 | ||
778 | #tagToolContainer input#videoTool { background-position: -100px 0px; } | 782 | .alignMiddleIcon { background-image: url("../images/optionsbar/selection/AlignMiddle.png"); } |
779 | 783 | ||
780 | #tagToolContainer input#videoTool:checked { background-position: -100px -20px; } | 784 | .alignBottomIcon { background-image: url("../images/optionsbar/selection/AlignBottom.png"); } |
781 | 785 | ||
782 | #tagToolContainer input#canvasTool, #rotateObjectToolContainer input#rotateLocally, #translateObjectToolContainer input#translateLocally { background-position: -20px 0px; } | 786 | .alignLeftIcon { background-image: url("../images/optionsbar/selection/AlignLeft.png"); } |
783 | 787 | ||
784 | #tagToolContainer input#canvasTool:checked, #rotateObjectToolContainer input#rotateLocally:checked, #translateObjectToolContainer input#translateLocally:checked { background-position: -20px -20px; } | 788 | .alignCenterIcon { background-image: url("../images/optionsbar/selection/AlignCenter.png"); } |
785 | 789 | ||
786 | #tagToolContainer input#flashTool { background-position: -80px 0px; } | 790 | .alignRightIcon { background-image: url("../images/optionsbar/selection/AlignRight.png"); } |
787 | 791 | ||
788 | #tagToolContainer input#flashTool:checked { background-position: -80px -20px; } | 792 | .arrangeBringForwardIcon { background-image: url("../images/optionsbar/selection/ArrangeBringForward.png"); } |
789 | 793 | ||
790 | #tagToolContainer input#customTool, #rotateObjectToolContainer input#rotateGlobally, #translateObjectToolContainer input#translateGlobally { background-position: 0px 0px; } | 794 | .arrangeSendBackwardIcon { background-image: url("../images/optionsbar/selection/ArrangeSendBackward.png"); } |
791 | 795 | ||
792 | #tagToolContainer input#customTool:checked, #rotateObjectToolContainer input#rotateGlobally:checked, #translateObjectToolContainer input#translateGlobally:checked { background-position: 0px -20px; } | 796 | .arrangeBringToFrontIcon { background-image: url("../images/optionsbar/selection/ArrangeBringToFront.png"); } |
793 | 797 | ||
794 | #tagToolContainer .nj-divider { height: 100%; float: left; position: relative; top: 5px; } | 798 | .arrangeSendToBackIcon { background-image: url("../images/optionsbar/selection/ArrangeSendToBack.png"); } |
795 | 799 | ||
796 | #tagToolContainer select.nj-skinned { visibility: visible; position: relative; } | 800 | .distTopIcon { background-image: url("../images/optionsbar/selection/DistTop.png"); } |
797 | 801 | ||
798 | #tagToolContainer select[disabled="true"].nj-skinned, #tagToolContainer select[disabled].nj-skinned { visibility: hidden; } | 802 | .distMiddleIcon { background-image: url("../images/optionsbar/selection/DistMiddle.png"); } |
799 | 803 | ||
800 | #zoomToolOptionHolder input#zoomInTool:checked { border-style: solid; border-width: 1px; border-color: white; background-image: url("../images/optionsbar/zoom/zoom_plus.png"); background-repeat: no-repeat; background-position: 4px 3px; } | 804 | .distBottomIcon { background-image: url("../images/optionsbar/selection/DistBottom.png"); } |
801 | 805 | ||
802 | #zoomToolOptionHolder input#zoomOutTool:checked { border-style: solid; border-width: 1px; border-color: white; background-image: url("../images/optionsbar/zoom/zoom_minus.png"); background-repeat: no-repeat; background-position: 4px 3px; } | 806 | .distLeftIcon { background-image: url("../images/optionsbar/selection/DistLeft.png"); } |
803 | 807 | ||
804 | #zoomToolOptionHolder input#zoomInTool { border-style: solid; border-width: 1px; background-image: url("../images/optionsbar/zoom/zoom_plus.png"); background-repeat: no-repeat; background-position: 4px 3px; } | 808 | .distCenterIcon { background-image: url("../images/optionsbar/selection/DistCenter.png"); } |
805 | 809 | ||
806 | #zoomToolOptionHolder input#zoomOutTool { border-style: solid; border-width: 1px; background-image: url("../images/optionsbar/zoom/zoom_minus.png"); background-repeat: no-repeat; background-position: 4px 3px; } | 810 | .distRightIcon { background-image: url("../images/optionsbar/selection/DistRight.png"); } |
807 | 811 | ||
808 | #zoomToolOptionHolder input.zoom-option { background: none; } | 812 | .optionsPenTool input.penToolIcon { background-image: url("../images/tools/Tool-Pen.png"); } |
813 | |||
814 | .optionsPenTool input.penPlusToolIcon { background-image: url("../images/optionsbar/pen/penPlus.png"); } | ||
815 |