diff --git a/README.md b/README.md
index 6a841c5e5..595b9ef5f 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,7 @@
[](https://twitter.com/intent/tweet?text=Swell-%20For%20all%20your%20streaming%20API%20testing%20needs&url=https://www.getswell.io&hashtags=SSE,WebSocket,HTTP,API,developers)
+[](https://github.com/getswell/getswell/issues)
@@ -11,15 +12,15 @@ Swell is a Streaming API development tool that enables developers to test API en
## Getting Started
-Visit www.getswell.io for a download link.
+Visit www.getswell.io to download the latest release.
Swell is currently only supported on OS X with future support planned for Linux and Windows.
### Features
Swell is a one-stop shop for sending and monitoring your API requests
-
+
* Send and monitor up to six concurrent connections
* Interactive chart delivers request/response timing information in an easy to digest form
@@ -27,17 +28,17 @@ Swell is a one-stop shop for sending and monitoring your API requests
### Supported Technologies
* *HTTP2*: Swell supports full HTTP2 multiplexing of requests and responses. HTTP requests to the same host will be sent over the same connection. Swell will attempt to initiate an HTTP2 connection for all HTTPS requests by default, but will revert to HTTP1.1 for legacy servers.
-
+
* *Server-Sent Events (SSE)*: Swell displays SSE events one by one as they come in.
-
+
* *WebSocket (WS)*: Swell enables connecting directly to WebSocket servers with an HTTP handshake. Developers can directly send messages to the connected WS server. Messages are displayed in chatbox format, clearly indicating outgoing and incoming messages.
-
+
## Built With
diff --git a/badges/index.svg b/badges/index.svg
deleted file mode 100644
index 3e64ff4a8..000000000
--- a/badges/index.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/assets/style/chart.scss b/src/assets/style/chart.scss
index 424625aea..66d18f867 100644
--- a/src/assets/style/chart.scss
+++ b/src/assets/style/chart.scss
@@ -1,38 +1,42 @@
-.warningcontainer {
- height: 150px;
- padding: 17px;
- width: 100%;
+.warningContainer {
+ width : 100%;
+ height : 150px;
+ padding : 17px;
}
+
.warning {
- align-items: center;
- border: 8px solid #999999;
- border-radius: 4px;
- color: #999999;
- display: flex;
- font-weight: 600;
- height: 100%;
- justify-content: center;
- padding: 20px;
- text-align: center;
- width: 100%;
+ width : 100%;
+ height : 100%;
+ padding : 20px;
+ border : 8px solid #999999;
+ border-radius : 4px;
+ color : #999999;
+ font-weight: 600;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
}
+
+
.chart {
- height: 150px;
- padding: 5px 10px;
- width: 100%;
+ padding : 5px 10px;
+ width : 100%;
+ height : 150px;
}
-.charttime {
- -webkit-appearance: none;
- align-items: center;
- display: flex;
- display: block;
- font-size: 14px;
- outline: none;
- padding: 8px;
- position: absolute;
- right: 8px;
- top: 8px;
-}
-.charttimeselect {
- margin-left: 10px;
+
+.chartTime {
+ position: absolute;
+ top: 8px;
+ right : 8px;
+ font-size: 14px;
+ display: flex;
+ -webkit-appearance: none;
+ outline: none;
+ align-items: center;
+ display: block;
+ padding: 8px;
}
+.chartTimeSelect {
+ margin-left: 10px;
+}
\ No newline at end of file
diff --git a/src/assets/style/cookieTable.scss b/src/assets/style/cookieTable.scss
index cd320b2e8..450c8974a 100644
--- a/src/assets/style/cookieTable.scss
+++ b/src/assets/style/cookieTable.scss
@@ -1,22 +1,22 @@
-.cookietable {
+.cookieTable {
display: block;
flex: 1;
overflow-y: auto;
}
-.cookietableheaders {
+.cookieTableHeaders {
justify-content: left;
}
-.cookietablerow {
+.cookieTableRow {
background: white;
cursor: text;
padding: 0;
}
-.cookietableheadercell {
+.cookieTableHeaderCell {
font-size: .6rem;
font-weight: bold;
text-align: left;
}
-.cookietablecell {
+.cookieTableCell {
font-size: 0.6rem;
height: auto;
overflow-x: scroll;
diff --git a/src/assets/style/grid.scss b/src/assets/style/grid.scss
index c796af07d..fea78149a 100644
--- a/src/assets/style/grid.scss
+++ b/src/assets/style/grid.scss
@@ -58,9 +58,9 @@
border-right: 1px solid $bordergray;
padding: 0 15px;
position: relative;
- &:first-child {
- max-height: 30px;
- }
+ &:first-child {
+ max-height: 30px;
+ }
&:nth-child(-n+2) {
padding: 0;
}
@@ -74,7 +74,7 @@
&:last-child {
border-right: none;
}
- }
+ }
}
.nested-grid-9 {
background: white;
@@ -89,4 +89,4 @@
padding: 10px 15px;
position: relative;
}
-}
+}
\ No newline at end of file
diff --git a/src/assets/style/reqres.scss b/src/assets/style/reqres.scss
index f00b69656..99d47c2d2 100644
--- a/src/assets/style/reqres.scss
+++ b/src/assets/style/reqres.scss
@@ -1,320 +1,368 @@
-#reqrescontainer {
- background-color: #ecf1f5;
- background-image: url('../img/swell-bg.png');
- background-position: center center;
- background-repeat: no-repeat;
- background-size: 200px 200px;
- border-top: solid 1px #ebeff2;
- bottom: 0;
- height: calc(97vh - 19.67% + 42px);
- margin: 0;
- overflow-x: hidden;
- overflow-y: scroll;
- width: 100%;
-}
-#reqrescontainer_inner {
- height: calc(100vh - 150px);
- overflow-x: hidden;
- overflow-y: auto;
- transition: transform 0.3s ease-in-out;
- white-space: nowrap;
- width: auto;
-}
+#reqResContainer {
+ bottom: 0;
+ width: 100%;
+ margin: 0;
+ height: calc(97vh - 19.67% + 42px);
+ overflow-x: hidden;
+ background-color: #ecf1f5;
+ border-top: solid 1px #ebeff2;
+ background-image: url('../img/swell-bg.png');
+ background-position: center center;
+ background-size: 200px 200px;
+ background-repeat: no-repeat;
+ overflow-y: scroll;
+}
+
+#reqResContainer_inner {
+ width: auto;
+ height: calc(100vh - 150px);
+ overflow-x: hidden;
+ overflow-y: auto;
+ white-space: nowrap;
+ transition: transform 0.3s ease-in-out;
+}
+
.resreq_wrap {
- flex: 0 0 auto;
- margin: 15px;
- min-width: 800px;
- width: calc(100vw - 340px);
+ width: calc(100vw - 340px);
+ margin: 15px;
+ flex: 0 0 auto;
+ min-width: 800px;
}
-.reqrescontainer_inner-page {
- height: 100%;
- width: 100%;
+
+.reqResContainer_inner-page {
+ width: 100%;
+ height: 100%;
}
+
.resreq_select-radio-label {
- font-size: 0.9rem;
- font-weight: bold;
+ font-size: 0.9rem;
+ font-weight: bold;
}
+
.resreq_select-radio {
- height: 15px;
- left: 45%;
- position: relative;
- top: 17%;
- width: 15px;
+ width: 15px;
+ height: 15px;
+ position: relative;
+ left: 45%;
+ top: 17%;
}
+
.response_event {
- background: white;
- display: flex;
- flex-direction: column;
- height: auto;
- overflow: hidden;
- padding: 0;
-}
-.response_sse {
- animation: fadeIn 400ms ease-in;
- background: white;
- display: flex;
- flex-direction: column;
- height: auto;
- overflow: hidden;
-}
-.response_sse:nth-of-type(odd) {
- background: $litegray;
-}
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ background: white;
+ height: auto;
+ overflow: hidden;
+}
+
+.response_sse {
+ display: flex;
+ flex-direction: column;
+ height: auto;
+ overflow: hidden;
+ background: white;
+ animation: fadeIn 400ms ease-in;
+}
+
+.response_sse:nth-of-type(odd){
+ background:$litegray;
+}
+
.data-inner {
- height: 0;
- transition: height 0.15s ease-out;
+ height: 0;
+ transition: height 0.15s ease-out;
}
+
.expand-btn {
- cursor: pointer;
- display: block;
- padding: 3px;
- &:before {
- content: "+";
- display: -webkit-box;
- font-size: 1.5em;
- height: 14px;
- height: 12px;
- line-height: 0.5em;
- margin: 5px auto;
- margin-top: 5px;
- transition: transform 0.3s ease-in-out;
- width: 11px;
- }
-}
+ padding:3px;
+ display:block;
+ cursor: pointer;
+ &:before {
+ content: "+";
+ font-size: 1.5em;
+ line-height: 0.5em;
+ transition: transform 0.3s ease-in-out;
+ height: 14px;
+ margin-top: 5px;
+ margin: 5px auto;
+ width: 11px;
+ height: 12px;
+ display: -webkit-box;
+ }
+}
+
.expand-btn.expand-active {
- &:before {
- transform: rotate(-225deg);
- }
+ &:before {
+ transform:rotate(-225deg);
+ }
}
+
.expanded {
- border-bottom: solid 1px $bordergray;
- height: auto!important;
- overflow-x: scroll;
-}
-@keyframes slideinright {
- from {
- transform: translate3d(100%, 0, 0);
- visibility: visible;
- }
- to {
- transform: translate3d(0, 0, 0);
- }
-}
+ height: auto!important;
+ overflow-x: scroll;
+ border-bottom: solid 1px $bordergray;
+}
+
+@keyframes slideInRight {
+ from {
+ transform: translate3d(100%, 0, 0);
+ visibility: visible;
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
.btn-sm {
- .btn {
- font-size: .7rem;
- font-weight: bold;
- height: 30px;
- line-height: 1;
- margin: 0;
- width: 100%;
- &:hover {
- background: $teal;
- border: none;
- color: $litegray;
- }
- }
-}
-.resreq_remove {
- background-color: $remove!important;
- color: $litegray!important;
- &:hover {
- background-color: #B93F3E!important;
- }
-}
-.slideinright {
- animation-name: slideInRight;
-}
-@keyframes fadein {
- 0% {
- opacity: 0;
- transform: scale(.8);
- }
- 100% {
- opacity: 1;
- transform: scale(1);
- }
-}
+ .btn {
+ margin: 0;
+ width: 100%;
+ height: 30px;
+ font-size: .7rem;
+ font-weight: bold;
+ line-height: 1;
+ &:hover {
+ background: $teal;
+ color: $litegray;
+ border: none;
+ }
+ }
+}
+
+.resreq_remove{
+ background-color: $remove!important;
+ color: $litegray!important;
+ &:hover {
+ background-color:#B93F3E!important;
+ }
+}
+
+.slideInRight {
+ animation-name: slideInRight;
+}
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ transform: scale(.8);
+
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+
+ }
+}
+
.resreq_res-container {
- border-bottom: solid 1px $bordergray;
- border-left: solid 1px $bordergray;
- border-right: solid 1px $bordergray;
- display: flex;
- flex-direction: column;
- flex-direction: column-reverse;
- height: auto;
- margin: 0;
- max-height: 60vh;
- overflow: scroll;
- position: relative;
-}
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ max-height: 60vh;
+ height: auto;
+ overflow: scroll;
+ flex-direction: column-reverse;
+ position: relative;
+ border-bottom: solid 1px $bordergray;
+ border-left: solid 1px $bordergray;
+ border-right: solid 1px $bordergray;
+}
+
.headers {
- border-top: solid 1px $bordergray;
+ border-top: solid 1px $bordergray;
}
+
.res_header {
- border-left: 1px solid $bordergray;
- border-right: 1px solid $bordergray;
- width: 100%;
+ width: 100%;
+ border-left: 1px solid $bordergray;
+ border-right: 1px solid $bordergray;
}
+
.resreq_title {
- font-size: 1.1rem;
- font-weight: bold;
-}
-.reqrescontainer-inner {
- height: auto;
- position: relative;
-}
-.httptwo {
- background-color: white;
- border-left: 1px solid #ebeff2;
- border-right: 1px solid #ebeff2;
- border-top: 1px solid #ebeff2;
- color: #15B78F;
- display: none;
- font-size: .7rem;
- font-weight: 800;
- height: auto;
- overflow: scroll;
- padding: 10px 15px;
- width: 100%;
- word-wrap: break-word;
-}
+ font-size: 1.1rem;
+ font-weight: bold;
+}
+
+.reqResContainer-inner {
+ position: relative;
+ height: auto;
+}
+
+.httptwo {
+ padding: 10px 15px;
+ background-color: white;
+ color: #15B78F;
+ font-weight: 800;
+ border-top: 1px solid #ebeff2;
+ border-left: 1px solid #ebeff2;
+ border-right: 1px solid #ebeff2;
+ display: none;
+ height: auto;
+ font-size: .7rem;
+ word-wrap: break-word;
+ width: 100%;
+ overflow: scroll;
+}
+
.networkerror {
- background-color: white;
- border-left: 1px solid $bordergray;
- border-right: 1px solid $bordergray;
- border-top: 1px solid $bordergray;
- color: red;
- display: none;
- font-size: .8rem;
- font-weight: 800;
- height: auto;
- padding: 10px 15px;
-}
+ padding: 10px 15px;
+ background-color: white;
+ color: red;
+ font-weight: 800;
+ border-top: 1px solid $bordergray;
+ border-left: 1px solid $bordergray;
+ border-right: 1px solid $bordergray;
+ display: none;
+ height: auto;
+ font-size: .8rem;
+}
+
// status-loader:
:root {
- --status-indicator-animation-duration: 2s;
- --status-indicator-color: rgb(216, 226, 233);
- --status-indicator-color-active: rgb(0, 149, 255);
- --status-indicator-color-active-semi: rgba(0, 149, 255, 0.5);
- --status-indicator-color-active-transparent: rgba(0, 149, 255, 0);
- --status-indicator-color-intermediary: rgb(255, 170, 0);
- --status-indicator-color-intermediary-semi: rgba(255, 170, 0, 0.5);
- --status-indicator-color-intermediary-transparent: rgba(255, 170, 0, 0);
- --status-indicator-color-negative: rgb(255, 77, 77);
- --status-indicator-color-negative-semi: rgba(255, 77, 77, 0.5);
- --status-indicator-color-negative-transparent: rgba(255, 77, 77, 0);
- --status-indicator-color-positive: rgb(75, 210, 143);
- --status-indicator-color-positive-semi: rgba(75, 210, 143, 0.5);
- --status-indicator-color-positive-transparent: rgba(75, 210, 143, 0);
- --status-indicator-color-semi: rgba(216, 226, 233, 0.5);
- --status-indicator-color-transparent: rgba(216, 226, 233, 0);
- --status-indicator-size: 10px;
-}
+ --status-indicator-size: 10px;
+ --status-indicator-animation-duration: 2s;
+
+ --status-indicator-color: rgb(216, 226, 233);
+ --status-indicator-color-semi: rgba(216, 226, 233, 0.5);
+ --status-indicator-color-transparent: rgba(216, 226, 233, 0);
+
+ --status-indicator-color-active: rgb(0, 149, 255);
+ --status-indicator-color-active-semi: rgba(0, 149, 255, 0.5);
+ --status-indicator-color-active-transparent: rgba(0, 149, 255, 0);
+
+ --status-indicator-color-positive: rgb(75, 210, 143);
+ --status-indicator-color-positive-semi: rgba(75, 210, 143, 0.5);
+ --status-indicator-color-positive-transparent: rgba(75, 210, 143, 0);
+
+ --status-indicator-color-intermediary: rgb(255, 170, 0);
+ --status-indicator-color-intermediary-semi: rgba(255, 170, 0, 0.5);
+ --status-indicator-color-intermediary-transparent: rgba(255, 170, 0, 0);
+
+ --status-indicator-color-negative: rgb(255, 77, 77);
+ --status-indicator-color-negative-semi: rgba(255, 77, 77, 0.5);
+ --status-indicator-color-negative-transparent: rgba(255, 77, 77, 0);
+}
+
@keyframes status-indicator-pulse {
- 0% {
- box-shadow: 0 0 0 0 var(--status-indicator-color-semi);
- }
- 70% {
- box-shadow: 0 0 0 var(--status-indicator-size)
+ 0% {
+ box-shadow: 0 0 0 0 var(--status-indicator-color-semi);
+ }
+ 70% {
+ box-shadow: 0 0 0 var(--status-indicator-size)
var(--status-indicator-color-transparent);
- }
- 100% {
- box-shadow: 0 0 0 0 var(--status-indicator-color-transparent);
- }
+ }
+ 100% {
+ box-shadow: 0 0 0 0 var(--status-indicator-color-transparent);
+ }
}
+
@keyframes status-indicator-pulse-active {
- 0% {
- box-shadow: 0 0 0 0 var(--status-indicator-color-active-semi);
- }
- 70% {
- box-shadow: 0 0 0 var(--status-indicator-size)
+ 0% {
+ box-shadow: 0 0 0 0 var(--status-indicator-color-active-semi);
+ }
+ 70% {
+ box-shadow: 0 0 0 var(--status-indicator-size)
var(--status-indicator-color-active-transparent);
- }
- 100% {
- box-shadow: 0 0 0 0 var(--status-indicator-color-active-transparent);
- }
+ }
+ 100% {
+ box-shadow: 0 0 0 0 var(--status-indicator-color-active-transparent);
+ }
}
+
@keyframes status-indicator-pulse-positive {
- 0% {
- box-shadow: 0 0 0 0 var(--status-indicator-color-positive-semi);
- }
- 70% {
- box-shadow: 0 0 0 var(--status-indicator-size)
+ 0% {
+ box-shadow: 0 0 0 0 var(--status-indicator-color-positive-semi);
+ }
+ 70% {
+ box-shadow: 0 0 0 var(--status-indicator-size)
var(--status-indicator-color-positive-transparent);
- }
- 100% {
- box-shadow: 0 0 0 0 var(--status-indicator-color-positive-transparent);
- }
+ }
+ 100% {
+ box-shadow: 0 0 0 0 var(--status-indicator-color-positive-transparent);
+ }
}
+
@keyframes status-indicator-pulse-intermediary {
- 0% {
- box-shadow: 0 0 0 0 var(--status-indicator-color-intermediary-semi);
- }
- 70% {
- box-shadow: 0 0 0 var(--status-indicator-size)
+ 0% {
+ box-shadow: 0 0 0 0 var(--status-indicator-color-intermediary-semi);
+ }
+ 70% {
+ box-shadow: 0 0 0 var(--status-indicator-size)
var(--status-indicator-color-intermediary-transparent);
- }
- 100% {
- box-shadow: 0 0 0 0 var(--status-indicator-color-intermediary-transparent);
- }
+ }
+ 100% {
+ box-shadow: 0 0 0 0 var(--status-indicator-color-intermediary-transparent);
+ }
}
+
@keyframes status-indicator-pulse-negative {
- 0% {
- box-shadow: 0 0 0 0 var(--status-indicator-color-negative-semi);
- }
- 70% {
- box-shadow: 0 0 0 var(--status-indicator-size)
+ 0% {
+ box-shadow: 0 0 0 0 var(--status-indicator-color-negative-semi);
+ }
+ 70% {
+ box-shadow: 0 0 0 var(--status-indicator-size)
var(--status-indicator-color-negative-transparent);
- }
- 100% {
- box-shadow: 0 0 0 0 var(--status-indicator-color-negative-transparent);
- }
+ }
+ 100% {
+ box-shadow: 0 0 0 0 var(--status-indicator-color-negative-transparent);
+ }
}
+
status-indicator {
- background-color: var(--status-indicator-color);
- border-radius: 50%;
- cursor: pointer;
- display: inline-block;
- height: var(--status-indicator-size);
- left: 50%;
- position: absolute;
- top: 50%;
- transform: translate(-50%, -50%);
- width: var(--status-indicator-size);
-}
+ display: inline-block;
+ border-radius: 50%;
+ cursor: pointer;
+ width: var(--status-indicator-size);
+ height: var(--status-indicator-size);
+ background-color: var(--status-indicator-color);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
status-indicator[pulse] {
- animation-delay: 0;
- animation-direction: normal;
- animation-duration: var(--status-indicator-animation-duration);
- animation-fill-mode: none;
- animation-iteration-count: infinite;
- animation-name: status-indicator-pulse;
- animation-timing-function: ease-in-out;
-}
+ animation-name: status-indicator-pulse;
+ animation-duration: var(--status-indicator-animation-duration);
+ animation-timing-function: ease-in-out;
+ animation-iteration-count: infinite;
+ animation-direction: normal;
+ animation-delay: 0;
+ animation-fill-mode: none;
+}
+
status-indicator[active] {
- background-color: var(--status-indicator-color-active);
+ background-color: var(--status-indicator-color-active);
}
+
status-indicator[active][pulse] {
- animation-name: status-indicator-pulse-active;
+ animation-name: status-indicator-pulse-active;
}
+
status-indicator[positive] {
- animation-name: status-indicator-pulse-positive;
- background-color: var(--status-indicator-color-positive);
+ background-color: var(--status-indicator-color-positive);
+ animation-name: status-indicator-pulse-positive;
}
+
status-indicator[positive][pulse] {
- animation-name: status-indicator-pulse-positive;
+ animation-name: status-indicator-pulse-positive;
}
+
status-indicator[intermediary] {
- background-color: var(--status-indicator-color-intermediary);
+ background-color: var(--status-indicator-color-intermediary);
}
+
status-indicator[intermediary][pulse] {
- animation-name: status-indicator-pulse-intermediary;
+ animation-name: status-indicator-pulse-intermediary;
}
+
status-indicator[negative] {
- animation-name: status-indicator-pulse-negative;
- background-color: var(--status-indicator-color-negative);
+ background-color: var(--status-indicator-color-negative);
+ animation-name: status-indicator-pulse-negative;
}
+
status-indicator[negative][pulse] {
- animation-name: status-indicator-pulse-negative;
-}
+ animation-name: status-indicator-pulse-negative;
+}
\ No newline at end of file
diff --git a/src/assets/style/sidebar.scss b/src/assets/style/sidebar.scss
index 64ea5ced4..87eda3e3a 100644
--- a/src/assets/style/sidebar.scss
+++ b/src/assets/style/sidebar.scss
@@ -31,7 +31,7 @@
font-size: 1.1rem;
font-weight: bold;
}
-.modalcontents {
+.modalContents {
border-bottom: 1px solid #ddd;
box-sizing: border-box;
font-size: 1.2rem;
@@ -76,7 +76,6 @@
border: 2px solid $bluetwo;
line-height: 28px;
}
- /* padding: 5px; */
}
.modal_protocol_button-selected {
background: rgb(0,137,208);
@@ -120,7 +119,6 @@
width: 100%;
}
.modal_subtitle {
- // margin-top: 4px;
cursor: pointer;
display: flex;
font-size: 14px;
@@ -138,9 +136,6 @@
margin: -3px -6px -8px -7px;
}
.modal_headers_container-open {
- // background: #343333;
- // border: 1px solid $yellowgrey;
- // padding-top: 3px;
border-radius: 5px;
display: flex;
flex-direction: column;
@@ -152,8 +147,6 @@
overflow: hidden;
}
.modal_header {
- // background: red;
- // margin: 0px;
border: 2px solid $yellowgrey;
border-radius: 5px;
margin-bottom: 4px;
@@ -161,7 +154,6 @@
}
.modal_header_checkbox {
-webkit-appearance: none;
- // transition: all .3s linear;
appearance: none;
background: #343333;
border-radius: 1px;
@@ -264,25 +256,18 @@
margin-bottom: 5px;
margin-top: 0px;
}
-.historydate-container {
- // -ms-overflow-style: none;
- // overflow: -moz-scrollbars-none;
+.historyDate-container {
margin-top: 15px;
overflow: scroll;
}
-.historydate-container::-webkit-scrollbar {
- // overflow: none;
- // width: 0 !important;
+.historyDate-container::-webkit-scrollbar {
}
-.historydate h1 {
+.historyDate h1 {
font-weight: 700;
margin-bottom: 5px;
margin-top: 15px;
}
.history-container {
- // align-items: center;
- // display: flex;
- // justify-content: space-between;
border: 1px solid #282828;
border-radius: 5px;
color: white;
@@ -303,7 +288,6 @@
}
}
.history-text-container {
- // overflow: hidden;
align-items: center;
display: flex;
flex-shrink: 100;
diff --git a/src/assets/style/websocket.scss b/src/assets/style/websocket.scss
index c69c208ff..b3d17d1f0 100644
--- a/src/assets/style/websocket.scss
+++ b/src/assets/style/websocket.scss
@@ -1,109 +1,93 @@
.websocket_container {
- background-color: white;
- // border: 3px solid rgb(200, 200, 200);
- border: 1px solid #ebeff2;
- border-radius: 0px 0px 5px 5px;
- padding: 5px;
- display: flex;
- flex-direction: column;
-
+ background-color: white;
+ border: 1px solid #ebeff2;
+ border-radius: 0px 0px 5px 5px;
+ display: flex;
+ flex-direction: column;
+ padding: 5px;
}
-
.websocket_input {
- // display: flex;
- // align-content: center;
- // align-items: center;
- width: 100%;
+ width: 100%;
}
.websocket_input-text {
- -webkit-appearance: none;
- height: 25px;
- border: 1px solid #ebeff2;
- border-radius: 12px;
- padding: 0px 105px 0px 8px;
- text-overflow: ellipsis;
- font-size: 14px;
- background-color: rgb(247, 247, 247);
-
- // width: calc(100%-100px);
- width: 100%;
- float: left;
- &:focus {
- outline: 0 none;
- }
+ -webkit-appearance: none;
+ background-color: rgb(247, 247, 247);
+ border: 1px solid #ebeff2;
+ border-radius: 12px;
+ float: left;
+ font-size: 14px;
+ height: 25px;
+ padding: 0px 105px 0px 8px;
+ text-overflow: ellipsis;
+ width: 100%;
+ &:focus {
+ outline: 0 none;
+ }
}
.websocket_input-btn {
- -webkit-appearance: none;
- width: 100px;
- float: right;
- margin-top: -25px;
- margin-right:0px;
- height: 25px;
- border-radius: 12px;
- border: 1px solid #ebeff2;
- color : white;
- background-color: #46494c;
- cursor: pointer;
- outline: 0 none;
- &:hover {
- background-color: #0089D0;
- }
- &:active {
- outline: 0 none;
- }
+ -webkit-appearance: none;
+ background-color: #46494c;
+ border: 1px solid #ebeff2;
+ border-radius: 12px;
+ color: white;
+ cursor: pointer;
+ float: right;
+ height: 25px;
+ margin-right: 0px;
+ margin-top: -25px;
+ outline: 0 none;
+ width: 100px;
+ &:hover {
+ background-color: #0089D0;
+ }
+ &:active {
+ outline: 0 none;
+ }
}
-
.websocket_message_container {
- border-top: 1px solid #ebeff2;
- margin-top: 5px;
- display: flex;
- flex-direction: column;
- overflow: scroll;
- max-height: 500px;
- height: auto;
- width: 100%;
- flex-wrap: nowrap;
- // align-items: flex-start;
+ border-top: 1px solid #ebeff2;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ height: auto;
+ margin-top: 5px;
+ max-height: 500px;
+ overflow: scroll;
+ width: 100%;
}
.websocket_message {
- border-radius: 12px;
- border: 1px solid #ebeff2;
- height: 25px;
- margin-top: 3px;
- display: flex;
- // align-content: center;
- align-items: center;
- overflow: hidden;
- width: auto;
- color: white;
- flex-shrink: 0;
+ align-items: center;
+ border: 1px solid #ebeff2;
+ border-radius: 12px;
+ color: white;
+ display: flex;
+ flex-shrink: 0;
+ height: 25px;
+ margin-top: 3px;
+ overflow: hidden;
+ width: auto;
}
.websocket_message-server {
- background-color: #9d9d9d;
- align-self: flex-start;
+ align-self: flex-start;
+ background-color: #9d9d9d;
}
.websocket_message-client {
- background-color: rgb(0,137,208);
- align-self: flex-end;
+ align-self: flex-end;
+ background-color: rgb(0,137,208);
}
-
.websocket_message-data {
- // background-color: red;
- height: 25px;
- font-size: 14px;
- max-width: 300px;
- padding: 0px 8px;
- padding-top: 5px;
- border-right: 1px solid #b6b6b6;
- overflow-wrap: break-word;
- // text-overflow: ellipsis;
- overflow: scroll;
+ border-right: 1px solid #b6b6b6;
+ font-size: 14px;
+ height: 25px;
+ max-width: 300px;
+ overflow: scroll;
+ overflow-wrap: break-word;
+ padding: 0px 8px;
+ padding-top: 5px;
}
-
.websocket_message-time {
- // background-color: orange;
- text-align: center;
- font-size: 14px;
- width: 50px;
- padding: 0px 8px;
-}
\ No newline at end of file
+ font-size: 14px;
+ padding: 0px 8px;
+ text-align: center;
+ width: 50px;
+}