:liptick: Minor UI update

This commit is contained in:
Liyas Thomas
2019-11-21 06:55:37 +05:30
parent 1ab2de9c69
commit 8d99d4aa99
15 changed files with 89 additions and 132 deletions

View File

@@ -1,63 +1,2 @@
/* Material Design Icons */
@font-face {
font-family: "Material Icons";
font-display: swap;
font-style: normal;
font-weight: 400;
src: url(~@/assets/fonts/material-icons-v48.woff2) format("woff2");
}
.material-icons {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
}
/* Roboto Mono 400 */
@font-face {
font-family: "Roboto Mono";
font-display: swap;
font-style: normal;
font-weight: 400;
src: local("Roboto Mono"), local("RobotoMono-Regular"),
url("~@/assets/fonts/roboto-mono-v7-latin-regular.woff2") format("woff2"),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url("~@/assets/fonts/roboto-mono-v7-latin-regular.woff") format("woff");
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* Poppins 500 */
@font-face {
font-family: "Poppins";
font-display: swap;
font-style: normal;
font-weight: 500;
src: local("Poppins Medium"), local("Poppins-Medium"),
url("~@/assets/fonts/poppins-v9-latin-500.woff2") format("woff2"),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url("~@/assets/fonts/poppins-v9-latin-500.woff") format("woff");
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-700 - latin */
@font-face {
font-family: "Poppins";
font-display: swap;
font-style: normal;
font-weight: 700;
src: local("Poppins Bold"), local("Poppins-Bold"),
url("~@/assets/fonts/poppins-v9-latin-700.woff2") format("woff2"),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url("~@/assets/fonts/poppins-v9-latin-700.woff") format("woff");
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@import url("https://fonts.googleapis.com/css?family=Poppins:500,700|Roboto+Mono:400&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

View File

@@ -46,7 +46,7 @@ body {
background-color: var(--bg-color);
color: var(--fg-color);
font-weight: 500;
font-size: 16px;
font-size: 14px;
font-family: "Poppins", "Roboto", "Noto", sans-serif;
line-height: 1.5;
-webkit-tap-highlight-color: transparent;
@@ -73,7 +73,6 @@ a {
display: inline-flex;
color: inherit;
text-decoration: none;
font-weight: 700;
}
header,
@@ -152,7 +151,7 @@ footer {
display: flex;
width: 10%;
order: 3;
// comment this to display
// comment below this to display
display: none;
}
@@ -254,6 +253,7 @@ h3 {
border-radius: 8px;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
}
.tooltip-arrow {
@@ -366,16 +366,15 @@ button {
align-items: center;
justify-content: center;
margin: 4px;
padding: 0 16px;
padding: 6px 16px;
border-radius: 20px;
background-color: var(--ac-color);
color: var(--act-color);
font-weight: 700;
font-size: 16px;
font-family: "Poppins", "Roboto", "Noto", sans-serif;
font-weight: 700;
transition: all 0.2s ease-in-out;
fill: var(--act-color);
height: 40px;
cursor: pointer;
span {
@@ -485,11 +484,12 @@ pre {
background-color: var(--bg-dark-color);
color: var(--fg-color);
font-size: 16px;
font-family: 'Roboto Mono', monospace;
font-family: "Roboto Mono", monospace;
font-weight: 400;
line-height: 1;
transition: all 0.2s ease-in-out;
user-select: text;
width: calc(100% - 8px);
min-height: 40px;
resize: vertical;
text-overflow: ellipsis;
@@ -506,7 +506,8 @@ pre {
}
pre.ace_editor {
font-family: Roboto Mono, monospace;
font-family: "Roboto Mono", monospace;
font-weight: 400;
z-index: 0;
}
@@ -517,7 +518,8 @@ code {
select,
option {
height: 40px;
height: 37px;
line-height: 37px;
cursor: pointer;
}
@@ -649,7 +651,8 @@ ol li {
}
.mono {
font-family: 'Roboto Mono', monospace;
font-family: "Roboto Mono", monospace;
font-weight: 400;
}
#response-details-wrapper {
@@ -660,6 +663,7 @@ ol li {
textarea {
margin: 0;
width: 100%;
line-height: 1;
}
.covers-response {
@@ -758,10 +762,14 @@ input[type="radio"]:checked + label + .tab {
.inner-right {
display: flex;
width: 25%;
width: 30%;
order: 2;
}
.bg-color {
background-color: var(--bg-color);
}
@media (max-width: $responsiveWidth) {
.content {
flex-flow: column;