Modus/main.css

@import url("./styles/dock.css");
@import url("./styles/colors.css");
@import url("./styles/components.css");
@import url("./styles/controls.css");
@import url("./styles/indicators.css");
@import url("./styles/workspaces.css");
@import url("./styles/switcher.css");
@import url("./styles/osd.css");
@import url("./styles/launcher.css");
@import url("./styles/kanban.css");
@import url("./styles/calendar.css");
@import url("./styles/notification.css");
@import url("./styles/player.css");

* {
  all: unset;
  color: var(--foreground);
  font-size: unset;
  font-family: unset;
  border-radius: 16px;
}

#corner {
  background-color: var(--shadow);
  border-radius: 0;
}

#corner-container {
  min-width: 20px;
  min-height: 20px;
}

tooltip {
  border: solid 1px;
  border-color: var(--surface);
  background-color: var(--shadow);
  animation: tooltipShow 0.25s cubic-bezier(0.5, 0.25, 0, 1);
}

@keyframes tooltipShow {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

tooltip > * {
  padding: 6px 10px;
  border-radius: 10px;
}

#workspaces,
#workspaces-container,
#launcher,
#date-time,
#music-player,
#osd,
#tray,
#battery,
#controls,
#notification-stack-box,
#metrics,
#language,
#applications-dock,
#dock {
  box-shadow: 0 0 3px alpha(black, 0.7);
}

#dashboard-window {
  transition: margin 0.25s cubic-bezier(0.5, 0.25, 0, 1);
}
#dashboard {
  background-color: black;
  border-radius: 25px;
  padding: 10px;
}
#inner {
  margin: 3px;
}

.tile {
  margin: 2px;
  min-height: 60px;
  min-width: 140px;
  border-radius: 20px;
}
.tile.mini {
  min-height: 46px;
  min-width: 46px;
  border-radius: 100%;
}
.tile.on {
  background-color: var(--primary);
}
.tile.off {
  background-color: var(--surface-bright);
}
.tile.on .desc-label,
.tile.on .tile-label,
.tile.on .tile-icon {
  color: black;
  transition: all;
}
.tile.off .desc-label,
.tile.off .tile-label,
.tile.off .tile-icon {
  color: var(--foreground);
  transition: all;
}

.tile-icon {
  font-size: 16px;
  margin: 10px;
}
.tile-icon.mini {
  font-size: 20px;
  transition: font-size 0.25s cubic-bezier(0.5, 0.25, 0, 1);
}
.tile-icon.maxi {
  font-size: 16px;
  transition: font-size 0.25s cubic-bezier(0.5, 0.25, 0, 1);
}

.tile-button {
  all: unset;
}

.tile-menu {
  all: unset;
  min-width: 400px;
  min-height: 300px;
  margin: -999px;
}
.tile-menu.expand {
  margin: 0px;
  transition: margin 0.15s cubic-bezier(0.5, 0.25, 0, 1);
}
.tile-menu.contract {
  margin: -200px;
  transition: margin 0.25s cubic-bezier(0.5, 0.25, 0, 1);
}


#bluetooth-header,
#network-header {
  border: 2px solid var(--surface);
  padding: 4px;
  border-radius: 12px;
}

#bluetooth-device,
#wifi-ap-slot {
  border: 2px solid var(--surface);
  border-radius: 12px;
  padding: 4px;
}

#bluetooth-scan,
#bluetooth-back,
#network-refresh,
#network-back {
  background-color: var(--surface);
  border-radius: 8px;
  padding: 4px;
}

#bluetooth-back-label,
#network-back-label {
  font-size: 20px;
}

#bluetooth-scan:hover,
#bluetooth-back:hover,
#network-refresh:hover,
#network-back:hover {
  background-color: var(--surface-bright);
}

#bluetooth-scan label,
#bluetooth-toggle label,
#wifi-connect-button label {
  font-weight: bold;
}

#bluetooth-text,
#bluetooth-section {
  font-weight: bold;
}

#bluetooth-section {
  background-color: var(--surface);
  border-radius: 12px;
  padding: 8px;
}

#bluetooth-connection {
  font-size: 20px;
}

#bluetooth-connect,
#wifi-connect-button {
  font-weight: bold;
  background-color: var(--surface);
  border-radius: 8px;
  padding: 8px;
}

#wifi-connect-button.connected {
  background-color: var(--green);
}

#wifi-connect-button.connected label {
  color: var(--shadow);
}

#bluetooth-connect.connected {
  background-color: var(--blue);
}

#bluetooth-connect.connected label {
  color: var(--shadow);
}

#bluetooth-connect:hover {
  background-color: var(--surface-bright);
}

#bluetooth-paired,
#bluetooth-available {
  background-color: var(--surface);
  border-radius: 20px;
  padding: 4px;
}

#bt-sep {
  /*padding: 1px;*/
  border-radius: 16px;
  /*background-color: var(--surface);*/
  /*margin: 0 16px;*/
}

#bluetooth-scan-label,
#network-refresh-label {
  font-size: 20px;
  color: var(--primary);
}

#bluetooth-scan.scanning {
  animation: blink 0.5s ease infinite;
}

#bluetooth-scan-label.scanning {
  animation: blink 0.5s ease infinite;
}

@keyframes blink {
  0% {
    background-color: var(--blue);
    color: var(--shadow);
  }
  50% {
    background-color: var(--shadow);
    color: var(--blue);
  }
  100% {
    background-color: var(--blue);
    color: var(--shadow);
  }
}