5757 background : # fff ;
5858 border : 1px solid var (--prpl-color-gray-2 );
5959 border-radius : var (--prpl-border-radius );
60- padding : calc (var (--prpl-padding ) * 2 );
60+ padding : var ( --prpl-settings-page-gap ) calc (var (--prpl-padding ) * 2 );
6161 max-width : var (--prpl-container-max-width );
6262 color : var (--prpl-color-text );
6363 font-size : var (--prpl-font-size-base );
6464 line-height : 1.4 ;
6565 position : relative;
66+ margin-top : var (--prpl-padding );
6667}
6768
6869/*------------------------------------*\
@@ -164,15 +165,15 @@ button.prpl-info-icon {
164165 Header & logo.
165166\*------------------------------------*/
166167.prpl-header {
167- margin-bottom : 2 em ;
168+ margin-bottom : 2 rem ;
168169 display : flex;
169170 flex-wrap : wrap;
170171 justify-content : space-between;
171172 align-items : center;
172173}
173174
174175.prpl-header-logo svg {
175- height : 100 px ;
176+ height : 88 px ;
176177}
177178
178179.prpl-header-right {
@@ -323,8 +324,13 @@ button.prpl-info-icon {
323324 transition : all 0.25s ease-in-out;
324325 }
325326
326- & : hover ,
327- & : focus {
327+ & : disabled {
328+ opacity : 0.5 ;
329+ pointer-events : none;
330+ }
331+
332+ & : not ([disabled ]): hover ,
333+ & : not ([disabled ]): focus {
328334 background : # cf2441 ;
329335
330336 & ::after {
@@ -341,8 +347,8 @@ button.prpl-info-icon {
341347.prpl-wrap button .prpl-button-secondary {
342348 background : var (--prpl-color-gray-3 );
343349
344- & : hover ,
345- & : focus {
350+ & : not ([ disabled ]) : hover ,
351+ & : not ([ disabled ]) : focus {
346352 background : var (--prpl-color-gray-4 );
347353 box-shadow : 3px 3px 10px var (--prpl-color-gray-4 );
348354 }
@@ -508,3 +514,4 @@ button.prpl-info-icon {
508514 transform : rotate (360deg );
509515 }
510516}
517+
0 commit comments