wp/wp-admin/css/dashboard.css
changeset 21 48c4eec2b7e6
parent 19 3d72ae0968f4
child 22 8c2e4d02f4ef
equal deleted inserted replaced
20:7b1b88e27a20 21:48c4eec2b7e6
   118 /* Welcome Panel */
   118 /* Welcome Panel */
   119 .welcome-panel {
   119 .welcome-panel {
   120 	position: relative;
   120 	position: relative;
   121 	overflow: auto;
   121 	overflow: auto;
   122 	margin: 16px 0;
   122 	margin: 16px 0;
   123 	background-color: #e7ebfd;
   123 	background-color: #151515;
   124 	font-size: 14px;
   124 	font-size: 14px;
   125 	line-height: 1.3;
   125 	line-height: 1.3;
   126 	clear: both;
   126 	clear: both;
   127 }
   127 }
   128 
   128 
   144 	font-size: inherit;
   144 	font-size: inherit;
   145 	line-height: inherit;
   145 	line-height: inherit;
   146 }
   146 }
   147 
   147 
   148 .welcome-panel-header {
   148 .welcome-panel-header {
   149 	--about-header-image-width: 521px;
       
   150 	--about-header-bg-width: calc(var(--about-header-image-width) * 0.55);
       
   151 	--about-header-bg-offset-inline: 2rem;
       
   152 
       
   153 	position: relative;
   149 	position: relative;
       
   150 	color: #fff;
   154 }
   151 }
   155 
   152 
   156 .welcome-panel-header-image {
   153 .welcome-panel-header-image {
   157 	position: absolute;
   154 	position: absolute !important;
   158 	top: -1rem;
   155 	top: 0;
   159 	right: var(--about-header-bg-offset-inline);
   156 	right: 0;
   160 	bottom: 0;
   157 	bottom: 0;
   161 	width: var(--about-header-bg-width);
   158 	left: 0;
   162 	height: auto;
   159 	z-index: 0 !important;
       
   160 	overflow: hidden;
   163 }
   161 }
   164 
   162 
   165 .welcome-panel-header-image svg {
   163 .welcome-panel-header-image svg {
       
   164 	display: block;
       
   165 	margin: auto;
   166 	width: 100%;
   166 	width: 100%;
   167 	height: auto;
   167 	height: 100%;
   168 }
   168 }
   169 
   169 
   170 .welcome-panel-header a {
   170 .rtl .welcome-panel-header-image svg {
       
   171 	transform: scaleX(-1);
       
   172 }
       
   173 
       
   174 .welcome-panel-header * {
   171 	color: inherit;
   175 	color: inherit;
       
   176 	position: relative;
       
   177 	z-index: 1;
   172 }
   178 }
   173 
   179 
   174 .welcome-panel-header a:focus,
   180 .welcome-panel-header a:focus,
   175 .welcome-panel-header a:hover {
   181 .welcome-panel-header a:hover {
   176 	color: inherit;
   182 	color: inherit;
   206 	top: 8px;
   212 	top: 8px;
   207 	left: 0;
   213 	left: 0;
   208 	transition: all .1s ease-in-out;
   214 	transition: all .1s ease-in-out;
   209 	content: '\f335';
   215 	content: '\f335';
   210 	font-size: 24px;
   216 	font-size: 24px;
   211 	color: #1d2327;
   217 	color: #fff;
   212 }
   218 }
   213 
   219 
   214 .welcome-panel .welcome-panel-close {
   220 .welcome-panel .welcome-panel-close {
   215 	color: #1d2327;
   221 	color: #fff;
   216 }
   222 }
   217 
   223 
   218 .welcome-panel .welcome-panel-close:hover,
   224 .welcome-panel .welcome-panel-close:hover,
   219 .welcome-panel .welcome-panel-close:focus,
   225 .welcome-panel .welcome-panel-close:focus,
   220 .welcome-panel .welcome-panel-close:hover::before,
   226 .welcome-panel .welcome-panel-close:hover::before,
   221 .welcome-panel .welcome-panel-close:focus::before {
   227 .welcome-panel .welcome-panel-close:focus::before {
   222 	color: #2271b1;
   228 	color: #fff972;
   223 }
   229 }
   224 
   230 
   225 /* @deprecated 5.9.0 -- Button removed from panel. */
   231 /* @deprecated 5.9.0 -- Button removed from panel. */
   226 .wp-core-ui .welcome-panel .button.button-hero {
   232 .wp-core-ui .welcome-panel .button.button-hero {
   227 	margin: 15px 13px 3px 0;
   233 	margin: 15px 13px 3px 0;
   243 	margin-left: auto;
   249 	margin-left: auto;
   244 	margin-right: auto;
   250 	margin-right: auto;
   245 	max-width: 1500px;
   251 	max-width: 1500px;
   246 	width: 100%;
   252 	width: 100%;
   247 	padding: 48px 0 80px 48px;
   253 	padding: 48px 0 80px 48px;
   248 	padding-right: calc(var(--about-header-bg-width) + (var(--about-header-bg-offset-inline) * 2));
       
   249 }
   254 }
   250 
   255 
   251 .welcome-panel .welcome-panel-column-container {
   256 .welcome-panel .welcome-panel-column-container {
   252 	box-sizing: border-box;
   257 	box-sizing: border-box;
   253 	width: 100%;
   258 	width: 100%;
   262 }
   267 }
   263 
   268 
   264 [class*="welcome-panel-icon"] {
   269 [class*="welcome-panel-icon"] {
   265 	height: 60px;
   270 	height: 60px;
   266 	width: 60px;
   271 	width: 60px;
   267 	background-color: #1d2327;
       
   268 	background-position: center;
   272 	background-position: center;
   269 	background-size: 24px 24px;
   273 	background-size: 24px 24px;
   270 	background-repeat: no-repeat;
   274 	background-repeat: no-repeat;
   271 	border-radius: 100%;
   275 	border-radius: 100%;
       
   276 }
       
   277 
       
   278 .welcome-panel-column > svg {
       
   279 	margin-top: 4px;
   272 }
   280 }
   273 
   281 
   274 .welcome-panel-column {
   282 .welcome-panel-column {
   275 	display: grid;
   283 	display: grid;
   276 	grid-template-columns: min-content 1fr;
   284 	grid-template-columns: min-content 1fr;
   548 
   556 
   549 .community-events .event-info {
   557 .community-events .event-info {
   550 	display: block;
   558 	display: block;
   551 }
   559 }
   552 
   560 
       
   561 .community-events .ce-separator::before {
       
   562 	content: "\2022";
       
   563 }
       
   564 
   553 .event-icon {
   565 .event-icon {
   554 	height: 18px;
   566 	height: 18px;
   555 	padding-right: 10px;
   567 	padding-right: 10px;
   556 	width: 18px;
   568 	width: 18px;
   557 	display: none; /* Hide on smaller screens */
   569 	display: none; /* Hide on smaller screens */
   879 	color: #646970; /* white background on the dashboard but #f0f0f1 on list tables */
   891 	color: #646970; /* white background on the dashboard but #f0f0f1 on list tables */
   880 }
   892 }
   881 
   893 
   882 #future-posts ul,
   894 #future-posts ul,
   883 #published-posts ul {
   895 #published-posts ul {
   884 	clear: both;
   896 	margin: 8px -12px 0 -12px;
   885 	margin-bottom: 0;
       
   886 }
   897 }
   887 
   898 
   888 #future-posts li,
   899 #future-posts li,
   889 #published-posts li {
   900 #published-posts li {
   890 	margin-bottom: 8px;
   901 	display: grid;
   891 }
   902 	grid-template-columns: clamp(160px, calc(2vw + 140px), 200px) auto;
   892 
   903 	column-gap: 10px;
   893 #future-posts ul span,
       
   894 #published-posts ul span {
       
   895 	display: inline-block;
       
   896 	margin-right: 5px;
       
   897 	min-width: 150px;
       
   898 	color: #646970;
   904 	color: #646970;
       
   905 	padding: 4px 12px;
       
   906 }
       
   907 
       
   908 #future-posts li:nth-child(odd),
       
   909 #published-posts li:nth-child(odd) {
       
   910 	background-color: #f6f7f7;
   899 }
   911 }
   900 
   912 
   901 .activity-block {
   913 .activity-block {
   902 	border-bottom: 1px solid #f0f0f1;
   914 	border-bottom: 1px solid #f0f0f1;
   903 	margin: 0 -12px;
   915 	margin: 0 -12px 6px -12px;
   904 	padding: 8px 12px 4px;
   916 	padding: 8px 12px 4px;
   905 }
   917 }
   906 
   918 
   907 .activity-block:last-child {
   919 .activity-block:last-child {
   908 	border-bottom: none;
   920 	border-bottom: none;
       
   921 	margin-bottom: 0;
   909 }
   922 }
   910 
   923 
   911 .activity-block .subsubsub li {
   924 .activity-block .subsubsub li {
   912 	color: #dcdcde;
   925 	color: #dcdcde;
   913 }
   926 }
  1184 #dashboard_php_nag .dashicons-warning {
  1197 #dashboard_php_nag .dashicons-warning {
  1185 	color: #dba617;
  1198 	color: #dba617;
  1186 	padding-right: 6px;
  1199 	padding-right: 6px;
  1187 }
  1200 }
  1188 
  1201 
  1189 #dashboard_php_nag.php-insecure .dashicons-warning {
  1202 #dashboard_php_nag.php-no-security-updates .dashicons-warning,
       
  1203 #dashboard_php_nag.php-version-lower-than-future-minimum .dashicons-warning {
  1190 	color: #d63638;
  1204 	color: #d63638;
  1191 }
  1205 }
  1192 
  1206 
  1193 #dashboard_php_nag h2 {
  1207 #dashboard_php_nag h2 {
  1194 	display: inline-block;
  1208 	display: inline-block;
  1196 
  1210 
  1197 #dashboard_php_nag p {
  1211 #dashboard_php_nag p {
  1198 	margin: 12px 0;
  1212 	margin: 12px 0;
  1199 }
  1213 }
  1200 
  1214 
  1201 #dashboard_php_nag h3 {
       
  1202 	font-weight: 600;
       
  1203 }
       
  1204 
       
  1205 #dashboard_php_nag .button .dashicons-external {
  1215 #dashboard_php_nag .button .dashicons-external {
  1206 	line-height: 25px;
  1216 	line-height: 25px;
       
  1217 }
       
  1218 
       
  1219 .bigger-bolder-text {
       
  1220 	font-weight: 600;
       
  1221 	font-size: 14px;
  1207 }
  1222 }
  1208 
  1223 
  1209 /* =Media Queries
  1224 /* =Media Queries
  1210 -------------------------------------------------------------- */
  1225 -------------------------------------------------------------- */
  1211 
  1226 
  1348 @media screen and (max-width: 1180px) and (min-width: 783px) {
  1363 @media screen and (max-width: 1180px) and (min-width: 783px) {
  1349 	.welcome-panel-column {
  1364 	.welcome-panel-column {
  1350 		grid-template-columns: 1fr;
  1365 		grid-template-columns: 1fr;
  1351 	}
  1366 	}
  1352 
  1367 
  1353 	[class*="welcome-panel-icon"] {
  1368 	[class*="welcome-panel-icon"],
       
  1369 	.welcome-panel-column > svg {
  1354 		display: none;
  1370 		display: none;
  1355 	}
  1371 	}
  1356 }
  1372 }
  1357 
  1373 
  1358 @media screen and (max-width: 782px) {
  1374 @media screen and (max-width: 782px) {
  1359 	.welcome-panel-header {
       
  1360 		--about-header-bg-width: calc(var(--about-header-image-width) * 0.4);
       
  1361 		--about-header-bg-offset-inline: 1rem;
       
  1362 	}
       
  1363 
       
  1364 	.welcome-panel-header-image {
       
  1365 		top: 2rem;
       
  1366 	}
       
  1367 
       
  1368 	.welcome-panel .welcome-panel-column-container {
  1375 	.welcome-panel .welcome-panel-column-container {
  1369 		grid-template-columns: 1fr;
  1376 		grid-template-columns: 1fr;
  1370 		box-sizing: border-box;
  1377 		box-sizing: border-box;
  1371 		padding: 32px;
  1378 		padding: 32px;
  1372 		width: 100%;
  1379 		width: 100%;
  1453 @media screen and (max-width: 360px) {
  1460 @media screen and (max-width: 360px) {
  1454 	.welcome-panel-column {
  1461 	.welcome-panel-column {
  1455 		grid-template-columns: 1fr;
  1462 		grid-template-columns: 1fr;
  1456 	}
  1463 	}
  1457 
  1464 
  1458 	[class*="welcome-panel-icon"] {
  1465 	[class*="welcome-panel-icon"],
       
  1466 	.welcome-panel-column > svg {
  1459 		display: none;
  1467 		display: none;
  1460 	}
  1468 	}
  1461 }
  1469 }
  1462 
  1470 
  1463 @media screen and (min-width: 355px) {
  1471 @media screen and (min-width: 355px) {