ajustes responsive

This commit is contained in:
Hacky Purple 2019-04-25 22:19:06 -05:00
parent 528b8717f6
commit f1901a26c9
4 changed files with 464 additions and 398 deletions

View File

@ -21,10 +21,12 @@
<![endif]-->
<style>
html, body{
height:100%;
html,
body {
height: 100%;
}
body{
body {
background: url(captiveportal-imagen_central.jpg)no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
@ -32,21 +34,24 @@
background-size: cover;
}
textarea,input,select {
background-color: #FDFBFB;
border: 1px solid #BBBBBB;
padding: 2px;
margin: 1px;
font-size: 14px;
color: #808080;
border-radius: 4px;
}
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;
}
td{
td {
font-weight: bolder;
}
}
input[type="submit"] {
input[type="submit"] {
background: -webkit-linear-gradient(left, #8eb932, #c7a010) !important;
border: none;
padding: 5px 20px 5px 20px;
@ -54,7 +59,7 @@ input[type="submit"] {
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{
.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,14 +226,14 @@ input[type="submit"] {
}
@media screen and (max-width:990px) {
@media screen and (max-width:990px) {
.register .nav-tabs {
width: 80%;
width: 90%;
}
}
@media screen and (max-width:768px) {
@media screen and (max-width:768px) {
.register-left {
margin-top: 0px;
}
@ -237,22 +242,25 @@ input[type="submit"] {
padding: 0px;
margin-top: 0px;
}
.register-heading{
.register-heading {
font-size: 1em;
margin-left: 25px;
margin-left: -3px;
margin-right: 3px;
padding: 4px;
}
}
@media only screen and (max-width: 425px) {
}
@media only screen and (max-width: 425px) {
.register-right {
border-top-left-radius: 0% 50%;
border-bottom-left-radius: 0% 50%;
background:#f8f9fad4
background: #f8f9fad4
}
.register-left img {
width: 100%;
}
}
}
</style>
</head>
@ -306,19 +314,21 @@ input[type="submit"] {
<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)>
<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>
<td align="right">Identificador: </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>
<td align="right">Clave: </td>
<td><input style="width: 100%" name="password" type="password" /></td>
</tr>
<tr><td>&nbsp;</td>
<tr>
<td>&nbsp;</td>
<td><input type="submit" value="Ingresar" /></td>
</tr>
</table>
@ -329,7 +339,8 @@ input[type="submit"] {
</table>
$(if error)<br /><div style="color: #FF8080; font-size: 9px">$(error)</div>$(endif)
$(if error)<br />
<div style="color: #ff4b00; font-size: 1em">$(error)</div>$(endif)
</td>
</tr>
</table>
@ -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">

View File

@ -1,37 +1,42 @@
<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 {
<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 #BBBBBB solid;
border: 1px #ffffff solid;
padding: 2px;
margin: 1px;
font-size: 14px;
color: #808080;
}
margin-bottom: 6px;
}
table {
width: 90%;
}
img {
table {
width: 80%;
display: table-cell;
}
img {
width: 50%;
}
}
td {
td {
font-size: 2em !important;
padding: 4px;
}
}
input[type="submit"]{
background: -webkit-linear-gradient(left, #7F9E3C, #E4A42F) !important;;
input[type="submit"] {
background: -webkit-linear-gradient(left, #7F9E3C, #E4A42F) !important;
;
border: none;
padding: 5px 20px 5px 20px;
color: white;
@ -40,105 +45,141 @@ input[type="submit"]{
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')
-->
</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)
$(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>
//-->
</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>

View File

@ -25,6 +25,7 @@ h3 {
.btn-default {
border-color: #cccccc2b;
}
.boton_chat>.btn-lg {
padding: 15px 30px;
font-size: 20px;

View File

@ -3,24 +3,24 @@
padding: 0;
}
*/
fieldset.fieldset-borde {
fieldset.fieldset-borde {
border: 2px solid #EDEDED !important;
border-radius:3px;
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 {
legend.legend-area {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width:auto;
padding:0 10px;
border-bottom:none;
}
width: auto;
padding: 0 10px;
border-bottom: none;
}
body {
background: #222;
@ -39,11 +39,12 @@ body {
transition: 0.5s;
font-size: 12px;
}
#dates a:hover,
#dates a.selected {
#dates a:hover, #dates a.selected {
color: red;
font-size: 18px;
}
}
/*
h1,h2,h4,h5,h6 {
text-align: center;
@ -62,21 +63,23 @@ h1,h2,h4,h5,h6 {
margin-bottom: 20px;
}
*/
#timeline {
#timeline {
width: 95%;
height: 500px;
overflow: hidden;
margin: 100px auto;
position: relative;
}
}
#dates {
#dates {
width: 800px;
height: 60px;
overflow: hidden;
background: url('timeline/dot.gif') left 45px repeat-x;
}
#dates li {
}
#dates li {
list-style: none;
float: left;
width: 100px;
@ -84,84 +87,92 @@ h1,h2,h4,h5,h6 {
font-size: 24px;
text-align: center;
background: url('timeline/biggerdot.png') center bottom no-repeat;
}
#dates a {
}
#dates a {
line-height: 18px;
padding-bottom: 10px;
}
#dates .selected {
font-size: 18px;
}
}
#issues {
#dates .selected {
font-size: 18px;
}
#issues {
width: 800px;
height: 500px;
overflow: hidden;
}
#issues li {
}
#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 {
}
#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 */
-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 {
-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 {
}
#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 {
#grad_left, #grad_right {
width: 100px;
height: 500px;
position: absolute;
top: 0;
}
#grad_left {
}
#grad_left {
left: 0;
/* background: url('timeline/grad_left.png') repeat-y;*/
}
#grad_right {
}
#grad_right {
right: 0;
/* background: url('timeline/grad_right.png') repeat-y;*/
}
}
#next,
#prev {
#next, #prev {
position: absolute;
top: 0;
font-size: 70px;
@ -172,20 +183,22 @@ h1,h2,h4,h5,h6 {
background-repeat: no-repeat;
text-indent: -9999px;
overflow: hidden;
}
#next:hover,
#prev:hover {
}
#next:hover, #prev:hover {
background-position: 0 -76px;
}
#next {
}
#next {
right: 0;
background-image: url('timeline/next.png');
}
#prev {
}
#prev {
left: 0;
background-image: url('timeline/prev.png');
}
#next.disabled,
#prev.disabled {
}
#next.disabled, #prev.disabled {
opacity: 0.2;
}
}