You are here

media_directories_ui.browser.css in Media Directories 2.x

.browser {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 3px;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}

.browser > div {
  box-sizing: border-box;
}

.browser .browser-status {
  align-self: center;
}

.browser .form-actions {
  margin: 0 1em;
}

.browser--header {
  width: 100%;
  background: #e1e2dc87;
  border-bottom: 1px solid #ccc;
  padding: 1em;
  align-self: self-start;
}

.browser--body {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  align-self: stretch;
  height: 75vh;
  width: 100%;
}

.browser--footer {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  background: #e1e2dc87;
  border-top: 1px solid #ccc;
  padding: 1em;
  align-self: self-end;
}

.browser--header a.button,
.browser--footer input.button  {
  margin-top: 0;
  margin-bottom: 0;
}

.browser--tree {
  overflow: auto;
  width: 25%;
  max-width: 350px;
  background: #fcfcfa87;
  padding: 0;
  border-right: 1px solid #ccc;
}

.browser--listing {
  width: 75%;
  flex-grow: 1;
  padding: 1em;
  overflow: auto;
}

.browser--listing .form-actions {
  display: none;
}

.browser-toolbar {
  display: flex;
}

.browser-toolbar__item {
  margin-right: 1em;
  align-self: center;
}

.browser-toolbar__item-right {
  margin-left: auto;
  align-self: center;
}

.media-browser--full .browser--body {
  height: 65vh;
}

.jstree-wholerow-ul {
  width: 100%;
}

.jstree-wholerow{
  opacity: 0.75;
}

File

modules/media_directories_ui/css/media_directories_ui.browser.css
View source
  1. .browser {
  2. display: flex;
  3. flex-wrap: wrap;
  4. box-sizing: border-box;
  5. border: 1px solid #ccc;
  6. border-radius: 3px;
  7. -webkit-touch-callout: none; /* iOS Safari */
  8. -webkit-user-select: none; /* Safari */
  9. -khtml-user-select: none; /* Konqueror HTML */
  10. -moz-user-select: none; /* Firefox */
  11. -ms-user-select: none; /* Internet Explorer/Edge */
  12. user-select: none;
  13. }
  14. .browser > div {
  15. box-sizing: border-box;
  16. }
  17. .browser .browser-status {
  18. align-self: center;
  19. }
  20. .browser .form-actions {
  21. margin: 0 1em;
  22. }
  23. .browser--header {
  24. width: 100%;
  25. background: #e1e2dc87;
  26. border-bottom: 1px solid #ccc;
  27. padding: 1em;
  28. align-self: self-start;
  29. }
  30. .browser--body {
  31. display: flex;
  32. flex-wrap: nowrap;
  33. align-items: stretch;
  34. align-self: stretch;
  35. height: 75vh;
  36. width: 100%;
  37. }
  38. .browser--footer {
  39. display: flex;
  40. justify-content: flex-end;
  41. width: 100%;
  42. background: #e1e2dc87;
  43. border-top: 1px solid #ccc;
  44. padding: 1em;
  45. align-self: self-end;
  46. }
  47. .browser--header a.button,
  48. .browser--footer input.button {
  49. margin-top: 0;
  50. margin-bottom: 0;
  51. }
  52. .browser--tree {
  53. overflow: auto;
  54. width: 25%;
  55. max-width: 350px;
  56. background: #fcfcfa87;
  57. padding: 0;
  58. border-right: 1px solid #ccc;
  59. }
  60. .browser--listing {
  61. width: 75%;
  62. flex-grow: 1;
  63. padding: 1em;
  64. overflow: auto;
  65. }
  66. .browser--listing .form-actions {
  67. display: none;
  68. }
  69. .browser-toolbar {
  70. display: flex;
  71. }
  72. .browser-toolbar__item {
  73. margin-right: 1em;
  74. align-self: center;
  75. }
  76. .browser-toolbar__item-right {
  77. margin-left: auto;
  78. align-self: center;
  79. }
  80. .media-browser--full .browser--body {
  81. height: 65vh;
  82. }
  83. .jstree-wholerow-ul {
  84. width: 100%;
  85. }
  86. .jstree-wholerow{
  87. opacity: 0.75;
  88. }