Theme et Style domoticz

Venez nous montrer ici vos relookings de Domoticz. Thèmes, styles, custom pages ici c'est le coin du design,
vil1driver
Messages : 5097
Enregistré le : 30 janv. 2015, 11:07
Localisation : Rennes (35)

Re: Theme et Style domoticz

Message par vil1driver » 21 févr. 2015, 15:32

@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;
}



Disable adblock

This site is supported by ads and donations.
If you see this text you are blocking our ads.
Please consider a Donation to support the site.


asem
Messages : 34
Enregistré le : 16 févr. 2015, 00:15
Localisation : Bas Rhin (67)

Re: Theme et Style domoticz

Message par asem » 21 févr. 2015, 21:40

j'avais pas que "vil1driver" avais déjà répondu :roll:

supprimé!

Merci
RPI B+ & B2 | Domoticz | 1-wire | Danfoss | Synology | arduino | esp8266 | modbus | camera | IPXv4

Fredspace
Messages : 2
Enregistré le : 21 févr. 2015, 12:27

Re: Theme et Style domoticz

Message par Fredspace » 22 févr. 2015, 23:04

@ vil1driver : Effectivement c'est nettement mieux ;-) merci a toi
Et merci encore a asem

gandalfand
Messages : 6
Enregistré le : 26 mars 2015, 07:34

Re: Theme et Style domoticz

Message par gandalfand » 26 mars 2015, 07:55

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) Vu 8192 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) Vu 8192 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.

Disable adblock

This site is supported by ads and donations.
If you see this text you are blocking our ads.
Please consider a Donation to support the site.


vil1driver
Messages : 5097
Enregistré le : 30 janv. 2015, 11:07
Localisation : Rennes (35)

Re: Theme et Style domoticz

Message par vil1driver » 26 mars 2015, 10:05

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

gandalfand
Messages : 6
Enregistré le : 26 mars 2015, 07:34

Re: Theme et Style domoticz

Message par gandalfand » 28 mars 2015, 06:09

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.

vil1driver
Messages : 5097
Enregistré le : 30 janv. 2015, 11:07
Localisation : Rennes (35)

Re: Theme et Style domoticz

Message par vil1driver » 28 mars 2015, 09:51

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 ?

gandalfand
Messages : 6
Enregistré le : 26 mars 2015, 07:34

Re: Theme et Style domoticz

Message par gandalfand » 30 mars 2015, 06:43

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) Vu 8137 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..

vil1driver
Messages : 5097
Enregistré le : 30 janv. 2015, 11:07
Localisation : Rennes (35)

Re: Theme et Style domoticz

Message par vil1driver » 30 mars 2015, 07:55

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.

gandalfand
Messages : 6
Enregistré le : 26 mars 2015, 07:34

Re: Theme et Style domoticz

Message par gandalfand » 03 avr. 2015, 06:13

J'utilise google chrome et internet explorer 11 et j'ai le même problème de widget différent..

Disable adblock

This site is supported by ads and donations.
If you see this text you are blocking our ads.
Please consider a Donation to support the site.


Répondre