mirror of
https://github.com/linuxserver/core.git
synced 2026-02-20 05:07:19 +08:00
537 lines
16 KiB
Plaintext
537 lines
16 KiB
Plaintext
.editor_tab {
|
|
padding : 0 0 0 0;
|
|
margin : 0 0;
|
|
position:relative;
|
|
/*background: rgb(37,37,37) url("@{image-path}/c9-noise.png");*/
|
|
}
|
|
.editor_tab.notabs:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 1px;
|
|
right: 0;
|
|
background: rgba(255,255,255,0.06);
|
|
z-index: 100000;
|
|
}
|
|
|
|
.editor_tab.empty{
|
|
border-right: 1px solid @border-highlight-dark;
|
|
border-left: 1px solid @border-highlight-dark;
|
|
margin-right: -1px;
|
|
margin-left: -1px;
|
|
}
|
|
|
|
.editor_tab .btnsesssioncontainer {
|
|
height: @pane-button-container-height;
|
|
color: #f5f5f5;
|
|
font-family : @pane-button-font-family;
|
|
font-size : @pane-button-font-size;
|
|
|
|
background: @pane-background;
|
|
box-shadow: 0 -1px 0 0 @pane-buttons-border-bottom-color inset, 0 1px 0 0 @border-highlight inset, 0 1px 0 @pane-buttons-border-bottom-highlight;
|
|
border: 1px solid @border-highlight-dark;
|
|
border-width : 1px 1px 0 1px;
|
|
position : absolute;
|
|
left : -1px;
|
|
right : -1px;
|
|
top : -1px;
|
|
z-index : 100;
|
|
clip : rect(0, 3000px, (@pane-button-container-height + 3), 0px);
|
|
|
|
transition-property: padding-right;
|
|
margin-bottom: 1px;
|
|
}
|
|
.editor_tab.notabs .btnsesssioncontainer {
|
|
display : none;
|
|
}
|
|
|
|
.editor_tab.morepadding .btnsesssioncontainer{
|
|
padding-right : 53px;
|
|
}
|
|
/*.dark.editor_tab .btnsesssioncontainer {*/
|
|
/* box-shadow: 0 -1px 0 0 black inset, 0 1px 0 0 rgba(255, 255, 255, .06) inset;*/
|
|
/*}*/
|
|
|
|
.editor_tab .btnsesssioncontainer .inside{
|
|
max-width : 100%;
|
|
padding : @pane-button-container-padding;
|
|
height : @pane-button-container-inner-height;
|
|
overflow-y: hidden;
|
|
overflow-x: hidden;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
/* Tab Button (not active) */
|
|
|
|
.session_btn {
|
|
cursor: default;
|
|
|
|
min-width : 6px;
|
|
max-width : @pane-button-max-width;
|
|
flex: 1 1 auto;
|
|
position : relative;
|
|
width : 0;
|
|
line-height : 1.2em;
|
|
|
|
padding : 0 (@pane-button-left-width + 1);
|
|
position : relative;
|
|
margin-right : @pane-button-margin-right;
|
|
margin-top : 0;
|
|
height : @pane-button-height;
|
|
overflow : hidden;
|
|
/*overflow: visible;*/
|
|
cursor : default;
|
|
}
|
|
.session_btn.destroyed{
|
|
min-width: @pane-button-destroyed-width !important;
|
|
max-width: 0px !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.session_btn .tab_middle, .session_btn .tab_shadow {
|
|
height : @pane-button-height;
|
|
box-sizing: border-box;
|
|
position : relative;
|
|
padding : 5px 0 0 0;
|
|
overflow: visible;
|
|
color : #000;
|
|
|
|
.image-2x("@{image-path}/@{c9-repeat-x}", 32px, 1500px, repeat-x);
|
|
background-position : 0 -84px;
|
|
|
|
/*display : block;*/
|
|
/*overflow : hidden;*/
|
|
text-overflow : ellipsis;
|
|
/*white-space : nowrap;*/
|
|
|
|
margin-top: 2px;
|
|
margin-left: -1px;
|
|
margin-right: -1px;
|
|
}
|
|
|
|
.session_btn .tab_shadow{
|
|
position: absolute;
|
|
margin: 0;
|
|
top: 0;
|
|
left: @pane-button-left-width;
|
|
right: @pane-button-right-width;
|
|
bottom: 0;
|
|
background-position: @pane-button-shadow-middle;
|
|
opacity: @pane-button-shadow-opacity;
|
|
}
|
|
|
|
.session_btn .tab_middle:before,
|
|
.session_btn .tab_middle:after,
|
|
.session_btn .tab_shadow:before,
|
|
.session_btn .tab_shadow:after{
|
|
background-color : inherit;
|
|
content : "";
|
|
display : block;
|
|
position : absolute;
|
|
height : @pane-button-height;
|
|
.image-2x("@{image-path}/@{c9-no-repeat}", @c9-no-repeat-width, @c9-no-repeat-height);
|
|
top : 0;
|
|
}
|
|
.session_btn .tab_middle:before,
|
|
.session_btn .tab_middle:after{
|
|
-webkit-mask : url("@{image-path}/@{c9-no-repeat-2x}") no-repeat;
|
|
-webkit-mask-size: @c9-no-repeat-width @c9-no-repeat-height;
|
|
}
|
|
.session_btn .tab_shadow:before{
|
|
left : -1 * @pane-button-left-width;
|
|
background-position : @pane-button-shadow-left;
|
|
opacity: @pane-button-shadow-opacity;
|
|
width : @pane-button-left-width;
|
|
}
|
|
.session_btn .tab_shadow:after{
|
|
right : -1 * @pane-button-right-width;
|
|
background-position : @pane-button-shadow-right;
|
|
opacity: @pane-button-shadow-opacity;
|
|
width : @pane-button-right-width;
|
|
}
|
|
|
|
.session_btn .tab_middle:before {
|
|
left : -1 * @pane-button-left-width;
|
|
background-position : @pane-button-left;
|
|
-webkit-mask-position : @pane-button-mask-left;
|
|
mask : url(#tab-mask-left);
|
|
width : @pane-button-left-width;
|
|
}
|
|
.session_btn .tab_middle:after {
|
|
right : -1 * @pane-button-right-width;
|
|
background-position : @pane-button-right;
|
|
-webkit-mask-position : @pane-button-mask-right;
|
|
mask : url(#tab-mask-right);
|
|
width : @pane-button-right-width;
|
|
}
|
|
|
|
.session_btn:not(.curbtn) .tab_middle,
|
|
.session_btn:not(.curbtn) .tab_middle:after,
|
|
.session_btn:not(.curbtn) .tab_middle:before{
|
|
background-color : @pane-button-background;
|
|
transition: background-color .15s linear;
|
|
}
|
|
.session_btn.notrans .tab_middle,
|
|
.session_btn.notrans .tab_middle:after,
|
|
.session_btn.notrans .tab_middle:before{
|
|
transition: none;
|
|
}
|
|
|
|
.session_btn.over:not(.curbtn) .tab_middle,
|
|
.session_btn.over:not(.curbtn) .tab_middle:after,
|
|
.session_btn.over:not(.curbtn) .tab_middle:before {
|
|
background-color: @pane-button-hover-background;
|
|
}
|
|
|
|
/* Tab Button (active) */
|
|
|
|
.session_btn.curbtn {
|
|
height : @pane-button-height + 3;
|
|
z-index : 10;
|
|
margin-top : -1px;
|
|
min-width : 97px;
|
|
}
|
|
body>.session_btn.curbtn{
|
|
cursor : default;
|
|
height : @pane-button-height;
|
|
}
|
|
.session_btn.curbtn .tab_middle {
|
|
height : @pane-button-height + 1;
|
|
background-position : @pane-button-middle;
|
|
color : #000;
|
|
padding-top : 5px;
|
|
margin-top : 3px;
|
|
}
|
|
.session_btn.curbtn .tab_middle:before {
|
|
height: @pane-button-height + 1;
|
|
background-position : @pane-button-left-active;
|
|
}
|
|
.session_btn.curbtn .tab_middle:after {
|
|
height: @pane-button-height + 1;
|
|
background-position : @pane-button-right-active;
|
|
}
|
|
|
|
.session_btn.curbtn .tab_shadow {
|
|
background-position : @pane-button-active-shadow-middle;
|
|
opacity : @pane-button-active-shadow-opacity;
|
|
}
|
|
.session_btn.curbtn .tab_shadow:before{
|
|
background-position : @pane-button-active-shadow-left;
|
|
opacity : @pane-button-active-shadow-opacity;
|
|
}
|
|
.session_btn.curbtn .tab_shadow:after{
|
|
background-position : @pane-button-active-shadow-right;
|
|
opacity : @pane-button-active-shadow-opacity;
|
|
}
|
|
|
|
.dark.session_btn.curbtn .tab_middle {
|
|
background-position : @pane-button-dark-middle-active;
|
|
margin-top: 2px;
|
|
}
|
|
.dark.session_btn.curbtn .tab_middle:before {
|
|
background-position : @pane-button-dark-left-active;
|
|
-webkit-mask-position : @pane-button-dark-mask-left;
|
|
}
|
|
.dark.session_btn.curbtn .tab_middle:after {
|
|
background-position : @pane-button-dark-right-active;
|
|
-webkit-mask-position : @pane-button-dark-mask-right;
|
|
}
|
|
|
|
/* Tab Title */
|
|
|
|
.session_btn .sessiontab_title {
|
|
display : block;
|
|
/*position : absolute;*/
|
|
overflow : hidden;
|
|
/*text-overflow : ellipsis;*/
|
|
white-space : nowrap;
|
|
overflow : hidden;
|
|
padding : @pane-button-title-padding;
|
|
user-select: none;
|
|
color : @pane-button-color;
|
|
text-shadow : @pane-button-textshadow;
|
|
// position: relative;
|
|
}
|
|
.session_btn.btnclose .tab_middle .sessiontab_title {
|
|
margin-right : @pane-button-title-margin-right;
|
|
margin-left : @pane-button-title-margin-left;
|
|
}
|
|
.session_btn.curbtn .sessiontab_title {
|
|
color : @pane-button-active-color;
|
|
text-shadow : none;
|
|
}
|
|
.dark.session_btn.curbtn .sessiontab_title {
|
|
color : rgba(255,255,255,0.85);
|
|
margin-top : 0;
|
|
text-shadow : 0 1px rgba(0,0,0,.4);
|
|
}
|
|
.focus.session_btn.curbtn .sessiontab_title {
|
|
height: @pane-button-title-height;
|
|
}
|
|
.focus.session_btn.curbtn .sessiontab_title when(@pane-button-use-bold-focus = true) {
|
|
font-weight: bold;
|
|
font-smoothing: true;
|
|
letter-spacing: -0.4px;
|
|
}
|
|
|
|
.focus.session_btn.curbtn .sessiontab_title:after when(@pane-button-use-bold-focus = false) {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 2px;
|
|
background-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.2) 15%, rgba(0,0,0,0.2) 30%, transparent 60%);
|
|
left: -10px;
|
|
right: -10px;
|
|
height: 1px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.focus.session_btn.curbtn.dark .sessiontab_title:after when(@pane-button-use-bold-focus = false) {
|
|
background-image: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.19) 15%, rgba(255, 255, 255, 0.19) 30%, transparent 60%);
|
|
}
|
|
|
|
|
|
/* Close Button States (idle, loading, saving, etc) */
|
|
/* This section has a delicate sequence. Be careful! */
|
|
|
|
.session_btn.preview{ font-style: italic }
|
|
|
|
.session_btn.curbtn strong { margin-top : -1px; background-position : 0 0; }
|
|
.dark.session_btn.curbtn strong { margin-top : 1px !important; background-position : 0 -14px; }
|
|
|
|
.has_apf .session_btn.changed strong,
|
|
.has_apf .session_btn.saving strong,
|
|
.has_apf .session_btn.saved strong,
|
|
.has_apf .session_btn.conflict strong,
|
|
.has_apf .session_btn.error strong {
|
|
.image-2x("@{image-path}/@{pane-button-states-image}", (4 * @pane-button-states-image-size), @pane-button-states-image-size);
|
|
background-position: 0 2px;
|
|
width : @pane-button-states-image-size;
|
|
height : 11px;
|
|
right : @pane-button-states-right;
|
|
top : @pane-button-states-top;
|
|
margin-top : 0px;
|
|
|
|
animation: none;
|
|
}
|
|
.has_apf .session_btn.changed strong { background-position : 0 0; }
|
|
.has_apf .session_btn.error strong { background-position : (-1 * @pane-button-states-image-size) 0; }
|
|
.has_apf .session_btn.saving strong { background-position : (-2 * @pane-button-states-image-size) 0; }
|
|
.has_apf .session_btn.saved strong { background-position : (-3 * @pane-button-states-image-size) 0; }
|
|
.has_apf .session_btn.conflict strong { background-position : (-2 * @pane-button-states-image-size) 0; }
|
|
|
|
.asterisk .session_btn.changed .sessiontab_title:before {content: "*";}
|
|
|
|
.has_apf .session_btn.running strong{
|
|
.image-2x(@pane-button-running-image, @pane-button-running-image-width, @pane-button-running-image-height, no-repeat);
|
|
animation: @pane-button-running-animation;
|
|
|
|
height : @pane-button-running-width;
|
|
width : @pane-button-running-height;
|
|
right : @pane-button-running-right;
|
|
top : @pane-button-running-top;
|
|
z-index : 10;
|
|
}
|
|
|
|
.has_apf .session_btn.loading strong,
|
|
.has_apf .session_btn.connecting strong{
|
|
.image-2x(@pane-button-save-image, @pane-button-save-image-width, @pane-button-save-image-height, no-repeat);
|
|
animation: @pane-button-save-animation;
|
|
|
|
height : @pane-button-save-width;
|
|
width : @pane-button-save-height;
|
|
right : @pane-button-save-right;
|
|
top : @pane-button-save-top;
|
|
z-index : 10;
|
|
}
|
|
|
|
.session_btn strong,
|
|
.has_apf .session_btn strong:hover,
|
|
.has_apf .session_btn strong:active,
|
|
.has_apf .session_btn.curbtn strong:hover,
|
|
.has_apf .session_btn.curbtn strong:active {
|
|
width : 14px;
|
|
height : 14px;
|
|
display : block;
|
|
position : absolute;
|
|
right : @pane-button-close-right;
|
|
top : @pane-button-close-top;
|
|
.image-2x(@pane-button-close-image, @pane-button-close-image-width, @pane-button-close-image-height);
|
|
background-position: 0 @pane-button-close-background;
|
|
|
|
cursor : pointer;
|
|
z-index : 10;
|
|
margin-top : @pane-button-close-hack;
|
|
|
|
animation: none;
|
|
}
|
|
|
|
.has_apf .session_btn strong:hover { background-position : -14px @pane-button-close-background; }
|
|
.has_apf .session_btn strong:active { background-position : -28px @pane-button-close-background; }
|
|
.has_apf .session_btn.curbtn strong:hover { margin-top : -1px; background-position : -14px 0; }
|
|
.has_apf .session_btn.curbtn strong:active { margin-top : -1px; background-position : -28px 0; }
|
|
.has_apf .dark.session_btn.curbtn strong:hover { margin-top : 1px; background-position : -14px -14px; }
|
|
.has_apf .dark.session_btn.curbtn strong:active { margin-top : 1px; background-position : -28px -14px; }
|
|
|
|
/* Other */
|
|
|
|
.has_apf .plus_tab_button {
|
|
display: inline-block;
|
|
margin: @pane-plus-margin;
|
|
top: 3px;
|
|
vertical-align : top;
|
|
box-sizing: border-box;
|
|
|
|
position: relative;
|
|
cursor: default;
|
|
|
|
transform: skew(23deg);
|
|
border-radius: 4px 3px 4px 2px;
|
|
border: @pane-plus-box-border;
|
|
box-shadow: @pane-plus-box-shadow;
|
|
width: @pane-plus-width;
|
|
height: @pane-plus-height;
|
|
z-index: 100000;
|
|
}
|
|
.has_apf .plus_tab_button:after {
|
|
content: "";
|
|
display : block;
|
|
width : @pane-plus-icon-width;
|
|
height : @pane-plus-icon-height;
|
|
.image-2x("@{image-path}/@{pane-plus-icon}", @pane-plus-icon-image-width, @pane-plus-icon-image-height);
|
|
transform: skew(-23deg);
|
|
margin : @pane-plus-icon-margin;
|
|
background-position: @pane-plus-icon-idle-position;
|
|
}
|
|
.plus_tab_button.c9-simple-btnOver {
|
|
border: 1px solid @pane-plus-hover-border-color;
|
|
box-shadow: @pane-plus-hover-box-shadow;
|
|
background-image: @pane-plus-hover-gradient;
|
|
}
|
|
.plus_tab_button.c9-simple-btnOver:after{
|
|
background-position: @pane-plus-icon-hover-position;
|
|
}
|
|
.plus_tab_button.c9-simple-btnDown {
|
|
border: 1px solid @pane-plus-active-border-color;
|
|
box-shadow: @pane-plus-active-box-shadow;
|
|
background-image: @pane-plus-active-gradient;
|
|
}
|
|
.plus_tab_button.c9-simple-btnDown:after {
|
|
background-position: @pane-plus-icon-active-position;
|
|
}
|
|
.has_apf .plus_tab_button.c9-simple-btnOver:after,
|
|
.has_apf .plus_tab_button.c9-simple-btnDown:after{
|
|
margin : @pane-plus-hover-margin;
|
|
}
|
|
|
|
.has_apf .tabmenubtn {
|
|
left: @pane-menu-left;
|
|
position: absolute;
|
|
top: @pane-menu-top;
|
|
width: 19px;
|
|
|
|
box-sizing: border-box;
|
|
border-radius: 3px;
|
|
height: 16px;
|
|
border: 1px solid @pane-menu-border-color;
|
|
box-shadow: @pane-menu-box-shadow;
|
|
background-image: @pane-menu-gradient;
|
|
}
|
|
.has_apf .tabmenubtn:after {
|
|
content: "";
|
|
display : block;
|
|
width : @pane-menu-icon-width;
|
|
height : @pane-menu-icon-height;
|
|
.image-2x("@{image-path}/@{pane-menu-icon}", @pane-menu-icon-image-width, @pane-menu-icon-image-height);
|
|
margin : 2px 0 0 1px;
|
|
background-position: @pane-menu-icon-position;
|
|
}
|
|
.has_apf .tabmenubtn.c9-simple-btnOver {
|
|
border: 1px solid @pane-menu-hover-border-color;
|
|
box-shadow: @pane-menu-hover-box-shadow;
|
|
background-image: @pane-menu-hover-gradient;
|
|
}
|
|
.has_apf .tabmenubtn.c9-simple-btnOver:after{
|
|
background-position: @pane-menu-icon-hover-position;
|
|
}
|
|
.has_apf .tabmenubtn.c9-simple-btnDown {
|
|
height : 17px;
|
|
}
|
|
.has_apf .tabmenubtn.c9-simple-btnDown:after {
|
|
background-position: @pane-menu-icon-active-position;
|
|
}
|
|
.tabsContextMenu{
|
|
overflow: visible !important;
|
|
margin: @pane-menu-margin !important;
|
|
}
|
|
.tabsContextMenu:before {
|
|
border: 1px solid @pane-menu-active-border-color;
|
|
border-width : 1px 1px 0 1px;
|
|
box-shadow: @pane-menu-active-box-shadow;
|
|
background-image: @pane-menu-active-gradient;
|
|
|
|
box-sizing: border-box;
|
|
border-radius: 3px 3px 0 0;
|
|
content: "";
|
|
display: block;
|
|
left: -1px;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: @pane-menu-button-top;
|
|
width: @pane-menu-button-width;
|
|
height : @pane-menu-button-height;
|
|
}
|
|
.tabsContextMenu:after {
|
|
content: "";
|
|
display : block;
|
|
width : 23px; //14px;
|
|
height : @pane-menu-button-height; //11px;
|
|
.image-2x("@{image-path}/@{pane-menu-icon}", @pane-menu-icon-image-width, @pane-menu-icon-image-height);
|
|
margin : @pane-menu-button-margin;
|
|
position : absolute;
|
|
top : @pane-menu-button-top;
|
|
background-position: @pane-menu-button-background-position;
|
|
}
|
|
.upward.tabsContextMenu:before{
|
|
border-width : 0px 1px 1px 1px;
|
|
box-shadow: @pane-menu-upward-active-box-shadow;
|
|
background-image: @pane-menu-upward-active-gradient;
|
|
border-radius: 0 0 3px 3px;
|
|
|
|
top: auto;
|
|
bottom : @pane-menu-button-up-bottom;
|
|
height : @pane-menu-button-up-height;
|
|
}
|
|
|
|
.codeditorHolder .editor_tab {
|
|
background: @pane-background;
|
|
}
|
|
|
|
.codeditorHolder>.vsplitbox, .codeditorHolder>.hsplitbox{
|
|
height: 100%;
|
|
}
|
|
|
|
/* Page */
|
|
|
|
.editor_tab .session_page {
|
|
display : none;
|
|
position : absolute;
|
|
top : @pane-button-container-height;
|
|
bottom : 0;
|
|
left : 0;
|
|
right : 0;
|
|
z-index : 10;
|
|
margin: 0 auto;
|
|
padding-top:7px;
|
|
overflow : hidden;
|
|
// background : #252525;
|
|
}
|
|
.editor_tab.notabs .session_page{
|
|
top : 0;
|
|
}
|
|
.editor_tab .session_page.curpage{
|
|
display : block;
|
|
}
|