Dark was the night

Vu que de plus en plus de forums ont un channel discord, j'ai intégré au QEEL un bouton pour faire un lien sympa vers votre channel !

phpBB2

Dans votre panneau d'administration, Affichage > Templates > Général > index_body, trouvez le code suivant :

Code:

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <td class="catHead" colspan="2" height="28">
 <!-- BEGIN switch_viewonline_link -->
 <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
 <!-- END switch_viewonline_link -->

 <!-- BEGIN switch_viewonline_nolink -->
 <span class="cattitle">{L_WHO_IS_ONLINE}</span>
 <!-- END switch_viewonline_nolink -->
 </td>
 </tr>
 <tr>
 <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
 <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
 {TOTAL_USERS}<br />
 {NEWEST_USER}</span></td>
 </tr>
 <tr>
 <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
 {RECORD_USERS}<br />
 <br />
 {LOGGED_IN_USER_LIST}</span></td>
 </tr>
 {L_CONNECTED_MEMBERS}
 {L_WHOSBIRTHDAY_TODAY}
 {L_WHOSBIRTHDAY_WEEK}
 <tr>
 <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
 </tr>
 <!-- BEGIN switch_chatbox_activate -->
 <tr>
 <td class="row1">
 <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
 <!-- BEGIN switch_chatbox_popup -->
 <div id="chatbox_popup"></div>
 <script type="text/javascript">
 //<![CDATA[
 insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
 //]]>
 </script>
 <!-- END switch_chatbox_popup -->
 </span>
 </td>
 </tr>
 <!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->

Remplacez-le par :

Code:

<!-- BEGIN disable_viewonline -->
<div id="qeel">
<h2>
Qui est en ligne ?
</h2>

<div class="qeel-left">


<div class="qeel-stats">
<div><i class="fas fa-users"></i>{TOTAL_USERS}</div>
<div><i class="fas fa-pencil-alt"></i>{TOTAL_POSTS}</div>
</div>

<div class="qeel-last-24">
<div class="qeel-online-content">
  <table>{L_CONNECTED_MEMBERS}</table>
</div>
<h3>Dernières 24h</h3>
</div>
</div>

<div class="qeel-online">
<div class="qeel-online-stats">
{TOTAL_USERS_ONLINE}
</div>
<div class="qeel-online-content qeel-membre-connectes">
{LOGGED_IN_USER_LIST}
</div>
<h3>Actuellement en ligne</h3>
</div>

<div class="qeel-right">
<div>
<div class="qeel-welcome">
<h3>Bienvenue à</h3>
{NEWEST_USER}
</div>
<div class="qeel-discord">
<a href="" target="_blank"><i class="fab fa-discord"></i><div>
Rejoindre notre <b>Discord</b>
</div></a>
</div>

</div>

<div class="qeel-links">
<a href="{U_TODAY_POSTERS}"><i class="far fa-star"></i><div>
Top 20 des posteurs du jour
</div></a>
<a href="/?mode=delete_cookies"><i class="fas fa-hourglass-start"></i><div>
Supprimer les cookies du forum
</div></a>
<a href="{U_OVERALL_POSTERS}"><i class="fas fa-star"></i><div>
Top 20 des posteurs du forum
</div></a>
<a href="{U_TODAY_ACTIVE}"><i class="far fa-file"></i><div>
Sujets actifs du jour
</div></a>
</div>

</div>

</div>
<script>
  $('.qeel-stats').html($('.qeel-stats').html().replace(/Nous avons|membre enregistré|membres enregistrés|Nos membres ont posté un total de |messages|message/ig, ''));
  $('.qeel-last-24').html($('.qeel-last-24').html().replace("Membres connectés au cours des 24 dernières heures : ", ''));
  $('.qeel-online-stats').html($('.qeel-online-stats').html().replace("Il y a en tout ", ''));
  $('.qeel-membre-connectes').html($('.qeel-membre-connectes').html().replace("Utilisateurs enregistrés : ", ''));
  $('.qeel-welcome').html($('.qeel-welcome').html().replace("L'utilisateur enregistré le plus récent est ", ''));
  </script>
<!-- END disable_viewonline -->

Dans votre template overall_header, après l'ouverture de la balise head, collez le code suivant :

Code:

<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet">

Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :

Code:

/*PERSONNALISATION DU QEEL PAR AWFUL*/
/*Le bloc du QEEL*/
#qeel {
     width: 900px;
     margin: auto;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
         flex-wrap: wrap;
     background: #444;
     padding: 20px;
     box-sizing: border-box;
     font-family: "Roboto", sans-serif;
     color: #000;
}
 #qeel a, #qeel a:hover, #qeel a:active {
     text-decoration: none!important;
}
/*Titre du QEEL*/
 #qeel h2 {
     -webkit-box-flex: 100%;
         -ms-flex: 100%;
             flex: 100%;
     background: #1e1e1e;
     color: #fff;
     margin: -20px -20px 20px;
     font-family: "Roboto Condensed", sans-serif;
     text-transform: uppercase;
     font-size: 20px;
     padding: 10px;
}
/*Les titres des boîtes*/
 #qeel h3 {
     background: #1e1e1e;
     color: #fff;
     margin: 0;
     font-family: "Roboto Condensed", sans-serif;
     text-transform: uppercase;
     font-size: 11px;
     padding: 2px 8px;
     font-weight: 500;
}
 .qeel-left {
     height: 180px;
     width: 220px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     margin-right: 10px;
}
/*Blocs des stastistiques messages et membres*/
 .qeel-stats div {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     background: #303030;
     height: 30px;
     line-height: 30px;
     -webkit-box-pack: end;
         -ms-flex-pack: end;
             justify-content: flex-end;
     margin-bottom: 5px;
     font-family: "Roboto Condensed", sans-serif;
     padding-right: 10px;
     font-size: 11px;
}
 .qeel-stats div i {
     background: #1e1e1e;
     color: #ccc;
     width: 30px;
     line-height: 30px;
     text-align: center;
     margin-right: auto;
     font-size: 15px;
}
/*Bloc de la liste des connectés*/
 .qeel-online {
     width: 350px;
     height: 180px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     margin-right: 10px;
}
 .qeel-online .qeel-online-content {
     -webkit-box-flex: 1;
         -ms-flex: 1;
             flex: 1;
     padding-right: 10px;
     overflow: auto;
     border: 10px solid #303030;
     background: #303030;
     font-size: 10px;
}
/*Bloc statistique des connectés*/
 .qeel-online-stats {
     font-family: "Roboto Condensed", sans-serif;
     text-transform: uppercase;
     font-size: 11px;
     margin-bottom: 5px;
}
/*Bloc des connectés des dernières 24h*/
 .qeel-last-24 {
     background: #303030;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     overflow: auto;
     -webkit-box-flex: 1;
         -ms-flex: 1;
             flex: 1;
}
 .qeel-last-24 .qeel-online-content{
     overflow: auto;
     margin: 10px;
     padding-right: 5px;
     -webkit-box-flex: 1;
         -ms-flex: 1;
             flex: 1;
}
 .qeel-last-24 .qeel-online-content table {
     border-collapse: collapse;
}
 .qeel-last-24 .qeel-online-content td {
     padding: 0;
     background: transparent;
}
 .qeel-last-24 .qeel-online-content .gensmall {
     font-family: "Roboto", sans-serif;
}
 .qeel-right {
     -webkit-box-flex: 1;
         -ms-flex: 1;
             flex: 1;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
}
 .qeel-right > div:first-child {
     -webkit-box-flex: 1;
         -ms-flex: 1;
             flex: 1;
     margin-right: 10px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
             justify-content: space-between;
}
 .qeel-welcome h3 {
     margin:0 0 10px!important;
}
/*Bloc du lien vers Discord*/
 .qeel-discord a {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     font-family: "Roboto Condensed", sans-serif;
     background: #303030;
     color: #fff;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -webkit-transition: color 0.3s;
     transition: color 0.3s;
}
 .qeel-discord:hover a {
     color: #7b7b7b;
}
 .qeel-discord a i {
     font-size: 50px;
     margin: 10px;
     color: #111;
     -webkit-transition: color 0.3s;
     transition: color 0.3s;
}
 .qeel-discord:hover a i {
     color: #1e1e1e;
}
 .qeel-discord a div {
     text-transform: uppercase;
     font-size: 15.5px;
     line-height: 1;
}
 .qeel-discord a div b {
     display: block;
     font-size: 30px;
     color: #6e6e6e;
     -webkit-transition: color 0.3s;
     transition: color 0.3s;
}
 .qeel-discord:hover a div b {
     color: #1e1e1e;
}
/*Blocs des liens top 20 posteurs, supprimer cookies, etc*/
 .qeel-links {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-line-pack: start;
         align-content: flex-start;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
             justify-content: space-between;
}
 .qeel-links a {
     height: 40px;
     width: 40px;
     background: #1e1e1e;
     color: #ccc;
     text-align: center;
     font-size: 10px;
     box-sizing: border-box;
     border: 1px solid #1e1e1e;
     box-shadow: 3px 0 0 #303030 inset, -3px 0 0 #303030 inset, 0 3px 0 #303030 inset, 0 -3px 0 #303030 inset;
     position: relative;
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-transition: color 0.3s;
     transition: color 0.3s;
}
 .qeel-links a:hover {
     color: #4e4e4e;
}
 .qeel-links a div {
     position: absolute;
     right: 50px;
     white-space: nowrap;
     color: #1e1e1e;
     background: #fff;
     font-family: "Roboto Condensed", sans-serif;
     text-transform: uppercase;
     font-size: 9px;
     height: 10px;
     line-height: 10px;
     padding: 2px 5px;
     top: calc(50% - 7px);
     pointer-events: none;
     -webkit-transform: translate(30px,0);
             transform: translate(30px,0);
     opacity: 0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     -webkit-transition: all 0.2s;
     transition: all 0.2s;
}
 .qeel-links a div:after {
     content: "";
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 3px 0 3px 5px;
     border-color: transparent transparent transparent #fff;
     position: absolute;
     right: -5px;
     top: 3.5px;
}
 .qeel-links a:hover div {
     -webkit-transform: translate(0,0);
             transform: translate(0,0);
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}


phpBB3

Dans votre panneau d'administration, Affichage > Templates > Général > index_body, trouvez le code suivant :

Code:

<!-- BEGIN disable_viewonline -->

 <!-- BEGIN switch_viewonline_link -->
 <div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div>
 <!-- END switch_viewonline_link -->

 <!-- BEGIN switch_viewonline_nolink -->
 <div class="h3">{L_WHO_IS_ONLINE}</div>
 <!-- END switch_viewonline_nolink -->

<img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" />
<p>{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}

<br />
{LOGGED_IN_USER_LIST}

{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

<br />
<em>{LEGEND} : {GROUP_LEGEND}</em>

</p>
<div class="clear"></div>

 <!-- BEGIN switch_statistics_link -->
 <div class="h3"><a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a></div>
 <!-- END switch_statistics_link -->

 <!-- BEGIN switch_statistics_nolink -->
 <div class="h3">{L_STATISTICS}</div>
 <!-- END switch_statistics_nolink -->

<p class="page-bottom">
{TOTAL_POSTS}
</p>
<p class="page-bottom">
{TOTAL_USERS}
</p>
<p class="page-bottom">
{NEWEST_USER}
</p>
 <!-- BEGIN switch_chatbox_activate -->
 <div class="h3"><a href="{S_JOIN_CHAT}" target="ChatBox">{CHATBOX_NAME}</a></div>
 <div class="page-bottom">
 {TOTAL_CHATTERS_ONLINE} :&nbsp;
 {CHATTERS_LIST}<br />
 </div>
 <!-- BEGIN switch_chatbox_popup -->
 <div id="chatbox_popup"></div>
 <script type="text/javascript">
 insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
 </script>
 <!-- END switch_chatbox_popup -->
 <!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->

Replacez-le par :

Code:

!-- BEGIN disable_viewonline -->
<div id="qeel">
<h2>
Qui est en ligne ?
</h2>

<div class="qeel-left">


<div class="qeel-stats">
<div><i class="fas fa-users"></i>{TOTAL_USERS}</div>
<div><i class="fas fa-pencil-alt"></i>{TOTAL_POSTS}</div>
</div>

<div class="qeel-last-24">
<div class="qeel-online-content">
  <table>{L_CONNECTED_MEMBERS}</table>
</div>
<h3>Dernières 24h</h3>
</div>
</div>

<div class="qeel-online">
<div class="qeel-online-stats">
{TOTAL_USERS_ONLINE}
</div>
<div class="qeel-online-content qeel-membre-connectes">
{LOGGED_IN_USER_LIST}
</div>
<h3>Actuellement en ligne</h3>
</div>

<div class="qeel-right">
<div>
<div class="qeel-welcome">
<h3>Bienvenue à</h3>
{NEWEST_USER}
</div>
<div class="qeel-discord">
<a href="" target="_blank"><i class="fab fa-discord"></i><div>
Rejoindre notre <b>Discord</b>
</div></a>
</div>

</div>

<div class="qeel-links">
<a href="{U_TODAY_POSTERS}"><i class="far fa-star"></i><div>
Top 20 des posteurs du jour
</div></a>
<a href="/?mode=delete_cookies"><i class="fas fa-hourglass-start"></i><div>
Supprimer les cookies du forum
</div></a>
<a href="{U_OVERALL_POSTERS}"><i class="fas fa-star"></i><div>
Top 20 des posteurs du forum
</div></a>
<a href="{U_TODAY_ACTIVE}"><i class="far fa-file"></i><div>
Sujets actifs du jour
</div></a>
</div>

</div>

</div>
<script>
  $('.qeel-stats').html($('.qeel-stats').html().replace(/Nous avons|membre enregistré|membres enregistrés|Nos membres ont posté un total de |messages|message/ig, ''));
  $('.qeel-last-24').html($('.qeel-last-24').html().replace("Membres connectés au cours des 24 dernières heures : ", ''));
  $('.qeel-online-stats').html($('.qeel-online-stats').html().replace("Il y a en tout ", ''));
  $('.qeel-membre-connectes').html($('.qeel-membre-connectes').html().replace("Utilisateurs enregistrés : ", ''));
  $('.qeel-welcome').html($('.qeel-welcome').html().replace("L'utilisateur enregistré le plus récent est ", ''));
  </script>
<!-- END disable_viewonline -->

Dans votre template overall_header, après l'ouverture de la balise head, collez le code suivant :

Code:

<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet">

Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :

Code:

/*PERSONNALISATION DU QEEL PAR AWFUL*/
/*Le bloc du QEEL*/
 #qeel {
     width: 900px;
     margin: auto;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     background: #444;
     padding: 20px;
     box-sizing: border-box;
     font-family: "Roboto", sans-serif;
     color: #000;
}
 #qeel a, #qeel a:hover, #qeel a:active {
     text-decoration: none!important;
}
/*Titre du QEEL*/
 #qeel h2 {
     -webkit-box-flex: 100%;
     -ms-flex: 100%;
     flex: 100%;
     background: #1e1e1e;
     color: #fff;
     margin: -20px -20px 20px;
     font-family: "Roboto Condensed", sans-serif;
     text-transform: uppercase;
     font-size: 20px;
     padding: 10px;
}
/*Les titres des boîtes*/
 #qeel h3 {
     background: #1e1e1e;
     color: #fff;
     margin: 0;
     font-family: "Roboto Condensed", sans-serif;
     text-transform: uppercase;
     font-size: 11px;
     padding: 2px 8px;
     font-weight: 500;
     border: 0;
}
 .qeel-left {
     height: 180px;
     width: 220px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     margin-right: 10px;
}
/*Blocs des stastistiques messages et membres*/
 .qeel-stats div {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     background: #303030;
     height: 30px;
     line-height: 30px;
     -webkit-box-pack: end;
     -ms-flex-pack: end;
     justify-content: flex-end;
     margin-bottom: 5px;
     font-family: "Roboto Condensed", sans-serif;
     padding-right: 10px;
     font-size: 11px;
}
 .qeel-stats div i {
     background: #1e1e1e;
     color: #ccc;
     width: 30px;
     line-height: 30px;
     text-align: center;
     margin-right: auto;
     font-size: 15px;
}
/*Bloc de la liste des connectés*/
 .qeel-online {
     width: 350px;
     height: 180px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     margin-right: 10px;
}
 .qeel-online .qeel-online-content {
     -webkit-box-flex: 1;
     -ms-flex: 1;
     flex: 1;
     padding-right: 10px;
     overflow: auto;
     border: 10px solid #303030;
     background: #303030;
     font-size: 10px;
}
/*Bloc statistique des connectés*/
 .qeel-online-stats {
     font-family: "Roboto Condensed", sans-serif;
     text-transform: uppercase;
     font-size: 11px;
     margin-bottom: 5px;
}
/*Bloc des connectés des dernières 24h*/
 .qeel-last-24 {
     background: #303030;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     overflow: auto;
     -webkit-box-flex: 1;
     -ms-flex: 1;
     flex: 1;
}
 .qeel-last-24 .qeel-online-content{
     overflow: auto;
     margin: 10px;
     padding-right: 5px;
     -webkit-box-flex: 1;
     -ms-flex: 1;
     flex: 1;
}
 .qeel-right {
     -webkit-box-flex: 1;
     -ms-flex: 1;
     flex: 1;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
}
 .qeel-right > div:first-child {
     -webkit-box-flex: 1;
     -ms-flex: 1;
     flex: 1;
     margin-right: 10px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
}
 .qeel-welcome h3 {
     margin:0 0 10px!important;
}
/*Bloc du lien vers Discord*/
 .qeel-discord a {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     font-family: "Roboto Condensed", sans-serif;
     background: #303030;
     color: #fff;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-transition: color 0.3s;
     transition: color 0.3s;
}
 .qeel-discord:hover a {
     color: #7b7b7b;
}
 .qeel-discord a i {
     font-size: 50px;
     margin: 10px;
     color: #111;
     -webkit-transition: color 0.3s;
     transition: color 0.3s;
}
 .qeel-discord:hover a i {
     color: #1e1e1e;
}
 .qeel-discord a div {
     text-transform: uppercase;
     font-size: 15.5px;
     line-height: 1;
}
 .qeel-discord a div b {
     display: block;
     font-size: 30px;
     color: #6e6e6e;
     -webkit-transition: color 0.3s;
     transition: color 0.3s;
}
 .qeel-discord:hover a div b {
     color: #1e1e1e;
}
/*Blocs des liens top 20 posteurs, supprimer cookies, etc*/
 .qeel-links {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-line-pack: start;
     align-content: flex-start;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
}
 .qeel-links a {
     height: 40px;
     width: 40px;
     background: #1e1e1e;
     color: #ccc;
     font-size: 10px;
     text-align: center;
     box-sizing: border-box;
     border: 1px solid #1e1e1e;
     box-shadow: 3px 0 0 #303030 inset, -3px 0 0 #303030 inset, 0 3px 0 #303030 inset, 0 -3px 0 #303030 inset;
     position: relative;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-transition: color 0.3s;
     transition: color 0.3s;
}
 .qeel-links a:hover {
     color: #4e4e4e;
}
 .qeel-links a div {
     position: absolute;
     right: 50px;
     white-space: nowrap;
     color: #1e1e1e;
     background: #fff;
     font-family: "Roboto Condensed", sans-serif;
     text-transform: uppercase;
     font-size: 9px;
     height: 10px;
     line-height: 10px;
     padding: 2px 5px;
     top: calc(50% - 7px);
     pointer-events: none;
     -webkit-transform: translate(30px,0);
     transform: translate(30px,0);
     opacity: 0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     -webkit-transition: all 0.2s;
     transition: all 0.2s;
}
 .qeel-links a div:after {
     content: "";
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 3px 0 3px 5px;
     border-color: transparent transparent transparent #fff;
     position: absolute;
     right: -5px;
     top: 3.5px;
}
 .qeel-links a:hover div {
     -webkit-transform: translate(0,0);
     transform: translate(0,0);
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}