ouatminimal.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353
  1. /* trying to get more vertical space for the boussole */
  2. .adminimal .content-header {
  3. background-color: #434343;
  4. padding: 0.5rem 0 0;
  5. }
  6. .adminimal .page-title,
  7. .adminimal .heading-a {
  8. font-size: 1.5em;
  9. }
  10. .toolbar-tray a {
  11. padding: 0.5em 1.3333em;
  12. }
  13. .is-horizontal .tabs.primary a {
  14. padding: 0 2em 0 2em;
  15. background-image: none;
  16. }
  17. /* END trying to get more vertical space for the boussole */
  18. #toolbar-item-administration-tray .toolbar-box > button {
  19. display: none;
  20. }
  21. div[data-drupal-selector=edit-actions] {
  22. display: flex;
  23. flex-direction: column;
  24. }
  25. div[data-drupal-selector=edit-actions] > * {
  26. width: 10em;
  27. margin: 0 0 0.5em !important;
  28. }
  29. .adminimal input.form-autocomplete, .adminimal input.form-text, .adminimal input.form-tel, .adminimal input.form-email, .adminimal input.form-url, .adminimal input.form-search, .adminimal input.form-number, .adminimal input.form-color, .adminimal input.form-file, .adminimal input.form-date, .adminimal input.form-time, .adminimal textarea.form-textarea {
  30. background-color: #fff;
  31. border-radius: 3px;
  32. }
  33. .adminimal select {
  34. background-color: #fff;
  35. border-radius: 3px;
  36. }
  37. .adminimal .button {
  38. /* background-color: #2196F3; */
  39. border-radius: 5px;
  40. padding: 0.3em 0.5em;
  41. }
  42. .adminimal .button,
  43. .adminimal .image-button {
  44. margin-right: 0.5em;
  45. margin-left: 0.5em;
  46. }
  47. .adminimal .button:first-child,
  48. .adminimal .image-button:first-child {
  49. margin-right: 0;
  50. margin-left: 0;
  51. }
  52. .js td .dropbutton-multiple {
  53. border-radius: 3px;
  54. }
  55. .views-exposed-form {
  56. font-size: 0.9em;
  57. }
  58. .views-exposed-form input[type=text] {
  59. max-width: 10em;
  60. }
  61. .views-exposed-form input[type=text].form-autocomplete {
  62. max-width: 14em;
  63. }
  64. .views-exposed-form select.form-select {
  65. min-height: 0;
  66. padding: 0.2em 0.4em 0.2em 0.5em;
  67. }
  68. /**
  69. * Node add/edit form layout
  70. */
  71. /* Narrow screens */
  72. .layout-region {
  73. box-sizing: border-box;
  74. }
  75. /* Wide screens */
  76. @media screen and (min-width: 780px), (orientation: landscape) and (min-device-height: 780px) {
  77. .layout-region-node-center {
  78. display: flex;
  79. flex-direction: row;
  80. gap: 1em;
  81. }
  82. [dir=rtl] .layout-region-node-center {
  83. display: flex;
  84. flex-direction: row-reverse;
  85. }
  86. .layout-region-node-main {
  87. /* reset */
  88. float: none;
  89. box-sizing: border-box;
  90. padding-right: 0; /* LTR */
  91. /* custom */
  92. flex: 1 0 auto;
  93. }
  94. [dir=rtl] .layout-region-node-main {
  95. float: none;
  96. padding-right: 0;
  97. padding-left: 0;
  98. }
  99. .layout-region-node-secondary {
  100. /* reset */
  101. float: none; /* LTR */
  102. width: auto;
  103. /* custom */
  104. flex: 0 0 25em;
  105. }
  106. [dir=rtl] .layout-region-node-secondary {
  107. float: none;
  108. }
  109. /* @todo File an issue to add a standard class to all text-like inputs */
  110. .layout-region-node-secondary .form-autocomplete,
  111. .layout-region-node-secondary .form-text,
  112. .layout-region-node-secondary .form-tel,
  113. .layout-region-node-secondary .form-email,
  114. .layout-region-node-secondary .form-url,
  115. .layout-region-node-secondary .form-search,
  116. .layout-region-node-secondary .form-number,
  117. .layout-region-node-secondary .form-color,
  118. .layout-region-node-secondary textarea {
  119. box-sizing: border-box;
  120. width: 100%;
  121. max-width: 100%;
  122. }
  123. }
  124. /**
  125. * The vertical toolbar mode gets triggered for narrow screens, which throws off
  126. * the intent of media queries written for the viewport width. When the vertical
  127. * toolbar is on, we need to suppress layout for the original media width + the
  128. * toolbar width (240px). In this case, 240px + 780px.
  129. */
  130. @media screen and (max-width: 1020px) {
  131. .toolbar-vertical.toolbar-tray-open .layout-region-node-center {
  132. display: block;
  133. }
  134. .toolbar-vertical.toolbar-tray-open .layout-region-node-main,
  135. .toolbar-vertical.toolbar-tray-open .layout-region-node-footer,
  136. .toolbar-vertical.toolbar-tray-open .layout-region-node-secondary {
  137. float: none;
  138. width: auto;
  139. padding-right: 0;
  140. }
  141. }
  142. /* BOUSSOLE FORM */
  143. #node-concernement-edit-form .layout-region-node-secondary {
  144. position: fixed;
  145. background-color: #fff;
  146. bottom: 0;
  147. left: 2.5em;
  148. width: 200px;
  149. /* #edit-actions a.button--danger{
  150. margin-top: 2em;
  151. } */
  152. }
  153. #node-concernement-edit-form .layout-region-node-secondary > * {
  154. font-size: 0.765em;
  155. }
  156. #node-concernement-edit-form .layout-region-node-secondary #edit-actions {
  157. display: flex;
  158. flex-direction: column;
  159. gap: 1em;
  160. }
  161. #node-concernement-edit-form .layout-region-node-secondary #edit-actions input,
  162. #node-concernement-edit-form .layout-region-node-secondary #edit-actions a {
  163. font-size: 1em;
  164. margin: 0;
  165. }
  166. #node-concernement-edit-form .vertical-tabs__menu {
  167. /* width: auto; */
  168. max-width: 200px;
  169. }
  170. #node-concernement-edit-form .vertical-tabs__panes {
  171. margin-left: 200px;
  172. }
  173. #node-concernement-edit-form .field--name-title label,
  174. #node-concernement-edit-form .field--name-field-description label,
  175. #node-concernement-edit-form .field--name-field-caillou label,
  176. #node-concernement-edit-form #node-concernement-form .field--name-title label,
  177. #node-concernement-edit-form #node-concernement-form .field--name-field-description label,
  178. #node-concernement-edit-form #node-concernement-form .field--name-field-caillou label {
  179. display: none;
  180. }
  181. #node-concernement-edit-form .field--name-title > .form-item > div,
  182. #node-concernement-edit-form .field--name-field-description > .form-item > div,
  183. #node-concernement-edit-form .field--name-field-caillou > .form-item > div,
  184. #node-concernement-edit-form #node-concernement-form .field--name-title > .form-item > div,
  185. #node-concernement-edit-form #node-concernement-form .field--name-field-description > .form-item > div,
  186. #node-concernement-edit-form #node-concernement-form .field--name-field-caillou > .form-item > div {
  187. font-weight: 600;
  188. }
  189. #node-concernement-edit-form .ief-entity-operations input[type=submit].ief-submit-remove {
  190. display: none;
  191. }
  192. #node-concernement-edit-form .field--name-field-date > * {
  193. display: inline-block;
  194. }
  195. #node-concernement-edit-form .field--name-field-reponse > .field__item {
  196. padding-top: 1em;
  197. }
  198. #node-concernement-edit-form .field--name-field-reponse > .field__item:not(:last-of-type) {
  199. padding-bottom: 1em;
  200. border-bottom: #ccc 1px solid;
  201. margin-bottom: 1em;
  202. }
  203. #node-concernement-edit-form .field--type-text-long .filter-wrapper {
  204. display: none;
  205. }
  206. #boussole-layout {
  207. display: flex;
  208. flex-direction: row;
  209. gap: 1em;
  210. }
  211. #boussole-layout textarea {
  212. resize: vertical;
  213. }
  214. #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] {
  215. flex: 0 0 50em;
  216. max-height: calc(100vh - 150px);
  217. overflow-y: auto;
  218. }
  219. #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] > table.field-multiple-table, #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] > table.field-multiple-table > tbody, #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] > table.field-multiple-table > tbody > tr {
  220. width: 100%;
  221. word-break: break-all;
  222. overflow-wrap: break-word;
  223. }
  224. #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] > table.field-multiple-table > tbody > tr {
  225. border: none;
  226. }
  227. #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] > table.field-multiple-table > tbody > tr > td:not(.field-multiple-drag) > div {
  228. padding: 0.5em;
  229. border: 1px solid #bbb;
  230. border-radius: 5px;
  231. transition: all 2s ease-in-out;
  232. }
  233. #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] > table.field-multiple-table > tbody > tr > td:not(.field-multiple-drag) > div.entite-over {
  234. border-color: #01ffe2;
  235. transition: all 0.2s ease-in-out;
  236. }
  237. #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] > table.field-multiple-table > tbody > tr > td:not(.field-multiple-drag) > div .horizontal-tabs-panes > details > .seven-details__wrapper {
  238. padding: 0;
  239. }
  240. #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] .field--type-entity-reference.field--name-field-entite.field--widget-inline-entity-form-complex > div > fieldset {
  241. border: none;
  242. margin: 0;
  243. padding: 0;
  244. }
  245. #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] .field--type-entity-reference.field--name-field-entite.field--widget-inline-entity-form-complex > div > fieldset > legend {
  246. display: none;
  247. }
  248. #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] .field--type-entity-reference.field--name-field-entite.field--widget-inline-entity-form-complex > div > fieldset .fieldset-wrapper > table > thead {
  249. display: none;
  250. }
  251. #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] .field--type-entity-reference.field--name-field-entite.field--widget-inline-entity-form-complex > div > fieldset .fieldset-wrapper > table > tbody > tr {
  252. border: none;
  253. }
  254. #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] td.field-multiple-drag {
  255. min-width: 0;
  256. width: 25px;
  257. }
  258. #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] div.field--type-image thead,
  259. #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] div.field--type-file thead {
  260. display: none;
  261. }
  262. #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] div.field--type-image .form-managed-file,
  263. #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] div.field--type-file .form-managed-file {
  264. width: 420px;
  265. }
  266. #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] div.field--type-image .form-managed-file input[type=text],
  267. #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] div.field--type-file .form-managed-file input[type=text] {
  268. width: 90%;
  269. }
  270. #boussole-layout > .form-item[data-drupal-selector=edit-field-entite] .button {
  271. font-size: 0.9em;
  272. }
  273. #boussole-layout .boussole-wrapper {
  274. flex: 1 1 auto;
  275. min-width: 800px;
  276. /* boussole */
  277. }
  278. #boussole-layout .boussole-wrapper .boussole {
  279. background-image: url(../images/boussole.svg);
  280. background-clip: padding-box;
  281. background-size: contain;
  282. background-repeat: no-repeat;
  283. background-position: center;
  284. position: relative;
  285. padding: 8%;
  286. box-sizing: border-box;
  287. /* width:100%; */
  288. }
  289. #boussole-layout .boussole-wrapper .boussole .entity {
  290. position: absolute;
  291. width: 10px;
  292. height: 10px;
  293. border-radius: 5px;
  294. background-color: black;
  295. transform: translate(-5px, -5px);
  296. cursor: move;
  297. }
  298. #boussole-layout .boussole-wrapper .boussole .entity.entite-over {
  299. background-color: #01ffe2;
  300. }
  301. #boussole-layout .boussole-wrapper .boussole .entity.ajax-new {
  302. background-color: #fff;
  303. border: 1px solid black;
  304. }
  305. #boussole-layout .boussole-wrapper .boussole .entity.ajax-new.entite-over {
  306. border: 1px solid 1ffe2;
  307. }
  308. #boussole-layout .boussole-wrapper .boussole .entity.hide {
  309. display: none;
  310. }
  311. div.field--name-field-actuel-future.form-wrapper,
  312. div.field--name-field-prise.form-wrapper,
  313. div.field--name-field-menace-maintien-degres.form-wrapper {
  314. display: none;
  315. }
  316. div.field--name-field-action.form-wrapper label,
  317. div.field--name-field-menace-maintien label {
  318. display: none;
  319. }
  320. fieldset[data-drupal-selector=edit-field-besoin] {
  321. border: none;
  322. margin: 0;
  323. padding: 0;
  324. }
  325. fieldset[data-drupal-selector=edit-field-besoin] > legend {
  326. display: none;
  327. }
  328. fieldset[data-drupal-selector=edit-field-besoin] > div.fieldset-wrapper > table > tbody > tr.ief-row-form {
  329. border: 1px #ccc solid;
  330. }
  331. /*# sourceMappingURL=ouatminimal.css.map */