diff --git a/lib/ice-coder.css b/lib/ice-coder.css index 590f5d7..6d91277 100644 --- a/lib/ice-coder.css +++ b/lib/ice-coder.css @@ -56,32 +56,30 @@ h2 {font-size: 18px; font-weight: normal; color: #fff} 100% {-webkit-transform:rotate(-360deg)} } -.header {position: absolute; display: inline-block; top: 0; left: 0; width: 100%; height: 40px; background-color: #fff; text-align: right; z-index: 2} -.header .tools {position: absolute; display: inline-block; left: 15px; top: 3px} -.header .plugins {position: absolute; display: inline-block; left: 55px; top: 3px} -.header .plugins img {position: relative; display: inline-block; margin-right: 15px} +.plugins {position: absolute; display: inline-block; width: 3px; height: 100%; top: 0; left: 0; background: transparent; overflow: hidden; z-index: 3; + transition: width 0.15s ease-in-out; + transition: background 0.15s ease-in-out; +} + +.header {position: absolute; display: inline-block; top: 0; left: 0; width: 100%; height: 20px; background-color: #fff; text-align: right; z-index: 1} .header .helpIcon {position: absolute; top: 5px; right: 90px; cursor: pointer} .header .settingsIcon {position: absolute; top: 5px; right: 70px; cursor: pointer} .header .screenModeIcon {position: absolute; top: 5px; right: 46px; cursor: pointer} -.header .version {position: relative; display: inline-block; margin-top: 25px; font-size: 10px; color: #bbb} -.header .version a {font-size: 10px; color: #bbb; text-decoration: none} +.header .logout {position: absolute; top: 5px; right: 105px; font-size: 10px; color: #bbb} +.header .logout a {font-size: 10px; color: #bbb; text-decoration: none} .header .logo {position: relative; margin: 5px 10px 0 5px; cursor: pointer} -.files {position: absolute; display: inline-block; top: 0; left: 0; height: 100%; width: 250px; background-color: #444; background-image: url('../images/files-arrow.png'); background-repeat: no-repeat; background-position: 100% 50%; overflow: hidden; z-index: 1; - box-shadow: 0 50px 10px 4px rgba(0,0,0,0.4); -} -.files .account {display: inline-block; height: 50px; width: 250px; margin-top: 40px; background-color: #888} +.files {position: absolute; display: inline-block; top: 0; left: 0; height: 100%; width: 250px; background-color: #444; background-image: url('../images/files-arrow.png'); background-repeat: no-repeat; background-position: 100% 50%; overflow: hidden; z-index: 2} +.files .account {display: inline-block; height: 63px; width: 250px; margin-top: 7px; background-color: #444} .files .accountOptions {position: relative; height: 32px; width: 100%; margin-left: 15px; margin-top: 8px} .files .accountOptions div {display: inline-block; background: url('../images/file-manager-icons.png') 0 0 no-repeat; cursor: pointer} .files .accountOptions .save {width: 30px; height: 32px; opacity: 0.3} .files .accountOptions .open {width: 25px; height: 32px; background-position: -32px -3px; margin: 3px 0 0 7px; opacity: 0.3} -.files .accountOptions .newFile {width: 15px; height: 16px; background-position: -64px 0; margin: 8px 0 0 10px; opacity: 0.3} +.files .accountOptions .newFile {width: 15px; height: 16px; background-position: -64px 0; margin: 8px 0 0 7px; opacity: 0.3} .files .accountOptions .newFolder {width: 20px; height: 16px; background-position: -80px 0; margin: 8px 0 0 5px; opacity: 0.3} -.files .accountOptions .delete {width: 16px; height: 16px; background-position: -100px 0; margin: 8px 0 0 5px; opacity: 0.3} .files .accountOptions .rename {width: 16px; height: 16px; background-position: -116px 0; margin: 8px 0 0 5px; opacity: 0.3} -.files .accountOptions .view {width: 16px; height: 16px; background-position: -132px 0; margin: 8px 0 0 5px; opacity: 0.3} -.files .accountOptions .lock {position: relative; margin-left: 208px; margin-top: -27px; width: 12px; height: 16px; background-position: -64px -16px; z-index: 1} -.files input:focus, .findReplace input:focus, .findReplace select:focus, .password:focus {outline: none; box-shadow: 0 0 10px 1px rgba(0,198,255,1)} +.files .accountOptions .delete {width: 16px; height: 16px; background-position: -100px 0; margin: 8px 0 0 5px; opacity: 0.3} +.files input:focus, .findReplace input:focus, .findReplace select:focus, .password:focus {outline: 0; box-shadow: 0 0 10px 1px rgba(0,198,255,0.7)} .files .button {position: absolute; border: 0; background: #444; color: #eee; height:20px; margin-top: 16px; margin-left: 5px; font-size: 11px; cursor: pointer} .files .button:hover {background-color: #222; color: #eee} .files .frame {display: inline-block; width: 250px} @@ -91,8 +89,8 @@ h2 {font-size: 18px; font-weight: normal; color: #fff} .files .serverMessage b {font-size: 10px} .editor {position: absolute; display: inline-block; top: 0; left: 15px; width: 2400px} -.editor .tabsBar {display: inline-block; height: 22px; width: 2400px; margin-top: 40px; padding-left: 53px; background: #ddd} -.tabsBar .tab {position: absolute; display: none; height: 15px; padding: 5px 8px 2px 8px; font-size: 10px; border-left: solid 1px #eee; border-right: solid 1px #777; border-radius: 5px 5px 0 0; color: #fff; white-space: nowrap; overflow: hidden; cursor: pointer; z-index: 1; +.editor .tabsBar {display: inline-block; height: 22px; width: 2400px; margin-top: 20px; padding-left: 53px; background: #fff} +.tabsBar .tab {position: absolute; display: none; height: 15px; padding: 5px 8px 2px 9px; border-right: 1px solid #ddd; font-size: 10px; color: #fff; white-space: nowrap; overflow: hidden; cursor: pointer; z-index: 1; transition: width 0.15s ease-in-out; transition: left 0.15s ease-in-out; } @@ -104,33 +102,40 @@ h2 {font-size: 18px; font-weight: normal; color: #fff} } .tabsBar .tab .closeTab, .tabsBar .closeAllTabs {margin: 1px 0 0 5px; border-radius: 6px; cursor: pointer} .tabsBar .tab .closeTab {position: absolute; right: 7px} -.tabsBar .alphaTabs {position: absolute; margin: 6px 0 0 -20px; background: #bbb; border-radius: 6px; cursor: pointer} -.tabsBar .alphaTabs:hover {background: #000} -.tabsBar .closeAllTabs {position: absolute; margin: 6px 0 0 -36px; background: #bbb} -.tabsBar .closeAllTabs:hover {background: #000} -.tabsBar .newTab {position: absolute; display: inline-block; height: 15px; padding: 4px 7px 3px 7px; border-left: solid 1px #eee; border-right: solid 1px #777; background: #aaa; border-radius: 4px 4px 0 0; cursor: pointer; z-index: 0; +.tabsBar .alphaTabs {position: absolute; margin: 6px 0 0 -20px; border-radius: 6px; cursor: pointer} +.tabsBar .alphaTabs:hover {background: #ccc} +.tabsBar .closeAllTabs {position: absolute; margin: 6px 0 0 -36px} +.tabsBar .closeAllTabs:hover {background: #ccc} +.tabsBar .newTab {position: absolute; display: inline-block; height: 15px; padding: 4px 7px 3px 7px; background: #ddd; cursor: pointer; z-index: 0; transition: left 0.15s ease-in-out; } .editor .findBar {display: inline-block; height: 28px; width: 2400px; color: #fff; background-color: #161612} -.findBar .findReplace {position: absolute; z-index: 1} -.findReplace select {position: relative; font-size: 10px; margin: 8px 2px 0 2px; top: -2px;} -.findReplace .findText {display: inline-block; height: 21px; font-size: 10px; margin: 8px 2px 0 2px; margin-left: 43px} -.findReplace .find {position: relative; width: 120px; height: 16px; border: 0; top: -3px; font-size: 10px; padding-left: 5px; margin-right: 3px} -.findReplace .replaceAction {margin: 0 2px 0 0; top: -2px} -.findReplace .replaceText {height: 21px; font-size: 10px; margin: 8px 2px 0 2px} -.findReplace .replace {position: relative; width: 120px; height: 16px; border: 0; top: -3px; font-size: 10px; padding-left: 5px} -.findReplace .targetText {height: 21px; font-size: 10px; margin: 8px 2px 0 2px} -.findReplace .submit {position: relative; top: -2px; height: 17px; border: 0; background-color: #444; color: #eee; font-size: 10px; margin-left: 2px; cursor: pointer} +.findBar .findReplace {position: absolute; padding-top: 2px; z-index: 1} +.findReplace .selectWrapper {position: relative; display: inline-block} +.findReplace .selectWrapper select {position: relative; padding: 1px; border: 0; background: url('../images/select-arrow.gif') no-repeat right #666; color: #fff; font-size: 10px; height: 16px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} +.findReplace .findText {display: inline-block; height: 21px; font-size: 10px; margin: 6px 3px 0 43px} +.findReplace .find {position: relative; width: 120px; height: 16px; border: 0; top: 3px; font-size: 10px; padding-left: 5px; margin-right: 3px; background: #666; color: #eee} +.findReplace .replaceText {height: 21px; font-size: 10px; margin: 6px 2px 0 2px} +.findReplace .replace {position: relative; width: 120px; height: 16px; border: 0; top: 3px; font-size: 10px; padding-left: 5px; background: #666; color: #eee} +.findReplace .targetText {height: 21px; font-size: 10px; margin: 6px 2px 0 2px} +.findReplace .submit {position: relative; top: 3px; height: 16px; border: 0; background-color: #444; color: #eee; font-size: 10px; margin-left: 2px; cursor: pointer} .findReplace .submit:hover {background-color: #2187e7; color: #eee} .findReplace .results {position: relative; display: inline-block; width: 200px; height: 20px; font-size: 10px; margin: 8px 0 0 20px} -.findBar .codeAssist {position: fixed; display: inline-block; width: 100px; right: 74px; top: 70px; height: 21px; font-size: 10px; cursor: default; z-index: 1} -.findBar .codeAssist input {margin-top: -1px} -.findBar .goLine {position: fixed; display: inline-block; width: 100px; right: -10px; top: 70px; height: 21px; font-size: 10px; cursor: default; z-index: 1} -.goLine .goToLine {width: 25px; height: 16px; border: 0; font-size: 10px; margin: -3px 0 0 3px} +.findBar .codeAssist {position: fixed; display: inline-block; width: 100px; right: 120px; top: 49px; height: 21px; font-size: 10px; color: #bbb; cursor: default; z-index: 1} +.findBar .codeAssist input {margin-top: 0} +.findBar .codeAssist .codeAssistCheckbox {display: none} +.findBar .codeAssist .codeAssistDisplay {display: inline-block; width: 16px; height: 16px; margin: -1px 4px 0 0; vertical-align: middle; background: url('../images/checkbox.gif') 0 0 no-repeat; cursor: pointer} +.findBar .goLine {position: fixed; display: inline-block; width: 100px; right: 30px; top: 49px; height: 21px; font-size: 10px; color: #bbb; cursor: default; z-index: 1} +.goLine .goToLine {width: 25px; height: 16px; border: 0; font-size: 10px; margin: -3px 0 0 3px; background: #666; color: #eee; text-align: center} .goLine .goToLine:focus {outline: none; box-shadow: 0 0 10px 1px rgba(0,198,255,1)} +.findBar .view {position: fixed; display: inline-block; width: 16px; height: 16px; right: 16px; top: 49px; background: url('../images/file-manager-icons.png') 0 0 no-repeat; cursor: pointer; background-position: -132px 0; opacity: 0.3} .editor .code {position: relative; display: inline-block; top: 28px; width: 600px; height: 600px; visibility: hidden} -.footer {position: fixed; display: inline-block; width: 100%; height: 30px; bottom: 0; background-color: rgba(0,0,0,0.7); left: 0; z-index: 2} +.footer {position: fixed; display: inline-block; width: 100%; height: 30px; bottom: 0; background-color: rgba(0,0,0,0.7); left: 0; z-index: 1} .footer .system {position: absolute; display: inline-block; padding: 10px 0 0 15px} .footer .system div {position: relative; display: inline-block; margin-right: 10px; width: 11px; height: 11px; cursor: pointer} .footer .system .preview {background: url('../images/file-manager-icons.png') no-repeat -116px -16px} @@ -139,8 +144,6 @@ h2 {font-size: 18px; font-weight: normal; color: #fff} .footer .nestDisplay {position: absolute; display: inline-block; padding: 5px 0 0 8px; margin-top: 0px; left: 267px; font-size: 12px; color: #fff; text-align: right} .footer .charDisplay, .footer .byteDisplay {position: absolute; display: inline-block; padding: 5px 0 0 8px; margin-top: 3px; margin-right: 10px; right: 0; font-weight: bold; font-size: 12px; color: #fff; text-align: right; text-align: right; cursor: pointer} -.textbox {box-shadow: inset 1px 1px 2px 0 rgba(0,0,0,0.4)} - .fileMenu {position: absolute; display: none; left: 0; top: 0; background-color: #333; z-index: 10; transition: opacity 0.15s; }