Forum Domoticz en français

Reprenez le contrôle de votre domotique
https://easydomoticz.com/forum/

Theme et Style domoticz

https://easydomoticz.com/forum/viewtopic.php?t=278

Page 2 sur 4

Re: Theme et Style domoticz

Publié : 21 févr. 2015, 15:32
par vil1driver
@fredspace,

une rapide correction, probablement perfectible...

Code : Tout sélectionner

/* ------- fonts */
@font-face {
	font-family: "OpenSans";
	font-style: normal;
	src: url('fonts/OpenSans.ttf');
	src: local('OpenSans'), url('fonts/OpenSans.ttf') format('truetype');
}
@font-face {
	font-family: "DroidSans";
	font-style: normal;
	src: url('fonts/DroidSans.ttf');
	src: local('DroidSans'), url('fonts/DroidSans.ttf') format('truetype');
}
@font-face {
	font-family: "Digit";
	font-style: normal;
	src: url('fonts/digit.ttf');
	src: local('Digit'), url('fonts/digit.ttf') format('truetype');
}
/* ------- body */
body {
/*background: #000 url(images/imgbg.jpg) repeat center top !important; */
background: black url(images/imgbg.jpg) no-repeat center center fixed ;
-webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover; /* version standardisée */
	
}
/* ------- text apres la version */
#appversion:after {
  content: " - as-gris v2";
}
/* ------- text info */
#status, #lastupdate, body table#itemtable tr td:first-child + td + td + td + td + td{color: #bbb;}
/* ------- text avant la valeur */
/* #status:before {
 content: "Val:  " !important;
 font-weight: normal;
} */
/* -------  text avant la date de mise a jour*/
body table#itemtablesmall tr td:first-child + td + td + td + td:before, 
body table#itemtablesmalldoubleicon tr td:first-child + td + td + td + td + td:before,
body table#itemtable tr td:first-child + td + td + td + td:before ,
body table#itemtablenotype tr td:first-child + td + td + td + td:before,
body table#itemtablenostatus tr td:first-child + td + td + td + td:before,
body table#itemtabletrippleicon tr td:first-child + td + td + td + td:before,
body table#itemtablesmalldoubleicon tr td:first-child + td + td + td + td:before,
body table#itemtablesmalltrippleicon tr td:first-child + td + td + td + td:before,
body table#mobileitem tr td:first-child + td + td + td + td:before{
 content: "Last: " !important;
}
/* -------  text avant type appareil*/
body table#itemtablesmall tr td:first-child + td + td + td + td:before, 
body table#itemtablesmalldoubleicon tr td:first-child + td + td + td + td + td:before,
body table#itemtable tr td:first-child + td + td + td + td:before ,
body table#itemtablenotype tr td:first-child + td + td + td + td:before,
body table#itemtablenostatus tr td:first-child + td + td + td + td:before,
body table#itemtabletrippleicon tr td:first-child + td + td + td + td:before,
body table#itemtablesmalldoubleicon tr td:first-child + td + td + td + td:before,
body table#itemtablesmalltrippleicon tr td:first-child + td + td + td + td:before,
body table#mobileitem tr td:first-child + td + td + td + td:before{
 content: "Type:"
}
/* -------  */ 
.navbar .nav {margin: 0 !important;}
/* -------  bouton haut de page*/
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
border-radius: 0px !important;
}
/* -------  bouton haut de page*/
#comboroom, #combofloorplan {
	font-family: Open Sans, sans-serif;
	width: 240px;
    height: 20px;
    overflow: hidden;
    background: #888;
    border: 0px solid #000;
	color: #eee;
}
/* -------  */
#room {
font-family: Open Sans, sans-serif;
}
/* ------- copyright */
copyright {
	display: none !important;
}
#copyright a {
	text-decoration: none;
	color: #666;
}

#copyright a:hover {
	text-decoration: none;
	color: #999;
}
/* ------- barre de menu */
.navbar-inverse .navbar-inner {
	padding: 10px !important;
  border: 0px;
	background-color: #111;
  background-image: -moz-linear-gradient(center top , #333, #000);
    -moz-box-shadow: 0px -5px 10px 3px #000;
    -webkit-box-shadow: 0px -5px 10px 3px #000;
    -o-box-shadow: 0px -5px 10px 3px #000;
    box-shadow: 0px -5px 20px 3px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=10);
}
/* -------  baniere haut de page */
.bannercontent {
	padding-top: 90px !important;
}
/* ------- bouton menu */
.navbar .nav li a {
    text-decoration: none;
    text-transform: none;
    border: 0px !important;
    border-radius: 0px;
    font-family: Open Sans,sans-serif;
    padding: 10px;
    font-weight: normal !important;
    text-align: center;
    color: #aaa;
    background-image: none;
	  background-color: #555;
    background-image: -moz-linear-gradient(center top , #444, #050505);
}
.navbar .nav li:hover a:hover {
    color: #FFF;
    background-color: #444 !important;
    background-image: none;
}
.navbar .nav .current_page_item > a {
	  border-radius: 0px;
    color: #fff;
    background-color: #444;
    background-image: -moz-linear-gradient(center top , #999, #050505);
}
/* ------- menu deroulant */
.navbar .nav .dropdown-menu {
    border: 0px !important;
    font-family: Open Sans,sans-serif;
    padding: 5px;
    border-radius: 0px;
    background-color: #555;
    background-image: none;
    background-image: -moz-linear-gradient(center top , #555, #050505);
}
/* ------- bouton menu */
.navbar .nav li a:hover {
	background-color: #999 !important;
	background-image: none !important;
}
/* -------  */
#timesun , #room, .room{
    background-color: transparent;
	color: #999 !important;
    float: left !important;
    padding: 5px !important;
    margin-left: -7px !important;
    margin-top: -29px !important;
   /* z-index: 1031;
    position: fixed;*/
    border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-color: transparent;
	font-size: 10px;
	/* display: none; */
}
/* ------- couleur titre (domoticz) */
	.brand h1{
	color: #666;
}
/* ------- version */
.brand h2{
	padding:0px !important; 	width: 200px; font-size:12px; 
	background-color: transparent;
  color: #555;
	border-bottom-left-radius: 0px;
    -moz-box-shadow:inset 0px 0px 0px 0px #000;
    -webkit-box-shadow:inset 0px 0px 0px 0px #000;
    -o-box-shadow:inset  0px 0px 0px 0px #000;
    box-shadow:inset  0px 0px 0px 0px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=0);
}
/* ------- barre de titre groupe*/
h2{
	margin-left: 0px;
	margin-top: 10px;
	margin-bottom: 3px;
	font-family: Open Sans,sans-serif;
	text-decoration: none;
	text-transform: none;
	font-size: 1.2em;
	font-weight: 200;
	color: #fff;
	background-color: #1a1a1a;
	padding: 5px;
	padding-left: 15px;	
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
    -moz-box-shadow:inset 0px -5px 10px 3px #000;
    -webkit-box-shadow:inset 0px -5px 10px 3px #000;
    -o-box-shadow:inset  0px -5px 10px 3px #000;
    box-shadow:inset  0px -5px 10px 3px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=10);
}

/* ------- bouton haut de page */
.btnstyle, .btnstylerev {
    display: inline-block;
    height: 2.0em;
    margin-top: 0px;
    padding: 0px 10px 0px 10px;
	  /*background: #555 url(images/imgbg.jpg) repeat !important;*/
    background-image: none;
		background-color: #555;
    border-radius: 0px;
    line-height: 2.0em;
    text-decoration: none;
    text-transform: none;
    font-size: 1em;
    color: #999;
    outline: medium none;
    cursor: pointer;
    overflow: hidden;
    -moz-box-shadow:inset 0px 0px 10px 0px #000;
    -webkit-box-shadow:inset 0px 0px 10px 0px #000;
    -o-box-shadow:inset  0px 0px 10px 0px #000;
    box-shadow:inset  0px 0px 10px 0px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=10);
}
.btnstyle:hover, .btnstylerev:hover {
	color: #ccc;
  background-image: none;
  background-color: #444;
}
/* ------- cellule appareil */
body table#itemtablesmall tbody tr,
body table#itemtablesmalldoubleicon tbody tr,
body table#itemtable tbody tr,
body table#itemtablenotype tbody tr,
body table#itemtablenostatus tbody tr,
body table#itemtabletrippleicon tbody tr,
body table#itemtabledoubleicon tbody tr,
body table#itemtablesmalldoubleicon tbody tr,
body table#itemtablesmalltrippleicon tbody tr,
body table#mobileitem tbody tr,
body table#itemtablesmall tbody tr:hover,
body table#itemtablesmalldoubleicon tbody tr:hover,
body table#itemtable tbody tr:hover,
body table#itemtablenotype tbody tr:hover,
body table#itemtablenostatus tbody tr:hover,
body table#itemtabletrippleicon tbody tr:hover,
body table#itemtabledoubleicon tbody tr:hover,
body table#itemtablesmalldoubleicon tbody tr:hover,
body table#itemtablesmalltrippleicon tbody tr:hover,
body table#mobileitem tbody tr:hover {
	  padding-bottom: 10px !important;
    background-color: #333 !important;
    border-radius: 5px;
    -moz-box-shadow:inset 0px 0px 10px 0px #000;
    -webkit-box-shadow:inset 0px 0px 10px 0px #000;
    -o-box-shadow:inset  0px 0px 10px 0px #000;
    box-shadow:inset  0px 0px 10px 0px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=10);
}

/* ------- titre celule */
body table#itemtablesmall tbody tr td:first-child,
body table#itemtablesmalldoubleicon tbody tr td:first-child ,
body table#itemtable tr td:first-child,
body table#itemtablenostatus tr td:first-child,
body table#itemtabledoubleicon tr td:first-child ,
body table#itemtablenotype tr td:first-child ,
body table#itemtabletrippleicon tr td:first-child ,
body table#itemtablesmalltrippleicon tr td:first-child ,
body table#mobileitem tr td:first-child{
    display: block;
    width: 100% !important;
    height: 20px !important;
    padding: 5px;    
    border-style: none;
    border-radius: 0px !important;
    color: #eee;
    background-color: #111 !important;;
	  font-family: Droid Sans,sans-serif !important;
	  margin-top: -5px;
	  margin-left: -5px;
}
/* ------- titre celule hover */
body table#itemtablesmall tbody tr:hover td:first-child,
body table#itemtablesmalldoubleicon tbody tr:hover td:first-child ,
body table#itemtable tr:hover td:first-child,
body table#itemtablenostatus tr:hover td:first-child,
body table#itemtabledoubleicon tr:hover td:first-child ,
body table#itemtablenotype tr:hover td:first-child ,
body table#itemtabletrippleicon tr:hover td:first-child ,
body table#itemtablesmalltrippleicon tr:hover td:first-child ,
body table#mobileitem tr:hover td:first-child{
    color: #aaccff;
    background-color: #111 !important;
}
/*-------- text valeur */
body table#itemtablesmall tr td:first-child + td,
body table#itemtablenotype tr td:first-child + td,
body table#itemtable tr td:first-child + td{
    float: right;
    margin: -35px 3px 0px 0px;
    font-size: 210%;
    font-weight: normal;
    white-space: nowrap;
    color: #fff;
    font-family: Opensans,Droid Sans,sans-serif !important;
	  background-color: #111 !important; 
    border-bottom-left-radius: 15px;
    padding-left:10px;
    padding-right:8px;
    min-width:130px;
    text-align: center;
    margin: -35px -5px 0px 0px;
    /* -moz-box-shadow: 0px 0px 10px 0px #000;
    -webkit-box-shadow: 0px 0px 10px 0px #000;
    -o-box-shadow: 0px 0px 10px 0px #000;
    box-shadow:  0px 0px 10px 0px #000; */
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=10);
}

/* ------- titre celule */
#name {
	background-color: #111 !important;
}

/* ------- petit bouton */
.btnsmall {
	background: #3b3b3b !important;
	color: #888;
	border-radius: 0px !important;
	font-family: Droid Sans,sans-serif !important;
}
/* ------- petit bouton */
.btnsmall:hover {
color: #eee;
border-radius: 0px !important;
background: #333 !important;	
}

/* Row Fix */
.bannav{
    margin-top: 15px;
width: 99.5% !important;
}
/* -------  couleur graphiques */
.highcharts-background{
stroke:#333;
}

*{
stop-color:#252525;
}

/* ------ mise en forme des sliders */
.dimslider {
	z-index:1;
	border-width: 0px;
	border-style: solide;
	border-color: #333 #333 #777 #333;
	width: 100%;
	margin-top: 0px;
	max-width: 70%;
	position: absolute;
	height: 13px;
	background-color: #8e8d8d;
	/*background: url('images/bg-track.png') repeat top left;*/
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0) inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

.dimslider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 25px;
	height: 25px;
	cursor: pointer;
	/*background: url('images/handle.png') no-repeat 50% 50%;*/
	font-weight: bold;
	color: #6495ED;
	border-style: none;
	outline: none;
	top: -6px;
	margin-left: -12px;
}
.dimslider .ui-slider-range {
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #8DD3F3 0%, #0E3957 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD3F3), color-stop(100%,#0E3957)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #8DD3F3 0%,#0E3957 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #8DD3F3 0%,#0E3957 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #8DD3F3 0%,#0E3957 100%); /* IE10+ */
	background: linear-gradient(top,  #8DD3F3 0%,#0E3957 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8DD3F3', endColorstr='#0E3957',GradientType=0 ); /* IE6-9 */
	position: absolute;
	border: 0;
	top: 0;
	height: 100%;
	border-radius: 25px;
}

.dimslider, .ui-slider-handle .ui-corner-all {
border-radius: 6px !important;
border-style: hidden;
}
.dimslider .ui-corner-all {
border-radius: 6px !important;
}

/* Mobile Dashboard items */
table.mobileitem {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
		border-style: none;
		background-color: #333;
    width: 100%;
}

.mobileitem {
    border: solid #030307 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #030307; 
    -moz-box-shadow: 0 1px 1px #030307; 
    box-shadow: 0 1px 1px #030307;         
		color: white;
		background-color: #333;
}

.mobileitem #name {
	background-color: #333 !important;
}
.mobileitem #name:hover {
	color: #ACF;
}
.mobileitem tr:hover {
    background: #333;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;     
}    
    
.mobileitem td, .mobileitem th {
    border-left: 0px solid #030307;
    border-top: 1px solid #030307;
    padding: 6px;
    text-align: left;    
}

.mobileitem th {
    background-color: #111;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#030307), to(#111));
    background-image: -webkit-linear-gradient(top, #030307, #111);
    background-image: -moz-linear-gradient(top, #030307, #111);
    background-image: -ms-linear-gradient(top, #030307, #111);
    background-image: -o-linear-gradient(top, #030307, #111);
    background-image: linear-gradient(top, #030307, #111);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    border-top: none;
		text-shadow: 0 1px 0 rgba(255,255,255,.5); 
		font-weight: bold;
}

.mobileitem td:first-child, .mobileitem th:first-child {
    border-left: none;
}

.mobileitem td:last-child {
  font-weight: bold;
  text-align: right;
}

.mobileitem .btn-mini {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 10pt;
  font-weight: bold;
}

.mobileitem th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

.mobileitem th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

.mobileitem th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.mobileitem tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}

.mobileitem tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

Re: Theme et Style domoticz

Publié : 21 févr. 2015, 21:40
par asem
j'avais pas que "vil1driver" avais déjà répondu :roll:

supprimé!

Merci

Re: Theme et Style domoticz

Publié : 22 févr. 2015, 23:04
par Fredspace
@ vil1driver : Effectivement c'est nettement mieux ;-) merci a toi
Et merci encore a asem

Re: Theme et Style domoticz

Publié : 26 mars 2015, 07:55
par gandalfand
Bonjour et merci pour ce style qui donne un coup de jeune à ce superbe logiciel.

Je rencontre quelque soucis avec ce thème

En version pc sous google chrome :

Dans l'onglet interrupteur on note un décalage entre les interrupteurs et les volets roulants (voir ci dessous)
desktop.png
desktop.png (90.34 Kio) Consulté 14540 fois
En version mobile sous chrome et android 4..4 kitkat

Les titres de chaque rubriques sont flou (ex scénario interrupteur etc.)
mobile.png
mobile.png (88.13 Kio) Consulté 14540 fois
Pouvez vous me dire comment on peut modifier la police et si on peut voir le décalage des volets roulants ??

Merci beaucoup a vous.

Re: Theme et Style domoticz

Publié : 26 mars 2015, 10:05
par vil1driver
salut,

ce n'est pas vraiment flou, c'est de l'ombre, mais j'avoue que c'est mieux sans :p --> suppression du shadow
pour les volets, je n'ai pas ce problème, ici ça débordait plutôt un peux sur la droite. --> longueur slider réduite
sinon depuis les dernières mises à jour, le status est affiché dans le titre de la case et parfois pas en blanc.. --> corrigé

il faut encore que je regarde comment remonter les sliders qui empiètent sur les boutons d'en dessous...

custom.css

Code : Tout sélectionner

 /* ------- fonts */
@font-face {
	font-family: "OpenSans";
	font-style: normal;
	src: url('fonts/OpenSans.ttf');
	src: local('OpenSans'), url('fonts/OpenSans.ttf') format('truetype');
}
@font-face {
	font-family: "DroidSans";
	font-style: normal;
	src: url('fonts/DroidSans.ttf');
	src: local('DroidSans'), url('fonts/DroidSans.ttf') format('truetype');
}
@font-face {
	font-family: "Digit";
	font-style: normal;
	src: url('fonts/digit.ttf');
	src: local('Digit'), url('fonts/digit.ttf') format('truetype');
}
/* ------- body */
body {
/*background: #000 url(images/imgbg.jpg) repeat center top !important; */
background: black url(images/imgbg.jpg) no-repeat center center fixed ;
-webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover; /* version standardisée */
	
}
/* ------- text apres la version */
#appversion:after {
  content: " - as-gris v2";
}
/* ------- text info */
#status, #lastupdate, body table#itemtable tr td:first-child + td + td + td + td + td{color: #bbb;}
/* ------- text avant la valeur */
/* #status:before {
 content: "Val:  " !important;
 font-weight: normal;
} */
/* -------  text avant la date de mise a jour*/
body table#itemtablesmall tr td:first-child + td + td + td + td:before, 
body table#itemtablesmalldoubleicon tr td:first-child + td + td + td + td + td:before,
body table#itemtable tr td:first-child + td + td + td + td:before ,
body table#itemtablenotype tr td:first-child + td + td + td + td:before,
body table#itemtablenostatus tr td:first-child + td + td + td + td:before,
body table#itemtabletrippleicon tr td:first-child + td + td + td + td:before,
body table#itemtablesmalldoubleicon tr td:first-child + td + td + td + td:before,
body table#itemtablesmalltrippleicon tr td:first-child + td + td + td + td:before,
body table#mobileitem tr td:first-child + td + td + td + td:before{
 content: "Last: " !important;
}
/* -------  text avant type appareil*/
body table#itemtablesmall tr td:first-child + td + td + td + td:before, 
body table#itemtablesmalldoubleicon tr td:first-child + td + td + td + td + td:before,
body table#itemtable tr td:first-child + td + td + td + td:before ,
body table#itemtablenotype tr td:first-child + td + td + td + td:before,
body table#itemtablenostatus tr td:first-child + td + td + td + td:before,
body table#itemtabletrippleicon tr td:first-child + td + td + td + td:before,
body table#itemtablesmalldoubleicon tr td:first-child + td + td + td + td:before,
body table#itemtablesmalltrippleicon tr td:first-child + td + td + td + td:before,
body table#mobileitem tr td:first-child + td + td + td + td:before{
 content: "Type:"
}
/* -------  */ 
.navbar .nav {margin: 0 !important;}
/* -------  bouton haut de page*/
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
border-radius: 0px !important;
}
/* -------  bouton haut de page*/
#comboroom, #combofloorplan {
	font-family: Open Sans, sans-serif;
	width: 240px;
    height: 20px;
    overflow: hidden;
    background: #888;
    border: 0px solid #000;
	color: #eee;
}
/* -------  */
#room {
font-family: Open Sans, sans-serif;
}
/* ------- copyright */
copyright {
	display: none !important;
}
#copyright a {
	text-decoration: none;
	color: #666;
}

#copyright a:hover {
	text-decoration: none;
	color: #999;
}
/* ------- barre de menu */
.navbar-inverse .navbar-inner {
	padding: 10px !important;
  border: 0px;
	background-color: #111;
  background-image: -moz-linear-gradient(center top , #333, #000);
    -moz-box-shadow: 0px -5px 10px 3px #000;
    -webkit-box-shadow: 0px -5px 10px 3px #000;
    -o-box-shadow: 0px -5px 10px 3px #000;
    box-shadow: 0px -5px 20px 3px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=10);
}
/* -------  baniere haut de page */
.bannercontent {
	padding-top: 90px !important;
}
/* ------- bouton menu */
.navbar .nav li a {
    text-decoration: none;
    text-transform: none;
    border: 0px !important;
    border-radius: 0px;
    font-family: Open Sans,sans-serif;
    padding: 10px;
    font-weight: normal !important;
    text-align: center;
    color: #aaa;
    background-image: none;
	  background-color: #555;
    background-image: -moz-linear-gradient(center top , #444, #050505);
}
.navbar .nav li:hover a:hover {
    color: #FFF;
    background-color: #444 !important;
    background-image: none;
}
.navbar .nav .current_page_item > a {
	  border-radius: 0px;
    color: #fff;
    background-color: #444;
    background-image: -moz-linear-gradient(center top , #999, #050505);
}
/* ------- menu deroulant */
.navbar .nav .dropdown-menu {
    border: 0px !important;
    font-family: Open Sans,sans-serif;
    padding: 5px;
    border-radius: 0px;
    background-color: #555;
    background-image: none;
    background-image: -moz-linear-gradient(center top , #555, #050505);
}
/* ------- bouton menu */
.navbar .nav li a:hover {
	background-color: #999 !important;
	background-image: none !important;
}
/* -------  */
#timesun , #room, .room{
    background-color: transparent;
	color: #999 !important;
    float: left !important;
    padding: 5px !important;
    margin-left: -7px !important;
    margin-top: -29px !important;
   /* z-index: 1031;
    position: fixed;*/
    border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-color: transparent;
	font-size: 10px;
	/* display: none; */
}
/* ------- couleur titre (domoticz) */
	.brand h1{
	color: #666;
}
/* ------- version */
.brand h2{
	padding:0px !important; 	width: 200px; font-size:12px; 
	background-color: transparent;
  color: #555;
	border-bottom-left-radius: 0px;
    -moz-box-shadow:inset 0px 0px 0px 0px #000;
    -webkit-box-shadow:inset 0px 0px 0px 0px #000;
    -o-box-shadow:inset  0px 0px 0px 0px #000;
    box-shadow:inset  0px 0px 0px 0px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=0);
}
/* ------- barre de titre groupe*/
h2{
	margin-left: 0px;
	margin-top: 10px;
	margin-bottom: 3px;
	font-family: Open Sans,sans-serif;
	text-decoration: none;
	text-transform: none;
	font-size: 1.2em;
	font-weight: 200;
	color: #fff;
	background-color: #1a1a1a;
	padding: 5px;
	padding-left: 15px;	
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
    -moz-box-shadow:inset 0px -5px 10px 3px #000;
    -webkit-box-shadow:inset 0px -5px 10px 3px #000;
    -o-box-shadow:inset  0px -5px 10px 3px #000;
    box-shadow:inset  0px -5px 10px 3px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=10);
}

/* ------- bouton haut de page */
.btnstyle, .btnstylerev {
    display: inline-block;
    height: 2.0em;
    margin-top: 0px;
    padding: 0px 10px 0px 10px;
	  /*background: #555 url(images/imgbg.jpg) repeat !important;*/
    background-image: none;
		background-color: #555;
    border-radius: 0px;
    line-height: 2.0em;
    text-decoration: none;
    text-transform: none;
    font-size: 1em;
    color: #999;
    outline: medium none;
    cursor: pointer;
    overflow: hidden;
    -moz-box-shadow:inset 0px 0px 10px 0px #000;
    -webkit-box-shadow:inset 0px 0px 10px 0px #000;
    -o-box-shadow:inset  0px 0px 10px 0px #000;
    box-shadow:inset  0px 0px 10px 0px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=10);
}
.btnstyle:hover, .btnstylerev:hover {
	color: #ccc;
  background-image: none;
  background-color: #444;
}
/* ------- cellule appareil */
body table#itemtablesmall tbody tr,
body table#itemtablesmalldoubleicon tbody tr,
body table#itemtable tbody tr,
body table#itemtablenotype tbody tr,
body table#itemtablenostatus tbody tr,
body table#itemtabletrippleicon tbody tr,
body table#itemtabledoubleicon tbody tr,
body table#itemtablesmalldoubleicon tbody tr,
body table#itemtablesmalltrippleicon tbody tr,
body table#mobileitem tbody tr,
body table#itemtablesmall tbody tr:hover,
body table#itemtablesmalldoubleicon tbody tr:hover,
body table#itemtable tbody tr:hover,
body table#itemtablenotype tbody tr:hover,
body table#itemtablenostatus tbody tr:hover,
body table#itemtabletrippleicon tbody tr:hover,
body table#itemtabledoubleicon tbody tr:hover,
body table#itemtablesmalldoubleicon tbody tr:hover,
body table#itemtablesmalltrippleicon tbody tr:hover,
body table#mobileitem tbody tr:hover {
	  padding-bottom: 10px !important;
    background-color: #333 !important;
    border-radius: 5px;
    -moz-box-shadow:inset 0px 0px 10px 0px #000;
    -webkit-box-shadow:inset 0px 0px 10px 0px #000;
    -o-box-shadow:inset  0px 0px 10px 0px #000;
    box-shadow:inset  0px 0px 10px 0px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=10);
}

/* ------- titre celule */
body table#itemtablesmall tbody tr td:first-child,
body table#itemtablesmalldoubleicon tbody tr td:first-child ,
body table#itemtable tr td:first-child,
body table#itemtablenostatus tr td:first-child,
body table#itemtabledoubleicon tr td:first-child ,
body table#itemtablenotype tr td:first-child ,
body table#itemtabletrippleicon tr td:first-child ,
body table#itemtablesmalltrippleicon tr td:first-child ,
body table#mobileitem tr td:first-child{
    display: block;
    width: 100% !important;
    height: 20px !important;
    padding: 5px;    
    border-style: none;
    border-radius: 0px !important;
    color: #eee;
    background-color: #111 !important;;
	  font-family: Droid Sans,sans-serif !important;
	  margin-top: -5px;
	  margin-left: -5px;
}
/* ------- titre celule hover */
body table#itemtablesmall tbody tr:hover td:first-child,
body table#itemtablesmalldoubleicon tbody tr:hover td:first-child ,
body table#itemtable tr:hover td:first-child,
body table#itemtablenostatus tr:hover td:first-child,
body table#itemtabledoubleicon tr:hover td:first-child ,
body table#itemtablenotype tr:hover td:first-child ,
body table#itemtabletrippleicon tr:hover td:first-child ,
body table#itemtablesmalltrippleicon tr:hover td:first-child ,
body table#mobileitem tr:hover td:first-child{
    color: #aaccff;
    background-color: #111 !important;
}
/*-------- text valeur */
body table#itemtablesmall tr td:first-child + td,
body table#itemtablenotype tr td:first-child + td,
body table#itemtable tr td:first-child + td,
body table#itemtablesmalldoubleicon tr td:first-child + td,
body table#itemtabledoubleicon tr td:first-child + td,
body table#itemtablenostatus tr td:first-child + td{
    float: right;
    margin: -35px 3px 0px 0px;
    font-size: 210%;
    font-weight: normal;
    white-space: nowrap;
    color: #fff;
    font-family: Opensans,Droid Sans,sans-serif !important;
	  background-color: #111 !important; 
    border-bottom-left-radius: 15px;
    padding-left:10px;
    padding-right:8px;
    min-width:130px;
    text-align: center;
    margin: -35px -5px 0px 0px;
    /* -moz-box-shadow: 0px 0px 10px 0px #000;
    -webkit-box-shadow: 0px 0px 10px 0px #000;
    -o-box-shadow: 0px 0px 10px 0px #000;
    box-shadow:  0px 0px 10px 0px #000; */
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=10);
}

/* ------- titre celule */
#name {
	background-color: #111 !important;
}

/* ------- petit bouton */
.btnsmall {
	background: #3b3b3b !important;
	color: #888;
	border-radius: 0px !important;
	font-family: Droid Sans,sans-serif !important;
}
/* ------- petit bouton */
.btnsmall:hover {
color: #eee;
border-radius: 0px !important;
background: #333 !important;	
}

/* Row Fix */
.bannav{
    margin-top: 15px;
width: 99.5% !important;
}
/* -------  couleur graphiques */
.highcharts-background{
stroke:#333;
}

*{
stop-color:#252525;
}

/* ------ mise en forme des sliders */
.dimslider {
	z-index:1;
	border-width: 0px;
	border-style: solide;
	border-color: #333 #333 #777 #333;
	width: 100%;
	margin-top: 0px;
	max-width: 59%;
	position: absolute;
	height: 13px;
	background-color: #8e8d8d;
	/*background: url('images/bg-track.png') repeat top left;*/
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0) inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

.dimslider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 25px;
	height: 25px;
	cursor: pointer;
	/*background: url('images/handle.png') no-repeat 50% 50%;*/
	font-weight: bold;
	color: #6495ED;
	border-style: none;
	outline: none;
	top: -6px;
	margin-left: -12px;
}
.dimslider .ui-slider-range {
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #8DD3F3 0%, #0E3957 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD3F3), color-stop(100%,#0E3957)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #8DD3F3 0%,#0E3957 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #8DD3F3 0%,#0E3957 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #8DD3F3 0%,#0E3957 100%); /* IE10+ */
	background: linear-gradient(top,  #8DD3F3 0%,#0E3957 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8DD3F3', endColorstr='#0E3957',GradientType=0 ); /* IE6-9 */
	position: absolute;
	border: 0;
	top: 0;
	height: 100%;
	border-radius: 25px;
}

.dimslider, .ui-slider-handle .ui-corner-all {
border-radius: 6px !important;
border-style: hidden;
}
.dimslider .ui-corner-all {
border-radius: 6px !important;
}

/* Mobile Dashboard items */
table.mobileitem {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
		border-style: none;
		background-color: #333;
    width: 100%;
}

.mobileitem {
    border: solid #030307 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #030307; 
    -moz-box-shadow: 0 1px 1px #030307; 
    box-shadow: 0 1px 1px #030307;         
		color: white;
		background-color: #333;
}

.mobileitem #name {
	background-color: #333 !important;
}
.mobileitem #name:hover {
	color: #ACF;
}
.mobileitem tr:hover {
    background: #333;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;     
}    
    
.mobileitem td, .mobileitem th {
    border-left: 0px solid #030307;
    border-top: 1px solid #030307;
    padding: 6px;
    text-align: left;    
}

.mobileitem th {
    background-color: #111;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#030307), to(#111));
    background-image: -webkit-linear-gradient(top, #030307, #111);
    background-image: -moz-linear-gradient(top, #030307, #111);
    background-image: -ms-linear-gradient(top, #030307, #111);
    background-image: -o-linear-gradient(top, #030307, #111);
    background-image: linear-gradient(top, #030307, #111);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    border-top: none;
		 text-shadow: 0 0px 0 black;  
		font-weight: bold;
}

.mobileitem td:first-child, .mobileitem th:first-child {
    border-left: none;
}

.mobileitem td:last-child {
  font-weight: bold;
  text-align: right;
}

.mobileitem .btn-mini {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 10pt;
  font-weight: bold;
}

.mobileitem th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

.mobileitem th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

.mobileitem th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.mobileitem tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}

.mobileitem tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}
ps: ne pas oublier de vider le cache

Re: Theme et Style domoticz

Publié : 28 mars 2015, 06:09
par gandalfand
merci bcp, j'ai eu un dev de domoticz qui me dit que l'icone des volets roulant est en 40 px au lieu de 48 ce qui provoque le decallage qui sera résolu dans la prochaine version.

Re: Theme et Style domoticz

Publié : 28 mars 2015, 09:51
par vil1driver
un dev en carton ? :-p

Les icons font bien 48px mais sont réduits à 40px dans l'interface, ok, mais,
si c'était la source du problème je le rencontrerais également, non ?
et tu l'aurais aussi avec le thème de base, est-ce le cas ?
le slider est aligné avec le texte au dessus, et ce texte n'est pas décalé chez toi.

as tu bien pris la dernière version du thème et as tu bien vidé le cache et données hors connection de ton navigateur ?

Re: Theme et Style domoticz

Publié : 30 mars 2015, 06:43
par gandalfand
Bonjour j'ai vidé le cache et le hors connexion et idem avec le theme de base.

Pour reproduire le probleme :

-Ajouter un volet roulant en percentage virtuel
- ajouter un interupteur virtuel

Aller dans la section interrupteur (le dashborad est ok)

utiliser le zoom plus ou moins du navigateur pour constater nettement la différence entre les 2 fenêtres
Sans titre.png
Sans titre.png (84.38 Kio) Consulté 14485 fois
Mais je ne sais pas si le dev a fis qq chose car rien dans le changelog depuis que jai fait signaler le probleme..

Re: Theme et Style domoticz

Publié : 30 mars 2015, 07:55
par vil1driver
Quel est ton navigateur ?

ici aussi le widget volet est moins haut (codé ainsi par domoticz et ne me gène pas vraiment),
mais je n'ai pas ce décalage du slider quelque soit le thème.

Re: Theme et Style domoticz

Publié : 03 avr. 2015, 06:13
par gandalfand
J'utilise google chrome et internet explorer 11 et j'ai le même problème de widget différent..
Fuseau horaire sur UTC+02:00
Page 2 sur 4

Développé par phpBB® Forum Software © phpBB Limited

Traduction française officielle © Qiaeru