diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less index 20141676d..9c90f4b6c 100644 --- a/src/routes/Settings/styles.less +++ b/src/routes/Settings/styles.less @@ -20,18 +20,17 @@ display: flex; flex-direction: row; background-color: var(--color-backgroundlight); - --spacing: 1rem; --input-width: 35rem; .side-menu { - padding: var(--spacing); + padding: 1rem; width: 17rem; display: flex; flex-direction: column; background-color: var(--color-backgroundlighter); .section-label { - padding: var(--spacing); + padding: 1rem; font-size: 1.1rem; border: calc(var(--focusable-border-size) * 0.5) solid transparent; color: var(--color-surfacelight); @@ -59,26 +58,26 @@ } .scroll-container { - padding: 0 calc(var(--spacing) * 2); + padding: 0 2rem; flex: 1; overflow-y: auto; .section { - padding: calc(var(--spacing) * 4) calc(var(--spacing) * 2); + padding: 4rem 2rem; .section-header { - margin: 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 1.5) calc(var(--spacing) * 1.5); + margin: 0 1.5rem 1.5rem 1.5rem; font-size: 2rem; color: var(--color-surfacelighter); } .input-container { - margin: calc(var(--spacing) * 1.5); + margin: 1.5rem; display: flex; flex-direction: column; .input-header { - margin-bottom: calc(var(--spacing) * 0.5); + margin-bottom: 0.5rem; color: var(--color-surfacelighter); } @@ -94,7 +93,7 @@ align-items: center; .avatar { - margin: 0 var(--spacing); + margin: 0 1rem; width: 4.2rem; height: 4.2rem; border-radius: 50%; @@ -117,7 +116,7 @@ } &.link-container { - margin: var(--spacing) calc(var(--spacing) * 1.5); + margin: 1rem 1.5rem; .link { display: block; @@ -135,7 +134,7 @@ &.button-container { .button { - padding: calc(var(--spacing) * 0.7); + padding: 0.7rem; width: var(--input-width); min-height: calc(var(--input-width) * 0.09); display: flex; @@ -147,7 +146,7 @@ .icon { width: 1.4rem; height: 100%; - margin-right: calc(var(--spacing) * 0.5); + margin-right: 0.5rem; fill: var(--color-surfacelighter); } @@ -205,16 +204,16 @@ align-items: center; .icon { - margin-right: calc(var(--spacing) * 0.5); - width: var(--spacing); - height: var(--spacing); + margin-right: 0.5rem; + width: 1rem; + height: 1rem; fill: var(--color-signal5); } .x-icon { - margin-right: calc(var(--spacing) * 0.5); - width: var(--spacing); - height: var(--spacing); + margin-right: 0.5rem; + width: 1rem; + height: 1rem; fill: var(--color-signal2); }