testio-tailwind 0.1.0 → 0.2.0

package/src/static/app.compiled.css

@@ -10828,12 +10828,13 @@ ul.bullet-list li::before {
 }
 
 .section-collapsable .section-title {
-  padding-left: 15px;
-  --tw-text-opacity: 1;
-  color: rgba(35, 106, 132, var(--tw-text-opacity));
+  cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  padding-left: 15px;
+  --tw-text-opacity: 1;
+  color: rgba(35, 106, 132, var(--tw-text-opacity));
 }
 
 .section-collapsable .section-title::before {
@@ -11028,6 +11029,9 @@ details.dropdown-actions[open].dropright .dropdown-menu, details.dropdown-action
 .listitem, details.listitem .listitem-header{
   position: relative;
   display: grid;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   grid-template-columns: auto 1fr auto;
   grid-template-rows: auto auto;
   align-items: stretch;
@@ -11050,6 +11054,10 @@ details.listitem .listitem-header{
   }
 }
 
+details.listitem .listitem-header {
+  cursor: pointer;
+}
+
 .listitem {
   border-radius: 5px;
   border-width: 1px;
@@ -11702,11 +11710,30 @@ a.listitem:hover {
   flex: 1 1 0%;
   align-items: center;
   justify-content: center;
+  border-radius: 0px
+}
+
+.device-wrapper .device-actions a:first-child{
+  border-top-right-radius: 5px;
+}
+
+.device-wrapper .device-actions a:last-child{
+  border-bottom-right-radius: 5px;
+}
+
+.device-wrapper .device-actions a{
   border-top-width: 1px;
+}
+
+.device-wrapper .device-actions a:first-child{
+  border-top-width: 0px;
+}
+
+.device-wrapper .device-actions a{
   --tw-border-opacity: 1;
   border-color: rgba(255, 255, 255, var(--tw-border-opacity));
   --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity))
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
 .device-wrapper .device-actions a:hover {
@@ -11714,17 +11741,6 @@ a.listitem:hover {
   background-color: rgba(33, 190, 244, var(--tw-bg-opacity));
 }
 
-.device-wrapper .device-actions a:first-child {
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-  border-top-width: 0px;
-}
-
-.device-wrapper .device-actions a:last-child {
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
 .profile-thumb {
   height: 30px;
   width: 30px;
@@ -16388,6 +16404,9 @@ img.chat-avatar {
     grid-template-columns: 1fr 2fr;
   }
   @media (min-width: 1536px) {
+    grid-template-columns: 2fr 3fr;
+  }
+  @media (min-width: 1930px) {
     grid-template-columns: 1fr 3fr;
   }
 }
@@ -17880,6 +17899,353 @@ select {
   background-color: rgba(33, 190, 244, var(--tw-bg-opacity));
 }
 
+.test-header.tester {
+  display: grid;
+  --tw-bg-opacity: 1;
+  background-color: rgba(29, 29, 29, var(--tw-bg-opacity));
+  padding: 0px;
+  padding-left: 15px;
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+  grid-area: test-header;
+  grid-template-areas:   "test-title session-info test-actions"
+                          "test-progress test-progress test-progress"
+                          "nav-tabs nav-tabs nav-tabs";
+  grid-template-columns: 1fr auto auto;
+  grid-template-rows: auto;
+  @media (min-width: 640px){
+    grid-template-areas:  "test-title test-progress session-info test-actions"
+                          "nav-tabs nav-tabs nav-tabs nav-tabs";
+
+    grid-template-columns: auto 1fr auto auto;
+
+    grid-template-rows: auto;
+
+    padding-top: 10px;
+
+    padding-right: 20px;
+
+    padding-bottom: 0px;
+
+    padding-left: 20px;
+  }
+  @media (min-width: 768px){
+    padding-top: 10px;
+
+    padding-right: 20px;
+
+    padding-bottom: 0px;
+
+    padding-left: 50px;
+  }
+}
+
+.test-header.tester.ready {
+  --tw-bg-opacity: 1;
+  background-color: rgba(38, 51, 64, var(--tw-bg-opacity));
+}
+
+.test-header.tester.recording {
+  --tw-bg-opacity: 1;
+  background-color: rgba(35, 106, 132, var(--tw-bg-opacity));
+}
+
+.test-header.tester.danger {
+  --tw-bg-opacity: 1;
+  background-color: rgba(236, 4, 4, var(--tw-bg-opacity));
+}
+
+.test-header.tester.minimized {
+  align-items: center;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  grid-template-areas:  "nav-tabs session-info test-actions";
+  grid-template-columns: 1fr auto auto;
+  .test-title, .test-progress-wrapper {
+    display: none;
+  }
+  .session-info {
+    padding-top: 0;
+  }
+  .nav-tabs {
+    padding-top: 5px;
+    padding-bottom: 10px;
+  }
+  @media (min-width: 640px){
+    padding-top: 5px;
+
+    padding-bottom: 5px;
+  }
+}
+
+.test-header .nav-tabs {
+  margin-bottom: 0px;
+  border-bottom-width: 0px;
+  padding-bottom: 10px;
+  grid-area: nav-tabs;
+}
+
+.test-header.tester .nav-tabs::after {
+  background: linear-gradient(90deg, rgba(29,29,29,0) 0%, rgba(29,29,29,1) 90%);
+}
+
+.test-header.ready .nav-tabs::after {
+  background: linear-gradient(90deg, rgba(38,51,64,0) 0%, rgba(38,51,64,1) 90%);
+}
+
+.test-header.tester.recording .nav-tabs::after {
+  background: linear-gradient(90deg, rgba(35,106,132,0) 0%, rgba(35,106,132,1) 90%);
+}
+
+.test-header.tester.danger .nav-tabs::after {
+  background: linear-gradient(90deg, rgba(236,4,4,0) 0%, rgba(236,4,4,1) 90%);
+}
+
+.test-header .navlink {
+  height: 20px;
+  border-bottom-width: 0px;
+  font-size: 14px;
+  line-height: 18px;
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity))
+}
+
+.test-header .navlink.active, .test-header .navlink:hover, .test-header .navlink:focus {
+  border-bottom-width: 2px;
+}
+
+.test-header.tester.recording .navlink.active {
+  --tw-border-opacity: 1;
+  border-color: rgba(255, 255, 255, var(--tw-border-opacity));
+}
+
+.test-header.tester.recording .navlink.active:hover{
+  --tw-border-opacity: 1;
+  border-color: rgba(33, 190, 244, var(--tw-border-opacity));
+}
+
+.test-header.tester.recording .navlink.active:focus{
+  --tw-bg-opacity: 1;
+  background-color: rgba(33, 190, 244, var(--tw-bg-opacity));
+}
+
+h1, h2, h3, h4, h5, .text-heading-1, .text-heading-2, .text-heading-3, .text-heading-4, .text-heading-5 {
+  font-weight: 300;
+}
+
+.test-header .test-title{
+  margin-bottom: 0px;
+  padding-top: 10px;
+  padding-right: 20px;
+  font-size: 1.125rem;
+  line-height: 1.125rem;
+}
+
+@media (min-width: 640px){
+  .test-header .test-title{
+    padding-top: 0px;
+    font-size: 1.375rem;
+    line-height: 1.375rem;
+  }
+}
+
+.test-header .test-title{
+  grid-area: test-title;
+  line-height: 1;
+}
+
+.test-header .test-progress-wrapper {
+  display: inline-flex;
+  flex-grow: 1;
+  flex-direction: column;
+  padding-right: 20px;
+  grid-area: test-progress;
+}
+
+.test-header .meta-info {
+  margin-bottom: 5px;
+  font-size: 13px;
+  line-height: 13px;
+  --tw-text-opacity: 1;
+  color: rgba(191, 193, 197, var(--tw-text-opacity));
+}
+
+.test-header .test-progress {
+  margin-bottom: 10px;
+  width: 100%;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  height: 2px;
+}
+
+.test-progress::-webkit-progress-bar {
+  --tw-bg-opacity: 1;
+  background-color: rgba(38, 38, 38, var(--tw-bg-opacity));
+}
+
+.test-progress::-webkit-progress-value {
+  --tw-bg-opacity: 1;
+  background-color: rgba(33, 190, 244, var(--tw-bg-opacity));
+}
+
+.session-info {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  padding-top: 10px;
+  padding-right: 20px;
+}
+
+@media (min-width: 640px){
+  .session-info{
+    padding-top: 0px;
+  }
+}
+
+.session-info{
+  grid-area: session-info;
+  line-height: 1;
+}
+
+.session-label {
+  display: none;
+  font-size: 11px;
+  line-height: 11px;
+}
+
+@media (min-width: 640px){
+  .session-label{
+    display: block;
+  }
+}
+
+.session-timer {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+@media (min-width: 640px){
+  .session-timer{
+    align-items: baseline;
+    font-size: 1.563rem;
+    line-height: 1.563rem;
+    font-weight: 300;
+  }
+}
+
+.session-timer::before {
+  margin-right: 10px;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+}
+
+@media (min-width: 640px){
+  .session-timer::before{
+    margin-top: 5px;
+  }
+}
+
+.session-timer::before{
+  content: "";
+  -webkit-mask-image: url("/assets/images/test.svg");
+          mask-image: url("/assets/images/test.svg");
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+}
+
+.session-timer::after {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  margin-right: 10px;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  --tw-bg-opacity: 1;
+  background-color: rgba(236, 4, 4, var(--tw-bg-opacity));
+}
+
+@media (min-width: 640px){
+  .session-timer::after{
+    margin-top: 5px;
+  }
+}
+
+.session-timer::after{
+  content: "";
+  -webkit-mask-image: url("/assets/images/circle-sm-filled.svg");
+          mask-image: url("/assets/images/circle-sm-filled.svg");
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+}
+
+.test-header.danger .session-timer::after {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+}
+
+.session-addon {
+  margin-left: 5px;
+  display: none;
+  font-size: 13px;
+  line-height: 13px;
+}
+
+@media (min-width: 640px){
+  .session-addon{
+    display: inline;
+  }
+}
+
+.test-actions {
+  display: flex;
+  grid-area: test-actions;
+}
+
+.test-actions .btn {
+  height: 40px;
+  width: 40px;
+  justify-content: center;
+  border-radius: 0px;
+  border-left-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgba(29, 29, 29, var(--tw-border-opacity));
+  padding: 0px;
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity))
+}
+
+@media (min-width: 640px){
+  .test-actions .btn{
+    margin-right: 10px;
+    border-radius: 5px;
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: rgba(255, 255, 255, var(--tw-border-opacity));
+    padding: 10px;
+  }
+}
+
+.test-actions .btn:hover {
+  border: none;
+}
+
+.test-actions .btn-recording {
+  --tw-text-opacity: 1;
+  color: rgba(236, 4, 4, var(--tw-text-opacity));
+}
+
+.test-actions .btn:last-child {
+  margin-right: 0;
+}
+
 /*///////// Customer Header /////////*/
 
 .header.customer {