Modus/main.css

@import url("./styles/colors.css");
@import url("./styles/panel.css");
@import url("./styles/dock.css");
@import url("./styles/switcher.css");
@import url("./styles/launcher.css");
@import url("./styles/osd.css");
@import url("./styles/controlcenter.css");
@import url("./styles/notification.css");
@import url("./styles/dropdown.css");
@import url("./styles/about.css");
@import url("./styles/notification-center.css");
@import url("./styles/player.css");

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

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

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

tooltip {
  border: solid 1px;
  border-radius: 16px;
  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;
}

menu {
  border: solid 1px;
  border-radius: 16px;
  border-color: var(--surface);
  background-color: var(--shadow);
  padding: 6px;
}

menu > menuitem {
  border-radius: 10px;
  padding: 6px 10px;
}

menu > menuitem:hover {
  background-color: var(--primary);
}

menu > menuitem:hover > label {
  color: var(--shadow);
}










#box-widget-2{
    /* background-color: alpha(#1C1C1C, 1); */
    background: linear-gradient(to bottom, #202020, #141414);
    min-width: 170px;
    min-height: 170px;
    border-radius: 16px;
}

#weather-widget label{
    font-family: "SF Pro Rounded";
    /* font-size: 20px; */
    margin-left: 12px;
}

#city {
    margin-top: 10px;
    color: #68A7B5;
    font-weight: 600;
    font-size: 20px;

}
#temperature {
    font-size: 50px;
    font-weight: 400;
}

#condition-emoji{
    margin-top: 5px;
    font-size: 16px;
}

#condition {
    font-size: 15px;
    font-weight: 600;
}
#feels-like {

    font-weight: 600;
    font-size: 15px;
}
/* # */

/* Calendar Widget */
#calendar-box-widget {
    background: linear-gradient(to bottom, #202020, #141414);
    margin: 20px 20px 20px 10px;
    min-width: 170px;
    min-height: 170px;
    border-radius: 16px;
}

#calendar-widget {
    font-family: "SF Pro Rounded";
    margin: 12px;
}

#calendar-month {
    font-size: 16px;
    font-weight: 600;
    color: #68A7B5;
    margin-bottom: 8px;
}

#calendar-days-header {
    margin-bottom: 6px;
}

#calendar-day-header {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    min-width: 18px;
    min-height: 16px;
}

#calendar-day-header-weekend {
    font-size: 12px;
    font-weight: 600;
    color: #8E8D93;
    min-width: 18px;
    min-height: 16px;
}

#calendar-day {
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    min-width: 18px;
    min-height: 16px;
}

#calendar-day-weekend {
    font-size: 12px;
    font-weight: 500;
    color: #8E8D93;
    min-width: 18px;
    min-height: 16px;
}

#calendar-day-today {
    font-size: 12px;
    font-weight: 700;
    color: #191919;
    background-color: #6AABBB;
    border-radius: 50%;
    min-width: 18px;
    min-height: 16px;
    padding: 2px;
}

#calendar-day-empty {
    min-width: 18px;
    min-height: 16px;
}

#calendar-grid {
    margin-top: 2px;
}

















#date-widget label {
    font-family: "SF Pro Rounded";
    margin-top: 10px;
}
#day label,
#month label{
    color: var(--foreground);
    padding: 5px;
    margin-top: 10px;
    font-size: 30px;
    color: alpha(#fff, 0.9);
    font-weight: 600;
}

#date label{
    color: alpha(#fff, 0.9);

    margin-top: -10px;
    font-size: 90px;
    font-weight: 600;
}
#day label{

    color: alpha(#72BBCC, 0.9);
}
#box-widget{
    /* background-color: alpha(#232323, 1); */
    background: linear-gradient(to bottom, #202020, #141414);
    margin: 20px 20px 20px 20px;
    min-width: 170px;
    min-height: 170px;
    border-radius: 16px;
}
#info-box-widget{
    /* background-color: alpha(#232323, 1); */
    background: linear-gradient(to bottom, #202020, #000000);
    margin: 20px 10px 20px 10px;
    min-width: 170px;
    min-height: 170px;
    border-radius: 16px;
}
#ram-progress{
    font-family: "SF Pro Rounded";
    margin-left: 12px;
    color: var(--foreground);
    /* background-color: alpha(#72BBCC, 0.9); */
}
#progress-label{
    /* background-color: alpha(#FFF, 0.9); */

    font-family: "SF Pro Rounded";
    font-weight:600;
    font-size: 13px;
}
#progress{
    font-family: "SF Pro Rounded";
    border: solid 8px #0984FF;

        /* border-radius: 100px; */
    color: alpha(#AAAAAA, 0.7);
}
#info {


    font-family: "SF Pro Rounded";
    margin-left: -13px;
    margin-top: 5px;
    font-size:14px;
    font-weight:600;
    /* margin-bottom:-10px; */
    /* margin-top:-35px; */
}
#component-name{

    font-size: 10px;
}