about.css (2782B)
1 .about-wrap { 2 padding-right: 20px; 3 } 4 .about-wrap.about-wrap .wp-badge { 5 background-image: url(../images/meta-box.svg); 6 background-color: #fff; 7 color: #222; 8 text-transform: uppercase; 9 font-weight: bold; 10 text-decoration: none; 11 } 12 13 .wp-badge:hover { 14 text-decoration: none; 15 } 16 17 .about-buttons .dashicons { 18 position: relative; 19 top: 5px; 20 width: 16px; 21 height: 16px; 22 font-size: 16px; 23 } 24 25 #poststuff .nav-tab-wrapper { 26 padding: 0; 27 margin-top: 60px; 28 } 29 30 .nav-tab-active:focus { 31 box-shadow: none; 32 } 33 34 .gt-tab-pane { 35 display: none; 36 padding-top: 24px; 37 } 38 .gt-tab-pane .about-description.about-description { 39 margin-top: 0; 40 } 41 42 .gt-is-active { 43 display: block; 44 } 45 46 .two { 47 display: flex; 48 } 49 .two .col + .col { 50 margin-left: 40px; 51 } 52 .two h3 { 53 margin-top: 2em; 54 } 55 .two h3:first-child { 56 margin-top: 0; 57 } 58 .two img { 59 display: block; 60 box-shadow: 0 0 20px rgba(0, 0, 0, .1); 61 border-radius: 4px; 62 } 63 .screenshot { 64 display: block; 65 margin: 3em auto; 66 } 67 .col { 68 flex: 1; 69 max-width: 50%; 70 } 71 .col ul { 72 font-size: 14px; 73 margin: 2em 0; 74 } 75 .col li a { 76 text-decoration: none; 77 } 78 79 /* Extensions tab */ 80 .extensions { 81 margin-top: 40px; 82 display: flex; 83 justify-content: space-between; 84 flex-wrap: wrap; 85 } 86 .extension { 87 width: 100%; 88 margin-bottom: 20px; 89 } 90 .extension-inner { 91 display: flex; 92 background: #fff; 93 padding: 25px 20px; 94 } 95 .extension-inner svg { 96 width: 36px; 97 height: 36px; 98 margin: 8px 15px 0 0; 99 fill: #b4b9be; 100 } 101 .extension-info { 102 flex: 1; 103 } 104 .extension-info.extension-info h3 { 105 margin: 0 0 5px; 106 font-size: 1.2em; 107 } 108 .extension-info p { 109 margin: 0; 110 } 111 .extension-action { 112 border-top: 1px solid #ddd; 113 text-align: center; 114 padding: 20px; 115 background: #f7f7f7; 116 } 117 118 /* Extensions tab: 2 columns */ 119 @media (min-width: 768px) { 120 .extension { 121 width: 49%; 122 } 123 } 124 /* For large screen: 3 columns */ 125 @media (min-width: 1600px) { 126 .extension { 127 width: 32%; 128 } 129 } 130 131 /* Right column */ 132 #post-body.columns-2 #postbox-container-1 { 133 position: fixed; 134 right: 320px; 135 top: 80px; 136 } 137 138 @media (max-width: 1279px) { 139 #postbox-container-1 { 140 display: none; 141 } 142 #poststuff #post-body.columns-2 { 143 margin-right: 0; 144 } 145 } 146 147 /* Upgrade */ 148 .upgrade { 149 border: 3px dashed #82878c; 150 background: #fff; 151 padding: 15px; 152 } 153 .upgrade .dashicons { 154 color: #ef4836; 155 width: 26px; 156 height: 26px; 157 font-size: 30px; 158 position: relative; 159 top: -4px; 160 left: -5px; 161 } 162 .upgrade h3 { 163 margin: 0; 164 } 165 .upgrade li { 166 padding-left: 20px; 167 position: relative; 168 } 169 .upgrade svg { 170 width: 1em; 171 height: 1em; 172 fill: #0073aa; 173 position: absolute; 174 top: 4px; 175 left: 0; 176 } 177 178 .youtube-video-container { 179 position: relative; 180 overflow: hidden; 181 width: 100%; 182 } 183 184 .youtube-video-container::after { 185 display: block; 186 content: ""; 187 padding-top: 56.25%; 188 } 189 190 .youtube-video-container iframe { 191 position: absolute; 192 top: 0; 193 left: 0; 194 width: 100%; 195 height: 100%; 196 }