ubiquity skin : terminal

最开始在分析ubiquity显示结构上花了很多时间，包括分析文档 里各个id和class的语义,查看各个实例等等,推测出来的结构大概下面是这个样子.

<div id="cmd-panel"><div id="cmd-entry-container">

<div id="cmd-entry"></div>  //命令输入框

<div id="cmd-preview"><div id="ubiquity-preview">
<div id="suggestions">.selection .hilited-text .hilited .needarg .cmdicon .suggested </div>  //命令补全
<div id="preview-pane"> .help  .gresult .gresult-url .gresult-content </div> //结果预览
</div></div>

</div></div>

不过实际上手之后,发现根据这个结构写出来的样式表,上和预期的效果差很远。这个结构应该是错误的,不过有些细节方面还可以参考一下,比如ubiquity-preview下面的继承关系等等.

最后,放弃对结构的研究,直接从现有样式修改,下面这个是从Ubiquity Evolved修改过来的,感觉总是有些束手束脚的,也许过几天应该基于Simpliquity修改一个.



默认样式方面cmd-entry和cmd-preview都是有边框的,它们也许是某个input或者表格的一部分.

另外如果给cmd-panel设置opacity属性,整个样式会变得一团糟.

download:http://gist.github.com/47932