feat(popup): improve colors, refactor css, support rtl lang
This commit is contained in:
parent
cd0b5805eb
commit
6c622b4ef0
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue