codiad/themes/default/active/screen.css

308 lines
6.7 KiB
CSS
Executable File

/* Current Files */
.bar {
z-index: 2;
position: relative;
height: 10px;
width: 100%;
background: #202020;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .9);
}
.active-sort-placeholder {
border: 1px dashed #333;
border-radius: 5px;
}
/************************
* Tab list
************************/
#tab-list-active-files {
list-style-type: none;
overflow: hidden;
height: 33px;
margin: 0;
padding: 0;
padding-left: 15px;
}
#tab-list-active-files li {
margin-top: 7px;
height: 60px;
width: auto;
max-width: 200px;
position: relative;
float: left;
border-top-right-radius: 20px 60px;
border-top-left-radius: 20px 60px;
margin-left: -15px;
padding-left: 20px;
z-index: 1;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .9);
}
#tab-list-active-files li.active {
z-index: 3;
}
#tab-list-active-files li:first-child {
margin-left: 0;
}
#tab-list-active-files li a.label {
display: block;
float: left;
text-align: left;
width: 140px;
line-height: 25px;
padding-top: 1px;
padding-right: 5px;
color: #757575;
overflow: hidden;
text-decoration: none;
direction: rtl;
white-space: nowrap;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
#tab-list-active-files li.active a.label {
color: #A0A0A0;
}
#tab-list-active-files li .file-name {
color: #AFAFAF;
}
#tab-list-active-files li.active .file-name {
color: white;
}
#tab-list-active-files li.changed {
/*font-weight: bold;*/
border-top: 2px solid #3BA628;
}
#tab-list-active-files li a.close {
display: block;
float: right;
margin: 6px 17px 0 0;
padding: 1px 5px 2px 4px;
color: #616161;
background: #1a1a1a;
border-radius: 5px;
line-height: 100%;
}
#tab-list-active-files li a.close:hover {
color: #fff;
background-color: #000;
}
/* Clear Fix took from HTML 5 Boilerplate. */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/*
Theme For Tabs
Gradients Generated by: http://www.colorzilla.com/gradient-editor/
*/
#tab-list-active-files li {
background: #2d2d2d; /* Old browsers */
background: -moz-linear-gradient(top, #2d2d2d 0%, #141414 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d2d2d), color-stop(100%,#141414)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2d2d2d 0%,#141414 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2d2d2d 0%,#141414 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2d2d2d 0%,#141414 100%); /* IE10+ */
background: linear-gradient(to bottom, #2d2d2d 0%,#141414 100%); /* W3C */
}
#tab-list-active-files li.active{
background: #474747; /* Old browsers */
background: -moz-linear-gradient(top, #474747 0%, #141414 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#474747), color-stop(100%,#141414)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #474747 0%,#141414 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #474747 0%,#141414 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #474747 0%,#141414 100%); /* IE10+ */
background: linear-gradient(to bottom, #474747 0%,#141414 100%); /* W3C */
}
/* Close button */
#tab-close {
/* Adjust this size depending on the final editor-top-bar height. */
position: fixed;
top: 7px;
right: 8px;
height: 35px;
}
#tab-close-button {
font-size: 20px;
color: #666;
}
#tab-close-button:hover {
color: #fff;
}
/************************
* Dropdown
************************/
/* Tab button */
#tab-dropdown {
/* Adjust this size depending on the final editor-top-bar height. */
position: fixed;
top: 7px;
right: 35px;
height: 35px;
}
#tab-dropdown-button {
font-size: 24px;
color: #666;
}
#tab-dropdown-button:hover {
color: #fff;
}
/* Dropdown */
#dropdown-list-active-files {
position: absolute;
z-index: 9999;
background-color: #2E2E2E;
border: 3px solid #666666;
display: none;
border-radius: 2px;
padding: 0 5px;
}
#dropdown-list-active-files a {
display: block;
padding: 5px 30px 5px 10px;
margin: 5px 0;
border-radius: 3px;
line-height: 150%;
font-size: 12px;
word-break: break-all;
background-color: #262626;
height: 27px;
overflow: hidden;
color: #A3A3A3;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
#dropdown-list-active-files a .file-name {
color: #FAFAFA;
}
#dropdown-list-active-files a:hover,
#dropdown-list-active-files li.active a {
background-color: #474747;
}
#dropdown-list-active-files li.changed a {
border: 3px solid #3ba628;
border-top: 0;
border-bottom: 0;
}
#dropdown-list-active-files div {
white-space: nowrap;
direction: rtl;
overflow: hidden;
}
#dropdown-list-active-files a span.label {
display: block;
float: right;
margin: 1px -23px 0 -15px;
padding: 1px 4px 2px 4px;
color: transparent;
background: none;
border-radius: 5px;
line-height: 100%;
}
/* Close button */
#dropdown-list-active-files a span.label:after {
content: 'x';
text-shadow: none;
}
#dropdown-list-active-files a:hover span.label {
background: #1a1a1a;
color: #616161;
}
#dropdown-list-active-files a:hover span.label:hover {
color: #fff;
background-color: #000;
}
/************************
* List
************************/
#list-active-files {
display: none;
width: 100%;
height: 40%;
margin: 0;
padding: 15px;
overflow: auto;
border-top: 2px solid #787878;
}
#list-active-files a {
display: block;
padding: 5px 30px 5px 10px;
margin: 5px 0;
border-radius: 3px;
line-height: 150%;
font-size: 12px;
word-break: break-all;
background-color: #262626;
height: 27px;
overflow: hidden;
}
#list-active-files a:hover, #list-active-files li.active a {
background-color: #474747;
}
#list-active-files li.changed a {
border: 3px solid #3ba628;
border-top: 0;
border-bottom: 0;
}
#list-active-files div {
white-space: nowrap;
direction: rtl;
overflow: hidden;
}
#list-active-files a span {
display: block;
float: right;
margin: 1px -23px 0 -15px;
padding: 1px 4px 2px 4px;
color: transparent;
background: none;
border-radius: 5px;
line-height: 100%;
}
#list-active-files a span:after {
content: 'x';
}
#list-active-files a:hover span {
background: #1a1a1a;
color: #616161;
}
#list-active-files a:hover span:hover {
color: #fff;
background-color: #000;
}