katbin/assets/css/app.css
SphericalKat 9b2da2dbf1
feat(ui): use custom scrollbars
Signed-off-by: SphericalKat <amolele@gmail.com>
2021-10-07 09:10:54 +05:30

113 lines
1.6 KiB
CSS

/* This file is for your main application css. */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "./highlight.css";
@import "./markdown.css";
@font-face {
font-family: "JetBrains Mono";
src: url(/fonts/jetbrains_mono_variable.ttf);
font-weight: 100 1000;
font-stretch: 25% 151%;
}
* {
font-family: "JetBrains Mono", monospace;
color: white;
font-size: 14px;
font-weight: bold;
}
@layer base {
h1 {
font-size: 2em;
font-weight: bold;
}
h2 {
font-size: 1.5em;
font-weight: bold;
}
h3 {
font-size: 1.17em;
font-weight: bold;
}
h4 {
font-weight: bold;
}
h5 {
font-size: 0.83em;
font-weight: bold;
}
h6 {
font-size: 0.67em;
font-weight: bold;
}
h1, h2, h3 {
margin-top: 20px;
margin-bottom:10px
}
img {
display: inline;
}
}
html,
body {
width: 100%;
height: 100%;
}
a:hover {
color: #ff9800;
}
header {
background-color: #1a1a1a;
}
code {
font-family: "JetBrains Mono", monospace;
}
code {
white-space: pre;
font-size: 14px;
font-weight: bold;
}
textarea {
font-size: 14px;
font-weight: bold;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
@apply bg-amber;
}
.alert {
width: 100%;
text-align: center;
}
.alert-info {
background-color: #1ed98e;
color: black;
font-weight: bold;
}
.alert-danger {
background-color: #ff9800;
color: black;
font-weight: bold;
}