XimeX/usrspace-browser-addon
3
3
Fork 2
Code Issues 4 Pull requests Releases 14 Activity

feat(popup): improve colors, refactor css, support rtl lang

Browse source
This commit is contained in:
Thomas Rupprecht 2023-06-07 00:10:09 +02:00
parent cd0b5805eb
commit 6c622b4ef0
2 changed files with 49 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
CHANGELOG.md
View file

@ -28,6 +28,10 @@ All notable changes to this project will be documented in this file.
- Improve codestyle - Improve codestyle
### ⚙️ Miscellaneous Tasks
- Update @commitlint/{cli,config-conventional}
## \[[0.9.2](https://gitea.usrspace.at/XimeX/usrspace-browser-addon/releases/tag/v0.9.2)] - 2023-05-24 ## \[[0.9.2](https://gitea.usrspace.at/XimeX/usrspace-browser-addon/releases/tag/v0.9.2)] - 2023-05-24
### ⛰️ Features ### ⛰️ Features

75
src/popup.css
View file

@ -4,12 +4,14 @@
font-weight: normal; font-weight: normal;
src: url('font/Nunito-Regular.ttf') format('truetype'); src: url('font/Nunito-Regular.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'Nunito Sans'; font-family: 'Nunito Sans';
font-style: normal; font-style: normal;
font-weight: bold; font-weight: bold;
src: url('font/Nunito-Bold.ttf') format('truetype'); src: url('font/Nunito-Bold.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'Nunito Sans'; font-family: 'Nunito Sans';
font-style: italic; font-style: italic;
@ -20,45 +22,57 @@
:root { :root {
--light-blue: #2aa1bf; --light-blue: #2aa1bf;
--dark-blue: #095c81; --dark-blue: #095c81;
--light-color: #0c0c0c;
--dark-color: #ffffff; --light-color: #15141a;
--light-background: #f9f9f9; --dark-color: #fbfbfe;
--dark-background: #4a4a4a; --light-background: #ffffff;
--light-code-background: #ebebeb; --dark-background: #42414d;
--dark-code-background: #383838; --light-code-background: #f0f0f4;
--dark-code-background: #2b2a33;
--color: var(--light-color);
--background: var(--light-background);
--code-background: var(--light-code-background);
}
@media (prefers-color-scheme: dark) {
:root {
--color: var(--dark-color);
--background: var(--dark-background);
--code-background: var(--dark-code-background);
}
} }
body { body {
width: 360px; inline-size: 360px;
padding: 6px 12px; padding: 6px 12px;
color: var(--light-color); color: var(--color);
background-color: var(--light-background); background-color: var(--background);
font-family: 'Nunito Sans'; font-family: 'Nunito Sans';
} }
@media (prefers-color-scheme: dark) {
body {
color: var(--dark-color);
background-color: var(--dark-background);
}
}
section.no-padding { section.no-padding {
margin: 0 -12px -6px; margin: 0 -12px -6px;
} }
h2 { h2 {
margin: 6px 0 4px; margin: 6px 0 4px;
} }
summary { summary {
margin: 6px 12px 6px; margin: 6px 12px;
cursor: pointer; cursor: pointer;
} }
summary > h2 { summary > h2 {
margin: 0; margin: 0;
display: inline-block; display: inline-block;
} }
time { time {
font-style: italic; font-style: italic;
} }
svg { svg {
vertical-align: text-bottom; vertical-align: text-bottom;
} }
@ -66,11 +80,13 @@ svg {
.panel-section-list { .panel-section-list {
margin: 0 -12px; margin: 0 -12px;
} }
.panel-list-item > .icon { .panel-list-item > .icon {
text-align: center; text-align: center;
width: 23px; inline-size: 23px;
margin-right: 4px; margin-inline-end: 4px;
} }
.link { .link {
cursor: pointer; cursor: pointer;
} }
@ -78,29 +94,28 @@ svg {
#state > svg, #state > svg,
#calendar > .calendar-entry > svg, #calendar > .calendar-entry > svg,
#calendar > .calendar-entry strong { #calendar > .calendar-entry strong {
margin-right: 8px; margin-inline-end: 8px;
} }
#calendar > .calendar-entry {
#calendar > .calendar-entry,
#calendar > .calendar-entry > div > div {
display: flex; display: flex;
} }
#calendar address { #calendar address {
display: inline; display: inline;
} }
#space-api { #space-api {
margin: 0; margin: 0;
padding: 0 8px; padding: 4px 8px 8px;
height: 122px; block-size: 159px;
overflow-x: hidden; overflow-block: scroll;
overflow-y: scroll; background-color: var(--code-background);
background-color: var(--light-code-background);
}
@media (prefers-color-scheme: dark) {
#space-api {
background-color: var(--dark-code-background);
}
} }
#space-api code { #space-api code {
font-family: monospace; font-family: monospace;
font-size: 10px; font-size: 10px;
white-space: break-spaces;
} }