style-light-theme.css

.headline-1 {
  font-family: "Roboto", sans-serif;
  font-size: 74pt;
  font-weight: 300;
  letter-spacing: -1.5px; }

.headline-2 {
  font-family: "Roboto", sans-serif;
  font-size: 46pt;
  font-weight: 300;
  letter-spacing: -0.5px; }

.headline-3 {
  font-family: "Roboto", sans-serif;
  font-size: 37pt; }

.headline-4 {
  font-family: "Roboto", sans-serif;
  font-size: 26pt;
  letter-spacing: 0.25px; }

.headline-5 {
  font-family: "Roboto", sans-serif;
  font-size: 18pt; }

.headline-6 {
  font-family: "Roboto", sans-serif;
  font-size: 14.5pt;
  font-weight: 500;
  letter-spacing: 0.15px; }

subtitle-1 {
  font-family: "Roboto", sans-serif;
  font-size: 12pt;
  letter-spacing: 0.15px; }

.subtitle-2, #horizontalPanel .clock-label {
  font-family: "Roboto", sans-serif;
  font-size: 10.5pt;
  font-weight: 500;
  letter-spacing: 0.1px; }

.body-1 {
  font-family: "Roboto", sans-serif;
  font-size: 12pt;
  letter-spacing: 0.5px; }

.body-2 {
  font-family: "Roboto", sans-serif;
  font-size: 10.5pt;
  letter-spacing: 0.25px; }

.caption, MatTooltip {
  font-family: "Roboto", sans-serif;
  font-size: 9pt;
  letter-spacing: 0.4px; }

.overline {
  font-family: "Roboto", sans-serif;
  font-size: 7.5pt;
  letter-spacing: 1.5px; }

.margin {
  margin: 8px !important; }

.margin-x2 {
  margin: 16px !important; }

.margin-x3 {
  margin: 24px !important; }

.margin-top {
  margin-top: 8px !important; }

.margin-top-x2 {
  margin-top: 16px !important; }

.margin-top-x3 {
  margin-top: 24px !important; }

.margin-right {
  margin-right: 8px !important; }

.margin-right-x2 {
  margin-right: 16px !important; }

.margin-right-x3 {
  margin-right: 24px !important; }

.margin-bottom {
  margin-bottom: 8px !important; }

.margin-bottom-x2 {
  margin-bottom: 16px !important; }

.margin-bottom-x3 {
  margin-bottom: 24px !important; }

.margin-left {
  margin-left: 8px !important; }

.margin-left-x2 {
  margin-left: 16px !important; }

.margin-left-x3 {
  margin-left: 24px !important; }

.text-high-emphasis {
  color: rgba(0, 0, 0, 0.87); }

.text-medium-emphasis {
  color: rgba(0, 0, 0, 0.6); }

.text-disabled {
  color: rgba(0, 0, 0, 0.38); }

.workspace-active-indicator {
  background: #3f51b5;
  width: 3px; }

.ripple-wave {
  border-radius: 10000px;
  background: rgba(0, 0, 0, 0.12); }

.mat-button {
  color: rgba(0, 0, 0, 0.87); }
  .mat-button:hover, .mat-button.highlighted {
    background: rgba(0, 0, 0, 0.04); }
  .mat-button.primary {
    background: #3f51b5; }
    .light-primary.mat-button.primary {
      color: rgba(0, 0, 0, 0.87); }
    .dark-primary.mat-button.primary {
      color: rgba(255, 255, 255, 0.87); }
    .light-primary.mat-button.primary:hover, .mat-button.primary.highlighted {
      background: #2c397f; }
    .dark-primary.mat-button.primary:hover, .mat-button.primary.highlighted {
      background: #707ecd; }

.mat-button .mat-panel-button {
  color: rgba(0, 0, 0, 0.6); }
  .mat-button .mat-panel-button.active {
    background: rgba(0, 0, 0, 0.12);
    color: #3f51b5; }

#msPanel {
  background: rgba(255, 255, 255, 0.876);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4); }
  #msPanel .panel-button {
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
    font-weight: bold;
    -natural-hpadding: 0px;
    -minimum-hpadding: 0px; }
    #msPanel .panel-button .app-menu-icon {
      -st-icon-style: symbolic;
      margin-left: 4px;
      margin-right: 4px; }
    #msPanel .panel-button:hover {
      background: rgba(0, 0, 0, 0.04); }
    #msPanel .panel-button:active, #msPanel .panel-button:overview, #msPanel .panel-button:focus, #msPanel .panel-button:checked {
      background: rgba(0, 0, 0, 0.04);
      box-shadow: inset 3px 0 0px #3f51b5;
      color: rgba(0, 0, 0, 0.87); }
    .unlock-screen #msPanel .panel-button,
    .login-screen #msPanel .panel-button,
    .lock-screen #msPanel .panel-button {
      color: rgba(0, 0, 0, 0.6); }
      .unlock-screen #msPanel .panel-button:focus, .unlock-screen #msPanel .panel-button:hover, .unlock-screen #msPanel .panel-button:active,
      .login-screen #msPanel .panel-button:focus,
      .login-screen #msPanel .panel-button:hover,
      .login-screen #msPanel .panel-button:active,
      .lock-screen #msPanel .panel-button:focus,
      .lock-screen #msPanel .panel-button:hover,
      .lock-screen #msPanel .panel-button:active {
        color: rgba(0, 0, 0, 0.87); }
  #msPanel .panel-status-indicators-box,
  #msPanel .panel-status-menu-box {
    spacing: 2px;
    vertical-align: middle;
    text-align: center;
    min-height: 20px; }
  #msPanel .system-status-icon {
    height: 20px;
    icon-size: 1.09em;
    margin-top: 4px;
    margin-bottom: 4px; }
  #msPanel MsDateMenuBox StIcon {
    padding-top: 14px;
    padding-bottom: 14px;
    height: 20px;
    width: 20px; }
    #msPanel MsDateMenuBox StIcon .primary {
      color: #3f51b5; }
  #msPanel MsDateMenuBox StLabel {
    margin: 8px 0px; }
    #msPanel MsDateMenuBox StLabel .primary {
      color: #3f51b5; }

#horizontalPanel {
  background: rgba(255, 255, 255, 0.876);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4); }
  #horizontalPanel .task-active-indicator {
    background: #3f51b5;
    height: 2px; }
  #horizontalPanel .mat-panel-button .mat-panel-button-icon {
    color: rgba(0, 0, 0, 0.6); }
  #horizontalPanel .mat-panel-button.active {
    background: rgba(0, 0, 0, 0.12); }
    #horizontalPanel .mat-panel-button.active .mat-panel-button-icon {
      color: rgba(0, 0, 0, 0.87); }
  #horizontalPanel .clock-label {
    color: rgba(0, 0, 0, 0.6);
    margin-top: 3px;
    margin-right: 16px;
    margin-left: 16px; }

.task-bar-item {
  font-size: 10.5pt; }
  .task-bar-item.active .task-bar-item-content,
  .task-bar-item.active .task-bar-icon-container {
    background: rgba(255, 255, 255, 0.03);
    color: #3f51b5; }
  .task-bar-item .task-bar-icon-container {
    color: rgba(0, 0, 0, 0.6); }
  .task-bar-item .app-icon {
    icon-size: 24px;
    width: 24px;
    height: 24px; }
  .task-bar-item .task-bar-item-content {
    padding: 0px 12px;
    color: rgba(0, 0, 0, 0.6);
    max-width: 248px; }
    .task-bar-item .task-bar-item-content .app-icon {
      margin-right: 12px; }
    .task-bar-item .task-bar-item-content .task-bar-item-title {
      margin-right: 12px;
      font-weight: 600;
      font-size: 10.5pt; }
    .task-bar-item .task-bar-item-content .task-close-button {
      border-radius: 20px;
      width: 24px;
      height: 24px;
      color: rgba(0, 0, 0, 0.6);
      transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
      .task-bar-item .task-bar-item-content .task-close-button:hover {
        background: rgba(255, 255, 255, 0.12); }
      .task-bar-item .task-bar-item-content .task-close-button:hover:active {
        background: rgba(255, 255, 255, 0.24); }
    .task-bar-item .task-bar-item-content .task-small-icon {
      icon-size: 18px; }

.drop-placeholder {
  background: rgba(0, 0, 0, 0.1); }

.mat-card {
  border-radius: 6px;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4); }
  .mat-card .mat-card-title {
    background: rgba(0, 0, 0, 0.04);
    color: #3f51b5;
    height: 72px;
    padding: 0px 24px; }
    .mat-card .mat-card-title .mat-card-title-icon {
      icon-size: 40px;
      margin-right: 16px; }
    .mat-card .mat-card-title .mat-card-title-label {
      font-size: 18pt; }
  .mat-card .mat-card-content {
    padding: 24px;
    color: rgba(0, 0, 0, 0.87); }

MsApplicationLauncher * .search-entry {
  color: rgba(0, 0, 0, 0.6);
  background: white;
  border-radius: 48px; }

MsApplicationLauncher * .search-entry-icon {
  color: rgba(0, 0, 0, 0.6); }

MatTooltip {
  color: rgba(255, 255, 255, 0.87);
  background-color: #0c0c0c;
  border-radius: 4px;
  padding: 0px 8px;
  min-height: 24px;
  text-align: center; }

.surface {
  background: rgba(255, 255, 255, 0.987); }

.surface-lighter {
  background: rgba(255, 255, 255, 0.987); }

.surface-darker {
  background: rgba(179, 179, 179, 0.987); }

.popup-menu {
  margin-bottom: 0;
  -arrow-base: 0px;
  -arrow-rise: 0px; }

/* .no-theme { 
    .popup-menu {
        margin: 0;
        -boxpointer-gap: 0px;
        -arrow-border-radius: 0;
        -arrow-border-width: 0px;
        -arrow-border-color: transparent;
        -arrow-base: 0px;
        -arrow-rise: 0px;
        -arrow-background-color: transparent;
        .popup-menu-content {
            background: getDarkerColor(getBackgroundColor('dark'));
            margin: 0;
            padding-top: 8px;
            padding-bottom: 8px;
            border-radius: 8px;
            .popup-menu-item {
                font-weight: 400;
                padding-top: 10px;
                padding-bottom: 10px;
                @extend .body-2;
                .popup-menu-icon {
                    icon-size: 20px;
                    margin-right: 10px;
                    @include foreground-medium-emphasis('dark');
                }
                StLabel {
                    padding: 0;
                    padding-top: 1.5px;
                    @include foreground-high-emphasis('dark');
                }
                &.selected {
                    @extend .surface;
                }
            }
            .popup-separator-menu-item {
                padding: 0;
                spacing: 0px;
                .popup-separator-menu-item-separator {
                    margin: 8px 0px;
                    padding: 0;
                    @include hover('dark');
                }
                StLabel {
                    padding: 0;
                    margin: 8px 10px;
                    @include foreground-disabled('dark');
                }
                .popup-menu-ornament {
                    width: 0;
                    padding: 0;
                    margin: 0;
                }
            }
            .popup-sub-menu {
                background: rgba(0, 0, 0, 0.12);
                box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.12);
            }
            .popup-submenu-menu-item:open {
                @extend .surface-lighter;
            }
        }
        &.panel-menu {
            border-radius: 0px 8px 8px 0px;

            .popup-menu-content {
                margin-top: 20px; // space for shadow
                border-radius: 0px 8px 8px 0px;
                box-shadow: 3px 0px 8px rgba(0, 0, 0, 0.4);
            }
        }
        &.horizontal-panel-menu {
            border-radius: 0px 0px 8px 8px;

            .popup-menu-content {
                margin-left: 20px; // space for shadow
                border-radius: 0px 0px 8px 8px;
                box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4);
            }
        }
    }
    #calendarArea {
        .calendar,
        .message,
        .events-button,
        .world-clocks-button,
        .weather-button,
        .events-section-title {
            background: getLighterColor(getBackgroundColor('dark'));
            border: 0px;
        }
    }
} */
LayoutSwitcher > StBin {
  padding: 8px 0;
  margin-right: 8px; }

MatNumberPicker {
  background: #b3b3b3;
  border-radius: 10000px; }
  MatNumberPicker StButton {
    background: white;
    width: 32px; }
    MatNumberPicker StButton StIcon {
      margin: 8px; }
    MatNumberPicker StButton:first-child {
      border-radius: 32px 0 0 32px; }
    MatNumberPicker StButton:last-child {
      border-radius: 0 32px 32px 0; }
    MatNumberPicker StButton:hover {
      background: white; }
    MatNumberPicker StButton:active {
      background: white; }
  MatNumberPicker StLabel {
    margin-left: 8px;
    margin-right: 8px; }