You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
960 lines
19 KiB
960 lines
19 KiB
// If you are using IntelliJ Rider, you can simply turn on the SCSS compiler, otherwise here is how to convert scss to uss
|
|
// # Install Sass
|
|
// gem install sass
|
|
//
|
|
// # Convert
|
|
// sass --sourcemap=none --style=expanded --scss --no-cache Main_Dark.scss Main_Dark.uss
|
|
// sass --sourcemap=none --style=expanded --scss --no-cache Main_Light.scss Main_Light.uss
|
|
//
|
|
// # Watch
|
|
// sass --watch --sourcemap=none --style=expanded --scss --no-cache Main_Light.scss:Main_Light.uss Main_Dark.scss:Main_Dark.uss
|
|
//
|
|
// Sass to Uss Notes
|
|
// - Sass converts rgb(0,0,0) to css 'black'. Uss doesn't support named colors. The workaround is to set the color in sass as #000000
|
|
//
|
|
// Uss Notes
|
|
// Runtime\UIElements\Managed\StyleSheets\StyleSheetCache.cs:50 to see which properties are available (until there is a doc)
|
|
|
|
//--------------------------------------------------------------------------------------------------
|
|
// Helper Mixins
|
|
//--------------------------------------------------------------------------------------------------
|
|
|
|
@mixin border($top, $right, $bottom, $left) {
|
|
@if $top != 'auto' {border-top-width: $top;}
|
|
@if $left != 'auto' {border-left-width: $right;}
|
|
@if $bottom != 'auto' {border-bottom-width: $bottom;}
|
|
@if $right != 'auto' {border-right-width: $left;}
|
|
}
|
|
|
|
@mixin border-box($width: 1) {
|
|
@include border($width, $width, $width, $width);
|
|
}
|
|
|
|
@mixin padding($top, $right, $bottom, $left) {
|
|
@if $top != 'auto' {padding-top: $top;}
|
|
@if $left != 'auto' {padding-left: $left;}
|
|
@if $bottom != 'auto' {padding-bottom: $bottom;}
|
|
@if $right != 'auto' {padding-right: $right;}
|
|
}
|
|
|
|
@mixin padding-box($size) {
|
|
@include padding($size, $size, $size, $size);
|
|
}
|
|
|
|
@mixin margin($top, $right, $bottom, $left) {
|
|
@if $top != 'auto' {margin-top: $top;}
|
|
@if $left != 'auto' {margin-left: $left;}
|
|
@if $bottom != 'auto' {margin-bottom: $bottom;}
|
|
@if $right != 'auto' {margin-right: $right;}
|
|
}
|
|
|
|
@mixin margin-box($size) {
|
|
@include margin($size, $size, $size, $size);
|
|
}
|
|
|
|
@mixin slice($top, $right, $bottom, $left) {
|
|
@if $top != 'auto' {-unity-slice-top: $top;}
|
|
@if $left != 'auto' {-unity-slice-left: $left;}
|
|
@if $bottom != 'auto' {-unity-slice-bottom: $bottom;}
|
|
@if $right != 'auto' {-unity-slice-right: $right;}
|
|
}
|
|
|
|
@mixin slice-box($size) {
|
|
@include slice($size, $size, $size, $size);
|
|
}
|
|
|
|
@mixin position($top, $right, $bottom, $left) {
|
|
@if $top != 'auto' {top: $top;}
|
|
@if $left != 'auto' {left: $left;}
|
|
@if $bottom != 'auto' {bottom: $bottom;}
|
|
@if $right != 'auto' {right: $right;}
|
|
}
|
|
|
|
@mixin text-clip() {
|
|
overflow: hidden;
|
|
}
|
|
|
|
@mixin selected-element() {
|
|
background-color: $unity-list-selected-background;
|
|
color: $unity-text-color-highlight;
|
|
}
|
|
|
|
@mixin active-tab() {
|
|
background-color: $unity-background-dark-contrast;
|
|
color: $unity-text-color-highlight;
|
|
}
|
|
|
|
@mixin inactive-tab() {
|
|
background-color: $unity-background-light-contrast;
|
|
color: $unity-text-color;
|
|
}
|
|
|
|
@mixin button($top, $right, $bottom, $left) {
|
|
flex: 0 0 auto;
|
|
|
|
@include padding($top, $right, $bottom, $left);
|
|
@include slice(4, 6, 4, 6);
|
|
|
|
&.display-none {
|
|
position: absolute;
|
|
border-radius: 0;
|
|
width: 0;
|
|
height: 0;
|
|
min-height: 0;
|
|
max-height: 0;
|
|
min-width: 0;
|
|
max-width: 0;
|
|
border-top-width: 0;
|
|
border-left-width: 0;
|
|
border-bottom-width: 0;
|
|
border-right-width: 0;
|
|
min-width: 0;
|
|
@include border-box(0);
|
|
@include padding-box(0);
|
|
@include margin-box(0);
|
|
@include slice-box(0);
|
|
visibility: hidden;
|
|
}
|
|
|
|
&:hover {
|
|
color: $unity-text-color;
|
|
}
|
|
}
|
|
|
|
@mixin button-box($size) {
|
|
@include button($size, $size, $size, $size);
|
|
}
|
|
|
|
//--------------------------------------------------------------------------------------------------
|
|
// Font
|
|
//--------------------------------------------------------------------------------------------------
|
|
|
|
@mixin font-small() {
|
|
font-size: 9;
|
|
}
|
|
|
|
@mixin font-normal() {
|
|
font-size: 12;
|
|
}
|
|
|
|
//--------------------------------------------------------------------------------------------------
|
|
// Styles
|
|
//--------------------------------------------------------------------------------------------------
|
|
|
|
#container {
|
|
-unity-position: absolute;
|
|
@include position(0, 0, 0, 0);
|
|
}
|
|
|
|
.display-none {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
border-radius: 0;
|
|
width: 0;
|
|
height: 0;
|
|
min-height: 0;
|
|
max-height: 0;
|
|
min-width: 0;
|
|
max-width: 0;
|
|
border-top-width: 0;
|
|
border-left-width: 0;
|
|
border-bottom-width: 0;
|
|
border-right-width: 0;
|
|
@include border-box(0);
|
|
@include padding-box(0);
|
|
@include margin-box(0);
|
|
}
|
|
|
|
.row {
|
|
flex: 1 0 0;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.column {
|
|
flex: 1 0 0;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tag {
|
|
@include border-box(1);
|
|
@include padding(1, 3, 1, 3);
|
|
@include font-small();
|
|
border-radius: 5;
|
|
-unity-text-align: middle-center;
|
|
|
|
border-color: #000000;
|
|
color: #000000;
|
|
}
|
|
|
|
$spinner-large-size: 32;
|
|
$spinner-large-half-size: 16;
|
|
$spinner-normal-size: 14;
|
|
$spinner-normal-half-size: 7;
|
|
$toolbar-height: 18;
|
|
|
|
#toolbarContainer {
|
|
flex: 0 0 auto;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
height: $toolbar-height;
|
|
|
|
#toolbarView {
|
|
flex: 1 0 0;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
background-image: $toolbar-background;
|
|
margin-top: -1;
|
|
@include slice(1, 1, 1, 1);
|
|
|
|
.toolbarButton {
|
|
flex: 1 0 0;
|
|
font-size: 9;
|
|
-unity-text-align: middle-center;
|
|
background-image: $toolbar-button-background;
|
|
@include button-box(0);
|
|
@include margin(0, -1, 0, 0);
|
|
@include padding(0, 5, 0, 5);
|
|
height: 19;
|
|
|
|
&.space {
|
|
margin-left: 7;
|
|
}
|
|
|
|
&.active {
|
|
background-image: $toolbar-button-active-background;
|
|
}
|
|
|
|
&.pulldown {
|
|
|
|
&:active {
|
|
background-image: $toolbar-button-background;
|
|
}
|
|
}
|
|
}
|
|
|
|
#toolbarLeft {
|
|
flex: 0 0 auto;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
#toolbarRight {
|
|
flex: 1 0 0;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
|
|
#toolbarSearch {
|
|
flex: 1 0 0;
|
|
height: $toolbar-height;
|
|
max-width: 500;
|
|
flex-direction: row;
|
|
@include margin(0, 5, 0, 0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#searchContainer {
|
|
flex: 1 0 0;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
height: 14;
|
|
@include margin(0, 0, 0, 0);
|
|
|
|
#searchTextField {
|
|
flex: 1 0 0;
|
|
font-size: 9;
|
|
background-image: $toolbar-search-textfield-background;
|
|
@include margin(2, 5, 1, 5);
|
|
@include padding(2, 17, 1, 17);
|
|
@include slice(1, 0, 1, 14);
|
|
height: 14;
|
|
|
|
&:focus {
|
|
background-image: $toolbar-search-textfield-focus-background;
|
|
}
|
|
|
|
&.placeholder {
|
|
color: $unity-background-dark-contrast;
|
|
}
|
|
}
|
|
|
|
#searchCancelButton {
|
|
width: 14;
|
|
height: 15;
|
|
background-image: $toolbar-search-cancel-off-background;
|
|
@include button-box(0);
|
|
@include slice(1, 14, 1, 0);
|
|
@include margin(3, 0, 2, -10);
|
|
@include padding-box(0);
|
|
@include border-box(0);
|
|
|
|
&.on {
|
|
background-image: $toolbar-search-cancel-background;
|
|
}
|
|
|
|
&:active {
|
|
background-image: $toolbar-search-cancel-active-background;
|
|
}
|
|
}
|
|
}
|
|
|
|
#detailListView {
|
|
flex: 1 0 0;
|
|
flex-direction: row;
|
|
|
|
.link {
|
|
color: $link-text-color;
|
|
background: rgba(0, 0, 0, 0);
|
|
background-image: none;
|
|
@include margin-box(0);
|
|
@include padding-box(0);
|
|
cursor: link;
|
|
}
|
|
|
|
.emptyArea {
|
|
flex: 1 0 0;
|
|
@extend .column;
|
|
|
|
.title {
|
|
-unity-text-align: middle-center;
|
|
font-size: 14;
|
|
}
|
|
|
|
.loading {
|
|
-unity-position: relative;
|
|
@include position($spinner-normal-half-size, auto, auto, $spinner-normal-half-size);
|
|
|
|
@include border-box(0);
|
|
@include padding-box(0);
|
|
@include margin-box(0);
|
|
@include slice-box(0);
|
|
|
|
width: $spinner-normal-size;
|
|
height: $spinner-normal-size;
|
|
max-width: $spinner-normal-size;
|
|
max-height: $spinner-normal-size;
|
|
}
|
|
}
|
|
|
|
#headerTitle {
|
|
flex: 1 0 0;
|
|
font-size: 12;
|
|
-unity-font-style: bold;
|
|
color: $unity-text-color;
|
|
}
|
|
|
|
#headerCaret {
|
|
flex: 0 0 auto;
|
|
font-size: 12;
|
|
-unity-font-style: bold;
|
|
color: $unity-text-color;
|
|
min-width: 16;
|
|
}
|
|
|
|
#spinnerContainer {
|
|
-unity-position: absolute;
|
|
@include position(3, 0, auto, 2);
|
|
width: 14;
|
|
|
|
flex: 0.1 0 0;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.loading {
|
|
-unity-position: relative;
|
|
@include position($spinner-normal-half-size, auto, auto, $spinner-normal-half-size);
|
|
|
|
@include border-box(0);
|
|
@include padding-box(0);
|
|
@include margin-box(0);
|
|
@include slice-box(0);
|
|
|
|
width: $spinner-normal-size;
|
|
height: $spinner-normal-size;
|
|
max-width: $spinner-normal-size;
|
|
max-height: $spinner-normal-size;
|
|
}
|
|
|
|
.combo {
|
|
@extend .row;
|
|
@include margin-box(3);
|
|
@include padding-box(3);
|
|
|
|
.popup {
|
|
@include padding(0, 0, 0, 8);
|
|
@include margin-box(0);
|
|
border-top-width-left-radius: 0;
|
|
border-bottom-width-left-radius: 0;
|
|
}
|
|
|
|
.button {
|
|
flex: 1 0 0; // Make buttons take all the parent's free space
|
|
|
|
@include font-normal();
|
|
@include border-box(0);
|
|
@include margin-box(0);
|
|
@include padding(2, 6, 3, 6);
|
|
@include slice(4, $background-button-slice-middle, 4, $background-button-slice-middle);
|
|
|
|
-unity-text-align: middle-center;
|
|
border-left-width: 0;
|
|
border-top-width: 0;
|
|
border-right-width: 0;
|
|
border-bottom-width: 0;
|
|
background-image: $background-mid-button;
|
|
|
|
border-top-width-right-radius: 0;
|
|
border-bottom-width-right-radius: 0;
|
|
border-top-width-left-radius: 0;
|
|
border-bottom-width-left-radius: 0;
|
|
|
|
&.selected {
|
|
background-image: $background-mid-button-selected;
|
|
color: $unity-text-color-highlight;
|
|
}
|
|
|
|
&.first {
|
|
@include slice(4, $background-button-slice-right, 4, 6);
|
|
background-image: $background-left-button;
|
|
|
|
&.selected {
|
|
background-image: $background-left-button-selected;
|
|
}
|
|
}
|
|
|
|
&.last {
|
|
@include slice(4, 6, 4, $background-button-slice-left);
|
|
background-image: $background-right-button;
|
|
|
|
&.selected {
|
|
background-image: $background-right-button-selected;
|
|
}
|
|
}
|
|
|
|
|
|
&.small {
|
|
flex: 0.5 0 0;
|
|
@include padding(0, 0, 0, 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
//--------------------------------------------------------------------------------------------------
|
|
// Package List
|
|
//--------------------------------------------------------------------------------------------------
|
|
#packageListGroup {
|
|
width: 270;
|
|
|
|
#listContainerOuter {
|
|
@extend .column;
|
|
}
|
|
|
|
#groupContainerOuter {
|
|
|
|
#headerContainer {
|
|
flex: 1 0 0;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
border-color: rgba(0,0,0, 0.5);
|
|
|
|
#headerTitle {
|
|
height: 0;
|
|
@include margin-box(0);
|
|
@include padding-box(0);
|
|
@include border-box(0);
|
|
}
|
|
}
|
|
|
|
#groupContainer {
|
|
@include margin(0, 0, 0, 0);
|
|
}
|
|
}
|
|
|
|
#packageList, #listContainer, #listGroups {
|
|
@extend .column;
|
|
}
|
|
|
|
#scrollView {
|
|
@extend .column;
|
|
|
|
#VerticalScroller {
|
|
bottom: 0;
|
|
}
|
|
|
|
#HorizontalScroller {
|
|
height: 0;
|
|
}
|
|
|
|
#ContentViewport {
|
|
bottom: 0;
|
|
|
|
#ContentView {
|
|
right: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
#noResult {
|
|
#noResultText {
|
|
-unity-word-wrap: true;
|
|
}
|
|
}
|
|
}
|
|
|
|
//--------------------------------------------------------------------------------------------------
|
|
// Package Item
|
|
//--------------------------------------------------------------------------------------------------
|
|
.package {
|
|
flex: 1 0 0;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
@include margin(0, 0, 0, 0);
|
|
border-color: rgba(0,0,0, 0.5);
|
|
border-bottom-width: 1;
|
|
|
|
&.selected {
|
|
@include selected-element();
|
|
|
|
#packageName, #packageVersion {
|
|
color: $unity-text-color-highlight;
|
|
}
|
|
}
|
|
|
|
.status {
|
|
flex: 0 0 14;
|
|
width: 14;
|
|
height: 14;
|
|
@include margin(auto, 0, auto, 2);
|
|
|
|
&.installed {
|
|
background-image: $installed-package-background;
|
|
&.no-icon {
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
&.outdated {
|
|
background-image: $background-status-outdated;
|
|
&.no-icon {
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
&.inprogress {
|
|
background-image: none;
|
|
}
|
|
|
|
&.error {
|
|
background-image: $background-status-error;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
flex: 1 0 0;
|
|
@include font-normal();
|
|
@include margin(auto, 5, auto, 0);
|
|
@include text-clip();
|
|
}
|
|
|
|
.version {
|
|
flex: 0 0 auto;
|
|
@include margin(auto, 5, auto, 0);
|
|
@include font-small;
|
|
}
|
|
}
|
|
|
|
//--------------------------------------------------------------------------------------------------
|
|
// Package Details
|
|
//--------------------------------------------------------------------------------------------------
|
|
#detailsGroup {
|
|
flex: 1 0 0;
|
|
border-left-width: 1px;
|
|
border-color: rgba(0,0,0, 0.5);
|
|
|
|
#detailsContainer {
|
|
flex: 1 0 0;
|
|
flex-direction: column;
|
|
-unity-position: relative;
|
|
}
|
|
}
|
|
|
|
#detailView {
|
|
flex: 1 0 0;
|
|
|
|
#VerticalScroller {
|
|
bottom: 0;
|
|
}
|
|
|
|
#ContentViewport {
|
|
|
|
#ContentView {
|
|
-unity-position: absolute;
|
|
@include position(0, 0, auto, 0);
|
|
}
|
|
}
|
|
|
|
.detail {
|
|
flex: 1 0 0;
|
|
flex-direction: column;
|
|
@include padding-box(5);
|
|
|
|
.header {
|
|
flex: 1 0 0;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
|
|
margin-bottom: 8;
|
|
|
|
#titleContainer {
|
|
flex: 0.9 0 0;
|
|
|
|
#detailTitle {
|
|
font-size: 18;
|
|
-unity-font-style: bold;
|
|
-unity-word-wrap: true;
|
|
@include margin(0, 0, 0, 4);
|
|
}
|
|
}
|
|
|
|
$controls-height: 19;
|
|
#detailsControls {
|
|
flex: 1 0 0;
|
|
height: $controls-height;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
@include margin(3, 0, 0, 0);
|
|
}
|
|
|
|
#updateCombo {
|
|
flex: 1 0 0;
|
|
height: $controls-height;
|
|
align-items: center;
|
|
@include margin(0, 0, 0, 0);
|
|
@include padding(0, 0, 0, 0);
|
|
|
|
#update {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
#updateDropdownContainer {
|
|
min-width: 65;
|
|
max-width: 150;
|
|
height: $controls-height;
|
|
flex: 0 0 auto;
|
|
|
|
.popup {
|
|
@include font-normal();
|
|
height: $controls-height;
|
|
|
|
&:focus {
|
|
background-image: $popup-background;
|
|
}
|
|
|
|
&:hover {
|
|
.textElement {
|
|
color: $unity-text-color;
|
|
}
|
|
}
|
|
|
|
.textElement {
|
|
margin-top: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.action {
|
|
flex: 0 0 auto;
|
|
@include margin-box(0);
|
|
@include font-normal();
|
|
@include padding(2, 4, 3, 4);
|
|
right: -3;
|
|
&:hover {
|
|
color: $unity-text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
#updateContainer {
|
|
height: $controls-height;
|
|
flex: 1 0 0;
|
|
align-items: flex-end;
|
|
|
|
@include padding-box(0);
|
|
}
|
|
|
|
|
|
|
|
.button {
|
|
height: $controls-height;
|
|
@include font-normal();
|
|
@include button(3,3,4,3);
|
|
}
|
|
}
|
|
|
|
#detailVersion {
|
|
font-size: 16;
|
|
max-height: 30;
|
|
}
|
|
|
|
#detailName {
|
|
flex: 1 0 0;
|
|
max-height: 20;
|
|
-unity-font-style: italic;
|
|
}
|
|
|
|
#detailPackageStatus {
|
|
flex: 1 0 0;
|
|
-unity-font-style: bold;
|
|
-unity-word-wrap: true;
|
|
}
|
|
|
|
#detailTag {
|
|
width: 60;
|
|
@include font-normal();
|
|
border-radius: 5;
|
|
border-color: rgb(180, 180, 180);
|
|
@include border-box(2);
|
|
-unity-text-align: middle-center;
|
|
}
|
|
|
|
#detailDesc, #detailModuleReference {
|
|
flex: 1 0 0;
|
|
@include font-normal();
|
|
-unity-word-wrap: true;
|
|
|
|
&.empty {
|
|
-unity-font-style: italic;
|
|
}
|
|
}
|
|
|
|
#detailAuthor {
|
|
flex: 1 0 0;
|
|
@include font-normal();
|
|
-unity-word-wrap: true;
|
|
}
|
|
|
|
#detailCategory {
|
|
flex: 1 0 0;
|
|
@include font-normal();
|
|
-unity-word-wrap: true;
|
|
|
|
@include margin(auto, auto, 5, auto);
|
|
}
|
|
|
|
#changeLogContainer, #viewLicensesContainer {
|
|
flex: 0 0 auto;
|
|
flex-direction: row;
|
|
}
|
|
|
|
#detailActions, .detailActions {
|
|
flex: 0 0 auto;
|
|
flex-direction: row;
|
|
margin-left: 2;
|
|
|
|
@extend .row;
|
|
|
|
.detailAction {
|
|
@include margin(auto, 0, auto, 0);
|
|
@include padding(auto, 2, auto, 2);
|
|
border-left-width: 2;
|
|
border-right-width: 2;
|
|
}
|
|
|
|
.detailActionSeparator {
|
|
@include margin(auto, 0, auto, 0);
|
|
@include padding(auto, 0, auto, 0);
|
|
border-left-width: 0;
|
|
border-right-width: 0;
|
|
}
|
|
|
|
#thirdPartyNoticeLabel {
|
|
@include margin(4, 0, 4, 0);
|
|
@include padding-box(0);
|
|
-unity-word-wrap: true;
|
|
}
|
|
|
|
#viewThirdParty {
|
|
border-right-width: 0;
|
|
}
|
|
}
|
|
|
|
.versionContainer {
|
|
@extend .row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
|
|
#detailVersion {
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
|
|
.tag {
|
|
border-color: $package-tag-color;
|
|
color: $package-tag-color;
|
|
|
|
&.verified {
|
|
border-color: $package-tag-recommended-color;
|
|
color: $package-tag-recommended-color;
|
|
}
|
|
}
|
|
|
|
.tagLines {
|
|
}
|
|
|
|
.tagLine {
|
|
flex: 0 0 auto;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.tagContainer {
|
|
}
|
|
}
|
|
}
|
|
|
|
#detailError {
|
|
-unity-position: absolute;
|
|
@include position(5, 5, auto, 5);
|
|
min-height: 200;
|
|
-unity-word-wrap: true;
|
|
|
|
&.display-none {
|
|
@include position(0, 0, 0, 0);
|
|
width: 0;
|
|
height: 0;
|
|
min-height: 0;
|
|
max-height: 0;
|
|
@include border-box(0);
|
|
@include padding-box(0);
|
|
@include margin-box(0);
|
|
}
|
|
}
|
|
|
|
#packageStatusBar {
|
|
-unity-position: relative;
|
|
|
|
flex: 0 0 auto;
|
|
@include margin(2, 0, 0, 0);
|
|
|
|
border-color: rgba(0, 0, 0, 0.5);
|
|
@include border(1, 0, 0, 0);
|
|
}
|
|
|
|
#statusBarContainer {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
#loadingContainer{
|
|
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
|
|
margin-left: 2;
|
|
|
|
#loadingIcon {
|
|
background-image: $background-status-error;
|
|
width: 16;
|
|
height: 16;
|
|
margin-left: -12;
|
|
margin-right: 0;
|
|
}
|
|
|
|
#loadingText {
|
|
padding-left: 2;
|
|
-unity-font-style: italic;
|
|
|
|
&.icon {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
#moreAddOptionsButton {
|
|
font-size: 16;
|
|
background-image: none;
|
|
@include margin(0, 0, -2, 0);
|
|
@include padding(3, 6, 6, 6);
|
|
border-color: rgba(0, 0, 0, 0.5);
|
|
@include border(0, 1, 0, 0);
|
|
}
|
|
}
|
|
|
|
#packageAddFromUrlField {
|
|
-unity-position: absolute;
|
|
@include position(-35, 0, 0, 0);
|
|
}
|
|
|
|
#addFromUrlFieldContainer {
|
|
border-color: rgba(0, 0, 0, 0.5);
|
|
@include border(1, 0, 1, 0);
|
|
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
height: 35;
|
|
background-color: $unity-background;
|
|
|
|
#urlTextField {
|
|
flex: 1 0 0;
|
|
height: 20;
|
|
-unity-text-align: middle-left;
|
|
}
|
|
|
|
#addFromUrlButton {
|
|
flex: 0 0 auto;
|
|
height: 20;
|
|
}
|
|
}
|
|
}
|
|
|
|
.alert {
|
|
background-color: rgba(200,0,0,0.8);
|
|
border-color: #FF0000;
|
|
flex-direction: row;
|
|
|
|
@include border-box(1);
|
|
@include padding(5, 10, 5, 10);
|
|
|
|
#alertMessage {
|
|
flex: 1 0 0;
|
|
color: $unity-text-color-highlight;
|
|
-unity-word-wrap: true;
|
|
@include text-clip();
|
|
}
|
|
|
|
#close {
|
|
flex: 0 0 auto;
|
|
max-height: 30;
|
|
@include position(auto, auto, auto, 5);
|
|
@include button(3,3,4,3);
|
|
}
|
|
}
|
|
|
|
.spinner {
|
|
flex: 0 0 auto;
|
|
@include position(-$spinner-normal-half-size, auto, auto, -$spinner-normal-half-size);
|
|
|
|
min-width: $spinner-normal-size;
|
|
min-height: $spinner-normal-size;
|
|
max-width: $spinner-normal-size;
|
|
max-height: $spinner-normal-size;
|
|
background-image: $background-spinner-normal;
|
|
}
|
|
|
|
.largeSpinner {
|
|
flex: 0 0 auto;
|
|
@include position(-$spinner-large-half-size, auto, auto, -$spinner-large-half-size);
|
|
|
|
min-width: $spinner-large-size;
|
|
min-height: $spinner-large-size;
|
|
max-width: $spinner-large-size;
|
|
max-height: $spinner-large-size;
|
|
background-image: $background-spinner-large;
|
|
}
|