butter/butter-kanglam-ui
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add ui to upload to IPFS node on box

Browse source
This commit is contained in:
John Hess 2023-05-24 17:30:54 -05:00
parent 99089126c0
commit 54b3da996c
27 changed files with 78892 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

333
assets/css/upload/style.css Normal file
View file

@ -0,0 +1,333 @@
html, body {
margin: 0px;
padding: 0px;
width: 100%;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
background-color: #e9ebee;
}
#content {
margin: 15px auto;
width: 100%;
max-width: 1000px;
display: flex;
flex-direction: column;
background-color: white;
align-items: center;
padding-bottom: 50px;
}
#wrapper {
background-color: white;
padding: 50px 0px 50px 0px;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
}
#hidden-menu {
display: none;
}
#top {
width: 100%;
margin: 25px 50px;
}
#left {
width: 400px;
}
#right {
width: 400px;
}
nav {
text-transform: uppercase;
color: #555555;
width: 100%;
max-width: 1400px;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
}
nav img {
width: 40px;
}
nav > ul > li {
display: inline-block;
padding: 25px 1.2em;
white-space: nowrap;
position: relative;
}
nav a {
color: #92b0b3;
text-decoration: none;
}
nav a:hover {
color: white;
}
nav a:hover > * {
fill: white;
}
nav .svg {
fill: #92b0b3;
height: 1.2em;
width: 1.2em;
display: block;
float: right;
}
nav ul ul {
display: none;
position: absolute;
top: 100%; /*sets the top edge of the element above/below top edge of nearest ancestor*/
}
nav ul li:hover > ul {
display: block;
}
nav ul ul li {
float: none;
background: rgba(35, 61, 77, 0.81);
padding: 10px;
text-align: center;
}
nav ul ul li a {
color: #92b0b3;
}
nav ul ul li a:hover {
color: white;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
@media screen and (max-width: 860px) {
nav h1 {
margin-top: 25px;
}
pre#response {
margin: 30px 0;
}
}
@media screen and (max-width: 477px) {
nav h1 {
font-size: 14px;
}
nav ul {
font-size: 12px;
}
}
@media screen and (max-width: 410px) {
nav h1 {
margin: 15px 0;
}
nav > ul > li {
padding: 0 .5em 15px;
}
}
@media screen and (max-width: 390px) {
#wrapper {
padding: 50px 0;
}
}
@media screen and (max-width: 370px) {
nav h1 {
font-size: 13px;
}
nav img {
width: 30px;
}
}
@media screen and (max-width: 355px) {
nav h1 {
font-size: 12px;
}
nav img {
width: 28px;
}
}
@media screen and (max-width: 350px) {
nav h1 {
font-size: 11px;
}
nav img {
width: 25px;
}
nav > ul > li {
font-size: 11px;
}
}
h1 {
color: #92b0b3;
font-weight: 500;
font-size: 1.2em;
display: flex;
align-items: center;
margin: 0;
}
.buttonContent > div:first-child {
display: flex;
justify-content: center;
align-items: center;
}
.buttonContent > div:first-child img {
margin-left: 5px;
}
.min-loading {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 64px;
}
.min-loading.blue {
width: 68px;
}
.min-loading div {
position: absolute;
width: 11px;
height: 11px;
border-radius: 50%;
background: #fff;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.min-loading.blue div {
background-color: #3498db;
width: 15px;
height: 15px;
}
.min-loading div:nth-child(1) {
left: 6px;
animation: min-loading1 0.6s infinite;
}
.min-loading div:nth-child(2) {
left: 6px;
animation: min-loading2 0.6s infinite;
}
.min-loading div:nth-child(3) {
left: 26px;
animation: min-loading2 0.6s infinite;
}
.min-loading div:nth-child(4) {
left: 45px;
animation: min-loading3 0.6s infinite;
}
@keyframes min-loading1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes min-loading3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes min-loading2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(19px, 0);
}
}
.loading-hidden {
display: none;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#divResponse {
width: 100%;
}
#divResponse pre {
display: flex;
flex-direction: column;
color: #333;
min-height: 80px;
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: 7px;
font-size: 12px;
overflow: auto;
margin: 30px 0;
white-space: pre-wrap;
word-break: break-word;
}
.b-nav {
margin: 0px auto;
width: 100%;
display: flex;
align-items: center;
background: rgba(35, 61, 77, 0.81);
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
min-height: 60px;
}
#source-ack
{
text-align: center;
margin-bottom: 10px;
}