diff --git a/client/naturalCrit/encounter/encounter.jsx b/client/naturalCrit/encounter/encounter.jsx new file mode 100644 index 0000000..479bda8 --- /dev/null +++ b/client/naturalCrit/encounter/encounter.jsx @@ -0,0 +1,106 @@ +var React = require('react'); +var _ = require('lodash'); +var cx = require('classnames'); + +var MonsterCard = require('./monsterCard/monsterCard.jsx'); + +var attrMod = function(attr){ + return Math.floor(attr/2) - 5; +} + +var Encounter = React.createClass({ + + getDefaultProps: function() { + return { + name : '', + desc : '', + reward : '', + enemies : [], + index : {}, + + + monsterManual : {} + }; + }, + + getInitialState: function() { + return { + enemies: this.createEnemies(this.props) + }; + }, + + componentWillReceiveProps: function(nextProps) { + this.setState({ + enemies : this.createEnemies(nextProps) + }) + }, + + createEnemies : function(props){ + var self = this; + return _.indexBy(_.map(props.enemies, function(type, index){ + return self.createEnemy(props, type, index) + }), 'id') + }, + + createEnemy : function(props, type, index){ + var stats = props.index[type] || props.monsterManual[type]; + return _.extend({ + id : type + index, + name : type, + currentHP : stats.hp, + initiative : _.random(1,20) + attrMod(stats.attr.dex) + }, stats); + }, + + + updateHP : function(enemyId, newHP){ + this.state.enemies[enemyId].currentHP = newHP; + this.setState({ + enemies : this.state.enemies + }); + }, + removeEnemy : function(enemyId){ + delete this.state.enemies[enemyId]; + this.setState({ + enemies : this.state.enemies + }); + }, + + + renderEnemies : function(){ + var self = this; + + var sortedEnemies = _.sortBy(this.state.enemies, function(e){ + return -e.initiative; + }); + + return _.map(sortedEnemies, function(enemy){ + return + }) + }, + + render : function(){ + var self = this; + + + return( +
+ +
+ {this.props.name} +
+ + +
+ {this.renderEnemies()} +
+
+ ); + } +}); + +module.exports = Encounter; diff --git a/client/naturalCrit/encounter/encounter.less b/client/naturalCrit/encounter/encounter.less new file mode 100644 index 0000000..7cbd2ba --- /dev/null +++ b/client/naturalCrit/encounter/encounter.less @@ -0,0 +1,3 @@ +.encounter{ + +} \ No newline at end of file diff --git a/client/naturalCrit/monsterCard/attackSlot/attackSlot.jsx b/client/naturalCrit/encounter/monsterCard/attackSlot/attackSlot.jsx similarity index 98% rename from client/naturalCrit/monsterCard/attackSlot/attackSlot.jsx rename to client/naturalCrit/encounter/monsterCard/attackSlot/attackSlot.jsx index 7b638dc..c22d3e3 100644 --- a/client/naturalCrit/monsterCard/attackSlot/attackSlot.jsx +++ b/client/naturalCrit/encounter/monsterCard/attackSlot/attackSlot.jsx @@ -68,7 +68,7 @@ var AttackSlot = React.createClass({ renderNotes : function(){ var notes = _.omit(this.props, ['name', 'atk', 'dmg', 'uses', 'heal']); return _.map(notes, function(text, key){ - return
{key + ': ' + text}
+ return
{key + ': ' + text}
}); }, diff --git a/client/naturalCrit/monsterCard/attackSlot/attackSlot.less b/client/naturalCrit/encounter/monsterCard/attackSlot/attackSlot.less similarity index 100% rename from client/naturalCrit/monsterCard/attackSlot/attackSlot.less rename to client/naturalCrit/encounter/monsterCard/attackSlot/attackSlot.less diff --git a/client/naturalCrit/monsterCard/monsterCard.jsx b/client/naturalCrit/encounter/monsterCard/monsterCard.jsx similarity index 100% rename from client/naturalCrit/monsterCard/monsterCard.jsx rename to client/naturalCrit/encounter/monsterCard/monsterCard.jsx diff --git a/client/naturalCrit/monsterCard/monsterCard.less b/client/naturalCrit/encounter/monsterCard/monsterCard.less similarity index 100% rename from client/naturalCrit/monsterCard/monsterCard.less rename to client/naturalCrit/encounter/monsterCard/monsterCard.less diff --git a/client/naturalCrit/naturalCrit.jsx b/client/naturalCrit/naturalCrit.jsx index 98f9b55..30fac0a 100644 --- a/client/naturalCrit/naturalCrit.jsx +++ b/client/naturalCrit/naturalCrit.jsx @@ -2,16 +2,50 @@ var React = require('react'); var _ = require('lodash'); var cx = require('classnames'); -var MonsterCard = require('./monsterCard/monsterCard.jsx'); + +var Sidebar = require('./sidebar/sidebar.jsx'); + +var Encounter = require('./encounter/encounter.jsx'); -var encounter = { +var encounters = [ + { + name : 'The Big Bad', + desc : 'The big fight!', + reward : 'gems', + enemies : ['goblin', 'goblin'], + reserve : ['goblin'], + }, + { + name : 'Demon Goats', + desc : 'Gross fight', + reward : 'curved horn, goat sac', + enemies : ['demon_goat', 'demon_goat', 'demon_goat'], + index : { + demon_goat : { + "hp" : 140, + "ac" : 16, + "attr" : { + "str" : 8, + "con" : 8, + "dex" : 8, + "int" : 8, + "wis" : 8, + "cha" : 8 + }, + "attacks" : { + "charge" : { + "atk" : "1d20+5", + "dmg" : "1d8+5", + "type" : "bludge" + } + }, + "abilities" : ["charge"], + } + } + }, - name : 'The Big Bad', - enemies : ['goblin', 'goblin'], - reserve : ['goblin'], - -} +]; var MonsterManual = { 'goblin' : { @@ -65,9 +99,12 @@ var NaturalCrit = React.createClass({ var self = this; return { - enemies: _.indexBy(_.map(encounter.enemies, function(type, index){ - return self.createEnemy(type, index) - }), 'id') + + selectedEncounterIndex : 0, + + encounters : encounters, + monsterManual : MonsterManual, + }; }, @@ -103,53 +140,62 @@ var NaturalCrit = React.createClass({ }, - updateHP : function(enemyId, newHP){ - this.state.enemies[enemyId].currentHP = newHP; + + handleJSONChange : function(encounterIndex, json){ + + this.state.encounters[encounterIndex] = json; this.setState({ - enemies : this.state.enemies - }); + encounters : this.state.encounters + }) + }, - removeEnemy : function(enemyId){ - delete this.state.enemies[enemyId]; + + handleEncounterChange : function(encounterIndex){ this.setState({ - enemies : this.state.enemies + selectedEncounterIndex : encounterIndex }); }, + renderSelectedEncounter : function(){ + var self = this; + var selectedEncounter = _.find(this.state.encounters, function(encounter){ + return encounter.name == self.state.selectedEncounter; + }); + if(this.state.selectedEncounterIndex != null){ + var selectedEncounter = this.state.encounters[this.state.selectedEncounterIndex] + return + } + + return null; + }, render : function(){ var self = this; - console.log(); - - var sortedEnemies = _.sortBy(this.state.enemies, function(e){ - return -e.initiative; - }); - - - var cards = _.map(sortedEnemies, function(enemy){ - return - }) - - + console.log(this.state.encounters); return(
- - Project Ready! + - {cards} +
+ {this.renderSelectedEncounter()} +
- 
-				{JSON.stringify(MonsterManual, null, '  ')}
); } diff --git a/client/naturalCrit/naturalCrit.less b/client/naturalCrit/naturalCrit.less index 40a6b2f..a2aa886 100644 --- a/client/naturalCrit/naturalCrit.less +++ b/client/naturalCrit/naturalCrit.less @@ -16,4 +16,9 @@ body{ .naturalCrit{ color : #333; background-color: #eee; + + .encounterContainer{ + display: inline-block; + vertical-align: top; + } } \ No newline at end of file diff --git a/client/naturalCrit/sidebar/CODE Bold.otf b/client/naturalCrit/sidebar/CODE Bold.otf new file mode 100644 index 0000000..50dd77d Binary files /dev/null and b/client/naturalCrit/sidebar/CODE Bold.otf differ diff --git a/client/naturalCrit/sidebar/CODE Light.otf b/client/naturalCrit/sidebar/CODE Light.otf new file mode 100644 index 0000000..1ff9d87 Binary files /dev/null and b/client/naturalCrit/sidebar/CODE Light.otf differ diff --git a/client/naturalCrit/sidebar/sidebar.jsx b/client/naturalCrit/sidebar/sidebar.jsx new file mode 100644 index 0000000..833fef9 --- /dev/null +++ b/client/naturalCrit/sidebar/sidebar.jsx @@ -0,0 +1,108 @@ +var React = require('react'); +var _ = require('lodash'); +var cx = require('classnames'); + +var JSONFileEditor = require('naturalCrit/jsonFileEditor/jsonFileEditor.jsx'); + +var Sidebar = React.createClass({ + + getDefaultProps: function() { + return { + selectedEncounter : null, + + monsterManual : {}, + encounters : [], + + onSelectEncounter : function(){}, + + onJSONChange : function(encounterIndex, json){}, + }; + }, + + getInitialState: function() { + return { + hide : false + }; + }, + + handleLogoClick : function(){ + this.setState({ + hide : !this.state.hide + }) + }, + + handleJSONChange : function(encounterIndex, json){ + + + this.props.onJSONChange(encounterIndex, json); + + + }, + + handleSelectEncounter : function(encounterIndex){ + console.log(encounterIndex); + this.props.onSelectEncounter(encounterIndex); + }, + + renderEncounters : function(){ + var self = this; + + return _.map(this.props.encounters, function(encounter, index){ + console.log(self.props.selectedEncounter, index); + + var isSelected = self.props.selectedEncounter == index; + return
+ + + + + +
+ }) + }, + + render : function(){ + var self = this; + return( +
+
+ + + NaturalCrit + +
+
+ +
+ + +
+
+

encounters

+ {this.renderEncounters()} +
+
+ +
+
+ +
+ + + +
+ + +
+ ); + } +}); + +module.exports = Sidebar; diff --git a/client/naturalCrit/sidebar/sidebar.less b/client/naturalCrit/sidebar/sidebar.less new file mode 100644 index 0000000..c115cd8 --- /dev/null +++ b/client/naturalCrit/sidebar/sidebar.less @@ -0,0 +1,69 @@ + +@font-face { + font-family : CodeLight; + src : url('/assets/naturalCrit/sidebar/CODE Light.otf'); +} +@font-face { + font-family : CodeBold; + src : url('/assets/naturalCrit/sidebar/CODE Bold.otf'); +} +.sidebar{ + .animateAll(); + display : inline-block; + vertical-align : top; + box-sizing : border-box; + height : 100%; + width : 300px; + + &.hide{ + height : 50px; + width : 50px; + .logo .name{ + left : -200px; + } + .contents{ + opacity : 0; + } + } + .logo{ + padding : 10px 10px; + background-color : @steel; + font-family : 'CodeLight', sans-serif; + font-size : 1.8em; + color : white; + svg{ + vertical-align : middle; + height : 1em; + margin-right : 0.2em; + cursor : pointer; + fill : white; + } + span.name{ + .animateAll(); + position : absolute; + top : 13px; + left : 50px; + span.crit{ + font-family : 'CodeBold'; + } + } + } + + .contents{ + .animate(opacity); + width : 100%; + &>*{ + width : 100%; + } + + .encounterContainer{ + .encounter{ + &.selected{ + background-color : @green; + } + } + } + + + } +} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 1e5864d..7af1c6f 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -13,7 +13,7 @@ var gulp = vitreumTasks(gulp, { projectModules: ["./shared/naturalCrit"], additionalRequirePaths : ['./shared'], - assetExts: ["*.svg", "*.png", "*.jpg", "*.pdf", "*.eot", "*.ttf", "*.woff", "*.woff2", "*.ico"], + assetExts: ["*.svg", "*.png", "*.jpg", "*.pdf", "*.eot", "*.otf", "*.woff", "*.woff2", "*.ico"], serverWatchPaths: ["server"], serverScript: "server.js", @@ -22,7 +22,7 @@ var gulp = vitreumTasks(gulp, { "react-dom", "lodash", "classnames", - + "jsoneditor" ], clientLibs: [], }); diff --git a/package.json b/package.json index 181abd4..be73d9a 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "classnames": "^2.2.0", "express": "^4.13.3", "gulp": "^3.9.0", + "jsoneditor": "^4.2.1", "lodash": "^3.10.1", "react": "^0.14.2", "react-dom": "^0.14.2", diff --git a/shared/naturalCrit/jsonFileEditor/img/jsoneditor-icons.png b/shared/naturalCrit/jsonFileEditor/img/jsoneditor-icons.png new file mode 100644 index 0000000..7120088 Binary files /dev/null and b/shared/naturalCrit/jsonFileEditor/img/jsoneditor-icons.png differ diff --git a/shared/naturalCrit/jsonFileEditor/jsonFileEditor.jsx b/shared/naturalCrit/jsonFileEditor/jsonFileEditor.jsx new file mode 100644 index 0000000..144d196 --- /dev/null +++ b/shared/naturalCrit/jsonFileEditor/jsonFileEditor.jsx @@ -0,0 +1,103 @@ +var React = require('react'); +var _ = require('lodash'); +var cx = require('classnames'); + + +var JSONEditor = require('jsoneditor'); + +//var editor = new JSONEditor(container); + +var json = { + test : 6, + arr : [true, 1,2,3,4], + yo : { + yeah : true + } +} + + +var JsonFileEditor = React.createClass({ + getDefaultProps: function() { + return { + name : "yo", + + json : json, + + onJSONChange : function(){} + }; + }, + + getInitialState: function() { + return { + showEditor: false + }; + }, + + componentWillReceiveProps: function(nextProps) { + //this.editor.set(nextProps.json); + }, + + componentDidMount: function() { + this.editor = new JSONEditor(this.refs.editor, { + change : this.handleJSONChange, + search : false + }, this.props.json) + }, + + + + + handleJSONChange : function(){ + + this.props.onJSONChange(this.editor.get()); + + //try to store in local storage? + + }, + + handleShowEditorClick : function(){ + this.setState({ + showEditor : !this.state.showEditor + }) + }, + + handleDownload : function(){ + + }, + handleRemove : function(){ + + }, + + + renderEditor : function(){ + return
+ }, + + + render : function(){ + var self = this; + return( +
+ + {this.props.name} + + +
+ + + + +
+ + +
+ + + {this.renderEditor()} + +
+ ); + } +}); + +module.exports = JsonFileEditor; diff --git a/shared/naturalCrit/jsonFileEditor/jsonFileEditor.less b/shared/naturalCrit/jsonFileEditor/jsonFileEditor.less new file mode 100644 index 0000000..7c06cf6 --- /dev/null +++ b/shared/naturalCrit/jsonFileEditor/jsonFileEditor.less @@ -0,0 +1,30 @@ + +@import (less) "./jsoneditor.css"; +.jsonFileEditor{ + position : relative; + width : 100%; + &.showEditor{ + .jsonEditor{ + display : initial; + } + } + + .jsonEditor{ + position : absolute; + display : none; + top : 100%; + left : 0px; + z-index : 1000; + background-color : white; + } + .name{ + display : inline-block; + font-size : 0.8em; + font-weight : 800; + } + .controls{ + position : absolute; + top : 0px; + right : 0px; + } +} \ No newline at end of file diff --git a/shared/naturalCrit/jsonFileEditor/jsoneditor.css b/shared/naturalCrit/jsonFileEditor/jsoneditor.css new file mode 100644 index 0000000..c355013 --- /dev/null +++ b/shared/naturalCrit/jsonFileEditor/jsoneditor.css @@ -0,0 +1,625 @@ +.jsoneditor .field, +.jsoneditor .value, +.jsoneditor .readonly { + border: 1px solid transparent; + min-height: 16px; + min-width: 32px; + padding: 2px; + margin: 1px; + word-wrap: break-word; + float: left; +} + +/* adjust margin of p elements inside editable divs, needed for Opera, IE */ + +.jsoneditor .field p, +.jsoneditor .value p { + margin: 0; +} + +.jsoneditor .value { + word-break: break-word; +} + +.jsoneditor .readonly { + min-width: 16px; + color: gray; +} + +.jsoneditor .empty { + border-color: lightgray; + border-style: dashed; + border-radius: 2px; +} + +.jsoneditor .field.empty { + background-image: url("/assets/naturalCrit/jsonFileEditor/img/jsoneditor-icons.png"); + background-position: 0 -144px; +} + +.jsoneditor .value.empty { + background-image: url("/assets/naturalCrit/jsonFileEditor/img/jsoneditor-icons.png"); + background-position: -48px -144px; +} + +.jsoneditor .value.url { + color: green; + text-decoration: underline; +} + +.jsoneditor a.value.url:hover, +.jsoneditor a.value.url:focus { + color: red; +} + +.jsoneditor .separator { + padding: 3px 0; + vertical-align: top; + color: gray; +} + +.jsoneditor .field[contenteditable=true]:focus, +.jsoneditor .field[contenteditable=true]:hover, +.jsoneditor .value[contenteditable=true]:focus, +.jsoneditor .value[contenteditable=true]:hover, +.jsoneditor .field.highlight, +.jsoneditor .value.highlight { + background-color: #FFFFAB; + border: 1px solid yellow; + border-radius: 2px; +} + +.jsoneditor .field.highlight-active, +.jsoneditor .field.highlight-active:focus, +.jsoneditor .field.highlight-active:hover, +.jsoneditor .value.highlight-active, +.jsoneditor .value.highlight-active:focus, +.jsoneditor .value.highlight-active:hover { + background-color: #ffee00; + border: 1px solid #ffc700; + border-radius: 2px; +} + +.jsoneditor div.tree button { + width: 24px; + height: 24px; + padding: 0; + margin: 0; + border: none; + cursor: pointer; + background: transparent url("/assets/naturalCrit/jsonFileEditor/img/jsoneditor-icons.png"); +} + +.jsoneditor div.tree button.collapsed { + background-position: 0 -48px; +} + +.jsoneditor div.tree button.expanded { + background-position: 0 -72px; +} + +.jsoneditor div.tree button.contextmenu { + background-position: -48px -72px; +} + +.jsoneditor div.tree button.contextmenu:hover, +.jsoneditor div.tree button.contextmenu:focus, +.jsoneditor div.tree button.contextmenu.selected { + background-position: -48px -48px; +} + +.jsoneditor div.tree *:focus { + outline: none; +} + +.jsoneditor div.tree button:focus { + /* TODO: nice outline for buttons with focus + outline: #97B0F8 solid 2px; + box-shadow: 0 0 8px #97B0F8; + */ + background-color: #f5f5f5; + outline: #e5e5e5 solid 1px; +} + +.jsoneditor div.tree button.invisible { + visibility: hidden; + background: none; +} + +.jsoneditor { + color: #1A1A1A; + border: 1px solid #97B0F8; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + height: 100%; + overflow: auto; + position: relative; + padding: 0; + line-height: 100%; +} + +.jsoneditor div.tree table.tree { + border-collapse: collapse; + border-spacing: 0; + width: 100%; + margin: 0; +} + +.jsoneditor div.outer { + width: 100%; + height: 100%; + margin: -35px 0 0 0; + padding: 35px 0 0 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + overflow: hidden; +} + +.jsoneditor div.tree { + width: 100%; + height: 100%; + position: relative; + overflow: auto; +} + +.jsoneditor textarea.text { + width: 100%; + height: 100%; + margin: 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border: none; + background-color: white; + resize: none; +} + +.jsoneditor tr.highlight { + background-color: #FFFFAB; +} + +.jsoneditor div.tree button.dragarea { + background: url("/assets/naturalCrit/jsonFileEditor/img/jsoneditor-icons.png") -72px -72px; + cursor: move; +} + +.jsoneditor div.tree button.dragarea:hover, +.jsoneditor div.tree button.dragarea:focus { + background-position: -72px -48px; +} + +.jsoneditor tr, +.jsoneditor th, +.jsoneditor td { + padding: 0; + margin: 0; +} + +.jsoneditor td { + vertical-align: top; +} + +.jsoneditor td.tree { + vertical-align: top; +} + +.jsoneditor .field, +.jsoneditor .value, +.jsoneditor td, +.jsoneditor th, +.jsoneditor textarea { + font-family: droid sans mono, consolas, monospace, courier new, courier, sans-serif; + font-size: 10pt; + color: #1A1A1A; +} +/* ContextMenu - main menu */ + +.jsoneditor-contextmenu { + position: absolute; + z-index: 99999; +} + +.jsoneditor-contextmenu ul { + position: relative; + left: 0; + top: 0; + width: 124px; + background: white; + border: 1px solid #d3d3d3; + box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3); + list-style: none; + margin: 0; + padding: 0; +} + +.jsoneditor-contextmenu ul li button { + padding: 0; + margin: 0; + width: 124px; + height: 24px; + border: none; + cursor: pointer; + color: #4d4d4d; + background: transparent; + line-height: 26px; + text-align: left; +} + +/* Fix button padding in firefox */ + +.jsoneditor-contextmenu ul li button::-moz-focus-inner { + padding: 0; + border: 0; +} + +.jsoneditor-contextmenu ul li button:hover, +.jsoneditor-contextmenu ul li button:focus { + color: #1a1a1a; + background-color: #f5f5f5; + outline: none; +} + +.jsoneditor-contextmenu ul li button.default { + width: 92px; +} + +.jsoneditor-contextmenu ul li button.expand { + float: right; + width: 32px; + height: 24px; + border-left: 1px solid #e5e5e5; +} + +.jsoneditor-contextmenu div.icon { + float: left; + width: 24px; + height: 24px; + border: none; + padding: 0; + margin: 0; + background-image: url("/assets/naturalCrit/jsonFileEditor/img/jsoneditor-icons.png"); +} + +.jsoneditor-contextmenu ul li button div.expand { + float: right; + width: 24px; + height: 24px; + padding: 0; + margin: 0 4px 0 0; + background: url("/assets/naturalCrit/jsonFileEditor/img/jsoneditor-icons.png") 0 -72px; + opacity: 0.4; +} + +.jsoneditor-contextmenu ul li button:hover div.expand, +.jsoneditor-contextmenu ul li button:focus div.expand, +.jsoneditor-contextmenu ul li.selected div.expand, +.jsoneditor-contextmenu ul li button.expand:hover div.expand, +.jsoneditor-contextmenu ul li button.expand:focus div.expand { + opacity: 1; +} + +.jsoneditor-contextmenu .separator { + height: 0; + border-top: 1px solid #e5e5e5; + padding-top: 5px; + margin-top: 5px; +} + +.jsoneditor-contextmenu button.remove > .icon { + background-position: -24px -24px; +} + +.jsoneditor-contextmenu button.remove:hover > .icon, +.jsoneditor-contextmenu button.remove:focus > .icon { + background-position: -24px 0; +} + +.jsoneditor-contextmenu button.append > .icon { + background-position: 0 -24px; +} + +.jsoneditor-contextmenu button.append:hover > .icon, +.jsoneditor-contextmenu button.append:focus > .icon { + background-position: 0 0; +} + +.jsoneditor-contextmenu button.insert > .icon { + background-position: 0 -24px; +} + +.jsoneditor-contextmenu button.insert:hover > .icon, +.jsoneditor-contextmenu button.insert:focus > .icon { + background-position: 0 0; +} + +.jsoneditor-contextmenu button.duplicate > .icon { + background-position: -48px -24px; +} + +.jsoneditor-contextmenu button.duplicate:hover > .icon, +.jsoneditor-contextmenu button.duplicate:focus > .icon { + background-position: -48px 0; +} + +.jsoneditor-contextmenu button.sort-asc > .icon { + background-position: -168px -24px; +} + +.jsoneditor-contextmenu button.sort-asc:hover > .icon, +.jsoneditor-contextmenu button.sort-asc:focus > .icon { + background-position: -168px 0; +} + +.jsoneditor-contextmenu button.sort-desc > .icon { + background-position: -192px -24px; +} + +.jsoneditor-contextmenu button.sort-desc:hover > .icon, +.jsoneditor-contextmenu button.sort-desc:focus > .icon { + background-position: -192px 0; +} + +/* ContextMenu - sub menu */ + +.jsoneditor-contextmenu ul li .selected { + background-color: #D5DDF6; +} + +.jsoneditor-contextmenu ul li { + overflow: hidden; +} + +.jsoneditor-contextmenu ul li ul { + display: none; + position: relative; + left: -10px; + top: 0; + border: none; + box-shadow: inset 0 0 10px rgba(128, 128, 128, 0.5); + padding: 0 10px; + /* TODO: transition is not supported on IE8-9 */ + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; +} + + + +.jsoneditor-contextmenu ul li ul li button { + padding-left: 24px; +} + +.jsoneditor-contextmenu ul li ul li button:hover, +.jsoneditor-contextmenu ul li ul li button:focus { + background-color: #f5f5f5; +} + +.jsoneditor-contextmenu button.type-string > .icon { + background-position: -144px -24px; +} + +.jsoneditor-contextmenu button.type-string:hover > .icon, +.jsoneditor-contextmenu button.type-string:focus > .icon, +.jsoneditor-contextmenu button.type-string.selected > .icon { + background-position: -144px 0; +} + +.jsoneditor-contextmenu button.type-auto > .icon { + background-position: -120px -24px; +} + +.jsoneditor-contextmenu button.type-auto:hover > .icon, +.jsoneditor-contextmenu button.type-auto:focus > .icon, +.jsoneditor-contextmenu button.type-auto.selected > .icon { + background-position: -120px 0; +} + +.jsoneditor-contextmenu button.type-object > .icon { + background-position: -72px -24px; +} + +.jsoneditor-contextmenu button.type-object:hover > .icon, +.jsoneditor-contextmenu button.type-object:focus > .icon, +.jsoneditor-contextmenu button.type-object.selected > .icon { + background-position: -72px 0; +} + +.jsoneditor-contextmenu button.type-array > .icon { + background-position: -96px -24px; +} + +.jsoneditor-contextmenu button.type-array:hover > .icon, +.jsoneditor-contextmenu button.type-array:focus > .icon, +.jsoneditor-contextmenu button.type-array.selected > .icon { + background-position: -96px 0; +} + +.jsoneditor-contextmenu button.type-modes > .icon { + background-image: none; + width: 6px; +} +.jsoneditor .menu { + width: 100%; + height: 35px; + padding: 2px; + margin: 0; + overflow: hidden; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #1A1A1A; + background-color: #D5DDF6; + border-bottom: 1px solid #97B0F8; +} + +.jsoneditor .menu button { + width: 26px; + height: 26px; + margin: 2px; + padding: 0; + border-radius: 2px; + border: 1px solid #aec0f8; + background: #e3eaf6 url("/assets/naturalCrit/jsonFileEditor/img/jsoneditor-icons.png"); + color: #4D4D4D; + opacity: 0.8; + font-family: arial, sans-serif; + font-size: 10pt; + float: left; +} + +.jsoneditor .menu button:hover { + background-color: #f0f2f5; +} + +.jsoneditor .menu button:focus, +.jsoneditor .menu button:active { + background-color: #ffffff; +} + +.jsoneditor .menu button:disabled { + background-color: #e3eaf6; +} + +.jsoneditor .menu button.collapse-all { + background-position: 0 -96px; +} + +.jsoneditor .menu button.expand-all { + background-position: 0 -120px; +} + +.jsoneditor .menu button.undo { + background-position: -24px -96px; +} + +.jsoneditor .menu button.undo:disabled { + background-position: -24px -120px; +} + +.jsoneditor .menu button.redo { + background-position: -48px -96px; +} + +.jsoneditor .menu button.redo:disabled { + background-position: -48px -120px; +} + +.jsoneditor .menu button.compact { + background-position: -72px -96px; +} + +.jsoneditor .menu button.format { + background-position: -72px -120px; +} + +.jsoneditor .menu button.modes { + background-image: none; + width: auto; + padding-left: 6px; + padding-right: 6px; +} + +.jsoneditor .menu button.separator { + margin-left: 10px; +} + +.jsoneditor .menu a { + font-family: arial, sans-serif; + font-size: 10pt; + color: #97B0F8; + vertical-align: middle; +} + +.jsoneditor .menu a:hover { + color: red; +} + +.jsoneditor .menu a.poweredBy { + font-size: 8pt; + position: absolute; + right: 0; + top: 0; + padding: 10px; +} + +/* TODO: css for button:disabled is not supported by IE8 */ +.jsoneditor .search input, +.jsoneditor .search .results { + font-family: arial, sans-serif; + font-size: 10pt; + color: #1A1A1A; + background: transparent; + /* For Firefox */ +} + +.jsoneditor .search { + position: absolute; + right: 2px; + top: 2px; +} + +.jsoneditor .search .frame { + border: 1px solid #97B0F8; + background-color: white; + padding: 0 2px; + margin: 0; +} + +.jsoneditor .search .frame table { + border-collapse: collapse; +} + +.jsoneditor .search input { + width: 120px; + border: none; + outline: none; + margin: 1px; +} + +.jsoneditor .search .results { + color: #4d4d4d; + padding-right: 5px; + line-height: 24px; +} + +.jsoneditor .search button { + width: 16px; + height: 24px; + padding: 0; + margin: 0; + border: none; + background: url("/assets/naturalCrit/jsonFileEditor/img/jsoneditor-icons.png"); + vertical-align: top; +} + +.jsoneditor .search button:hover { + background-color: transparent; +} + +.jsoneditor .search button.refresh { + width: 18px; + background-position: -99px -73px; +} + +.jsoneditor .search button.next { + cursor: pointer; + background-position: -124px -73px; +} + +.jsoneditor .search button.next:hover { + background-position: -124px -49px; +} + +.jsoneditor .search button.previous { + cursor: pointer; + background-position: -148px -73px; + margin-right: 2px; +} + +.jsoneditor .search button.previous:hover { + background-position: -148px -49px; +} \ No newline at end of file