Skip to content

Instantly share code, notes, and snippets.

@zincplusplus

zincplusplus/dabblet.css

Created January 2, 2012 11:04
Show Gist options
  • Save zincplusplus/1550295 to your computer and use it in GitHub Desktop.
Save zincplusplus/1550295 to your computer and use it in GitHub Desktop.
Download ZIP
The save-as window
Raw
dabblet.css
/**
* The save-as window
* start: 1h 19:35
* end:
*/
/*----------------------------------------------------------------------------------
* tools
---------------------------------------------------------------------------------*/
.fbox {
overflow:hidden;
zoom: 1;
}
.fleft {
float:left;
}
.fright {
float: right;
}
/*----------------------------------------------------------------------------------
* general
---------------------------------------------------------------------------------*/
html {
background:radial-gradient(circle, #000 20%, transparent 20%) 5em 5em,
radial-gradient(circle, #444 20%, transparent 20%) 5em 6em,
radial-gradient(circle, #000 20%, transparent 20%),
radial-gradient(circle, #444 20%, transparent 20%) 0 1em;
background-size: 10em 10em;
background-color: #323232;
font-size:1px;
}
body {
font-family: Tahoma, Arial;
font-size: 11px;
height: 610px;
margin: 0;
position: relative;
}
/*----------------------------------------------------------------------------------
* dialog
---------------------------------------------------------------------------------*/
.dialog-holder {
height: 50%;
left: 50%;
position: absolute;
min-height: 400px;
min-width: 460px;
top: 50%;
width: 50%;
}
.dialog {
border-radius: 5px;
box-shadow: 0 0 10px 2px #000;
left: -50%;
top: -50%;
position: relative;
}
.dialog .title-bar {
background: linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(255,255,255,.05) 50%, transparent 50% );
box-shadow: 0 1px 0 0 rgba(255,255,255,.2) inset;
border-radius: 5px 5px 0 0;
height: 32px;
line-height: 32px;
text-overflow: ellipsis;
}
.dialog .title-bar .title {
color: #fff;
font-size: 14px;
font-weight: bold;
padding: 0 12px;
}
.dialog .title-bar .close {
background: url(http://dl.dropbox.com/u/10214082/close-button.png) no-repeat 0 50%;
text-indent: -9999px;
width: 23px;
}
.dialog .title-bar .close:hover {
background-position: -21px 50%;
}
.dialog-content {
padding: 10px;
}
.dialog-content .section:not(:last-child) {
margin-bottom: 10px;
}
.filename label {
float:left;
height: 27px;
line-height: 27px;
font-weight: bold;
}
.filename div {
margin-left: 50px;
}
input[type="text"],
input[type="text"]:focus {
background: linear-gradient(top, #ececec 0%, #fff 50%);
border: 1px solid #afafaf;
box-sizing: border-box;
display: inline-block;
height: 27px;
line-height: 17px;
padding: 3px 5px;
outline: 0 none;
width: 100%;
}
.currentpath {
color: #bababa;
display: block;
font-size:11px;
padding-left: 2px;
margin-top: 5px;
text-shadow: 0 1px 0 #fff;
}
.dialog .file-view-mode {
margin-right: 10px;
padding: 6px 0;
}
.dialog .file-view-mode input {
position: absolute;
left: -9999px;
}
.dialog .file-view-mode input + label {
background: url(http://dl.dropbox.com/u/10214082/checkbox.png) no-repeat 0 -17px;
display: block;
height: 17px;
line-height: 17px;
padding-left: 20px;
}
.dialog .file-view-mode input + label:hover {
background-position: 0 -51px;
}
.dialog .file-view-mode input:checked + label {
background-position: 0 0;
}
.dialog .file-view-mode input:checked + label:hover {
background-position: 0 -34px;
}
.icon-button {
background: linear-gradient(top, #fafafa, #e6e6e6);
border: 1px solid #c3c3c3;
border-radius: 5px;
box-shadow: 0 1px 0 #fff;
color: #000;
display: inline-block;
font-size: 12px;
height: 24px;
line-height: 24px;
position:relative;
padding: 3px 3px 3px 28px;
text-decoration: none;
}
.icon-button:hover {
background: linear-gradient(bottom, #fafafa, #e6e6e6);
}
.icon-button:before {
content: "";
display:block;
height: 24px;
left: 3px;
position: absolute;
width: 21px;
}
.create-folder:before {
background: url(http://static.c9.io/static/style/icons/folder_new.png) no-repeat 0px 50%;;
}
.dialog .action-bar {
border-radius: 0 0 5px 5px;
background: linear-gradient(top, transparent 1px, rgba(255,255,255,.5) 2px, transparent 2px);
box-shadow: 0 -1px 0 0 #000 inset;
padding: 10px;
text-align: right;
}
.action-button {
background-image: linear-gradient(bottom, rgba(0,0,0,.2), transparent);
border: 0;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
0 1px 0 #000;
color: #fff;
font-size: 13px;
font-weight: bold;
outline: 0;
padding: 5px 20px;
}
.action-button:hover {
background-image: linear-gradient(top, rgba(0,0,0,.2), transparent);
}
input.cancel {
background-color: #636363;
text-shadow: 0 1px 0 #000;
}
input.apply {
background-color: #49a204;
}
/*----------------------------------------------------------------------------------
* dark-theme
---------------------------------------------------------------------------------*/
.dark-theme .dialog .title-bar {
background-color: #27292b;
}
.dark-theme .dialog-content {
background-color: #dedede;
}
.dark-theme .action-bar {
background-color: #26282a;
}
/*----------------------------------------------------------------------------------
* tree-view
---------------------------------------------------------------------------------*/
.tree-view {
background: linear-gradient(top, white 50%, #f1f1f1 50%) 0 2px;
background-size: 40px 40px;
border: 1px solid #c3c3c3;
}
.tree-view-header {
background: linear-gradient(top, #f8f8f8, #e5e5e5);
box-shadow: 0 0 0 1px #fff inset;
padding-bottom: 1px;
}
.tree-view-header .row header {
border-bottom: 1px solid #c3c3c3;
height: 20px;
}
.tree-view-header .col-name:hover,
.tree-view-header .col-size:hover,
.tree-view-header .col-date:hover {
background-color: white;
}
.tree-view .row header {
position: relative;
}
.tree-view .tree-view-content header:hover,
.tree-view .tree-view-content .selected {
background: linear-gradient(top, #2890E5 0px, #1F82D2 20px, transparent 20px);
color: #fff;
}
.tree-view .row header .resizable {
margin-right: 60px;
overflow: hidden;
zoom: 1;
}
.tree-view .row header .col-name,
.tree-view .row header .col-size,
.tree-view .row header .col-date {
box-shadow: -1px 0 0 0 rgba(0,0,0,.1);
cursor: default;
height: 20px;
line-height: 20px;
text-indent: 3px
}
.tree-view .row header .col-name {
box-sizing: border-box;
float: left;
width: 60%;
}
.tree-view .row .row { }
.tree-view .row .row .col-name { padding-left: 30px; }
.tree-view .row .col-name strong {
display: block;
font-weight: normal;
height: 20px;
line-height: 20px;
margin-left: 15px;
overflow: hidden;
}
.tree-view-content .col-name .expander {
background: url(http://dl.dropbox.com/u/10214082/tree_close_arrow_small.png) no-repeat 50% 0;
display: block;
float: left;
height: 20px;
text-indent: -9999px;
width: 19px;
}
.tree-view-content .col-name .opened {
background-position: 50% 100%;
}
.tree-view-content .file .col-name .expander {
background: none;
}
.tree-view .row header .col-size {
float: left;
overflow: hidden;
text-overflow: ellipsis;
width: 40%;
}
.tree-view .row header .col-date {
overflow: hidden;
position: absolute;
right: 0px;
text-overflow: ellipsis;
top: 0;
width: 60px;
}
.tree-view .folder .col-name strong {
background: url(http://static.c9.io/static/style/icons/folder.png) no-repeat 0 1px;
padding-left: 20px;
text-overflow: ellipsis;
}
.tree-view .txt .col-name strong {
background: url(http://static.c9.io/static/style/icons/page_white_text.png) no-repeat 0 50%;
}
/*----------------------------------------------------------------------------------
* end tree-view
---------------------------------------------------------------------------------*/
Raw
dabblet.html
<div class="dialog-holder dark-theme">
<div class="dialog">
<div class="title-bar fbox">
<div class="title fleft">Save As</div>
<div class="close fright">X</div>
</div>
<div class="dialog-content">
<div class="filename section fbox">
<label for="name">Save as:</label>
<div class="">
<input type="text" id="name" name="name" value="filename.php" />
<span class="currentpath">/workspace/</span>
</div>
</div>
<div class="section tree-view">
<div class="tree-view-header">
<div class="row">
<header>
<div class="resizable">
<div class="col-name">
<span class="expander"></span>
<strong>Name</strong>
</div>
<div class="col-size">Size</div>
</div>
<div class="col-date">Date</div>
</header>
</div>
</div>
<div class="tree-view-content">
<div class="folder row">
<header>
<div class="resizable">
<div class="col-name">
<span class="expander opened"></span>
<strong>Folder as ksakdaklsjd lasj kasjda jsdj alskdjalksjdl kasjldk ajlkas das das dasd asd d jasl Folder as ksakdaklsjd lasj kasjda jsdj alskdjalksjdl kasjldk ajlkas das das dasd asd d jasl </strong>
</div>
<div class="col-size">--</div>
</div>
<div class="col-date">30.02.2012</div>
</header>
<div class="folder row">
<header>
<div class="resizable">
<div class="col-name">
<span class="expander"></span>
<strong>Folder</strong>
</div>
<div class="col-size">--</div>
</div>
<div class="col-date">31.02.2012</div>
</header>
<div class="folder row"> <header>
<div class="resizable">
<div class="col-name">
<span class="expander"></span>
<strong>Folder</strong>
</div>
<div class="col-size">--</div>
</div>
<div class="col-date">30.02.2012</div>
</header>
</div>
</div>
<div class="folder row">
<header>
<div class="resizable">
<div class="col-name">
<span class="expander"></span>
<strong>Folder</strong>
</div>
<div class="col-size">--</div>
</div>
<div class="col-date">30.02.2012</div>
</header>
</div>
<div class="folder row">
<header>
<div class="resizable">
<div class="col-name">
<span class="expander"></span>
<strong>Folder</strong>
</div>
<div class="col-size">--</div>
</div>
<div class="col-date">30.02.2012</div>
</header>
</div>
<div class="folder row">
<header>
<div class="resizable">
<div class="col-name">
<span class="expander"></span>
<strong>Folder</strong>
</div>
<div class="col-size">--</div>
</div>
<div class="col-date">30.02.2012</div>
</header>
</div>
<div class="folder row">
<header>
<div class="resizable">
<div class="col-name">
<span class="expander"></span>
<strong>Folder</strong>
</div>
<div class="col-size">--</div>
</div>
<div class="col-date">30.02.2012</div>
</header>
</div>
<div class="file txt row">
<header>
<div class="resizable">
<div class="col-name">
<span class="expander"></span>
<strong>File.txt</strong>
</div>
<div class="col-size">24 KB</div>
</div>
<div class="col-date">30.02.2012</div>
</header>
</div>
<div class="file txt row">
<header>
<div class="resizable">
<div class="col-name">
<span class="expander"></span>
<strong>File.txt</strong>
</div>
<div class="col-size">24 KB</div>
</div>
<div class="col-date">30.02.2012</div>
</header>
</div>
<div class="file txt row">
<header>
<div class="resizable">
<div class="col-name">
<span class="expander"></span>
<strong>File.txt</strong>
</div>
<div class="col-size">24 KB</div>
</div>
<div class="col-date">30.02.2012</div>
</header>
</div>
<div class="file txt row">
<header>
<div class="resizable">
<div class="col-name">
<span class="expander"></span>
<strong>File.txt</strong>
</div>
<div class="col-size">24 KB</div>
</div>
<div class="col-date">30.02.2012</div>
</header>
</div>
<div class="file txt row">
<header>
<div class="resizable">
<div class="col-name">
<span class="expander"></span>
<strong>File.txt</strong>
</div>
<div class="col-size">24 KB</div>
</div>
<div class="col-date">30.02.2012</div>
</header>
</div>
</div>
</div>
</div>
<div class="section fbox">
<a href="#" class="create-folder icon-button fleft">Create folder</a>
<div class="file-view-mode fright ">
<input type="checkbox" id="view-mode" name="view-mode" checked="checked" />
<label for="view-mode">Show files in tree</label>
</div>
</div>
</div>
<div class="action-bar">
<input class="action-button cancel" type="button" id="cancel" name="cancel" value="Cancel" />
<input class="action-button apply" type="submit" id="submit" name="submit" value="Save" />
</div>
</div>
</div>
Raw
settings.json
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment