flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-30 10:50:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

added gray 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 04:18:50 +04:00
parent a4cdadcd27
commit dd269edbb5
1 changed files with 77 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
ui/experiments/editor.html
View File

@ -146,11 +146,11 @@
/* dark theme */ /* dark theme */
.dark .panel { .dark .panel {
border: solid 2px #333; border: solid 2px #333;
background: black; background: black;
color: silver; color: silver;
box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.5);
} }
.dark .panel summary { .dark .panel summary {
background: #333; background: #333;
@ -163,7 +163,7 @@
.dark .panel details { .dark .panel details {
border: solid 1px #333; border: solid 1px #333;
/* needed for dragging */ /* needed for dragging */
background: black; background: #080808;
color: #888; color: #888;
} }
.dark .panel details { .dark .panel details {
@ -186,6 +186,7 @@
.dark .panel .control .slider::-webkit-slider-thumb { .dark .panel .control .slider::-webkit-slider-thumb {
border: solid 2px #aaa; border: solid 2px #aaa;
background: black; background: black;
box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.5);
} }
.dark .panel .control.at-default .slider::-webkit-slider-thumb { .dark .panel .control.at-default .slider::-webkit-slider-thumb {
border: solid 1px gray; border: solid 1px gray;
@ -203,9 +204,80 @@
border: none; border: none;
border-top: solid 1px #333; border-top: solid 1px #333;
} }
/* local stuff */
body.dark {
background: black;
color: silver;
}
/* gray theme */
.gray .panel {
border: solid 2px #444;
background: #333;
color: silver;
box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.5);
}
.gray .panel summary {
background: #444;
}
.gray .panel summary::-webkit-details-marker {
color: #555;
}
.gray .panel button,
.gray .panel .state,
.gray .panel details {
border: solid 1px #444;
/* needed for dragging */
background: #333;
color: #888;
}
.gray .panel details {
border: solid 1px #454545;
}
.gray .panel details summary {
background: #444;
color: silver;
}
.gray .panel .state:active,
.gray .panel button:active {
background: #444;
}
.gray .panel .control .slider {
border: solid 1px #555;
background: #222;
}
.gray .panel .control.at-default .slider {
}
.gray .panel .control .slider::-webkit-slider-thumb {
border: solid 2px #aaa;
background: #333;
}
.gray .panel .control.at-default .slider::-webkit-slider-thumb {
border: solid 1px gray;
opacity: 0.5;
}
.gray .panel .control .value {
border: none;
background: transparent;
color: gray;
}
.gray .panel .control .reset:hover {
border: solid 1px #333;
}
.gray .panel hr {
border: none;
border-top: solid 1px #444;
}
/* local stuff */
body.gray {
background: #333;
color: silver;
}
</style> </style>
@ -450,6 +522,7 @@ function makeControls(target){
forcePlaceholderSize: true, forcePlaceholderSize: true,
start: function(e, ui){ start: function(e, ui){
ui.placeholder.height(ui.helper.outerHeight()); ui.placeholder.height(ui.helper.outerHeight());
ui.placeholder.width(ui.helper.outerWidth());
}, },
opacity: 0.5, opacity: 0.5,
}) })
@ -556,6 +629,7 @@ $(function(){
.click(function(){ .click(function(){
panel.show() panel.show()
}) })
}) })
@ -564,6 +638,6 @@ $(function(){
</script> </script>
<body> <body>
<img id="image" src="image.jpg" > <img id="image" src="image.jpg" >
<p>click image to show editor panel...</p> <p>click image to show editor panel and <a href="javascript:$('body').toggleClass('gray')">here</a> to toggle theme...</p>
</body> </body>
</html> </html>