You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
149 lines
2.8 KiB
CSS
149 lines
2.8 KiB
CSS
$darkGray: rgb(34, 34, 34);
|
|
$lessDarkGray: rgb(44, 44, 44);
|
|
$hoverColor: rgba(113, 113, 113, 0.26);
|
|
$activeColor: $darkGray;
|
|
|
|
/* :export {
|
|
darkGray: $darkGray;
|
|
hoverColor: $hoverColor;
|
|
activeColor: $activeColor;
|
|
} */
|
|
|
|
/* FIXME: Casemap control names */
|
|
|
|
body {
|
|
/* FIXME: Think about whether this belongs in the theme, or whether it should be scoped to some sort of ApplicationFrame instead. */
|
|
background-color: $darkGray;
|
|
}
|
|
|
|
.edgeRaise {
|
|
box-shadow: inset -1px -1px rgba(30, 27, 27, 0.7),
|
|
inset 1px 1px rgba(135, 131, 131, 0.3);
|
|
}
|
|
|
|
.edgeLower {
|
|
box-shadow: inset 1px 1px rgba(30, 27, 27, 0.7),
|
|
inset -1px -1px rgba(135, 131, 131, 0.3);
|
|
}
|
|
|
|
.uilibThemedElement {
|
|
color: white;
|
|
}
|
|
|
|
/* Default to a black background for any newly-defined components that don't have their own styles yet, for minimum readability */
|
|
.uilibComponent {
|
|
background-color: black;
|
|
}
|
|
|
|
/* ... but don't apply this to known container-type components which don't have their own styling */
|
|
.icon_icon, .grid_grid, .ribbonBox_box {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.bar {
|
|
composes: edgeRaise;
|
|
background-color: rgb(60, 62, 66);
|
|
}
|
|
|
|
.list_list {
|
|
/* color: red; */
|
|
}
|
|
|
|
.list_item {
|
|
&:nth-child(odd) {
|
|
/* background-color: rgb(45, 45, 45); */
|
|
/* background-color: rgb(51, 51, 51); */
|
|
background-color: rgb(57, 57, 60);
|
|
}
|
|
|
|
&:nth-child(even) {
|
|
background-color: rgb(27, 27, 27);
|
|
}
|
|
|
|
&.list_item_selected {
|
|
/* FIXME: Find a better color for this. */
|
|
/* background-color: rgb(38, 38, 42); */
|
|
background-color: blue; /* FIXME: Remove testing color */
|
|
}
|
|
}
|
|
|
|
.menu_menuBar, .ribbon_ribbon {
|
|
composes: bar;
|
|
}
|
|
|
|
.menu_menuBar > .menu_item {
|
|
&:hover {
|
|
background-color: $hoverColor;
|
|
}
|
|
|
|
&.menu_item_selected, &menu_item_directPress {
|
|
background-color: $activeColor;
|
|
}
|
|
}
|
|
|
|
.menu_menu {
|
|
background-color: $darkGray;
|
|
box-shadow: 1px 1px 2px rgb(54, 54, 54);
|
|
|
|
& > .menu_item:hover {
|
|
background-color: $hoverColor;
|
|
}
|
|
|
|
hr {
|
|
border-bottom: 1px solid rgb(78, 78, 78);
|
|
}
|
|
}
|
|
|
|
.menu_divider {
|
|
border-bottom: 1px solid rgb(78, 78, 78);
|
|
}
|
|
|
|
.button_button {
|
|
background-color: #38383c;
|
|
/* background-color: magenta; */
|
|
border: none;
|
|
|
|
&:hover {
|
|
background-color: $hoverColor;
|
|
}
|
|
|
|
&:active {
|
|
@include edge-lower;
|
|
background-color: $activeColor;
|
|
}
|
|
|
|
&.button_selected {
|
|
background-color: $darkGray;
|
|
}
|
|
}
|
|
|
|
.ribbonBox_box {
|
|
border-left: 1px solid rgba(30, 27, 27, 0.7);
|
|
border-right: 1px solid rgba(135, 131, 131, 0.3);
|
|
}
|
|
|
|
.ribbonBox_label {
|
|
background-color: #47464b;
|
|
color: rgb(238, 238, 238);
|
|
}
|
|
|
|
.progressBar_bar {
|
|
border: 1px solid rgb(32, 32, 32);
|
|
/* background-color: rgb(64, 64, 70); */
|
|
background-color: rgb(43, 43, 47);
|
|
}
|
|
|
|
.progressBar_fill {
|
|
background-color: rgb(54, 135, 18);
|
|
}
|
|
|
|
.pane_handle {
|
|
background-color: $darkGray;
|
|
composes: edgeRaise;
|
|
}
|
|
|
|
.ribbon_ribbon {
|
|
/* ... */
|
|
}
|
|
|