Minz/quicknotes
1
0
Fork 0
mirror of https://github.com/JanGross/quicknotes.git synced 2025-12-01 07:37:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use an custom theme for mediumjs and translate tooltips

Browse Source
This commit is contained in:
Matias De lellis
2020-06-05 20:48:33 -03:00
parent 3ec97060a9
commit 8aa4b74323
3 changed files with 135 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
css/medium.scss Normal file
View File

@@ -0,0 +1,125 @@
// theme settings
$medium-editor-bgcolor: #000;
$medium-editor-button-size: 20px;
$medium-editor-button-active-text-color: #fff;
$medium-editor-hover-color: $medium-editor-bgcolor;
$medium-editor-link-color: #fff;
$medium-editor-border-radius: 8px;
$medium-editor-placeholder-color: #f8f5f3;
// theme rules
.medium-toolbar-arrow-under:after {
border-color: $medium-editor-bgcolor transparent transparent transparent;
top: $medium-editor-button-size;
}
.medium-toolbar-arrow-over:before {
border-color: transparent transparent $medium-editor-bgcolor transparent;
}
.medium-editor-toolbar {
background-color: $medium-editor-bgcolor;
border: none;
border-radius: $medium-editor-border-radius;
li {
button {
background-color: transparent;
border: none;
box-sizing: border-box;
color: $medium-editor-link-color;
height: $medium-editor-button-size;
min-width: $medium-editor-button-size;
padding: 5px 12px;
opacity: 0.6;
transition: background-color .2s ease-in, color .2s ease-in;
&:hover {
background-color: $medium-editor-hover-color;
color: $medium-editor-button-active-text-color;
opacity: 1.0;
}
}
.medium-editor-button-first {
border-bottom-left-radius: $medium-editor-border-radius;
border-top-left-radius: $medium-editor-border-radius;
//padding-left: 24px;
}
.medium-editor-button-last {
border-bottom-right-radius: $medium-editor-border-radius;
border-right: none;
border-top-right-radius: $medium-editor-border-radius;
//padding-right: 24px
}
.medium-editor-button-active {
background-color: $medium-editor-hover-color;
color: $medium-editor-button-active-text-color;
opacity: 1.0;
}
}
}
.medium-editor-toolbar-form {
background: $medium-editor-bgcolor;
border-radius: $medium-editor-border-radius;
color: $medium-editor-link-color;
overflow: hidden;
.medium-editor-toolbar-input {
background: $medium-editor-bgcolor;
box-sizing: border-box;
color: $medium-editor-link-color;
height: $medium-editor-button-size;
padding-left: 16px;
width: 220px;
&::-webkit-input-placeholder {
color: $medium-editor-placeholder-color;
color: rgba($medium-editor-placeholder-color, .8);
}
&:-moz-placeholder { /* Firefox 18- */
color: $medium-editor-placeholder-color;
color: rgba($medium-editor-placeholder-color, .8);
}
&::-moz-placeholder { /* Firefox 19+ */
color: $medium-editor-placeholder-color;
color: rgba($medium-editor-placeholder-color, .8);
}
&:-ms-input-placeholder {
color: $medium-editor-placeholder-color;
color: rgba($medium-editor-placeholder-color, .8);
}
}
a {
color: $medium-editor-link-color;
transform: translateY(2px);
}
.medium-editor-toolbar-close {
margin-right: 16px;
}
}
.medium-editor-toolbar-anchor-preview {
background: $medium-editor-bgcolor;
border-radius: $medium-editor-border-radius;
padding: 5px 12px;
}
.medium-editor-anchor-preview {
a {
color: $medium-editor-link-color;
text-decoration: none;
margin: 5px;
font-size: small;
}
}
.medium-editor-toolbar-actions {
li, button {
border-radius: $medium-editor-border-radius;
}
}