:fullscreen CSS

by jpeter06

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="container">

<div id="info">
  //** Réglages MySQL - Votre hébergeur doit vous fournir ces informations. **// <br>
/** Nom de la base de données de WordPress. */</div>
<br>
  <code id="code">define('DB_NAME', 'wp-bs');</code>
  
  <button id="fullscreen" class="btn btn-info">Plus de détails &nbsp;&nbsp;<span class="glyphicon glyphicon-fullscreen"></span></button>
</div>

CSS

body, html
{
  background:whitesmoke;
  width:100vw;
  height:100vh;
}

#container
{
  margin:50px 20px;
}

#container button
{
  display:block;
  margin-top:20px;
}

#info
{
  display:none;
}

#container:-webkit-full-screen
{
  width:100%;
  height:100%;
  background:#444343;
  padding: 42px;
  margin:0;
}

#container:-moz-full-screen
{
  width:100vw;
  height:100vh;
  background:#444343;
}

#container:-ms-fullscreen
{
  width:100vw;
  height:100vh;
  background:#444343;
}

#container:fullscreen
{
  width:100vw;
  height:100vh;
  background:red;
}

#container:-webkit-full-screen #fullscreen
{
  display:none;
}

#container:-moz-full-screen #fullscreen
{
  display:none;
}

#container:-ms-fullscreen #fullscreen
{
  display:none;
}

#container:fullscreen #fullscreen
{
  display:none;
}

#container:-webkit-full-screen #code, #container:-webkit-full-screen #info
{
  font-size:4em;
}

#container:-moz-full-screen #code, #container:-moz-full-screen #info
{
  font-size:4em;
}

#container:-ms-fullscreen #code, #container:-ms-fullscreen #info
{
  font-size:4em;
}

#container:-moz-full-screen #info
{
  display:block;
  color:lightgrey;
  margin-bottom:20px;
}

#container:-ms-full-screen #info
{
  display:block;
  color:lightgrey;
  margin-bottom:20px;
}

#container:-webkit-full-screen #info
{
  display:block;
  color:lightgrey;
  margin-bottom:20px;
}

#container:fullscreen #info
{
  display:block;
  color:lightgrey;
  margin-bottom:20px;
}
#container:fullscreen #code, #container:fullscreen #info
{
  font-size:4em;
}

JavaScript

var button=document.getElementById("fullscreen");
var code=document.getElementById("code");
var container=document.getElementById("container");
button.onclick=function()
{
	if(container.requestFulScreen)
  	container.requestFullScreen();
  else if (container.mozRequestFullScreen)
  	container.mozRequestFullScreen();
  else if (container.webkitRequestFullScreen)
  	container.webkitRequestFullScreen();
}