#root {
--dark-grey: var(--unity-colors-window-background);
--standard-grey: var(--unity-colors-app_toolbar_button-background-hover);
--standard-background-color: var(--unity-colors-window-background);
--light-grey: var(--unity-colors-dropdown-background);
--border-color: var(--unity-colors-dropdown-border);
--card-background: var(--unity-colors-inspector_titlebar-border_accent);
--doc-separator-color: #5D5D5D;
--tab-button-bar-height: 32px;
--bottom-bar-height: 56px;
--card-width: 300px;
--card-min-width: 200px;
--card-poster-icon-width: 92px;
--card-poster-icon-height: 64px;
--questionnaire-empty-view-icon: url('Icons/EmptyViewIcon.png');
}
.color-recommendation-badge {
color: var(--recommendation-badge-color);
border-color: var(--recommendation-badge-color);
}
.icon{
min-width: 16px;
max-width: 16px;
min-height: 16px;
max-height: 16px;
}
Label{
overflow: hidden;
white-space: normal;
}
.view-headline{
font-size: 14px;
padding-bottom: 16px;
min-height: 33px;
}
.recommendation-view-headline{
font-size: 14px;
padding-bottom: 16px;
margin-left: 10px;
}
.icon-package-manager{
background-image: var(--package-manager-icon);
}
.icon-questionmark {
background-image: var(--info-icon);
}
.icon-three-dots {
background-image: var(--three-dot-icon);
-unity-background-scale-mode: scale-to-fit;
}
.icon-package-installed{
margin-left: 4px;
background-image: var(--package-installed-icon);
}
.icon-NGO{background-image:url('Icons/Ngo.png')}
.icon-N4E{background-image:url('Icons/N4E.png')}
.icon-LS{background-image:url('Icons/ClientHosted.png')}
.icon-DS{background-image:url('Icons/DedicatedServer.png')}
.icon-DA{background-image:url('Icons/DistributedAuthority.png')}
.icon-CustomNetcode{background-image:url('Icons/CustomNetcode.png')}
.icon-NoNetcode{background-image:url('Icons/NoNetcode.png')}
.icon-CloudCode{background-image:url('Icons/CloudCode.png')}
/*Utilities*/
.processing{
background-image: var(--spinner-icon-big);
rotate: 360000deg;
transition-property: rotate;
transition-timing-function: linear;
transition-duration: 2000s;
min-width: 64px;
max-width: 64px;
min-height: 64px;
max-height: 64px;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
}
.flex-wrap{
flex-wrap: wrap;
}
.color-grey {
color: var(--badge-color-grey);
opacity: 0.8;
border-color: var(--badge-color-grey);
}
.highlight-background-color {
background-color: var(--standard-background-color);
}
.next-step-button {
padding: 6px;
margin-top: 6px;
min-height: 32px;
max-height: 32px;
min-width: 106px;
}
.packageIcon {
background-image: var(--package-icon);
-unity-background-scale-mode: scale-to-fit;
margin-right: 4px;
background-size: 16px 16px;
}
.questionnaireIcon {
background-image: var(--questionnaire-icon);
-unity-background-scale-mode: scale-to-fit;
background-size: 14px 14px;
}
/* Questionnaire view */
#questionnaire-view {
margin: 10px;
padding-bottom: 4px;
}
#questionnaire-view Label {
padding-left: 0px;
padding-right: 0px;
}
#questionnaire-view Toggle {
margin-left: 0px;
margin-right: 0px;
}
#advanced-questions > Toggle {
-unity-font-style: bold;
}
/*question-view One single question in question-view*/
.question-view{
margin-bottom: 4px;
}
#advanced-questions .question-view > Label {
margin-bottom: 2px;
}
.question-view Toggle {
background-color: var(--dark-grey);
}
.question-view .question-text {
margin: 5px;
white-space: normal;
}
.question-view .unity-radio-button__label {
left: 32px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.question-view .unity-radio-button__input {
position: absolute;
left: 16px;
}
.mandatory-question Label {
padding-bottom: 4px;
-unity-font-style: bold;
}
.question-section {
}
.question-section__no-scrollbar{
align-content: flex-start;
flex-shrink: 0;
}
/*bottom bar - holding the install button, spinning icon and the package count */
#bottom-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 15px;
padding-right: 15px;
max-height: var(--bottom-bar-height);
min-height: var(--bottom-bar-height);
flex-direction: row;
border-width: 1px;
background-color: var(--unity-colors-window-background);
border-top-color: var(--border-color);
font-size: 14px;
}
#bottom-bar #install-package-container {
flex-direction: row;
}
EnumField, DropdownField {
margin: 0px;
min-height: 19px;
}
/* recommendation view*/
#main-sections-container{
flex-direction: row;
flex-wrap: wrap;
}
.main-section{
background-color: var(--card-background);
border-width: 1px;
border-color: var(--border-color);
padding-bottom: 16px;
margin: 0px 8px 8px 0px;
width: var(--card-width);
min-width: var(--card-min-width);
flex-grow: 1;
flex-shrink: 1;
padding-left: 8px;
padding-right: 8px;
}
.main-section .recommendation-item{
padding: 0px;
margin-left: -4px;
margin-right: -4px;
}
.main-section DropdownField{
margin-left: 0;
margin-right: 0;
margin-bottom: 8px;
}
.main-section .unity-help-box{
margin-top: 4px;
margin-left: 0;
margin-right: 0;
}
.sub-section{
margin-top: 0px;
margin-left: 0px;
margin-right: 8px;
}
.subsection-headline{
font-size: 12px;
-unity-font-style: bold;
}
.subsection-headline > .unity-base-field{
margin-top: 6px;
margin-bottom: 0px;
}
/*recommendation section - foldout that holds recommendations*/
#card-headline{
font-size: 12px;
-unity-font-style: bold;
margin-bottom: 4px;
}
#associated-features-headline{
margin-top: 8px;
}
#card-poster-image{
margin-right: -8px;
margin-left: -8px;
min-width: 100%;
min-height: 92px;
background-color: var(--card-poster-image-bg-color);
margin-bottom: 16px;
align-items: center;
justify-content: center;
}
#card-poster-image >*{
min-width: var(--card-poster-icon-width);
max-width: var(--card-poster-icon-width);
min-height: var(--card-poster-icon-height);
max-height: var(--card-poster-icon-height);
}
#recommendation-view-section-container {
flex-grow: 1;
margin-left: 10px;
margin-bottom: 10px;
}
/*recommendation item - One Item that a user can select or unselect within recommendation section*/
.recommendation-item {
border-width: 1px;
-unity-font-style: normal;
background-color: var(--card-background);
overflow: hidden;
flex-grow: 0;
flex-shrink: 1;
min-height: 32px;
margin-top: 4px;
padding:4px;
}
.recommendation-item #sub-info-text {
margin-left: 20px;
-unity-font-style: italic;
white-space: normal;
text-overflow: ellipsis;
overflow: hidden;
}
.recommendation-item #header {
flex-direction: row;
align-content: center;
align-items: center;
justify-content: space-between;
}
.recommendation-item-top-left-container {
flex-direction: row;
flex-grow: 1;
flex-shrink: 1;
align-items: center;
}
.recommendation-item-top-left-container Label {
flex-shrink: 1;
}
.recommendation-item-top-right-container {
max-width: 64px;
flex-shrink: 0;
flex-direction: row;
justify-content: flex-end;
}
.badge {
font-size: 9px;
padding: 1px;
margin-left: 4px;
padding-left: 3px;
padding-right: 3px;
border-width: 1px;
border-radius: 3px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
min-width: 24px;
flex-shrink: 1;
}
.pre-release-badge {
color: var(--pre-release-badge-color);
background-color: var(--pre-release-badge-color-bg);
border-color: var(--pre-release-badge-color);
}
/*Tab views - if we are sure we will not support 2022, we should merge this with TabView uss*/
#tab-view{
height: 100%;
}
#tab-zone {
flex-direction: row;
justify-content: center;
align-items: center;
min-height: var(--tab-button-bar-height);
max-height: var(--tab-button-bar-height);
}
.tabs-container {
height: 100%;
}
.tab-content{
height: 100%;
}
#recommendation-tab-container
{
height: 100%;
}
.main-split-view {
border-top-width: 1px;
border-top-color: var(--border-color);
height: 100%;
margin-bottom: 0px;
}
.main-split-view-right{
margin-top: 10px;
}
#unity-dragline-anchor{
background-color: var(--border-color);
}
#unity-dragline-anchor:hover{
background-color: white;
opacity: 0.3;
}
.tab-button {
margin: 0;
padding-top: 4px;
border-width: 0px;
border-bottom-width: 2px;
min-height: var(--tab-button-bar-height);
flex-grow: 0;
flex-shrink: 0;
border-color: var(--dark-grey);
background-color: var(--dark-grey);
padding-left: 12px;
padding-right: 12px;
align-items: center;
}
.tab-button:hover {
background-color: var(--standard-grey);
}
.tab-button.selected {
border-bottom-width: 2px;
border-bottom-color: var(--tab-button-highlight-color);
}
/* Getting started views */
.onboarding-categories{
margin: 0px;
align-items: flex-start;
}
.onboarding-categories .unity-button-group{
flex-direction: column;
align-self: stretch;
margin: 0px;
}
.onboarding-category-button{
margin: 0px;
padding-left: 20px;
-unity-text-align: middle-left;
width: 100%;
min-height: 28px;
border-width: 0px;
background-color: transparent;
border-radius: 0px;
}
.onboarding-category-button:hover {
background-color: var(--standard-grey);
}
.onboarding-category-button:checked {
background-color: var(--unity-colors-highlight-background);
-unity-font-style: bold;
color: var(--onboarding-button-selected-text-color);
}
.onboarding-section-category-container{
padding-left: 12px;
padding-right: 12px;
margin-bottom: 24px;
}
.onboarding-section-mainbutton{
max-height: 24px;
align-self: flex-start;
padding: 2px 4px 2px 4px;
margin-left: 0;
margin-top: 4px;
margin-bottom: 16px;
}
/*onboarding section*/
.onboarding-section {
background-color: var(--unity-colors-inspector_titlebar-border_accent);
padding: 16px;
margin-bottom: 8px;
}
.section-foldout {
background-color: var(--card-background);
padding: 16px;
padding-top: 8px;
margin-bottom: 8px;
}
.section-foldout .unity-foldout__checkmark {
/* Use width instead of display: none, which results in the title being cut */
width: 0;
}
.section-foldout .unity-foldout__text {
font-size: 14px;
-unity-font-style: Bold;
margin-bottom: 8px;
margin-left: -6px;
}
.section-foldout .onboarding-section-short-description {
margin-left: -16px;
}
.onboarding-section-title {
font-size: 14px;
-unity-font-style: Bold;
margin-bottom: 8px;
}
.three-dot-button {
background-color: transparent;
border-width: 0px;
padding: 0px;
margin: 0px;
width: 14px;
height: 14px;
}
.three-dot-button:hover {
background-color: var(--standard-grey);
}
.onboarding-section-short-description {
max-width: 700px;
overflow: hidden;
white-space: normal;
}
.horizontal-container {
flex-direction: row;
justify-content: flex-start;
}
.flex-spacer {
flex-grow: 1;
}
.doc-button {
border-width: 0px;
padding: 1px;
margin-left: 0px;
margin-right: 2px;
background-color: var(--card-background);
color: var(--link-color);
}
.doc-button:hover {
background-color: var(--dark-grey);
}
#doc-button-separator {
margin: 2px;
color: var(--doc-separator-color);
}
.checkmark-icon {
background-image: var(--checkmark-icon);
-unity-background-scale-mode: scale-to-fit;
background-size: 16px 16px;
min-width: 16px;
max-width: 16px;
min-height: 16px;
max-height: 16px;
}
/* Empty view which is shown when no recommendations are shown*/
#empty-view {
flex-grow: 1;
align-items: center;
justify-content: center;
}
#empty-view-content{
height: 100%;
width: 75%;
max-width: 400px;
justify-content: center;
}
#empty-view-icon {
min-height: 50%;
background-image: var(--questionnaire-empty-view-icon);
background-size: contain;
margin-bottom: 8px;
}
#empty-view-message {
flex-shrink: 0;
flex-grow: 0;
width: 100%;
-unity-text-align: upper-left;
overflow: hidden;
white-space: normal;
}