2017-11-07 23:11:14 +02:00
|
|
|
body, textarea {
|
2017-11-04 21:46:37 +02:00
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
2017-11-07 23:11:14 +02:00
|
|
|
border: none;
|
2017-11-04 21:46:37 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
#react-root {
|
|
|
|
height: 100%;
|
2017-11-12 01:13:14 +02:00
|
|
|
overflow: hidden;
|
2017-11-04 21:46:37 +02:00
|
|
|
}
|
|
|
|
|
2017-12-05 20:56:39 +02:00
|
|
|
table {
|
|
|
|
border-collapse: collapse;
|
|
|
|
}
|
|
|
|
|
|
|
|
table th {
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
|
|
|
|
table td, table th {
|
|
|
|
padding: .5em;
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
}
|
|
|
|
|
2019-09-11 01:53:01 +02:00
|
|
|
a {
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
|
2019-02-15 00:21:21 +02:00
|
|
|
::-webkit-scrollbar {
|
|
|
|
width: 7px;
|
2019-02-17 04:16:32 +02:00
|
|
|
height: 7px;
|
|
|
|
}
|
|
|
|
|
|
|
|
::-webkit-scrollbar-corner {
|
|
|
|
background: none;
|
2019-02-15 00:21:21 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
|
border: none;
|
|
|
|
}
|
2020-09-15 15:01:07 +02:00
|
|
|
|
2019-02-15 00:21:21 +02:00
|
|
|
::-webkit-scrollbar-thumb {
|
2023-09-25 16:34:39 +02:00
|
|
|
background: rgba(100, 100, 100, 0.3);
|
2019-02-15 00:21:21 +02:00
|
|
|
border-radius: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
::-webkit-scrollbar-track:hover {
|
2020-09-15 15:01:07 +02:00
|
|
|
background: rgba(0, 0, 0, 0.1);
|
2019-02-15 00:21:21 +02:00
|
|
|
}
|
|
|
|
|
2023-09-25 16:34:39 +02:00
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
|
|
background: rgba(100, 100, 100, 0.7);
|
|
|
|
}
|
2019-07-20 23:13:10 +02:00
|
|
|
|
|
|
|
.fade_out {
|
|
|
|
-webkit-transition: 0.15s;
|
|
|
|
transition: 0.15s;
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fade_in {
|
|
|
|
-webkit-transition: 0.3s;
|
|
|
|
transition: 0.3s;
|
|
|
|
opacity: 1;
|
|
|
|
}
|
2017-11-23 20:16:17 +02:00
|
|
|
|
2017-11-30 01:03:10 +02:00
|
|
|
.editor-toolbar .button,
|
2017-11-09 00:23:26 +02:00
|
|
|
.header .button {
|
|
|
|
border: 1px solid rgba(0,160,255,0);
|
2017-11-11 00:18:00 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.icon-button:hover {
|
|
|
|
background-color: rgba(0,0,0,0.05) !important;
|
|
|
|
border: 1px solid rgba(0,0,0,0.10);
|
|
|
|
border-radius: 5px;
|
2017-11-12 19:53:26 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.icon-button:active {
|
|
|
|
background-color: rgba(0,0,0,0.10) !important;
|
|
|
|
border: 1px solid rgba(0,0,0,0.15);
|
|
|
|
border-radius: 5px;
|
2018-06-14 10:04:58 +02:00
|
|
|
}
|
|
|
|
|
2019-04-28 15:20:18 +02:00
|
|
|
@keyframes icon-infinite-rotation{
|
|
|
|
to {
|
|
|
|
transform: rotate(360deg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-03-23 11:35:25 +02:00
|
|
|
.rdtPicker {
|
|
|
|
min-width: 250px;
|
|
|
|
width: auto !important;
|
|
|
|
}
|
|
|
|
|
2018-06-14 10:04:58 +02:00
|
|
|
.smalltalk {
|
|
|
|
font-family: sans-serif;
|
2018-09-16 20:37:31 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.note-property-box .rdt {
|
|
|
|
display: inline-block;
|
2018-11-08 00:37:13 +02:00
|
|
|
}
|
2019-05-06 22:35:29 +02:00
|
|
|
|
|
|
|
.help-tooltip {
|
|
|
|
font-family: sans-serif;
|
|
|
|
max-width: 200px;
|
|
|
|
}
|
|
|
|
|
|
|
|
:disabled {
|
|
|
|
opacity: 0.6;
|
2019-07-13 17:42:57 +02:00
|
|
|
}
|
|
|
|
|
2019-09-11 01:53:01 +02:00
|
|
|
.config-menu-bar button:focus {
|
|
|
|
outline: 0 none;
|
|
|
|
}
|
|
|
|
|
2019-10-05 23:46:39 +02:00
|
|
|
.modal-message {
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
2020-10-21 17:55:52 +02:00
|
|
|
align-items: flex-start;
|
2019-10-05 23:46:39 +02:00
|
|
|
color: grey;
|
|
|
|
font-size: 1.2em;
|
|
|
|
margin: 40px 20px;
|
|
|
|
}
|
|
|
|
|
2024-03-09 12:35:54 +02:00
|
|
|
#loading-animation {
|
2019-10-05 23:46:39 +02:00
|
|
|
margin-right: 20px;
|
|
|
|
width: 20px;
|
|
|
|
height: 20px;
|
|
|
|
border: 5px solid lightgrey;
|
|
|
|
border-top: 4px solid white;
|
|
|
|
border-radius: 50%;
|
|
|
|
transition-property: transform;
|
|
|
|
animation-name: rotate;
|
|
|
|
animation-duration: 1.2s;
|
|
|
|
animation-iteration-count: infinite;
|
|
|
|
animation-timing-function: linear;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes rotate {
|
|
|
|
from {transform: rotate(0deg);}
|
|
|
|
to {transform: rotate(360deg);}
|
2020-06-06 17:00:20 +02:00
|
|
|
}
|
2020-09-15 15:01:07 +02:00
|
|
|
|
2024-03-02 17:54:16 +02:00
|
|
|
|
|
|
|
*:focus-visible {
|
2024-08-02 15:49:15 +02:00
|
|
|
outline: 1px solid var(--joplin-focus-outline-color);
|
2024-03-02 17:54:16 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// The browser-default focus-visible indicator was originally removed for aesthetic
|
|
|
|
// reasons. However, this causes accessibility issues.
|
|
|
|
//
|
|
|
|
// As a comprimise, we disable the focus-visible indicator in cases where the user is
|
|
|
|
// probably not navigating with the keyboard. Note that :focus-visible alone is not
|
|
|
|
// sufficient because it matches any focused input (https://stackoverflow.com/a/66109577).
|
|
|
|
//
|
|
|
|
// See https://github.com/laurent22/joplin/issues/9982.
|
2024-10-15 19:00:31 +02:00
|
|
|
input:not([type=button]):not([type=checkbox]) {
|
2024-03-02 17:54:16 +02:00
|
|
|
&:focus-visible {
|
|
|
|
outline: none;
|
|
|
|
}
|
2021-10-03 17:00:49 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
/* =========================================================================================
|
|
|
|
General classes
|
|
|
|
========================================================================================= */
|
|
|
|
|
2021-11-15 14:02:59 +02:00
|
|
|
body, button {
|
2021-10-03 17:00:49 +02:00
|
|
|
color: var(--joplin-color);
|
2022-01-09 17:42:27 +02:00
|
|
|
font-size: 13px;
|
2021-10-03 17:00:49 +02:00
|
|
|
}
|
|
|
|
|
2021-12-20 17:08:43 +02:00
|
|
|
div, span, a {
|
|
|
|
font-family: Roboto;
|
|
|
|
}
|
|
|
|
|
2021-10-03 17:00:49 +02:00
|
|
|
h2 {
|
2022-01-09 17:42:27 +02:00
|
|
|
font-size: 20px;
|
2021-10-03 17:00:49 +02:00
|
|
|
|
|
|
|
&.-no-top-margin {
|
|
|
|
margin-top: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.form {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
|
|
|
|
.form > .form-input-group {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
|
|
|
|
.form > .form-input-group > label {
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
|
2022-04-03 20:19:24 +02:00
|
|
|
.form > .form-input-group-checkbox {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.form > .form-input-group-checkbox > input {
|
|
|
|
display: flex;
|
|
|
|
margin-right: 6px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.form > .form-input-group-checkbox > label {
|
|
|
|
display: flex;
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
|
2021-10-03 17:00:49 +02:00
|
|
|
.bold {
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
p,
|
|
|
|
div.form,
|
|
|
|
.form > .form-input-group {
|
|
|
|
margin-top: 0;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
}
|
|
|
|
|
2021-10-15 17:34:09 +02:00
|
|
|
p {
|
|
|
|
&.-small {
|
2022-01-09 17:42:27 +02:00
|
|
|
font-size: 11px;
|
2021-10-15 17:34:09 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-10-03 17:00:49 +02:00
|
|
|
.form > .form-input-group:last-child {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
button {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
button:disabled {
|
|
|
|
cursor: default;
|
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
|
|
color: var(--joplin-url-color);
|
|
|
|
}
|
|
|
|
|
2021-10-15 17:34:09 +02:00
|
|
|
p.info-text {
|
|
|
|
font-style: italic;
|
|
|
|
color: var(--joplin-color-faded);
|
|
|
|
}
|
|
|
|
|
2024-08-31 17:05:01 +02:00
|
|
|
// Hides elements, but still exposes them to accessibility tools.
|
|
|
|
// Avoids `visibility: hidden` and `display: none`, because this may cause some
|
|
|
|
// screen readers to ignore the element.
|
|
|
|
// See https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text
|
|
|
|
.visually-hidden {
|
|
|
|
opacity: 0;
|
|
|
|
z-index: -1;
|
|
|
|
width: 1px;
|
|
|
|
height: 1px;
|
|
|
|
margin: -1px;
|
|
|
|
padding: 0;
|
|
|
|
overflow: hidden;
|
|
|
|
pointer-events: none;
|
|
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
|
2021-10-03 17:00:49 +02:00
|
|
|
/* =========================================================================================
|
|
|
|
Component-specific classes
|
|
|
|
========================================================================================= */
|
|
|
|
|
|
|
|
.config-screen .config-section {
|
|
|
|
border-bottom: 1px solid var(--joplin-divider-color);
|
|
|
|
padding-bottom: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.master-password-dialog .dialog-root {
|
|
|
|
min-width: 500px;
|
|
|
|
max-width: 600px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.master-password-dialog .dialog-content {
|
|
|
|
background-color: var(--joplin-background-color3);
|
|
|
|
padding: 1em;
|
|
|
|
padding-bottom: 1px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.master-password-dialog .current-password-wrapper {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
align-items: center;
|
|
|
|
|
2021-11-15 14:02:59 +02:00
|
|
|
> .password-valid-icon {
|
|
|
|
margin-left: 10px;
|
|
|
|
}
|
2021-10-03 17:00:49 +02:00
|
|
|
}
|
|
|
|
|
2021-11-15 14:02:59 +02:00
|
|
|
// .master-password-dialog .current-password-wrapper input {
|
|
|
|
// flex: 1;
|
|
|
|
// margin-right: 10px;
|
|
|
|
// }
|
|
|
|
|
2021-10-03 17:00:49 +02:00
|
|
|
.master-password-dialog .fa-check {
|
|
|
|
color: var(--joplin-color-correct);
|
|
|
|
}
|
|
|
|
|
|
|
|
.master-password-dialog .fa-times {
|
|
|
|
color: var(--joplin-color-error);
|
2022-04-13 13:18:38 +02:00
|
|
|
margin-left: 5px;
|
2021-10-03 17:00:49 +02:00
|
|
|
}
|