194 lines
3.2 KiB
CSS
194 lines
3.2 KiB
CSS
#dashboard-box {
|
|
transition: margin 0.25s cubic-bezier(0.5, 0.25, 0, 1);
|
|
background-color: var(--shadow);
|
|
border-radius: 25px;
|
|
padding: 6px;
|
|
margin-bottom: 65px;
|
|
}
|
|
|
|
#inner {
|
|
margin: 3px;
|
|
}
|
|
|
|
.tile {
|
|
margin: 0 6px;
|
|
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: var(--shadow);
|
|
transition: all;
|
|
}
|
|
.tile.off .desc-label,
|
|
.tile.off .tile-label,
|
|
.tile.off .tile-icon {
|
|
color: var(--foreground);
|
|
transition: all;
|
|
}
|
|
|
|
.tile-icon {
|
|
font-size: 18px;
|
|
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-menu {
|
|
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);
|
|
}
|
|
}
|