refactor: rooms => zones

This commit is contained in:
Andy Burke 2025-09-09 15:32:07 -07:00
parent 525568d368
commit 20a5d1bc88
27 changed files with 2466 additions and 2044 deletions

View file

@ -6,7 +6,7 @@
--border-subtle: #555;
--border-normal: #888;
--border-highlight: #bbb;
--icon-scale: 1.25;
--icon-scale: 1;
--border-radius: 4px;
}
@ -200,7 +200,7 @@ button.primary {
}
body[data-perms*="users.write"] [data-requires-permission="users.write"],
body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
body[data-perms*="zones.create"] [data-requires-permission="zones.create"] {
visibility: visible;
opacity: 1;
height: unset;
@ -548,12 +548,41 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
top: 4px;
}
/* ICON - CONTROLLER */
.icon.controller {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 8px;
height: 8px;
border: 2px solid;
border-radius: 100px;
}
.icon.controller::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 14px;
height: 14px;
box-shadow:
-6px -6px 0 -4px,
6px 6px 0 -4px,
6px -6px 0 -4px,
-6px 6px 0 -4px;
left: -5px;
top: -5px;
transform: rotate(45deg);
}
/* ICON - DOWNLOAD */
.icon.download {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs, 1));
transform: scale(var(--icon-scale, 1));
width: 16px;
height: 6px;
border: 2px solid;
@ -735,6 +764,62 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
5px 0 0;
}
/* ICON - MOREBORDERLESS */
.icon.more-borderless {
transform: scale(var(--icon-scale, 1));
}
.icon.more-borderless,
.icon.more-borderless::after,
.icon.more-borderless::before {
box-sizing: border-box;
position: relative;
display: block;
width: 4px;
height: 4px;
background: currentColor;
border-radius: 100%;
}
.icon.more-borderless::after,
.icon.more-borderless::before {
content: "";
position: absolute;
top: 0;
}
.icon.more-borderless::after {
left: -6px;
}
.icon.more-borderless::before {
right: -6px;
}
/* ICON - MORECIRCLE */
.icon.more-circle {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 24px;
height: 24px;
border: 2px solid;
border-radius: 24px;
}
.icon.more-circle::before {
content: "";
position: absolute;
box-sizing: border-box;
display: block;
width: 4px;
height: 4px;
background-color: currentColor;
border-radius: 20px;
top: 8px;
left: 8px;
box-shadow:
-5px 0 0,
5px 0 0;
}
/* ICON - PLUS */
.icon.plus,
.icon.plus::after,
@ -1062,7 +1147,7 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs, 1));
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
border: 2px solid;
@ -1095,7 +1180,7 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs, 1));
transform: scale(var(--icon-scale, 1));
border: 2px solid;
border-radius: 4px;
width: 22px;
@ -1124,7 +1209,7 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs, 1));
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
border: 2px solid;
@ -1148,7 +1233,7 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs, 1));
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
border: 2px solid;
@ -1171,7 +1256,7 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs, 1));
transform: scale(var(--icon-scale, 1));
border: 2px solid;
border-radius: 4px;
width: 22px;
@ -1200,7 +1285,7 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs, 1));
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
border: 2px solid;