aboutsummaryrefslogtreecommitdiff
path: root/ui/src/assets/record.scss
diff options
context:
space:
mode:
Diffstat (limited to 'ui/src/assets/record.scss')
-rw-r--r--ui/src/assets/record.scss152
1 files changed, 111 insertions, 41 deletions
diff --git a/ui/src/assets/record.scss b/ui/src/assets/record.scss
index 6b0a762aa..9a14090bd 100644
--- a/ui/src/assets/record.scss
+++ b/ui/src/assets/record.scss
@@ -90,12 +90,12 @@
&:hover {
background-color: hsl(88, 50%, 84%);
- box-shadow: 0 0 4px 0px #999;
+ box-shadow: 0 0 4px 0 #999;
}
&.selected {
background-color: hsl(88, 50%, 67%);
- box-shadow: 0 0 4px 0px #999;
+ box-shadow: 0 0 4px 0 #999;
}
&.disabled {
@@ -116,7 +116,7 @@
}
label, select, button {
- font-weight: 100;
+ font-weight: 300;
margin: 3px;
color: #333;
font-size: 17px;
@@ -140,7 +140,7 @@
padding: 4px;
height: 30px;
&:hover, &:active {
- box-shadow: 0 0 4px 0px #ccc;
+ box-shadow: 0 0 4px 0 #ccc;
background-color: #fafafa;
}
i {
@@ -201,7 +201,6 @@
li {
@include transition();
- display: block;
height: 55px;
padding: 0 1em;
font-size: 15px;
@@ -291,11 +290,17 @@
height: auto;
width: 100%;
- padding: 0px;
+ padding: 0;
display: flex;
align-items: center;
}
+ .parsing-errors {
+ padding: 1em;
+ border: 1px solid #dc143c;
+ color: #dc143c;
+ }
+
.title-config {
display: inline-block;
margin: var(--record-section-padding);
@@ -304,19 +309,23 @@
}
.config-button {
- border-radius: 10px;
+ border-radius: 100%;
margin-right: 10px;
text-align: center;
justify-items: center;
font-family: 'Raleway', sans-serif;
padding: 7px;
- width: 75px;
- &:hover {
- box-shadow: 0 0 4px 0px #999;
+ &:hover:enabled {
+ box-shadow: 0 0 3px 0 #aaa;
+ }
+
+ &:not(:enabled) {
+ background-color: hsl(0, 0%, 83%);
+ color: hsl(0, 0%, 50%);
}
- &.load {
+ &.load:enabled {
background-color: hsl(88, 50%, 67%);
}
@@ -325,9 +334,23 @@
}
&.save {
- width: 160px;
- background-color: hsl(197, 50%, 67%);
+ &.long {
+ width: 160px;
+ }
+
+ &:enabled {
+ background-color: hsl(197, 50%, 67%);
+ }
}
+
+ &.reset {
+ width: 300px;
+ background-color: hsl(0, 50%, 67%);
+ }
+ }
+
+ .reset-wrapper {
+ padding: 1em;
}
.input-config {
@@ -335,11 +358,11 @@
margin-bottom: 20px;
display: flex;
align-items: center;
- padding: 0px;
+ padding: 0;
input {
border-radius: 20px;
- border-color: #0000003d;
+ border: 1px solid #eee;
line-height: 36px;
padding: 0 10px;
font-size: 18px;
@@ -395,6 +418,11 @@
padding-top: var(--record-section-padding);
padding-bottom: var(--record-section-padding);
+ &.compact {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ }
+
&:nth-of-type(2n) {
background-color: #f9f9f9;
}
@@ -456,7 +484,7 @@
height: 26px;
border-radius: 100px;
background: #f5f5f5;
- box-shadow: 0px 3px 3px rgba(0,0,0,0.15);
+ box-shadow: 0 3px 3px rgba(0,0,0,0.15);
content: '';
transition: all 0.3s ease;
}
@@ -554,7 +582,7 @@
height: 20px;
border-radius: 100px;
background: #f5f5f5;
- box-shadow: 0px 3px 3px rgba(0,0,0,0.15);
+ box-shadow: 0 3px 3px rgba(0,0,0,0.15);
content: '';
transition: all 0.3s ease;
}
@@ -608,13 +636,12 @@
&:hover {
background-color: hsl(88, 50%, 84%);
- box-shadow: 0 0 4px 0px #999;
+ box-shadow: 0 0 4px 0 #999;
}
&.selected {
- background-color: hsl(207, 90%, 74%);
background-color: hsl(88, 50%, 67%);
- box-shadow: 0 0 4px 0px #999;
+ box-shadow: 0 0 4px 0 #999;
}
img {
@@ -689,7 +716,7 @@
width: 100%;
appearance: none;
-webkit-appearance: none;
- scroll-snap-type: mandatory;
+ scroll-snap-type: x mandatory;
background-color : transparent;
outline: none;
margin-left: -10px;
@@ -697,7 +724,6 @@
&::-webkit-slider-runnable-track {
margin: 10px;
- border-radius: 1px;
width: 100%;
height: 10px;
background-color : #ddd;
@@ -785,23 +811,46 @@
}
}
+ .chrome-categories {
+ margin: var(--record-section-padding) 0;
+
+ display: flex;
+ flex-direction: row;
+
+ .categories-list {
+ width: 50%;
+
+ h3 {
+ margin: 6px 0;
+ }
+
+ .config-button {
+ border-radius: 10px;
+ border: 1px solid #eee;
+ margin: 0 5px;
+ font-size: .8rem;
+ }
+
+ .checkboxes {
+ list-style-type: none;
+ padding: 0;
+ font-size: .9rem;
+
+ li {
+ margin: 6px 0;
+ }
+ input {
+ margin-right: 8px;
+ }
+ }
+ }
+ }
+
.dropdown {
border: 1px solid #eee;
outline: none;
-webkit-appearance: none;
- &:not(.multicolumn) {
- overflow: hidden;
- height: 25px;
- padding: 0 5px;
- &:focus, &:hover {
- height: 30vh;
- position: absolute;
- overflow: auto;
- box-shadow: 0 0 15px 0 #eee;
- }
- }
-
option, optgroup {
@include transition();
min-height: 25px;
@@ -823,6 +872,23 @@
}
}
+ &.singlecolumn {
+ margin: var(--record-section-padding) 0;
+ padding: 0;
+ max-width: 100%;
+ width: 100%;
+ overflow-y: auto;
+ height: 400px;
+ optgroup {
+ display: grid;
+ padding: 0;
+ grid-template-columns: 1fr;
+ }
+ option {
+ margin: 0;
+ }
+ }
+
&.multicolumn {
padding: 0;
max-width: 100%;
@@ -879,6 +945,11 @@
&::placeholder { color: #aaa; }
}
+ textarea.atrace-apps-list {
+ margin-top: 16px;
+ height: 100px;
+ }
+
.code-snippet {
display: grid;
position: relative;
@@ -886,7 +957,6 @@
margin: var(--record-section-padding);
background-color: #111;
border-radius: 4px;
- user-select: text;
box-shadow: 0 0 12px #999;
@keyframes ripple{
@@ -905,7 +975,7 @@
}
&.no-top-bar {
- white-space: 'pre';
+ white-space: pre;
&::before {
height: 0;
}
@@ -1012,12 +1082,12 @@
&:hover {
background-color: hsl(88, 50%, 84%);
- box-shadow: 0 0 4px 0px #999;
+ box-shadow: 0 0 4px 0 #999;
}
&.selected {
background-color: hsl(88, 50%, 67%);
- box-shadow: 0 0 4px 0px #999;
+ box-shadow: 0 0 4px 0 #999;
}
}
}
@@ -1034,7 +1104,7 @@
background-color: hsl(88, 50%, 67%);
&:hover {
- box-shadow: 0 0 4px 0px #999;
+ box-shadow: 0 0 4px 0 #999;
}
}
@@ -1055,10 +1125,10 @@
}
} // record-section
-.inline-chip {
+.inline-chip {
@include transition();
&:hover, &:active {
- box-shadow: 0 0 2px 0px #ccc;
+ box-shadow: 0 0 2px 0 #ccc;
background-color: #fafafa;
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-12 10:49:26 +0000