mirror of
https://github.com/icecoder/ICEcoder.git
synced 2026-03-02 23:03:59 +01:00
4b69c44559
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
163 lines
12 KiB
CSS
163 lines
12 KiB
CSS
/* First, reset everything to a standard */
|
|
html, body, div, span, applet, object, iframe,
|
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
a, abbr, acronym, address, big, cite, code,
|
|
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
|
small, strike, strong, sub, sup, tt, var,
|
|
b, u, i, center,
|
|
dl, dt, dd, ol, ul, li,
|
|
fieldset, form, label, legend,
|
|
table, caption, tbody, tfoot, thead, tr, th, td {
|
|
font-family: arial, verdana, helvetica, sans-serif;
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
outline: 0;
|
|
font-size: 12px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
body {overflow: hidden;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
background-color: #222;
|
|
}
|
|
|
|
h1 {font-size: 36px; font-weight: normal; color: #888; margin-bottom: 20px}
|
|
h2 {font-size: 18px; font-weight: normal; color: #fff}
|
|
|
|
.blackMask {position: fixed; display: table; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden; background-color: rgba(0,0,0,0.8); text-align: center; z-index: 100}
|
|
.blackMask .popupVCenter {#position: absolute; display: table-cell; #top: 50%; vertical-align: middle; text-align: center}
|
|
.popupVCenter .popup {#position: relative; #top: -50%; text-align: center; color: #fff; font-size: 10px}
|
|
.whiteGlow {box-shadow: 0 0 8px 2px rgba(255,255,255,0.6)}
|
|
|
|
.circleOutside {background-color: rgba(0,0,0,0); border:5px solid rgba(0,183,229,0.9); opacity:.9; border-top:5px solid rgba(0,0,0,0); border-left:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow: 0 0 35px #2187e7;
|
|
width:50px; height:50px; margin:0 auto; animation:spin .5s infinite linear; -webkit-animation:spin .5s infinite linear;
|
|
}
|
|
.circleInside {background-color: rgba(0,0,0,0); border:5px solid rgba(0,183,229,0.9); opacity:.9; border-top:5px solid rgba(0,0,0,0); border-left:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow: 0 0 15px #2187e7;
|
|
width:30px; height:30px; margin:0 auto; position:relative; top:-50px; animation:spinoff .5s infinite linear; -webkit-animation:spinoff .5s infinite linear;
|
|
}
|
|
@keyframes spin {
|
|
0% {transform:rotate(0deg)}
|
|
100% {transform:rotate(360deg)}
|
|
}
|
|
@keyframes spinoff {
|
|
0% {transform:rotate(0deg)}
|
|
100% {transform:rotate(-360deg)}
|
|
}
|
|
@-webkit-keyframes spin {
|
|
0% {-webkit-transform:rotate(0deg)}
|
|
100% {-webkit-transform:rotate(360deg)}
|
|
}
|
|
@-webkit-keyframes spinoff {
|
|
0% {-webkit-transform:rotate(0deg)}
|
|
100% {-webkit-transform:rotate(-360deg)}
|
|
}
|
|
|
|
.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 .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: 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 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 .rename {width: 16px; height: 16px; background-position: -116px 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 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}
|
|
.files .serverMessage {position: absolute; display: inline-block; width: 450px; bottom: 0; margin-bottom: 30px; background-color: rgba(255,255,255,0.8); font-size: 10px; padding: 7px 12px; opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.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: 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;
|
|
}
|
|
.tabsBar .tabSlide {
|
|
transition: left 0.15s ease-in-out;
|
|
}
|
|
.tabsBar .tabDrag {
|
|
transition: left 0s ease-in-out;
|
|
}
|
|
.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; 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; 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: 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: 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}
|
|
.footer .system .terminal {background: url('../images/file-manager-icons.png') no-repeat -132px -16px}
|
|
.footer .nesting {position: absolute; display: inline-block; padding: 5px; margin-top: 10px; left: 260px; border-radius: 5px; background-color: #0b0; cursor: default}
|
|
.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}
|
|
|
|
.fileMenu {position: absolute; display: none; left: 0; top: 0; background-color: #333; z-index: 10;
|
|
transition: opacity 0.15s;
|
|
}
|
|
.fileMenu a {display: block; padding: 2px 5px; background-color: #333; color: #eee; text-decoration: none}
|
|
.fileMenu a:hover {background-color: #666}
|
|
.fileMenu hr {border: 0; height: 1px; padding: 0; margin: 0; background: #444}
|
|
|
|
.screenContainer {position: absolute; display: table; width: 100%; height: 100%; top: 0; left: 0; text-align: center}
|
|
.screenContainer .screenVCenter {#position: absolute; display: table-cell; #top: 50%; vertical-align: middle; text-align: center}
|
|
.screenVCenter .screenCenter {#position: relative; #top: -50%; text-align: center; display: inline}
|
|
.screenCenter .version {position: relative; display: block; margin: 5px 0 15px 0; font-size: 10px; color: #bbb}
|
|
.screenCenter .text {position: relative; display: block; margin-top: 15px; font-size: 10px; color: #888}
|
|
.screenCenter .text input {margin-top: 1px}
|
|
.screenCenter .text a {position: relative; display: block; margin-top: 15px; font-size: 10px; color: #888; text-decoration: none}
|
|
.screenCenter .password {border: 0; background-color: #333; color: #fff; height: 20px}
|
|
.screenCenter .button {border: 0; background: #444; color: #eee; height: 22px; cursor: pointer}
|
|
.screenCenter .button:hover {background: #2187e7; color: #eee} |