flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2026-01-02 08:21:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

added dark theme to editor...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-11-30 03:41:54 +04:00
parent 341b6aaa07
commit a4cdadcd27
1 changed files with 68 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
ui/experiments/editor.html
View File

@ -34,7 +34,8 @@
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
} }
.panel button, .panel button,
.panel details { .panel details,
.panel .state {
margin: 1px; margin: 1px;
border: solid 1px gray; border: solid 1px gray;
border-radius: 4px; border-radius: 4px;
@ -57,7 +58,8 @@
margin: 10px; margin: 10px;
} }
.panel button:active { .panel button:active,
.panel .state:active {
background: silver; background: silver;
} }
@ -123,15 +125,9 @@
/* Snapshots */ /* Snapshots */
.panel .state { .panel .state {
display: inline-block; display: inline-block;
border: solid 1px gray;
border-radius: 4px;
margin: 1px; margin: 1px;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
background: white;
}
.panel .state:active {
background: silver;
} }
.panel .state.ui-draggable-dragging { .panel .state.ui-draggable-dragging {
box-shadow: 2px 2px 10px -2px rgba(0, 0, 0, 0.4); box-shadow: 2px 2px 10px -2px rgba(0, 0, 0, 0.4);
@ -148,6 +144,70 @@
} }
/* dark theme */
.dark .panel {
border: solid 2px #333;
background: black;
color: silver;
}
.dark .panel summary {
background: #333;
}
.dark .panel summary::-webkit-details-marker {
color: #555;
}
.dark .panel button,
.dark .panel .state,
.dark .panel details {
border: solid 1px #333;
/* needed for dragging */
background: black;
color: #888;
}
.dark .panel details {
border: solid 1px #333;
}
.dark .panel details summary {
background: #333;
color: silver;
}
.dark .panel .state:active,
.dark .panel button:active {
background: #555;
}
.dark .panel .control .slider {
border: solid 1px #555;
background: black;
}
.dark .panel .control.at-default .slider {
}
.dark .panel .control .slider::-webkit-slider-thumb {
border: solid 2px #aaa;
background: black;
}
.dark .panel .control.at-default .slider::-webkit-slider-thumb {
border: solid 1px gray;
opacity: 0.5;
}
.dark .panel .control .value {
border: none;
background: transparent;
color: gray;
}
.dark .panel .control .reset:hover {
border: solid 1px #333;
}
.dark .panel hr {
border: none;
border-top: solid 1px #333;
}
</style> </style>
<script src="jquery.js"></script> <script src="jquery.js"></script>
<script src="jquery-ui.js"></script> <script src="jquery-ui.js"></script>