/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; } body {line-height: 1; } ol, ul {list-style: none; } blockquote, q {quotes: none; } blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none; } table {border-collapse: collapse; border-spacing: 0; } /** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the *    contenteditable attribute is included anywhere else in the document. *    Otherwise it causes space to appear at the top and bottom of elements *    that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using *    `:before` to contain the top-margins of child elements. */ .cf:before, .cf:after {content: " "; /* 1 */ display: table; /* 2 */ } .cf:after {clear: both; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .cf {*zoom: 1; } /* box-model */ * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /** * Personnal styles */ /* latin */ @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } /* -> Generics styles*/ html, body {width: 100%; } html {height: 100%; } body {min-height: 100%; } body {background: #FFFFFF; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px !important; /*Kill the page_deb font-size:medium*/ line-height: 1.5384616; color: #333333; } .body--login {display: flex; align-content: center; justify-content: center; align-items: center; min-height: 100%; width: 100%; height: 100%; background: #e9e9e9; } input {/* 	-webkit-appearance: none; appearance: none; */ } /*typo*/ h1 {padding-top: 20px; font-size: 36px; } h2 {padding-top: 16px; font-size: 24px; } p {padding-top: 20px; font-size: 1.1em; width: 100%; max-width: 50em; } /*layout*/ #page, .page {padding: 24px 12px 48px 48px; background: #FAFAFA; /* min-width:  720px; */ /* 	width: calc(100% - 290px); */ width: 100%; float: left; /* margin-left:  290px; */ padding-left: 338px; min-height: 100%; } .border {background: #E5E5E5; } /* red : #E2624B lightgrey: #00ACAC darkgrey: #2D353C deepgrey: #232A2F nearblack: #1A2229 curent -> lightgrey + with normal -> darkgrey + lightgrey hover : nearblack + lightgrey header : deepgrey + lightgrey title: nearblack + white */ .color {background: #666666; } .nav {position: fixed; left: 0; top: 0; min-width: 290px; height: 100%; background: #2D353C; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.14); border-top: 16px solid #D0112B; overflow-y: auto; } .nav__img {width: 100%; height: 94px; text-align: center; background: #FFFFFF url("../img/logo.png") no-repeat center center; -webkit-background-size: contain; background-size: contain; border-bottom: 1px solid #000000; border-top: 1px solid #000000; } .nav__title {padding: 8px 16px; margin-top: 0; color: #00ACAC; background-color: #232A2F; font-size: 1.2em; } .nav__item {display: block; } .nav__link, .nav__deconnexion {text-decoration: none; display: block; padding: 16px 24px; transition: color 0.25s, background-color 0.25s; } .nav__link {color: #00ACAC; background-color: #2D353C; } .nav__deconnexion {color: #FFFFFF; background-color: #E2624B; } .nav__link--active {color: #FFFFFF; background-color: #00ACAC; } .nav__link:hover {background-color: #1A2229; } .nav__consult {border-top: 1px solid #CCC; } .nav__consult--admin {border-bottom: 1px solid #CCC; } .pied {display: none; } /* forms elements */ /*partialy  from http://semantic-ui.com*/ .form-sign {margin-top: 24px; border-top: 1px solid #000; } .form-sign__label {padding-top: 24px; font-size: 18px; } .form__year {width: 50%; float: left; } .form__input, .flatpickr-input {padding: .67861429em 1em; font-size: 1em; background: #FFF; border: 1px solid rgba(34, 36, 38, .15); color: rgba(0, 0, 0, .87); border-radius: .28571429rem; box-shadow: 0 0 0 0 transparent inset; -webkit-transition: color .1s ease, border-color .1s ease; transition: color .1s ease, border-color .1s ease; vertical-align: top; } .form__input:focus {color: rgba(0, 0, 0, .95); border: 1px solid rgba(34, 36, 38, .90); border-radius: .28571429rem; background: #FFF; box-shadow: 0 0 0 0 rgba(34, 36, 38, .35) inset; } .btn, .bouton, .form__input--btn, .list-prev__link, .form-sign__input--submit, .form__input--submit {margin-top: 16px; display: block; cursor: pointer; min-height: 1em; outline: 0; border: none; vertical-align: baseline; background: #2185d0; color: rgba(255, 255, 255, .9); padding: .78571429em 1.5em; text-transform: none; text-shadow: none; font-weight: 700; line-height: 1em; font-style: normal; text-align: center; text-decoration: none; border-radius: .28571429rem; box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, .15) inset; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: opacity .1s ease, background-color .1s ease, color .1s ease, box-shadow .1s ease, background .1s ease; transition: opacity .1s ease, background-color .1s ease, color .1s ease, box-shadow .1s ease, background .1s ease; will-change: ''; -webkit-tap-highlight-color: transparent; } .btn:hover, .bouton:hover, .form__input--btn:hover, .list-prev__link:hover, .form-sign__input--submit:hover, .form__input--submit:hover {background-color: #e19a5f; background-image: none; box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, .15) inset; color: rgba(0, 0, 0, .8); } .form__label {display: block; margin: 0 0 .28571429rem; color: rgba(0, 0, 0, .87); font-size: .92857143em; font-weight: 700; text-transform: none; } .form__label--checkbox {font-weight: 400; vertical-align: middle; } .form__input--checkbox {vertical-align: middle; } .form__textarea {width: 100%; min-height: 120px; resize: vertical; } /* .form__select {padding: 0 12px; color: #666; border-color: rgba(0,0,0,.2); border-top-color: rgba(0,0,0,.3); background-image: none; box-shadow: inset 0 2px 4px rgba(0,0,0,.1); } .form__select,  */ /* .btn, .bouton, .form__input--btn, .list-prev__link {-webkit-appearance: none; margin: 0; overflow: visible; font: inherit; color: #fff; display: inline-block; box-sizing: border-box; padding: 0 12px; background-color: #2185d0; vertical-align: middle; line-height: 28px; min-height: 30px; font-size: 1rem; text-decoration: none; text-align: center; border: 1px solid rgba(0,0,0,.2); border-bottom-color: rgba(0,0,0,.3); background-origin: border-box; /*     background-image: -webkit-linear-gradient(top,#fff,#eee); background-image: linear-gradient(to bottom,#fff,#eee); *//* border-radius: 4px; text-shadow: 0 1px 0 #fff; }*/ .btn:hover, .bouton:hover, .form__input--btn:hover, .list-prev__link:hover {background-color: #1678c2; } */ .list-prev__item {text-align: center; } .btn--cycle, .list-prev__link {width: 50%; padding: 8px 8px; margin-bottom: 8px; } input[type=number], .form_input--number {width: 60px; text-align: right; } .form-sign__input--submit {float: right; margin-right: 0; margin-left: .25em; } .print-pdf {float: right; } /* Table styles */ table {width: 100%; margin: 1em 0; border: 1px solid rgba(34, 36, 38, .15); box-shadow: none; border-radius: .28571429rem; text-align: left; color: rgba(0, 0, 0, .87); border-collapse: separate; border-spacing: 0; } thead {text-align: left; color: rgba(0, 0, 0, .87); border-collapse: separate; border-spacing: 0; } th {cursor: auto; background: #d9edf7; text-align: inherit; color: rgba(0, 0, 0, .87); padding: .92857143em .78571429em; vertical-align: inherit; font-weight: 700; text-transform: none; border-bottom: 2px solid rgba(34, 36, 38, .2); border-left: none; } .th--empty {pointer-events: none; background: #d9edf7; font-weight: 400; color: rgba(0, 0, 0, .4); box-shadow: -1px -1px 0 1px #f0f0ff; } .th--empty+th {border-left: 1px solid rgba(34, 36, 38, .2); } .th--centered, .td--centered {text-align: center; } .td--bold {font-weight: bold; } tr {background: #ffffff; } tbody tr:nth-of-type(2n) {background: #f0f0ff; } tbody tr:hover {background: #d7d7ff; } td {padding: .78571429em; text-align: inherit; border-bottom: 1px solid #E5E5E5; } /*delete ue into horsufr/horspd */ .tools {width: 1%; white-space: nowrap; } .tools-wrapper {visibility: hidden; width: 52px; } tr:hover .tools-wrapper {visibility: visible; } .delete_ue, .delete_ref {color: #d35400; } .edit_ue, .edit_ref {color: #2ecc71; } /* messages */ .message {font-size: 1em; position: relative; min-height: 1em; margin: 1em 0; background: #F8F8F9; padding: 1em 1.5em; line-height: 1.4285em; color: rgba(0, 0, 0, .87); -webkit-transition: opacity .1s ease, color .1s ease, background .1s ease, box-shadow .1s ease; transition: opacity .1s ease, color .1s ease, background .1s ease, box-shadow .1s ease; border-radius: .28571429rem; box-shadow: 0 0 0 1px rgba(34, 36, 38, .22) inset, 0 0 0 0 transparent; } .message {box-shadow: 0 0 0 1px #C9BA9B inset, 0 0 0 0 transparent; } .message--warning {background-color: #FFFAF3; color: #573A08; box-shadow: 0 0 0 1px #C9BA9B inset, 0 0 0 0 transparent; } .legend {padding-bottom: 24px; margin-bottom: 12px; border-bottom: 1px solid #1A2229; } .card, .legend__element {margin: 8px; float: left; width: 220px; border-radius: 2px; background-color: #F8F8F8; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); padding-left: 16px; } .card--c0, .legend__element--c0 {background-color: #F44336; } .card--c1, .legend__element--c1 {background-color: #FF9800; } .card--c2, .legend__element--c2 {background-color: #6A89CC; } .card--c3, .legend__element--c3 {background-color: #4CAF50; } .card__title, .legend__text {margin: 0; padding: 4px 0 4px 8px; line-height: 1.24; background-color: #FFFFFF; } .card__text {display: none; } .card__action-bar {border-top: 1px solid #CCCCCC; background-color: #FFFFFF; } .card__button {display: inline-block; float: left; width: 50%; padding: 4px 0; color: #333333; text-transform: uppercase; text-decoration: none; text-align: center; } /* font awesome from home */ @font-face {font-family: 'FontAwesome'; src: url('../font/font-awesome-4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('../font/font-awesome-4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../font/font-awesome-4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } .fa {margin-right: 8px; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 1.28571429em; text-align: center; } .fa-lg {font-size: 1.33333333em; line-height: 0.75em; vertical-align: -15%; } .pull-right {float: right; line-height: inherit; margin-right: 0; } .fa-home:before {content: "\f015"; } .fa-pencil-square-o:before {content: "\f044"; } .fa-id-badge:before {content: "\f2c1"; } .fa-users:before {content: "\f0c0"; } .fa-caret-right:before {content: "\f0da"; } .fa-check-square-o:before {content: "\f046"; } .fa-calendar:before {content: "\f073"; } .fa-sign-out:before {content: "\f08b"; } .fa-ban:before {content: "\f05e"; } .fa-pencil:before {content: "\f040"; } .fa-file-pdf-o:before {content: "\f1c1"; } /*modal*/ /* .modal-container{position: fixed; top: 0; left: 290px; z-index: 100; width: calc(100% - 290px); height: 100%; min-height: 100%; background-color: #CCCCCC; background-color: rgba(0,0,0,0.4); } .modal-container--hidden{display: none; } .modal{width: 320px; min-height: 180px; position: absolute; top: 50%; left: 50%; padding:  12px; transform: translate(-50%, -50%); background-color: #FFFFFF; } .modal__links{padding-top:  24px; } */ /*login*/ .form-login {height: auto; width: 320px; margin: auto; text-align: center; padding: 160px 24px 24px 24px; background: #FFF url('../img/logo.png') no-repeat center 24px; background-size: auto; background-size: 50%; } .form-login__input, .form-login__label {display: block; width: 80%; margin: 0 10%; padding: 12px 10px; color: #333; } .form-login__input, .form-login__submit {border: none; background: #fff; padding: 12px 10px; outline: none; transition: all 0.2s ease; -webkit-appearance: none; appearance: none; } .form-login__input:focus {background: #F1F1F1; } .form-login__input--required {border-bottom: 1px solid #CCC; -webkit-box-shadow: inset 3px 0 0 0 #384E54; box-shadow: inset 3px 0 0 0 #384E54; margin-bottom: 15px; } .form-login__input--submit {margin-top: 26px; cursor: pointer; background: #384E54; color: #fff; -moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .form-login__input--submit:hover {background: #e94a40; } .form-login__info {width: 80%; margin: 0 10%; padding: 12px 10px; padding-bottom: 20px; line-height: 1.33; font-size: 0.86em; color: #444; } /* .form__select {height: 2.5rem; } .form__select{-moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; background: transparent; border: solid 2px rgba(0, 0, 0, 0.14); border-radius: 0.25rem; color: inherit; display: block; outline: 0; padding: 0 0.75rem; text-decoration: none; width: 100%; } .form__select{color: rgba(0, 0, 0, 1); font-family: "Roboto", Helvetica, sans-serif; font-size: 1rem; font-weight: 300; line-height: 1.65; } .select-wrapper{position: relative; } .select-wrapper:before {display: block; content: '\f107'; position: absolute; top: 0; right: 0; width: 2.5rem; height: 2.5rem; line-height: 2.5rem; color: rgba(0, 0, 0, 0.14); pointer-events: none; text-align: center; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none; }*/ /*Modal rewrite*/ .ui.modal>.close {top: 1.0535rem; right: 1rem; color: rgba(0, 0, 0, .87); } .ui.modal {margin: 0px auto; }