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

tweaking editor size...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-11-30 04:41:05 +04:00
parent dd269edbb5
commit edad81f4b0
1 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
ui/experiments/editor.html
View File

@ -6,6 +6,8 @@
min-width: 200px; min-width: 200px;
max-width: 450px; max-width: 450px;
font-size: 12px;
border: solid 2px silver; border: solid 2px silver;
border-radius: 4px; border-radius: 4px;
@ -37,7 +39,8 @@
.panel details, .panel details,
.panel .state { .panel .state {
margin: 1px; margin: 1px;
border: solid 1px gray; font-size: 11px;
border: solid 1px #aaa;
border-radius: 4px; border-radius: 4px;
/* needed for dragging */ /* needed for dragging */
background: white; background: white;
@ -70,24 +73,25 @@
} }
.panel .control .title { .panel .control .title {
display: inline-block; display: inline-block;
width: 80px; width: 60px;
cursor: move; cursor: move;
} }
.panel .control .slider { .panel .control .slider {
-webkit-appearance: none !important; -webkit-appearance: none !important;
width: 200px; width: 150px;
height: 4px; height: 3px;
border: solid 1px gray; border: solid 1px #ccc;
border-radius: 2px; border-radius: 2px;
background: silver; background: white;
} }
.panel .control.at-default .slider { .panel .control.at-default .slider {
} }
.panel .control .slider::-webkit-slider-thumb { .panel .control .slider::-webkit-slider-thumb {
-webkit-appearance: none !important; -webkit-appearance: none !important;
height: 15px; height: 13px;
width: 15px; width: 13px;
border: solid 1px gray; /*border: solid 1px gray;*/
border: solid 2px #aaa;
border-radius: 50%; border-radius: 50%;
background: white; background: white;
box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
@ -98,8 +102,9 @@
.panel .control .value { .panel .control .value {
-webkit-appearance: none !important; -webkit-appearance: none !important;
display: inline-block; display: inline-block;
width: 40px; width: 25px;
text-align: right; text-align: right;
font-size: 11px;
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
border: none; border: none;
@ -175,7 +180,7 @@
} }
.dark .panel .state:active, .dark .panel .state:active,
.dark .panel button:active { .dark .panel button:active {
background: #555; background: #222;
} }
.dark .panel .control .slider { .dark .panel .control .slider {
border: solid 1px #555; border: solid 1px #555;
@ -207,7 +212,7 @@
/* local stuff */ /* local stuff */
body.dark { body.dark {
background: black; background: #0a0a0a;
color: silver; color: silver;
} }
@ -266,7 +271,7 @@ body.dark {
color: gray; color: gray;
} }
.gray .panel .control .reset:hover { .gray .panel .control .reset:hover {
border: solid 1px #333; border: solid 1px #444;
} }
.gray .panel hr { .gray .panel hr {
border: none; border: none;
@ -615,6 +620,21 @@ function reloadControls(target){
/*********************************************************************/ /*********************************************************************/
function toggleThemes(){
var b = $('body')
if(b.hasClass('gray')){
b.removeClass('gray')
b.addClass('dark')
} else if(b.hasClass('dark')){
b.removeClass('dark')
} else {
b.addClass('gray')
}
}
// setup... // setup...
$(function(){ $(function(){
var target = '#image' var target = '#image'
@ -638,6 +658,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 and <a href="javascript:$('body').toggleClass('gray')">here</a> to toggle theme...</p> <p>click image to show editor panel and <a href="javascript:toggleThemes()">here</a> to toggle theme...</p>
</body> </body>
</html> </html>