|
|
- // 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;
- }
|