1
0
mirror of https://github.com/gusaul/grpcox.git synced 2024-12-25 09:50:10 +00:00
grpcox/index/css/style.css
Azdim Zul Fahmi 464de07064 feat(request-list): Support CRUD for request list
by using this request list, user doesn't need to memorise the endpoint & the request anymore, they can store the request and come again if they need it.
at the moment the data is store in IndexDB (browser), hence it doesn't need backend effort.
2021-12-12 15:20:17 +07:00

252 lines
4.4 KiB
CSS

body {
padding-bottom: 50px;
}
.mt-10 {
margin-top:10px;
}
.pt-50 {
padding-top:50px;
}
.w-120 {
width: 120px;
}
.custom-pretty {
border:none!important;
}
.custom-control-label:hover {
cursor: pointer;
}
#choose-service, #choose-function, #body-request {
margin-top: 40px;
}
.schema-body {
height: 250px;
overflow-y: scroll;
}
#response {
margin-top: 30px;
}
/* github corner */
.github-corner:hover .octo-arm{
animation:octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave{
0%,100%{
transform:rotate(0)
}
20%,60%{
transform:rotate(-25deg)
}
40%,80%{
transform:rotate(10deg)
}
}
@media (max-width:500px){
.github-corner:hover .octo-arm{
animation:none
}
.github-corner .octo-arm{
animation:octocat-wave 560ms ease-in-out
}
}
/* connections */
.connections {
font-weight: 100;
background: #efefef;
width: 240px;
height: 320px;
position: fixed;
top: 200px;
z-index: 100;
-webkit-box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.2);
box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.2);
left: -190px;
transition: all .3s;
-webkit-transition: all .3s;
color: #222;
}
.connections:hover, .connections:focus {
transform: translate3d(190px, 0, 0);
animation-timing-function: 1s ease-in
}
.connections .title {
top: 50%;
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
transform: rotate(270deg);
right: -50px;
font-weight: 800;
font-size: 15px
}
.connections .nav {
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-weight: 100;
overflow-y: scroll;
padding-left: 10px;
padding-right: 30px;
top: 160px;
height: 300px;
}
.connections .nav li {
padding-bottom: 12px;
list-style-type: none
}
.connections .nav li i {
color: #a20000;
cursor: pointer;
}
.connections .nav li a:hover { color: #aaa }
.dots {
position: absolute;
left: -65px;
top: -39px;
color: #b70000;
}
circle {
stroke: #ce2828;
fill: #a20000;
stroke-width: 2px;
stroke-opacity: 1;
}
.pulse {
fill: white;
fill-opacity: 0;
transform-origin: 50% 50%;
animation-duration: 2s;
animation-name: pulse;
animation-iteration-count: infinite;
}
@keyframes pulse {
from {
stroke-width: 3px;
stroke-opacity: 1;
transform: scale(0.3);
}
to {
stroke-width: 0;
stroke-opacity: 0;
transform: scale(2);
}
}
/* loading spinner */
.spinner {
margin: 10px auto;
width: 180px;
height: 80px;
text-align: center;
font-size: 80px;
}
.spinner > div {
background-color: #59698d;
height: 100%;
width: 18px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
.save-button-dropdown {
padding-left: 10px;
padding-right: 15px;
}
.save-button-dropdown .dropdown-menu.show {
transform: translate3d(639px, 46px, 0px);
}
.one-long-line {
margin-bottom: 0;
margin-left: 5px;
max-width: 100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.one-long-line:hover {
cursor: pointer;
overflow:visible;
}
.column-row-left {
display: flex;
flex-direction: column;
margin-top: 8px;
}
.column-row-left .md-form{
margin-bottom: 0;
}
.search {
width: 100%;
}
.request-list {
display: flex;
padding: 5px;
}
.request-list .fa {
color: red;
}
.request-list.selected {
background: #dadfe3;;
}