mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-21 13:50:20 +08:00
Refactor theming, improve color contrast relationships between text and background
This commit is contained in:
guerler
@@ -20,15 +20,15 @@
|
||||
<div v-else class="ui-thumbnails-icon fa fa-eye" />
|
||||
</td>
|
||||
<td>
|
||||
<div class="ui-thumbnails-title font-weight-bold text-dark">{{ plugin.html }}</div>
|
||||
<div class="ui-thumbnails-text text-dark">{{ plugin.description }}</div>
|
||||
<div class="ui-thumbnails-title font-weight-bold">{{ plugin.html }}</div>
|
||||
<div class="ui-thumbnails-text">{{ plugin.description }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!fixed">
|
||||
<td />
|
||||
<td v-if="plugin.name == name">
|
||||
<div v-if="hdas && hdas.length > 0">
|
||||
<div class="font-weight-bold text-dark">Select a dataset to visualize:</div>
|
||||
<div class="font-weight-bold">Select a dataset to visualize:</div>
|
||||
<div class="ui-select">
|
||||
<select class="select" v-model="selected">
|
||||
<option v-for="file in hdas" :key="file.id" :value="file.id">{{
|
||||
|
||||
@@ -172,8 +172,8 @@ const View = Backbone.View.extend({
|
||||
`<div id="everything">
|
||||
<div id="background"/>
|
||||
<div id="masthead"/>
|
||||
<div id="messagebox"/>
|
||||
<div id="inactivebox" class="panel-warning-message" />
|
||||
<div id="messagebox" class="full-message"/>
|
||||
<div id="inactivebox" class="full-message panel-warning-message" />
|
||||
<div id="columns">
|
||||
<div id="left" class="unified-panel"/>
|
||||
<div id="center" />
|
||||
|
||||
@@ -158,12 +158,12 @@ const WorkflowItemView = Backbone.View.extend({
|
||||
<a class="dropdown-item" href="${getAppRoot()}api/workflows/${
|
||||
this.model.id
|
||||
}/download?format=json-download">Download</a>
|
||||
<a class="dropdown-item" id="copy-workflow">Copy</a>
|
||||
<a class="dropdown-item" id="rename-workflow">Rename</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)" id="copy-workflow">Copy</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)" id="rename-workflow">Rename</a>
|
||||
<a class="dropdown-item" href="${getAppRoot()}workflow/display_by_id?id=${
|
||||
this.model.id
|
||||
}">View</a>
|
||||
<a class="dropdown-item" id="delete-workflow">Delete</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)" id="delete-workflow">Delete</a>
|
||||
</div>`;
|
||||
} else {
|
||||
return `<div class="dropdown-menu">
|
||||
@@ -171,7 +171,7 @@ const WorkflowItemView = Backbone.View.extend({
|
||||
"owner"
|
||||
)}&slug=${this.model.get("slug")}">View</a>
|
||||
<a class="dropdown-item" href="${getAppRoot()}workflows/run?id=${this.model.id}">Run</a>
|
||||
<a class="dropdown-item" id="copy-workflow">Copy</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)" id="copy-workflow">Copy</a>
|
||||
<a class="dropdown-item link-confirm-shared-${
|
||||
this.model.id
|
||||
}" href="${getAppRoot()}workflow/sharing?unshare_me=True&id=${this.model.id}">Remove</a></li>
|
||||
|
||||
+173
-253
@@ -10,19 +10,9 @@
|
||||
$fa-font-path: "../../../node_modules/font-awesome/fonts/";
|
||||
@import "../../../node_modules/font-awesome/scss/font-awesome.scss";
|
||||
|
||||
.fa-icon {
|
||||
// TODO: remove fa-icon and replace with fa
|
||||
@extend .fa;
|
||||
}
|
||||
|
||||
@import "select2.scss";
|
||||
@import "jquery.rating.scss";
|
||||
|
||||
/* fix for zero width select2 - remove when fixed there */
|
||||
.select2-minwidth {
|
||||
min-width: 256px;
|
||||
}
|
||||
|
||||
// galaxy sub-components
|
||||
@import "reports";
|
||||
@import "frame.scss";
|
||||
@@ -38,7 +28,21 @@ $fa-font-path: "../../../node_modules/font-awesome/fonts/";
|
||||
@import "message.scss";
|
||||
@import "toolshed.scss";
|
||||
|
||||
// Mixins
|
||||
// ==== Select2 ====
|
||||
/* fix for zero width select2 - remove when fixed there */
|
||||
.select2-minwidth {
|
||||
min-width: 256px;
|
||||
}
|
||||
|
||||
.select2-drop-active,
|
||||
.select2-drop-above.select2-drop-active {
|
||||
border: $border-default;
|
||||
.select2-search {
|
||||
@extend .pt-1;
|
||||
}
|
||||
}
|
||||
|
||||
// ==== Mixins ====
|
||||
@mixin user-select($select) {
|
||||
-webkit-touch-callout: #{$select};
|
||||
@each $pre in -webkit-, -moz-, -ms-, -o-, -khtml- {
|
||||
@@ -47,17 +51,6 @@ $fa-font-path: "../../../node_modules/font-awesome/fonts/";
|
||||
#{user-select}: #{$select};
|
||||
}
|
||||
|
||||
.unselectable {
|
||||
@include user-select(none);
|
||||
}
|
||||
|
||||
.parent-width {
|
||||
//TODO: check out box-sizing w/ bs4
|
||||
//@include box-sizing(border-box);
|
||||
width: 100%;
|
||||
*width: 90%;
|
||||
}
|
||||
|
||||
@mixin border-radius($radius) {
|
||||
// from font-awesome 3.0
|
||||
-webkit-border-radius: $radius;
|
||||
@@ -65,121 +58,117 @@ $fa-font-path: "../../../node_modules/font-awesome/fonts/";
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
// ==== Real (basic) styles ====
|
||||
// ==== Basic styles ====
|
||||
|
||||
body {
|
||||
@extend .m-2;
|
||||
}
|
||||
|
||||
.unselectable {
|
||||
@include user-select(none);
|
||||
}
|
||||
|
||||
.parent-width {
|
||||
@extend .w-100;
|
||||
}
|
||||
|
||||
.clear {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
body {
|
||||
// ==== Page layout styles ====
|
||||
|
||||
.full-content {
|
||||
@extend .m-0;
|
||||
@extend .p-0;
|
||||
@extend .w-100;
|
||||
@extend .h-100;
|
||||
@extend .overflow-hidden;
|
||||
@extend .position-absolute;
|
||||
background: $body-bg;
|
||||
color: $text-color;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
// For panel layout pages
|
||||
&.full-content {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.full-message {
|
||||
@extend .w-100;
|
||||
@extend .overflow-hidden;
|
||||
height: $panel-message-height !important;
|
||||
border-bottom: solid $border-color 1px;
|
||||
font-size: 90%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#everything {
|
||||
@extend .d-flex;
|
||||
@extend .flex-column;
|
||||
@extend .full-content;
|
||||
}
|
||||
|
||||
#columns {
|
||||
@extend .position-relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#background {
|
||||
@extend .full-content;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
// Used for dragging panels, popup menus, to deal with capturing clicks in iframes
|
||||
#dd-helper {
|
||||
@extend .full-content;
|
||||
opacity: 0;
|
||||
z-index: 900; // Bootstrap elements start at 1000
|
||||
display: none;
|
||||
}
|
||||
|
||||
// ==== Panel layout styles ====
|
||||
|
||||
// Layout the paneled UI using flexbox.
|
||||
|
||||
#everything {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#columns {
|
||||
// Fill extra space in parent
|
||||
flex: 1;
|
||||
// Allow columns to be absolutely positioned inside
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#background {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#messagebox {
|
||||
width: 100%;
|
||||
height: $panel-message-height !important;
|
||||
overflow: hidden;
|
||||
border-bottom: solid $border-default-color 1px;
|
||||
font-size: 90%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#inactivebox {
|
||||
width: 100%;
|
||||
height: $panel-message-height !important;
|
||||
overflow: hidden;
|
||||
border-bottom: solid $border-default-color 1px;
|
||||
font-size: 90%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Panels
|
||||
#left,
|
||||
#center,
|
||||
#right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
@extend .position-absolute;
|
||||
@extend .h-100;
|
||||
@extend .overflow-hidden;
|
||||
}
|
||||
#left {
|
||||
@extend .unified-panel;
|
||||
left: 0px;
|
||||
width: $panel-width;
|
||||
border-right: $layout-border;
|
||||
}
|
||||
#right {
|
||||
@extend .unified-panel;
|
||||
right: 0px;
|
||||
width: $panel-width;
|
||||
border-left: $layout-border;
|
||||
}
|
||||
#right > .unified-panel-footer {
|
||||
.drag {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
#center {
|
||||
@extend .overflow-hidden;
|
||||
left: $panel-width;
|
||||
right: $panel-width;
|
||||
overflow: hidden;
|
||||
.center-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@extend .position-absolute;
|
||||
@extend .w-100;
|
||||
@extend .h-100;
|
||||
.center-panel {
|
||||
@extend .position-absolute;
|
||||
@extend .w-100;
|
||||
@extend .h-100;
|
||||
@extend .overflow-auto;
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: $margin-h $margin-v;
|
||||
overflow: auto;
|
||||
background: $brand-white;
|
||||
background: $white;
|
||||
}
|
||||
.center-frame {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@extend .position-absolute;
|
||||
@extend .w-100;
|
||||
@extend .h-100;
|
||||
}
|
||||
}
|
||||
// Replaces unnecessary if/then logic in base_panels.mako
|
||||
@@ -191,50 +180,58 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
#left,
|
||||
#right,
|
||||
.unified-panel {
|
||||
background: $panel-bg-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
// ==== Unified panel styles ====
|
||||
|
||||
.unified-panel {
|
||||
display: flex;
|
||||
@extend .flex-column;
|
||||
background: $panel-bg-color;
|
||||
}
|
||||
.unified-panel-header {
|
||||
@extend .unselectable;
|
||||
@extend .mx-3;
|
||||
@extend .px-3;
|
||||
@extend .d-flex;
|
||||
height: $panel_header_height;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $panel-header-text-color;
|
||||
background: $panel-bg-header-color;
|
||||
a {
|
||||
color: $panel-header-text-color;
|
||||
}
|
||||
.unified-panel-header-inner {
|
||||
width: 100%;
|
||||
@extend .w-100;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.panel-header-buttons {
|
||||
@extend .float-right;
|
||||
order: 9999;
|
||||
float: right;
|
||||
.panel-header-button {
|
||||
text-align: center;
|
||||
&:not(:last-child) {
|
||||
@extend .mr-2;
|
||||
}
|
||||
&:hover {
|
||||
color: $brand-info;
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unified-panel-controls {
|
||||
@extend .px-3;
|
||||
}
|
||||
|
||||
.unified-panel-body {
|
||||
@extend .p-0;
|
||||
@extend .w-100;
|
||||
@extend .h-100;
|
||||
@extend .overflow-auto;
|
||||
flex: 1;
|
||||
}
|
||||
.unified-panel-body-background {
|
||||
background: none repeat scroll 0 0 $panel-bg-color;
|
||||
}
|
||||
.unified-panel-footer {
|
||||
@extend .unselectable;
|
||||
position: relative;
|
||||
@@ -262,15 +259,9 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
#right > .unified-panel-footer {
|
||||
.drag {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Needs to be outside panel to show when hidden
|
||||
.panel-collapse {
|
||||
@extend .fa-icon;
|
||||
@extend .fa;
|
||||
$border-color: darken($panel-footer-bg-color, 20%);
|
||||
font-size: 4/3em;
|
||||
cursor: pointer;
|
||||
@@ -315,35 +306,6 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.menu-bg {
|
||||
background: whiteSmoke top repeat-x;
|
||||
}
|
||||
|
||||
div.unified-panel-body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
div.unified-panel-body-background {
|
||||
background: none repeat scroll 0 0 $panel-bg-color;
|
||||
}
|
||||
|
||||
// Used for dragging panels, popup menus, to deal with capturing clicks in iframes
|
||||
#dd-helper {
|
||||
background: white;
|
||||
opacity: 0;
|
||||
z-index: 900; // Bootstrap elements start at 1000
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Messages for message box, slightly different style
|
||||
|
||||
.panel-error-message,
|
||||
@@ -379,10 +341,11 @@ div.unified-panel-body-background {
|
||||
}
|
||||
}
|
||||
|
||||
// Masthead
|
||||
// ==== Masthead ====
|
||||
|
||||
#masthead {
|
||||
padding: 0;
|
||||
margin-bottom: 0px;
|
||||
@extend .p-0;
|
||||
@extend .mb-0;
|
||||
background-color: $brand-dark;
|
||||
height: $masthead-height;
|
||||
.navbar-nav {
|
||||
@@ -395,48 +358,47 @@ div.unified-panel-body-background {
|
||||
align-items: center;
|
||||
&.active {
|
||||
background: darken($brand-dark, 10%);
|
||||
.nav-link {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.nav-link {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: $gray-300;
|
||||
&:hover {
|
||||
color: $dropdown-link-active-color;
|
||||
color: $brand-toggle;
|
||||
}
|
||||
&.nav-icon {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
&.toggle {
|
||||
color: $dropdown-link-active-color;
|
||||
color: $brand-toggle;
|
||||
}
|
||||
}
|
||||
.nav-note {
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
position: relative;
|
||||
right: 5px;
|
||||
top: 10px;
|
||||
color: $dropdown-link-active-color;
|
||||
width: 0px;
|
||||
@extend .font-weight-bold;
|
||||
@extend .position-relative;
|
||||
right: 0.4rem;
|
||||
top: 0.7rem;
|
||||
font-size: 0.7rem;
|
||||
color: $brand-toggle;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-brand {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
// top: 0;
|
||||
@extend .position-absolute;
|
||||
@extend .font-weight-bold;
|
||||
left: 0.3rem;
|
||||
top: 0;
|
||||
font-family: verdana;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
// line-height: 1;
|
||||
color: $white;
|
||||
// Override margin and padding due to shorter navbar height
|
||||
padding: 5px 20px 12px;
|
||||
margin-left: -15px;
|
||||
font-size: 1.25rem;
|
||||
color: $gray-300;
|
||||
text-decoration: none;
|
||||
.navbar-brand-image {
|
||||
display: inline;
|
||||
width: 26px;
|
||||
// vertical-align: top;
|
||||
margin-left: 0.35em;
|
||||
border: none;
|
||||
}
|
||||
@@ -446,9 +408,10 @@ div.unified-panel-body-background {
|
||||
}
|
||||
}
|
||||
|
||||
// ==== Quota meter styles ====
|
||||
|
||||
.quota-meter-container {
|
||||
position: absolute;
|
||||
// top: 0;
|
||||
right: 0;
|
||||
height: 32px;
|
||||
}
|
||||
@@ -528,11 +491,11 @@ div.metadataFormBody div.metadataFormTitle {
|
||||
|
||||
div.metadataFormDisabled div.metadataFormTitle {
|
||||
background: #eee;
|
||||
border-color: $border-default-color;
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
div.metadataFormDisabled {
|
||||
border-color: $border-default-color;
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
div.metadataHelpBody {
|
||||
@@ -552,11 +515,11 @@ div.toolFormBody div.toolFormTitle {
|
||||
|
||||
div.toolFormDisabled div.toolFormTitle {
|
||||
background: #f5f5f5;
|
||||
border-color: $border-default-color;
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
div.toolFormDisabled {
|
||||
border-color: $border-default-color;
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
div.toolHelp {
|
||||
@@ -693,18 +656,6 @@ div.form-row-input label {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
// Selects
|
||||
select {
|
||||
padding: 2px;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
select,
|
||||
input,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
select,
|
||||
@@ -718,23 +669,6 @@ textarea {
|
||||
display: block;
|
||||
}
|
||||
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
// Always style buttons and submits as bootstrap buttons
|
||||
input[type="submit"],
|
||||
button {
|
||||
@extend .btn;
|
||||
@extend .btn-secondary;
|
||||
&.btn-primary {
|
||||
@extend .btn-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Messages
|
||||
|
||||
.errormessagelarge,
|
||||
@@ -792,8 +726,6 @@ button {
|
||||
padding: 5px;
|
||||
padding-left: 25px;
|
||||
min-height: 15px;
|
||||
//border: 1px solid $error_message_border;
|
||||
//background-color: $error_message_bg;
|
||||
background-image: url(../../images/error_small.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 5px 6px;
|
||||
@@ -923,55 +855,49 @@ div.debug {
|
||||
}
|
||||
|
||||
// Data grid style
|
||||
|
||||
.grid-table {
|
||||
width: 100%;
|
||||
@extend .w-100;
|
||||
}
|
||||
.grid-header {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
.grid-header h2 {
|
||||
margin: 0;
|
||||
margin-bottom: 0.5em;
|
||||
@extend .mb-2;
|
||||
}
|
||||
.grid-header .title {
|
||||
font-weight: bold;
|
||||
@extend .font-weight-bold;
|
||||
}
|
||||
.grid {
|
||||
padding-top: 1em;
|
||||
@extend .pt-2;
|
||||
@extend .w-100;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
.grid tbody td {
|
||||
line-height: $line-height-base;
|
||||
border-top: solid #dddddd 1px;
|
||||
border-bottom: solid #dddddd 1px;
|
||||
padding: 5px;
|
||||
@extend .border-top;
|
||||
@extend .border-bottom;
|
||||
@extend .p-1;
|
||||
}
|
||||
.grid tbody td:empty {
|
||||
padding: 0;
|
||||
@extend .p-0;
|
||||
}
|
||||
.grid thead tr {
|
||||
height: 2em;
|
||||
}
|
||||
.grid thead th {
|
||||
@extend .p-1;
|
||||
@extend .border-top;
|
||||
@extend .border-bottom;
|
||||
line-height: $line-height-base;
|
||||
background: $table-heading-bg;
|
||||
color: contrast($table-heading-bg);
|
||||
border-top: solid $table-border-color 1px;
|
||||
border-bottom: solid $table-border-color 1px;
|
||||
padding: 5px;
|
||||
background: $brand-light;
|
||||
color: $text-color;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.grid tfoot td {
|
||||
background-color: #f8f8f8;
|
||||
border-top: solid #dddddd 1px;
|
||||
border-bottom: solid #dddddd 1px;
|
||||
padding: 5px;
|
||||
@extend .border-top;
|
||||
@extend .border-bottom;
|
||||
@extend .p-1;
|
||||
background-color: $brand-light;
|
||||
}
|
||||
.grid .current {
|
||||
background-color: #eeeeff;
|
||||
background-color: lighten($brand-success, 20%);
|
||||
}
|
||||
|
||||
// Pulled out of grid base
|
||||
@@ -1077,32 +1003,25 @@ ul.manage-table-actions li {
|
||||
}
|
||||
|
||||
.state-progress {
|
||||
border: 1px solid gray;
|
||||
position: relative;
|
||||
|
||||
margin-top: 2px;
|
||||
margin-bottom: 1px;
|
||||
|
||||
@extend .position-relative;
|
||||
@extend .m-1;
|
||||
border: $border-default;
|
||||
.info {
|
||||
color: $black;
|
||||
background: $white;
|
||||
color: $text-color;
|
||||
background: $body-bg;
|
||||
}
|
||||
|
||||
.new {
|
||||
background: $state-default-bg;
|
||||
}
|
||||
|
||||
.running {
|
||||
background: $state-running-bg;
|
||||
}
|
||||
|
||||
.ok {
|
||||
background: $state-success-bg;
|
||||
}
|
||||
|
||||
.note {
|
||||
margin-left: 1em;
|
||||
position: absolute;
|
||||
@extend .position-absolute;
|
||||
@extend .ml-2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1170,6 +1089,7 @@ a.btn {
|
||||
}
|
||||
a.action-button {
|
||||
color: $btn-default-color;
|
||||
background: $btn-default-bg;
|
||||
text-decoration: none;
|
||||
}
|
||||
.action-button > img {
|
||||
@@ -1370,7 +1290,7 @@ div.permissionContainer {
|
||||
|
||||
.editable-text:hover {
|
||||
cursor: text;
|
||||
border: dotted $border-default-color 1px;
|
||||
border: dotted $border-color 1px;
|
||||
}
|
||||
|
||||
.icon-button.multiinput {
|
||||
@@ -1753,7 +1673,7 @@ div.toolSectionWrapper {
|
||||
@extend .fa;
|
||||
@extend .fa-circle;
|
||||
@extend .mt-1;
|
||||
color: $white;
|
||||
color: $brand-light;
|
||||
position: absolute;
|
||||
z-index: 1500;
|
||||
> icon {
|
||||
@@ -1791,7 +1711,7 @@ div.toolSectionWrapper {
|
||||
}
|
||||
.mark-terminal {
|
||||
cursor: pointer;
|
||||
color: darken($border-default-color, 20%);
|
||||
color: $gray-500;
|
||||
&.mark-terminal-active {
|
||||
color: $brand-success;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
.charts-client {
|
||||
background: $body-bg;
|
||||
.charts-buttons {
|
||||
@extend .float-right;
|
||||
position: absolute;
|
||||
@@ -7,7 +8,7 @@
|
||||
width: 170px;
|
||||
top: 4px;
|
||||
.btn {
|
||||
background: white;
|
||||
background: $body-bg;
|
||||
color: $panel-header-text-color;
|
||||
border: none;
|
||||
.icon {
|
||||
@@ -60,8 +61,8 @@
|
||||
float: left;
|
||||
width: 30%;
|
||||
height: 100vh;
|
||||
padding-bottom: 32px;
|
||||
padding-top: 32px;
|
||||
padding-bottom: 40px;
|
||||
padding-top: 40px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// ---------------------------------------------------------------------------- dataset states
|
||||
//.dataset .state-icon {
|
||||
.state-icon {
|
||||
@extend .fa-icon;
|
||||
@extend .fa;
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
@@ -309,17 +309,15 @@
|
||||
@extend %vertical-spacing;
|
||||
.annotation {
|
||||
@extend %info-section;
|
||||
//white-space: pre-line;
|
||||
white-space: pre-wrap;
|
||||
overflow: auto;
|
||||
}
|
||||
// fake placeholder for editable text annotation
|
||||
.annotation:empty:after {
|
||||
position: relative;
|
||||
top: -4px;
|
||||
font-size: 10px;
|
||||
font-style: italic;
|
||||
color: grey;
|
||||
@extend .position-relative;
|
||||
@extend .font-italic;
|
||||
@extend .h6;
|
||||
color: $gray-500;
|
||||
//TODO: move out for localization
|
||||
content: "Click here to edit annotation";
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
$frame-zindex: 1000;
|
||||
$frame-default-border: $border-default-color;
|
||||
$frame-default-border: $border-color;
|
||||
|
||||
.galaxy-frame {
|
||||
.corner {
|
||||
|
||||
@@ -39,13 +39,13 @@
|
||||
.annotation-display {
|
||||
display: none;
|
||||
margin-bottom: 8px;
|
||||
color: $gray-500;
|
||||
.prompt {
|
||||
display: block;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 90%;
|
||||
font-weight: normal;
|
||||
color: #555;
|
||||
}
|
||||
.prompt:after {
|
||||
content: ":";
|
||||
@@ -66,7 +66,7 @@
|
||||
top: -4px;
|
||||
font-size: 10px;
|
||||
font-style: italic;
|
||||
color: grey;
|
||||
color: $gray-500;
|
||||
//TODO: move out for localization
|
||||
content: "Click here to edit annotation";
|
||||
}
|
||||
@@ -77,13 +77,11 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.list-pagination {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
border-top: 1px solid $btn-default-border;
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -98,7 +96,6 @@
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 48%;
|
||||
@@ -107,7 +104,6 @@
|
||||
box-shadow: none;
|
||||
text-align: center;
|
||||
text-align-last: center;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
@@ -123,7 +119,7 @@
|
||||
border-radius: 0px;
|
||||
background: transparent;
|
||||
&.pages {
|
||||
color: grey;
|
||||
color: $gray-500;
|
||||
text-decoration: underline;
|
||||
}
|
||||
&:hover,
|
||||
@@ -135,7 +131,6 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > *:not([disabled]) {
|
||||
color: $btn-default-color;
|
||||
}
|
||||
@@ -145,7 +140,7 @@
|
||||
// the help text that appears above the drop target
|
||||
.history-drop-target-help {
|
||||
margin: 10px 10px 4px 10px;
|
||||
color: grey;
|
||||
color: $gray-500;
|
||||
font-size: 80%;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
@@ -163,7 +158,7 @@
|
||||
overflow-y: auto;
|
||||
|
||||
&:not(:empty) {
|
||||
border-top: 1px solid $border-default-color;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
&:empty {
|
||||
flex-grow: 0 !important;
|
||||
@@ -183,7 +178,7 @@
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: grey;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.history-content.dataset,
|
||||
@@ -427,7 +422,7 @@
|
||||
& > .header,
|
||||
& > .footer {
|
||||
width: 100%;
|
||||
background-color: lightgrey;
|
||||
background-color: $white;
|
||||
.btn {
|
||||
height: 21px;
|
||||
}
|
||||
@@ -466,7 +461,6 @@
|
||||
// the header/footers controls
|
||||
.control-column {
|
||||
margin-top: 4px;
|
||||
|
||||
.btn {
|
||||
@extend .btn-sm;
|
||||
}
|
||||
@@ -477,9 +471,8 @@
|
||||
.header-info {
|
||||
display: inline-block;
|
||||
padding: 2px 4px 2px 4px;
|
||||
color: grey;
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
&.control-column-right,
|
||||
&.control-column-left {
|
||||
margin-right: 8px;
|
||||
@@ -512,7 +505,7 @@
|
||||
.middle {
|
||||
min-width: 100%;
|
||||
margin: 0px 0px 0px 0px;
|
||||
background-color: white;
|
||||
background-color: $white;
|
||||
padding: $mph-column_gap 0px;
|
||||
}
|
||||
|
||||
@@ -524,7 +517,7 @@
|
||||
&:first-child {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
background-color: white;
|
||||
background-color: $white;
|
||||
width: $mph-column_width + $mph-column_gap;
|
||||
padding-left: $mph-column_gap;
|
||||
|
||||
@@ -544,7 +537,7 @@
|
||||
.panel-controls {
|
||||
width: 100%;
|
||||
height: ($mph-controls_height + 4);
|
||||
background-color: white;
|
||||
background-color: $white;
|
||||
|
||||
.btn {
|
||||
@extend .btn-sm;
|
||||
@@ -557,20 +550,17 @@
|
||||
}
|
||||
.current-label {
|
||||
display: inline-block;
|
||||
color: grey;
|
||||
color: $gray-500;
|
||||
padding-left: 2px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
.history-panel {
|
||||
width: 100%;
|
||||
|
||||
border: $mph-border_width solid grey;
|
||||
border-radius: 3px 3px 0px 0px;
|
||||
background-color: $panel-bg-color;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
& > .controls .subtitle {
|
||||
min-height: 15px;
|
||||
margin: -4px 0px 8px;
|
||||
@@ -578,7 +568,6 @@
|
||||
content: ", ";
|
||||
}
|
||||
}
|
||||
|
||||
& > .controls .list-pagination {
|
||||
// text a bit smaller for all
|
||||
font-size: 90%;
|
||||
@@ -597,7 +586,7 @@
|
||||
transform-origin: left top 0;
|
||||
margin-left: 16px;
|
||||
white-space: nowrap;
|
||||
color: grey;
|
||||
color: $gray-500;
|
||||
span {
|
||||
// space btwn icon and text
|
||||
margin-right: 8px;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// ---------------------------------------------------------------------------- generic panel list items
|
||||
.job.list-item {
|
||||
border: 1px solid $border-default-color;
|
||||
border: 1px solid $border-color;
|
||||
|
||||
.title-bar {
|
||||
.subtitle {
|
||||
@@ -45,7 +45,7 @@
|
||||
.list-item {
|
||||
border: 0px;
|
||||
border-radius: 0px;
|
||||
border-top: 1px solid $border-default-color;
|
||||
border-top: 1px solid $border-color;
|
||||
&:last-child {
|
||||
}
|
||||
}
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
color: $brand-light;
|
||||
}
|
||||
tr.table-primary td a {
|
||||
color: $brand-white;
|
||||
color: $white;
|
||||
}
|
||||
a.dark {
|
||||
color: white;
|
||||
|
||||
@@ -13,11 +13,11 @@ $vertical-gap: 8px;
|
||||
|
||||
%help-text {
|
||||
font-weight: normal;
|
||||
color: #555;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
border: 1px solid $border-default-color;
|
||||
border: 1px solid $border-color;
|
||||
|
||||
.vertical-spacing {
|
||||
@extend %vertical-spacing;
|
||||
@@ -51,7 +51,7 @@ $vertical-gap: 8px;
|
||||
.help-text {
|
||||
@extend %help-text;
|
||||
font-weight: normal;
|
||||
color: #555;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
.selector {
|
||||
@@ -88,14 +88,14 @@ $vertical-gap: 8px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.subtitle {
|
||||
color: #777;
|
||||
color: $gray-500;
|
||||
font-size: 90%;
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
.state-description {
|
||||
color: #777;
|
||||
color: $gray-500;
|
||||
font-size: 90%;
|
||||
a {
|
||||
color: inherit;
|
||||
@@ -156,7 +156,7 @@ $vertical-gap: 8px;
|
||||
}
|
||||
}
|
||||
.subtitle {
|
||||
color: #777;
|
||||
color: $gray-500;
|
||||
font-size: 90%;
|
||||
a {
|
||||
color: inherit;
|
||||
@@ -225,7 +225,7 @@ $vertical-gap: 8px;
|
||||
background: white;
|
||||
padding: 4px;
|
||||
.list-items {
|
||||
border: 1px solid $border-default-color;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 3px;
|
||||
.list-item {
|
||||
&:first-child {
|
||||
|
||||
@@ -25,7 +25,7 @@ pre {
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
border: 1px solid $border-default-color;
|
||||
border: $border-default;
|
||||
}
|
||||
|
||||
.popover .popover-body {
|
||||
@@ -38,6 +38,12 @@ pre {
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item, .dropdown-header {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
// Input fields
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
margin-left: 0.5ex;
|
||||
@@ -45,6 +51,35 @@ input[type="radio"] {
|
||||
float: left;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 2px;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
select,
|
||||
input,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
// Always style buttons and submits as bootstrap buttons
|
||||
input[type="submit"],
|
||||
button {
|
||||
@extend .btn;
|
||||
@extend .btn-secondary;
|
||||
&.btn-primary {
|
||||
@extend .btn-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal -- wider by default, scroll like Trello
|
||||
|
||||
.modal-dialog {
|
||||
@@ -64,6 +99,14 @@ input[type="radio"] {
|
||||
@extend .mb-2;
|
||||
}
|
||||
|
||||
.tabbable {
|
||||
.nav-tabs {
|
||||
.nav-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Don't make blockquotes very large since they're often used in the toolform
|
||||
// and this does not look nice to have a quoted portion of a tool's help
|
||||
// documentation be rendered 150% larger.
|
||||
|
||||
@@ -7,22 +7,27 @@ $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;
|
||||
// Light grays for backgrounds
|
||||
$white: lighten($brand-light, 5%); // body background
|
||||
$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
|
||||
$gray-200: darken($brand-light, 5%); // welcome background
|
||||
$gray-300: darken($brand-light, 10%);
|
||||
|
||||
// Dark grays for text colors
|
||||
$gray-900: $brand-dark; // text-regular
|
||||
$gray-800: lighten($gray-900, 10%);
|
||||
$gray-700: lighten($gray-900, 10%);
|
||||
$gray-600: lighten($gray-900, 10%); // text-muted
|
||||
$gray-500: lighten($gray-900, 10%);
|
||||
$gray-400: lighten($gray-900, 60%); // default borders
|
||||
$black: $brand-dark;
|
||||
|
||||
// Text colors
|
||||
$text-color: $gray-900;
|
||||
$text-muted: $gray-600;
|
||||
|
||||
// These variables don't actually determine the colors in Bootstrap 4, instead
|
||||
// they use a map called $theme-colors, so here we override that
|
||||
$theme-colors: ();
|
||||
@@ -84,19 +89,22 @@ $h6-font-size: $font-size-base * 0.85; // default 1
|
||||
// Increase contrast of dropdown items
|
||||
$dropdown-link-hover-color: $brand-light;
|
||||
$dropdown-link-hover-bg: $brand-primary;
|
||||
$dropdown-link-active-color: $brand-toggle;
|
||||
|
||||
// Color of input elements
|
||||
$input-color: $text-color;
|
||||
$input-color-placeholder: $text-muted;
|
||||
|
||||
// Galaxy Variables (not used by bootstrap)
|
||||
$body-bg: $white;
|
||||
$text-color: $gray-900;
|
||||
|
||||
// Masthead
|
||||
$masthead-height: 3rem;
|
||||
|
||||
// Side panels
|
||||
$panel-bg-color: $gray-100;
|
||||
$panel-bg-color: $brand-light;
|
||||
$panel-text-color: $text-color;
|
||||
$panel-header-text-color: $text-color;
|
||||
$panel-bg-header-color: $panel-bg-color;
|
||||
$panel-footer-bg-color: $panel-bg-color;
|
||||
$panel-message-height: 2.5rem;
|
||||
$panel-width: 18rem;
|
||||
@@ -115,13 +123,13 @@ $layout-border: none;
|
||||
$border-radius-base: 0.1875rem;
|
||||
$border-radius-large: 0.3125rem;
|
||||
$border-radius-extralarge: 1rem;
|
||||
$border-default-color: $gray-400;
|
||||
$border-default: 1px solid $border-default-color;
|
||||
$border-color: $gray-400;
|
||||
$border-default: 1px solid $border-color;
|
||||
|
||||
// Buttons
|
||||
$btn-default-color: $text-color;
|
||||
$btn-default-bg: $gray-200;
|
||||
$btn-default-border: $border-default-color;
|
||||
$btn-default-border: $border-color;
|
||||
|
||||
// Forms
|
||||
$form-heading-bg: $panel-bg-color;
|
||||
@@ -130,17 +138,17 @@ $form-border: darken($form-heading-bg, 20%);
|
||||
// Table
|
||||
$table-heading-bg: $panel-bg-color;
|
||||
$table-bg-accent: darken($panel-bg-color, 5%);
|
||||
$table-border-color: darken($table-heading-bg, 20%);
|
||||
$table-border-color: $gray-400;
|
||||
|
||||
// Additional state colors
|
||||
$state-default-bg: $gray-200;
|
||||
$state-default-border: $border-default-color;
|
||||
$state-default-border: $border-color;
|
||||
$state-paused-bg: lighten($brand-info, 50%);
|
||||
$state-running-bg: lighten($brand-warning, 40%);
|
||||
$state-running-border: $border-default-color;
|
||||
$state-running-border: $border-color;
|
||||
|
||||
// Workflow editor
|
||||
$workflow-editor-bg: $brand-white;
|
||||
$workflow-editor-bg: $white;
|
||||
$workflow-overview-bg: $gray-200;
|
||||
|
||||
// Margins
|
||||
|
||||
@@ -84,13 +84,6 @@ $ui-margin-horizontal-large: $margin-v * 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// tabs
|
||||
.tabbable {
|
||||
.nav-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// thumbnails
|
||||
.ui-thumbnails {
|
||||
.ui-thumbnails-item {
|
||||
@@ -105,7 +98,7 @@ $ui-margin-horizontal-large: $margin-v * 2;
|
||||
height: 86px;
|
||||
font-size: 4em;
|
||||
padding: 20px 26px;
|
||||
color: lighten($brand-primary, 10%);
|
||||
color: $text-color;
|
||||
}
|
||||
.ui-thumbnails-text {
|
||||
word-wrap: break-word;
|
||||
@@ -253,9 +246,9 @@ $ui-margin-horizontal-large: $margin-v * 2;
|
||||
|
||||
// popovers
|
||||
.popover {
|
||||
max-width: 700px;
|
||||
max-width: 70%;
|
||||
.popover-header {
|
||||
color: $brand-white;
|
||||
color: $brand-light;
|
||||
background-color: $brand-primary;
|
||||
i {
|
||||
@extend .float-right;
|
||||
@@ -477,12 +470,3 @@ $ui-margin-horizontal-large: $margin-v * 2;
|
||||
border: 2px solid $state-success-bg;
|
||||
background: lighten($state-success-bg, 10%) !important;
|
||||
}
|
||||
|
||||
// select2 adjustments
|
||||
.select2-drop-active,
|
||||
.select2-drop-above.select2-drop-active {
|
||||
border: 1px solid $border-default-color;
|
||||
.select2-search {
|
||||
@extend .pt-1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
$icon-btn-size: 22px;
|
||||
$icon-btn-margin: 2px;
|
||||
$icon-btn-color: $btn-default-color;
|
||||
|
||||
$icon-btn-bg: $btn-default-bg;
|
||||
$icon-btn-border: $btn-default-border;
|
||||
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
.search-input {
|
||||
@extend .mb-2;
|
||||
::placeholder {
|
||||
color: $gray-500;
|
||||
}
|
||||
.search-clear,
|
||||
.search-loading {
|
||||
@extend .mr-2;
|
||||
@@ -28,7 +31,7 @@
|
||||
border: $border-default;
|
||||
@include border-radius($border-radius-extralarge);
|
||||
max-width: auto;
|
||||
background: $brand-white;
|
||||
background: $white;
|
||||
}
|
||||
.search-query:focus {
|
||||
border-color: $brand-info;
|
||||
|
||||
@@ -39,6 +39,7 @@
|
||||
|
||||
.upload-input {
|
||||
font-size: $font-size-base;
|
||||
color: $text-color;
|
||||
height: 20px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user