Difference between revisions of "Template:Grenoble-Alpes/CSS"

 
(54 intermediate revisions by 2 users not shown)
Line 192: Line 192:
 
                 font-size: 10vw;
 
                 font-size: 10vw;
 
                 color: #ecf0f1;
 
                 color: #ecf0f1;
                 padding-top:25%;
+
                 padding-top:23%;
                 padding-bottom:25%;
+
                 padding-bottom:23%;
 
                 -webkit-animation: begin 4s linear;
 
                 -webkit-animation: begin 4s linear;
 
                 -moz-animation: begin 4s linear;
 
                 -moz-animation: begin 4s linear;
Line 244: Line 244:
 
               margin-right:5%;
 
               margin-right:5%;
 
               margin-left: 5%;
 
               margin-left: 5%;
 +
              padding-right: 1%;
 +
              padding-left: 1%;
 
               text-align: justify;
 
               text-align: justify;
 
               font-family:  'Open Sans', sans-serif;
 
               font-family:  'Open Sans', sans-serif;
               font-size: 13px;
+
               font-size: 15px;
 
               font-weight: lighter;
 
               font-weight: lighter;
 
                
 
                
 
             }
 
             }
 +
.couvlogogeo {
 +
            width:50%;
 +
            opacity:0.5;
 +
            transform:translate(3850%,-150%);
 +
            z-index:5;
 +
          }
 +
 +
/**************** TABLE *****************/
 +
 +
table
 +
{
 +
    border-collapse: collapse;
 +
}
 +
td, th
 +
{
 +
    border: 1px solid black;
 +
    font-family:  'Open Sans', sans-serif;
 +
    font-size: 15px;
 +
    font-weight: lighter;
 +
    text-align: center;
 +
}
 +
 +
caption
 +
{
 +
    font-family:  'Open Sans', sans-serif;
 +
    font-size: 15px;
 +
    font-weight: lighter;
 +
    margin-bottom: 2%;
 +
}
 +
 +
  
 
/* ****************************** CROIX POUR FERMER UNE POP UP ************************** */
 
/* ****************************** CROIX POUR FERMER UNE POP UP ************************** */
Line 290: Line 323:
  
  
 +
/* ********************************************** Geolocalisation *************************************************** */
 +
 +
/******************** POP UP GEOLOCALISATION ******************/
 +
.popup_geoloc
 +
        {
 +
            position: relative;
 +
            display: float;
 +
            cursor: pointer;
 +
            -webkit-user-select: none;
 +
            -moz-user-select: none;
 +
            -ms-user-select: none;
 +
            user-select: none;
 +
            z-index:2;
 +
            width:5%;
 +
        }
 +
 +
#Popup_geo
 +
        {
 +
        position:absolute;
 +
        padding: 10% 10% 10% 10%;
 +
        top: -200%;
 +
        left: 1520%;
 +
        width: 380%;
 +
        z-index: 2;
 +
        }
 +
 +
 +
.popup_geoloc .popuptext
 +
        {
 +
            visibility: hidden;
 +
            width: 20%;
 +
            background-color: #364A5E;
 +
            color: #fff;
 +
            text-align: justify;
 +
            border-radius: 2.5%;
 +
            padding: 10% 10% 10% 10%;
 +
            position: relative;
 +
            z-index:1;
 +
            font-family:  'Open Sans', sans-serif;
 +
            font-size: 0.95vw;
 +
            font-weight: lighter;
 +
 +
        }
 +
 +
.popup_geoloc .popuptext::after
 +
        {
 +
            content: "";
 +
            top: 100%;
 +
            left: 50%;
 +
            margin-left: -5px;
 +
            border-width: 5px;
 +
            border-style: solid;
 +
            border-color: #555 transparent transparent transparent;
 +
            z-index:1;
 +
        }
 +
 +
.popup_geoloc .show {
 +
            visibility: visible;
 +
            -webkit-animation: fadeIn 1s;
 +
            animation: fadeIn 1s;
 +
        }
 +
.popup_geoloc .hide {
 +
            visibility: hidden;
 +
            -webkit-animation: fadeIn 1s;
 +
            animation: fadeIn 1s;
 +
        }
 +
 +
@-webkit-keyframes fadeIn {
 +
            from {opacity: 0;}
 +
            to {opacity: 1;}
 +
        }
 +
@keyframes fadeIn {
 +
            from {opacity: 0;}
 +
            to {opacity:1 ;}
 +
        }
  
 
</style>
 
</style>
 +
 +
<script>
 +
            function Function_geo()
 +
            {
 +
            var popup = document.getElementById("Popup_geo");
 +
            popup.classList.toggle("show");
 +
            }
 +
 +
        </script>
 
</html>
 
</html>

Latest revision as of 08:42, 20 October 2017