pxt-core 7.4.14 → 7.4.18

package/react-common/styles/controls/Input.less

@@ -0,0 +1,113 @@
+/****************************************************
+ *                Input                             *
+ ****************************************************/
+
+.common-input-group {
+    position: relative;
+    display: flex;
+    height: 2rem;
+    align-items: stretch;
+    border-radius: 2px;
+    border: 1px solid @inputBorderColor;
+    background: @inputBackgroundColor;
+}
+
+.common-input-group:focus::after,
+.common-input-group:focus-within::after {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    border: 2px solid @inputBorderColorFocus;
+    border-radius: 2px;
+    pointer-events: none;
+}
+
+.common-input {
+    width: 100%;
+    min-width: 0;
+    padding: 0 0.5rem;
+    color: @inputTextColor;
+    border: none;
+    outline: 0;
+    background: none transparent;
+    text-overflow: ellipsis;
+}
+
+/****************************************************
+ *                Input Label                       *
+ ****************************************************/
+
+.common-input-label {
+    display: block;
+    font-size: 14px;
+    font-weight: 600;
+    padding: 0.3rem 0;
+    overflow-wrap: break-word;
+}
+
+/****************************************************
+ *                Input Icon                        *
+ ****************************************************/
+
+.common-input-group {
+    & > i.fas, i.far, .icon, .xicon {
+        position: absolute;
+        bottom: 0.3rem;
+        right: 0.5rem;
+        width: 1.25rem;
+        margin-right: 0;
+        line-height: 1.25rem;
+        pointer-events: none;
+    }
+
+    & > .common-button {
+        color: @inputButtonColor;
+        padding: 0;
+        margin: 0;
+        border-radius: 0;
+
+        &:hover {
+            color: @inputButtonColorHover;
+        }
+    }
+}
+
+.common-input.has-icon {
+    padding: 0 1.75rem 0 0.5rem;
+}
+
+/****************************************************
+ *                Disabled Input                    *
+ ****************************************************/
+
+.common-input-wrapper.disabled {
+    .common-input-group {
+        cursor: default;
+        border: 1px solid @inputBackgroundColorDisabled;
+        background: @inputBackgroundColorDisabled;
+    }
+
+    .common-input,
+    .common-input-label,
+    i {
+        color: @inputTextColorDisabled;
+    }
+}
+
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+.high-contrast {
+    .common-input {
+        color: @highContrastTextColor;
+        border-color: @highContrastTextColor;
+        background-color: @highContrastBackgroundColor;
+    }
+
+    .common-input-group:focus::after,
+    .common-input-group:focus-within::after {
+        border-color: @highContrastHighlightColor;
+    }
+
+}

package/react-common/styles/controls/MenuDropdown.less

@@ -0,0 +1,55 @@
+.common-menu-dropdown {
+    height: 100%;
+    position: relative;
+}
+
+.common-menu-dropdown > .menu-button.expanded {
+    background: @buttonMenuBackgroundActiveColor;
+}
+
+.common-menu-dropdown-pane {
+    position: absolute;
+    right: 0;
+    width: 12rem;
+
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        background: @menuDropdownPaneBackground;
+    }
+
+    li {
+        width: 100%;
+    }
+}
+
+.common-menu-dropdown-item {
+    background: none;
+    text-align: left;
+    width: 100%;
+    margin: 0;
+    padding: 1rem;
+}
+
+.common-menu-dropdown-item.common-button:focus::after {
+    outline: @buttonFocusOutlineInverted;
+}
+
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+.high-contrast {
+    .common-menu-dropdown-pane {
+        color: @highContrastTextColor;
+        background-color: @highContrastBackgroundColor;
+        border: 1px solid @highContrastTextColor;
+    }
+
+    .common-menu-dropdown-item:hover,
+    .common-menu-dropdown > .menu-button.expanded {
+        outline: @highContrastFocusOutline;
+        z-index: @highContrastFocusZIndex;
+    }
+}

package/react-common/styles/controls/Modal.less

@@ -0,0 +1,134 @@
+.common-modal-container {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--modal-overlay-color);
+    z-index: var(--modal-dimmer-zindex);
+}
+
+.common-modal-container.fullscreen {
+    z-index: var(--fullscreen-modal-zindex)
+}
+
+.common-modal {
+    width: 50%;
+    max-width: 40rem;
+    border-radius: .285rem;
+    overflow: hidden;
+}
+
+.common-modal-header {
+    background-color: @modalHeaderBackgroundColor;
+
+    display: flex;
+    font-size: 1.2rem;
+    font-weight: 600;
+    padding-left: 1.5rem;
+    border-bottom: @modalSeparatorBorder;
+    flex-shrink: 0;
+
+    .common-modal-title {
+        flex-grow: 1;
+        padding-top: 1.25rem;
+        padding-bottom: 1.25rem;
+    }
+
+    .common-modal-close .common-button .fas {
+        color: @modalCloseColor;
+    }
+}
+
+.common-modal-body {
+    background-color: @modalBodyBackgroundColor;
+    min-height: 4rem;
+    padding: 1.25rem 1.5rem;
+}
+
+.common-modal-footer {
+    background-color: @modalFooterBackgroundColor;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    padding: 1rem;
+    border-top: @modalSeparatorBorder;
+
+    button:only-child {
+        grid-column: 2 / -1;
+    }
+}
+
+.fullscreen > .common-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    max-width: none;
+    padding: 0;
+    border-radius: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.fullscreen > .common-modal > .common-modal-header {
+    background-color: var(--primary-color);
+    color: white;
+    margin-bottom: 0;
+
+    .common-modal-back {
+        font-size: 1.2rem;
+        font-weight: 600;
+
+        .common-button.men .fas {
+
+        }
+    }
+
+    .common-modal-title {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+.fullscreen > .common-modal > .common-modal-body {
+    flex-grow: 1;
+    background-color: var(--body-background-color);
+    padding: 1rem;
+    max-height: unset;
+}
+
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+.high-contrast {
+    .common-modal-header,
+    .common-modal-body,
+    .common-modal-footer {
+        background-color: @highContrastBackgroundColor;
+        color: @highContrastTextColor;
+        border-color: @highContrastTextColor;
+
+        .common-modal-close .common-button .fas {
+            opacity: 1;
+            color: @highContrastTextColor;
+        }
+    }
+
+    .fullscreen > .common-modal > .common-modal-header,
+    .fullscreen > .common-modal > .common-modal-body {
+        background-color: @highContrastBackgroundColor;
+        color: @highContrastTextColor;
+    }
+
+    .common-modal {
+        border: 1px solid @highContrastTextColor;
+    }
+}

package/react-common/styles/controls/Spinner.less

@@ -0,0 +1,24 @@
+// This is mostly taken from fluentui
+.common-spinner {
+    box-sizing: border-box;
+    border-radius: 50%;
+    border-width: 1.5px;
+    border-style: solid;
+    border-color: rgb(0, 120, 212) rgb(199, 224, 244) rgb(199, 224, 244);
+    border-image: initial;
+    animation-name: spinner-rotate;
+    animation-duration: 1.3s;
+    animation-iteration-count: infinite;
+    animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67);
+    width: 20px;
+    height: 20px;
+}
+
+@keyframes spinner-rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/react-common/styles/profile/profile.less

@@ -303,6 +303,38 @@
     font-family: var(--body-font-family);
 }
 
+.common-checkbox.loading {
+    input {
+        opacity: 0;
+    }
+
+    .common-spinner {
+        display: inline-block;
+        position: absolute;
+        left: 0px;
+    }
+}
+
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+.high-contrast {
+    .profile-badges .profile-badge,
+    .profile-badges-background .profile-badge,
+    .profile-badge-and-title,
+    .profile-initials-portrait,
+    .profile-badge-subtitle,
+    .profile-username {
+        color: @highContrastTextColor;
+        background-color: @highContrastBackgroundColor;
+    }
+
+    .profile-badge.clickable:hover {
+        outline: @highContrastFocusOutline;
+    }
+}
+
 @media only screen and (max-width: 1200px) and (min-width: 992px) {
     .profile-badges, .profile-badges-background {
         background-size: 25%;

package/react-common/styles/react-common-variables.less

@@ -1,12 +1,67 @@
+@commonTextColor: rgb(50, 49, 48);
+@commonBorderColor: rgb(96, 94, 92);
+@commonBackgroundDisabledColor: rgb(243, 242, 241);
+
 /****************************************************
  *                    Buttons                       *
  ****************************************************/
 
-@buttonTextColor: rgb(50, 49, 48);
+@buttonTextColor: @commonTextColor;
 @buttonTextColorInverted: @white;
 @buttonBackgroundColor: @white;
-@buttonBackgroundColorDisabled: rgb(243, 242, 241);
+@buttonBackgroundColorDisabled: @commonBackgroundDisabledColor;
 
 @buttonMenuTextColor: #ffffff;
 @buttonMenuTextColorInverted: @primaryColor;
-@buttonMenuBackgroundColorInverted: @buttonMenuTextColor;
+@buttonMenuBackgroundColorInverted: @buttonMenuTextColor;
+@buttonFocusOutline: @buttonTextColorInverted solid 1px;;
+@buttonFocusOutlineInverted: @commonBorderColor solid 1px;
+@buttonMenuBackgroundHoverColor: rgba(0,0,0,.1);
+@buttonMenuBackgroundActiveColor: rgba(0,0,0,.15);
+
+/****************************************************
+ *                    Modals                        *
+ ****************************************************/
+
+@modalCloseColor: #333333;
+@modalBodyBackgroundColor: #ffffff;
+@modalHeaderBackgroundColor: @modalBodyBackgroundColor;
+@modalFooterBackgroundColor: #f9fafb;
+@modalSeparatorBorder: 1px solid rgba(34, 36, 38, .15);
+
+
+/****************************************************
+ *                 MenuDropdowns                    *
+ ****************************************************/
+
+ @menuDropdownPaneBackground: #ffffff;
+
+
+/****************************************************
+ *                    Checkboxes                    *
+ ****************************************************/
+
+@checkboxFocusOutline: @commonBorderColor solid 1px;
+
+/****************************************************
+ *                    Inputs                        *
+ ****************************************************/
+
+@inputTextColor: @commonTextColor;
+@inputTextColorDisabled: rgb(161, 159, 157);
+@inputBorderColor: @commonBorderColor;
+@inputBorderColorFocus: rgb(0, 120, 212);
+@inputBackgroundColor: #ffffff;
+@inputBackgroundColorDisabled: @commonBackgroundDisabledColor;
+@inputButtonColor: rgb(0, 120, 212);
+@inputButtonColorHover: rgb(16, 110, 190);
+
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+ @highContrastTextColor: #ffffff;
+ @highContrastBackgroundColor: #000000;
+ @highContrastHighlightColor: #ffff00;
+ @highContrastFocusOutline: 2px solid @highContrastHighlightColor;
+ @highContrastFocusZIndex: 1;

package/react-common/styles/react-common.less

@@ -1,6 +1,11 @@
 @import "profile/profile.less";
 @import "controls/Button.less";
+@import "controls/Checkbox.less";
 @import "controls/Icon.less";
+@import "controls/Input.less";
+@import "controls/MenuDropdown.less";
+@import "controls/Modal.less";
+@import "controls/Spinner.less";
 @import "./react-common-variables.less";
 
 @import "fontawesome-free/less/solid.less";

package/theme/asset-editor.less

@@ -10,6 +10,7 @@
     height: 100%;
     border-right: 1px solid @assetSidebarBorder;
     overflow-y: auto;
+    z-index: 1;
 }
 
 .asset-editor-sidebar-info {
@@ -159,31 +160,22 @@
     }
 }
 
-.asset-editor-button {
-    padding: .7em 2em .85em;
-    text-align: center;
-    background-color: @assetSidebarButton;
-    font-size: 1rem;
-    box-shadow: inset 0 0 0 1px rgba(34,36,38,.15), inset 0 -0.3em 0 0 rgba(34,36,38,.15);
-    cursor: pointer;
-}
-
-.asset-editor-button.disabled,
-.asset-editor-button.disabled:hover {
-    color: darken(@assetSidebarButtonHover, 20%);
-    background-color: @assetSidebarButtonHover;
-    cursor: not-allowed;
+.asset-editor-sidebar-controls > .common-list-item {
+    display: flex;
 }
 
-.asset-editor-button:hover {
-    background-color: @assetSidebarButtonHover;
+.asset-editor-button {
+    flex: 1;
+    box-shadow: inset 0 0 0 1px rgba(34,36,38,.15), inset 0 -0.3em 0 0 rgba(34,36,38,.15);
 }
 
-.asset-editor-button[data-tooltip]:hover:after {
-    z-index: @sidedocZIndex;
+.delete-asset.common-button {
+    flex: 1;
+    background: none transparent;
+    border: none;
 }
 
-.create-new {
+.create-new.common-button {
     color: @white;
     background-color: @green;
     font-weight: 700;
@@ -191,7 +183,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    border-width: 0;
+    margin: 1rem 0 0 1rem;
 
     i.icon {
         margin: 0;
@@ -207,14 +199,6 @@
     background-color: @assetUnselected;
 }
 
-.delete-asset {
-    margin: 0.5rem;
-    text-align: center;
-    font-size: 0.9rem;
-    cursor: pointer;
-    opacity: 0.9;
-}
-
 .asset-editor-create-options {
     display: flex;
     flex-wrap: wrap;
@@ -222,7 +206,7 @@
     justify-content: space-around;
 }
 
-.asset-editor-create-button {
+.asset-editor-create-button.common-button {
     display: flex;
     flex-direction: column;
     justify-content: center;

package/theme/highcontrast.less

@@ -11,6 +11,7 @@
 
 @selected: yellow;
 @disabled: #3ff23f;
+@hyperlink: #807FFF;
 
 /* Messages */
 #msg .hc {
@@ -77,6 +78,10 @@
         text-decoration: underline;
     }
 
+    ul > li {
+        color: @HCtextColor;
+    }
+
     #tutorialcard .prevbutton,
     #tutorialcard .nextbutton {
         &:hover, &:focus {
@@ -498,7 +503,7 @@
                 border-color: @HCtextColor;
                 border-style: solid;
             }
-            .actions {
+            .ui.grid.stackable .actions {
                 .card-action {
                     border: 2px solid @HCtextColor;
                     .button.attached i {
@@ -509,6 +514,10 @@
                 .card-action-title {
                     color: @HCtextColor;
                 }
+                .card-action:hover,
+                .card-action:focus-within {
+                    border-color: @selected;
+                }
             }
         }
     }
@@ -716,7 +725,8 @@
 
     /* Hyperlinks */
     a {
-        color: @HCtextColor !important;
+        color: @hyperlink !important;
+        text-decoration: underline !important;
     }
 
     #sidedocsbar {
@@ -856,6 +866,17 @@
         border-color: @selected !important;
     }
 
+    .formatted-bullet {
+        background: linear-gradient(@HCtextColor, @HCtextColor) ~"no-repeat 45%/2px 100%";
+        i.icon, i.xicon {
+            color: @HCbackground;
+            background-color: @HCtextColor;
+        }
+        &:after {
+            border-color: @HCtextColor !important;
+        }
+    }
+
 
     /* Modals */
     .ui.modal {

package/webapp/public/skillmap.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" data-rtl="/blb/rtlsemantic.css" href="/blb/semantic.css">
     <link rel="stylesheet" href="/blb/icons.css">
     <link rel="stylesheet" href="/blb/react-common-skillmap.css">
-  <link href="/blb/skillmap/css/main.369ecead.chunk.css" rel="stylesheet"></head>
+  <link href="/blb/skillmap/css/main.56e8c859.chunk.css" rel="stylesheet"></head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
@@ -28,5 +28,5 @@
     <!-- end usabilla live embed code -->
 
     <!-- @include thin-footer.html -->
-  <script>!function(e){function r(r){for(var n,l,i=r[0],a=r[1],p=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var a=t[i];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var i=this.webpackJsonpskillsmap=this.webpackJsonpskillsmap||[],a=i.push.bind(i);i.push=r,i=i.slice();for(var p=0;p<i.length;p++)r(i[p]);var f=a;t()}([])</script><script src="/blb/skillmap/js/2.dc66e964.chunk.js"></script><script src="/blb/skillmap/js/main.e89a1af7.chunk.js"></script></body>
+  <script>!function(e){function r(r){for(var n,l,i=r[0],a=r[1],p=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var a=t[i];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var i=this.webpackJsonpskillsmap=this.webpackJsonpskillsmap||[],a=i.push.bind(i);i.push=r,i=i.slice();for(var p=0;p<i.length;p++)r(i[p]);var f=a;t()}([])</script><script src="/blb/skillmap/js/2.261d5eab.chunk.js"></script><script src="/blb/skillmap/js/main.7c45ef9f.chunk.js"></script></body>
 </html>

package/built/web/skillmap/css/main.369ecead.chunk.css

@@ -1 +0,0 @@
-.dropdown:focus{outline:none;background-color:rgba(0,0,0,.2)}.header-dropdown{position:relative}.dropdown-menu{position:absolute;background-color:var(--body-background-color);z-index:var(--above-frame-zindex);border:1px solid var(--dropdown-hover-color);border-top:0;right:0}.dropdown-item{width:10rem;padding:.5rem .75rem;color:var(--black);font-size:1rem;font-weight:400;cursor:pointer}.dropdown-item:hover{background-color:var(--dropdown-hover-color)}.makecode-frame,.makecode-frame-outer{width:100%;height:100%}.makecode-frame-outer{overflow:hidden;position:relative}.makecode-frame-loader{position:absolute;width:100%;height:100%;background-color:var(--body-background-color);z-index:var(--frame-loader-zindex);text-align:center;display:flex;align-items:center;flex-direction:column;justify-content:center}.makecode-frame-loader.hidden{display:none}.makecode-frame-loader img{max-width:200px;vertical-align:middle;-webkit-animation:loader-pxt 2s linear infinite;animation:loader-pxt 2s linear infinite}.makecode-frame-loader-bar{border:1px solid var(--black);width:10rem;height:1.5rem;margin-bottom:1rem}.makecode-frame-loader-fill{background-color:var(--primary-color);height:100%;width:1rem;transition:width .5s ease-out}@-webkit-keyframes loader-pxt{0%{-webkit-transform:perspective(160px) rotateX(0deg) rotateY(0deg);transform:perspective(160px) rotateX(0deg) rotateY(0deg)}15%{-webkit-transform:perspective(160px) rotateX(0deg) rotateY(-5deg);transform:perspective(160px) rotateX(0deg) rotateY(-5deg)}50%{-webkit-transform:perspective(160px) rotateX(0deg) rotateY(5deg);transform:perspective(160px) rotateX(0deg) rotateY(5deg)}to{-webkit-transform:perspective(160px) rotateX(0deg) rotateY(0deg);transform:perspective(160px) rotateX(0deg) rotateY(0deg)}}@keyframes loader-pxt{0%{-webkit-transform:perspective(160px) rotateX(0deg) rotateY(0deg);transform:perspective(160px) rotateX(0deg) rotateY(0deg)}15%{-webkit-transform:perspective(160px) rotateX(0deg) rotateY(-5deg);transform:perspective(160px) rotateX(0deg) rotateY(-5deg)}50%{-webkit-transform:perspective(160px) rotateX(0deg) rotateY(5deg);transform:perspective(160px) rotateX(0deg) rotateY(5deg)}to{-webkit-transform:perspective(160px) rotateX(0deg) rotateY(0deg);transform:perspective(160px) rotateX(0deg) rotateY(0deg)}}.modal-overlay{position:fixed;display:flex;align-items:center;justify-content:center;top:0;left:0;right:0;bottom:0;background-color:var(--modal-overlay-color);z-index:var(--modal-dimmer-zindex)}.modal-overlay.fullscreen{z-index:var(--fullscreen-modal-zindex)}.modal{background-color:var(--body-background-color);width:50%;max-width:40rem;border-radius:.285rem}.fullscreen>.modal{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;max-width:none;padding:0;border-radius:0}.modal-header{display:flex;font-size:1.2rem;font-weight:600;padding:1.25rem 1.5rem;border-bottom:1px solid rgba(34,36,38,.15);flex-shrink:0}.fullscreen>.modal>.modal-header{background-color:var(--primary-color);color:#fff;padding:1rem;margin-bottom:0}.modal-header i{font-size:1.2rem;line-height:1.2rem;margin:0;cursor:pointer}.modal-body{min-height:4rem;padding:1.25rem 1.5rem}.fullscreen>.modal>.modal-header .modal-title{flex-grow:1;display:flex;justify-content:center;align-items:center}.fullscreen>.modal{display:flex;flex-direction:column}.fullscreen>.modal>.modal-body{flex-grow:1;background-color:var(--body-background-color);padding:1rem;max-height:unset}.modal-actions{display:grid;grid-template-columns:1fr 1fr;grid-gap:1rem;gap:1rem;padding:0 1.5rem 1.25rem}.modal-actions div:only-child{grid-column:auto/span 2}.modal-header .button{cursor:pointer}.modal-header .button:hover{-webkit-transform:scale(1.2);transform:scale(1.2);background-color:rgba(0,0,0,.1)}.modal-header i{padding-right:2rem}.modal-close-icon{position:relative}.modal-close-icon i.fas{position:absolute;font-size:2.15rem;line-height:2.15rem;height:2.15rem;width:2.15rem;right:0;top:-.25rem}.modal .checkbox{-webkit-user-select:none;-ms-user-select:none;user-select:none}.share-disclaimer{box-shadow:inset 0 0 0 1px #a9d5de,0 0 0 0 transparent;background-color:#f8ffff;color:#276f86;padding:1rem;border-radius:.25rem;margin:1rem 0 1.5rem}.share-loader{display:flex;justify-content:center;align-items:center;margin-bottom:1.5rem}.share-loader .ui.loader{margin-right:.15rem}.share-loader .ui.loader,.share-loader .ui.loader:after,.share-loader .ui.loader:before{height:1.2rem;width:1.2rem}.share-input{display:flex;margin:1rem 0}.share-input input{flex:1 1;padding:0 .5rem;font:var(--body-font-family);outline:none;border:1px solid var(--inactive-color);border-right-width:0}.share-copy{padding:.5rem 1.5rem;background-color:var(--primary-color);color:var(--white);cursor:pointer}.delete .checkbox{padding-top:1rem}.sign-in .container{display:flex;align-items:center}.sign-in .container a{padding-left:.5rem}.sign-in .remember{-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;margin-top:1rem;display:flex;justify-content:center;padding-bottom:.5rem}.sign-in .modal-actions{grid-template-columns:1fr;margin-top:.5rem}.modal .icon.cloud-user{width:7rem;margin-right:2rem}.profiledialog .ui.card{margin:0 14px 14px 0;border-radius:0;color:#000;border:1px solid #000!important;background-color:#fff}.profiledialog button{margin:0}.profiledialog label.title{font-weight:700}.profiledialog p.value{white-space:nowrap}.profiledialog p.description,.profiledialog p.value{text-overflow:ellipsis;overflow:hidden}.profiledialog div.header-text{font-size:20px;white-space:nowrap;grid-row-start:1;grid-row-end:1;grid-column-start:1;grid-column-end:2;justify-self:start}.profiledialog div.profile-pic{grid-row-start:1;grid-row-end:1;grid-column-start:2;grid-column-end:2;justify-self:end}.profiledialog .ui.card.panel{width:-webkit-fit-content;width:fit-content;min-width:350px;max-width:500px;padding:14px;display:inline-grid;grid-row-gap:20px;row-gap:20px;grid-template-rows:auto;grid-template-columns:auto}.profiledialog .ui.card.panel div.row{grid-column-end:2}.profiledialog .ui.card.panel div.row,.profiledialog .ui.card.panel div.row-span-two{grid-row-start:auto;grid-row-end:auto;grid-column-start:1;justify-self:start;max-width:100%}.profiledialog .ui.card.panel div.row-span-two{grid-column-end:3}.certificate-reward{display:flex;flex-direction:column;align-items:center;margin-top:1rem}.certificate-reward img{max-width:50%}.badge-modal-image{margin-top:1rem}.completion-reward{margin:1rem 0;width:100%}.confetti-container{position:absolute;width:100%;height:100%;overflow:hidden;z-index:100}.confetti{width:10px;height:10px;background-color:#249ca3;position:absolute;left:50%;top:-15px;-webkit-animation:confetti 2.5s linear -2s infinite;animation:confetti 2.5s linear -2s infinite;-webkit-transform-origin:left top;transform-origin:left top;z-index:110}.confetti.reverse{-webkit-animation:confetti-reverse 2.5s linear -2s infinite;animation:confetti-reverse 2.5s linear -2s infinite}.color-0{background-color:#ff2121}.color-1{background-color:#ff93c4}.color-2{background-color:#ff8135}.color-3{background-color:#fff609}.color-4{background-color:#249ca3}.color-5{background-color:#78dc52}.color-6{background-color:#003fad}.color-7{background-color:#87f2ff}.color-8{background-color:#8e2ec4}@-webkit-keyframes confetti{0%{-webkit-transform:rotate(15deg) rotateY(0deg) translate(0);transform:rotate(15deg) rotateY(0deg) translate(0)}25%{-webkit-transform:rotate(5deg) rotateY(1turn) translate(-1vw,20vh);transform:rotate(5deg) rotateY(1turn) translate(-1vw,20vh)}50%{-webkit-transform:rotate(15deg) rotateY(2turn) translate(1vw,50vh);transform:rotate(15deg) rotateY(2turn) translate(1vw,50vh)}75%{-webkit-transform:rotate(5deg) rotateY(3turn) translate(-1vw,80vh);transform:rotate(5deg) rotateY(3turn) translate(-1vw,80vh)}to{-webkit-transform:rotate(15deg) rotateY(4turn) translate(1vw,110vh);transform:rotate(15deg) rotateY(4turn) translate(1vw,110vh)}}@keyframes confetti{0%{-webkit-transform:rotate(15deg) rotateY(0deg) translate(0);transform:rotate(15deg) rotateY(0deg) translate(0)}25%{-webkit-transform:rotate(5deg) rotateY(1turn) translate(-1vw,20vh);transform:rotate(5deg) rotateY(1turn) translate(-1vw,20vh)}50%{-webkit-transform:rotate(15deg) rotateY(2turn) translate(1vw,50vh);transform:rotate(15deg) rotateY(2turn) translate(1vw,50vh)}75%{-webkit-transform:rotate(5deg) rotateY(3turn) translate(-1vw,80vh);transform:rotate(5deg) rotateY(3turn) translate(-1vw,80vh)}to{-webkit-transform:rotate(15deg) rotateY(4turn) translate(1vw,110vh);transform:rotate(15deg) rotateY(4turn) translate(1vw,110vh)}}@-webkit-keyframes confetti-reverse{0%{-webkit-transform:rotate(5deg) rotateY(0deg) translate(0);transform:rotate(5deg) rotateY(0deg) translate(0)}25%{-webkit-transform:rotate(15deg) rotateY(1turn) translate(1vw,20vh);transform:rotate(15deg) rotateY(1turn) translate(1vw,20vh)}50%{-webkit-transform:rotate(5deg) rotateY(2turn) translate(-1vw,50vh);transform:rotate(5deg) rotateY(2turn) translate(-1vw,50vh)}75%{-webkit-transform:rotate(15deg) rotateY(3turn) translate(1vw,80vh);transform:rotate(15deg) rotateY(3turn) translate(1vw,80vh)}to{-webkit-transform:rotate(5deg) rotateY(4turn) translate(-1vw,110vh);transform:rotate(5deg) rotateY(4turn) translate(-1vw,110vh)}}@keyframes confetti-reverse{0%{-webkit-transform:rotate(5deg) rotateY(0deg) translate(0);transform:rotate(5deg) rotateY(0deg) translate(0)}25%{-webkit-transform:rotate(15deg) rotateY(1turn) translate(1vw,20vh);transform:rotate(15deg) rotateY(1turn) translate(1vw,20vh)}50%{-webkit-transform:rotate(5deg) rotateY(2turn) translate(-1vw,50vh);transform:rotate(5deg) rotateY(2turn) translate(-1vw,50vh)}75%{-webkit-transform:rotate(15deg) rotateY(3turn) translate(1vw,80vh);transform:rotate(15deg) rotateY(3turn) translate(1vw,80vh)}to{-webkit-transform:rotate(5deg) rotateY(4turn) translate(-1vw,110vh);transform:rotate(5deg) rotateY(4turn) translate(-1vw,110vh)}}.selected .highlight{stroke-width:4px;fill:transparent}.graph-icon{font-family:"Font Awesome 5 Free"}.graph-icon,.graph-icon-x{font-size:1.75rem;opacity:.8}.graph-icon-x{font-family:xicon}.graph-activity.hover .graph-icon,.graph-activity.hover .graph-icon-x{opacity:1}.graph-status-icon{font-family:"Font Awesome 5 Free";font-size:1rem}.graph-activity{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.skill-graph-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1 1}.skill-graph-content{position:relative;display:flex;flex-direction:column;width:90%;z-index:var(--above-graph-zindex)}.skill-graph-activities{z-index:var(--graph-backround-zindex);-webkit-user-select:none;-ms-user-select:none;user-select:none}.has-background .skill-graph-activities{position:absolute;width:100%;height:100%}.skill-graph-content:not(.has-background) .skill-graph-background{position:absolute}.skill-graph-activities svg,.skill-graph-background img{object-fit:contain;width:100%;max-height:100%}.info-panel{display:flex;flex-direction:column;align-items:stretch;width:20rem;margin:1rem;z-index:var(--above-graph-zindex);background-color:var(--body-background-color)}.info-panel>.info-panel-image{width:100%;height:12rem;display:flex;justify-content:center;align-items:center;overflow:hidden;text-align:center;background-color:var(--primary-color);border:1px solid #000}.info-panel-image img{width:100%}.info-panel-image i{color:var(--white);font-size:5rem;line-height:5rem;vertical-align:top}.info-panel-content{padding:1rem;flex-grow:100;border:1px solid #000;overflow-y:auto}.info-panel-content>div{flex-shrink:0;margin-bottom:.5rem}.info-panel-content>.info-panel-tags,.info-panel-content>.tablet-spacer{margin:0}.info-panel-content>.info-panel-label,.info-panel-content>.info-panel-link,.info-panel-content>.info-panel-title{margin-bottom:1rem}.info-panel-title{font-size:1.2rem;font-weight:700;text-align:center;overflow:hidden;text-overflow:ellipsis}.info-panel-subtitle{font-size:.8rem}.info-panel-label,.info-panel-subtitle{text-align:center;text-transform:uppercase}.info-panel-label{padding:.5rem;background-color:var(--inactive-color)}.info-panel-link{display:block;width:100%;text-align:center}.info-panel-detail{display:flex;font-size:.8rem;text-transform:uppercase;justify-content:space-between}.info-panel-tags{display:flex;flex-wrap:wrap}.info-panel-tags>div{color:var(--active-color);border:1px solid var(--active-color);padding:.2rem .5rem;font-size:.8rem;margin:0 .5rem .5rem 0;white-space:nowrap;-webkit-user-select:none;-ms-user-select:none;user-select:none}.info-panel .actions{display:flex;flex-direction:column}.info-panel .actions .common-button{margin-bottom:.5rem;background-color:var(--body-background-color)}.locked.action-button,.locked.action-button:hover{color:var(--inactive-color);background-color:transparent;border-color:var(--inactive-color);cursor:default}.cloud-action{margin-top:1rem;display:flex;flex-direction:column}.sign-in-button{color:#fff;background-color:#2ea9b0;border-radius:.4rem;padding:.5rem;text-align:center;cursor:pointer}.cloud-indicator{display:flex;color:#2ea9b0}.cloud-indicator>.xicon{margin-right:.5rem}@media only screen and (max-width:991px){.info-panel{flex-direction:row;width:unset;height:18rem}.info-panel>.info-panel-image{height:100%;width:16rem;flex-direction:column}.info-panel-image img{height:100%;width:unset}.info-panel-content{position:relative;display:flex;flex-direction:column;flex:1 1}.info-panel-content>.info-panel-title{margin-bottom:.5rem}.info-panel-content>.info-panel-subtitle{margin:0}.info-panel-content>.info-panel-label{margin:1rem}.info-panel-subtitle,.info-panel-title{text-align:left}.info-panel-label{position:absolute;right:0;top:0;width:12rem;padding:.5rem 1rem}.info-panel-link{text-align:left}.info-panel .actions{display:flex;flex-direction:row;justify-content:space-evenly;margin-bottom:0}.info-panel .actions.grid{display:grid;grid-template-columns:1fr 1fr;grid-row-gap:.5rem;row-gap:.5rem}.info-panel .common-button{flex:0.5 1;margin-right:1rem;margin-bottom:0}.info-panel .common-button:last-child,.info-panel .grid .common-button:nth-child(2){margin-right:0}.sign-in-button{display:none}}@media only screen and (max-width:762px){.info-panel>.info-panel-image{display:none}.info-panel-label{width:unset}}:root{--black:#000;--white:#fff;--primary-color:#aa278f;--secondary-color:#eac6eb;--tertiary-color:#850a6b;--hover-color:var(--secondary-color);--active-color:var(--tertiary-color);--inactive-color:var(--secondary-color);--inactive-hover-color:#6e6e6e;--invert-active-color:#fff;--invert-hover-text-color:#850a6b;--body-background-color:#f9f9f9;--default-card-color:#ccc;--card-hover-color:#bfbfbf;--card-border-color:#e9eef2;--dropdown-hover-color:#ccc;--modal-overlay-color:rgba(0,0,0,0.5);--inverted-text-color:var(--white);--subtitle-text-color:#6e6e6e;--header-height:4rem;--header-padding-top:1rem;--body-font-family:"Share Tech Mono",Monaco,Menlo,"Ubuntu Mono",Consolas,source-code-pro,monospace;--feature-text-font:Segoe UI,Tahoma,Geneva,Verdana;--frame-loader-zindex:30;--above-frame-zindex:50;--modal-dimmer-zindex:100;--fullscreen-modal-zindex:90;--graph-backround-zindex:10;--above-graph-zindex:20}body{position:relative;margin:0;font-family:"Share Tech Mono",Monaco,Menlo,"Ubuntu Mono",Consolas,source-code-pro,monospace;font-family:var(--body-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f9f9f9;background-color:var(--body-background-color);overflow:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}#root{width:100%}#root,#root.editor{height:100%}#root>div{width:100%;height:100%}.app-container{display:flex;flex-direction:column;height:100%;width:100%}.noclick{pointer-events:none;cursor:default}.header{background-color:#850a6b;background-color:var(--tertiary-color);height:4rem;height:var(--header-height);max-height:4rem;max-height:var(--header-height);display:flex;align-items:center;color:#fff;color:var(--inverted-text-color);flex-grow:0;flex-shrink:0;z-index:50;z-index:var(--above-frame-zindex)}.header-left,.header-right{display:flex;align-items:center;height:100%}.header-logo{display:flex}.header .brand{font-size:1.5rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;display:flex}.header .brand:before{position:relative;height:1.5rem;border-left:2px solid #fff;content:" "}.ui.item.logo .name{margin-left:1rem;margin-bottom:1px}.header-logo img{height:1.4rem;margin:0 1rem}.user-menu{height:100%}.user-menu .header-button.sign-in{border-radius:6px;background-color:#f9f9f9;background-color:var(--body-background-color);color:#393939;height:80%;margin:.5rem 1rem .5rem .5rem;padding:.6rem;font-family:Segoe UI,Tahoma,Geneva,Verdana;font-family:var(--feature-text-font);font-weight:500;flex-direction:row-reverse;align-items:center}.user-menu .header-dropdown{height:inherit;cursor:pointer;width:3.5rem}.user-menu .avatar,.user-menu .header-dropdown{display:flex;align-items:center;justify-content:center}.user-menu .avatar{height:100%}.user-menu .avatar img{border:2px solid #fff;border-radius:100%;width:2.5rem;height:2.5rem}.header-org-logo{height:2rem;margin-left:1rem}.header-org-logo img{height:100%}.header-org-logo .header-org-logo-small{display:none}.header i{line-height:2rem;cursor:pointer}.header-dropdown i,.header-dropdown img,.header-dropdown span{display:flex;justify-content:center;align-items:center;height:4rem;height:var(--header-height);width:3.5rem;margin:0;font-size:1.6rem}.header-button{color:#fff;color:var(--invert-active-color);height:100%;padding:1rem .5rem;padding:var(--header-padding-top) .5rem;font-size:1.2rem;text-align:center;cursor:pointer;flex:1 1;-webkit-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;font-size:1.6rem}.header-button.with-label{flex-grow:3;display:flex}.header-button.icon-only{font-size:unset;padding:1rem .5rem;padding:var(--header-padding-top) .5rem}.header-button .header-button-label{line-height:2rem;white-space:nowrap;font-size:1rem;margin-right:.4rem}.header-button:hover,.header-dropdown:hover{background-color:rgba(0,0,0,.1)}.header-button:hover>i,.header-dropdown:hover>i{-webkit-transform:scale(1.2);transform:scale(1.2)}.header-button.sign-in:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.header-button.sign-in:hover>i,.header-button.sign-in:hover>span{-webkit-transform:none;transform:none}.header-activity-display-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:10;font-size:1.2rem;font-weight:700}.avatar-initials{height:2.5rem;width:2.5rem;border-radius:100%;border:2px solid #fff;background-color:#028b9b;display:flex;align-items:center;justify-content:center;font-size:16px}.header-dropdown.user-dropdown .dropdown-menu{top:4rem;top:var(--header-height)}.banner{background-color:#eac6eb;background-color:var(--secondary-color);display:flex;align-items:center;height:12rem;margin-bottom:.5rem}.banner-card{background-color:#aa278f;background-color:var(--primary-color);min-width:24rem;width:60%;display:flex;color:#fff;color:var(--inverted-text-color)}.banner-card>i{font-size:5rem;line-height:5rem;margin:2rem 1rem;flex-shrink:0}.banner-text{display:flex;flex-direction:column;justify-content:center;padding-right:1rem}.banner-title{font-size:2rem;margin-bottom:.5rem}.banner-info i,.banner-info i:hover{margin-left:.5rem;color:#fff;color:var(--inverted-text-color);font-size:1.2rem;vertical-align:top;text-decoration:none}.skill-map-container{flex-grow:1;display:flex;flex-direction:row;justify-content:center}.skill-map-error{text-align:center;margin-top:2rem;color:red}.report-abuse-text{width:100%;height:7rem;margin:.5rem 0;padding:.5rem}.report-abuse-text::-webkit-input-placeholder{font-style:italic}.report-abuse-text:-ms-input-placeholder{font-style:italic}.report-abuse-text::placeholder{font-style:italic}.badge-modal-image{display:flex;justify-content:center}.badge-modal-image img{height:15rem}.usabilla_live_button_container{top:unset!important;bottom:9rem!important}#msccBanner{display:none}@media only screen and (max-width:991px){.skill-map-container{flex-direction:column}.tablet-spacer{flex-grow:1}.usabilla_live_button_container{bottom:14rem!important}}@media only screen and (max-height:44rem) and (min-width:767px){:root{--header-height:3rem;--header-padding-top:.5rem}.header-button.with-label{flex-grow:1}.user-menu .header-button.sign-in{padding:.2rem .8rem;margin-top:.4rem}}@media only screen and (max-width:767px){.header-org-logo .header-org-logo-large{display:none}.header-org-logo .header-org-logo-small{display:block}.user-menu .header-button.sign-in{padding-left:.6rem}.user-menu .header-button.sign-in .header-button-label{display:none}}body{background:#fdf3e0}.arcade{--primary-color:#e77038;--secondary-color:#ffeb9a;--tertiary-color:#e77038;--hover-color:var(--secondary-color);--active-color:var(--tertiary-color);--inactive-color:#bfbfbf;--invert-active-color:#fff;--invert-hover-text-color:#e77038;--body-background-color:#fdf3e0;--card-hover-color:var(--default-card-color)}.arcade .banner{background:linear-gradient(90deg,#9feffd,#fd99c2)}.arcade .dropdown-menu,.arcade .modal{background-color:var(--white)}.arcade .carousel-arrow{color:var(--primary-color)}