mirror of
https://github.com/misode/misode.github.io.git
synced 2026-04-23 07:10:41 +00:00
Add color transition
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
--style-transition: 0.3s;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -11,6 +12,7 @@ body {
|
||||
|
||||
.container {
|
||||
overflow-x: hidden;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -221,14 +223,21 @@ body {
|
||||
|
||||
/* COLORS */
|
||||
|
||||
.container {
|
||||
.container,
|
||||
.source textarea {
|
||||
background-color: #ffffff;
|
||||
transition: background-color var(--style-transition);
|
||||
}
|
||||
|
||||
.source textarea {
|
||||
transition:all var(--style-transition);
|
||||
}
|
||||
|
||||
.header,
|
||||
.nav-item {
|
||||
fill: #343a40;
|
||||
color: #343a40;
|
||||
transition: color, fill var(--style-transition);
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
@@ -250,6 +259,7 @@ body {
|
||||
.gutter.gutter-horizontal,
|
||||
.header {
|
||||
border-color: #cccccc;
|
||||
transition: border-color var(--style-transition);
|
||||
}
|
||||
|
||||
.nav-selector-menu {
|
||||
@@ -275,11 +285,11 @@ body {
|
||||
/* DARK MODE */
|
||||
|
||||
body[data-style=dark] .container,
|
||||
body[data-style=dark] textarea {
|
||||
body[data-style=dark] .source textarea {
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
body[data-style=dark] textarea {
|
||||
body[data-style=dark] .source textarea {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
@@ -118,6 +118,7 @@ button.remove::before {
|
||||
|
||||
.node-header > * {
|
||||
border-color: #bcbfc3;
|
||||
transition:all var(--style-transition);
|
||||
}
|
||||
|
||||
.node-header > label {
|
||||
@@ -143,14 +144,17 @@ button.remove {
|
||||
|
||||
.list-node > .node-body {
|
||||
border-color: #72a543;
|
||||
transition: border-color var(--style-transition);
|
||||
}
|
||||
|
||||
.map-node > .node-body {
|
||||
border-color: #066fb4;
|
||||
transition: border-color var(--style-transition);
|
||||
}
|
||||
|
||||
.object-node > .node-body {
|
||||
border-color: #b9b9b9;
|
||||
transition: border-color var(--style-transition);
|
||||
}
|
||||
|
||||
/* DARK MODE */
|
||||
|
||||
Reference in New Issue
Block a user