diff options
Diffstat (limited to 'ext/bg/css')
| -rw-r--r-- | ext/bg/css/context.css | 105 | ||||
| -rw-r--r-- | ext/bg/css/settings2.css | 45 |
2 files changed, 132 insertions, 18 deletions
diff --git a/ext/bg/css/context.css b/ext/bg/css/context.css index 773f79c6..447c5066 100644 --- a/ext/bg/css/context.css +++ b/ext/bg/css/context.css @@ -15,6 +15,13 @@ * along with this program. If not, see <https://www.gnu.org/licenses/>. */ +:root { + --badge-size: 16px; + + --warning-color: #96751c; + --warning-color-light: #edc75e; +} + body { padding: 10px; margin: 0; @@ -50,8 +57,34 @@ label { } +/* Icons */ +.icon { + --icon-image: none; + --icon-size: contain; + + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center center; + -webkit-mask-mode: alpha; + -webkit-mask-size: var(--icon-size); + -webkit-mask-image: var(--icon-image); + mask-repeat: no-repeat; + mask-position: center center; + mask-mode: alpha; + mask-size: var(--icon-size); + mask-image: var(--icon-image); +} +.icon[data-icon=profile] { --icon-image: url(/mixed/img/profile.svg); } +.icon[data-icon=cog] { --icon-image: url(/mixed/img/cog.svg); } +.icon[data-icon=magnifying-glass] { --icon-image: url(/mixed/img/magnifying-glass.svg); } +.icon[data-icon=exclamation-point-short] { --icon-image: url(/mixed/img/exclamation-point-short.svg); } +.icon[data-icon=question-mark-circle] { --icon-image: url(/mixed/img/question-mark-circle.svg); } + + +/* Page-specific styles */ .link-group { - display: block; + display: flex; + flex-flow: row nowrap; + align-items: center; line-height: 1.5em; margin: 0 -10px; padding: 0.5em 10px; @@ -102,6 +135,9 @@ label { .link-group-label { vertical-align: middle; } +.link-group-badge { + margin-left: 0.5em; +} /* Toggle */ .toggle>input[type=checkbox] { @@ -235,6 +271,7 @@ body[data-loaded=true] .toggle-group { margin: 0; padding: 2px 3px; cursor: pointer; + position: relative; } .nav-button+.nav-button { margin-left: -1px; @@ -337,3 +374,69 @@ select.profile-select { font-style: normal; background-color: initial; } + +.nav-button-warning-badge { + pointer-events: none; + width: 12px; + height: 6px; + position: absolute; + right: calc(50% - 6px); + top: -8px; + z-index: 1; +} +.nav-button-warning-badge-inner, +.nav-button-warning-badge-outer { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: #edc75e; + + --icon-image: url(/mixed/img/material-down-arrow.svg); + --icon-size: contain; + + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center center; + -webkit-mask-mode: alpha; + -webkit-mask-size: var(--icon-size); + -webkit-mask-image: var(--icon-image); + mask-repeat: no-repeat; + mask-position: center center; + mask-mode: alpha; + mask-size: var(--icon-size); + mask-image: var(--icon-image); +} +.nav-button-warning-badge-inner { + margin: 1px 2px; +} +.nav-button-warning-badge-outer { + animation: nav-button-warning-badge-animation ease-in-out 2s alternate infinite; +} +@keyframes nav-button-warning-badge-animation { + 0% { opacity: 1; background-color: #edc75e; } + 100% { opacity: 1; background-color: #333333; } +} + +.warning-badge { + position: relative; + width: var(--badge-size); + height: var(--badge-size); + margin: 0; + padding: 0; + background-color: var(--warning-color-light); + border-radius: 50%; + box-shadow: var(--shadow-vertical); +} +.warning-badge:not([hidden]) { + display: block; +} +.warning-badge>.icon { + display: block; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: var(--warning-color); +} diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css index 53278951..725804c3 100644 --- a/ext/bg/css/settings2.css +++ b/ext/bg/css/settings2.css @@ -54,6 +54,7 @@ --modal-width-small: 400px; --modal-height-small: 200px; --modal-transition-offset: -64px; + --badge-size: 16px; --link-color: var(--accent-color); --link-color-hover: var(--accent-color-dark); @@ -62,7 +63,7 @@ --outline-item-background-color: rgba(13, 13, 13, 0); --outline-item-background-color-hover: rgba(13, 13, 13, 0.15); --warning-color: #96751c; - --warning-color-light: hsl(44, 80%, 65%); + --warning-color-light: #edc75e; --dim-background-color: rgba(0, 0, 0, 0.5); --content-dimmer-color: rgba(0, 0, 0, 0.1); @@ -421,26 +422,10 @@ a.heading-link-light { position: absolute; right: calc(var(--outline-item-icon-size) * -0.125); top: calc(var(--outline-item-icon-size) * -0.125); - width: calc(var(--outline-item-icon-size) * 0.5); - height: calc(var(--outline-item-icon-size) * 0.5); - margin: 0; - padding: 0; - background-color: var(--warning-color-light); - border-radius: calc(var(--outline-item-icon-size) * 0.5); - box-shadow: var(--shadow-vertical); } .outline-item-left-warning-badge:not([hidden]) { display: block; } -.outline-item-left-warning-badge>.icon { - display: block; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - background-color: var(--warning-color); -} .outline-item-label { white-space: nowrap; padding-left: var(--padding); @@ -1970,6 +1955,29 @@ input.sentence-termination-character-input2 { top: calc(1em * (3 / var(--font-size-no-units))); } +.warning-badge { + position: relative; + width: var(--badge-size); + height: var(--badge-size); + margin: 0; + padding: 0; + background-color: var(--warning-color-light); + border-radius: 50%; + box-shadow: var(--shadow-vertical); +} +.warning-badge:not([hidden]) { + display: block; +} +.warning-badge>.icon { + display: block; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: var(--warning-color); +} + /* Generic layouts */ .margin-above { @@ -2016,6 +2024,9 @@ input.sentence-termination-character-input2 { flex-flow: row wrap; align-items: center; } +.flex-margin-left { + margin-left: 0.5em; +} .flex-column-nowrap { display: flex; |