mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
Merge pull request #7203 from guerler/color_handling
Replace custom UI colors with equivalent theme colors, consolidate color handling
This commit is contained in:
Dannon
@@ -414,7 +414,7 @@ export default {
|
||||
//
|
||||
// advanced search
|
||||
//
|
||||
tmpl += `<div id="advanced-search" style="display: ${advanced_search_display}; margin-top: 5px; border: 1px solid #ccc;"><table><tr><td style="text-align: left" colspan="100"><a href="" class="advanced-search-toggle">Close Advanced Search</a></td></tr>`;
|
||||
tmpl += `<div id="advanced-search" style="display: ${advanced_search_display}; margin-top: 5px;"><table><tr><td style="text-align: left" colspan="100"><a href="" class="advanced-search-toggle">Close Advanced Search</a></td></tr>`;
|
||||
|
||||
// add advanced filters
|
||||
for (let column of options.columns) {
|
||||
|
||||
@@ -141,20 +141,16 @@ QUnit.test("input", function(assert) {
|
||||
assert.ok(input.$field.css("display") == "none", "Input field hidden");
|
||||
input.model.set("disabled", false);
|
||||
assert.ok(input.$field.css("display") == "block", "Input field shown, again");
|
||||
var colorElement = input.$field.children().first();
|
||||
var oldColor = colorElement.css("color");
|
||||
input.model.set("color", "red");
|
||||
assert.ok(
|
||||
input.$field
|
||||
.children()
|
||||
.first()
|
||||
.css("color") == "rgb(255, 0, 0)",
|
||||
colorElement.css("color") == "rgb(255, 0, 0)",
|
||||
"Shows correct new color"
|
||||
);
|
||||
input.model.set("color", null);
|
||||
assert.ok(
|
||||
input.$field
|
||||
.children()
|
||||
.first()
|
||||
.css("color") == "rgb(73, 80, 87)",
|
||||
colorElement.css("color") == oldColor,
|
||||
"Shows correct old color"
|
||||
);
|
||||
input.model.set("collapsible_value", "_collapsible_value");
|
||||
|
||||
@@ -122,25 +122,19 @@ body {
|
||||
}
|
||||
|
||||
#messagebox {
|
||||
// position: absolute;
|
||||
// top: $navbar-height + $layout_top_padding + 1;
|
||||
// left: 0;
|
||||
width: 100%;
|
||||
height: $panel-message-height !important;
|
||||
overflow: hidden;
|
||||
border-bottom: solid #999 1px;
|
||||
border-bottom: solid $border-default-color 1px;
|
||||
font-size: 90%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#inactivebox {
|
||||
// position: absolute;
|
||||
// top: $navbar-height + $layout_top_padding + 1;
|
||||
// left: 0;
|
||||
width: 100%;
|
||||
height: $panel-message-height !important;
|
||||
overflow: hidden;
|
||||
border-bottom: solid #999 1px;
|
||||
border-bottom: solid $border-default-color 1px;
|
||||
font-size: 90%;
|
||||
display: none;
|
||||
}
|
||||
@@ -178,6 +172,7 @@ body {
|
||||
height: 100%;
|
||||
padding: $margin-h $margin-v;
|
||||
overflow: auto;
|
||||
background: $brand-white;
|
||||
}
|
||||
.center-frame {
|
||||
position: absolute;
|
||||
@@ -276,10 +271,10 @@ body {
|
||||
width: 100%;
|
||||
z-index: 1000; // Above #dd-helper
|
||||
border-top: $layout-border;
|
||||
background: $navbar-default-bg;
|
||||
color: #555;
|
||||
background: $panel-footer-bg-color;
|
||||
color: $panel-header-text-color;
|
||||
a {
|
||||
color: #555;
|
||||
color: $panel-header-text-color;
|
||||
}
|
||||
.drag {
|
||||
position: absolute;
|
||||
@@ -328,7 +323,7 @@ body {
|
||||
background: none;
|
||||
border-right: $layout-border;
|
||||
border-top: $layout-border;
|
||||
background: $navbar-default-bg;
|
||||
background: $panel-footer-bg-color;
|
||||
&.right {
|
||||
left: inherit;
|
||||
right: 0;
|
||||
@@ -411,7 +406,7 @@ div.unified-panel-body-background {
|
||||
#masthead {
|
||||
padding: 0;
|
||||
margin-bottom: 0px;
|
||||
background-color: $base-color-1;
|
||||
background-color: $brand-dark;
|
||||
height: $masthead-height;
|
||||
.navbar-nav {
|
||||
min-height: 100%;
|
||||
@@ -422,19 +417,19 @@ div.unified-panel-body-background {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&.active {
|
||||
background: black;
|
||||
background: darken($brand-dark, 10%);
|
||||
}
|
||||
.nav-link {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: gold;
|
||||
color: $dropdown-link-active-color;
|
||||
}
|
||||
&.nav-icon {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
&.toggle {
|
||||
color: gold;
|
||||
color: $dropdown-link-active-color;
|
||||
}
|
||||
}
|
||||
.nav-note {
|
||||
@@ -443,7 +438,7 @@ div.unified-panel-body-background {
|
||||
position: relative;
|
||||
right: 5px;
|
||||
top: 10px;
|
||||
color: gold;
|
||||
color: $dropdown-link-active-color;
|
||||
width: 0px;
|
||||
}
|
||||
}
|
||||
@@ -456,7 +451,7 @@ div.unified-panel-body-background {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
// line-height: 1;
|
||||
color: white;
|
||||
color: $white;
|
||||
// Override margin and padding due to shorter navbar height
|
||||
padding: 5px 20px 12px;
|
||||
margin-left: -15px;
|
||||
@@ -469,7 +464,7 @@ div.unified-panel-body-background {
|
||||
border: none;
|
||||
}
|
||||
.navbar-brand-title {
|
||||
color: white;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -555,11 +550,11 @@ div.metadataFormBody div.metadataFormTitle {
|
||||
|
||||
div.metadataFormDisabled div.metadataFormTitle {
|
||||
background: #eee;
|
||||
border-color: #999;
|
||||
border-color: $border-default-color;
|
||||
}
|
||||
|
||||
div.metadataFormDisabled {
|
||||
border-color: #999;
|
||||
border-color: $border-default-color;
|
||||
}
|
||||
|
||||
div.metadataHelpBody {
|
||||
@@ -595,24 +590,6 @@ div.toolHelpBody {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// In workflow
|
||||
div.toolTitleDisabled {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
margin-left: 16px;
|
||||
margin-right: 10px;
|
||||
display: list-item;
|
||||
list-style: square outside;
|
||||
font-style: italic;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
div.toolTitleNoSectionDisabled {
|
||||
padding-bottom: 0px;
|
||||
font-style: italic;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
div.toolFormRow {
|
||||
position: relative;
|
||||
}
|
||||
@@ -647,12 +624,13 @@ div.toolFormRow {
|
||||
}
|
||||
|
||||
.toolForm.toolFormInCanvas.tool-node-error {
|
||||
border-color: #aa6666;
|
||||
border-color: $state-danger-border;
|
||||
.toolFormTitle {
|
||||
background: #ffcccc;
|
||||
border-color: #aa6666;
|
||||
background: $state-danger-bg;
|
||||
border-color: $state-danger-border;
|
||||
}
|
||||
}
|
||||
|
||||
div.form,
|
||||
div.toolForm {
|
||||
border: solid $form-border 1px;
|
||||
@@ -712,22 +690,6 @@ div.form-row-input label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
div.form-row-error-message {
|
||||
width: 300px;
|
||||
float: left;
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.form-row .help,
|
||||
.toolParamHelp {
|
||||
color: #666;
|
||||
a {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.form-row.form-actions {
|
||||
background: whiteSmoke;
|
||||
border-top: solid #ddd 1px;
|
||||
@@ -737,7 +699,7 @@ div.form-row-error-message {
|
||||
}
|
||||
|
||||
.workflow-right {
|
||||
background: white;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.workflow-right .right-content {
|
||||
@@ -750,7 +712,6 @@ div.form-row-error-message {
|
||||
|
||||
// Selects
|
||||
select {
|
||||
//border: 1px solid $input-border;
|
||||
padding: 2px;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
@@ -779,8 +740,6 @@ input[type="text"],
|
||||
input[type="password"] {
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
border: 1px solid $input-border;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
// Always style buttons and submits as bootstrap buttons
|
||||
@@ -788,7 +747,6 @@ input[type="submit"],
|
||||
button {
|
||||
@extend .btn;
|
||||
@extend .btn-secondary;
|
||||
// The above overrides the button variants (primary, danger, etc) because it occurs later, redefine btn-primary (bit of a hack)
|
||||
&.btn-primary {
|
||||
@extend .btn-primary;
|
||||
}
|
||||
@@ -799,13 +757,14 @@ button {
|
||||
padding: 4px;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
color: $gray-700;
|
||||
border: 1px solid $input-border;
|
||||
color: $text-color;
|
||||
border: 1px solid $border-default-color;
|
||||
padding-left: 14px !important;
|
||||
padding-right: 14px;
|
||||
margin-bottom: 0; // remove the default margin on all inputs
|
||||
margin-bottom: 0;
|
||||
@include border-radius(14px);
|
||||
max-width: auto;
|
||||
background: $brand-white;
|
||||
}
|
||||
.search-query:focus {
|
||||
border-color: darken(rgba(82, 168, 236, 0.8), 15%);
|
||||
@@ -830,7 +789,7 @@ button {
|
||||
#search-clear-btn {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 5px;
|
||||
top: 6px;
|
||||
display: block;
|
||||
font-size: 1.4em !important;
|
||||
text-decoration: none;
|
||||
@@ -884,13 +843,6 @@ button {
|
||||
background-image: url(../../images/info_large.png);
|
||||
}
|
||||
|
||||
.screencastBox {
|
||||
padding-left: 10px;
|
||||
border-color: #aaaa66;
|
||||
background-color: #ffffcc;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.errormessage,
|
||||
.warningmessage,
|
||||
.donemessage,
|
||||
@@ -1014,7 +966,6 @@ table.colored th {
|
||||
|
||||
table.colored tr.header {
|
||||
background: $table-heading-bg;
|
||||
color: contrast(spin($base-color-3, 180));
|
||||
background-repeat: repeat-x;
|
||||
background-position: top;
|
||||
border-bottom: solid $table-border-color 1px;
|
||||
@@ -1132,18 +1083,14 @@ div.debug {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.search-box-input {
|
||||
border: 0;
|
||||
@extend .ui-input;
|
||||
float: left;
|
||||
outline: medium none;
|
||||
font-style: italic;
|
||||
font-size: inherit;
|
||||
}
|
||||
.search-box {
|
||||
vertical-align: bottom;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
// border: 1px solid #aaa;
|
||||
}
|
||||
.gray-background {
|
||||
background-color: #dddddd;
|
||||
@@ -1274,38 +1221,6 @@ ul.manage-table-actions li {
|
||||
background: $state-default-bg;
|
||||
}
|
||||
|
||||
.state-fg-new {
|
||||
color: #ffb030;
|
||||
}
|
||||
|
||||
.state-fg-upload {
|
||||
color: #d090d0;
|
||||
}
|
||||
|
||||
.state-fg-waiting {
|
||||
color: #e8c060;
|
||||
}
|
||||
|
||||
.state-fg-queued {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.state-fg-running {
|
||||
color: #aaaa66;
|
||||
}
|
||||
|
||||
.state-fg-ok {
|
||||
color: #66aa66;
|
||||
}
|
||||
|
||||
.state-fg-error {
|
||||
color: #aa6666;
|
||||
}
|
||||
|
||||
.state-fg-deleted {
|
||||
color: #3399ff;
|
||||
}
|
||||
|
||||
// Button styles
|
||||
|
||||
button {
|
||||
@@ -1340,19 +1255,11 @@ a.action-button {
|
||||
@extend .btn-secondary;
|
||||
}
|
||||
|
||||
//.action-button > * {
|
||||
// vertical-align: middle;
|
||||
//}
|
||||
|
||||
.action-button:hover {
|
||||
@extend .btn:hover;
|
||||
//color: black;
|
||||
//background: #dddddd;
|
||||
}
|
||||
.action-button:active {
|
||||
@extend .btn.active;
|
||||
//color: white;
|
||||
//background: #aaaaaa;
|
||||
}
|
||||
|
||||
// A menu button is a button that has an attached popup menu
|
||||
@@ -1373,14 +1280,6 @@ a.action-button {
|
||||
position: relative;
|
||||
@extend .unselectable;
|
||||
|
||||
// border: solid transparent 1px;
|
||||
// -moz-border-radius: 0.25em;
|
||||
// -webkit-border-radius: 0.25em;
|
||||
// border-radius: 0.25em;
|
||||
|
||||
// padding: 1px 0.25em;
|
||||
// margin: -1px -0.25em;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -1434,24 +1333,6 @@ a.action-button {
|
||||
}
|
||||
|
||||
// Popup menu styles
|
||||
|
||||
/*
|
||||
.overlay-border {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 1em;
|
||||
margin: -1em;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
-moz-border-radius: 1em;
|
||||
-webkit-border-radius: 1em;
|
||||
z-index: -1;
|
||||
}
|
||||
*/
|
||||
|
||||
// Galaxy popup menus
|
||||
div.popmenu-wrapper {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
@@ -1476,15 +1357,13 @@ ul.dropdown-menu {
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
line-height: $line-height-base;
|
||||
color: $gray-500;
|
||||
color: $text-color;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
li.head > a:hover {
|
||||
background: inherit;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
li > a {
|
||||
@extend .dropdown-item;
|
||||
}
|
||||
@@ -1582,7 +1461,7 @@ div.permissionContainer {
|
||||
|
||||
.editable-text:hover {
|
||||
cursor: text;
|
||||
border: dotted #999999 1px;
|
||||
border: dotted $border-default-color 1px;
|
||||
}
|
||||
|
||||
.icon-button.multiinput {
|
||||
@@ -1753,7 +1632,7 @@ div.toolTitleNoSection {
|
||||
|
||||
.toolMenuAndView .toolForm {
|
||||
float: left;
|
||||
background-color: white;
|
||||
background-color: $white;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
@@ -2010,7 +1889,7 @@ div.toolTitleNoSection {
|
||||
@extend .fa;
|
||||
@extend .fa-circle;
|
||||
@extend .mt-1;
|
||||
color: white;
|
||||
color: $white;
|
||||
position: absolute;
|
||||
z-index: 1500;
|
||||
> icon {
|
||||
@@ -2045,7 +1924,7 @@ div.toolTitleNoSection {
|
||||
}
|
||||
.mark-terminal {
|
||||
cursor: pointer;
|
||||
color: $gray-500;
|
||||
color: darken($border-default-color, 20%);
|
||||
&.mark-terminal-active {
|
||||
color: $brand-success;
|
||||
}
|
||||
@@ -2075,7 +1954,7 @@ div.toolTitleNoSection {
|
||||
border-top: solid gray 1px;
|
||||
border-left: solid grey 1px;
|
||||
padding: 7px 0 0 7px;
|
||||
background: $workflow-overview-border no-repeat url("../../images/resizable.png");
|
||||
background: $workflow-overview-bg no-repeat url("../../images/resizable.png");
|
||||
z-index: 20000;
|
||||
overflow: hidden;
|
||||
max-width: 300px;
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
top: 4px;
|
||||
.btn {
|
||||
background: white;
|
||||
color: #666;
|
||||
color: $panel-header-text-color;
|
||||
border: none;
|
||||
.icon {
|
||||
font-size: 1.5em;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
$frame-zindex: 1000;
|
||||
$frame-default-border: $gray-300;
|
||||
$frame-default-border: $border-default-color;
|
||||
|
||||
.galaxy-frame {
|
||||
.corner {
|
||||
@@ -8,7 +8,7 @@ $frame-default-border: $gray-300;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
color: gold;
|
||||
color: $dropdown-link-active-color;
|
||||
}
|
||||
|
||||
.frame-background {
|
||||
@@ -18,8 +18,8 @@ $frame-default-border: $gray-300;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0.6;
|
||||
background: $black;
|
||||
opacity: 0.5;
|
||||
background: $brand-dark;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@@ -30,7 +30,7 @@ $frame-default-border: $gray-300;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
opacity: 0.5;
|
||||
background: darken($base-color, 25%);
|
||||
background: $brand-dark;
|
||||
border: 1px solid $frame-default-border;
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@ $frame-default-border: $gray-300;
|
||||
z-index: $frame-zindex + 5;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
color: gold;
|
||||
color: $dropdown-link-active-color;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
@@ -98,7 +98,7 @@ $frame-default-border: $gray-300;
|
||||
margin: 2px;
|
||||
cursor: pointer;
|
||||
border: 1px solid $black;
|
||||
background: $base-color-1;
|
||||
background: $brand-dark;
|
||||
color: $white;
|
||||
.f-icon-left {
|
||||
cursor: pointer;
|
||||
@@ -146,7 +146,7 @@ $frame-default-border: $gray-300;
|
||||
background: $white;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: $base-color-1;
|
||||
color: $brand-dark;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
text-align: center;
|
||||
|
||||
@@ -1,34 +1,27 @@
|
||||
// Everything is derived from $base-color
|
||||
// Caveat: currently only works for light colored backgrounds, scss provides functions (contrast) that could be used to improve this
|
||||
|
||||
// Base color -- Based on the Galaxy masthead color
|
||||
$base-color-1: #2c3143;
|
||||
$base-color-2: lighten($base-color-1, 25%);
|
||||
$base-color-3: lighten($base-color-1, 50%);
|
||||
$base-color: $base-color-2;
|
||||
|
||||
// Default border bolor, this is between gray-light and gray-lighter -- classic Galaxy border color
|
||||
$border-default-color: lighten(black, 75%);
|
||||
|
||||
// Grays from Bootstrap 4 _variables.scss
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #6c757d !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
// Brand colors
|
||||
$brand-primary: #25537b;
|
||||
$brand-secondary: #dee2e6;
|
||||
$brand-success: #66cc66;
|
||||
$brand-info: #2077b3;
|
||||
$brand-warning: #fe7f02;
|
||||
$brand-danger: #e31a1e;
|
||||
$brand-light: #f8f9fa;
|
||||
$brand-dark: #2c3143;
|
||||
$brand-white: #fff;
|
||||
$brand-toggle: gold;
|
||||
|
||||
// Grays from Bootstrap 4 _variables.scss
|
||||
$white: $brand-white;
|
||||
$gray-100: $brand-light;
|
||||
$gray-200: darken($gray-100, 5%); // welcome background
|
||||
$gray-300: darken($gray-100, 10%);
|
||||
$gray-400: darken($gray-100, 20%); // input borders
|
||||
$gray-500: darken($gray-100, 40%);
|
||||
$gray-600: darken($gray-100, 60%); // text-muted
|
||||
$gray-700: darken($gray-100, 70%);
|
||||
$gray-800: darken($gray-100, 80%);
|
||||
$gray-900: darken($gray-100, 90%); // text-regular
|
||||
$black: $brand-dark;
|
||||
|
||||
// These variables don't actually determine the colors in Bootstrap 4, instead
|
||||
// they use a map called $theme-colors, so here we override that
|
||||
@@ -36,13 +29,13 @@ $theme-colors: ();
|
||||
$theme-colors: map-merge(
|
||||
(
|
||||
"primary": $brand-primary,
|
||||
"secondary": $gray-300,
|
||||
"secondary": $brand-secondary,
|
||||
"success": $brand-success,
|
||||
"info": $brand-info,
|
||||
"warning": $brand-warning,
|
||||
"danger": $brand-danger,
|
||||
"light": $gray-100,
|
||||
"dark": $gray-800
|
||||
"warning": $brand-warning,
|
||||
"info": $brand-info,
|
||||
"light": $brand-light,
|
||||
"dark": $brand-dark
|
||||
),
|
||||
$theme-colors
|
||||
);
|
||||
@@ -53,11 +46,10 @@ $theme-color-interval: 5% !default;
|
||||
// Alerts and states
|
||||
$alert-bg-level: -12 !default;
|
||||
$alert-border-level: -6 !default;
|
||||
$alert-color-level: 8 !default;
|
||||
$alert-color-level: 16 !default;
|
||||
|
||||
// These are not Bootstrap styles but are used extensively in Galaxy. This
|
||||
// duplicated the way that Bootstrap 4 alerts are derived.
|
||||
|
||||
$state-warning-text: theme-color-level("warning", $alert-color-level);
|
||||
$state-warning-bg: theme-color-level("warning", $alert-bg-level);
|
||||
$state-warning-border: theme-color-level("warning", $alert-border-level);
|
||||
@@ -90,12 +82,11 @@ $h5-font-size: $font-size-base; // default 1.25
|
||||
$h6-font-size: $font-size-base * 0.85; // default 1
|
||||
|
||||
// Increase contrast of dropdown items
|
||||
$dropdown-link-hover-color: white;
|
||||
$dropdown-link-hover-color: $brand-light;
|
||||
$dropdown-link-hover-bg: $brand-primary;
|
||||
$dropdown-link-active-color: gold;
|
||||
$dropdown-link-active-color: $brand-toggle;
|
||||
|
||||
// Additional variables that are not used by bootstrap but are used
|
||||
// in Galaxy stylesheets
|
||||
// Galaxy Variables (not used by bootstrap)
|
||||
$body-bg: $white;
|
||||
$text-color: $gray-900;
|
||||
|
||||
@@ -103,15 +94,18 @@ $text-color: $gray-900;
|
||||
$masthead-height: 3rem;
|
||||
|
||||
// Side panels
|
||||
$panel-bg-color: $gray-100; // #dfe5f9;
|
||||
$panel-text-color: $gray-900;
|
||||
$panel-header-bg-color: $gray-100;
|
||||
$panel-header-text-color: #555;
|
||||
$panel-message-height: 2.5rem; //1.875rem;
|
||||
$panel-bg-color: $gray-100;
|
||||
$panel-text-color: $text-color;
|
||||
$panel-header-text-color: $text-color;
|
||||
$panel-footer-bg-color: $panel-bg-color;
|
||||
$panel-message-height: 2.5rem;
|
||||
$panel-width: 18rem;
|
||||
$panel_header_height: 2.5rem;
|
||||
$panel_footer_height: 25px;
|
||||
|
||||
// Portlets
|
||||
$portlet-bg-color: $gray-200;
|
||||
|
||||
// Layout
|
||||
$layout_top_padding: 0px;
|
||||
$layout-border-color: $gray-900;
|
||||
@@ -120,41 +114,34 @@ $layout-border: none;
|
||||
// Borders
|
||||
$border-radius-base: 0.1875rem;
|
||||
$border-radius-large: 0.3125rem;
|
||||
$border-default-color: $gray-400;
|
||||
|
||||
// Buttons
|
||||
$btn-default-color: #333;
|
||||
$btn-default-bg: darken($white, 5%);
|
||||
$btn-default-color: $text-color;
|
||||
$btn-default-bg: $gray-200;
|
||||
$btn-default-border: $border-default-color;
|
||||
|
||||
// Forms
|
||||
$form-heading-bg: #ebd9b2;
|
||||
$form-heading-bg: $panel-bg-color;
|
||||
$form-border: darken($form-heading-bg, 20%);
|
||||
|
||||
// Table
|
||||
$table-heading-bg: $panel-bg-color;
|
||||
$table-bg-accent: #f9f9f9; // for striping
|
||||
$table-bg-accent: darken($panel-bg-color, 5%);
|
||||
$table-border-color: darken($table-heading-bg, 20%);
|
||||
|
||||
// Additional state colors
|
||||
$state-default-bg: $gray-200;
|
||||
$state-default-border: $border-default-color;
|
||||
$state-paused-bg: #d9edf7;
|
||||
$state-running-border: #aaaa66;
|
||||
$state-running-bg: #ffffcc;
|
||||
|
||||
// Navbar
|
||||
$navbar-height: 36px; // 2.062500rem;
|
||||
$navbar-default-bg: $gray-100; // JT #f8f8f8;
|
||||
$navbar-default-border: darken($navbar-default-bg, 20%);
|
||||
$state-paused-bg: lighten($brand-info, 50%);
|
||||
$state-running-bg: lighten($brand-warning, 40%);
|
||||
$state-running-border: $border-default-color;
|
||||
|
||||
// Workflow editor
|
||||
$workflow-editor-bg: white;
|
||||
$workflow-overview-border: $gray-200;
|
||||
$workflow-editor-bg: $brand-white;
|
||||
$workflow-overview-bg: $gray-200;
|
||||
|
||||
// Margins
|
||||
$spacer: 1rem; // Not sure why this is not coming from Bootstrap
|
||||
$spacer: 1rem;
|
||||
$margin-v: $spacer * 1.5;
|
||||
$margin-h: $spacer;
|
||||
|
||||
// Inputs
|
||||
$input-border: #aaa;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.tour-tour > .popover-title {
|
||||
background-color: $base-color-1;
|
||||
background-color: $brand-dark;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@@ -105,7 +105,7 @@ $ui-margin-horizontal-large: $margin-v * 2;
|
||||
height: 86px;
|
||||
font-size: 4em;
|
||||
padding: 20px 26px;
|
||||
color: lighten(#25537b, 10%);
|
||||
color: lighten($brand-primary, 10%);
|
||||
}
|
||||
.ui-thumbnails-text {
|
||||
word-wrap: break-word;
|
||||
@@ -199,7 +199,7 @@ $ui-margin-horizontal-large: $margin-v * 2;
|
||||
.portlet-header:first-child {
|
||||
@extend .card-header;
|
||||
@extend .rounded;
|
||||
background: $gray-200;
|
||||
background: $portlet-bg-color;
|
||||
.portlet-title {
|
||||
.portlet-title-text.collapsible {
|
||||
cursor: pointer;
|
||||
@@ -239,10 +239,10 @@ $ui-margin-horizontal-large: $margin-v * 2;
|
||||
@extend .ui-portlet;
|
||||
@extend .mb-2;
|
||||
border: none;
|
||||
border-left: solid 3px $gray-200;
|
||||
border-left: solid 3px $portlet-bg-color;
|
||||
border-radius: $border-radius-large;
|
||||
.portlet-header:first-child {
|
||||
background: $gray-200;
|
||||
background: $portlet-bg-color;
|
||||
@extend .rounded-0;
|
||||
border-top-right-radius: $border-radius-large !important;
|
||||
padding: 5px;
|
||||
@@ -277,7 +277,7 @@ $ui-margin-horizontal-large: $margin-v * 2;
|
||||
&[readonly],
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
background-color: $gray-200;
|
||||
background-color: $brand-light;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -478,7 +478,7 @@ $ui-margin-horizontal-large: $margin-v * 2;
|
||||
// select2 adjustments
|
||||
.select2-drop-active,
|
||||
.select2-drop-above.select2-drop-active {
|
||||
border: 1px solid $input-border;
|
||||
border: 1px solid $border-default-color;
|
||||
.select2-search {
|
||||
@extend .pt-1;
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
display: inline-block;
|
||||
|
||||
float: right;
|
||||
margin-top: -24px;
|
||||
margin-top: -25px;
|
||||
margin-right: 4px;
|
||||
|
||||
font-size: 1.4em;
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
height: 21px;
|
||||
margin: 0px;
|
||||
font-size: 0.75rem;
|
||||
background-color: #f5f5f5;
|
||||
background-color: $panel-bg-color;
|
||||
}
|
||||
.progress-bar-danger {
|
||||
background: $state-danger-bg;
|
||||
@@ -134,7 +134,7 @@
|
||||
height: 80px;
|
||||
resize: none;
|
||||
background: inherit;
|
||||
color: $black;
|
||||
color: $text-color;
|
||||
white-space: pre;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="style/base.css" type="text/css" />
|
||||
</head>
|
||||
<body style="margin: 0">
|
||||
<div class="jumbotron">
|
||||
<body class="m-0">
|
||||
<div class="jumbotron rounded-0">
|
||||
<div class="container">
|
||||
<h2>Hello, <strong>Galaxy</strong> is running!</h2>
|
||||
To customize this page edit <code>static/welcome.html</code>
|
||||
|
||||
@@ -84,9 +84,9 @@
|
||||
</div>
|
||||
%else:
|
||||
%if section:
|
||||
<div class="toolTitleDisabled">
|
||||
<div class="toolTitle text-muted">
|
||||
%else:
|
||||
<div class="toolTitleNoSectionDisabled">
|
||||
<div class="toolTitleNoSection text-muted">
|
||||
%endif
|
||||
%if "[[" in tool.description and "]]" in tool.description:
|
||||
${tool.description.replace( '[[', '' % tool.id ).replace( "]]", "" )}
|
||||
|
||||
Reference in New Issue
Block a user