FreePad/static/css/main.css

126 lines
2.1 KiB
CSS
Raw Permalink Normal View History

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap');
:root {
--color-border-default: #444c56;
--color-fg-default: #adbac7;
}
.light body {
background-color: whitesmoke;
}
main#main-card {
max-width: 768px;
}
.light main#main-card {
background-color: white;
}
.dark main#main-card {
background-color: var(--bs-body-bg-alt);
border: 1px solid var(--color-border-default);
}
.dark {
color: var(--color-fg-default);
}
.dark .hidedark, .light .hidelight {
display: none !important;
}
#theme-toggle {
position: fixed;
top: .5rem;
right: .5rem;
}
.hidden {
display: none !important;
}
#pad-content, #textarea-preview {
tab-size: 2;
font-family: 'Roboto Mono', monospace !important;
}
#pad-content-area {
position: relative;
display: flex;
flex-flow: column;
}
.edit-content-text {
display: none;
}
.read-only-content .edit-content-text {
display: block !important;
}
.read-only-content .view-content-text {
display: none !important;
}
#pad-content-toggler {
position: absolute;
top: .5rem;
right: .5rem;
user-select: none;
}
#textarea-preview {
2022-06-01 17:00:23 +03:00
max-height: calc(17rem + 30vh);
min-height: 17rem;
overflow: auto;
}
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: none;
box-shadow: none;
outline: 0 none;
}
/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #3b3b3b #ffffff00;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 7px;
height: 7px;
}
*::-webkit-scrollbar-track {
background: #ffffff00;
}
*::-webkit-scrollbar-thumb {
background-color: #3b3b3b;
border-radius: 2px;
border: 1px solid #ffffff00;
}