Skip to content

Commit 4b69c44

Browse files
mattpassmattpass
committed
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
1 parent c673bea commit 4b69c44

1 file changed

Lines changed: 41 additions & 38 deletions

File tree

‎lib/ice-coder.css‎

Lines changed: 41 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -56,32 +56,30 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
5656
100% {-webkit-transform:rotate(-360deg)}
5757
}
5858

59-
.header {position: absolute; display: inline-block; top: 0; left: 0; width: 100%; height: 40px; background-color: #fff; text-align: right; z-index: 2}
60-
.header .tools {position: absolute; display: inline-block; left: 15px; top: 3px}
61-
.header .plugins {position: absolute; display: inline-block; left: 55px; top: 3px}
62-
.header .plugins img {position: relative; display: inline-block; margin-right: 15px}
59+
.plugins {position: absolute; display: inline-block; width: 3px; height: 100%; top: 0; left: 0; background: transparent; overflow: hidden; z-index: 3;
60+
transition: width 0.15s ease-in-out;
61+
transition: background 0.15s ease-in-out;
62+
}
63+
64+
.header {position: absolute; display: inline-block; top: 0; left: 0; width: 100%; height: 20px; background-color: #fff; text-align: right; z-index: 1}
6365
.header .helpIcon {position: absolute; top: 5px; right: 90px; cursor: pointer}
6466
.header .settingsIcon {position: absolute; top: 5px; right: 70px; cursor: pointer}
6567
.header .screenModeIcon {position: absolute; top: 5px; right: 46px; cursor: pointer}
66-
.header .version {position: relative; display: inline-block; margin-top: 25px; font-size: 10px; color: #bbb}
67-
.header .version a {font-size: 10px; color: #bbb; text-decoration: none}
68+
.header .logout {position: absolute; top: 5px; right: 105px; font-size: 10px; color: #bbb}
69+
.header .logout a {font-size: 10px; color: #bbb; text-decoration: none}
6870
.header .logo {position: relative; margin: 5px 10px 0 5px; cursor: pointer}
6971

70-
.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;
71-
box-shadow: 0 50px 10px 4px rgba(0,0,0,0.4);
72-
}
73-
.files .account {display: inline-block; height: 50px; width: 250px; margin-top: 40px; background-color: #888}
72+
.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}
73+
.files .account {display: inline-block; height: 63px; width: 250px; margin-top: 7px; background-color: #444}
7474
.files .accountOptions {position: relative; height: 32px; width: 100%; margin-left: 15px; margin-top: 8px}
7575
.files .accountOptions div {display: inline-block; background: url('../images/file-manager-icons.png') 0 0 no-repeat; cursor: pointer}
7676
.files .accountOptions .save {width: 30px; height: 32px; opacity: 0.3}
7777
.files .accountOptions .open {width: 25px; height: 32px; background-position: -32px -3px; margin: 3px 0 0 7px; opacity: 0.3}
78-
.files .accountOptions .newFile {width: 15px; height: 16px; background-position: -64px 0; margin: 8px 0 0 10px; opacity: 0.3}
78+
.files .accountOptions .newFile {width: 15px; height: 16px; background-position: -64px 0; margin: 8px 0 0 7px; opacity: 0.3}
7979
.files .accountOptions .newFolder {width: 20px; height: 16px; background-position: -80px 0; margin: 8px 0 0 5px; opacity: 0.3}
80-
.files .accountOptions .delete {width: 16px; height: 16px; background-position: -100px 0; margin: 8px 0 0 5px; opacity: 0.3}
8180
.files .accountOptions .rename {width: 16px; height: 16px; background-position: -116px 0; margin: 8px 0 0 5px; opacity: 0.3}
82-
.files .accountOptions .view {width: 16px; height: 16px; background-position: -132px 0; margin: 8px 0 0 5px; opacity: 0.3}
83-
.files .accountOptions .lock {position: relative; margin-left: 208px; margin-top: -27px; width: 12px; height: 16px; background-position: -64px -16px; z-index: 1}
84-
.files input:focus, .findReplace input:focus, .findReplace select:focus, .password:focus {outline: none; box-shadow: 0 0 10px 1px rgba(0,198,255,1)}
81+
.files .accountOptions .delete {width: 16px; height: 16px; background-position: -100px 0; margin: 8px 0 0 5px; opacity: 0.3}
82+
.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)}
8583
.files .button {position: absolute; border: 0; background: #444; color: #eee; height:20px; margin-top: 16px; margin-left: 5px; font-size: 11px; cursor: pointer}
8684
.files .button:hover {background-color: #222; color: #eee}
8785
.files .frame {display: inline-block; width: 250px}
@@ -91,8 +89,8 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
9189
.files .serverMessage b {font-size: 10px}
9290

9391
.editor {position: absolute; display: inline-block; top: 0; left: 15px; width: 2400px}
94-
.editor .tabsBar {display: inline-block; height: 22px; width: 2400px; margin-top: 40px; padding-left: 53px; background: #ddd}
95-
.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;
92+
.editor .tabsBar {display: inline-block; height: 22px; width: 2400px; margin-top: 20px; padding-left: 53px; background: #fff}
93+
.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;
9694
transition: width 0.15s ease-in-out;
9795
transition: left 0.15s ease-in-out;
9896
}
@@ -104,33 +102,40 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
104102
}
105103
.tabsBar .tab .closeTab, .tabsBar .closeAllTabs {margin: 1px 0 0 5px; border-radius: 6px; cursor: pointer}
106104
.tabsBar .tab .closeTab {position: absolute; right: 7px}
107-
.tabsBar .alphaTabs {position: absolute; margin: 6px 0 0 -20px; background: #bbb; border-radius: 6px; cursor: pointer}
108-
.tabsBar .alphaTabs:hover {background: #000}
109-
.tabsBar .closeAllTabs {position: absolute; margin: 6px 0 0 -36px; background: #bbb}
110-
.tabsBar .closeAllTabs:hover {background: #000}
111-
.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;
105+
.tabsBar .alphaTabs {position: absolute; margin: 6px 0 0 -20px; border-radius: 6px; cursor: pointer}
106+
.tabsBar .alphaTabs:hover {background: #ccc}
107+
.tabsBar .closeAllTabs {position: absolute; margin: 6px 0 0 -36px}
108+
.tabsBar .closeAllTabs:hover {background: #ccc}
109+
.tabsBar .newTab {position: absolute; display: inline-block; height: 15px; padding: 4px 7px 3px 7px; background: #ddd; cursor: pointer; z-index: 0;
112110
transition: left 0.15s ease-in-out;
113111
}
114112
.editor .findBar {display: inline-block; height: 28px; width: 2400px; color: #fff; background-color: #161612}
115-
.findBar .findReplace {position: absolute; z-index: 1}
116-
.findReplace select {position: relative; font-size: 10px; margin: 8px 2px 0 2px; top: -2px;}
117-
.findReplace .findText {display: inline-block; height: 21px; font-size: 10px; margin: 8px 2px 0 2px; margin-left: 43px}
118-
.findReplace .find {position: relative; width: 120px; height: 16px; border: 0; top: -3px; font-size: 10px; padding-left: 5px; margin-right: 3px}
119-
.findReplace .replaceAction {margin: 0 2px 0 0; top: -2px}
120-
.findReplace .replaceText {height: 21px; font-size: 10px; margin: 8px 2px 0 2px}
121-
.findReplace .replace {position: relative; width: 120px; height: 16px; border: 0; top: -3px; font-size: 10px; padding-left: 5px}
122-
.findReplace .targetText {height: 21px; font-size: 10px; margin: 8px 2px 0 2px}
123-
.findReplace .submit {position: relative; top: -2px; height: 17px; border: 0; background-color: #444; color: #eee; font-size: 10px; margin-left: 2px; cursor: pointer}
113+
.findBar .findReplace {position: absolute; padding-top: 2px; z-index: 1}
114+
.findReplace .selectWrapper {position: relative; display: inline-block}
115+
.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;
116+
-webkit-appearance: none;
117+
-moz-appearance: none;
118+
appearance: none;
119+
}
120+
.findReplace .findText {display: inline-block; height: 21px; font-size: 10px; margin: 6px 3px 0 43px}
121+
.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}
122+
.findReplace .replaceText {height: 21px; font-size: 10px; margin: 6px 2px 0 2px}
123+
.findReplace .replace {position: relative; width: 120px; height: 16px; border: 0; top: 3px; font-size: 10px; padding-left: 5px; background: #666; color: #eee}
124+
.findReplace .targetText {height: 21px; font-size: 10px; margin: 6px 2px 0 2px}
125+
.findReplace .submit {position: relative; top: 3px; height: 16px; border: 0; background-color: #444; color: #eee; font-size: 10px; margin-left: 2px; cursor: pointer}
124126
.findReplace .submit:hover {background-color: #2187e7; color: #eee}
125127
.findReplace .results {position: relative; display: inline-block; width: 200px; height: 20px; font-size: 10px; margin: 8px 0 0 20px}
126-
.findBar .codeAssist {position: fixed; display: inline-block; width: 100px; right: 74px; top: 70px; height: 21px; font-size: 10px; cursor: default; z-index: 1}
127-
.findBar .codeAssist input {margin-top: -1px}
128-
.findBar .goLine {position: fixed; display: inline-block; width: 100px; right: -10px; top: 70px; height: 21px; font-size: 10px; cursor: default; z-index: 1}
129-
.goLine .goToLine {width: 25px; height: 16px; border: 0; font-size: 10px; margin: -3px 0 0 3px}
128+
.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}
129+
.findBar .codeAssist input {margin-top: 0}
130+
.findBar .codeAssist .codeAssistCheckbox {display: none}
131+
.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}
132+
.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}
133+
.goLine .goToLine {width: 25px; height: 16px; border: 0; font-size: 10px; margin: -3px 0 0 3px; background: #666; color: #eee; text-align: center}
130134
.goLine .goToLine:focus {outline: none; box-shadow: 0 0 10px 1px rgba(0,198,255,1)}
135+
.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}
131136
.editor .code {position: relative; display: inline-block; top: 28px; width: 600px; height: 600px; visibility: hidden}
132137

133-
.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}
138+
.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}
134139
.footer .system {position: absolute; display: inline-block; padding: 10px 0 0 15px}
135140
.footer .system div {position: relative; display: inline-block; margin-right: 10px; width: 11px; height: 11px; cursor: pointer}
136141
.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}
139144
.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}
140145
.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}
141146

142-
.textbox {box-shadow: inset 1px 1px 2px 0 rgba(0,0,0,0.4)}
143-
144147
.fileMenu {position: absolute; display: none; left: 0; top: 0; background-color: #333; z-index: 10;
145148
transition: opacity 0.15s;
146149
}

0 commit comments

Comments
 (0)