wp/wp-admin/css/media.css
changeset 16 a86126ab1dd4
parent 9 177826044cd9
child 18 be944660c56a
equal deleted inserted replaced
15:3d4e9c994f10 16:a86126ab1dd4
    98 
    98 
    99 .media-item .edit-attachment,
    99 .media-item .edit-attachment,
   100 .describe-toggle-on,
   100 .describe-toggle-on,
   101 .describe-toggle-off {
   101 .describe-toggle-off {
   102 	display: block;
   102 	display: block;
   103 	line-height: 36px;
   103 	line-height: 2.76923076;
   104 	float: right;
   104 	float: right;
   105 	margin-right: 10px;
   105 	margin-right: 10px;
   106 }
   106 }
   107 
   107 
   108 .media-item .describe-toggle-off,
   108 .media-item .describe-toggle-off,
   130 #media-items:empty {
   130 #media-items:empty {
   131 	border: 0 none;
   131 	border: 0 none;
   132 }
   132 }
   133 
   133 
   134 .media-item .filename {
   134 .media-item .filename {
   135 	line-height: 36px;
   135 	line-height: 2.76923076;
   136 	overflow: hidden;
   136 	overflow: hidden;
   137 	margin-left: 6px;
   137 	margin-left: 6px;
   138 }
   138 }
   139 
   139 
   140 .media-item .pinkynail {
   140 .media-item .pinkynail {
   237 	background: #fcfcfc;
   237 	background: #fcfcfc;
   238 	border-bottom: 1px solid #ddd;
   238 	border-bottom: 1px solid #ddd;
   239 	height: 36px;
   239 	height: 36px;
   240 	font-size: 18px;
   240 	font-size: 18px;
   241 	font-weight: 600;
   241 	font-weight: 600;
   242 	line-height: 36px;
   242 	line-height: 2;
   243 	padding: 0 36px 0 16px;
   243 	padding: 0 36px 0 16px;
   244 	position: absolute;
   244 	position: absolute;
   245 	top: 0;
   245 	top: 0;
   246 	left: 0;
   246 	left: 0;
   247 	right: 0;
   247 	right: 0;
   304 	color: #666;
   304 	color: #666;
   305 }
   305 }
   306 
   306 
   307 #find-posts-close:hover,
   307 #find-posts-close:hover,
   308 #find-posts-close:focus {
   308 #find-posts-close:focus {
   309 	color: #00a0d2;
   309 	color: #006799;
   310 }
   310 }
   311 
   311 
   312 #find-posts-close:focus {
   312 #find-posts-close:focus {
   313 	box-shadow:
   313 	box-shadow:
   314 		0 0 0 1px #5b9dd9,
   314 		0 0 0 1px #5b9dd9,
   366 	opacity: 0.7;
   366 	opacity: 0.7;
   367 	filter: alpha(opacity=70);
   367 	filter: alpha(opacity=70);
   368 	z-index: 100100;
   368 	z-index: 100100;
   369 }
   369 }
   370 
   370 
   371 ul#dismissed-updates {
       
   372 	display: none;
       
   373 }
       
   374 
       
   375 form.upgrade {
       
   376 	margin-top: 8px;
       
   377 }
       
   378 
       
   379 form.upgrade .hint {
       
   380 	font-style: italic;
       
   381 	font-size: 85%;
       
   382 	margin: -0.5em 0 2em 0;
       
   383 }
       
   384 
       
   385 #poststuff .inside .the-tagcloud {
       
   386 	margin: 5px 0 10px;
       
   387 	padding: 8px;
       
   388 	border: 1px solid #ddd;
       
   389 	line-height: 1.8em;
       
   390 	word-spacing: 3px;
       
   391 }
       
   392 
       
   393 .drag-drop #drag-drop-area {
   371 .drag-drop #drag-drop-area {
   394 	border: 4px dashed #b4b9be;
   372 	border: 4px dashed #b4b9be;
   395 	height: 200px;
   373 	height: 200px;
   396 }
   374 }
   397 
   375 
   398 .drag-drop .drag-drop-inside {
   376 .drag-drop .drag-drop-inside {
   399 	margin: 70px auto 0;
   377 	margin: 60px auto 0;
   400 	width: 250px;
   378 	width: 250px;
   401 }
   379 }
   402 
   380 
   403 .drag-drop-inside p {
   381 .drag-drop-inside p {
   404 	color: #a0a5aa;
       
   405 	font-size: 14px;
   382 	font-size: 14px;
   406 	margin: 5px 0;
   383 	margin: 5px 0;
   407 	display: none;
   384 	display: none;
   408 }
   385 }
   409 
   386 
   500 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before,
   477 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before,
   501 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before {
   478 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before {
   502 	color: #c00;
   479 	color: #c00;
   503 }
   480 }
   504 
   481 
   505 .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3, /* Back-compat for pre-4.4 */
       
   506 .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
   482 .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
   507 	display: none;
   483 	display: none;
   508 }
   484 }
   509 
   485 
   510 .media-frame.mode-grid .uploader-inline {
   486 .media-frame.mode-grid .uploader-inline {
   560 	height: auto;
   536 	height: auto;
   561 }
   537 }
   562 
   538 
   563 .media-frame.mode-grid .media-toolbar select {
   539 .media-frame.mode-grid .media-toolbar select {
   564 	margin: 0 10px 0 0;
   540 	margin: 0 10px 0 0;
   565 	font-size: 14px;
       
   566 }
   541 }
   567 
   542 
   568 .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button {
   543 .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button {
   569 	margin: 0 8px 0 0;
   544 	margin: 0 8px 0 0;
   570 	vertical-align: middle;
   545 	vertical-align: middle;
   577 
   552 
   578 .media-frame.mode-grid .search {
   553 .media-frame.mode-grid .search {
   579 	margin-top: 0;
   554 	margin-top: 0;
   580 }
   555 }
   581 
   556 
   582 .media-frame.mode-grid .spinner {
   557 .media-search-input-label {
   583 	margin-top: 16px;
   558 	margin: 0 .2em 0 0;
       
   559 	vertical-align: baseline;
       
   560 }
       
   561 
       
   562 .media-frame.mode-grid .media-search-input-label {
       
   563 	position: static;
       
   564 	margin: 0 .5em 0 0;
   584 }
   565 }
   585 
   566 
   586 .attachments-browser .media-toolbar-secondary > .media-button {
   567 .attachments-browser .media-toolbar-secondary > .media-button {
   587 	margin-right: 10px;
   568 	margin-right: 10px;
   588 }
   569 }
   704 
   685 
   705 .edit-attachment-frame .edit-media-header .right:before {
   686 .edit-attachment-frame .edit-media-header .right:before {
   706 	content: "\f345";
   687 	content: "\f345";
   707 }
   688 }
   708 
   689 
   709 .edit-attachment-frame .edit-media-header .left.disabled,
   690 .edit-attachment-frame .edit-media-header [disabled],
   710 .edit-attachment-frame .edit-media-header .right.disabled,
   691 .edit-attachment-frame .edit-media-header [disabled]:hover {
   711 .edit-attachment-frame .edit-media-header .left.disabled:hover,
       
   712 .edit-attachment-frame .edit-media-header .right.disabled:hover {
       
   713 	color: #ccc;
   692 	color: #ccc;
   714 	background: inherit;
   693 	background: inherit;
   715 	cursor: default;
   694 	cursor: default;
   716 	pointer-events: none;
       
   717 }
   695 }
   718 
   696 
   719 .edit-attachment-frame .media-frame-content,
   697 .edit-attachment-frame .media-frame-content,
   720 .edit-attachment-frame .media-frame-router {
   698 .edit-attachment-frame .media-frame-router {
   721 	left: 0;
   699 	left: 0;
   773 }
   751 }
   774 
   752 
   775 .edit-attachment-frame input,
   753 .edit-attachment-frame input,
   776 .edit-attachment-frame textarea {
   754 .edit-attachment-frame textarea {
   777 	padding: 6px 8px;
   755 	padding: 6px 8px;
   778 	line-height: 16px;
   756 	line-height: 1.14285714;
   779 }
   757 }
   780 
   758 
   781 .edit-attachment-frame .attachment-info {
   759 .edit-attachment-frame .attachment-info {
   782 	overflow: auto;
   760 	overflow: auto;
   783 	box-sizing: border-box;
   761 	box-sizing: border-box;
   817 .attachment-info .actions a {
   795 .attachment-info .actions a {
   818 	display: inline;
   796 	display: inline;
   819 	text-decoration: none;
   797 	text-decoration: none;
   820 }
   798 }
   821 
   799 
       
   800 .copy-to-clipboard-container {
       
   801 	display: flex;
       
   802 	align-items: center;
       
   803 	margin-top: 8px;
       
   804 	clear: both;
       
   805 }
       
   806 
       
   807 .copy-to-clipboard-container .success {
       
   808 	margin-left: 8px;
       
   809 }
   822 
   810 
   823 /*------------------------------------------------------------------------------
   811 /*------------------------------------------------------------------------------
   824   14.2 - Image Editor
   812   14.2 - Image Editor
   825 ------------------------------------------------------------------------------*/
   813 ------------------------------------------------------------------------------*/
   826 .wp_attachment_details .attachment-alt-text {
   814 .wp_attachment_details .attachment-alt-text {
   870 .wp_attachment_holder .imgedit-wrap > div {
   858 .wp_attachment_holder .imgedit-wrap > div {
   871 	height: auto;
   859 	height: auto;
   872 }
   860 }
   873 
   861 
   874 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
   862 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
       
   863 	float: left;
   875 	padding: 3px 16px 0 0;
   864 	padding: 3px 16px 0 0;
   876 	float: left;
   865 	min-width: 400px;
       
   866 	max-width: calc( 100% - 266px );
   877 }
   867 }
   878 
   868 
   879 .wp_attachment_holder .imgedit-wrap .imgedit-settings {
   869 .wp_attachment_holder .imgedit-wrap .imgedit-settings {
   880 	float: right;
   870 	float: right;
   881 	width: 250px;
   871 	width: 250px;
   939 .A1B1 .spinner {
   929 .A1B1 .spinner {
   940 	float: left;
   930 	float: left;
   941 }
   931 }
   942 
   932 
   943 .imgedit-menu {
   933 .imgedit-menu {
   944 	min-width: 300px;
       
   945 	margin: 0 0 12px;
   934 	margin: 0 0 12px;
   946 }
   935 }
   947 
   936 
   948 .imgedit-menu .note-no-rotate {
   937 .imgedit-menu .note-no-rotate {
   949 	clear: both;
   938 	clear: both;
   950 	margin: 0;
   939 	margin: 0;
   951 	padding: 1em 0 0;
   940 	padding: 1em 0 0;
   952 }
   941 }
   953 
   942 
   954 .image-editor .imgedit-menu .button {
   943 .image-editor .imgedit-menu .button {
   955 	float: left;
   944 	display: inline-block;
   956 	width: 32px;
   945 	width: auto;
   957 	height: 32px;
   946 	min-height: 28px;
   958 	margin: 0 8px 0 0;
   947 	font-size: 13px;
   959 	padding: 0;
   948 	line-height: 2;
   960 	background: #f1f1f1;
   949 	margin: 0 8px 8px 0;
       
   950 	padding: 0 10px;
       
   951 }
       
   952 
       
   953 .imgedit-menu .button:before {
       
   954 	font: normal 16px/1 dashicons;
       
   955 	margin-right: 8px;
       
   956 	speak: none;
       
   957 	vertical-align: middle;
       
   958 	position: relative;
       
   959 	top: -2px;
   961 	-webkit-font-smoothing: antialiased;
   960 	-webkit-font-smoothing: antialiased;
   962 	-moz-osx-font-smoothing: grayscale;
   961 	-moz-osx-font-smoothing: grayscale;
   963 	line-height: 16px;
       
   964 	color: #72777c;
       
   965 }
       
   966 
       
   967 .imgedit-menu .button:before {
       
   968 	font: normal 20px/1 dashicons;
       
   969 	speak: none;
       
   970 	vertical-align: middle;
       
   971 }
   962 }
   972 
   963 
   973 .imgedit-menu .button.disabled {
   964 .imgedit-menu .button.disabled {
   974 	border-color: #ccc;
   965 	color: #a0a5aa;
   975 	background-color: #ddd;
   966 	border-color: #ddd;
   976 	color: #72777c;
   967 	background: #f7f7f7;
   977 	filter: alpha(opacity=50);
   968 	box-shadow: none;
   978 	opacity: 0.5;
   969 	text-shadow: 0 1px 0 #fff;
   979 	cursor: default;
   970 	cursor: default;
       
   971 	transform: none;
   980 }
   972 }
   981 
   973 
   982 .imgedit-crop:before {
   974 .imgedit-crop:before {
   983 	content: "\f165";
   975 	content: "\f165";
   984 }
   976 }
  1051 
  1043 
  1052 .imgedit-thumbnail-preview-caption {
  1044 .imgedit-thumbnail-preview-caption {
  1053 	display: block;
  1045 	display: block;
  1054 }
  1046 }
  1055 
  1047 
  1056 #poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
       
  1057 #poststuff .imgedit-group-top h2 {
  1048 #poststuff .imgedit-group-top h2 {
  1058 	display: inline-block;
  1049 	display: inline-block;
  1059 	margin: 0;
  1050 	margin: 0;
  1060 	padding: 0;
  1051 	padding: 0;
  1061 	font-size: 14px;
  1052 	font-size: 14px;
  1072 	padding: .5em 0 0;
  1063 	padding: .5em 0 0;
  1073 }
  1064 }
  1074 
  1065 
  1075 .imgedit-help {
  1066 .imgedit-help {
  1076 	display: none;
  1067 	display: none;
  1077 	font-style: italic;
  1068 	padding-bottom: 8px;
       
  1069 }
       
  1070 
       
  1071 .imgedit-help.imgedit-restore {
       
  1072 	padding-bottom: 0;
  1078 }
  1073 }
  1079 
  1074 
  1080 /* higher specificity than buttons */
  1075 /* higher specificity than buttons */
  1081 .image-editor .imgedit-settings .imgedit-help-toggle,
  1076 .image-editor .imgedit-settings .imgedit-help-toggle,
  1082 .image-editor .imgedit-settings .imgedit-help-toggle:hover,
  1077 .image-editor .imgedit-settings .imgedit-help-toggle:hover,
  1129 
  1124 
  1130 .imgedit-save-target {
  1125 .imgedit-save-target {
  1131 	margin: 8px 0;
  1126 	margin: 8px 0;
  1132 }
  1127 }
  1133 
  1128 
       
  1129 .imgedit-save-target legend {
       
  1130 	font-weight: 600;
       
  1131 }
       
  1132 
  1134 .imgedit-group {
  1133 .imgedit-group {
  1135 	margin-bottom: 8px;
  1134 	margin-bottom: 8px;
  1136 	padding: 10px;
  1135 	padding: 10px;
  1137 }
  1136 }
  1138 
  1137 
       
  1138 .imgedit-settings .imgedit-original-dimensions {
       
  1139 	display: inline-block;
       
  1140 }
       
  1141 
  1139 .imgedit-settings .imgedit-scale input[type="text"],
  1142 .imgedit-settings .imgedit-scale input[type="text"],
  1140 .imgedit-settings .imgedit-crop-ratio input[type="text"],
  1143 .imgedit-settings .imgedit-crop-ratio input[type="text"],
  1141 .imgedit-settings .imgedit-crop-sel input[type="text"] {
  1144 .imgedit-settings .imgedit-crop-sel input[type="text"] {
  1142 	width: 50px;
  1145 	width: 80px;
  1143 	font-size: 14px;
  1146 	font-size: 14px;
  1144 	padding: 5px 8px;
  1147 	padding: 0 8px;
  1145 }
  1148 }
  1146 
  1149 
  1147 .imgedit-separator {
  1150 .imgedit-separator {
  1148 	display: inline-block;
  1151 	display: inline-block;
  1149 	width: 7px;
  1152 	width: 7px;
  1150 	text-align: center;
  1153 	text-align: center;
  1151 	vertical-align: middle;
       
  1152 	font-size: 13px;
  1154 	font-size: 13px;
  1153 	color: #444;
  1155 	color: #444;
       
  1156 }
       
  1157 
       
  1158 .imgedit-settings .imgedit-scale-button-wrapper {
       
  1159 	margin-top: 0.3077em;
       
  1160 	display: block;
  1154 }
  1161 }
  1155 
  1162 
  1156 .imgedit-settings .imgedit-scale .button {
  1163 .imgedit-settings .imgedit-scale .button {
  1157 	margin-bottom: 0;
  1164 	margin-bottom: 0;
  1158 }
  1165 }
  1163 }
  1170 }
  1164 
  1171 
  1165 .mejs-container {
  1172 .mejs-container {
  1166 	width: 100%;
  1173 	width: 100%;
  1167 	max-width: 100%;
  1174 	max-width: 100%;
       
  1175 }
       
  1176 
       
  1177 .mejs-container .mejs-controls {
       
  1178 	box-sizing: border-box;
  1168 }
  1179 }
  1169 
  1180 
  1170 /* =Media Queries
  1181 /* =Media Queries
  1171 -------------------------------------------------------------- */
  1182 -------------------------------------------------------------- */
  1172 
  1183 
  1182 }
  1193 }
  1183 
  1194 
  1184 @media screen and (max-width: 782px) {
  1195 @media screen and (max-width: 782px) {
  1185 	.wp_attachment_details label[for="content"] {
  1196 	.wp_attachment_details label[for="content"] {
  1186 		font-size: 14px;
  1197 		font-size: 14px;
  1187 		line-height: 1.5em;
  1198 		line-height: 1.5;
  1188 	}
  1199 	}
  1189 
  1200 
  1190 	.media-upload-form .media-item.error,
  1201 	.media-upload-form .media-item.error,
  1191 	.media-upload-form .media-item .error {
  1202 	.media-upload-form .media-item .error {
  1192 		font-size: 13px;
  1203 		font-size: 13px;
  1202 	}
  1213 	}
  1203 
  1214 
  1204 	.imgedit-settings .imgedit-scale input[type="text"],
  1215 	.imgedit-settings .imgedit-scale input[type="text"],
  1205 	.imgedit-settings .imgedit-crop-ratio input[type="text"],
  1216 	.imgedit-settings .imgedit-crop-ratio input[type="text"],
  1206 	.imgedit-settings .imgedit-crop-sel input[type="text"] {
  1217 	.imgedit-settings .imgedit-crop-sel input[type="text"] {
  1207 		width: 60px;
       
  1208 		font-size: 16px;
  1218 		font-size: 16px;
  1209 		padding: 6px 10px;
  1219 		padding: 6px 10px;
  1210 	}
  1220 	}
  1211 
  1221 
  1212 	.imgedit-applyto .imgedit-label {
  1222 	.wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
  1213 		vertical-align: middle;
  1223 	.wp_attachment_holder .imgedit-wrap .imgedit-settings {
       
  1224 		float: none;
       
  1225 		width: auto;
       
  1226 		max-width: none;
       
  1227 		padding-bottom: 16px;
       
  1228 	}
       
  1229 
       
  1230 	.copy-to-clipboard-container .success {
       
  1231 		font-size: 14px;
  1214 	}
  1232 	}
  1215 }
  1233 }
  1216 
  1234 
  1217 /**
  1235 /**
  1218  * Media queries for media grid.
  1236  * Media queries for media grid.
  1248 	.edit-attachment-frame .edit-media-header .right {
  1266 	.edit-attachment-frame .edit-media-header .right {
  1249 		width: 40px;
  1267 		width: 40px;
  1250 		height: 40px;
  1268 		height: 40px;
  1251 	}
  1269 	}
  1252 
  1270 
  1253 	.upload-php .media-modal-close .media-modal-icon {
       
  1254 		margin: 9px 10px;
       
  1255 	}
       
  1256 
       
  1257 	.edit-attachment-frame .edit-media-header .right:before,
  1271 	.edit-attachment-frame .edit-media-header .right:before,
  1258 	.edit-attachment-frame .edit-media-header .left:before {
  1272 	.edit-attachment-frame .edit-media-header .left:before {
  1259 		line-height: 40px !important;
  1273 		line-height: 40px !important;
  1260 	}
  1274 	}
  1261 
  1275