ajustes responsive
This commit is contained in:
parent
528b8717f6
commit
f1901a26c9
|
|
@ -21,40 +21,45 @@
|
|||
<![endif]-->
|
||||
|
||||
<style>
|
||||
html, body{
|
||||
height:100%;
|
||||
}
|
||||
body{
|
||||
background: url(captiveportal-imagen_central.jpg)no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
textarea,input,select {
|
||||
background-color: #FDFBFB;
|
||||
border: 1px solid #BBBBBB;
|
||||
padding: 2px;
|
||||
margin: 1px;
|
||||
font-size: 14px;
|
||||
color: #808080;
|
||||
border-radius: 4px;
|
||||
}
|
||||
body {
|
||||
background: url(captiveportal-imagen_central.jpg)no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
td{
|
||||
font-weight: bolder;
|
||||
}
|
||||
textarea,
|
||||
input,
|
||||
select {
|
||||
background-color: #FDFBFB;
|
||||
border: 1px solid #ffffff;
|
||||
padding: 2px;
|
||||
margin: 1px;
|
||||
font-size: 14px;
|
||||
color: #808080;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
background: -webkit-linear-gradient(left, #8eb932, #c7a010) !important;
|
||||
border: none;
|
||||
padding: 5px 20px 5px 20px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border-radius: 30px;
|
||||
margin-top: 1em;
|
||||
}
|
||||
td {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
background: -webkit-linear-gradient(left, #8eb932, #c7a010) !important;
|
||||
border: none;
|
||||
padding: 5px 20px 5px 20px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border-radius: 30px;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.register {
|
||||
background: -webkit-linear-gradient(left, #7f9e3cd9, #e3a432ad);
|
||||
|
|
@ -182,10 +187,10 @@ input[type="submit"] {
|
|||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.boton_entrar{
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
.boton_entrar {
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.circle_button {
|
||||
box-shadow: 2px 4px 0 2px rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -221,38 +226,41 @@ input[type="submit"] {
|
|||
}
|
||||
|
||||
|
||||
@media screen and (max-width:990px) {
|
||||
.register .nav-tabs {
|
||||
width: 80%;
|
||||
}
|
||||
@media screen and (max-width:990px) {
|
||||
.register .nav-tabs {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:768px) {
|
||||
.register-left {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.register-left p {
|
||||
font-weight: lighter;
|
||||
padding: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.register-heading{
|
||||
font-size: 1em;
|
||||
margin-left: 25px;
|
||||
}
|
||||
@media screen and (max-width:768px) {
|
||||
.register-left {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.register-left p {
|
||||
font-weight: lighter;
|
||||
padding: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.register-heading {
|
||||
font-size: 1em;
|
||||
margin-left: -3px;
|
||||
margin-right: 3px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
}
|
||||
@media only screen and (max-width: 425px) {
|
||||
.register-right {
|
||||
border-top-left-radius: 0% 50%;
|
||||
border-bottom-left-radius: 0% 50%;
|
||||
background:#f8f9fad4
|
||||
}
|
||||
.register-left img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 425px) {
|
||||
.register-right {
|
||||
border-top-left-radius: 0% 50%;
|
||||
border-bottom-left-radius: 0% 50%;
|
||||
background: #f8f9fad4
|
||||
}
|
||||
.register-left img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -278,67 +286,70 @@ input[type="submit"] {
|
|||
<h3 class="register-heading">Entrar con Internet</h3>
|
||||
<div class="row register-form">
|
||||
<div class="col-md-12">
|
||||
<p> <strong>Si tienes un código de acceso, ingrésalo aquí:</strong></p>
|
||||
$(if chap-id)
|
||||
<form name="sendin" action="$(link-login-only)" method="post">
|
||||
<input type="hidden" name="username" />
|
||||
<input type="hidden" name="password" />
|
||||
<input type="hidden" name="dst" value="$(link-orig)" />
|
||||
<input type="hidden" name="popup" value="true" />
|
||||
</form>
|
||||
<p> <strong>Si tienes un código de acceso, ingrésalo aquí:</strong></p>
|
||||
$(if chap-id)
|
||||
<form name="sendin" action="$(link-login-only)" method="post">
|
||||
<input type="hidden" name="username" />
|
||||
<input type="hidden" name="password" />
|
||||
<input type="hidden" name="dst" value="$(link-orig)" />
|
||||
<input type="hidden" name="popup" value="true" />
|
||||
</form>
|
||||
|
||||
<script type="text/javascript" src="/md5.js"></script>
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
function doLogin() {
|
||||
document.sendin.username.value = document.login.username.value;
|
||||
document.sendin.password.value = hexMD5('$(chap-id)' + document.login.password.value + '$(chap-challenge)');
|
||||
document.sendin.submit();
|
||||
return false;
|
||||
}
|
||||
//-->
|
||||
</script>
|
||||
$(endif)
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center" valign="middle">
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center" valign="bottom" colspan="2">
|
||||
<form name="login" action="$(link-login-only)" method="post"
|
||||
$(if chap-id) onSubmit="return doLogin()" $(endif)>
|
||||
<input type="hidden" name="dst" value="$(link-orig)" />
|
||||
<input type="hidden" name="popup" value="true" />
|
||||
|
||||
<table width="100%">
|
||||
<tr><td align="right">Usuario: </td>
|
||||
<td><input style="width: 100%" name="username" type="text" value="$(username)"/></td>
|
||||
</tr>
|
||||
<tr><td align="right">Contraseña: </td>
|
||||
<td><input style="width: 100%" name="password" type="password"/></td>
|
||||
</tr>
|
||||
<tr><td> </td>
|
||||
<td><input type="submit" value="Ingresar" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
|
||||
$(if error)<br /><div style="color: #FF8080; font-size: 9px">$(error)</div>$(endif)
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<script type="text/javascript">
|
||||
<script type="text/javascript" src="/md5.js"></script>
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
document.login.username.focus();
|
||||
function doLogin() {
|
||||
document.sendin.username.value = document.login.username.value;
|
||||
document.sendin.password.value = hexMD5('$(chap-id)' + document.login.password.value + '$(chap-challenge)');
|
||||
document.sendin.submit();
|
||||
return false;
|
||||
}
|
||||
//-->
|
||||
</script>
|
||||
</script>
|
||||
$(endif)
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center" valign="middle">
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center" valign="bottom" colspan="2">
|
||||
<form name="login" action="$(link-login-only)" method="post" $(if chap-id) onSubmit="return doLogin()" $(endif)>
|
||||
<input type="hidden" name="dst" value="$(link-orig)" />
|
||||
<input type="hidden" name="popup" value="true" />
|
||||
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td align="right">Identificador: </td>
|
||||
<td><input style="width: 100%" name="username" type="text" value="$(username)" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">Clave: </td>
|
||||
<td><input style="width: 100%" name="password" type="password" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td><input type="submit" value="Ingresar" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
|
||||
$(if error)<br />
|
||||
<div style="color: #ff4b00; font-size: 1em">$(error)</div>$(endif)
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
document.login.username.focus();
|
||||
//-->
|
||||
</script>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
|
@ -346,7 +357,7 @@ input[type="submit"] {
|
|||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
|
||||
<h3 class="register-heading">Ver contenidos Locales sin Internet</h3>
|
||||
<h3 class="register-heading">Ver contenidos locales sin Internet</h3>
|
||||
<div class="row register-form">
|
||||
<div class="boton_entrar">
|
||||
<div class="container boton_entrar">
|
||||
|
|
|
|||
|
|
@ -1,144 +1,185 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<title>RedINC> estado</title>
|
||||
$(if refresh-timeout)
|
||||
<meta http-equiv="refresh" content="$(refresh-timeout-secs)">
|
||||
$(endif)
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<meta http-equiv="pragma" content="no-cache">
|
||||
<meta http-equiv="expires" content="-1">
|
||||
<style type="text/css">
|
||||
<!--
|
||||
textarea,input,select {
|
||||
background-color: #FDFBFB;
|
||||
border: 1px #BBBBBB solid;
|
||||
padding: 2px;
|
||||
margin: 1px;
|
||||
font-size: 14px;
|
||||
color: #808080;
|
||||
}
|
||||
<title>RedCoMani> estado</title>
|
||||
$(if refresh-timeout)
|
||||
<meta http-equiv="refresh" content="$(refresh-timeout-secs)"> $(endif)
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<meta http-equiv="pragma" content="no-cache">
|
||||
<meta http-equiv="expires" content="-1">
|
||||
<style type="text/css">
|
||||
< !-- textarea,
|
||||
input,
|
||||
select {
|
||||
background-color: #FDFBFB;
|
||||
border: 1px #ffffff solid;
|
||||
padding: 2px;
|
||||
margin: 1px;
|
||||
font-size: 14px;
|
||||
color: #808080;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 90%;
|
||||
}
|
||||
img {
|
||||
width: 50%;
|
||||
}
|
||||
table {
|
||||
width: 80%;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 2em !important;
|
||||
padding: 4px;
|
||||
}
|
||||
img {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
input[type="submit"]{
|
||||
background: -webkit-linear-gradient(left, #7F9E3C, #E4A42F) !important;;
|
||||
border: none;
|
||||
padding: 5px 20px 5px 20px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border-radius: 30px;
|
||||
margin-top: 1em;
|
||||
td {
|
||||
font-size: 2em !important;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
background: -webkit-linear-gradient(left, #7F9E3C, #E4A42F) !important;
|
||||
;
|
||||
border: none;
|
||||
padding: 5px 20px 5px 20px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border-radius: 30px;
|
||||
margin-top: 1em;
|
||||
font-size: 1em;
|
||||
width: 24%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
@media only screen and (max-width: 600px) {}
|
||||
|
||||
.tabula {
|
||||
|
||||
border-width: 1px;
|
||||
border-collapse: collapse;
|
||||
border-color: #c1c1c1;
|
||||
background-color: transparent;
|
||||
font-family: verdana;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
}
|
||||
body {
|
||||
color: #737373;
|
||||
font-size: 12px;
|
||||
font-family: verdana;
|
||||
}
|
||||
|
||||
.tabula{
|
||||
a,
|
||||
a:link,
|
||||
a:visited,
|
||||
a:active {
|
||||
color: #AAAAAA;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
border-width: 1px;
|
||||
border-collapse: collapse;
|
||||
border-color: #c1c1c1;
|
||||
background-color: transparent;
|
||||
font-family: verdana;
|
||||
font-size: 11px;
|
||||
}
|
||||
a:hover {
|
||||
border-bottom: 1px dotted #c1c1c1;
|
||||
color: #AAAAAA;
|
||||
}
|
||||
|
||||
body{ color: #737373; font-size: 12px; font-family: verdana; }
|
||||
img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 12px; }
|
||||
a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; }
|
||||
img {border: none;}
|
||||
td { font-size: 12px; padding: 4px;}
|
||||
td {
|
||||
font-size: 12px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
-->
|
||||
</style>
|
||||
<script language="JavaScript">
|
||||
<!--
|
||||
$(if advert-pending == 'yes')
|
||||
var popup = '';
|
||||
function focusAdvert() {
|
||||
if (window.focus) popup.focus();
|
||||
}
|
||||
function openAdvert() {
|
||||
popup = open('$(link-advert)', 'hotspot_advert', '');
|
||||
setTimeout("focusAdvert()", 1000);
|
||||
}
|
||||
$(endif)
|
||||
function openLogout() {
|
||||
if (window.name != 'hotspot_status') return true;
|
||||
open('$(link-logout)', 'hotspot_logout', 'toolbar=0,location=0,directories=0,status=0,menubars=0,resizable=1,width=280,height=250');
|
||||
window.close();
|
||||
return false;
|
||||
}
|
||||
//-->
|
||||
</script>
|
||||
-->
|
||||
</style>
|
||||
<script language="JavaScript">
|
||||
<!--
|
||||
$(
|
||||
if advert - pending == 'yes')
|
||||
var popup = '';
|
||||
|
||||
function focusAdvert() {
|
||||
if (window.focus) popup.focus();
|
||||
}
|
||||
|
||||
function openAdvert() {
|
||||
popup = open('$(link-advert)', 'hotspot_advert', '');
|
||||
setTimeout("focusAdvert()", 1000);
|
||||
}
|
||||
$(endif)
|
||||
|
||||
function openLogout() {
|
||||
if (window.name != 'hotspot_status') return true;
|
||||
open('$(link-logout)', 'hotspot_logout', 'toolbar=0,location=0,directories=0,status=0,menubars=0,resizable=1,width=280,height=250');
|
||||
window.close();
|
||||
return false;
|
||||
}
|
||||
//-->
|
||||
</script>
|
||||
</head>
|
||||
<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0"
|
||||
$(if advert-pending == 'yes')
|
||||
onLoad="openAdvert()"
|
||||
$(endif)
|
||||
>
|
||||
|
||||
<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0" $(if advert-pending=='yes' ) onLoad="openAdvert()" $(endif)>
|
||||
|
||||
|
||||
|
||||
|
||||
<table width="100%" height="100%">
|
||||
<table width="100%" height="100%">
|
||||
|
||||
|
||||
<tr>
|
||||
<td align="center" valign="middle">
|
||||
<img src="captiveportal-logoRedCoMani.png" alt="" width="15%" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center" valign="middle">
|
||||
<form action="$(link-logout)" name="logout" onSubmit="return openLogout()">
|
||||
<table border="1" class="tabula">
|
||||
$(if login-by == 'trial')
|
||||
<br><div style="text-align: center;">BienvenidX!</div><br>
|
||||
$(elif login-by != 'mac')
|
||||
<br><div style="text-align: center;">BienvenidX! $(username)!</div><br>
|
||||
$(endif)
|
||||
<tr><td align="right">IP address:</td><td>$(ip)</td></tr>
|
||||
<tr><td align="right">bytes subida/descarga:</td><td>$(bytes-in-nice) / $(bytes-out-nice)</td></tr>
|
||||
$(if session-time-left)
|
||||
<tr><td align="right">conectado / left:</td><td>$(uptime) / $(session-time-left)</td></tr>
|
||||
$(else)
|
||||
<tr><td align="right">conectado:</td><td>$(uptime)</td></tr>
|
||||
$(endif)
|
||||
$(if blocked == 'yes')
|
||||
<tr><td align="right">status:</td><td><div style="color: #FF8080">
|
||||
<a href="$(link-advert)" target="hotspot_advert">advertisement</a> required</div></td>
|
||||
$(elif refresh-timeout)
|
||||
<tr><td align="right">status refresh:</td><td>$(refresh-timeout)</td>
|
||||
$(endif)
|
||||
<tr>
|
||||
<td align="center" valign="middle">
|
||||
<img src="captiveportal-logoRedCoMani.png" alt="" width="15%" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center" valign="middle">
|
||||
<form action="$(link-logout)" name="logout" onSubmit="return openLogout()">
|
||||
<table border="1" class="tabula">
|
||||
$(if login-by == 'trial')
|
||||
<br>
|
||||
<div style="text-align: center;">BienvenidX!</div><br> $(elif login-by != 'mac')
|
||||
<br>
|
||||
<div style="text-align: center;">BienvenidX! $(username)!</div><br> $(endif)
|
||||
<tr>
|
||||
<td align="right">IP address:</td>
|
||||
<td>$(ip)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">bytes subida/descarga:</td>
|
||||
<td>$(bytes-in-nice) / $(bytes-out-nice)</td>
|
||||
</tr>
|
||||
$(if session-time-left)
|
||||
<tr>
|
||||
<td align="right">conectado / left:</td>
|
||||
<td>$(uptime) / $(session-time-left)</td>
|
||||
</tr>
|
||||
$(else)
|
||||
<tr>
|
||||
<td align="right">conectado:</td>
|
||||
<td>$(uptime)</td>
|
||||
</tr>
|
||||
$(endif) $(if blocked == 'yes')
|
||||
<tr>
|
||||
<td align="right">status:</td>
|
||||
<td>
|
||||
<div style="color: green">
|
||||
<a href="$(link-advert)" target="hotspot_advert">advertisement</a> required</div>
|
||||
</td>
|
||||
$(elif refresh-timeout)
|
||||
<tr>
|
||||
<td align="right">status refresh:</td>
|
||||
<td>$(refresh-timeout)</td>
|
||||
$(endif)
|
||||
|
||||
</table>
|
||||
$(if login-by-mac != 'yes')
|
||||
<br>
|
||||
<!-- user manager link. if user manager resides on other router, replace $(hostname) by its address
|
||||
</table>
|
||||
$(if login-by-mac != 'yes')
|
||||
<br>
|
||||
<!-- user manager link. if user manager resides on other router, replace $(hostname) by its address
|
||||
<button onclick="document.location='http://$(hostname)/user?subs='; return false;">status</button>
|
||||
<!-- end of user manager link -->
|
||||
<input type="submit" value="Salir">
|
||||
$(endif)
|
||||
</form>
|
||||
<input type="submit" value="Salir"> $(endif)
|
||||
</form>
|
||||
|
||||
</td>
|
||||
</table>
|
||||
</td>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -23,8 +23,9 @@ h3 {
|
|||
}
|
||||
|
||||
.btn-default {
|
||||
border-color: #cccccc2b;
|
||||
border-color: #cccccc2b;
|
||||
}
|
||||
|
||||
.boton_chat>.btn-lg {
|
||||
padding: 15px 30px;
|
||||
font-size: 20px;
|
||||
|
|
|
|||
|
|
@ -3,47 +3,48 @@
|
|||
padding: 0;
|
||||
}
|
||||
*/
|
||||
fieldset.fieldset-borde {
|
||||
|
||||
border: 2px solid #EDEDED !important;
|
||||
border-radius:3px;
|
||||
padding: 0 1.4em 1.4em 1.4em !important;
|
||||
margin: 0 0 1.5em 0 !important;
|
||||
-webkit-box-shadow: 0px 0px 0px 0px #000;
|
||||
box-shadow: 0px 0px 0px 0px #000;
|
||||
fieldset.fieldset-borde {
|
||||
border: 2px solid #EDEDED !important;
|
||||
border-radius: 3px;
|
||||
padding: 0 1.4em 1.4em 1.4em !important;
|
||||
margin: 0 0 1.5em 0 !important;
|
||||
-webkit-box-shadow: 0px 0px 0px 0px #000;
|
||||
box-shadow: 0px 0px 0px 0px #000;
|
||||
}
|
||||
|
||||
legend.legend-area {
|
||||
font-size: 1.2em !important;
|
||||
font-weight: bold !important;
|
||||
text-align: left !important;
|
||||
width: auto;
|
||||
padding: 0 10px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
legend.legend-area {
|
||||
font-size: 1.2em !important;
|
||||
font-weight: bold !important;
|
||||
text-align: left !important;
|
||||
width:auto;
|
||||
padding:0 10px;
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #222;
|
||||
font-family: Georgia, serif;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
background: #222;
|
||||
font-family: Georgia, serif;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#dates a {
|
||||
color: gray;
|
||||
text-decoration: none;
|
||||
-webkit-transition: 0.5s;
|
||||
-moz-transition: 0.5s;
|
||||
-o-transition: 0.5s;
|
||||
-ms-transition: 0.5s;
|
||||
transition: 0.5s;
|
||||
font-size: 12px;
|
||||
color: gray;
|
||||
text-decoration: none;
|
||||
-webkit-transition: 0.5s;
|
||||
-moz-transition: 0.5s;
|
||||
-o-transition: 0.5s;
|
||||
-ms-transition: 0.5s;
|
||||
transition: 0.5s;
|
||||
font-size: 12px;
|
||||
}
|
||||
#dates a:hover,
|
||||
#dates a.selected {
|
||||
color: red;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#dates a:hover, #dates a.selected {
|
||||
color: red;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/*
|
||||
h1,h2,h4,h5,h6 {
|
||||
text-align: center;
|
||||
|
|
@ -62,130 +63,142 @@ h1,h2,h4,h5,h6 {
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
*/
|
||||
#timeline {
|
||||
width: 95%;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
margin: 100px auto;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
#dates {
|
||||
width: 800px;
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
background: url('timeline/dot.gif') left 45px repeat-x;
|
||||
}
|
||||
#dates li {
|
||||
list-style: none;
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
background: url('timeline/biggerdot.png') center bottom no-repeat;
|
||||
}
|
||||
#dates a {
|
||||
line-height: 18px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
#dates .selected {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#issues {
|
||||
width: 800px;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#issues li {
|
||||
width: 900px;
|
||||
height: 500px;
|
||||
list-style: none;
|
||||
float: left;
|
||||
}
|
||||
#issues li.selected img {
|
||||
-webkit-transform: scale(1.1,1.1);
|
||||
-moz-transform: scale(1.1,1.1);
|
||||
-o-transform: scale(1.1,1.1);
|
||||
-ms-transform: scale(1.1,1.1);
|
||||
transform: scale(1.1,1.1);
|
||||
}
|
||||
#issues li img {
|
||||
float: left;
|
||||
margin: 10px 30px 10px 50px;
|
||||
background: transparent;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */
|
||||
zoom: 1;
|
||||
-webkit-transition: all 2s ease-in-out;
|
||||
-moz-transition: all 2s ease-in-out;
|
||||
-o-transition: all 2s ease-in-out;
|
||||
-ms-transition: all 2s ease-in-out;
|
||||
transition: all 2s ease-in-out;
|
||||
-webkit-transform: scale(0.7,0.7);
|
||||
-moz-transform: scale(0.7,0.7);
|
||||
-o-transform: scale(0.7,0.7);
|
||||
-ms-transform: scale(0.7,0.7);
|
||||
transform: scale(0.7,0.7);
|
||||
}
|
||||
#issues li h1 {
|
||||
|
||||
font-size: 48px;
|
||||
margin: 20px 0;
|
||||
color: red;
|
||||
/*text-shadow: #000 1px 1px 2px;*/
|
||||
}
|
||||
#issues li p {
|
||||
font-size: 14px;
|
||||
margin-right: 70px;
|
||||
font-weight: normal;
|
||||
line-height: 22px;
|
||||
/* text-shadow: #000 1px 1px 2px;*/
|
||||
}
|
||||
|
||||
#grad_left,
|
||||
#grad_right {
|
||||
width: 100px;
|
||||
height: 500px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
#grad_left {
|
||||
left: 0;
|
||||
/* background: url('timeline/grad_left.png') repeat-y;*/
|
||||
}
|
||||
#grad_right {
|
||||
right: 0;
|
||||
/* background: url('timeline/grad_right.png') repeat-y;*/
|
||||
}
|
||||
|
||||
#next,
|
||||
#prev {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-size: 70px;
|
||||
top: 170px;
|
||||
width: 22px;
|
||||
height: 38px;
|
||||
background-position: 0 0;
|
||||
background-repeat: no-repeat;
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#next:hover,
|
||||
#prev:hover {
|
||||
background-position: 0 -76px;
|
||||
}
|
||||
#next {
|
||||
right: 0;
|
||||
background-image: url('timeline/next.png');
|
||||
}
|
||||
#prev {
|
||||
left: 0;
|
||||
background-image: url('timeline/prev.png');
|
||||
}
|
||||
#next.disabled,
|
||||
#prev.disabled {
|
||||
opacity: 0.2;
|
||||
}
|
||||
#timeline {
|
||||
width: 95%;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
margin: 100px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#dates {
|
||||
width: 800px;
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
background: url('timeline/dot.gif') left 45px repeat-x;
|
||||
}
|
||||
|
||||
#dates li {
|
||||
list-style: none;
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
background: url('timeline/biggerdot.png') center bottom no-repeat;
|
||||
}
|
||||
|
||||
#dates a {
|
||||
line-height: 18px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#dates .selected {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#issues {
|
||||
width: 800px;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#issues li {
|
||||
width: 900px;
|
||||
height: 500px;
|
||||
list-style: none;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#issues li.selected img {
|
||||
-webkit-transform: scale(1.1, 1.1);
|
||||
-moz-transform: scale(1.1, 1.1);
|
||||
-o-transform: scale(1.1, 1.1);
|
||||
-ms-transform: scale(1.1, 1.1);
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
|
||||
#issues li img {
|
||||
float: left;
|
||||
margin: 10px 30px 10px 50px;
|
||||
background: transparent;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
|
||||
/* IE 8 */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);
|
||||
/* IE 6 & 7 */
|
||||
zoom: 1;
|
||||
-webkit-transition: all 2s ease-in-out;
|
||||
-moz-transition: all 2s ease-in-out;
|
||||
-o-transition: all 2s ease-in-out;
|
||||
-ms-transition: all 2s ease-in-out;
|
||||
transition: all 2s ease-in-out;
|
||||
-webkit-transform: scale(0.7, 0.7);
|
||||
-moz-transform: scale(0.7, 0.7);
|
||||
-o-transform: scale(0.7, 0.7);
|
||||
-ms-transform: scale(0.7, 0.7);
|
||||
transform: scale(0.7, 0.7);
|
||||
}
|
||||
|
||||
#issues li h1 {
|
||||
font-size: 48px;
|
||||
margin: 20px 0;
|
||||
color: red;
|
||||
/*text-shadow: #000 1px 1px 2px;*/
|
||||
}
|
||||
|
||||
#issues li p {
|
||||
font-size: 14px;
|
||||
margin-right: 70px;
|
||||
font-weight: normal;
|
||||
line-height: 22px;
|
||||
/* text-shadow: #000 1px 1px 2px;*/
|
||||
}
|
||||
|
||||
#grad_left, #grad_right {
|
||||
width: 100px;
|
||||
height: 500px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#grad_left {
|
||||
left: 0;
|
||||
/* background: url('timeline/grad_left.png') repeat-y;*/
|
||||
}
|
||||
|
||||
#grad_right {
|
||||
right: 0;
|
||||
/* background: url('timeline/grad_right.png') repeat-y;*/
|
||||
}
|
||||
|
||||
#next, #prev {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-size: 70px;
|
||||
top: 170px;
|
||||
width: 22px;
|
||||
height: 38px;
|
||||
background-position: 0 0;
|
||||
background-repeat: no-repeat;
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#next:hover, #prev:hover {
|
||||
background-position: 0 -76px;
|
||||
}
|
||||
|
||||
#next {
|
||||
right: 0;
|
||||
background-image: url('timeline/next.png');
|
||||
}
|
||||
|
||||
#prev {
|
||||
left: 0;
|
||||
background-image: url('timeline/prev.png');
|
||||
}
|
||||
|
||||
#next.disabled, #prev.disabled {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue