PR#40: Spacing and alignment improvements in popup - JShelter/webextension

Nirvin M • 2 years ago

a76a7dc

common/common.css

file modified

+17

		`@@ -196,3 +196,20 @@`
		`content:"ON";`
		`color: var(--slider-text-color);`
		`}`
		`+`
		`+`
		`+ .flex {`
		`+ display: flex;`
		`+ }`
		`+`
		`+ .flex.align-items-center {`
		`+ align-items: center;`
		`+ }`
		`+`
		`+ .flex.justify-content-between {`
		`+ justify-content: space-between;`
		`+ }`
		`+`
		`+ .text-large {`
		`+ font-size: large;`
		`+ }`

common/popup.css

file modified

+7 -9

		`@@ -54,6 +54,7 @@`

		`#logo {`
		`width: 32px;`
		`+ margin: 0 0.5em 0 0;`
		`display: inline;`
		`}`

		`@@ -77,16 +78,9 @@`
		`vertical-align: 50%;`
		`}`

		`- #page-info {`
		`- display: flex;`
		`- }`
		`-`
		`#current-site {`
		`font-size: large;`
		`- text-align: center;`
		`- flex-grow: 1;`
		`- margin-right: 5px;`
		`- margin-left: 5px;`
		`+ margin: 0 0.5em;`
		`}`

		`#level-select {`
		`@@ -163,7 +157,7 @@`
		`align-items: center;`
		`}`

		`- .switch_wrapper > label, #page-info > label {`
		`+ .switch_wrapper > label {`
		`font-size: large;`
		`white-space: nowrap;`
		`}`
		`@@ -204,3 +198,7 @@`
		`color: #e8e6e3;`
		`filter: brightness(110%);`
		`}`
		`+`
		`+ #level_controls, #nbs_whitelist, #fpd_whitelist {`
		`+ margin: 6px 0;`
		`+ }`
		`\ No newline at end of file`

common/popup.html

file modified

+5 -5

		`@@ -22,16 +22,16 @@`
		`<body>`

		`<header>`
		`- <div>`
		`- <img class="logo" id="logo" src="../img/icon-128.png" alt="JShelter logo" />`
		`- <h3 id="titletext">JShelter</h3>`
		`+ <div class="flex align-items-center">`
		`+ <div><img class="logo" id="logo" src="../img/icon-128.png" alt="JShelter logo" /></div>`
		`+ <div><h3 id="titletext">JShelter</h3></div>`
		`</div>`
		`<button id="global-settings" title="Open global settings">Global settings</button>`
		`</header>`

		`<content id="site-settings">`
		`- <div id="page-info">`
		`- <label>Settings for domain</label>`
		`+ <div class="flex align-items-center justify-content-between">`
		`+ <label class="text-large">Settings for domain</label>`
		`<h3 id="current-site"></h3>`
		`<button id="refresh-page" disabled>Refresh page</button>`
		`</div>`