projects / pompage.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
MOD refactoring haskell...
[pompage.git] / css / yopyop.css
diff --git a/css/yopyop.css b/css/yopyop.css
index 13c59a8..c56b4ce 100644 (file)
--- a/css/yopyop.css
+++ b/css/yopyop.css
@@ -1,8 +1,335 @@
-* {\r
-    margin: 0;\r
-    padding: 0;\r
-    border-width: 0;\r
-    font: normal 11px Verdana, Helvetica, Arial, sans-serif;\r
-    color: #000;\r
-    background-color: #FFF;\r
-}
\ No newline at end of file
+* {\r
+   margin: 0;\r
+   padding: 0;\r
+   border-width: 0;\r
+}\r
+\r
+html {\r
+   background-color: #8DDD83;\r
+   height: auto;\r
+   font: normal 12pt Arial, Verdana, Helvetica, sans-serif;\r
+   height: 100%;\r
+}\r
+\r
+a {\r
+   text-decoration: none;\r
+   cursor: pointer;\r
+}\r
+a:link {\r
+   color: #51874A;\r
+}\r
+a:visited {\r
+   color: #51874A;\r
+}\r
+a:hover {\r
+   color: #5DDF4C;\r
+}\r
+a:active {\r
+   color: #5DDF4C;\r
+}\r
+\r
+body {\r
+   width: 90%;\r
+   height: auto;\r
+   margin-left: auto;\r
+   margin-right: auto;\r
+   margin-top: 0px;\r
+   text-align: left;\r
+   height: 100%;\r
+}\r
+\r
+h1 {\r
+   font-size: 20pt;\r
+   font-style: italic;\r
+   font-weight: bold;\r
+   margin-left: 40px;\r
+}\r
+\r
+td {\r
+   vertical-align:top;\r
+}\r
+\r
+div.entete {\r
+   width: 90%;\r
+   position: fixed;\r
+   z-index: 5;\r
+   background-color: #65A35D;\r
+   height: 50px;\r
+   color: #8DDD83;\r
+   -moz-border-radius: 0px 0px 20px 20px;\r
+   min-width: 630px;\r
+}\r
+\r
+div.entete img {\r
+   position: absolute;\r
+   left: 180px;\r
+   top: -3px;\r
+}\r
+\r
+div.entete h1 {\r
+   float: left;     \r
+   margin-top: 8px;\r
+}\r
+\r
+div.entete div#nbFilms {\r
+   position: absolute;\r
+   left: 280px;\r
+   top: 33px;\r
+   font-size: 9pt;\r
+   color: black;\r
+}\r
+\r
+div.entete form {\r
+   float: right;\r
+   padding-right: 10px;\r
+   padding-top: 5px;\r
+   margin-right: 30px;\r
+}\r
+\r
+div.entete form input {\r
+   font-size: 16pt;\r
+   background-color: #B1F1A9;\r
+   margin: 0px;\r
+   padding: 0px;\r
+}\r
+\r
+div.entete form button {\r
+   position: relative;\r
+   height: 25px;\r
+   width: 25px;\r
+   border: 0px;\r
+   background-color: #B1F1A9;\r
+   background-position: center;\r
+   background-repeat: no-repeat;\r
+   vertical-align: top;\r
+   margin-left: 2px;\r
+}\r
+div.entete form button:hover {\r
+   background-color: #E3FBE0;\r
+}\r
+div.entete form button:active {\r
+   background-color: #FFFFFF;\r
+}\r
+\r
+div.entete form button#boutonViderRecherche {\r
+   background-image: url(../img/clear.png);\r
+}\r
+\r
+div.entete form button#boutonToutOuvrir {\r
+   background-image: url(../img/ouvrir.png);\r
+}\r
+\r
+div.entete form button#boutonAuHasard {\r
+   background-image: url(../img/random.png);\r
+}\r
+\r
+div.entete form p {\r
+   color: black;\r
+   font-size: 7pt;\r
+   margin-top: 1px;\r
+}\r
+\r
+div.entete form p label {\r
+   margin-right: 4px;\r
+}\r
+\r
+div.contenu {\r
+   min-width: 630px;\r
+   min-height: 100%;\r
+   background-color: #7BC671;\r
+}\r
+\r
+table#liste {\r
+   width: 100%;\r
+   border-spacing: 0px 0px;\r
+   margin-bottom:40px;\r
+   margin-top: 50px;   \r
+}\r
+\r
+table#liste .listeFichiers img {\r
+   position: absolute;\r
+    left: -9px;\r
+    top: -18px;\r
+}\r
+\r
+table#liste td {\r
+   background-color: #7BC671;   \r
+   color: #20531A;\r
+   padding: 3px;\r
+}\r
+\r
+table#liste td.titre {\r
+   font-weight: bold;\r
+   cursor: pointer;\r
+}\r
+\r
+table#liste td.annee {\r
+   text-align: right;\r
+   width: 50px;\r
+}\r
+\r
+table#liste td.duree {\r
+   text-align: right;\r
+   width: 80px;\r
+}\r
+\r
+table#liste td.lien {\r
+   text-align: center;\r
+   width: 15px;\r
+}\r
+\r
+table#liste td.lien div {\r
+   position: absolute;\r
+}\r
+\r
+table#liste td.lien a {\r
+   position: absolute;\r
+   width: 15px;\r
+   height: 19px;\r
+   display: block;\r
+   z-index: 1;\r
+   background-image: url(../img/pomme1.png)\r
+}\r
+\r
+table#liste td.lien a:hover {\r
+   width: 30px;\r
+   height: 38px;   \r
+   left: -7px;\r
+   top: -9px;\r
+   z-index: 10;\r
+   background-image: url(../img/pomme2.png)\r
+}\r
+\r
+table#liste td.fichier {\r
+   text-align: center;\r
+   width: 12px;\r
+}\r
+\r
+table#liste td.fichier div {\r
+   position: absolute;\r
+}\r
+\r
+table#liste td.fichier div ul {\r
+   display: block;\r
+   position: absolute;\r
+   left: 5px;\r
+   top: 3px;\r
+   padding: 2px;\r
+}\r
+\r
+table#liste td.fichier div ul:hover {\r
+   z-index: 4;\r
+   background-color: #4F8749;\r
+}\r
+\r
+table#liste td.fichier div ul > a {\r
+   position: absolute; \r
+   left: -3px;\r
+   top: -4px;\r
+   width: 12px;\r
+   height: 20px;\r
+   display: block;\r
+   z-index: 3;\r
+   background-image: url(../img/poire1.png);\r
+}\r
+\r
+table#liste td.fichier div ul:hover > a {\r
+   width: 24px;\r
+   height: 40px;   \r
+   left: -8px;\r
+   top: -14px;\r
+   z-index: 10;\r
+   background-image: url(../img/poire2.png);\r
+}\r
+\r
+table#liste td.fichier div ul li {\r
+   display: none;\r
+}\r
+\r
+table#liste td.fichier div ul li a {\r
+   color: #8DDD83;\r
+}\r
+\r
+table#liste td.fichier div ul li a:hover {\r
+   color: #BFF6B8;\r
+}\r
+\r
+table#liste td.fichier div ul:hover li {\r
+   display: block;\r
+   z-index: 4;\r
+   padding: 3px 8px 3px 17px;\r
+   text-align: left;\r
+   white-space: nowrap;\r
+   color: #8DDD83;\r
+   background-color: #2D5728;\r
+   font-size: 10pt;\r
+}\r
+\r
+table#liste td.fichier div ul:hover li:hover {\r
+   background-color: #43773D;\r
+}\r
+\r
+/* Pourquoi ca ne marche pas ? */\r
+/*\r
+table#liste td.fichier div ul:hover li:first-child {\r
+   margin-top: 10px;\r
+}*/\r
+\r
+table#liste td.titre:hover {\r
+   background-color: #B1F1A9;   \r
+   padding: 3px;\r
+}\r
+\r
+table#liste td.detail {\r
+   background-color: #8DDD83;   \r
+   padding: 0px 0px 0px 0px;\r
+}\r
+\r
+table#liste table.detail {\r
+   display: none;\r
+   width: 100%;\r
+   padding-bottom: 10px;\r
+   border-spacing: 0px 0px;\r
+}\r
+\r
+table#liste table.detail td {\r
+   background-color: #B1F1A9;\r
+   padding: 5px 5px 5px 5px;\r
+}\r
+\r
+table#liste table.detail td.affichette {\r
+   width: 0px;\r
+   padding: 4px;\r
+}\r
+table#liste table.detail td.titreDetail {\r
+   font-weight: bold;\r
+   width: 0px;\r
+}\r
+table#liste table.detail td.detail {\r
+   width: 100%;\r
+   padding-left: 10px;\r
+}\r
+\r
+div.pied {\r
+   position: fixed;\r
+   bottom: 0px;\r
+   height: 20px;\r
+   width: 90%;\r
+   z-index: 5;\r
+   min-width: 630px;\r
+   padding-top: 10px;\r
+   background-color: #65A35D;\r
+   font-size: 10pt;\r
+   -moz-border-radius: 20px 20px 0px 0px;\r
+}\r
+\r
+div.pied span#tempsRecherche, div.pied span#by {\r
+       margin-left: 10px;\r
+       margin-right: 10px\r
+}\r
+\r
+div.pied a {\r
+   margin-left: 10px;\r
+   margin-right: 10px\r
+}\r
+\r
Pompage is a tool to manage your movie list in a automatic manner. It can generate a XML file from a set of files and grab movie information from web site like imdb.com. A XSL stylesheet can display the list in an accessible way with a search box. See http://dev.euphorik.ch/projects/show/pmp for more information.