Statistics
diff --git a/packages/app/src/pages/tv/tabs/livestreamControlPanel/index.less b/packages/app/src/pages/tv/tabs/livestreamControlPanel/index.less
index 95fa2dca..6a5bc645 100755
--- a/packages/app/src/pages/tv/tabs/livestreamControlPanel/index.less
+++ b/packages/app/src/pages/tv/tabs/livestreamControlPanel/index.less
@@ -2,11 +2,59 @@
display: flex;
flex-direction: column;
- width: 100%;
-
transition: all 0.3s ease-in-out;
+ // width: 100%;
+ // max-width: 100%;
+
+ overflow: hidden;
+
+ gap: 20px;
+
+ .inline_field {
+ background-color: var(--background-color-accent);
+
+ font-size: 1rem;
+
+ width: 100%;
+
+ font-family: "DM Mono", monospace;
+
+ overflow: hidden;
+
+ span {
+ user-select: all;
+
+ width: 100%;
+
+ word-wrap: break-all;
+ }
+ }
+
+ .streamingControlPanel_header_thumbnail {
+ align-self: center;
+ justify-self: center;
+
+ border-radius: 12px;
+
+ width: 100%;
+ height: 300px;
+
+ background-color: black;
+
+ img {
+ height: 100%;
+ width: 100%;
+
+ object-fit: contain;
+
+ border-radius: 12px;
+ }
+ }
+
.streamingControlPanel_header {
+ position: relative;
+
display: flex;
flex-direction: row;
@@ -17,37 +65,17 @@
border: 1px solid var(--border-color);
border-radius: 12px;
- margin-bottom: 20px;
+ gap: 20px;
transition: all 0.3s ease-in-out;
- .streamingControlPanel_header_thumbnail {
- align-self: center;
- justify-self: center;
-
- border-radius: 12px;
-
- height: 100%;
- width: 100%;
-
- img {
- height: 15vh;
- width: 20vw;
-
- object-fit: cover;
-
- border-radius: 12px;
- }
-
- margin-right: 40px;
- }
-
.streamingControlPanel_header_details {
display: inline-flex;
flex-direction: column;
+ width: fit-content;
+
padding: 20px 0;
- width: 100%;
.streamingControlPanel_header_details_status {
margin-bottom: 20px;
@@ -58,7 +86,9 @@
.streamingControlPanel_header_actions {
display: flex;
- flex-direction: row;
+ flex-direction: column;
+
+ max-width: 200px;
justify-items: center;
@@ -66,36 +96,24 @@
.ant-select {
height: fit-content;
- min-width: 300px;
+ width: 100%;
}
}
}
- .config {
+ .streaming_configs {
display: flex;
flex-direction: column;
- padding: 0 40px;
+ width: 100%;
transition: all 0.3s ease-in-out;
gap: 20px;
- code {
- padding: 5px 8px;
- font-size: 1rem;
+ overflow: hidden;
- background-color: var(--background-color-accent);
- color: var(--text-color);
-
- border-radius: 8px;
-
- font-family: "DM Mono", monospace;
-
- user-select: all;
- }
-
- .panel {
+ .streaming_configs_panel {
display: flex;
flex-direction: column;
@@ -108,6 +126,13 @@
}
.content {
+ display: flex;
+ flex-direction: column;
+
+ padding: 10px 20px;
+
+ width: 100%;
+
.title {
display: inline-flex;
flex-direction: row;
@@ -116,13 +141,6 @@
width: 100%;
}
-
- display: flex;
- flex-direction: column;
-
- margin: 10px 20px;
-
- width: 100%;
}
}
}