Changeset 12033 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/css/components/_main.scss
- Timestamp:
- 08/30/2022 05:46:27 AM (2 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/css/components/_main.scss
r11963 r12033 587 587 } 588 588 589 .theme-install-overlay iframe {590 border: 0;591 height: 100%;592 width: 100%;593 z-index: 20;594 transition: opacity 0.3s;595 }596 597 598 589 /*------------------------------------------------------------------------------ 599 590 16.2 - Install Themes … … 1014 1005 } 1015 1006 1016 /* Animations */ 1017 .wp-full-overlay, 1018 .wp-full-overlay-sidebar, 1019 .wp-full-overlay .collapse-sidebar, 1020 .wp-full-overlay-main { 1021 transition-property: left, right, top, bottom, width, margin; 1022 transition-duration: 0.2s; 1007 .wp-full-overlay .devices { 1008 position: absolute; 1009 bottom: 20px; 1010 right: 0; 1011 z-index: 50; 1012 display: block; 1013 height: 25px; 1014 padding: 0; 1015 color: #777; 1016 text-decoration: none; 1017 } 1018 1019 .wp-full-overlay-footer .devices button { 1020 display: inline-block; 1021 cursor: pointer; 1022 background: transparent; 1023 border: none; 1024 height: 46px; 1025 padding: 0 3px; 1026 margin: 0 0 0 -4px; 1027 box-shadow: none; 1028 border-top: 1px solid transparent; 1029 border-bottom: 4px solid transparent; 1030 transition: 1031 .15s color ease-in-out, 1032 .15s background-color ease-in-out, 1033 .15s border-color ease-in-out; 1034 } 1035 1036 .wp-full-overlay-footer .devices button:focus { 1037 box-shadow: none; 1038 outline: none; 1039 } 1040 1041 .wp-full-overlay-footer .devices button:before { 1042 display: inline-block; 1043 -webkit-font-smoothing: antialiased; 1044 font: normal 20px/30px "dashicons"; 1045 vertical-align: top; 1046 margin: 3px 0; 1047 padding: 4px 8px; 1048 color: #646970; 1049 } 1050 1051 .wp-full-overlay-footer .devices button.active { 1052 border-bottom-color: #1d2327; 1053 } 1054 1055 .wp-full-overlay-footer .devices button:hover, 1056 .wp-full-overlay-footer .devices button:focus { 1057 background-color: #fff; 1058 } 1059 1060 .wp-full-overlay-footer .devices button:focus, 1061 .wp-full-overlay-footer .devices button.active:hover { 1062 border-bottom-color: #2271b1; 1063 } 1064 1065 .wp-full-overlay-footer .devices button.active:before { 1066 color: #1d2327; 1067 } 1068 1069 .wp-full-overlay-footer .devices button:hover:before, 1070 .wp-full-overlay-footer .devices button:focus:before { 1071 color: #2271b1; 1072 } 1073 1074 .wp-full-overlay-footer .devices .preview-desktop:before { 1075 content: "\f472"; 1076 } 1077 1078 .wp-full-overlay-footer .devices .preview-tablet:before { 1079 content: "\f471"; 1080 } 1081 1082 .wp-full-overlay-footer .devices .preview-mobile:before { 1083 content: "\f470"; 1084 } 1085 1086 .wp-full-overlay-main .preview-mobile { 1087 margin: 20vh auto auto; 1088 width: 320px; 1089 height: 480px; 1090 } 1091 1092 .wp-full-overlay-main .preview-tablet { 1093 margin: 0 auto; 1094 width: 720px; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */ 1095 height: 1080px; 1023 1096 } 1024 1097 … … 1064 1137 #customize-container iframe, 1065 1138 .theme-install-overlay iframe { 1139 display: block; 1140 margin: 0 auto; 1066 1141 height: calc( 100% - 32px ); 1067 1142 width: 100%; 1068 1143 z-index: 20; 1069 transition: opacity 0.3s; 1144 transition: opacity 0.3s, width 0.3s, height .3s, margin .3s; 1145 } 1146 1147 .theme-install-overlay iframe { 1148 position: relative; 1149 border: none; 1070 1150 } 1071 1151 … … 1149 1229 1150 1230 .theme-install-overlay .wp-full-overlay-main { 1151 background: #fff url(/wp-admin/images/spinner.gif) no-repeat center center; 1152 background-size: 20px 20px; 1153 } 1231 background: #1d2327; 1232 } 1233 1234 .theme-install-overlay .wp-full-overlay-main::before { 1235 content: ''; 1236 display: inline-block; 1237 margin-left: -10px; 1238 margin-top: -10px; 1239 left: 50%; 1240 top: 50%; 1241 width: 20px; 1242 height: 20px; 1243 border-radius: 50%; 1244 position: relative; 1245 background: #1d2327; 1246 box-shadow: inset 4px 4px 0 7px #fff; 1247 animation: rotation 800ms linear infinite; 1248 z-index: 1; 1249 } 1250 1251 @keyframes rotation { 1252 0% { 1253 transform: rotate(0deg); 1254 } 1255 100% { 1256 transform: rotate(360deg); 1257 } 1258 } 1154 1259 1155 1260 /* Spinner */ … … 1569 1674 1570 1675 .spinner, 1571 .customize-loading #customize-container, 1572 .theme-install-overlay .wp-full-overlay-main { 1676 .customize-loading #customize-container { 1573 1677 background-image: url(/wp-admin/images/spinner-2x.gif); 1574 1678 }
Note: See TracChangeset
for help on using the changeset viewer.