Commit 72f852cc authored by Thomas Citharel's avatar Thomas Citharel 🌲

Init

parents
OC.L10N.register(
"calendar",
{
"Share link": "Partager par lien public",
"Public access": "Accès public",
"Email link to person" : "Envoyer le lien par courriel",
"CalDAV address for clients": "Adresse CalDAV pour les clients",
"WebDAV address for subscriptions": "Adresse WebDAV pour les abonnements",
"Iframe to integrate": "Code pour intégrer une iframe",
"Publish URL": "URL publique",
"Skip simple event editor": "Passer l'éditeur simplifié d'événements"
},
"nplurals=2; plural=(n > 1);");
{
"translations": {
"Share link": "Partager par lien public",
"Public access": "Accès public",
"Email link to person" : "Envoyer le lien par courriel",
"CalDAV address for clients": "Adresse CalDAV pour les clients",
"WebDAV address for subscriptions": "Adresse WebDAV pour les abonnements",
"Iframe to integrate": "Code pour intégrer une iframe",
"Publish URL": "URL publique",
"Skip simple event editor": "Passer l'éditeur simplifié d'événements"
},
"pluralForm" :"nplurals=2; plural=(n > 1);"
}
\ No newline at end of file
#body-public, #body-user,#body-settings {
background: #ffffff url(../img/bg-logo.png) no-repeat 95% 95%;
font-family: "DejaVu Sans",Verdana,Geneva,sans-serif;
font-weight:400;
}
#body-login {
background:#eee;
font-family: "DejaVu Sans",Verdana,Geneva,sans-serif;
color: #333;
text-align:left;
font-size:14px;
font-weight:400;
height:auto;
}
#body-login p {
margin: 0px 0px 10px;
}
#preview {
margin:87px auto 0;
background:transparent;
}
footer[role="contentinfo"] {
display:none;
}
#body-login footer#framafooter {
display:block;
}
#framafooter h2,
#framafooter form {
display:none;
}
h1 {font-size:48px;}
h2 {font-size:30px;margin-bottom:10px;}
.h1, .h2, .h3, .h4, .h5 {
font-weight: bold;
color: #666;
}
#body-login header img { height:58px;} /* Ind!eHosters */
#body-login header a,
#body-login header a:hover,
#body-login header a:focus { text-decoration:none; }
.container.ombre {
margin-top: 72px;
margin-bottom: 30px;
padding: 20px 30px;
}
img.ombre {
width:90%;
margin:20px;
}
.lead {
font-size:21px;
}
#body-login input {
font-family: "DejaVu Sans",Verdana,Geneva,sans-serif;
}
/* Primary action button, use sparingly */
.primary, input[type="submit"].primary, input[type="button"].primary, button.primary, .button.primary {
color: #fff;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
background-color: #6A5687;
border-color: #6A5687;
}
.primary:hover, input[type="submit"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover,
.primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus {
color: #fff;
background-color: #635182;
border-color: #635182;
}
.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active,
.primary:disabled, input[type="submit"].primary:disabled, input[type="button"].primary:disabled, button.primary:disabled, .button.primary:disabled,
.primary:disabled:hover, input[type="submit"].primary:disabled:hover, input[type="button"].primary:disabled:hover, button.primary:disabled:hover, .button.primary:disabled:hover,
.primary:disabled:focus, input[type="submit"].primary:disabled:focus, input[type="button"].primary:disabled:focus, button.primary:disabled:focus, .button.primary:disabled:focus {
color: #fff;
background-color: #635182;
border-color: #635182;
}
/* Searchbox */
.searchbox input[type="search"] {
line-height: normal;
box-sizing: content-box;
}
/* CONTENT ------------------------------------------------------------------ */
#controls {
top: 87px;/* 45px; */
}
#controls .breadcrumb {
padding:0;
margin:0;
}
#content-wrapper {
padding-top: 87px; /* 45px; */
margin-top:-42px;
}
/* LOG IN & INSTALLATION ------------------------------------------------------------ */
#body-login form {
margin: 10px auto 20px;
padding: 5px;
background-color: #6A5687;
border-radius: 5px;
}
#body-login form p {
margin:0;
}
#body-login form img { display:none; }
#body-login form#alternative-logins {
background:none;
padding:0;
}
#body-login form[name="login"] {
width: 289px;
}
#body-login form[name="login"] #submit {
padding:5px;
font-size:14px;
font-weight:normal;
}
#body-login #submit.login {
position: absolute;
right: 0;
top: 0;
border: none;
background-color: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
opacity: .3;
}
#body-login #submit.login:hover,
#body-login #submit.login:focus {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
opacity: .7;
}
#body-login input[type="password"] {
padding-right: 40px;
box-sizing: border-box;
min-width: 269px;
}
#body-login .msg {
color: #333;
}
#body-login .msg a {
color: #0C5B7A;
text-decoration: underline dotted;
}
#presentation ul {
list-style: outside none disc;
margin-left: 30px;
}
#alternative-logins ul {
list-style: outside none disc;
margin: auto;
width: 50%;
}
#body-login form fieldset {
margin-bottom: 0px;
}
#body-login form fieldset.warning-info {
color:#fff;
}
#body-login input[type="submit"].icon-confirm {
width:42px;
height:42px;
}
/* Registration*/
#body-login form[action*="registration"] {
width: 395px;
margin-top: 20px;
}
#body-login form[action*="registration"] .msg {
color: #fff;
}
#body-login form[action*="registration"] #email,
#body-login form[action*="registration"] #username {
width: 329px !important;
}
#body-login form[action*="registration"] #password,
#body-login form[action*="registration"] #submit {
width: 375px !important
}
label[for="show"] {
display:none !important;
}
#body-login form[action="login"] .error,
#body-login form[action="login"] .update,
#body-login form[action*="registration"] .error,
#body-login form[action*="registration"] .update {
margin: 5px;
}
#body-login .warning, #body-login .update, #body-login .error {
background-color: rgba(0, 0, 0, 0.7);
}
/* Icons for username and password fields to better recognize them */
#adminlogin,
#adminpass,
input[name='adminpass-clone'],
#user,
#password,
input[name='password-clone'] {
margin:0 auto;
}
#body-login form input[type="checkbox"]+label {
padding: 0px;
vertical-align: top;
margin-top: 5px;
opacity:0.7;
color:#fff;
margin:0px;
}
.error-wide {
width: auto;
margin-left: 15px !important;
margin-right: 15px !important;
}
#body-login .remember-login-container {
margin:0 3px;
text-align:left;
}
#body-login .remember-login-container a.bg-primary {
font-weight: inherit;
font-size: 100%;
font-family: inherit;
text-decoration: none;
opacity: 0.7;
}
/* Alternative Logins */
#alternative-logins legend { display:none; }
#alternative-logins li { height:auto; display:block; }
/* Log in and install button */
#body-login input {
font-size: 18px;
}
#body-login input[type="text"],
#body-login input[type="password"] {
width: 249px;
}
#remember_login {
margin: 10px 5px 0 5px !important;
}
/* Sticky footer */
#body-login .wrapper {
margin: 20px auto;
}
#body-login footer, #body-login .push {
height: auto;
display:none;
}
/* HEADERS ------------------------------------------------------------------ */
#body-user #header,
#body-settings #header,
#body-public #header {
/*top: 42px;*/
z-index: 500;
background-color: #6A5687;
}
/* LOGO and APP NAME -------------------------------------------------------- */
header .logo {
background-image: url(../img/logo.png);
}
#header .logo-icon {
background-image: url(../img/logo-icon.png);
}
/* Framagenda Fixes --------------------------------------------------------- */
#navigation a span {
color: #FFF;
}
#navigation {
background: #6A5687;
}
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 595.275 311.111" xml:space="preserve" height="128" width="128" version="1.1" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 127.99999" xmlns:dc="http://purl.org/dc/elements/1.1/">
<rect rx="20" ry="20" height="128" width="128" y="-.0000015" x="0" fill="#1d2d44"/><path style="block-progression:tb;color:#000000;enable-background:accumulate;text-transform:none;text-indent:0" d="m58.332 29.124c-8.9317 0-16.148 7.216-16.148 16.148 0 3.6817 1.226 7.0702 3.2929 9.7836 4.4839-5.1898 11.102-8.4855 18.491-8.4855 3.615 0 7.0431 0.805 10.132 2.2164 0.25008-1.131 0.37996-2.3072 0.37996-3.5145 0-8.9317-7.216-16.148-16.148-16.148zm-21.087 7.472c-4.6514 0-8.3905 3.7708-8.3905 8.4222 0 1.506 0.38852 2.929 1.0765 4.1478 2.8068-1.5834 6.0519-2.5013 9.4987-2.5013 0.33264 0 0.65304 0.012 0.98154 0.032-0.0372-0.47152-0.06328-0.9438-0.06328-1.4248 0-2.5907 0.56269-5.0557 1.5515-7.2823-1.3313-0.89272-2.9263-1.3931-4.6544-1.3931zm39.831 5.7942c-0.34364 0-0.67487 0.042-1.0132 0.0632 0.14636 0.92272 0.25328 1.8544 0.25328 2.818 0 1.4994-0.19068 2.9463-0.53826 4.3377 4.0749 2.2551 7.459 5.6294 9.6887 9.7203 2.3126-1.204 4.8925-1.9695 7.6306-2.153-0.70568-8.2758-7.5618-14.786-16.021-14.786zm-13.108 6.0158c-12.498 0-22.607 10.108-22.607 22.607 0 12.498 10.108 22.607 22.607 22.607s22.607-10.109 22.607-22.607c0-12.499-10.109-22.607-22.607-22.607zm-24.538 0.0948c-9.6962 0-17.541 7.8447-17.541 17.541 0 5.708 2.7196 10.761 6.934 13.963 1.7767-3.4268 5.3452-5.7625 9.467-5.7625 0.49817 0 0.97633 0.0604 1.4565 0.1268-0.15072-1.0966-0.22164-2.2184-0.22164-3.3562 0-5.4397 1.7707-10.47 4.781-14.533-1.802-2.2548-3.0915-4.9641-3.6412-7.9156-0.40737-0.028-0.82022-0.0632-1.2348-0.0632zm54.966 10.449c-2.9442 0-5.7022 0.75168-8.1372 2.0264 1.3827 3.0627 2.153 6.4609 2.153 10.037 0 6.6958-2.6921 12.776-7.0607 17.193 3.2093 3.563 7.8657 5.7942 13.045 5.7942 9.6962 0 17.541-7.8446 17.541-17.541 0-9.6962-7.8447-17.509-17.541-17.509zm-74.216 2.3115c-8.933-0.001-16.18 7.183-16.18 16.115s7.2474 16.179 16.179 16.179c3.3996 0 6.5489-1.0592 9.1504-2.8496-1.075-1.6704-1.7098-3.6675-1.7098-5.7942 0-1.1038 0.16288-2.1643 0.47493-3.1662-4.8703-3.5197-8.0422-9.2473-8.0422-15.704 0-1.6406 0.2162-3.227 0.60159-4.7494-0.15996-0.004-0.3138-0.032-0.47494-0.032zm94.955 13.868c-0.47649 0-0.93756 0.0544-1.3931 0.1268 0.0252 0.40276 0.0316 0.79408 0.0316 1.2032 0 5.1501-2.0321 9.8246-5.3193 13.298 1.6172 1.8806 3.9926 3.0712 6.6808 3.0712 4.8964 0 8.8654-3.9373 8.8654-8.8338 0-4.8964-3.969-8.8654-8.8654-8.8654zm-76.844 0.94984c-4.8962 0-8.8338 3.9376-8.8338 8.8338s3.9376 8.8654 8.8338 8.8654c3.753 0 6.9386-2.3418 8.2322-5.6359-3.1565-3.2149-5.4251-7.3162-6.4274-11.873-0.58657-0.1212-1.1819-0.19-1.8048-0.19z" fill="#fff"/>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 595.275 311.111" xml:space="preserve" height="32" width="32" version="1.1" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 31.999997" xmlns:dc="http://purl.org/dc/elements/1.1/">
<rect rx="5" ry="5" height="32" width="32" y="-.0000052588" x="0" fill="#1d2d44"/><path style="block-progression:tb;color:#000000;enable-background:accumulate;text-transform:none;text-indent:0" d="m14.583 7.281c-2.2329 0-4.0369 1.804-4.0369 4.0369 0 0.92043 0.30649 1.7676 0.82322 2.4459 1.121-1.2974 2.7754-2.1214 4.6227-2.1214 0.90376 0 1.7608 0.20125 2.533 0.55409 0.06252-0.28275 0.09499-0.57681 0.09499-0.87863 0-2.2329-1.804-4.0369-4.0369-4.0369zm-5.2718 1.8681c-1.1629 0-2.0976 0.94269-2.0976 2.1055 0 0.3765 0.09713 0.73224 0.26913 1.0369 0.70171-0.39584 1.513-0.62533 2.3747-0.62533 0.08316 0 0.16326 0.003 0.24538 0.008-0.0093-0.11788-0.01582-0.23595-0.01582-0.3562 0-0.64768 0.14067-1.2639 0.38786-1.8206-0.33282-0.22318-0.73157-0.34828-1.1636-0.34828zm9.9578 1.4486c-0.08591 0-0.16872 0.0105-0.2533 0.0158 0.03659 0.23068 0.06332 0.46361 0.06332 0.70449 0 0.37486-0.04767 0.73658-0.13456 1.0844 1.0187 0.56378 1.8648 1.4073 2.4222 2.4301 0.57816-0.301 1.2231-0.49238 1.9077-0.53826-0.17642-2.0689-1.8904-3.6966-4.0053-3.6966zm-3.277 1.504c-3.1245 0-5.6517 2.527-5.6517 5.6517 0 3.1244 2.527 5.6517 5.6517 5.6517s5.6517-2.5273 5.6517-5.6517c0-3.1248-2.5272-5.6517-5.6517-5.6517zm-6.1346 0.0237c-2.4241 0-4.3852 1.9612-4.3852 4.3852 0 1.427 0.67991 2.6902 1.7335 3.4908 0.44418-0.85669 1.3363-1.4406 2.3668-1.4406 0.12454 0 0.24408 0.0151 0.36412 0.0317-0.03768-0.27414-0.05541-0.55461-0.05541-0.83905 0-1.3599 0.44267-2.6175 1.1952-3.6332-0.45049-0.56371-0.77288-1.241-0.91029-1.9789-0.10184-0.007-0.20505-0.0158-0.30871-0.0158zm13.741 2.6121c-0.73606 0-1.4255 0.18792-2.0343 0.5066 0.34567 0.76568 0.53826 1.6152 0.53826 2.5092 0 1.674-0.67302 3.1939-1.7652 4.2982 0.80233 0.89076 1.9664 1.4486 3.2612 1.4486 2.4241 0 4.3852-1.9612 4.3852-4.3852 0-2.4241-1.9612-4.3773-4.3852-4.3773zm-18.554 0.57788c-2.2321-0.001-4.044 1.795-4.044 4.028s1.8119 4.0449 4.0449 4.0449c0.84991 0 1.6372-0.2648 2.2876-0.7124-0.26875-0.41761-0.42744-0.91688-0.42744-1.4486 0-0.27596 0.04072-0.54107 0.11873-0.79156-1.2176-0.87992-2.0106-2.3118-2.0106-3.9261 0-0.41016 0.05405-0.80676 0.1504-1.1873-0.03999-0.001-0.07845-0.008-0.11874-0.008zm23.739 3.467c-0.11912 0-0.23439 0.0136-0.34828 0.0317 0.0063 0.10069 0.0079 0.19852 0.0079 0.30079 0 1.2875-0.50802 2.4561-1.3298 3.3245 0.4043 0.47015 0.99816 0.76781 1.6702 0.76781 1.2241 0 2.2164-0.98433 2.2164-2.2084s-0.99225-2.2164-2.2164-2.2164zm-19.211 0.23746c-1.224 0-2.2084 0.9844-2.2084 2.2084s0.98439 2.2164 2.2084 2.2164c0.93825 0 1.7346-0.58546 2.058-1.409-0.78913-0.80372-1.3563-1.8291-1.6069-2.9683-0.14664-0.0303-0.29548-0.0475-0.45119-0.0475z" fill="#fff"/>
</svg>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
jQuery('document').ready(function(){
jQuery('#import_bookmark #bm_import_submit, .bkm_hint #firstrun_setting').on('click', function(){
jQuery('#bm_import').trigger('click');
})
});
Le code de la nav est sous double licence,
Creative Commons BY-SA http://creativecommons.org/licenses/by-sa/2.0/
et GNU Free Documentation License http://www.gnu.org/copyleft/fdl.html
Bootstrap est sous licence MIT : https://github.com/twbs/bootstrap
jQuery est sous licence MIT : http://jquery.com/download/
Font-awesome est sous licence SIL OFL 1.1 : http://fortawesome.github.io/Font-Awesome/license/
fquery et fbootstrap sont juste des variantes des fichiers officiels
sur lesquel ont été remplacés :
'jQuery' → 'fQuery'
'$(' → 'f$('
'$.' → 'f$.'
[![](https://framagit.org/assets/favicon-075eba76312e8421991a0c1f89a89ee81678bcde72319dd3e8047e2a47cd3a42.ico)](https://framagit.org)
![English:](https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Flag_of_the_United_Kingdom.svg/20px-Flag_of_the_United_Kingdom.svg.png) **Framasoft uses GitLab** for the development of its free softwares. Our Github repositories are only mirrors.
If you want to work with us, **fork us on [framagit.org](https://framagit.org)**. (no registration needed, you can sign in with your Github account)
![Français :](https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Flag_of_France.svg/20px-Flag_of_France.svg.png) **Framasoft utilise GitLab** pour le développement de ses logiciels libres. Nos dépôts Github ne sont que des miroirs.
Si vous souhaitez travailler avec nous, **forkez-nous sur [framagit.org](https://framagit.org)**. (l'inscription n'est pas nécessaire, vous pouvez vous connecter avec votre compte Github)
* * *
Framanav
========
Barre de navigation commune aux sites du réseau
Installation
--------------------
1) Voir à la fin du fichier `nav.js` pour connaître les paramètres personnalisables à définir selon le site
2) Se placer en ligne de commande dans le dossier du *site* et importer les fichiers du dépôt
```bash
cd /home/site/www
git clone https://framagit.org/framasoft/framanav.git nav
```
3) a) Ajouter le script `nav.js` sous le `<body>` du site, là où la nav est requise :
```HTML
<script src="/nav/nav.js" type="text/javascript"></script>
```
Dans certain cas, le CMS utilisé compresse à la volée le javascript, il faut alors utiliser ce code là :
```HTML
<script type="text/javascript">
var script = document.createElement('script');
script.type = "text/javascript";
script.src="/nav/nav.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>
```
On peut zapper l'étape 2 en utilisant la nav d'un autre site configurée pour autoriser les requêtes Ajax cross-domain.
```HTML
<script src="https://framasoft.org/nav/nav.js" type="text/javascript"></script>
```
b) Ajouter jquery.min.js et bootstrap.min.js avant si nécessaire pour le bon fonctionnement du site
```HTML
<script src="/nav/lib/jquery/jquery.min.js" type="text/javascript"></script>
<script src="/nav/lib/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
```
pour utiliser ces versions de jQuery ou Bootstrap avec la nav, mettre dans le fichier de config :
```JavaScript
l$ = {
js: { j$: 'html', b$: 'html' }
}
```
Si jQuery existe déjà sur le site dans une version antérieure à la 1.9.1 et qu'il y a de nombreuses incompatibilités,
mettre dans le fichier de config :
```JavaScript
l$ = {
js: { j$: 'noConflict' }
}
```
Note : A priori, il ne devrait plus être nécessaire de préciser ces variables si la fonction `i$jQuery` joue bien son rôle de détection.
Note2 : pour désactiver les messages d'alerte, les fenêtre modale et le macaron :
```JavaScript
l$ = {
mute: true
}
```
Tester/Configurer
--------------------
### Config.js
Par défaut, la nav charge la config globale `c$` à la fin du fichier `nav.js` puis importe les ajustements selon le site sur lequel on se trouve `l$` dans le fichier `config.js`.
Il est possible de tester le bon fonctionnement d'une nouvelle config en production (notamment si on ajoute/modifie lourdement des scripts ou fonctions personnalisés) sans aucune incidence sur l'expérience des utilisateurs.
En ajoutant « Framatech » à l'UserAgent de son navigateur, la nav charge la section `agent` du fichier `config.js`.
La fonction i$() sert à détecter sur quelle page, domaine, sous-domaine, etc on se trouve pour affiner la config.
La fonction i$Lang('en') sert à détecter si la page qu'on visite est en anglais
(l'internationnalisation de la nav se fait en fonction de la langue officielle de la page pas en fonction des paramètre de navigation).
### Tests
De même, lorsqu'on modifie le cœur de la nav, une série de pages d'exemple dans le dossier `test` permettent de vérifier grossièrement que rien ne sera cassé.
### Débuggage
Dans la console doit apparaître sur chaque site : `✔ config.js`, `✔ jQuery`, `✔ Bootstrap` et éventuellement `✔ video.js`.
À la ligne config, il y a un `☀` si la nav est appelé juste après le body (chargement rapide) ou un `☁` sinon (chargement plus lent).
Ensuite, se suivent 3 numéros de version : celui de la nav, celui de jQuery fourni par la nav et celui de jQuery trouvé dans le code html de la page.
La ligne jQuery, indique le mode utilisé (noConflict ou pas), la version utilisée, et le mode de chargement (direct en HTML ou via une requête AJAX).
La ligne Bootstrap indique le mode chargement.
Il est possible d'obtenir des informations détaillées en consultant manuellement le contenu des variables :
* n${} = variables globales de la nav
* d${} = données localisées (texte, liens, icônes, couleurs, etc)
* h${} = code html utile généré
* c${} = config complète du site
* l${} = config ajustée du site par rapport à la config globale
Mises à jour planifiées
--------------------
Editer le crontab de l'utilisateur :
```bash
(sudo) crontab -u site -e
```
Et ajouter une ligne à la fin
```
00 4 * * * /home/site/www/nav/update.sh
```
Note : comme on utilise salt pour déployer les mises à jour, normalement ce n'est plus nécessaire.
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
*, *:before, *:after {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
#msg {
top:48px;
}
console.log('Framatech');
\ No newline at end of file
This diff is collapsed.
.ui-header {
margin-top:42px;
}
.ui-content header {
margin-bottom:40px;
}
*, *:before, *:after {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
#msg {
top:48px;
}
.leaflet-top {
top: 42px;
}
.storage-edit-enabled .storage-main-edit-toolbox {
top:42px;
}
.storage-edit-enabled .leaflet-top {
top: 90px;
}
.storage-edit-enabled #storage-ui-container {
top: 88px;
}
#storage-alert-container {
top: 42px;
}
#storage-tooltip-container {
top: 102px;
}
*, *:before, *:after {