You are here

Home » API reference » Gutenberg 8

admin.css in Gutenberg 8

Same filename in this branch
  1. 8 css/admin.css
  2. 8 modules/editorskit/admin.css
Same filename and directory in other branches
  1. 8.2 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 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 figcaption {

  64.   overflow-wrap: break-word;

  65. }

  66. 

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

  68.   width: 100%;

  69. }

  70. 

  71. .media-browser ul.list {

  72.   padding: 2px;

  73.   margin: 0;

  74.   list-style: none;

  75. }

  76. 

  77. .media-browser li.attachment {

  78.   width: 16.6%;

  79.   padding: 8px;

  80.   margin: 0;

  81.   position: relative;

  82.   list-style: none;

  83.   float: left;

  84.   box-sizing: border-box;

  85.   -webkit-user-select: none;

  86.   -moz-user-select: none;

  87.   -ms-user-select: none;

  88.   user-select: none;

  89. }

  90. 

  91. .media-browser li.attachment img {

  92.   max-height: none;

  93.   max-width: none;

  94. }

  95. 

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

  97.   max-height: 100%;

  98. }

  99. 

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

  101.   max-width: 100%;

  102. }

  103. 

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

  105.   overflow: hidden;

  106.   position: absolute;

  107.   top: 0;

  108.   right: 0;

  109.   bottom: 0;

  110.   left: 0;

  111.   opacity: 1;

  112.   transition: opacity 0.1s;

  113. }

  114. 

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

  116.   position: absolute;

  117.   top: 0;

  118.   left: 0;

  119. }

  120. 

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

  122.   position: absolute;

  123.   top: 0;

  124.   left: 0;

  125.   width: 100%;

  126.   height: 100%;

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

  128. }

  129. 

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

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

  132. }

  133. 

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

  135.   content: "";

  136.   display: block;

  137.   position: absolute;

  138.   top: 0;

  139.   left: 0;

  140.   right: 0;

  141.   bottom: 0;

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

  143.   overflow: hidden;

  144. }

  145. 

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

  147.   position: absolute;

  148.   bottom: 0;

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

  150.   padding: 5px;

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

  152. }

  153. 

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

  155.   display: none;

  156.   height: 24px;

  157.   width: 24px;

  158.   padding: 0;

  159.   border: 0;

  160.   position: absolute;

  161.   z-index: 10;

  162.   top: 0;

  163.   right: 0;

  164.   outline: 0;

  165.   cursor: pointer;

  166.   background-color: #0073aa;

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

  168. }

  169. 

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

  171.   display: block;

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

  173.   height: 15px;

  174.   width: 15px;

  175.   margin: 5px;

  176. }

  177. 

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

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

  180. }

  181. 

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

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

  184. }

  185. 

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

  187.   display: block;

  188. }

  189. 

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

  191.   outline: none;

  192. }

  193. 

  194. .media-browser .attachment-preview {

  195.   position: relative;

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

  197.   background: #eee;

  198.   cursor: pointer;

  199.   background-position: top center;

  200.   background-repeat: no-repeat;

  201. }

  202. 

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

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

  205. }

  206. 

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

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

  209. }

  210. 

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

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

  213. }

  214. 

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

  216.   content: "";

  217.   display: block;

  218.   padding-top: 100%;

  219. }

  220. 

  221. .media-browser .media-modal-icon {

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

  223.   background-repeat: no-repeat;

  224. }

  225. 

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

  227.   border: 0;

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

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

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

  231.   height: 1px;

  232.   margin: -1px;

  233.   overflow: hidden;

  234.   padding: 0;

  235.   position: absolute;

  236.   width: 1px;

  237.   word-wrap: normal !important;

  238. }

  239. 

  240. #media-entity-browser-modal {

  241.   padding: 0;

  242. }

  243. 

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

  245.   height: 100%;

  246. }

  247. 

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

  249.   height: 100%;

  250.   margin: 0;

  251. }

  252. 

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

  254.   display: none;

  255. }

  256. 

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

  258.   display: flex;

  259.   flex-wrap: wrap;

  260. }

  261. 

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

  263.   flex-basis: 100%;

  264. }

  265. 

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

  267.   display: flex;

  268.   flex-wrap: wrap;

  269.   align-items: baseline;

  270. }

  271. 

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

  273.   margin: 0 10px;

  274. }

  275. 

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

  277.   margin-left: 0;

  278. }

  279. 

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

  281.   padding: 0;

  282.   margin: 0;

  283. }

  284. 

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

  286.   margin: 0;

  287. }

  288. 

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

  290.   flex-basis: 100%;

  291. }

  292. 

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

  294.   margin: 0.75em 0;

  295.   align-self: flex-end;

  296. }

  297. 

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

  299.   cursor: pointer;

  300.   width: 360px;

  301.   max-height: 360px;

  302.   overflow: hidden;

  303.   position: relative;

  304.   border: 1px solid #dbdbdb;

  305.   background: #fff;

  306.   margin: 16px 16px 2px 2px;

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

  308. }

  309. 

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

  311.   margin: 14px 14px 0 0;

  312.   border: solid 3px #40b6ff;

  313. }

  314. 

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

  316.   padding: 0 10px;

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

  318. }

  319. 

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

  321.   transform: scale(0.5);

  322.   transform-origin: top left;

  323.   width: 720px;

  324.   max-height: 180px;

  325. }

  326. 

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

  328.   position: absolute;

  329.   top: 0;

  330.   right: 10px;

  331. }

  332. 

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

  334.   display: flex;

  335.   flex-direction: row;

  336. }

  337. 

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

  339.   flex: 1;

  340.   margin-right: 10px;

  341. }

  342. 

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

  344.   margin-right: 0;

  345. }

  346. 

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

  348.   display: flex;

  349.   flex-direction: row;

  350.   flex-wrap: wrap;

  351. }

  352. 

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

  354.   margin-right: 10px;

  355. }

  356. 

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

  358.   margin-right: 0;

  359. }

  360. 

  361. .ajax-progress-throbber .throbber {

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

  363. }

  364. 

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