more ui tweaks

feature/settings-window
Michael Ochmann 3 years ago
parent 4aeb2a6a31
commit 2874ed8d1a
  1. 3
      src/ui/src/assets/css/_scrollbars.scss
  2. 46
      src/ui/src/assets/css/_slide.scss
  3. 1
      src/ui/src/assets/css/_slidesList.scss
  4. 1
      src/ui/src/assets/css/_toolbar.scss
  5. 14
      src/ui/src/assets/css/_window.scss

@ -1,5 +1,5 @@
*::-webkit-scrollbar { *::-webkit-scrollbar {
width: 4px; width: 8px;
} }
*::-webkit-scrollbar-track { *::-webkit-scrollbar-track {
@ -7,6 +7,7 @@
} }
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
z-index: 2000;
background-color: color(scrollbar); background-color: color(scrollbar);
border-radius: 20px; border-radius: 20px;
border: solid 4px color(background); border: solid 4px color(background);

@ -1,11 +1,11 @@
.slide { .slide {
font-family: "Iosevka", sans-serif; font-family: "Iosevka", sans-serif;
font-size: 4vw; font-size: 3vw;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 8vw; padding: 2em;
text-align: center; text-align: center;
aspect-ratio: 1.333; aspect-ratio: 1.333;
overflow: hidden; overflow: hidden;
@ -13,12 +13,13 @@
color: color(foreground); color: color(foreground);
h1, h2, h3, h4, h5 { h1, h2, h3, h4, h5 {
margin: 0; margin: 0 0 1em 0;
padding: 0; padding: 0;
} }
ul, ol, pre { ul, ol, pre {
text-align: left; text-align: left;
line-height: 1.8em;
} }
ul, ol { ul, ol {
@ -59,7 +60,8 @@
img { img {
max-width: 95%; max-width: 95%;
max-height: 80vh; max-height: 75vh;
height: auto;
} }
.figcaption { .figcaption {
@ -72,19 +74,45 @@
} }
&.title { &.title {
gap: 0.5em;
img {
max-width: 50%;
}
p { p {
font-style: italic; font-style: italic;
font-size: 3.5vw; font-size: 1em;
color: color(scrollbar); color: color(scrollbar);
margin: 0;
line-height: normal;
&:nth-of-type(2) { &:nth-of-type(2) {
font-size: 2.8vw; font-size: 0.8em;
} }
} }
h1 {
color: color(hightlight);
font-size: 1.6em;
}
h2 {
font-size: 1.3em;
}
} }
p { p {
margin-top: 0; margin-top: 0;
line-height: 2em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
} }
code:not([class*=language-]) { code:not([class*=language-]) {
@ -94,9 +122,9 @@
} }
pre { pre {
font-size: 1.5vw; font-size: 0.3em;
width: 90%; width: 90%;
padding: 4vw !important; padding: 1em !important;
* { * {
font-weight: normal !important; font-weight: normal !important;

@ -2,6 +2,7 @@
//background: #222; //background: #222;
background: color(sidebarBackground); background: color(sidebarBackground);
overflow-y: auto; overflow-y: auto;
margin: 0;
.slide-wrap { .slide-wrap {
width: 100%; width: 100%;

@ -25,6 +25,7 @@
> svg { > svg {
max-height: 90%; max-height: 90%;
opacity: 0.3;
width: auto; width: auto;
margin: 0 2rem; margin: 0 2rem;
} }

@ -5,6 +5,7 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
position: absolute; position: absolute;
gap: 0;
.toolbar { .toolbar {
grid-column: 1 / span 2; grid-column: 1 / span 2;
@ -14,9 +15,18 @@
background: color(mainBackground); background: color(mainBackground);
overflow-y: auto; overflow-y: auto;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
> * {
width: 100%;
}
& > .slide:first-child { &:not(.fullscreen) {
margin: 2rem; & > .slide:first-child {
font-size: calc(3vw * 0.7);
}
} }
} }

Loading…
Cancel
Save