Monotone Arbeit nervt!
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

572 lines
10 KiB

3 years ago
  1. /* This software is governed by the CeCILL-B license. If a copy of this license
  2. * is not distributed with this file, you can obtain one at
  3. * http://www.cecill.info/licences/Licence_CeCILL_V2.1-en.txt
  4. *
  5. * Authors of STUdS (initial project) : Guilhem BORGHESI (borghesi@unistra.fr) and Raphaël DROZ
  6. * Authors of OpenSondage : Framasoft (https://github.com/framasoft)
  7. *
  8. * =============================
  9. *
  10. * Ce logiciel est ©gi par la licence CeCILL-B. Si une copie de cette licence
  11. * ne se trouve pas avec ce fichier vous pouvez l'obtenir sur
  12. * http://www.cecill.info/licences/Licence_CeCILL_V2.1-fr.txt
  13. *
  14. * Auteurs de STUdS (projet initial) : Guilhem BORGHESI (borghesi@unistra.fr) et Raphaël DROZ
  15. * Auteurs d'OpenSondage : Framasoft (https://github.com/framasoft)
  16. */
  17. @font-face {
  18. font-family: "DejaVu Sans";
  19. src: url('../fonts/DejaVuSans.ttf');
  20. }
  21. body {
  22. font-family: "DejaVu Sans", Verdana, Geneva, sans-serif;
  23. color:#333;
  24. background:#eee;
  25. }
  26. .trait { /* hr */
  27. background-color: #EEE;
  28. height: 5px;
  29. margin: 5px 0;
  30. border: none;
  31. }
  32. .ombre {
  33. background-color: #FFF;
  34. box-shadow: -4px 6px 9px rgba(50, 50, 50, 0.5);
  35. margin: 15px auto 30px;
  36. }
  37. .hide {
  38. display: none;
  39. }
  40. /* Commentaires */
  41. div.comment{
  42. margin-bottom: 10px;
  43. border-left: 1px dashed #999;
  44. background: #F5F5F5;
  45. padding-top: 4px;
  46. padding-bottom: 4px;
  47. padding-left: 14px;
  48. }
  49. .comment_date {
  50. font-style: italic;
  51. font-size: 12px;
  52. letter-spacing: -0.7px;
  53. color: grey;
  54. }
  55. /* Règles générales */
  56. a:focus { /* a11y */
  57. outline:#000 dotted 1px;
  58. }
  59. header, footer {
  60. }
  61. main {
  62. margin-top: 20px;
  63. }
  64. header h1 {
  65. margin-top: 0;
  66. }
  67. .container {
  68. padding: 30px;
  69. }
  70. .container .jumbotron {
  71. padding: 20px 20px;
  72. border-radius: 2px;
  73. }
  74. .container .jumbotron p {
  75. font-size: 1em;
  76. }
  77. .container .jumbotron .btn-group >.btn {
  78. margin-bottom: 20px;
  79. white-space: normal;
  80. }
  81. .summary h4 {
  82. margin-top:0;
  83. }
  84. .summary {
  85. font-weight:bold;
  86. }
  87. .summary img {
  88. max-width:100px;
  89. }
  90. .alert {
  91. border-radius: 2px;
  92. }
  93. .very-small {
  94. font-size: 70%;
  95. }
  96. /* Effet sur les images en page d'accueil */
  97. .opacity img {
  98. opacity: 0.8;
  99. }
  100. .opacity:hover img {
  101. opacity: 1;
  102. }
  103. .home-choice {
  104. margin-bottom:50px;
  105. }
  106. /* Description du sondage */
  107. /* studs.php et adminstuds.php */
  108. header .lead {
  109. padding: 10px 0;
  110. margin:0;
  111. }
  112. header form .input-group .form-control {
  113. margin-bottom: 20px;
  114. }
  115. header form .input-group .input-group-btn {
  116. vertical-align: top;
  117. }
  118. #admin-link, #public-link {
  119. cursor:text;
  120. }
  121. .admin-link, .public-link,
  122. .admin-link:hover, .public-link:hover {
  123. color:#333;
  124. text-decoration:none;
  125. border:none;
  126. }
  127. .jumbotron h3, .jumbotron .js-title {
  128. margin-bottom:20px;
  129. margin-top:0;
  130. }
  131. .poll-description {
  132. font-family: inherit;
  133. word-break: initial;
  134. }
  135. /** Description in markdown **/
  136. .form-group .CodeMirror, .form-group .CodeMirror-scroll {
  137. min-height: 200px;
  138. }
  139. #description-form .CodeMirror {
  140. background-color: #f5f5f5;
  141. }
  142. .editor-toolbar {
  143. margin-top: 10px;
  144. background-color: #eee;
  145. }
  146. #poll_comments {
  147. margin-top: 10px;
  148. }
  149. h4.control-label {
  150. display: inline-block;
  151. max-width: 100%;
  152. margin-bottom: 5px;
  153. font-weight: 700;
  154. font-size: 14px;
  155. line-height: 1.42857;
  156. margin-top:0;
  157. }
  158. caption {
  159. padding: 0 10px 10px;
  160. font-weight:bold;
  161. }
  162. .results a.btn-default.btn-sm {
  163. padding: 3px 7px;
  164. font-size: 0.7em;
  165. }
  166. /* adminstuds.php */
  167. #title-form h3 .btn-edit,
  168. #email-form .btn-edit,
  169. #description-form .btn-edit,
  170. #poll-rules-form .btn-edit,
  171. #poll-hidden-form .btn-edit,
  172. #expiration-form .btn-edit,
  173. #password-form .btn-edit,
  174. #name-form .btn-edit {
  175. position:absolute;
  176. left:-2000px;
  177. }
  178. #title-form .btn-edit:focus,
  179. #title-form h3:hover .btn-edit,
  180. #email-form .btn-edit:focus,
  181. #email-form:hover .btn-edit,
  182. #description-form .btn-edit:focus,
  183. #description-form:hover .btn-edit,
  184. #poll-rules-form .btn-edit:focus,
  185. #poll-rules-form:hover .btn-edit,
  186. #poll-hidden-form .btn-edit:focus,
  187. #poll-hidden-form:hover .btn-edit,
  188. #expiration-form .btn-edit:focus,
  189. #expiration-form:hover .btn-edit,
  190. #password-form .btn-edit:focus,
  191. #password-form:hover .btn-edit,
  192. #name-form .btn-edit:focus,
  193. #name-form:hover .btn-edit {
  194. position:relative !important;
  195. left:0;
  196. padding: 0 10px;
  197. }
  198. .js-desc textarea {
  199. margin-bottom:5px;
  200. }
  201. #author-form .form-control-static {
  202. margin-bottom:0;
  203. }
  204. #poll-rules-form p, #poll-hidden-form p,
  205. .jumbotron p.well {
  206. font-size:16px;
  207. }
  208. .jumbotron p {
  209. font-weight: normal;
  210. }
  211. /* Tableau du sondage */
  212. #tableContainer {
  213. overflow-x:auto;
  214. margin:5px auto;
  215. }
  216. table.results {
  217. margin:0 auto;
  218. }
  219. table.results > tbody > tr:hover > td,
  220. table.results > tbody > tr:hover > th {
  221. opacity:0.85;
  222. }
  223. table.results > tbody > tr#vote-form:hover > td,
  224. table.results > tbody > tr#vote-form:hover > th {
  225. opacity:1;
  226. }
  227. table.results tbody td {
  228. text-align:center;
  229. padding:1px 5px;
  230. border-bottom: 2px solid white;
  231. border-top: 2px solid white;
  232. }
  233. table.results thead th {
  234. text-align:center;
  235. border:2px solid white;
  236. padding: 5px;
  237. min-width:40px;
  238. font-size:12px;
  239. max-width:100px;
  240. overflow:hidden;
  241. text-overflow:ellipsis;
  242. }
  243. table.results thead th img {
  244. max-width: 100%;
  245. }
  246. table.results thead .btn {
  247. margin: 0 auto;
  248. display: block;
  249. }
  250. table.results th.rbd.day,
  251. table.results th.rbd.bg-info,
  252. table.results td.rbd {
  253. border-right: 2px dotted white;
  254. }
  255. table.results th.bg-primary.month,
  256. table.results th.day,
  257. table.results th.bg-info {
  258. border-bottom:none;
  259. border-top:none;
  260. border-right: 2px dotted white;
  261. border-left: 2px dotted white;
  262. }
  263. table.results tbody th.bg-info {
  264. border-right: 2px solid white;
  265. border-left: 2px solid white;
  266. text-align:center;
  267. min-width:150px;
  268. }
  269. table.results th.bg-primary.month,
  270. table.results th.day {
  271. text-align:left;
  272. }
  273. table.results #nom {
  274. width:115px;
  275. }
  276. table.results .btn-link.btn-sm {
  277. padding:2px;
  278. }
  279. #addition {
  280. vertical-align:top;
  281. }
  282. #showChart {
  283. margin-top:30px;
  284. }
  285. #Chart {
  286. padding-right:30px;
  287. }
  288. /* Formulaire de création de sondage */
  289. @media (max-width: 767px) {
  290. #formulaire .col-xs-12 {
  291. padding-left: 0;
  292. margin-bottom: 20px;
  293. }
  294. }
  295. /* Formulaire de vote */
  296. #vote-form td ul, #vote-form td label {
  297. margin:0;
  298. font-size:12px;
  299. }
  300. #vote-form td label {
  301. padding: 1px 3px;
  302. }
  303. #vote-form td {
  304. border-top:2px solid white;
  305. }
  306. #vote-form td:first-child {
  307. min-width: 180px;
  308. }
  309. .yes input, .ifneedbe input,.no input {
  310. position: absolute;
  311. width: 1px;
  312. height: 1px;
  313. padding: 0;
  314. margin: -1px;
  315. overflow: hidden;
  316. clip: rect(0px, 0px, 0px, 0px);
  317. border: 0 none;
  318. }
  319. .choice input:focus + label {
  320. outline: 2px dotted #000;
  321. outline-offset: -2px;
  322. }
  323. .choice {
  324. width: 35px;
  325. margin:0 auto !important;
  326. }
  327. .choice label {
  328. cursor: pointer;
  329. }
  330. td.btn-edit {
  331. padding: 5px;
  332. }
  333. span.edit-username-left {
  334. float: right;
  335. }
  336. .yes .btn, .ifneedbe .btn, .no .btn {
  337. width: 35px;
  338. color: #555;
  339. }
  340. .yes .btn,.yes .btn:hover {
  341. border-bottom-right-radius:0 !important;
  342. border-bottom-left-radius:0 !important;
  343. margin-bottom:-1px !important;
  344. margin-top:4px !important;
  345. color: #677835;
  346. }
  347. .ifneedbe .btn,.ifneedbe .btn:hover {
  348. border-radius: 0;
  349. color: #C48A1B;
  350. }
  351. .no .btn,.no .btn:hover{
  352. border-top-right-radius:0 !important;
  353. border-top-left-radius:0 !important;
  354. margin-bottom:4px !important;
  355. margin-top:-1px !important;
  356. color: #AD220F;
  357. }
  358. .yes input[type="radio"]:checked + label { /* =.btn-success.active */
  359. color: #fff;
  360. background-color: #768745;
  361. border-color: #67753C;
  362. box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125) inset;
  363. }
  364. .ifneedbe input[type="radio"]:checked + label { /* =.btn-warning.active */
  365. color: #fff;
  366. background-color: #CF9800;
  367. border-color: #BD8A00;
  368. box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125) inset;
  369. }
  370. .no input[type="radio"]:checked + label { /* =.btn-danger.active */
  371. color: #fff;
  372. background-color: #BF2511;
  373. border-color: #AD220F;
  374. box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125) inset;
  375. }
  376. /* Button and results "No" */
  377. .no .btn.startunchecked {
  378. box-shadow:none !important;
  379. color:#AD220F !important;
  380. background:#fff !important;
  381. border-color:#bdbdbd !important;
  382. }
  383. .no .btn.startunchecked:hover {
  384. background-color: #E0E0E0 !important;
  385. border-color: #949494 !important;
  386. }
  387. table.results .bg-danger .glyphicon {
  388. opacity:0;
  389. -moz-animation-name: hideNoIcon;
  390. -moz-animation-iteration-count: 1;
  391. -moz-animation-timing-function: ease-in;
  392. -moz-animation-duration: 2s;
  393. -webkit-animation-name: hideNoIcon;
  394. -webkit-animation-iteration-count: 1;
  395. -webkit-animation-timing-function: ease-in;
  396. -webkit-animation-duration: 2s;
  397. animation-name: hideNoIcon;
  398. animation-iteration-count: 1;
  399. animation-timing-function: ease-in;
  400. animation-duration: 2s;
  401. }
  402. @-moz-keyframes hideNoIcon {
  403. 0% {
  404. opacity:1;
  405. }
  406. 100% {
  407. opacity:0;
  408. }
  409. }
  410. @-webkit-keyframes hideNoIcon {
  411. 0% {
  412. opacity:1;
  413. }
  414. 100% {
  415. opacity:0;
  416. }
  417. }
  418. @keyframes hideNoIcon {
  419. 0% {
  420. opacity:1;
  421. }
  422. 100% {
  423. opacity:0;
  424. }
  425. }
  426. table.results > tbody > tr:hover > td .glyphicon {
  427. opacity:1
  428. }
  429. /* create_date_poll.php */
  430. #selected-days .form-group {
  431. margin-left:0;
  432. margin-right:0;
  433. }
  434. #selected-days legend input {
  435. box-shadow: none;
  436. border-width:0;
  437. color: #333;
  438. font-size: 21px;
  439. border-radius:0;
  440. margin-bottom:-1px;
  441. background:transparent;
  442. }
  443. #selected-days legend input:hover,
  444. #selected-days legend input:focus {
  445. border-bottom-width:1px;
  446. background-color:#E6E6E6;
  447. }
  448. #selected-days legend .input-group-addon {
  449. border:none;
  450. background:transparent;
  451. }
  452. #selected-days legend .input-group-addon:last-of-type {
  453. padding-top: 0;
  454. padding-bottom: 0;
  455. }
  456. #selected-days legend {
  457. height: 33px;
  458. }
  459. /* create_classic_poll.php */
  460. .md-a-img {
  461. text-decoration:none !important;
  462. }
  463. #md-a-imgModal .form-group {
  464. margin:10px 0;
  465. }
  466. #md-a-imgModalLabel {
  467. font-size: 24px;
  468. }
  469. /* Admin */
  470. #poll_search {
  471. cursor: pointer;
  472. }
  473. .table-of-polls {
  474. overflow-x: scroll;
  475. margin-bottom: 0;
  476. border: 0;
  477. box-shadow: none;
  478. }
  479. /* Studs */
  480. .password_request {
  481. padding-top: 15px;
  482. padding-bottom: 15px;
  483. }
  484. #password-form .btn-cancel {
  485. float: right;
  486. }
  487. /* Buttons */
  488. .btn {
  489. white-space: normal;
  490. }