mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
569 lines
12 KiB
Plaintext
569 lines
12 KiB
Plaintext
// prevents highlighting i.e. text selection on double click
|
|
.no-highlight {
|
|
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
|
|
-moz-user-select: none; /* mozilla browsers */
|
|
-khtml-user-select: none; /* webkit (konqueror) browsers */
|
|
-ms-user-select: none; /* IE10+ */
|
|
}
|
|
|
|
// remove padding
|
|
.no-padding {
|
|
padding: 0px !important;
|
|
}
|
|
|
|
// default margins
|
|
@ui-margin-vertical: 5px;
|
|
@ui-margin-horizontal: 5px;
|
|
|
|
// margins
|
|
.ui-margin-top {
|
|
padding-top: @ui-margin-vertical !important;
|
|
}
|
|
|
|
.ui-margin-bottom {
|
|
margin-bottom: @ui-margin-vertical !important;
|
|
}
|
|
|
|
.ui-margin-both {
|
|
&:extend(ui-margin-top);
|
|
&:extend(ui-margin-bottom);
|
|
}
|
|
|
|
// non-interactive elements
|
|
.ui-error {
|
|
-moz-border-radius: @border-radius-base;
|
|
border-radius: @border-radius-base;
|
|
background: @state-danger-bg;
|
|
padding: @ui-margin-vertical;
|
|
}
|
|
|
|
.ui-label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ui-message {
|
|
padding: 2px 10px 2px 10px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.ui-icon {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
// buttons
|
|
.ui-button-icon {
|
|
&:extend(.icon-btn);
|
|
&:extend(.no-highlight);
|
|
height: auto !important;
|
|
ul {
|
|
i {
|
|
font-size: 1.2em;
|
|
margin-right: @ui-margin-horizontal;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
}
|
|
.button {
|
|
margin-right: @ui-margin-horizontal;
|
|
margin-left: @ui-margin-horizontal;
|
|
|
|
.title {
|
|
position: relative;
|
|
font-size: 0.8em;
|
|
font-weight: normal;
|
|
top: -1px;
|
|
}
|
|
}
|
|
.button.disabled {
|
|
.opacity(.65);
|
|
}
|
|
}
|
|
|
|
.ui-button-menu {
|
|
.dropdown-menu {
|
|
min-width: 50px;
|
|
}
|
|
.dropdown-item {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.ui-button-icon-plain {
|
|
&:extend(.icon-btn);
|
|
border: none !important;
|
|
background: none !important;
|
|
height: inherit !important;
|
|
width: inherit !important;
|
|
padding-right: 3px !important;
|
|
}
|
|
|
|
// tabs
|
|
.ui-tabs {
|
|
.ui-tabs-add {
|
|
font-size : 0.8em;
|
|
margin-right : @ui-margin-horizontal;
|
|
}
|
|
|
|
.ui-tabs-delete {
|
|
font-size : 0.8em;
|
|
margin-left : @ui-margin-horizontal;
|
|
cursor : pointer;
|
|
}
|
|
}
|
|
|
|
// tables
|
|
.ui-table {
|
|
&:extend(.grid);
|
|
|
|
tbody {
|
|
cursor: pointer;
|
|
td {
|
|
&:extend(.grid tbody td);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-table-plain {
|
|
&:extend(.ui-table all);
|
|
table-layout:fixed;
|
|
|
|
tbody {
|
|
cursor: auto !important;
|
|
td {
|
|
padding: 0px !important;
|
|
border: none !important;
|
|
}
|
|
}
|
|
|
|
.ui-table-section {
|
|
border-left: solid 3px @form-heading-bg;
|
|
border-radius: @border-radius-large !important;
|
|
margin-bottom: @ui-margin-vertical;
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
|
|
// table form elements
|
|
.ui-table-form-element {
|
|
.ui-table-form-title {
|
|
font-weight: bold;
|
|
.ui-table-form-optional {
|
|
cursor: pointer;
|
|
.icon {
|
|
margin-right: 5px;
|
|
font-size: 1.2em;
|
|
}
|
|
}
|
|
}
|
|
.ui-table-form-field {
|
|
margin-top: @ui-margin-vertical;
|
|
}
|
|
margin-top: @ui-margin-vertical;
|
|
margin-bottom: @ui-margin-vertical;
|
|
overflow: visible;
|
|
}
|
|
|
|
.ui-table-form-separator {
|
|
font-weight: bold;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.ui-table-form-info {
|
|
&:extend(.toolParamHelp);
|
|
clear: both !important;
|
|
}
|
|
|
|
.ui-table-form-error {
|
|
display: none;
|
|
.ui-table-form-error-text {
|
|
padding-left: @ui-margin-horizontal;
|
|
}
|
|
}
|
|
|
|
// portlets
|
|
.ui-portlet {
|
|
border: solid @form-border 1px;
|
|
border-radius: @border-radius-base;
|
|
|
|
position: relative;
|
|
clear: both;
|
|
width: auto;
|
|
height: 100%;
|
|
|
|
.portlet-header {
|
|
background: @form-heading-bg;
|
|
border-bottom: solid @form-border 1px;
|
|
padding: 2px 8px;
|
|
overflow: visible;
|
|
float: right;
|
|
width:100%;
|
|
.portlet-title {
|
|
display: inline;
|
|
vertical-align: middle;
|
|
.portlet-title-text {
|
|
vertical-align: middle;
|
|
line-height: 22px;
|
|
}
|
|
.icon {
|
|
font-size: 1.2em;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
.portlet-operations {
|
|
.ui-button-icon {
|
|
margin-left: @ui-margin-horizontal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.portlet-content {
|
|
height: inherit;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
clear: both;
|
|
.content {
|
|
padding : 0px;
|
|
height : 100%;
|
|
width : 100%;
|
|
}
|
|
.buttons {
|
|
margin-top: @ui-margin-vertical;
|
|
margin-bottom: @ui-margin-vertical;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-portlet-repeat {
|
|
&:extend(.ui-portlet);
|
|
border: none;
|
|
border-left: solid 3px @form-heading-bg;
|
|
border-radius: @border-radius-large;
|
|
margin-bottom: @ui-margin-vertical;
|
|
.portlet-header {
|
|
background: @form-heading-bg;
|
|
border-radius: @border-radius-large;
|
|
border-bottom-left-radius: 0px;
|
|
border-top-left-radius: 0px;
|
|
padding: 0px 2px;
|
|
.portlet-title-text {
|
|
vertical-align: middle;
|
|
line-height: 20px !important;
|
|
}
|
|
}
|
|
.portlet-content {
|
|
padding-right: 0px;
|
|
}
|
|
}
|
|
|
|
.ui-portlet-section {
|
|
&:extend(.ui-portlet-repeat all);
|
|
border-left: solid 3px @side-panel-bg;
|
|
.portlet-header {
|
|
background: @side-panel-bg;
|
|
border-bottom: solid darken(@side-panel-bg, 10%) 1px;
|
|
}
|
|
}
|
|
|
|
.ui-portlet-narrow {
|
|
&:extend(.ui-portlet-limited all);
|
|
border: none;
|
|
.portlet-header {
|
|
border-radius: @border-radius-base;
|
|
.portlet-operations {
|
|
.ui-button-icon {
|
|
margin-left: 3px;
|
|
}
|
|
}
|
|
}
|
|
.ui-portlet-repeat {
|
|
.portlet-header {
|
|
border-radius: @border-radius-large;
|
|
border-bottom-left-radius: 0px;
|
|
border-top-left-radius: 0px;
|
|
}
|
|
}
|
|
.portlet-content {
|
|
padding: 0px;
|
|
}
|
|
.ui-table-section, .ui-portlet-repeat .portlet-content {
|
|
padding-left: @ui-margin-horizontal;
|
|
}
|
|
}
|
|
|
|
.ui-portlet-limited {
|
|
&:extend(.ui-portlet all);
|
|
max-width: 900px;
|
|
}
|
|
|
|
// popovers
|
|
.ui-popover {
|
|
max-width: 700px;
|
|
display: none;
|
|
|
|
.popover-close {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 7px;
|
|
font-size: 1.2em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.popover-title {
|
|
padding: 4px 10px;
|
|
}
|
|
}
|
|
|
|
// input elements
|
|
.ui-input {
|
|
width: 100%;
|
|
display: block;
|
|
height: @input-height-base;
|
|
padding: @padding-base-vertical @padding-base-horizontal;
|
|
font-size: @font-size-base;
|
|
line-height: @line-height-base;
|
|
color: @input-color;
|
|
border: 1px solid @input-border;
|
|
border-radius: @input-border-radius;
|
|
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
|
background-image: none;
|
|
background: transparent;
|
|
-webkit-appearance: none;
|
|
-moz-border-radius: @border-radius-base;
|
|
&[disabled],
|
|
&[readonly],
|
|
fieldset[disabled] & {
|
|
cursor: not-allowed;
|
|
background-color: @input-bg-disabled;
|
|
}
|
|
}
|
|
|
|
.ui-input-basic {
|
|
&:extend(.ui-input);
|
|
.box-shadow(inset 0 -1px 1px rgba(0,0,0,.075));
|
|
}
|
|
|
|
.ui-textarea {
|
|
&:extend(.ui-input);
|
|
height: 100px !important;
|
|
}
|
|
|
|
.ui-options {
|
|
.ui-options-list {
|
|
&:extend(.ui-input);
|
|
height: 100% !important;
|
|
input[type=checkbox], input[type=radio] {
|
|
display: none;
|
|
}
|
|
label {
|
|
margin: 0px;
|
|
cursor: pointer;
|
|
}
|
|
.ui-drilldown-button {
|
|
position: relative;
|
|
top: 2px;
|
|
left: -3px;
|
|
margin-right: 3px;
|
|
cursor: pointer;
|
|
}
|
|
input[type=checkbox] + label:before {
|
|
font-family: FontAwesome;
|
|
display: inline-block;
|
|
font-style: normal;
|
|
font-size: 1.2em;
|
|
margin-right: 5px;
|
|
position: relative;
|
|
top: 1px;
|
|
width: 10px;
|
|
content: "\f096";
|
|
}
|
|
input[type=checkbox]:checked + label:before {
|
|
content: "\f046";
|
|
}
|
|
input[type=radio] + label:before {
|
|
font-family: FontAwesome;
|
|
display: inline-block;
|
|
font-style: normal;
|
|
font-size: 1.2em;
|
|
margin-right: 5px;
|
|
position: relative;
|
|
top: 1px;
|
|
width: 10px;
|
|
content: "\f1db";
|
|
}
|
|
input[type=radio]:checked + label:before {
|
|
content: "\f192";
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-form-slider {
|
|
display: inline-block;
|
|
width: 100%;
|
|
.ui-form-slider-text {
|
|
&:extend(.ui-input);
|
|
width: 100px;
|
|
float: left;
|
|
}
|
|
|
|
.ui-form-slider-element {
|
|
width: ~'calc(100% - 110px)';
|
|
float: left;
|
|
top: 8px;
|
|
left: 10px;
|
|
}
|
|
}
|
|
|
|
.ui-radiobutton {
|
|
width: 100%;
|
|
label {
|
|
height: 23px;
|
|
line-height: 1em;
|
|
}
|
|
|
|
i {
|
|
padding-right: @ui-margin-horizontal;
|
|
}
|
|
}
|
|
|
|
.ui-button-check {
|
|
font-size: 1.2em;
|
|
width: 1.2em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ui-color-picker {
|
|
.ui-color-picker-header {
|
|
cursor: pointer;
|
|
}
|
|
.ui-color-picker-value {
|
|
float: left;
|
|
border-radius: 3px;
|
|
border: solid 1px #000000;
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-right: 5px;
|
|
}
|
|
.ui-color-picker-label {
|
|
float: left;
|
|
line-height: 1.2em;
|
|
}
|
|
.ui-color-picker-view {
|
|
height: 100%;
|
|
overflow: auto;
|
|
display: none;
|
|
float: left;
|
|
margin-top: 5px;
|
|
.ui-color-picker-panel {
|
|
width: 210px;
|
|
.ui-color-picker-content {
|
|
margin-bottom: 15px;
|
|
.label {
|
|
padding-bottom: 2px;
|
|
}
|
|
.line {
|
|
.ui-color-picker-box {
|
|
cursor: pointer;
|
|
float: left;
|
|
margin-right: 5px;
|
|
border: solid 1px #c0c0c0;
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 2px;
|
|
.ui-color-picker-check {
|
|
color: black;
|
|
font-size: 1.2em;
|
|
position: relative;
|
|
left: 1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-select {
|
|
position: relative;
|
|
.button {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
}
|
|
select {
|
|
position: relative;
|
|
top: 0px;
|
|
height: 27px;
|
|
width: 100%;
|
|
padding-right: 20px;
|
|
&:extend(.ui-input-basic);
|
|
cursor: pointer;
|
|
padding-left: 5px;
|
|
}
|
|
.select2-container {
|
|
width: 100%;
|
|
.select2-choice {
|
|
height: 27px;
|
|
&:extend(.ui-input-basic);
|
|
padding-left: 5px;
|
|
.select2-arrow {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.select2-container-multi {
|
|
.select2-choices {
|
|
&:extend(.ui-input);
|
|
padding: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-select-multiple {
|
|
select {
|
|
height: 80px !important;
|
|
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
|
}
|
|
}
|
|
|
|
.ui-select-content {
|
|
.ui-options {
|
|
float: left;
|
|
padding-top: 2px;
|
|
}
|
|
}
|
|
|
|
// global select2 adjustments
|
|
.select2-container .select2-choice,
|
|
.select2-container .select2-choices {
|
|
border: 1px solid @input-border;
|
|
}
|
|
.select2-dropdown-open .select2-choice,
|
|
.select2-dropdown-open .select2-choices {
|
|
border: 1px solid @input-border;
|
|
border-bottom-left-radius: 0px ;
|
|
border-bottom-right-radius: 0px;
|
|
}
|
|
.select2-dropdown-open.select2-drop-above .select2-choice,
|
|
.select2-dropdown-open.select2-drop-above .select2-choices {
|
|
border: 1px solid @input-border;
|
|
border-top-left-radius: 0px;
|
|
border-top-right-radius: 0px;
|
|
}
|
|
.select2-drop-active {
|
|
border: 1px solid @input-border;
|
|
border-radius: @input-border-radius;
|
|
border-top-left-radius: 0px;
|
|
border-top-right-radius: 0px;
|
|
.select2-search {
|
|
padding-top: 5px;
|
|
}
|
|
}
|
|
.select2-drop.select2-drop-above.select2-drop-active {
|
|
border: 1px solid @input-border;
|
|
border-radius: @input-border-radius;
|
|
border-bottom-left-radius: 0px;
|
|
border-bottom-right-radius: 0px;
|
|
.select2-search {
|
|
padding-top: 0px;
|
|
}
|
|
} |