mirror of https://github.com/mpolden/echoip
Update styles.html
This commit is contained in:
prajwal-koirala-0000
GitHub
parent
ffa6674637
commit
fc83fec705
239
html/styles.html
239
html/styles.html
|
|
@ -1,184 +1,181 @@
|
||||||
<style>
|
<style>
|
||||||
html,
|
.ip,pre {
|
||||||
.pure-g [class*="pure-u"] {
|
word-wrap: break-word
|
||||||
background-color: white;
|
}
|
||||||
font-family: "Open Sans", sans-serif;
|
|
||||||
}
|
pre {
|
||||||
pre {
|
font-family: "Monaco","Menlo","Consolas","Courier New",monospace;
|
||||||
font-family: "Monaco", "Menlo", "Consolas", "Courier New", monospace;
|
white-space: pre-wrap;
|
||||||
white-space: pre-wrap; /* Since CSS 2.1 */
|
white-space: -moz-pre-wrap;
|
||||||
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
|
white-space: -pre-wrap;
|
||||||
white-space: -pre-wrap; /* Opera 4-6 */
|
white-space: -o-pre-wrap
|
||||||
white-space: -o-pre-wrap; /* Opera 7 */
|
}
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
a {
|
||||||
a {
|
|
||||||
/* background: #e3e3e3; */
|
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
color: #000;
|
color: #000
|
||||||
}
|
}
|
||||||
a:hover,
|
|
||||||
active {
|
a:hover,active {
|
||||||
background: #d7d7d7;
|
background: #d7d7d7
|
||||||
}
|
}
|
||||||
.ip {
|
|
||||||
|
.ip {
|
||||||
border: 1px solid #cbcbcb;
|
border: 1px solid #cbcbcb;
|
||||||
background: #f2f2f2;
|
background: #f2f2f2;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
padding: 6px;
|
padding: 6px
|
||||||
word-wrap: break-word;
|
}
|
||||||
}
|
|
||||||
svg.github-corner {
|
|
||||||
fill: #151513;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.footer {
|
|
||||||
margin-top: 34px;
|
|
||||||
border-top: 1px solid #cbcbcb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
svg.github-corner {
|
||||||
|
fill: #151513;
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: 34px;
|
||||||
|
border-top: 1px solid #cbcbcb
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
max-width: 1024px;
|
max-width: 1024px
|
||||||
}
|
}
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
justify-content: center;
|
justify-content: center
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-table td,
|
.info-table td,.info-table th {
|
||||||
.info-table th {
|
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
border: 2px solid #ababab;
|
border: 2px solid #ababab;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-table th[scope="row"] {
|
.info-table th[scope=row] {
|
||||||
background-color: #d5d5d5;
|
background-color: #d5d5d5;
|
||||||
text-align: left;
|
text-align: left
|
||||||
}
|
}
|
||||||
|
|
||||||
.widgetbox {
|
.widgetbox {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.5rem;
|
padding: .5rem;
|
||||||
border: 1px solid grey;
|
border: 1px solid gray;
|
||||||
font-family: "Courier New", Courier, monospace;
|
font-family: "Courier New",Courier,monospace;
|
||||||
margin-top: 0.5rem;
|
margin-top: .5rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box
|
||||||
}
|
}
|
||||||
|
|
||||||
.widgetbox.input :first-child::before {
|
.widgetbox.input :first-child::before {
|
||||||
content: "$ ";
|
content: "$ ";
|
||||||
white-space: pre;
|
white-space: pre
|
||||||
}
|
}
|
||||||
|
|
||||||
.widgetbox.output {
|
.widgetbox.output {
|
||||||
min-height: 4em;
|
min-height: 4em;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
overflow-x: scroll;
|
overflow-x: scroll
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-box {
|
.l-box {
|
||||||
margin: 0 1rem;
|
margin: 0 1rem
|
||||||
}
|
}
|
||||||
|
|
||||||
.align-right {
|
.align-right {
|
||||||
text-align: right;
|
text-align: right
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-input {
|
.medium-input {
|
||||||
width: 10em;
|
width: 10em
|
||||||
}
|
}
|
||||||
|
|
||||||
button.selected {
|
button.selected {
|
||||||
background-color: rgb(208 208 208);
|
background-color: rgb(208 208 208)
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-buttons {
|
.input-buttons {
|
||||||
line-height: 2.6em;
|
line-height: 2.6em;
|
||||||
font-size: smaller;
|
font-size: smaller
|
||||||
}
|
}
|
||||||
|
|
||||||
/* POST CORRECTION */
|
.leafcloud-logo .letters {
|
||||||
.leafcloud-logo .letters {
|
fill: #000
|
||||||
fill: black;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* DARK MODE OVERRIDES */
|
@media (prefers-color-scheme:dark) {
|
||||||
@media (prefers-color-scheme: dark) {
|
.pure-g [class*=pure-u],a,html {
|
||||||
html,
|
background-color: #161719;
|
||||||
.pure-g [class*="pure-u"],
|
color: #d8d9da
|
||||||
a {
|
|
||||||
background-color: #161719;
|
|
||||||
color: #d8d9da;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ip {
|
.ip {
|
||||||
border: 1px solid #313233;
|
border: 1px solid #313233;
|
||||||
background: #212223;
|
background: #212223
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
color: #8e8e8e !important;
|
color: #8e8e8e!important;
|
||||||
border-top: 1px solid #313233;
|
border-top: 1px solid #313233
|
||||||
}
|
}
|
||||||
a:hover,
|
|
||||||
active {
|
a:hover,active {
|
||||||
background: #3d3e3f;
|
background: #3d3e3f
|
||||||
}
|
}
|
||||||
|
|
||||||
svg.github-corner {
|
svg.github-corner {
|
||||||
fill: #f8f9fa;
|
fill: #f8f9fa;
|
||||||
color: #161719;
|
color: #161719
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-table th[scope="row"] {
|
.info-table th[scope=row] {
|
||||||
background-color: #2e2e2e;
|
text-align: left
|
||||||
color: rgb(220, 220, 220);
|
|
||||||
text-align: left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pure-button {
|
.info-table th[scope=row],.pure-button {
|
||||||
background-color: #2e2e2e;
|
background-color: #2e2e2e;
|
||||||
color: rgb(220, 220, 220);
|
color: #dcdcdc
|
||||||
}
|
}
|
||||||
|
|
||||||
.pure-button.selected {
|
.pure-button.selected {
|
||||||
background-color: rgb(125 125 125);
|
background-color: rgb(125 125 125)
|
||||||
}
|
}
|
||||||
|
|
||||||
.pure-input {
|
.pure-input {
|
||||||
background-color: #e6e6e6;
|
background-color: #e6e6e6;
|
||||||
color: #666;
|
color: #666
|
||||||
}
|
}
|
||||||
|
|
||||||
.pure-input::placeholder {
|
.pure-input::placeholder {
|
||||||
color: #bbb;
|
color: #bbb
|
||||||
}
|
}
|
||||||
|
|
||||||
.leafcloud-logo .letters {
|
.leafcloud-logo .letters {
|
||||||
fill: white;
|
fill: #fff;
|
||||||
max-width: 100%;
|
max-width: 100%
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width:768px) {
|
||||||
.leafcloud-placement {
|
.leafcloud-placement {
|
||||||
text-align: right;
|
text-align: right
|
||||||
}
|
}
|
||||||
.leafcloud-logo {
|
|
||||||
height: 80px;
|
|
||||||
margin: 2em 0 -0.5em 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.leafcloud-logo {
|
.leafcloud-logo {
|
||||||
margin-right: 1em;
|
height: 80px;
|
||||||
|
margin: 2em 0-.5em
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.debug {
|
@media (max-width:768px) {
|
||||||
outline: 1px dotted pink;
|
.leafcloud-logo {
|
||||||
}
|
margin-right: 1em
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug {
|
||||||
|
outline: 1px dotted pink
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue