From 8934e1e577fdd57307803c410bf6e9bb6ef3c3ab Mon Sep 17 00:00:00 2001 From: Scimonster Date: Wed, 30 Oct 2013 21:16:15 +0200 Subject: [PATCH 1/8] Start work on List class. I'm not quite sure what i'm doing here, but it seems to work. --- js/IO.js | 14 +++++++---- js/Reporter.js | 48 +++++++++++++++++++++++++++++++++++ player.css | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 125 insertions(+), 5 deletions(-) diff --git a/js/IO.js b/js/IO.js index 657317c..54d7086 100644 --- a/js/IO.js +++ b/js/IO.js @@ -93,18 +93,22 @@ IO.prototype.makeObjects = function() { runtime.stage.attachPenLayer(runtime.scene); runtime.stage.loadSounds(); - // Create the sprites - $.each(this.data.children, function(index, obj) { + // Create the sprites and watchers + $.each(this.data.children.concat(this.data.lists), function i(index, obj) { var newSprite; - if(!obj.cmd) { + if(!obj.cmd && !obj.listName) { // sprite newSprite = new Sprite(obj); - } else { + if (obj.lists) $.each(obj.lists, i); + } else if (!obj.listName) { // watcher newSprite = new Reporter(obj); runtime.reporters.push(newSprite); + } else { // list + newSprite = new List(obj); + runtime.reporters.push(newSprite); } runtime.sprites.push(newSprite); newSprite.attach(runtime.scene); - if (!obj.cmd) + if (!obj.cmd && !obj.listName) newSprite.loadSounds(); }); } diff --git a/js/Reporter.js b/js/Reporter.js index 7658201..970fc3d 100644 --- a/js/Reporter.js +++ b/js/Reporter.js @@ -118,3 +118,51 @@ Reporter.prototype.changeSlider = function() { var variable = $(this).attr('data-var'); target.variables[variable] = newValue; } + +var List = function(data) { + this.contents = data.contents; + this.listName = data.listName; + + this.height = data.height; + this.width = data.width; + this.x = data.x; + this.y = data.y; + this.z = io.getCount(); + this.visible = data.visible; + +// this.isPersistent = data.isPersistent; + + this.el = null; // jQuery element for list + this.containerEl = null; +}; + +List.prototype.attach = function(scene) { + this.el = $('
'); + this.el.append('
'+this.listName); + this.containerEl = $('
').appendTo(this.el); + this.el.append('
+'); + this.el.append('
length: '+this.contents.length); + scene.append(this.el); + this.update(); + this.el.css('left', this.x); + this.el.css('top', this.y); + this.el.width(this.width); + this.el.height(this.height); + this.el.css('z-index', this.z); + this.el.css('display', this.visible ? 'inline-block' : 'none'); +} + +List.prototype.update = function(){ + this.el.css('display', this.visible ? 'inline-block' : 'none'); + if (!this.visible) return; + + var c = this.containerEl.html(''); // so that it can be used inside the forEach + this.contents.forEach(function(val,i){ + $('
').appendTo(c).append('
'+(i+1),'
'+val); + }); + this.el.find('.list-length').text('length: '+this.contents.length); +}; + +List.prototype.updateLayer = function() { + this.el.css('z-index', this.z); +} diff --git a/player.css b/player.css index b2f9174..57d3762 100644 --- a/player.css +++ b/player.css @@ -91,6 +91,74 @@ position: absolute; } +/* List watcher styles */ +.list { + float: left; + border-radius: 7px; + -webkit-border-radius: 7px; + -moz-border-radius: 7px; + border-style: solid; + border-color: gray; + border-width: 2px; + background-color: #C1C4C7; + padding-left: 3px; + font: bold 10px Verdana, sans-serif; + position: absolute; +} + +.list .list-title { + padding-top: 2px; + text-align: center; + color: black; + font-weight: bold; +} + +.list .list-index { + color: rgb(81, 81, 81); + float: left; + padding: 2px; + margin-top: 0px; + font: bold 10px Verdana,sans-serif; +} + +.list .list-item { + float: left; + width: 70%; + min-height: 18px; + margin-bottom: 0px; + margin-right: 2px; + padding-left: 5px; + border-color: white; + border-style: solid; + border-width: 1px; + border-radius: 4px; + background-color: #D94D11; + font-size: 10px; + color: white; + word-wrap: break-word; + font: bold 10px Verdana, sans-serif; +} + +.list .list-add { + clear: both; + background-color: #dedede; + width: 12px; + height: 12px; + border-radius: 12px; + margin-top: 12px; + color: #707070; + font: bold 10px Verdana, sans-serif; + text-align: center; +} + +.list .list-length { + font-size: 10px; + font-weight: normal; + margin-top: -12px; + text-align: center; + color: black; +} + /* Say/think bubble styles */ .bubble-container { position: absolute; From 78220904e26a565cfad40202830924719579a932 Mon Sep 17 00:00:00 2001 From: Scimonster Date: Wed, 30 Oct 2013 21:47:46 +0200 Subject: [PATCH 2/8] List watchers will now scroll. --- js/Reporter.js | 3 ++- player.css | 25 +++++++++++++++---------- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/js/Reporter.js b/js/Reporter.js index 970fc3d..0fa3a81 100644 --- a/js/Reporter.js +++ b/js/Reporter.js @@ -139,7 +139,7 @@ var List = function(data) { List.prototype.attach = function(scene) { this.el = $('
'); this.el.append('
'+this.listName); - this.containerEl = $('
').appendTo(this.el); + this.containerEl = $('
').appendTo(this.el); this.el.append('
+'); this.el.append('
length: '+this.contents.length); scene.append(this.el); @@ -160,6 +160,7 @@ List.prototype.update = function(){ this.contents.forEach(function(val,i){ $('
').appendTo(c).append('
'+(i+1),'
'+val); }); + c.height(this.height-26); this.el.find('.list-length').text('length: '+this.contents.length); }; diff --git a/player.css b/player.css index 57d3762..8402a3e 100644 --- a/player.css +++ b/player.css @@ -140,23 +140,28 @@ } .list .list-add { - clear: both; - background-color: #dedede; - width: 12px; - height: 12px; - border-radius: 12px; - margin-top: 12px; - color: #707070; - font: bold 10px Verdana, sans-serif; - text-align: center; + clear: both; + background-color: #dedede; + width: 12px; + height: 12px; + border-radius: 12px; + color: #707070; + font: bold 10px Verdana, sans-serif; + text-align: center; + position: absolute; + bottom: 2px; + left: 2px; } .list .list-length { font-size: 10px; font-weight: normal; - margin-top: -12px; text-align: center; color: black; + position: absolute; + bottom: 2px; + left: 0px; + right: 0px; } /* Say/think bubble styles */ From 896f3c643ded37567b4dafa44c32da7efa962ef4 Mon Sep 17 00:00:00 2001 From: Scimonster Date: Thu, 31 Oct 2013 10:24:34 +0200 Subject: [PATCH 3/8] Worked more on list watchers - they now scroll mostly, and with a Scratch-style scrollbar. --- js/Reporter.js | 23 +++++++++++++++++++++-- player.css | 14 ++++++++++++++ 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/js/Reporter.js b/js/Reporter.js index 0fa3a81..e149658 100644 --- a/js/Reporter.js +++ b/js/Reporter.js @@ -134,13 +134,30 @@ var List = function(data) { this.el = null; // jQuery element for list this.containerEl = null; + this.scrollbar = null; }; List.prototype.attach = function(scene) { this.el = $('
'); this.el.append('
'+this.listName); - this.containerEl = $('
').appendTo(this.el); - this.el.append('
+'); + var c = this.containerEl = $('
').appendTo(this.el).width(this.width-19); + var s = this.scrollbar = $('
').appendTo(this.el); + var sb = s.children('.list-scrollbar'); + sb.mousedown(function(e){ + if (e.which===1) $(this).data({scrolling:true,startY:e.pageY}); // left button + }); + $('body').mousemove(function(e){ + if (sb.data('scrolling')) { + var offset = e.pageY-sb.data('startY'); + if (offset > -1 && offset < c.height()-sb.height()) { + sb.css('top',offset); + c.scrollTop(offset); + } + } + }).mouseup(function(){ + if ($.hasData(sb[0],'scrolling')) sb.removeData(['scrolling','startY']); + }); +// this.el.append('
+'); // disabled because it doesn't do anything even in the original this.el.append('
length: '+this.contents.length); scene.append(this.el); this.update(); @@ -161,6 +178,8 @@ List.prototype.update = function(){ $('
').appendTo(c).append('
'+(i+1),'
'+val); }); c.height(this.height-26); + var s = this.scrollbar.height(this.height-26); + s.children('.list-scrollbar').height(s.height()/c[0].scrollHeight*s.height()).css('display', s.children('.list-scrollbar').height()===c.height() ? 'none' : 'inline-block'); this.el.find('.list-length').text('length: '+this.contents.length); }; diff --git a/player.css b/player.css index 8402a3e..61573de 100644 --- a/player.css +++ b/player.css @@ -113,6 +113,20 @@ font-weight: bold; } +.list .list-scrollbar-container { + float: right; + width: 10px; + position: relative; +} + +.list .list-scrollbar { + position: absolute; + top: 0px; + width: 10px; + background-color: #a8aaad; + border-radius: 10px; +} + .list .list-index { color: rgb(81, 81, 81); float: left; From 2d07f95c55526061d5ffd8b429a652ae973f2edd Mon Sep 17 00:00:00 2001 From: Scimonster Date: Sun, 3 Nov 2013 17:47:32 +0200 Subject: [PATCH 4/8] Fixed scrolling. --- js/Reporter.js | 14 ++++++++++---- player.css | 5 +++-- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/js/Reporter.js b/js/Reporter.js index e149658..a068d03 100644 --- a/js/Reporter.js +++ b/js/Reporter.js @@ -148,11 +148,15 @@ List.prototype.attach = function(scene) { }); $('body').mousemove(function(e){ if (sb.data('scrolling')) { - var offset = e.pageY-sb.data('startY'); - if (offset > -1 && offset < c.height()-sb.height()) { - sb.css('top',offset); - c.scrollTop(offset); + var offset = parseInt(sb.css('top'))+e.pageY-sb.data('startY'); + if (offset < 0) { + offset = 0; } + if (offset > c.height()-sb.height()) { + offset = c.height()-sb.height(); + } + sb.css('top',offset); + c.scrollTop(c.height()/sb.height()*offset); } }).mouseup(function(){ if ($.hasData(sb[0],'scrolling')) sb.removeData(['scrolling','startY']); @@ -178,6 +182,8 @@ List.prototype.update = function(){ $('
').appendTo(c).append('
'+(i+1),'
'+val); }); c.height(this.height-26); + c.find('.list-index').width(c.find('.list-index').last().width()); + c.find('.list-item').width(c.width()-c.find('.list-index').width()-15) var s = this.scrollbar.height(this.height-26); s.children('.list-scrollbar').height(s.height()/c[0].scrollHeight*s.height()).css('display', s.children('.list-scrollbar').height()===c.height() ? 'none' : 'inline-block'); this.el.find('.list-length').text('length: '+this.contents.length); diff --git a/player.css b/player.css index 61573de..a0ee51d 100644 --- a/player.css +++ b/player.css @@ -132,13 +132,14 @@ float: left; padding: 2px; margin-top: 0px; - font: bold 10px Verdana,sans-serif; + font: bold 10px monospace; } .list .list-item { float: left; width: 70%; - min-height: 18px; + height: 16px; + overflow: hidden; margin-bottom: 0px; margin-right: 2px; padding-left: 5px; From b2644c0365398ed100fdb8032264904429b94e6b Mon Sep 17 00:00:00 2001 From: "Shane M. Clements" Date: Sun, 3 Nov 2013 19:49:55 -0700 Subject: [PATCH 5/8] Added guidelines for contributing code --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 91a59a9..5777743 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,11 @@ Unimplementable Features on iOS: Image effects for whirl, fisheye, mosaic, and p More documentation will be added as time permits. Thanks for contributing, and Scratch On! +## Contributions + +Thank you for your interest in helping out with the Scratch HTML5 Player. [@sclements](https://github.com/sclements/) is the maintainer of the project and reviews all code before pull requests are approved. Though we appreciate all attempts to contribute, there are some contraints that must be met before pull requests can be approved. Here are our top concerns for contributions: matching the behavior and interface of the Flash player, code cleanliness and organization, and robust well tested logic. CSS goes into player.css (not in the html or javascript). Please use [compare.html](https://github.com/LLK/scratch-html5/blob/master/compare.html) to compare your work with the production Flash player. + + ## Installation Running the HTML5 player on your own website, or locally, you will need to have From 374c3ccf19e8b142de892b4885df95697fbf66d5 Mon Sep 17 00:00:00 2001 From: "Shane M. Clements" Date: Mon, 4 Nov 2013 06:11:05 +0000 Subject: [PATCH 6/8] Fixed look of the green flag over the HTML5 player. Moved some styles into compare.css from compare.html. Implemented debug logs for Javascript and Actionscript to compare the operation of both virtual machines. Moved start and stop buttons above the players. --- compare.css | 9 +++++++++ compare.html | 51 ++++++++++++++++++++++++++++++++++------------- js/Interpreter.js | 11 ++++++++++ player.css | 15 +++++++------- 4 files changed, 65 insertions(+), 21 deletions(-) create mode 100644 compare.css diff --git a/compare.css b/compare.css new file mode 100644 index 0000000..c28d073 --- /dev/null +++ b/compare.css @@ -0,0 +1,9 @@ +textarea { + width: 450px; + height: 200px; +} + +object { + display: block; +} + diff --git a/compare.html b/compare.html index 1e89b26..19b1eff 100644 --- a/compare.html +++ b/compare.html @@ -15,6 +15,7 @@ header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past } + @@ -47,18 +48,16 @@ header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past } -
+
+
Loading...
+ + + +
+
 
 
@@ -97,20 +124,16 @@ header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
 
+
-
+
+
-
Loading...
- - - - - diff --git a/js/Interpreter.js b/js/Interpreter.js index c7bbee9..83cdd11 100644 --- a/js/Interpreter.js +++ b/js/Interpreter.js @@ -54,6 +54,9 @@ var Interpreter = function() { this.yield = false; this.doRedraw = false; this.opCount = 0; // used to benchmark the interpreter + this.debugOps = false; + this.debugFunc = null; + this.opCount2 = 0; }; // Utilities for building blocks and sequences of blocks @@ -136,6 +139,14 @@ Interpreter.prototype.stepActiveThread = function() { // Advance the "program counter" to the next block before running the primitive. // Control flow primitives (e.g. if) may change activeThread.nextBlock. this.activeThread.nextBlock = b.nextBlock; + if(this.debugOps && this.debugFunc) { + var finalArgs = new Array(b.args.length); + for(var i=0; i Date: Mon, 4 Nov 2013 22:28:23 +0200 Subject: [PATCH 7/8] Add show/hide list blocks, fix list reporters, and fix show/hide var (issue was with multiple sprites having same local variable name). --- js/IO.js | 50 +++++++++++++++++++++++++---------- js/Reporter.js | 8 ++++-- js/primitives/VarListPrims.js | 34 +++++++++++++++++++----- 3 files changed, 70 insertions(+), 22 deletions(-) diff --git a/js/IO.js b/js/IO.js index 1bc2f48..5671e2f 100644 --- a/js/IO.js +++ b/js/IO.js @@ -91,22 +91,44 @@ IO.prototype.makeObjects = function() { runtime.stage.attachPenLayer(runtime.scene); runtime.stage.loadSounds(); // Create the sprites and watchers - $.each(this.data.children.concat(this.data.lists), function i(index, obj) { + function createObj(obj, sprite) { var newSprite; - if(!obj.cmd && !obj.listName) { // sprite - newSprite = new Sprite(obj); - if (obj.lists) $.each(obj.lists, i); - } else if (!obj.listName) { // watcher - newSprite = new Reporter(obj); - runtime.reporters.push(newSprite); - } else { // list - newSprite = new List(obj); - runtime.reporters.push(newSprite); - } - runtime.sprites.push(newSprite); - newSprite.attach(runtime.scene); - if (!obj.cmd && !obj.listName) + function createSprite(obj) { + var newSprite = new Sprite(obj); newSprite.loadSounds(); + return newSprite; + } + function createReporter(obj, sprite) { + var newSprite; + if (obj.listName) { // list + if (!(sprite===runtime.stage && !runtime.stage.lists[obj.listName])) { // for local lists, only if in sprite + newSprite = new List(obj, sprite.objName); + runtime.reporters.push(newSprite); + } + } else { + newSprite = new Reporter(obj); + runtime.reporters.push(newSprite); + } + return newSprite; + } + if (obj.objName) { // sprite + newSprite = createSprite(obj); + sprite = newSprite; + } else { + newSprite = createReporter(obj, sprite); + } + if (newSprite) { + runtime.sprites.push(newSprite); + newSprite.attach(runtime.scene); + } + } + $.each(this.data.children, function(index, obj) { + createObj(obj, runtime.stage); // create children of stage - sprites, watchers, and stage's lists + }); + $.each(runtime.sprites.filter(function(sprite){return sprite instanceof Sprite}), function(index, sprite) { // list of sprites + $.each(sprite.lists, function(index, list){ + createObj(list, sprite); // create local lists + }); }); }; diff --git a/js/Reporter.js b/js/Reporter.js index b284df5..5456766 100644 --- a/js/Reporter.js +++ b/js/Reporter.js @@ -120,7 +120,7 @@ Reporter.prototype.changeSlider = function() { target.variables[variable] = newValue; }; -var List = function(data) { +var List = function(data, sprite) { this.contents = data.contents; this.listName = data.listName; @@ -131,6 +131,8 @@ var List = function(data) { this.z = io.getCount(); this.visible = data.visible; + this.target = sprite; + // this.isPersistent = data.isPersistent; this.el = null; // jQuery element for list @@ -140,7 +142,7 @@ var List = function(data) { List.prototype.attach = function(scene) { this.el = $('
'); - this.el.append('
'+this.listName); + this.el.append('
'+(this.target==='Stage'?'':this.target+' ')+this.listName); var c = this.containerEl = $('
').appendTo(this.el).width(this.width-19); var s = this.scrollbar = $('
').appendTo(this.el); var sb = s.children('.list-scrollbar'); @@ -175,6 +177,8 @@ List.prototype.attach = function(scene) { }; List.prototype.update = function(){ + this.contents = findList(runtime.spriteNamed(this.target),this.listName); + this.el.css('display', this.visible ? 'inline-block' : 'none'); if (!this.visible) return; diff --git a/js/primitives/VarListPrims.js b/js/primitives/VarListPrims.js index 065be7d..a8f734a 100644 --- a/js/primitives/VarListPrims.js +++ b/js/primitives/VarListPrims.js @@ -34,6 +34,8 @@ VarListPrims.prototype.addPrimsTo = function(primTable) { primTable['lineCountOfList:'] = this.primListLength; primTable['getLine:ofList:'] = this.primListGetLine; primTable['list:contains:'] = this.primListContains; + primTable['hideList:'] = this.primHideList; + primTable['showList:'] = this.primShowList; }; // Variable primitive implementations @@ -74,9 +76,9 @@ VarListPrims.prototype.primChangeVar = function(b) { }; VarListPrims.prototype.primHideVar = function(b) { - var targetVar = interp.arg(b, 0); + var targetVar = interp.arg(b, 0), targetSprite = interp.targetSprite().objName; for (var r = 0; r < runtime.reporters.length; r++) { - if (runtime.reporters[r].cmd == 'getVar:' && runtime.reporters[r].param == targetVar) { + if (runtime.reporters[r].cmd == 'getVar:' && runtime.reporters[r].param == targetVar && (runtime.reporters[r].target == targetSprite || runtime.reporters[r].target == 'Stage')) { runtime.reporters[r].visible = false; return; } @@ -84,9 +86,9 @@ VarListPrims.prototype.primHideVar = function(b) { }; VarListPrims.prototype.primShowVar = function(b) { - var targetVar = interp.arg(b, 0); + var targetVar = interp.arg(b, 0), targetSprite = interp.targetSprite().objName; for (var r = 0; r < runtime.reporters.length; r++) { - if (runtime.reporters[r].cmd == 'getVar:' && runtime.reporters[r].param == targetVar) { + if (runtime.reporters[r].cmd == 'getVar:' && runtime.reporters[r].param == targetVar && (runtime.reporters[r].target == targetSprite || runtime.reporters[r].target == 'Stage')) { runtime.reporters[r].visible = true; return; } @@ -96,7 +98,7 @@ VarListPrims.prototype.primShowVar = function(b) { // List primitive implementations // Take a list name and target sprite and return the JS list itself -var findList = function(targetSprite, listName) { +function findList(targetSprite, listName) { if (targetSprite == null) targetSprite = runtime.stage; if (listName in targetSprite.lists) { return targetSprite.lists[listName].contents; @@ -104,7 +106,7 @@ var findList = function(targetSprite, listName) { return runtime.stage.lists[listName].contents; } return null; -}; +} VarListPrims.prototype.primReadList = function(b) { var list = findList(interp.targetSprite(), interp.arg(b, 0)); @@ -181,3 +183,23 @@ VarListPrims.prototype.primListContains = function(b) { if (parseFloat(searchItem) == searchItem) searchItem = parseFloat(searchItem); return $.inArray(searchItem, list) > -1; }; + +VarListPrims.prototype.primHideList = function(b) { + var targetList = interp.arg(b, 0), targetSprite = interp.targetSprite().objName; + for (var r = 0; r < runtime.reporters.length; r++) { + if (runtime.reporters[r] instanceof List && runtime.reporters[r].listName == targetList && (runtime.reporters[r].target == targetSprite || runtime.reporters[r].target == 'Stage')) { + runtime.reporters[r].visible = false; + return; + } + } +}; + +VarListPrims.prototype.primShowList = function(b) { + var targetList = interp.arg(b, 0), targetSprite = interp.targetSprite().objName; + for (var r = 0; r < runtime.reporters.length; r++) { + if (runtime.reporters[r] instanceof List && runtime.reporters[r].listName == targetList && (runtime.reporters[r].target == targetSprite || runtime.reporters[r].target == 'Stage')) { + runtime.reporters[r].visible = true; + return; + } + } +}; From d0b9f61494834dc97edc0f622ad0889ee3377b1c Mon Sep 17 00:00:00 2001 From: Scimonster Date: Mon, 4 Nov 2013 23:06:54 +0200 Subject: [PATCH 8/8] Some list watcher style changes. --- js/Reporter.js | 8 ++++---- player.css | 18 ++++++++++-------- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/js/Reporter.js b/js/Reporter.js index 5456766..79a83f1 100644 --- a/js/Reporter.js +++ b/js/Reporter.js @@ -143,7 +143,7 @@ var List = function(data, sprite) { List.prototype.attach = function(scene) { this.el = $('
'); this.el.append('
'+(this.target==='Stage'?'':this.target+' ')+this.listName); - var c = this.containerEl = $('
').appendTo(this.el).width(this.width-19); + var c = this.containerEl = $('
').appendTo(this.el).width(this.width-13).height(this.height-34); var s = this.scrollbar = $('
').appendTo(this.el); var sb = s.children('.list-scrollbar'); sb.mousedown(function(e){ @@ -186,10 +186,9 @@ List.prototype.update = function(){ this.contents.forEach(function(val,i){ $('
').appendTo(c).append('
'+(i+1),'
'+val); }); - c.height(this.height-26); c.find('.list-index').width(c.find('.list-index').last().width()); - c.find('.list-item').width(c.width()-c.find('.list-index').width()-15) - var s = this.scrollbar.height(this.height-26); + c.find('.list-item').width(c.width()-c.find('.list-index').width()-15); + var s = this.scrollbar.height(c.height()); s.children('.list-scrollbar').height(s.height()/c[0].scrollHeight*s.height()).css('display', s.children('.list-scrollbar').height()===c.height() ? 'none' : 'inline-block'); this.el.find('.list-length').text('length: '+this.contents.length); }; @@ -197,3 +196,4 @@ List.prototype.update = function(){ List.prototype.updateLayer = function() { this.el.css('z-index', this.z); }; + diff --git a/player.css b/player.css index a0ee51d..3aa17b3 100644 --- a/player.css +++ b/player.css @@ -102,7 +102,7 @@ border-width: 2px; background-color: #C1C4C7; padding-left: 3px; - font: bold 10px Verdana, sans-serif; + font: bold 11px sans-serif; position: absolute; } @@ -111,6 +111,7 @@ text-align: center; color: black; font-weight: bold; + margin-bottom: 4px; } .list .list-scrollbar-container { @@ -132,26 +133,26 @@ float: left; padding: 2px; margin-top: 0px; - font: bold 10px monospace; + text-align: right; + font: bold 11px; } .list .list-item { - float: left; - width: 70%; + float: right; height: 16px; overflow: hidden; margin-bottom: 0px; margin-right: 2px; + padding-top: 2px; padding-left: 5px; border-color: white; border-style: solid; border-width: 1px; border-radius: 4px; - background-color: #D94D11; - font-size: 10px; + background-color: #cc5b22; color: white; word-wrap: break-word; - font: bold 10px Verdana, sans-serif; + font: bolder 11px sans-serif; } .list .list-add { @@ -161,7 +162,7 @@ height: 12px; border-radius: 12px; color: #707070; - font: bold 10px Verdana, sans-serif; + font: bold 10px sans-serif; text-align: center; position: absolute; bottom: 2px; @@ -225,3 +226,4 @@ background: url(img/think-bottom.png) transparent no-repeat; } +