LumeWeb
/
extension
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: format

This commit is contained in:
Derrick Hammer 2023-07-28 12:48:06 -04:00
parent 15f7534995
commit d844a1b3ef
Signed by: pcfreak30
GPG Key ID: C997C339BE476FF2
1 changed files with 87 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
ui/styles/global.scss
View File

@ -2,43 +2,43 @@
@import "vars"; @import "vars";
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 300;
font-display: swap; font-display: swap;
src: url("../fonts/JetBrainsMono-Light.woff2") format('woff2'); src: url("../fonts/JetBrainsMono-Light.woff2") format('woff2');
} }
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; font-display: swap;
src: url("../fonts/JetBrainsMono-Regular.woff2") format('woff2'); src: url("../fonts/JetBrainsMono-Regular.woff2") format('woff2');
} }
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-display: swap; font-display: swap;
src: url("../fonts/JetBrainsMono-Bold.woff2") format('woff2'); src: url("../fonts/JetBrainsMono-Bold.woff2") format('woff2');
} }
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; font-display: swap;
src: url("../fonts/JetBrainsMono-Regular.woff2") format('woff2'); src: url("../fonts/JetBrainsMono-Regular.woff2") format('woff2');
} }
@font-face { @font-face {
font-family: 'Jaldi'; font-family: 'Jaldi';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; font-display: swap;
src: url("../fonts/Jaldi-Regular.woff2") format('woff2'); src: url("../fonts/Jaldi-Regular.woff2") format('woff2');
} }
@tailwind base; @tailwind base;
@ -46,82 +46,88 @@
@tailwind utilities; @tailwind utilities;
body { body {
background: #080808; background: #080808;
} }
#app { #app {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
font-family: $font-family-jaldi; font-family: $font-family-jaldi;
@include fluid-font-size(0.625rem); @include fluid-font-size(0.625rem);
} }
header { header {
padding: 2.5em; padding: 2.5em;
color: #fff; color: #fff;
background: #080808; background: #080808;
border-bottom: 0.1em solid #363636; border-bottom: 0.1em solid #363636;
img { img {
@include fluid-width-height(7.875rem, 2.625rem); @include fluid-width-height(7.875rem, 2.625rem);
} }
} }
main { main {
flex-grow: 1; flex-grow: 1;
overflow: hidden; overflow: hidden;
} }
.btn-wrapper { .btn-wrapper {
display: flex; display: flex;
gap: 2em; gap: 2em;
button, > a {
flex: 1;
}
> a {
flex: 1
}
button {
flex: 1;
}
} }
.btn-main { .btn-wrapper > .btn-main, .btn-wrapper > a {
display: inline-block; text-align: center;
padding: 1em; display: inline-block;
@include fluid-font-size(1.25rem); padding: 1em;
line-height: 1; @include fluid-font-size(1.25rem);
color: #fff; line-height: 1;
background: #252525; color: #fff;
border: 0.05em solid #252525; background: #252525;
border-radius: 0.25em; border: 0.05em solid #252525;
transition: color $transition-duration, background $transition-duration, border-color $transition-duration; border-radius: 0.25em;
white-space: nowrap; transition: color $transition-duration, background $transition-duration, border-color $transition-duration;
white-space: nowrap;
&:hover {
background: #2e2e2e;
}
&.btn-green {
color: #080808;
background: #62c554;
border-color: #62c554;
&:hover { &:hover {
background: #6ee65d; background: #2e2e2e;
}
}
&.btn-black {
background: #080808;
border-color: #777;
&:hover {
border-color: #a1a1a1;
} }
&.gray-text { &.btn-green {
color: #777; color: #080808;
background: #62c554;
border-color: #62c554;
&:hover { &:hover {
color: #a1a1a1; background: #6ee65d;
} }
}
&.btn-black {
background: #080808;
border-color: #777;
&:hover {
border-color: #a1a1a1;
}
&.gray-text {
color: #777;
&:hover {
color: #a1a1a1;
}
}
} }
}
} }