1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-03 08:35:29 +02:00
joplin/packages/app-desktop/main.scss

311 lines
5.2 KiB
SCSS
Raw Normal View History

2017-11-07 23:11:14 +02:00
body, textarea {
margin: 0;
padding: 0;
2017-11-07 23:11:14 +02:00
border: none;
}
#react-root {
height: 100%;
2017-11-12 01:13:14 +02:00
overflow: hidden;
}
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;
}
a {
text-decoration: none;
}
2019-02-15 00:21:21 +02:00
::-webkit-scrollbar {
width: 7px;
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 {
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
}
::-webkit-scrollbar-thumb:hover {
background: rgba(100, 100, 100, 0.7);
}
.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
.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
}
@keyframes icon-infinite-rotation{
to {
transform: rotate(360deg);
}
}
.rdtPicker {
min-width: 250px;
width: auto !important;
}
2018-06-14 10:04:58 +02:00
.smalltalk {
font-family: sans-serif;
}
.note-property-box .rdt {
display: inline-block;
}
.help-tooltip {
font-family: sans-serif;
max-width: 200px;
}
:disabled {
opacity: 0.6;
}
.config-menu-bar button:focus {
outline: 0 none;
}
.modal-message {
display: flex;
justify-content: center;
align-items: flex-start;
color: grey;
font-size: 1.2em;
margin: 40px 20px;
}
#loading-animation {
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-09-15 15:01:07 +02:00
*:focus-visible {
outline: 1px solid var(--joplin-focus-outline-color);
}
// 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.
input:not([type=button]):not([type=checkbox]) {
&:focus-visible {
outline: none;
}
}
/* =========================================================================================
General classes
========================================================================================= */
body, button {
color: var(--joplin-color);
font-size: 13px;
}
div, span, a {
font-family: Roboto;
}
h2 {
font-size: 20px;
&.-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;
}
.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;
}
.bold {
font-weight: bold;
}
p,
div.form,
.form > .form-input-group {
margin-top: 0;
margin-bottom: 20px;
}
p {
&.-small {
font-size: 11px;
}
}
.form > .form-input-group:last-child {
margin-bottom: 0;
}
button {
cursor: pointer;
}
button:disabled {
cursor: default;
}
a {
color: var(--joplin-url-color);
}
p.info-text {
font-style: italic;
color: var(--joplin-color-faded);
}
// 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;
}
/* =========================================================================================
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;
> .password-valid-icon {
margin-left: 10px;
}
}
// .master-password-dialog .current-password-wrapper input {
// flex: 1;
// margin-right: 10px;
// }
.master-password-dialog .fa-check {
color: var(--joplin-color-correct);
}
.master-password-dialog .fa-times {
color: var(--joplin-color-error);
margin-left: 5px;
}