/***************************************************************************** * Règles génériques * *****************************************************************************/ * { box-sizing: border-box; } div.clear { clear: both; } div.center { text-align: center; } img { max-width: 100%; height: auto; max-height: 100%; } a { text-decoration: none; color: inherit; cursor: pointer; } button.image { line-height: 24px; cursor: pointer; } button.image img { display: inline-block; float: left; margin: 4px 10px 0 3px; } /***************************************************************************** * Règles CSS * *****************************************************************************/ body { font-family: Roboto, Arial; font-size: 1.0rem; margin: 0; padding: 0; color: #000000; background: #FFFFFF url(images/background_opaque.jpg) fixed center; background-size: cover; overflow-wrap : break-word; word-wrap: break-word; } /***************************************************************************** * En-tête * *****************************************************************************/ div.header { position: relative; width: 100%; min-height: 150px; background: rgba(0, 0, 0, 0.5); } div.header img.logo { position: absolute; left: 0; top: 0; } div.header div.trace { margin: 0 0 0 300px; padding: 20px 0; } div.header div.trace a { display: inline-block; padding: 2px 15px; border: 1px solid gray; border-radius: 5px; background: rgba(255, 255, 255, 0.4); } div.header div.trace a:hover { background: #FFF; color: maroon; } dic.header div.trace a img, dic.header div.trace a img hover { background: transparent; color: inherit; } div.header h3 { margin: 0 0 0 300px; padding: 0; font-family: 'placard_condensedregular'; font-size: 2.3rem; color: #FDA442; text-shadow: 1px 1px 1px #000000; } div.section { position: absolute; left: 0; top: 150px; width: 100%; height: calc(100% - 150px); max-height: calc(100% - 150px); overflow-y: auto; } /***** Responsive ************************************************************/ @media screen and (max-width: 500px) { div.header { min-height: 80px; } div.header img.logo { height: 80px; } div.header div.trace { margin: 0 0 0 160px; padding: 10px 0; } div.header div.trace a { padding: 1px 10px; font-size: 0.8rem; } div.header h3 { position: absolute; left: 160px; bottom: 10px; margin: 0; font-size: 1.3rem; } div.section { top: 80px; height: calc(100% - 80px); max-height: calc(100% - 80px); } } /***************************************************************************** * Page d'accueil * *****************************************************************************/ div.root { margin: 20px 50px; } div.root div.button { display: inline-block; position: relative; margin: 10px; padding-left: 100px; width: 300px; height: 80px; line-height: 80px; border: 1px solid gray; border-radius: 10px; background: rgba(255, 255, 255, 0.7); overflow: hidden; } div.root div.button:hover { background: #FFF; color: maroon; } div.root div.button img { position: absolute; left: 20px; top: 20px; } div.root div.button img.cadenas { position: absolute; left: inherit; top: inherit; right: 10px; bottom: 10px; } /***** Responsive ************************************************************/ @media screen and (max-width: 500px) { div.root { margin: 10px 35px; } } /***************************************************************************** * Page dossiers * *****************************************************************************/ div.page { display: flex; flex-wrap: wrap; margin: 20px 50px; } div.page div.button { display: flex; align-items: center; align-content: center; flex-wrap: wrap; position: relative; margin: 10px; padding-left: 100px; width: 300px; height: 90px; border: 1px solid gray; border-radius: 10px; background: rgba(255, 255, 255, 0.7); overflow: hidden; } div.page div.button:hover { background: #FFF; color: maroon; } div.page div.button img { position: absolute; left: 20px; top: 20px; } div.page div.button img.cadenas { position: absolute; left: inherit; top: inherit; right: 10px; bottom: 10px; } div.page div.button div { width: 100%; } div.page div.button div.date { font-size: 0.7rem; margin-bottom: 3px; } div.page div.button div.date span { margin: 0; padding: 1px 10px; color: #FFF; background: #6B818F; } div.page div.button img.cadenas { position: absolute; left: inherit; top: inherit; right: 10px; bottom: 10px; } /***************************************************************************** * Page photos * *****************************************************************************/ div.diapos { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } div.diapos_thumb { position: relative; margin: 10px; padding: 10px; border: 1px solid gray; background: rgba(255, 255, 255, 0.3); } div.diapos_thumb:hover { background: #FFF; border: 1px solid gray; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); } div.diapos_thumb:hover > a.btn_album { display: inline-block; background: #FFF; } div.diapos_thumb img.cadenas { position: absolute; left: inherit; top: inherit; right: 5px; bottom: 10px; } /***** Responsive ************************************************************/ @media screen and (max-width: 500px) { div.page { margin: 10px 35px; } } /***************************************************************************** * Menu contextuel * *****************************************************************************/ div.contextPage { display: none; position: absolute; width: 200px; border: 1px solid gray; } a.cm { display: block; padding: 1px 10px; background: rgba(255, 255, 255, 0.9); cursor: pointer; } a.cm:hover { color: #FFF; background: #2F789F; } div.contextPhoto { display: none; position: absolute; width: 200px; border: 1px solid gray; } a.cmp { display: block; padding: 1px 10px; background: rgba(255, 255, 255, 0.9); cursor: pointer; } a.cmp:hover { color: #FFF; background: #2F789F; } div.contextFolder { display: none; position: absolute; width: 200px; border: 1px solid gray; } a.cmf { display: block; padding: 1px 10px; background: rgba(255, 255, 255, 0.9); cursor: pointer; } a.cmf:hover { color: #FFF; background: #2F789F; } /***************************************************************************** * Barre de progression * *****************************************************************************/ div.editProgress { width: 1060px; margin: 300px auto 0 auto; padding: 30px; background: #EFEFEF; border: 1px solid black; border-radius: 10px; } #EditProgress { z-index: 5; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } progress { display: inline-block; width: 1000px; height: 24px; padding: 3px 3px 2px 3px; background: #A2AE79; background: linear-gradient(#495131, #A2AE79); /* IE */ background: -moz-linear-gradient(top, #495131, #A2AE79); /* Mozilla */ background: -webkit-gradient(linear, left top, left bottom, from(#495131), to(#A2AE79)); /* Safari et chrome */ border: 1px solid rgba(0, 0, 0, .5); -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .2); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .2); box-shadow: 0 1px 0 rgba(255, 255, 255, .2); } progress::-moz-progress-bar { border-radius: 10px; background: #09c; background: -moz-repeating-linear-gradient( 45deg, rgba(255,255,255,.2) 0, rgba(255,255,255,.2) 10px, rgba(255,255,255,0) 10px, rgba(255,255,255,0) 20px ), -moz-linear-gradient( rgba(255,255,255,.1) 50%, rgba(255,255,255,0) 60% ), #09c; background: repeating-linear-gradient( 45deg, rgba(255,255,255,.2) 0, rgba(255,255,255,.2) 10px, rgba(255,255,255,0) 10px, rgba(255,255,255,0) 20px ), linear-gradient( rgba(255,255,255,.1) 50%, rgba(255,255,255,0) 60% ), #CF940A; background-size: 500px 20px, auto, auto; background-position: -500px 0, top, top; background-position: top right, top, top; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -1px 0 rgba(0,0,0,.8) inset, 0 0 2px black; } progress::-webkit-progress-value { /* Code identique mais avec les bons préfixes! */ } progress::-webkit-progress-bar { background: transparent; } /***************************************************************************** * Bas de page * *****************************************************************************/ div.footer { margin: 50px 0 0 0; padding: 20px; text-align: center; background: rgba(0, 0, 0, 0.5); } div.footer button.down, div.footer button.load { position: relative; cursor: pointer; width: 150px; height: 40px; text-align: left; padding: 0 0 0 50px; font-size: 1.0rem; border: 1px solid gray; border-radius: 5px; } div.footer button.down { width: 200px; } div.footer button.down:hover, div.footer button.load:hover { color: maroon; background: #FFF; border: 1px solid maroon; } div.footer button.down img, div.footer button.load img { position: absolute; left: 12px; top: 8px; } /***** Responsive ************************************************************/ @media screen and (max-width: 500px) { div.footer { display: none; } } /***************************************************************************** * Bouton "LOCAL" * *****************************************************************************/ div.local { z-index: 10; display: inline-block; position: fixed; right: 15px; top: 8px; width: 110px; padding: 2px 20px; text-align: center; font-family: 'Roboto', sans-serif; font-size: 14px; color: white; background: #B90000; font-weight: bold; border: 1px solid white; box-shadow: 5px 5px 5px #000; } /***** Responsive ************************************************************/ @media screen and (max-width: 1190px) { div.local { display: none; } } /***************************************************************************** * Formulaire de connexion * *****************************************************************************/ div.applet_connect { display: none; z-index: 11; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } div.applet_connect div.connect { font-family: sans-serif; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; padding: 40px; background: rgba(16, 16, 16, 0.9); box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5); border-radius: 10px; } div.applet_connect div.connect h2 { margin: 0 0 30px; padding: 0; color: #FFF; text-align: center; } div.applet_connect div.connect .inputBox { position: relative; } div.applet_connect div.connect .inputBox input { width: 100%; padding: 10px 0; font-size: 16px; color: #FFF; letter-spacing: 1px; margin-bottom: 30px; border: none; outline: none; background: transparent; border-bottom: 1px solid #FFF; } div.applet_connect div.connect .inputBox label { position: absolute; top: 0; left: 0; padding: 10px 0; color: #FFF; letter-spacing: 1px; font-size: 16px; pointer-events: none; transition: .5s; } div.applet_connect div.connect .inputBox input:focus ~ label, div.applet_connect div.connect .inputBox input:valid ~ label { top: -18px; left: 0; color: #03A9F4; font-size: 12px; } div.applet_connect div.connect .inputCenter { text-align: center; } div.applet_connect div.connect input[type='submit'], div.applet_connect div.connect input[type='button'] { display: inline-block; margin: 10px 5px; border: 1px solid transparent; outline: none; color: #FFF; background: #03A9F4; padding: 10px 20px; cursor: pointer; border-radius: 5px; } div.applet_connect div.connect input[type='submit']:hover, div.applet_connect div.connect input[type='button']:hover { border: 1px solid #FFF; } /***** TABLETTES, DESKTOP ****************************************************/ @media only screen and (min-width: 410px) { div.applet_connect div.connect { width: 400px; } } /***************************************************************************** * Formulaire de mise à jour d'un dossier * *****************************************************************************/ div.applet_folder { display: none; z-index: 11; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } div.applet_folder div.folder { font-family: sans-serif; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 800px; padding: 20px 40px; background: rgba(16, 16, 16, 0.9); box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5); border-radius: 10px; } div.applet_folder div.folder h2 { margin: 0 0 30px; padding: 0; color: #FFF; text-align: center; } div.applet_folder div.folder .inputBox { position: relative; } div.applet_folder div.folder .inputBox input { width: 100%; padding: 10px 0; font-size: 16px; color: #FFF; letter-spacing: 1px; margin-bottom: 30px; border: none; outline: none; background: transparent; border-bottom: 1px solid #FFF; } div.applet_folder div.folder .inputBox label { position: absolute; top: 0; left: 0; padding: 10px 0; color: #FFF; letter-spacing: 1px; font-size: 16px; pointer-events: none; transition: .5s; } div.applet_folder div.folder .inputBox input:focus ~ label, div.applet_folder div.folder .inputBox input:valid ~ label { top: -18px; left: 0; color: #03A9F4; font-size: 12px; } div.applet_folder div.folder .inputCenter { text-align: center; } div.applet_folder div.folder input[type='submit'], div.applet_folder div.folder input[type='button'] { display: inline-block; margin: 10px 5px; border: 1px solid transparent; outline: none; color: #FFF; background: #03A9F4; padding: 10px 20px; cursor: pointer; border-radius: 5px; } div.applet_folder div.folder input[type='submit']:hover, div.applet_folder div.folder input[type='button']:hover { border: 1px solid #FFF; } #form_field { position: relative; margin: 0 0 25px 0; vertical-align: top; font-size: 1rem; } #form_field label.header { display: inline-block; float: left; margin-top: 2px; margin: right: 10px; width: 150px; color: #FFF; } #form_field input[type='checkbox'] { visibility: hidden; } #form_field input[type='radio'], #form_field label { cursor: pointer; } #form_field .slideThree { display: inline-block; width: 80px; height: 26px; background: #333; margin: 0 auto; border-radius: 50px; position: relative; box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2); } #form_field .slideThree:after { content: 'NON'; font: 12px/26px Arial, sans-serif; color: #FF9595; position: absolute; right: 10px; z-index: 0; font-weight: bold; text-shadow: 1px 1px 0px rgba(255,255,255,.15); } #form_field .slideThree:before { content: 'OUI'; font: 12px/26px Arial, sans-serif; color: #0DFF0D; position: absolute; left: 10px; z-index: 0; font-weight: bold; } #form_field .slideThree label { display: block; width: 34px; height: 20px; margin-top: 0; border-radius: 50px; transition: all .4s ease; cursor: pointer; position: absolute; top: 3px; left: 3px; z-index: 1; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3); background: #FCFFF4; background: linear-gradient(to bottom, #FCFFF4 0%, #DFE5D7 40%, #B3BEAD 100%); } #form_field .slideThree input[type='checkbox']:checked + label { left: 43px; } /***************************************************************************** * Formulaire de déplacement d'un élément * *****************************************************************************/ div.applet_move { display: none; z-index: 11; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } div.applet_move div.move { font-family: sans-serif; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 800px; padding: 20px 40px; background: rgba(16, 16, 16, 0.9); box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5); border-radius: 10px; } div.applet_move div.move h2 { margin: 0 0 30px; padding: 0; color: #FFF; text-align: center; } div.applet_move div.move .inputCenter { text-align: center; } div.applet_move div.move input[type='submit'], div.applet_move div.move input[type='button'] { display: inline-block; margin: 10px 5px; border: 1px solid transparent; outline: none; color: #FFF; background: #03A9F4; padding: 10px 20px; cursor: pointer; border-radius: 5px; } div.applet_move div.move input[type='submit']:hover, div.applet_move div.move input[type='button']:hover { border: 1px solid #FFF; } div.tree { color: #FFF; max-height: 500px; overflow-y: auto; } div.tree div { display: inline; color: gray; cursor: default; line-height: 25px; } div.tree div.isSelectable { color: #FFF; cursor: pointer; } div.tree div.isSelectable:hover { color: #FFC6C6; } div.tree div.isSelectable.selected, div.tree div.isSelectable.selected:hover { color: gray; background: #E6E6E6; } /***************************************************************************** * Animation sur traitement long * *****************************************************************************/ #idWait { z-index: 25; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); text-align: center; display: table-cell; vertical-align: middle; display: none; } #idWait table { width: 100%; height: 100%; border-collapse: collapse; text-align: center; } #idWait table td { height: 100%; padding: 0; vertical-align: middle; }