You are here

Home » API reference » Gutenberg 8.2

admin.css in Gutenberg 8.2

Same filename in this branch
  1. 8.2 css/admin.css
  2. 8.2 modules/editorskit/admin.css
Same filename and directory in other branches
  1. 8 css/admin.css
/**
 * Don't edit this file. Find all style at ./sass folder.
 **/
#media-browser-modal {
  padding: 0;
  overflow: hidden !important;
}

.ui-dialog .form-actions .selected-summary {
  float: left;
  width: 50%;
}

.ui-dialog .form-actions .buttons {
  display: flex;
  justify-content: flex-end;
}

.ui-dialog .form-actions .buttons > * {
  margin: 0 5px;
}

.media-browser {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.media-browser .content {
  overflow: hidden;
  height: 100%;
}

.media-browser .content .toolbar {
  padding: 5px 10px;
}

.media-browser .content .list {
  position: absolute;
  left: 0;
  right: 320px;
  top: 50px;
  bottom: 0;
  overflow: auto;
}

.media-browser .content .media-details {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 300px;
  overflow: auto;
  padding: 10px;
  background-color: #f0f0f0;
}

.media-browser .content .media-details figure {
  padding: 0;
  margin: 0;
}

.media-browser .content .media-details figure img {
  max-height: 200px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.media-browser .content .media-details figure figcaption {
  overflow-wrap: break-word;
}

.media-browser .content .media-details figure video {
  width: 100%;
}

.media-browser ul.list {
  padding: 2px;
  margin: 0;
  list-style: none;
}

.media-browser li.attachment {
  width: 16.6%;
  padding: 8px;
  margin: 0;
  position: relative;
  list-style: none;
  float: left;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.media-browser li.attachment img {
  max-height: none;
  max-width: none;
}

.media-browser li.attachment .landscape img {
  max-height: 100%;
}

.media-browser li.attachment .portrait img {
  max-width: 100%;
}

.media-browser li.attachment .thumbnail {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 1;
  transition: opacity 0.1s;
}

.media-browser li.attachment .thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
}

.media-browser li.attachment .thumbnail .centered {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate(50%, 50%);
}

.media-browser li.attachment .thumbnail .centered img {
  transform: translate(-50%, -50%);
}

.media-browser li.attachment .thumbnail:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.media-browser li.attachment .thumbnail .filename {
  position: absolute;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px;
  border-top: solid 1px #eee;
}

.media-browser li.attachment .check {
  display: none;
  height: 24px;
  width: 24px;
  padding: 0;
  border: 0;
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  outline: 0;
  cursor: pointer;
  background-color: #0073aa;
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #0073aa;
}

.media-browser li.attachment .check .media-modal-icon {
  display: block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="white" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>');
  height: 15px;
  width: 15px;
  margin: 5px;
}

.media-browser li.attachment .check:hover .media-modal-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="white" d="M0 10h24v4h-24z"/></svg>');
}

.media-browser li.attachment.details {
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #0073aa;
}

.media-browser li.attachment.selected .check {
  display: block;
}

.media-browser li.attachment:focus {
  outline: none;
}

.media-browser .attachment-preview {
  position: relative;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  background: #eee;
  cursor: pointer;
  background-position: top center;
  background-repeat: no-repeat;
}

.media-browser .attachment-preview.type-application {
  background-image: url(../images/application.png);
}

.media-browser .attachment-preview.type-audio {
  background-image: url(../images/audio.png);
}

.media-browser .attachment-preview.type-video {
  background-image: url(../images/video.png);
}

.media-browser .attachment-preview:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.media-browser .media-modal-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="white" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>');
  background-repeat: no-repeat;
}

.media-browser .screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

#media-entity-browser-modal {
  padding: 0;
}

#media-entity-browser-modal > div {
  height: 100%;
}

#media-entity-browser-modal .media-library-wrapper {
  height: 100%;
  margin: 0;
}

#media-entity-browser-modal .media-library-select.form-submit {
  display: none;
}

#views-form-reusable-blocks-page-1 {
  display: flex;
  flex-wrap: wrap;
}

#views-form-reusable-blocks-page-1 #edit-header {
  flex-basis: 100%;
}

#views-form-reusable-blocks-page-1 #edit-block-content-bulk-form--2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

#views-form-reusable-blocks-page-1 #edit-block-content-bulk-form--2 .form-item {
  margin: 0 10px;
}

#views-form-reusable-blocks-page-1 #edit-block-content-bulk-form--2 .form-item:first-child {
  margin-left: 0;
}

#views-form-reusable-blocks-page-1 #edit-block-content-bulk-form--2 .form-actions {
  padding: 0;
  margin: 0;
}

#views-form-reusable-blocks-page-1 #edit-block-content-bulk-form--2 .form-actions .button {
  margin: 0;
}

#views-form-reusable-blocks-page-1 #edit-actions {
  flex-basis: 100%;
}

#views-form-reusable-blocks-page-1 .form-actions {
  margin: 0.75em 0;
  align-self: flex-end;
}

#views-form-reusable-blocks-page-1 .views-row {
  cursor: pointer;
  width: 360px;
  max-height: 360px;
  overflow: hidden;
  position: relative;
  border: 1px solid #dbdbdb;
  background: #fff;
  margin: 16px 16px 2px 2px;
  transition: border-color 0.2s, color 0.2s;
}

#views-form-reusable-blocks-page-1 .views-row:hover {
  margin: 14px 14px 0 0;
  border: solid 3px #40b6ff;
}

#views-form-reusable-blocks-page-1 .views-row .views-field-info {
  padding: 0 10px;
  border-bottom: 1px solid #dbdbdb;
}

#views-form-reusable-blocks-page-1 .views-row .views-field.views-field-body {
  transform: scale(0.5);
  transform-origin: top left;
  width: 720px;
  max-height: 180px;
}

#views-form-reusable-blocks-page-1 .views-row .views-field-block-content-bulk-form .field-content {
  position: absolute;
  top: 0;
  right: 10px;
}

#edit-allowed-blocks-details .details-wrapper {
  display: flex;
  flex-direction: row;
}

#edit-allowed-blocks-details .details-wrapper fieldset {
  flex: 1;
  margin-right: 10px;
}

#edit-allowed-blocks-details .details-wrapper fieldset:last-child {
  margin-right: 0;
}

#edit-allowed-drupal-blocks-details .details-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#edit-allowed-drupal-blocks-details .details-wrapper fieldset {
  margin-right: 10px;
}

#edit-allowed-drupal-blocks-details .details-wrapper fieldset:last-child {
  margin-right: 0;
}

.ajax-progress-throbber .throbber {
  padding: 1px 7px 2px !important;
}

/*# sourceMappingURL=admin.css.map */

File

css/admin.css
View source 
  1. /**

  2.  * Don't edit this file. Find all style at ./sass folder.

  3.  **/

  4. #media-browser-modal {

  5.   padding: 0;

  6.   overflow: hidden !important;

  7. }

  8. 

  9. .ui-dialog .form-actions .selected-summary {

  10.   float: left;

  11.   width: 50%;

  12. }

  13. 

  14. .ui-dialog .form-actions .buttons {

  15.   display: flex;

  16.   justify-content: flex-end;

  17. }

  18. 

  19. .ui-dialog .form-actions .buttons > * {

  20.   margin: 0 5px;

  21. }

  22. 

  23. .media-browser {

  24.   height: 100%;

  25.   position: relative;

  26.   overflow: hidden;

  27. }

  28. 

  29. .media-browser .content {

  30.   overflow: hidden;

  31.   height: 100%;

  32. }

  33. 

  34. .media-browser .content .toolbar {

  35.   padding: 5px 10px;

  36. }

  37. 

  38. .media-browser .content .list {

  39.   position: absolute;

  40.   left: 0;

  41.   right: 320px;

  42.   top: 50px;

  43.   bottom: 0;

  44.   overflow: auto;

  45. }

  46. 

  47. .media-browser .content .media-details {

  48.   position: absolute;

  49.   right: 0;

  50.   top: 0;

  51.   bottom: 0;

  52.   width: 300px;

  53.   overflow: auto;

  54.   padding: 10px;

  55.   background-color: #f0f0f0;

  56. }

  57. 

  58. .media-browser .content .media-details figure {

  59.   padding: 0;

  60.   margin: 0;

  61. }

  62. 

  63. .media-browser .content .media-details figure img {

  64.   max-height: 200px;

  65.   margin-left: auto;

  66.   margin-right: auto;

  67.   display: block;

  68. }

  69. 

  70. .media-browser .content .media-details figure figcaption {

  71.   overflow-wrap: break-word;

  72. }

  73. 

  74. .media-browser .content .media-details figure video {

  75.   width: 100%;

  76. }

  77. 

  78. .media-browser ul.list {

  79.   padding: 2px;

  80.   margin: 0;

  81.   list-style: none;

  82. }

  83. 

  84. .media-browser li.attachment {

  85.   width: 16.6%;

  86.   padding: 8px;

  87.   margin: 0;

  88.   position: relative;

  89.   list-style: none;

  90.   float: left;

  91.   box-sizing: border-box;

  92.   -webkit-user-select: none;

  93.   -moz-user-select: none;

  94.   -ms-user-select: none;

  95.   user-select: none;

  96. }

  97. 

  98. .media-browser li.attachment img {

  99.   max-height: none;

  100.   max-width: none;

  101. }

  102. 

  103. .media-browser li.attachment .landscape img {

  104.   max-height: 100%;

  105. }

  106. 

  107. .media-browser li.attachment .portrait img {

  108.   max-width: 100%;

  109. }

  110. 

  111. .media-browser li.attachment .thumbnail {

  112.   overflow: hidden;

  113.   position: absolute;

  114.   top: 0;

  115.   right: 0;

  116.   bottom: 0;

  117.   left: 0;

  118.   opacity: 1;

  119.   transition: opacity 0.1s;

  120. }

  121. 

  122. .media-browser li.attachment .thumbnail img {

  123.   position: absolute;

  124.   top: 0;

  125.   left: 0;

  126. }

  127. 

  128. .media-browser li.attachment .thumbnail .centered {

  129.   position: absolute;

  130.   top: 0;

  131.   left: 0;

  132.   width: 100%;

  133.   height: 100%;

  134.   transform: translate(50%, 50%);

  135. }

  136. 

  137. .media-browser li.attachment .thumbnail .centered img {

  138.   transform: translate(-50%, -50%);

  139. }

  140. 

  141. .media-browser li.attachment .thumbnail:after {

  142.   content: "";

  143.   display: block;

  144.   position: absolute;

  145.   top: 0;

  146.   left: 0;

  147.   right: 0;

  148.   bottom: 0;

  149.   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);

  150.   overflow: hidden;

  151. }

  152. 

  153. .media-browser li.attachment .thumbnail .filename {

  154.   position: absolute;

  155.   bottom: 0;

  156.   background-color: rgba(255, 255, 255, 0.8);

  157.   padding: 5px;

  158.   border-top: solid 1px #eee;

  159. }

  160. 

  161. .media-browser li.attachment .check {

  162.   display: none;

  163.   height: 24px;

  164.   width: 24px;

  165.   padding: 0;

  166.   border: 0;

  167.   position: absolute;

  168.   z-index: 10;

  169.   top: 0;

  170.   right: 0;

  171.   outline: 0;

  172.   cursor: pointer;

  173.   background-color: #0073aa;

  174.   box-shadow: 0 0 0 1px #fff, 0 0 0 2px #0073aa;

  175. }

  176. 

  177. .media-browser li.attachment .check .media-modal-icon {

  178.   display: block;

  179.   background-image: url('data:image/svg+xml;utf8,');

  180.   height: 15px;

  181.   width: 15px;

  182.   margin: 5px;

  183. }

  184. 

  185. .media-browser li.attachment .check:hover .media-modal-icon {

  186.   background-image: url('data:image/svg+xml;utf8,');

  187. }

  188. 

  189. .media-browser li.attachment.details {

  190.   box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px #0073aa;

  191. }

  192. 

  193. .media-browser li.attachment.selected .check {

  194.   display: block;

  195. }

  196. 

  197. .media-browser li.attachment:focus {

  198.   outline: none;

  199. }

  200. 

  201. .media-browser .attachment-preview {

  202.   position: relative;

  203.   box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.05);

  204.   background: #eee;

  205.   cursor: pointer;

  206.   background-position: top center;

  207.   background-repeat: no-repeat;

  208. }

  209. 

  210. .media-browser .attachment-preview.type-application {

  211.   background-image: url(../images/application.png);

  212. }

  213. 

  214. .media-browser .attachment-preview.type-audio {

  215.   background-image: url(../images/audio.png);

  216. }

  217. 

  218. .media-browser .attachment-preview.type-video {

  219.   background-image: url(../images/video.png);

  220. }

  221. 

  222. .media-browser .attachment-preview:before {

  223.   content: "";

  224.   display: block;

  225.   padding-top: 100%;

  226. }

  227. 

  228. .media-browser .media-modal-icon {

  229.   background-image: url('data:image/svg+xml;utf8,');

  230.   background-repeat: no-repeat;

  231. }

  232. 

  233. .media-browser .screen-reader-text {

  234.   border: 0;

  235.   clip: rect(1px, 1px, 1px, 1px);

  236.   -webkit-clip-path: inset(50%);

  237.   clip-path: inset(50%);

  238.   height: 1px;

  239.   margin: -1px;

  240.   overflow: hidden;

  241.   padding: 0;

  242.   position: absolute;

  243.   width: 1px;

  244.   word-wrap: normal !important;

  245. }

  246. 

  247. #media-entity-browser-modal {

  248.   padding: 0;

  249. }

  250. 

  251. #media-entity-browser-modal > div {

  252.   height: 100%;

  253. }

  254. 

  255. #media-entity-browser-modal .media-library-wrapper {

  256.   height: 100%;

  257.   margin: 0;

  258. }

  259. 

  260. #media-entity-browser-modal .media-library-select.form-submit {

  261.   display: none;

  262. }

  263. 

  264. #views-form-reusable-blocks-page-1 {

  265.   display: flex;

  266.   flex-wrap: wrap;

  267. }

  268. 

  269. #views-form-reusable-blocks-page-1 #edit-header {

  270.   flex-basis: 100%;

  271. }

  272. 

  273. #views-form-reusable-blocks-page-1 #edit-block-content-bulk-form--2 {

  274.   display: flex;

  275.   flex-wrap: wrap;

  276.   align-items: baseline;

  277. }

  278. 

  279. #views-form-reusable-blocks-page-1 #edit-block-content-bulk-form--2 .form-item {

  280.   margin: 0 10px;

  281. }

  282. 

  283. #views-form-reusable-blocks-page-1 #edit-block-content-bulk-form--2 .form-item:first-child {

  284.   margin-left: 0;

  285. }

  286. 

  287. #views-form-reusable-blocks-page-1 #edit-block-content-bulk-form--2 .form-actions {

  288.   padding: 0;

  289.   margin: 0;

  290. }

  291. 

  292. #views-form-reusable-blocks-page-1 #edit-block-content-bulk-form--2 .form-actions .button {

  293.   margin: 0;

  294. }

  295. 

  296. #views-form-reusable-blocks-page-1 #edit-actions {

  297.   flex-basis: 100%;

  298. }

  299. 

  300. #views-form-reusable-blocks-page-1 .form-actions {

  301.   margin: 0.75em 0;

  302.   align-self: flex-end;

  303. }

  304. 

  305. #views-form-reusable-blocks-page-1 .views-row {

  306.   cursor: pointer;

  307.   width: 360px;

  308.   max-height: 360px;

  309.   overflow: hidden;

  310.   position: relative;

  311.   border: 1px solid #dbdbdb;

  312.   background: #fff;

  313.   margin: 16px 16px 2px 2px;

  314.   transition: border-color 0.2s, color 0.2s;

  315. }

  316. 

  317. #views-form-reusable-blocks-page-1 .views-row:hover {

  318.   margin: 14px 14px 0 0;

  319.   border: solid 3px #40b6ff;

  320. }

  321. 

  322. #views-form-reusable-blocks-page-1 .views-row .views-field-info {

  323.   padding: 0 10px;

  324.   border-bottom: 1px solid #dbdbdb;

  325. }

  326. 

  327. #views-form-reusable-blocks-page-1 .views-row .views-field.views-field-body {

  328.   transform: scale(0.5);

  329.   transform-origin: top left;

  330.   width: 720px;

  331.   max-height: 180px;

  332. }

  333. 

  334. #views-form-reusable-blocks-page-1 .views-row .views-field-block-content-bulk-form .field-content {

  335.   position: absolute;

  336.   top: 0;

  337.   right: 10px;

  338. }

  339. 

  340. #edit-allowed-blocks-details .details-wrapper {

  341.   display: flex;

  342.   flex-direction: row;

  343. }

  344. 

  345. #edit-allowed-blocks-details .details-wrapper fieldset {

  346.   flex: 1;

  347.   margin-right: 10px;

  348. }

  349. 

  350. #edit-allowed-blocks-details .details-wrapper fieldset:last-child {

  351.   margin-right: 0;

  352. }

  353. 

  354. #edit-allowed-drupal-blocks-details .details-wrapper {

  355.   display: flex;

  356.   flex-direction: row;

  357.   flex-wrap: wrap;

  358. }

  359. 

  360. #edit-allowed-drupal-blocks-details .details-wrapper fieldset {

  361.   margin-right: 10px;

  362. }

  363. 

  364. #edit-allowed-drupal-blocks-details .details-wrapper fieldset:last-child {

  365.   margin-right: 0;

  366. }

  367. 

  368. .ajax-progress-throbber .throbber {

  369.   padding: 1px 7px 2px !important;

  370. }

  371. 

  372. /*# sourceMappingURL=admin.css.map */