diff --git a/assets/components/networks/network.vue b/assets/components/networks/network.vue
index 09c943dd..27d0b503 100644
--- a/assets/components/networks/network.vue
+++ b/assets/components/networks/network.vue
@@ -12,6 +12,7 @@
+
+
+
+
-
-
@@ -170,10 +184,20 @@ export default {
flex-shrink: 0;
color: $text-contrast;
overflow: hidden;
-}
-.sidebar .title {
- border-bottom: solid 1px $highlight-hint;
+ .title {
+ display: flex;
+ justify-content: center;
+ border-bottom: solid 1px $highlight-hint;
+ }
+
+ &.expanded {
+ width: calc(100% - 25rem);
+
+ .logo {
+ max-width: 18rem;
+ }
+ }
}
.logo {
@@ -189,9 +213,9 @@ export default {
.header {
width: 100%;
- height: 3rem;
display: flex;
- justify-content: center;
+ flex-direction: column;
+ align-items: center;
flex-shrink: 0;
border-bottom: solid 1px $shadow-hint;
background: $profile;
@@ -202,7 +226,7 @@ export default {
.logo {
max-width: 20rem;
- height: 100%;
+ max-height: 3rem;
padding: .5rem;
}
}
@@ -217,28 +241,23 @@ export default {
cursor: pointer;
.icon {
+ fill: $shadow;
margin: 0 .5rem;
}
+
+ &:hover .icon {
+ fill: $shadow-strong;
+ }
}
-.expand-sites {
- color: $shadow;
+.expand-sidebar {
+}
+
+.expand-header {
display: none;
-
- .icon {
- fill: $shadow;
- }
-
- &:hover {
- color: $shadow-strong;
-
- .icon {
- fill: $shadow-strong;
- }
- }
}
-.collapse-sites {
+.collapse-header {
background: $profile;
color: $highlight;
@@ -275,10 +294,15 @@ export default {
}
}
- .expand-sites {
+ .expand-header {
display: flex;
}
+ .expand-sidebar,
+ .collapse-sidebar {
+ display: none;
+ }
+
.network {
flex-direction: column;
}
diff --git a/assets/components/releases/release.vue b/assets/components/releases/release.vue
index f550fb37..b3cea235 100644
--- a/assets/components/releases/release.vue
+++ b/assets/components/releases/release.vue
@@ -255,10 +255,11 @@ export default {
box-sizing: border-box;
}
-.info.column {
+.info {
padding: 1rem;
border-left: solid 1px $shadow-hint;
border-right: solid 1px $shadow-hint;
+ flex-grow: 1;
}
.row {
diff --git a/public/css/style.css b/public/css/style.css
index 87d4fbb2..cfa6fb09 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -392,10 +392,12 @@
margin: 0 auto;
box-sizing: border-box;
}
-.info.column[data-v-d4b03dc2] {
+.info[data-v-d4b03dc2] {
padding: 1rem;
border-left: solid 1px rgba(0, 0, 0, 0.1);
border-right: solid 1px rgba(0, 0, 0, 0.1);
+ -webkit-box-flex: 1;
+ flex-grow: 1;
}
.row[data-v-d4b03dc2] {
display: -webkit-box;
@@ -722,7 +724,17 @@
overflow: hidden;
}
.sidebar .title[data-v-e2e12602] {
- border-bottom: solid 1px rgba(255, 255, 255, 0.075);
+ display: -webkit-box;
+ display: flex;
+ -webkit-box-pack: center;
+ justify-content: center;
+ border-bottom: solid 1px rgba(255, 255, 255, 0.075);
+}
+.sidebar.expanded[data-v-e2e12602] {
+ width: calc(100% - 25rem);
+}
+.sidebar.expanded .logo[data-v-e2e12602] {
+ max-width: 18rem;
}
.logo[data-v-e2e12602] {
width: 100%;
@@ -740,11 +752,13 @@
}
.header[data-v-e2e12602] {
width: 100%;
- height: 3rem;
display: -webkit-box;
display: flex;
- -webkit-box-pack: center;
- justify-content: center;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ flex-direction: column;
+ -webkit-box-align: center;
+ align-items: center;
flex-shrink: 0;
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
background: #222;
@@ -754,7 +768,7 @@
}
.header .logo[data-v-e2e12602] {
max-width: 20rem;
- height: 100%;
+ max-height: 3rem;
padding: .5rem;
}
.expand[data-v-e2e12602] {
@@ -770,32 +784,26 @@
cursor: pointer;
}
.expand .icon[data-v-e2e12602] {
+ fill: rgba(0, 0, 0, 0.5);
margin: 0 .5rem;
}
-.expand-sites[data-v-e2e12602] {
- color: rgba(0, 0, 0, 0.5);
+.expand:hover .icon[data-v-e2e12602] {
+ fill: rgba(0, 0, 0, 0.7);
+}
+.expand-header[data-v-e2e12602] {
display: none;
}
-.expand-sites .icon[data-v-e2e12602] {
- fill: rgba(0, 0, 0, 0.5);
-}
-.expand-sites[data-v-e2e12602]:hover {
- color: rgba(0, 0, 0, 0.7);
-}
-.expand-sites:hover .icon[data-v-e2e12602] {
- fill: rgba(0, 0, 0, 0.7);
-}
-.collapse-sites[data-v-e2e12602] {
+.collapse-header[data-v-e2e12602] {
background: #222;
color: rgba(255, 255, 255, 0.5);
}
-.collapse-sites .icon[data-v-e2e12602] {
+.collapse-header .icon[data-v-e2e12602] {
fill: rgba(255, 255, 255, 0.5);
}
-.collapse-sites[data-v-e2e12602]:hover {
+.collapse-header[data-v-e2e12602]:hover {
color: #fff;
}
-.collapse-sites:hover .icon[data-v-e2e12602] {
+.collapse-header:hover .icon[data-v-e2e12602] {
fill: #fff;
}
.sites.compact[data-v-e2e12602] {
@@ -816,10 +824,14 @@
.sites.compact.expanded[data-v-e2e12602] {
display: grid;
}
-.expand-sites[data-v-e2e12602] {
+.expand-header[data-v-e2e12602] {
display: -webkit-box;
display: flex;
}
+.expand-sidebar[data-v-e2e12602],
+ .collapse-sidebar[data-v-e2e12602] {
+ display: none;
+}
.network[data-v-e2e12602] {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;