1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-12 08:54:00 +02:00
joplin/ElectronClient/app/style.css
Luis Orozco 6335cbedb8 Desktop: Improved: UI updates to sidebar and header, changing icon sizes and animations (#1463)
Added animation to icon in synchronize button

Moved sync report above button, which prevents the sync button from moving from its place when the report has text.

Added animation to icon in Toggle Sidebar button, using the css transition property.

Reduced font size for text and icons in header and sidebar

Changed theme color2 from white to a very light grey. It is barely
noticeable, but reduces contrast a bit, improving readability.
2019-04-28 14:20:18 +01:00

116 lines
2.1 KiB
CSS

body, textarea {
margin: 0;
padding: 0;
border: none;
}
#react-root {
height: 100%;
overflow: hidden;
}
table {
border-collapse: collapse;
}
table th {
text-align: left;
}
table td, table th {
padding: .5em;
border: 1px solid #ccc;
}
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-corner {
background: none;
}
::-webkit-scrollbar-track {
border: none;
}
::-webkit-scrollbar-thumb {
background: rgba(100, 100, 100, 0.3);
border-radius: 5px;
}
::-webkit-scrollbar-track:hover {
background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(100, 100, 100, 0.7);
}
/* By default, the Ice Editor displays invalid characters, such as non-breaking spaces
as red boxes, but since those are actually valid characters and common in imported
Evernote data, we hide them here. */
.ace-chrome .ace_invisible_space {
background-color: transparent !important;
opacity: 0;
}
.note-list .list-item:hover {
background-color: rgba(0,160,255,0.1) !important;
}
/*.side-bar .list-item:hover,
.side-bar .synchronize-button:hover {
background-color: #01427B;
}
.side-bar .list-item:active,
.side-bar .synchronize-button:active {
background-color: #0465BB;
}*/
.editor-toolbar .button:not(.disabled):hover,
.header .button:not(.disabled):hover {
background-color: rgba(0,160,255,0.1);
border: 1px solid rgba(0,160,255,0.5);
box-sizing: 'border-box';
}
.editor-toolbar .button:not(.disabled):active,
.header .button:not(.disabled):active {
background-color: rgba(0,160,255,0.2);
border: 1px solid rgba(0,160,255,0.7);
box-sizing: 'border-box';
}
.editor-toolbar .button,
.header .button {
border: 1px solid rgba(0,160,255,0);
}
.icon-button:hover {
background-color: rgba(0,0,0,0.05) !important;
border: 1px solid rgba(0,0,0,0.10);
border-radius: 5px;
}
.icon-button:active {
background-color: rgba(0,0,0,0.10) !important;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 5px;
}
@keyframes icon-infinite-rotation{
to {
transform: rotate(360deg);
}
}
.smalltalk {
font-family: sans-serif;
}
.note-property-box .rdt {
display: inline-block;
}