wp/wp-admin/css/dashboard.css
changeset 9 177826044cd9
parent 7 cf61fcea0001
child 16 a86126ab1dd4
equal deleted inserted replaced
8:c7c34916027a 9:177826044cd9
    96 #the-comment-list td.comment img {
    96 #the-comment-list td.comment img {
    97 	max-width: 100%;
    97 	max-width: 100%;
    98 }
    98 }
    99 
    99 
   100 /* Welcome Panel */
   100 /* Welcome Panel */
   101 .welcome-panel,
   101 .welcome-panel {
   102 .try-gutenberg-panel {
       
   103 	position: relative;
   102 	position: relative;
   104 	overflow: auto;
   103 	overflow: auto;
   105 	margin: 16px 0;
   104 	margin: 16px 0;
   106 	padding: 23px 10px 0;
   105 	padding: 23px 10px 0;
   107 	border: 1px solid #e5e5e5;
   106 	border: 1px solid #e5e5e5;
   108 	box-shadow: 0 1px 1px rgba(0,0,0,0.04);
   107 	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
   109 	background: #fff;
   108 	background: #fff;
   110 	font-size: 13px;
   109 	font-size: 13px;
   111 	line-height: 2.1em;
   110 	line-height: 2.1em;
   112 }
   111 }
   113 
   112 
   114 .welcome-panel h2,
   113 .welcome-panel h2 {
   115 .try-gutenberg-panel h2 {
       
   116 	margin: 0;
   114 	margin: 0;
   117 	font-size: 21px;
   115 	font-size: 21px;
   118 	font-weight: 400;
   116 	font-weight: 400;
   119 	line-height: 1.2;
   117 	line-height: 1.2;
   120 }
   118 }
   122 .welcome-panel h3 {
   120 .welcome-panel h3 {
   123 	margin: 1.33em 0 0;
   121 	margin: 1.33em 0 0;
   124 	font-size: 16px;
   122 	font-size: 16px;
   125 }
   123 }
   126 
   124 
   127 .try-gutenberg-panel h3 {
   125 .welcome-panel li {
   128 	margin: 17px 0 0;
   126 	font-size: 14px;
       
   127 }
       
   128 
       
   129 .welcome-panel p {
       
   130 	color: #72777c;
       
   131 }
       
   132 
       
   133 .welcome-panel a {
       
   134 	text-decoration: none;
       
   135 }
       
   136 
       
   137 .welcome-panel .about-description {
   129 	font-size: 16px;
   138 	font-size: 16px;
   130 	line-height: 1.4;
   139 	margin: 0;
   131 }
   140 }
   132 
   141 
   133 .welcome-panel li,
   142 .welcome-panel .welcome-panel-close {
   134 .try-gutenberg-panel li {
       
   135 	font-size: 14px;
       
   136 }
       
   137 
       
   138 .welcome-panel p,
       
   139 .try-gutenberg-panel p {
       
   140 	color: #72777c;
       
   141 }
       
   142 
       
   143 .welcome-panel a,
       
   144 .try-gutenberg-action a {
       
   145 	text-decoration: none;
       
   146 }
       
   147 
       
   148 .welcome-panel .about-description,
       
   149 .try-gutenberg-panel .about-description {
       
   150 	font-size: 16px;
       
   151 	margin: 0;
       
   152 }
       
   153 
       
   154 .try-gutenberg-panel-content hr {
       
   155 	margin: 20px -23px 0 -23px;
       
   156 	border-top: 1px solid #f3f4f5;
       
   157 	border-bottom: none;
       
   158 }
       
   159 
       
   160 .welcome-panel .welcome-panel-close,
       
   161 .try-gutenberg-panel .try-gutenberg-panel-close {
       
   162 	position: absolute;
   143 	position: absolute;
   163 	z-index: 10;
       
   164 	top: 10px;
   144 	top: 10px;
   165 	right: 10px;
   145 	right: 10px;
   166 	padding: 10px 15px 10px 21px;
   146 	padding: 10px 15px 10px 21px;
   167 	font-size: 13px;
   147 	font-size: 13px;
   168 	line-height: 1.23076923; /* Chrome rounding, needs to be 16px equivalent */
   148 	line-height: 1.23076923; /* Chrome rounding, needs to be 16px equivalent */
   169 	text-decoration: none;
   149 	text-decoration: none;
   170 }
   150 }
   171 
   151 
   172 .welcome-panel .welcome-panel-close:before,
   152 .welcome-panel .welcome-panel-close:before {
   173 .try-gutenberg-panel .try-gutenberg-panel-close:before {
       
   174 	position: absolute;
   153 	position: absolute;
   175 	top: 8px;
   154 	top: 8px;
   176 	left: 0;
   155 	left: 0;
   177 	transition: all .1s ease-in-out;
   156 	transition: all .1s ease-in-out;
   178 }
   157 }
   183 	height: auto;
   162 	height: auto;
   184 	line-height: 1.4285714;
   163 	line-height: 1.4285714;
   185 	white-space: normal;
   164 	white-space: normal;
   186 }
   165 }
   187 
   166 
   188 .welcome-panel-content,
   167 .welcome-panel-content {
   189 .try-gutenberg-panel-content {
   168 	margin-left: 13px;
   190 	margin: 0 13px;
       
   191 	max-width: 1500px;
   169 	max-width: 1500px;
   192 }
       
   193 
       
   194 .try-gutenberg-panel img {
       
   195 	margin-top: 23px;
       
   196 	width: calc( 100% - 40px );
       
   197 	border: 1px solid #f3f4f5;
       
   198 }
       
   199 
       
   200 .try-gutenberg-panel .install-now.updating-message:before,
       
   201 .try-gutenberg-panel .install-now.updated-message:before {
       
   202 	margin-top: 11px;
       
   203 }
   170 }
   204 
   171 
   205 .welcome-panel .welcome-panel-column-container {
   172 .welcome-panel .welcome-panel-column-container {
   206 	clear: both;
   173 	clear: both;
   207 	position: relative;
   174 	position: relative;
   211 	width: 32%;
   178 	width: 32%;
   212 	min-width: 200px;
   179 	min-width: 200px;
   213 	float: left;
   180 	float: left;
   214 }
   181 }
   215 
   182 
   216 .try-gutenberg-panel .try-gutenberg-panel-column > * {
       
   217 	padding-right: 40px;
       
   218 }
       
   219 
       
   220 .ie8 .welcome-panel .welcome-panel-column {
   183 .ie8 .welcome-panel .welcome-panel-column {
   221 	min-width: 230px;
   184 	min-width: 230px;
   222 }
   185 }
   223 
   186 
   224 .welcome-panel .welcome-panel-column:first-child {
   187 .welcome-panel .welcome-panel-column:first-child {
   225 	width: 36%;
   188 	width: 36%;
   226 }
   189 }
   227 
   190 
   228 .try-gutenberg-panel .try-gutenberg-panel-column-container {
       
   229 	display: -ms-grid;
       
   230 	display: grid;
       
   231 	-ms-grid-columns: 36% 32% 32%;
       
   232 	grid-template-columns: 36% 32% 32%;
       
   233 	margin-bottom: 13px;
       
   234 }
       
   235 
       
   236 .try-gutenberg-panel .try-gutenberg-panel-column:not(.try-gutenberg-panel-image-column) {
       
   237 	display: -ms-grid;
       
   238 	display: grid;
       
   239 	-ms-grid-rows: auto 100px;
       
   240 	grid-template-rows: auto 100px;
       
   241 }
       
   242 
       
   243 .welcome-panel-column p.hide-if-no-customize {
   191 .welcome-panel-column p.hide-if-no-customize {
   244 	margin-top: 10px;
   192 	margin-top: 10px;
   245 }
   193 }
   246 
   194 
   247 .welcome-panel-column p,
   195 .welcome-panel-column p {
   248 .try-gutenberg-panel-column p {
       
   249 	margin-top: 7px;
   196 	margin-top: 7px;
   250 	color: #444;
   197 	color: #444;
   251 }
   198 }
   252 
   199 
   253 .welcome-panel .welcome-widgets-menus {
   200 .welcome-panel .welcome-widgets-menus {
   254 	line-height: 16px;
   201 	line-height: 16px;
   255 }
   202 }
   256 
   203 
   257 .welcome-panel .welcome-panel-column ul {
   204 .welcome-panel .welcome-panel-column ul {
   258 		margin: 0.8em 1em 1em 0;
   205 	margin: 0.8em 1em 1em 0;
   259 }
   206 }
   260 
   207 
   261 .welcome-panel .welcome-panel-column li {
   208 .welcome-panel .welcome-panel-column li {
   262 	line-height: 16px;
   209 	line-height: 16px;
   263 	list-style-type: none;
   210 	list-style-type: none;
   296 .welcome-panel .welcome-add-page:before {
   243 .welcome-panel .welcome-add-page:before {
   297 	content: "\f132";
   244 	content: "\f132";
   298 	top: -1px;
   245 	top: -1px;
   299 }
   246 }
   300 
   247 
       
   248 .welcome-panel .welcome-setup-home:before {
       
   249 	content: "\f102";
       
   250 	top: -1px;
       
   251 }
       
   252 
   301 .welcome-panel .welcome-view-site:before {
   253 .welcome-panel .welcome-view-site:before {
   302 	content: "\f115";
   254 	content: "\f115";
   303 	top: -2px;
   255 	top: -2px;
   304 }
   256 }
   305 
   257 
   440 }
   392 }
   441 
   393 
   442 .community-events li {
   394 .community-events li {
   443 	margin: 0;
   395 	margin: 0;
   444 	padding: 8px 12px;
   396 	padding: 8px 12px;
   445 	color: #72777c;
   397 	color: #32373c;
   446 }
   398 }
   447 .community-events li:first-child {
   399 .community-events li:first-child {
   448 	border-top: 1px solid #eee;
   400 	border-top: 1px solid #eee;
   449 }
   401 }
   450 
   402 
   645 
   597 
   646 #dashboard_quick_press form {
   598 #dashboard_quick_press form {
   647 	margin: 12px;
   599 	margin: 12px;
   648 }
   600 }
   649 
   601 
   650 #dashboard_quick_press .drafts,
   602 #dashboard_quick_press .drafts {
   651 #dashboard_quick_press .easy-blogging {
       
   652 	padding: 10px 0 0;
   603 	padding: 10px 0 0;
   653 }
   604 }
   654 
   605 
   655 /* Dashboard Quick Draft - Form styling */
   606 /* Dashboard Quick Draft - Form styling */
   656 
   607 
   657 input#save-post {
   608 #dashboard_quick_press label {
   658 	float: left;
   609 	display: inline-block;
   659 }
   610 	margin-bottom: 4px;
   660 
       
   661 form.initial-form.quickpress-open label.prompt {
       
   662 	font-style: normal;
       
   663 }
       
   664 
       
   665 form.initial-form.quickpress-open input#title {
       
   666 	height: auto;
       
   667 }
   611 }
   668 
   612 
   669 #dashboard_quick_press input,
   613 #dashboard_quick_press input,
   670 #dashboard_quick_press textarea {
   614 #dashboard_quick_press textarea {
   671 	box-sizing: border-box;
   615 	box-sizing: border-box;
   672 	margin: 0;
   616 	margin: 0;
   673 }
   617 }
   674 
   618 
   675 #dashboard_quick_press textarea {
       
   676 	resize: vertical;
       
   677 }
       
   678 
       
   679 #dashboard-widgets .postbox form .submit {
   619 #dashboard-widgets .postbox form .submit {
   680 	margin: -39px 0;
   620 	margin: -39px 0;
   681 	float: right;
   621 	float: right;
   682 }
   622 }
   683 
   623 
   684 #description-wrap {
   624 #description-wrap {
   685 	margin-top: 12px;
   625 	margin-top: 12px;
   686 }
   626 }
   687 
   627 
   688 #title-wrap #title-prompt-text,
       
   689 .textarea-wrap #content-prompt-text {
       
   690 	color: #72777c;
       
   691 }
       
   692 
       
   693 #title-wrap #title-prompt-text {
       
   694 	font-size: 1.1em;
       
   695 	padding: 7px 8px;
       
   696 }
       
   697 
       
   698 .input-text-wrap,
       
   699 .textarea-wrap {
       
   700 	position: relative;
       
   701 }
       
   702 
       
   703 .input-text-wrap .prompt,
       
   704 .textarea-wrap .prompt {
       
   705 	position: absolute;
       
   706 }
       
   707 
       
   708 .textarea-wrap #content-prompt-text {
       
   709 	font-size: 1.1em;
       
   710 	padding: 7px 8px;
       
   711 }
       
   712 
       
   713 .textarea-wrap textarea#content {
       
   714 	margin: 0 0 8px;
       
   715 	padding: 6px 7px;
       
   716 }
       
   717 
       
   718 #quick-press textarea#content {
   628 #quick-press textarea#content {
   719 	min-height: 90px;
   629 	min-height: 90px;
   720 	max-height: 1300px;
   630 	max-height: 1300px;
       
   631 	margin: 0 0 8px;
       
   632 	padding: 6px 7px;
   721 	resize: none;
   633 	resize: none;
   722 }
   634 }
   723 
   635 
   724 /* Dashboard Quick Draft - Drafts list */
   636 /* Dashboard Quick Draft - Drafts list */
   725 
   637 
  1046 	margin: 3px 0 0;
   958 	margin: 3px 0 0;
  1047 	padding: 0;
   959 	padding: 0;
  1048 	font-size: 13px;
   960 	font-size: 13px;
  1049 }
   961 }
  1050 
   962 
  1051 /* QuickDraft */
       
  1052 
       
  1053 #title-wrap label,
       
  1054 #description-wrap label {
       
  1055 	cursor: text;
       
  1056 }
       
  1057 
       
  1058 #title-wrap #title {
       
  1059 	padding: 2px 6px;
       
  1060 	font-size: 1.3em;
       
  1061 	outline: none;
       
  1062 }
       
  1063 
       
  1064 #title-wrap #title-prompt-text {
       
  1065 	font-size: 1.1em;
       
  1066 	padding: 5px 8px;
       
  1067 }
       
  1068 
       
  1069 /* Feeds */
   963 /* Feeds */
  1070 .rss-widget ul {
   964 .rss-widget ul {
  1071 	margin: 0;
   965 	margin: 0;
  1072 	padding: 0;
   966 	padding: 0;
  1073 	list-style: none;
   967 	list-style: none;
  1167 .postbox#dashboard_browser_nag a,
  1061 .postbox#dashboard_browser_nag a,
  1168 .postbox#dashboard_browser_nag p.browser-update-nag {
  1062 .postbox#dashboard_browser_nag p.browser-update-nag {
  1169 	font-size: 16px;
  1063 	font-size: 16px;
  1170 }
  1064 }
  1171 
  1065 
       
  1066 /* PHP Nag */
       
  1067 #dashboard_php_nag .dashicons-warning {
       
  1068 	color: #ffb900;
       
  1069 	padding-right: 6px;
       
  1070 }
       
  1071 
       
  1072 #dashboard_php_nag.php-insecure .dashicons-warning {
       
  1073 	color: #df3232;
       
  1074 }
       
  1075 
       
  1076 #dashboard_php_nag p {
       
  1077 	margin: 12px 0;
       
  1078 }
       
  1079 
       
  1080 #dashboard_php_nag h3 {
       
  1081 	font-weight: 600;
       
  1082 }
       
  1083 
       
  1084 #dashboard_php_nag .button .dashicons-external {
       
  1085 	line-height: 25px;
       
  1086 }
       
  1087 
  1172 /* =Media Queries
  1088 /* =Media Queries
  1173 -------------------------------------------------------------- */
  1089 -------------------------------------------------------------- */
  1174 
  1090 
  1175 /* one column on the dash */
  1091 /* one column on the dash */
  1176 @media only screen and (max-width: 799px) {
  1092 @media only screen and (max-width: 799px) {
  1255 		display: none;
  1171 		display: none;
  1256 	}
  1172 	}
  1257 
  1173 
  1258 	.metabox-holder .postbox-container .empty-container:after {
  1174 	.metabox-holder .postbox-container .empty-container:after {
  1259 		display: block;
  1175 		display: block;
  1260 	}
       
  1261 }
       
  1262 
       
  1263 @media screen and (max-width: 1024px) {
       
  1264 	.try-gutenberg-panel .try-gutenberg-panel-column-container {
       
  1265 		-ms-grid-columns: 50% 50%;
       
  1266 		grid-template-columns: 50% 50%;
       
  1267 	}
       
  1268 
       
  1269 	.try-gutenberg-panel .try-gutenberg-panel-image-column {
       
  1270 		display: none;
       
  1271 	}
  1176 	}
  1272 }
  1177 }
  1273 
  1178 
  1274 @media screen and (max-width: 870px) {
  1179 @media screen and (max-width: 870px) {
  1275 	.welcome-panel .welcome-panel-column,
  1180 	.welcome-panel .welcome-panel-column,
  1277 		display: block;
  1182 		display: block;
  1278 		float: none;
  1183 		float: none;
  1279 		width: 100%;
  1184 		width: 100%;
  1280 	}
  1185 	}
  1281 
  1186 
  1282 	.try-gutenberg-panel .try-gutenberg-panel-column-container {
       
  1283 		-ms-grid-columns: 100%;
       
  1284 		grid-template-columns: 100%;
       
  1285 	}
       
  1286 
       
  1287 	.welcome-panel .welcome-panel-column li {
  1187 	.welcome-panel .welcome-panel-column li {
  1288 		display: inline-block;
  1188 		display: inline-block;
  1289 		margin-right: 13px;
  1189 		margin-right: 13px;
  1290 	}
  1190 	}
  1291 
  1191 
  1292 	.welcome-panel .welcome-panel-column ul {
  1192 	.welcome-panel .welcome-panel-column ul {
  1293 		margin: 0.4em 0 0;
  1193 		margin: 0.4em 0 0;
  1294 	}
  1194 	}
  1295 }
  1195 
  1296 
  1196 }
  1297 @media screen and ( max-width: 782px ) {
  1197 
       
  1198 @media screen and (max-width: 782px) {
  1298 	#dashboard_recent_comments #the-comment-list .comment-item .avatar {
  1199 	#dashboard_recent_comments #the-comment-list .comment-item .avatar {
  1299 		height: 30px;
  1200 		height: 30px;
  1300 		width: 30px;
  1201 		width: 30px;
  1301 		margin: 4px 10px 5px 0;
  1202 		margin: 4px 10px 5px 0;
  1302 	}
  1203 	}
  1332 }
  1233 }
  1333 
  1234 
  1334 /* Smartphone */
  1235 /* Smartphone */
  1335 @media screen and (max-width: 600px) {
  1236 @media screen and (max-width: 600px) {
  1336 	/* Keep the close icon from overlapping the Welcome text. */
  1237 	/* Keep the close icon from overlapping the Welcome text. */
  1337 	.welcome-panel .welcome-panel-close,
  1238 	.welcome-panel .welcome-panel-close {
  1338 	.try-gutenberg-panel .try-gutenberg-panel-close {
       
  1339 		overflow: hidden;
  1239 		overflow: hidden;
  1340 		text-indent: 40px;
  1240 		text-indent: 40px;
  1341 		white-space: nowrap;
  1241 		white-space: nowrap;
  1342 		width: 20px;
  1242 		width: 20px;
  1343 		height: 20px;
  1243 		height: 20px;
  1345 		top: 5px;
  1245 		top: 5px;
  1346 		right: 5px;
  1246 		right: 5px;
  1347 	}
  1247 	}
  1348 
  1248 
  1349 	/* Make the close icon larger for tappability. */
  1249 	/* Make the close icon larger for tappability. */
  1350 	.welcome-panel .welcome-panel-close:before,
  1250 	.welcome-panel .welcome-panel-close:before {
  1351 	.try-gutenberg-panel .try-gutenberg-panel-close:before {
       
  1352 		font-size: 20px;
  1251 		font-size: 20px;
  1353 		top: 5px;
  1252 		top: 5px;
  1354 		left: -35px;
  1253 		left: -35px;
  1355 	}
  1254 	}
  1356 }
  1255 }