Verified Commit 754360b0 authored by Luc Didry's avatar Luc Didry
Browse files

💄 — Use some CSS from Chota CSS

parent 375f960a
Revision history for GeoIP Lookup
0.5 ????-??-??
0.6 ????-??-??
0.5 2022-03-30
- Show visitor’s IP address
- Use some CSS from Chota CSS
0.4 2022-03-29
- Improve accessibility
......
......@@ -37,3 +37,5 @@ Ce logiciel est diffusé sous les termes de la [licence Affero GPL v3](LICENSE).
La base de données de [DB-IP](https://db-ip.com/) utilisée est diffusée sous les termes de la [licence CC-BY](http://creativecommons.org/licenses/by/4.0/) et *mirrorée* par [Framasoft](https://framasoft.org) à l’adresse <https://dbip.mirror.framasoft.org/>.
La bibliothèque [MaxMind-DB-Reader-php](https://github.com/maxmind/MaxMind-DB-Reader-php) est diffusée sous les termes de la [licence Apache 2.0](https://github.com/maxmind/MaxMind-DB-Reader-php/blob/main/LICENSE).
Le framework CSS [Chota](https://jenil.github.io/chota/), diffusé sous les termes de la [licence MIT](https://github.com/jenil/chota/blob/master/LICENSE) a été utilisé pour créer la feuille de style du logiciel.
:root {
--bg-color: #fff;
--bg-secondary-color: #f3f3f6;
--color-primary: #14854f;
--color-lightGrey: #d2d6dd;
--color-grey: #747681;
--color-darkGrey: #3f4144;
--color-error: #d43939;
--color-success: #28bd14;
--grid-maxWidth: 120rem;
--grid-gutter: 2rem;
--font-size: 1.6rem;
--font-color: #333;
--font-family-sans: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #000;
--bg-secondary-color: #262626;
--color-primary: #17c16f;
--color-grey: #bbb;
--color-darkGrey: #888;
--color-error: #ea4f4f;
--font-color: #f5f5f5;
}
input[type="text"] {
background-color: var(--color-lightGrey);
}
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%;
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
*,
:after,
:before {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
background-color: var(--bg-color);
line-height: 1.6;
font-size: var(--font-size);
color: var(--font-color);
font-family: Segoe UI, Helvetica Neue, sans-serif;
font-family: var(--font-family-sans);
margin: 0;
padding: 0;
}
h1 {
font-weight: 500;
margin: .35em 0 .7em;
}
h1 {
font-size: 2em;
}
p {
margin-top: 0;
}
dl dt {
font-weight: 700;
}
hr {
background-color: var(--color-lightGrey);
height: 1px;
margin: 1rem 0;
}
hr {
border: none;
}
code {
font-family: var(--font-family-mono);
}
code {
font-size: 90%;
white-space: pre-wrap;
border-radius: 4px;
padding: .2em .4em;
color: var(--color-error);
}
code {
background-color: var(--bg-secondary-color);
}
.container {
max-width: var(--grid-maxWidth);
margin: 0 auto;
width: 96%;
padding: 0 calc(var(--grid-gutter)/2);
}
@media screen and (max-width: 599px) {
.container {
width: 100%;
}
}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]) {
font-family: inherit;
padding: .8rem 1rem;
border-radius: 4px;
border: 1px solid var(--color-lightGrey);
font-size: 1em;
-webkit-transition: all .2s ease;
transition: all .2s ease;
display: block;
width: 100%;
}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus {
outline: none;
border-color: var(--color-primary);
-webkit-box-shadow: 0 0 1px var(--color-primary);
box-shadow: 0 0 1px var(--color-primary);
}
[type=checkbox] {
width: 1.6rem;
height: 1.6rem;
}
[type=submit] {
padding: 1rem 2.5rem;
color: var(--color-darkGrey);
background: var(--color-lightGrey);
border-radius: 4px;
border: 1px solid transparent;
font-size: var(--font-size);
line-height: 1;
text-align: center;
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease;
text-decoration: none;
-webkit-transform: scale(1);
transform: scale(1);
display: inline-block;
cursor: pointer;
}
[type=submit]:hover {
opacity: .8;
}
[type=submit]:active {
-webkit-transform: scale(.98);
transform: scale(.98);
}
input:disabled,
input:disabled:hover {
opacity: .4;
cursor: not-allowed;
}
[type=submit] {
color: #fff;
z-index: 1;
background-color: #000;
background-color: var(--color-primary);
}
::-webkit-input-placeholder {
color: #bdbfc4;
}
::-moz-placeholder {
color: #bdbfc4;
}
:-ms-input-placeholder {
color: #bdbfc4;
}
::-ms-input-placeholder {
color: #bdbfc4;
}
::placeholder {
color: #bdbfc4;
}
.h2 {
font-weight: 500;
margin: .35em 0 .7em;
}
.h2 {
font-size: 1.75em;
}
:root{--bg-color:#fff;--bg-secondary-color:#f3f3f6;--color-primary:#14854f;--color-lightGrey:#d2d6dd;--color-grey:#747681;--color-darkGrey:#3f4144;--color-error:#d43939;--color-success:#28bd14;--grid-maxWidth:120rem;--grid-gutter:2rem;--font-size:1.6rem;--font-color:#333;--font-family-sans:-apple-system,BlinkMacSystemFont,Avenir,"Avenir Next","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--font-family-mono:monaco,"Consolas","Lucida Console",monospace;}@media (prefers-color-scheme: dark){:root{--bg-color:#000;--bg-secondary-color:#262626;--color-primary:#17c16f;--color-grey:#bbb;--color-darkGrey:#888;--color-error:#ea4f4f;--font-color:#f5f5f5;}input[type="text"]{background-color: var(--color-lightGrey);}}html{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:62.5%;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit;}body{background-color:var(--bg-color);line-height:1.6;font-size:var(--font-size);color:var(--font-color);font-family:Segoe UI,Helvetica Neue,sans-serif;font-family:var(--font-family-sans);margin:0;padding:0;}h1{font-weight:500;margin:.35em 0 .7em;}h1{font-size:2em;}p{margin-top:0;}dl dt{font-weight:700;}hr{background-color:var(--color-lightGrey);height:1px;margin:1rem 0;}hr{border:none;}code{font-family:var(--font-family-mono);}code{font-size:90%;white-space:pre-wrap;border-radius:4px;padding:.2em .4em;color:var(--color-error);}code{background-color:var(--bg-secondary-color);}.container{max-width:var(--grid-maxWidth);margin:0 auto;width:96%;padding:0 calc(var(--grid-gutter)/2);}@media screen and (max-width:599px){.container{width:100%;}}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]){font-family:inherit;padding:.8rem 1rem;border-radius:4px;border:1px solid var(--color-lightGrey);font-size:1em;-webkit-transition:all .2s ease;transition:all .2s ease;display:block;width:100%;}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus{outline:none;border-color:var(--color-primary);-webkit-box-shadow:0 0 1px var(--color-primary);box-shadow:0 0 1px var(--color-primary);}[type=checkbox]{width:1.6rem;height:1.6rem;}[type=submit]{padding:1rem 2.5rem;color:var(--color-darkGrey);background:var(--color-lightGrey);border-radius:4px;border:1px solid transparent;font-size:var(--font-size);line-height:1;text-align:center;-webkit-transition:opacity .2s ease;transition:opacity .2s ease;text-decoration:none;-webkit-transform:scale(1);transform:scale(1);display:inline-block;cursor:pointer;}[type=submit]:hover{opacity:.8;}[type=submit]:active{-webkit-transform:scale(.98);transform:scale(.98);}input:disabled,input:disabled:hover{opacity:.4;cursor:not-allowed;}[type=submit]{color:#fff;z-index:1;background-color:#000;background-color:var(--color-primary);}::-webkit-input-placeholder{color:#bdbfc4;}::-moz-placeholder{color:#bdbfc4;}:-ms-input-placeholder{color:#bdbfc4;}::-ms-input-placeholder{color:#bdbfc4;}::placeholder{color:#bdbfc4;}.h2{font-weight:500;margin:.35em 0 .7em;}.h2{font-size:1.75em;}
......@@ -71,18 +71,7 @@
<meta property="og:description" content="<?php echo $description ?>">
<meta property="og:url" content="https://iplookup.framasoft.org">
<meta property="og:image" content="https://iplookup.framasoft.org/img/icon.png">
<style>
body {
max-width: 640px;
margin: 10px auto 0 auto;
}
input {
max-width: 640px;
}
form {
line-height: 2em;
}
</style>
<link rel="stylesheet" href="css/iplookup.min.css">
</head>
<body>
<div class="container">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment