From 4b69c44559a000ec483e47644dfb1c361f34bbf3 Mon Sep 17 00:00:00 2001 From: Matt Pass Date: Wed, 11 Sep 2013 16:41:03 +0100 Subject: [PATCH] Complete revamp to give a flat design style Plugins class added for pane & on z-index 3 so above everything else here Header now only 20px high and z-index lowered to 1 Version now called logout as it doesn't contain version no anymore, now absolutely positioned Files on a higher z-index and has no drop shadow now Account is taller, tho not as much margin-top and same colour as files pane, so blends in Account icons moved, adjusted and removed Close all tabs and alpha tabs only have BG on hover and it's lighter too newTab doesn't have borders to left & right now Find & replace elems have complete reworking to make them straight with less styling Selects, checkboxes & inputs have new, non standard look Tabs no longer have border radius on top Footer on lower z-index than file manager pane now Removed inset box shadow from all textboxes --- lib/ice-coder.css | 79 ++++++++++++++++++++++++----------------------- 1 file changed, 41 insertions(+), 38 deletions(-) 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; }