@ambers/helios
Version:
Helios IDE for Amber Smalltalk
447 lines (375 loc) • 14.1 kB
text/less
body[id="helios"] {
&.niflheim {
background: #eeeeee url('squared_metal-dark.png') repeat;
.btn-group > .dropdown-menu {
background-color: #666;
border-color: #888;
padding: 2px 8px;
}
.btn-group > .dropdown-menu a {
// todo: remove
/* position: absolute;*/
height: 100%;
// todo: remove
/* width: 100%;*/
}
.btn-group > .dropdown-menu a {
color: #fffffb;
}
// todo: check if it can be removed
/* .navbar-fixed-top ul {
width: 100%;
}*/
.navbar-fixed-top i.close {
background-image: url('close-dark.png');
}
.navbar-fixed-top .navbar-inner {
border-bottom: 1px solid #222;
border-top: 1px solid #222;
box-shadow: inset 0px 1px 0px #777;
background: #4d5052;
}
::-webkit-scrollbar {
width: 14px;
height: 14px;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
.focused ::-webkit-scrollbar-thumb {
background-color: #4c4c4c;
}
.focused ::-webkit-scrollbar-thumb:hover {
background-color: #3a3a3a;
}
::-webkit-scrollbar-thumb {
background-color: #585858;
border: 3px solid transparent;
border-radius: 9px;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: #707070;
}
.new_tab a b {
border-top: 4px solid #a7a7a7;
}
.navbar .nav > li > a {
border-right: 1px solid #222;
box-shadow: none;
}
.navbar .nav > li > a:hover {
color: #f00;
background-image: linear-gradient(top, #666, #454648);
background-image: -webkit-linear-gradient(top, #666, #454648);
background-image: -moz-linear-gradient(top, #666, #454648);
background-image: -o-linear-gradient(top, #666, #454648);
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus,
.navbar .nav .ui-sortable-helper a {
color: #ddd;
background-image: linear-gradient(top, #666, #454648);
background-image: -webkit-linear-gradient(top, #666, #454648);
background-image: -moz-linear-gradient(top, #666, #454648);
background-image: -o-linear-gradient(top, #666, #454648);
text-shadow: none;
box-shadow: inset -1px 0px 1px -1px #eee, inset 1px 1px 1px -1px #eee;
border-right: 1px solid #222;
}
.navbar-fixed-top li.inactive{
opacity: 0.6;
background: #4d5052;
box-shadow: none;
}
.navbar-fixed-top li.inactive span{
text-shadow: none;
color: #ccc;
}
.nav-pills.nav-stacked > li > a {
color: #b8c4cf;
}
.focused .nav-pills.nav-stacked > li > a {
color: #ddd;
}
.nav-pills > .active > a {
background-color: #222B3C;
color: #fffffb ;
}
.focused .nav-pills {
background-color: #585858;
}
.focused .nav-pills > .active > a,
.nav-pills > .active > a:hover,
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover,
.CodeMirror-hint-active {
background: #305f9f;
}
.CodeMirror {
position: initial;
height: 100%;
width: initial;
}
.welcome {
color: #fffffb;
text-shadow: none;
}
[class^="icon-"], body[id="helios"][class*=" icon-"]{
opacity: 0.68;
background-image: url("../../../bower_components/bootstrap/img/glyphicons-halflings-white.png");
}
.welcome h2 {
text-align: center;
// todo: remove
/* color: #666;*/
}
.welcome button {
// todo: remove
/* background: #eee;*/
margin: 10px;
padding: 20px;
height: auto;
width: 150px;
}
.tool_container .panes .pane {
background: #444;
}
.tool_container .splitter.vertical {
border-left: 1px solid #525252;
}
.tool_container .splitter.horizontal {
border-top: 1px solid #666;
}
//todo: remove
/*.tool_container .pane .nav-pills i.package {
background-image: url('resources/package.png');
}*/
.tool_container .list-label {
border-bottom: 1px solid #525252;
background-image: linear-gradient(top, #585858, #323232);
background-image: -webkit-linear-gradient(top, #585858, #323232);
background-image: -moz-linear-gradient(top, #585858, #323232);
background-image: -o-linear-gradient(top, #585858, #323232);
color: #ccc;
font-weight: normal;
text-shadow: none;
}
.transcript-container .list-label {
border-top: none;
}
.tool_container .pane_actions,
.tool_container .buttons_bar {
border-top: 1px solid #222;
background-image: linear-gradient(top, #585858, #323232);
background-image: -webkit-linear-gradient(top, #585858, #323232);
background-image: -moz-linear-gradient(top, #585858, #323232);
background-image: -o-linear-gradient(top, #585858, #323232);
}
.tool_container .panes .pane .pane_actions label {
test-shadow: none;
color: #d3d3d3;
}
.tool_container .panes .pane .pane_actions .btn {
border: 1px;
text-shadow: none;
margin-top: -1px;
color: #929292
}
.tool_container .panes .pane .pane_actions .btn-group .btn.active {
color: #d3d3d3;
text-shadow: none;
box-shadow: inset 0px 0px 2px 0px #323232;
border-radius: 4px;
background: #666;
background-image: linear-gradient(top, #454545, #252525);
background-image: -webkit-linear-gradient(top, #454545, #252525);
background-image: -moz-linear-gradient(top, #454545, #252525);
background-image: -o-linear-gradient(top, #454545, #252525);
}
.tool_container .panes .pane .class_side .nav-pills {
background: #38404a;
}
.key_helper {
background: #444;
box-shadow: 0 0 80px 2px #222;
border: 1px solid #777;
}
.key_helper .command {
color: #ccc;
}
.key_helper .command strong {
display: inline-block;
min-width: 1.4em;
text-align: center;
background-color: #eee;
color: #2b658b;
}
.key_helper #binding-helper-main {
background: #444;
}
.key_helper .action {
vertical-align: middle;
}
.key_helper .selected {
background-image: linear-gradient(top, #484848, #323232);
background-image: -webkit-linear-gradient(top, #484848, #323232);
background-image: -moz-linear-gradient(top, #585858, #323232);
background-image: -o-linear-gradient(top, #585858, #323232);
text-shadow: none;
border-bottom: 1px solid #585858;
color: #ccc
}
.growl {
background-image: -webkit-linear-gradient(#505050, #3c3c3c);
background-image: -moz-linear-gradient(#505050, #3c3c3c);
background-image: -o-linear-gradient(#505050, #3c3c3c);
background-image: linear-gradient(#888, #666);
box-shadow: 0 0 3px #777;
color: #ccc;
text-shadow: none;
}
.button {
color: #d3d3d3;
border-radius: 3px ;
border: 1px solid #383838;
background-image: linear-gradient(top, #454545, #252525);
background-image: -webkit-linear-gradient(top, #454545, #252525);
background-image: -moz-linear-gradient(top, #454545, #252525);
background-image: -o-linear-gradient(top, #454545, #252525);
}
.button.default {
color: #d3d3d3;
border: 1px solid #585858;
background-image: linear-gradient(top, #549ceb, #12374f);
background-image: -webkit-linear-gradient(top, #549ceb, #12374f);
background-image: -moz-linear-gradient(top, #549ceb, #12374f);
background-image: -o-linear-gradient(top, #549ceb, #12374f);
}
.dialog .button {
color: #444;
border-radius: 3px ;
background: #ccc;
border: 1px solid #9B9B9B;
height: 20px;
border-radius: 5px;
min-width: 68px;
padding: 0 10px;
text-align: center;
margin: 0;
margin-left: 10px;
background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
background: linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
font: 13px "Lucida Grande", Lucida, Verdana, sans-serif;
}
.dialog .button:hover {
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.6);
background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
background: linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
}
.dialog .button.default {
border-top: 1px solid #535273;
border: 1px solid #4F4D67;
border-bottom: 1px solid #4B4B58;
background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
background: -ms-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
background: linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
-moz-box-shadow: 0 0 3px rgba(69, 113, 184, 0.8);
-webkit-box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
}
.dialog .button.default:hover {
cursor: pointer;
color: #d3d3d3;
border: 1px solid #585858;
background-image: linear-gradient(top, #549ceb, #12374f);
background-image: -webkit-linear-gradient(top, #549ceb, #12374f);
background-image: -moz-linear-gradient(top, #549ceb, #12374f);
background-image: -o-linear-gradient(top, #549ceb, #12374f);
}
.button:hover {
cursor: pointer;
border: 1px solid #444;
background-image: linear-gradient(top, #353535, #151515);
background-image: -webkit-linear-gradient(top, #353535, #151515);
background-image: -moz-linear-gradient(top, #353535, #151515);
background-image: -o-linear-gradient(top, #353535, #151515);
}
.button.default:hover {
cursor: pointer;
border: 1px solid #4F4D67;
border-top: 1px solid #535273;
border-bottom: 1px solid #4B4B58;
color: #0a0000;
background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
background: -ms-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
background: linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
-moz-box-shadow: 0 0 3px rgba(69, 113, 184, 0.8);
-webkit-box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
}
.doc {
background: transparent;
color: #ccc;
}
.doc code {
color: #d46e69;
background-color: #626262;
border-color: #888;
}
.doc .button {
background-image: linear-gradient(top, #444, #1d1d1d);
background-image: -webkit-linear-gradient(top, #444, #1d1d1d);
background-image: -moz-linear-gradient(top, #444, #1d1d1d);
background-image: -o-linear-gradient(top, #444, #1d1d1d);
}
.doc .button.default {
background-image: linear-gradient(top, #585858, #323232);
background-image: -webkit-linear-gradient(top, #585858, #323232);
background-image: -moz-linear-gradient(top, #585858, #323232);
background-image: -o-linear-gradient(top, #585858, #323232);
}
.doc .button.default:hover {
color: #ccc;
background-image: linear-gradient(top, #454545, #252525);
background-image: -webkit-linear-gradient(top, #454545, #252525);
background-image: -moz-linear-gradient(top, #454545, #252525);
background-image: -o-linear-gradient(top, #454545, #252525);
}
.doc .markdown > pre {
background-color: #666;
border: 1px solid #383838;
}
.doc .inheritance > a {
color: #4098ed;
}
.doc .inheritance > a:hover {
color: #4098ed;
}
.transcript textarea {
background: #444;
color: #b8c4cf;
}
.hl_debugger .list-label {
border-top: 1px solid transparent;
}
}
}