mirror of
https://github.com/coderaiser/cloudcmd.git
synced 2026-01-23 02:35:49 +00:00
361 lines
No EOL
8.1 KiB
CSS
361 lines
No EOL
8.1 KiB
CSS
/*
|
||
@import url(//fonts.googleapis.com/css?family=Droid+Sans+Mono);
|
||
*/
|
||
|
||
/* символьный шрифт от гитхаба*/
|
||
@font-face {
|
||
font-family: "GeneralFoundicons";
|
||
src: url('/font/general_foundicons.woff') format('woff');
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
}
|
||
|
||
/* http://fontello.com/ */
|
||
@font-face {
|
||
font-family: 'Fontello';
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
src: url('/font/fontello.woff') format('woff');
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Octicons Regular';
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
src: local('Octicons Regular'), url('/font/Octicons.woff') format('woff');
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Droid Sans Mono';
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
src: local('Droid Sans Mono'), local('DroidSansMono'), url('http://themes.googleusercontent.com/static/fonts/droidsansmono/v4/ns-m2xQYezAtqh7ai59hJUYuTAAIFFn5GTWtryCmBQ4.woff') format('woff');
|
||
}
|
||
|
||
body{
|
||
font:16px "Droid Sans Mono";
|
||
background-color:white;
|
||
}
|
||
|
||
.menu{
|
||
margin-bottom: 0;
|
||
font: 16px 'Octicons Regular';
|
||
}
|
||
|
||
.path-icon{
|
||
position: relative;
|
||
top: 3px;
|
||
left: -4px;
|
||
display: inline-block;
|
||
/* размер иконки и позиция на png-файле*/
|
||
width: 15px;
|
||
height: 15px;
|
||
font-family:'FoundationIconsGeneralEnclosed';
|
||
font-size:30px;
|
||
color: #46A4C3;/*#55BF3F; green*/
|
||
text-shadow:black 0 2px 1px;
|
||
}
|
||
.path-icon:hover{
|
||
cursor:pointer;
|
||
}
|
||
.path-icon:active{
|
||
position: relative;
|
||
top: 4px;
|
||
text-shadow:black 0 0 1px;
|
||
}
|
||
.icon{
|
||
display:inline-block;
|
||
width:16px;
|
||
height:16px;
|
||
margin-left:0.5%;
|
||
/* font-family: 'GeneralFoundicons'; */
|
||
font-family: 'Fontello';
|
||
}
|
||
.error::before{
|
||
position: relative;
|
||
color:rgb(222, 41, 41);
|
||
cursor:default;
|
||
/* content:'\f013'; */
|
||
content: '\2757';
|
||
font-size:14px;
|
||
}
|
||
.loading{
|
||
position:relative;
|
||
top:1px;
|
||
background:url(/img/spinner.gif);
|
||
}
|
||
.error:hover{
|
||
color:rgb(222, 41, 41);
|
||
color:rgba(222, 41, 41, 0.81);
|
||
}
|
||
.refresh-icon{
|
||
background:url(/img/panel_refresh.png) no-repeat;
|
||
}
|
||
.refresh-icon:active{
|
||
/*background-position-y: -15px;*/
|
||
background:url(/img/panel_refresh.png) 0 -15px no-repeat;
|
||
}
|
||
|
||
.cmd-button{
|
||
width: 10%;
|
||
margin: 20px 2px 0 2px;
|
||
overflow: hidden;
|
||
color: rgb(49,123,249);
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
background-color: white;
|
||
border: 1.5px solid rgba(49,123,249,.40);
|
||
}
|
||
|
||
.cmd-button:hover{
|
||
border: 1.5px solid rgb(0,0,0);
|
||
}
|
||
|
||
.cmd-button:active{
|
||
color: white;
|
||
background-color: rgb(49,123,249);
|
||
}
|
||
|
||
.clear-cache{
|
||
margin-right: 6px;
|
||
margin-left: 7px;
|
||
background:url(/img/console_clear.png) -4px -4px no-repeat;
|
||
}
|
||
.clear-cache:active{
|
||
top:5px;
|
||
}
|
||
|
||
.links{
|
||
color:red;
|
||
}
|
||
|
||
.mini-icon {
|
||
position: relative;
|
||
top: 2px;
|
||
left: -5px;
|
||
float: left;
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-left: 6px;
|
||
/* отступ перед картинкой
|
||
* для нормального отображения
|
||
* рамки
|
||
*/
|
||
}
|
||
/* уменьшаем отступ
|
||
* между между иконкой и
|
||
* именем файла во время
|
||
* установления курсора
|
||
*/
|
||
.current-file > .mini-icon{
|
||
left: -6px;
|
||
}
|
||
/* freeupex */
|
||
.directory{
|
||
/*list-style-image*/
|
||
background-image:url('/img/dir.png');
|
||
background-position: 0 0;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.text-file{
|
||
/*list-style-image*/
|
||
background-image:url('/img/txt.png');
|
||
background-position: 0 0;
|
||
background-repeat: no-repeat;
|
||
}
|
||
#fm{
|
||
height: 90%;
|
||
margin: 26px 26px 0 26px;
|
||
}
|
||
.fm-header{
|
||
font-weight: bold;
|
||
}
|
||
#path{
|
||
margin-left:1.5%;
|
||
}
|
||
.left, #left{
|
||
float:left;
|
||
}
|
||
/* фон файла, на котором курсор*/
|
||
.current-file{
|
||
border: 1.5px solid rgba(49, 123, 249, .40);
|
||
}
|
||
.selected-file{
|
||
color:white;
|
||
background-color: rgb(49, 123, 249);
|
||
background-color: rgba(49, 123, 249, .40);
|
||
}
|
||
|
||
.right, #right{
|
||
float:right;
|
||
}
|
||
.panel{
|
||
width: 46%;
|
||
overflow-y: auto;
|
||
border: 1.5px solid rgba(49, 123, 249, .40);
|
||
}
|
||
#keyspanel{
|
||
text-align: center;
|
||
}
|
||
/* информация о файлах и папках*/
|
||
.name{
|
||
float: left;
|
||
width: 37%;
|
||
/* если длина имени файла больше 16 символов
|
||
* отрезаем лишнее, оставляя лишь 16,
|
||
* и добавляем две точки и тайтл
|
||
*/
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.size{
|
||
float:left;
|
||
width:16%;
|
||
/* Ставим отступ, что бы
|
||
* size не налазил на uid
|
||
* (owner)
|
||
*/
|
||
margin-right: 27px;
|
||
/* Ставим выравнивание,
|
||
* что бы размер был в
|
||
* одной ровной колонке
|
||
*/
|
||
text-align: right;
|
||
}
|
||
.mode{
|
||
float: right;
|
||
width: 25%;
|
||
}
|
||
|
||
/* changin ul to panel for high speed parsing*/
|
||
.panel, li{
|
||
list-style-type:none;
|
||
/* making cursor just arrow,
|
||
* not text editing cursor
|
||
*/
|
||
cursor:default;
|
||
}
|
||
button{
|
||
width:10%;
|
||
}
|
||
a{
|
||
text-decoration:none;
|
||
}
|
||
a:hover, a:active {
|
||
color: #06e;
|
||
cursor:pointer;
|
||
}
|
||
|
||
/* Если размер окна очень маленький
|
||
* располагаем имя и атрибуты файла
|
||
* друг-под-другом
|
||
*/
|
||
/* responsive design */
|
||
@media only screen and (max-width: 600px){
|
||
.panel{
|
||
width:94% !important;
|
||
}
|
||
/* если правая панель не помещаеться - прячем её */
|
||
#right{
|
||
display:none;
|
||
}
|
||
/* текущий файл под курсором */
|
||
.current-file{
|
||
background-color: rgb(49, 123, 249);
|
||
background-color: rgba(49, 123, 249, .40);
|
||
color:white;
|
||
}
|
||
/* делаем иконки под курсом белыми*/
|
||
.current-file > .mini-icon{
|
||
color:white;
|
||
}
|
||
.current-file > .text-file::before{
|
||
color:white;
|
||
}
|
||
|
||
/* меняем иконки на шрифтовые*/
|
||
.mini-icon {
|
||
font: 60px 'Octicons Regular';
|
||
width: 40%;
|
||
height: 0;
|
||
margin-left: 0;
|
||
float: right;
|
||
position: relative;
|
||
top: -17px;
|
||
|
||
color: rgb(246, 224, 124);
|
||
color: rgba(246, 224, 124, 0.56);
|
||
}
|
||
.directory::before{
|
||
content: '\f216';
|
||
}
|
||
.text-file::before{
|
||
color: rgb(26, 224, 124);
|
||
color: rgba(26, 224, 124, 0.56);
|
||
content: '\f211';
|
||
}
|
||
.text-file{
|
||
background-image:none;
|
||
}
|
||
|
||
/* убираем заголовок*/
|
||
.fm_header{
|
||
display:none;
|
||
}
|
||
.mode,.size,.owner{
|
||
/* располагаем элементы
|
||
* один под другим
|
||
*/
|
||
display: table;
|
||
float: none;
|
||
width: 0;
|
||
|
||
text-align: left;
|
||
}
|
||
/* выводим заголовки рядом с полями */
|
||
.name::before{
|
||
content: 'name:';
|
||
font-weight: bold;
|
||
font-size: 13px;
|
||
}
|
||
.mode::before{
|
||
content: 'mode:';
|
||
font-weight: bold;
|
||
font-size: 13px;
|
||
}
|
||
.size::before{
|
||
content: 'size:';
|
||
font-weight: bold;
|
||
font-size: 13px;
|
||
}
|
||
.owner::before{
|
||
content: 'owner:';
|
||
font-weight: bold;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.name{
|
||
float: none;
|
||
width:100%;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
@media only screen and (min-width: 601px) and (max-width: 785px){
|
||
.panel{
|
||
width:94% !important;
|
||
}
|
||
#right{
|
||
display:none;
|
||
}
|
||
}
|
||
|
||
@media only screen and (min-width:786px) and (max-width: 1155px){
|
||
.panel{
|
||
width:94% !important;
|
||
}
|
||
/* если правая панель не помещаеться - прячем её */
|
||
#right{
|
||
display:none;
|
||
}
|
||
} |