mx pak1 H m a i n \ i n d e x . c s s 8 b ug m a i n \ i n d e x . h t m
J m a i n \ l a y o u t . c s s 2 P m a i n \ l a y o u t . h t m m a i n \ n a v b a r \ a d d r e s s b o x . c s s o# U m a i n \ n a v b a r \ a d d r e s s b o x . h t m 8 p m a i n \ n a v b a r \ b u t t o n s . c s s H Lav m a i n \ n a v b a r \ b u t t o n s . h t m M i_ m a i n \ n a v b a r \ i n d e x . c s s X #Qt m a i n \ n a v b a r \ i n d e x . h t m Y UTE m a i n \ s i d e b a r \ i n d e x . c s s ^ @8- m a i n \ s t a t u s b a r \ i n d e x . c s s t B m a i n \ t a b b a r \ c o n t a i n e r . c s s { ! m a i n \ t a b b a r \ c o n t a i n e r . h t m B q)y m a i n \ t a b b a r \ c o n t a i n e r . m e n u . c s s s m a i n \ t a b b a r \ c o n t a i n e r . m e n u . h t m ° [ E m a i n \ t a b b a r \ i n d e x . c s s M !֓ m a i n \ t a b b a r \ i n d e x . h t m j a !cL` m a i n \ t a b b a r \ t a b . d r a g d r o p . c s s -$YY m a i n \ t a b b a r \ t a b . d r a g d r o p . h t m 9u} s k i n 3 . i n i r 4 P
t h u m b n a i l . p n g /*
Main Style Sheet
*/
/*
General elements
*/
html {
background: transparent;
}
body{
margin: 0;
padding: 0;
min-width: 400px;
min-height: 400px;
color: #000;
background: transparent;
}
body,th,td,input,button,select,textarea,plaintext,menu {
font-size: 9pt;
font-family: "Segoe UI", Tahoma, Geneva, Verdana;
}
img{
vertical-align:middle;
}
/*
Main window background
*/
body[winFrameless]{
background-color: @BODY_SOLID_BG;
border: 1px solid @BODY_SOLID_BORDER;
}
/*
Applied when the window is in maximum mode
NOTE: body's margin will be used by program, don't change it.
*/
body[winMaximized] {
padding: 0 -2 0 -2;
border: none !important;
}
.win-controls {
display: block;
}
/*
Main Window Wrapper
*/
.wrap{
flow: horizontal;
padding: 0;
height: 100%%;
overflow: hidden;
}
[winMaximized] .wrap{
padding: 0;
}
/*
tooltip popup
*/
popup[role="tooltip"] {
padding: 8 12 10 12;
color: #000;
text-wrap: unrestricted;
font-weight: normal;
line-height: 120%;
border: none;
background: transparent url(images/tooltip_bg.png) expand;
background-position: 8 8 8 8;
background-repeat: stretch-left stretch-right stretch-middle;
}
popup[role="tooltip"] label {
color: #003366;
}
popup[role="tooltip"] [mx-hotkey-label]{
color: #0066cc;
}
Missing: sidebar/index.htm
Missing: layout.htm
/*
Browser Layout
*/
.mainframe{
margin-top: 24px;
height: 100%%;
width: 100%%;
}
body:not([winFrameless]) .mainframe {
padding: 0 4 4 4;
}
body:not([winFrameless]) .mainframe[on-Sidebar] {
padding-left: 0;
}
[winMaximized] .mainframe{
/* requires "!important" to override
the margin-top set by .tabbar .spacer[height] */
margin-top: 0 !important;
padding: 0;
}
/*
Caption Area Wrapper
*/
.caption-wrapper {
}
/*
page content block
*/
.content-wrapper{
height: 100%%;
}
body:not([winFrameless]) .content-wrapper {
border: 1px solid @TOOLBAR_BORDER;
border-width: 0 1 1 1;
}
body:not([winFrameless]) [on-Sidebar] .content-wrapper {
border-left: none;
}
.toolbar-wrapper {
background: @TOOLBAR_BG;
border-bottom: 1px solid @TOOLBAR_BORDER;
}
/*
Address Box
*/
.address-box {
flow: horizontal;
width: 300px;
min-height: 10px;
vertical-align: middle;
}
/*
Input area of the Address Box
*/
/* input */
.address-box > .input {
flow: horizontal;
margin: 3px;
width: 100%%;
height: 100%%;
min-width: 100px;
vertical-align: middle;
background: @COMBO_BG;
border: 1px solid @COMBO_BORDER;
hover-on!: self.hover = "1";
hover-off!: self.hover = null;
}
.address-box > .input:hover,
.address-box > .input:active,
.address-box > .input[active] {
background: @COMBO_HOVER_BG;
border-color: @COMBO_HOVER_BORDER;
}
.address-box[siteSafety="danger"]:not([addressBoxInEditMode]) > .input {
background: @COMBO_DANGER_BG;
border-color: @COMBO_DANGER_BORDER;
}
/* text box */
.address-box > .input > .textbox{
display: none;
behavior: edit;
assigned!: $1(.address-box > .input).active = "1";
active-on! : $1(.address-box > .input).active ="1";
focus-off! : $1(.address-box > .input).active = null, $1(.address-box > .input > .textbox.url):value=" ", $1(.address-box > .input > .textbox.url)::display=block;
margin: 2 0 3 4;
padding: 0 2;
width: 100%%;
height: 100%%;
overflow-x: hidden;
cursor: text;
font-size: 125%;
color: @COMBO_TEXT;
white-space: nowrap;
vertical-align: middle;
}
.address-box > .input > .textbox:empty,
.address-box > .input > .textbox:focus,
.address-box > .input[hover] > .textbox,
.address-box > .input[active] > .textbox{
display: block;
}
.address-box > .input > .textbox:hover,
.address-box > .input > .textbox:focus{
color: @COMBO_HOVER_TEXT;
}
.address-box > .input > .textbox:focus{
assigned!: $1(.address-box > .input).active = "1";
}
.address-box > .input > .textbox:empty{
color: @COMBO_EMPTY_TEXT;
}
.address-box > .input > .textbox.url{
display: block;
behavior: none;
color: @COMBO_DIM_TEXT;
}
.address-box > .input > .textbox.url:empty,
.address-box > .input[hover] > .textbox.url,
.address-box > .input[active] > .textbox.url{
display: none;
}
.address-box > .input > .textbox.url b{
font-weight: normal;
color: @COMBO_TEXT;
}
.address-box[siteSafety="cert"] > .input > .textbox.url b{
color: @COMBO_CERT_TEXT;
}
.address-box[siteSafety="safe"] > .input > .textbox.url b,
.address-box[siteSafety="safe_cert"] > .input > .textbox.url b{
color: @COMBO_SAFE_TEXT;
}
.address-box[siteSafety="danger"] > .input > .textbox.url b{
color: @COMBO_DANGER_TEXT;
}
/* section pack */
.address-box .pack{
flow: horizontal;
width: min-intrinsic;
height: 100%%;
}
/* separator */
.address-box .separator {
margin: 2px 0px;
width: 1px;
height: 100%%;
vertical-align: middle;
background: @COMBO_SEP_BG;
}
/* buttons */
.address-box .button {
behavior: button;
width: 26px;
height: 100%%;
cursor: pointer;
color: #666;
white-space: nowrap;
vertical-align: middle;
foreground: url(../images/site_fav.png) no-repeat 50% 50%;
}
.address-box .button:hover {
background: @COMBO_BUTTON_HOVER_BG;
}
.address-box .button:active {
background: @COMBO_BUTTON_ACTIVE_BG;
}
.address-box .button:has-child-of-type(text){
padding-left: 26;
padding-right: 6;
foreground-position: 2 50%;
}
.address-box[siteSafety="danger"] .pack.left{
display: none;
}
/* fav button */
.address-box .button.fav {
behavior: popup-menu;
foreground-image: url(../images/site_fav.png);
}
.address-box .button.fav[pageFaved] {
foreground-image: url(../images/site_faved.png);
}
.address-box .button.fav:hover {
outline: 1px solid @COMBO_HOVER_BORDER;
}
.address-box[inNewTab] .button.fav,
.address-box[addressBoxInEditMode] .button.fav {
display: none;
}
/* search list button */
.address-box .button.search {
display: none;
behavior: popup-menu;
min-width: 30px;
max-width: 100px;
width: min-intrinsic;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 24;
padding-right: 14;
foreground: url(../images/search_icon.png) no-repeat 2 50%;
background: url(../images/search_dropdown.png) no-repeat 100% 50%;
}
.address-box[addressBoxQuickSearch] .button.search{
color: #0080FF;
font-weight: bold;
background-color: @COMBO_BUTTON_HOVER_BG;
}
.address-box .button.search:hover {
background-color: @COMBO_BUTTON_HOVER_BG;
outline: 1px solid @COMBO_HOVER_BORDER;
}
.address-box[addressBoxInEditMode] .button.search,
.address-box[inNewTab] .button.search{
display: block;
}
/* go button */
.address-box .pack.go .button{
foreground: url(../images/combo_go.png) no-repeat 50% 50%;
}
.address-box .pack.go{
/*display: none;*/
display: none;
}
.address-box[inNewTab] .pack.go,
.address-box[addressBoxInEditMode]:hover .pack.go,
.address-box[addressBoxInEditMode][active] .pack.go {
display: block;
}
/* drop down button */
.address-box .pack.dropdown .button{
width: 20px;
foreground: url(../images/combo_dropdown.png) no-repeat 50% 50%;
}
.address-box .pack.dropdown .button:hover {
outline: 1px solid @COMBO_HOVER_BORDER;
}
/* site safety */
.address-box .site-safety-group {
display: none;
margin-right: -4px;
}
.address-box:not([siteSafety="none"]) .site-safety-group {
display: block;
}
.address-box[inNewTab] .site-safety-group,
.address-box[addressBoxInEditMode] .site-safety-group{
display: none;
}
.address-box .site-safety {
min-width: 24px;
max-width: 200px;
width: min-intrinsic;
white-space: nowrap;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
foreground: url(../images/site_cert.png) no-repeat 50% 50%;
}
.address-box .site-safety:hover {
background: #fdf3bb;
}
.address-box .site-safety:has-child {
padding: 2 6 2 22;
foreground-position: 4 50%;
}
.address-box[siteSafety="cert"] .site-safety {
color: #804000;
foreground-image: url(../images/site_cert.png);
assigned!: self.titleid = "SITE_SAFETY_SECURE";
}
.address-box[siteSafety="safe"] .site-safety {
color: #006600;
foreground-image: url(../images/site_safe.png);
assigned!: self.titleid="SITE_SAFETY_SAFE";
}
.address-box[siteSafety="safe"] .site-safety:hover {
background: #ecf7c8;
}
.address-box[siteSafety="safe_cert"] .site-safety {
color: #006600;
foreground-image: url(../images/site_safe_cert.png);
assigned!: self.titleid="SITE_SAFETY_SECURE_AND_SAFE";
}
.address-box[siteSafety="safe_cert"] .site-safety:hover {
background: #ecf7c8;
}
.address-box[siteSafety="invalid_cert"] .site-safety {
color: #C52B00;
foreground-image: url(../images/site_cert_invalid.png);
assigned!: self.titleid="SITE_SAFETY_INSECURE";
}
.address-box[siteSafety="invalid_cert"] .site-safety:hover {
background: #ffd9b7;
}
.address-box[siteSafety="danger"] .site-safety {
margin-right: 6px;
color: #fff;
foreground-image: url(../images/site_danger.png);
background: #D84B00;
assigned!: self.titleid="SITE_SAFETY_DANGER";
}
.address-box[siteSafety="danger"] .site-safety:hover {
background: #EC7300;
}
/* icon tray */
.address-box .icon-tray {
flow: horizontal;
width: max-intrinsic;
height: 100%%;
}
.address-box[siteSafety="danger"] .icon-tray,
.address-box[addressBoxInEditMode] .icon-tray {
display: none;
}
.address-box[inNewTab] .icon-tray {
display: block;
}
.address-box .icon-tray .pack{
display: none;
}
/* reader mode button */
.address-box .icon-tray .reader-mode[readerModeAvailable]{
display: block;
}
.address-box .icon-tray .reader-mode .button{
foreground-image: url(../images/notify_icon_reader_mode.png);
}
.address-box .icon-tray .reader-mode[inReaderMode] .button{
foreground-image: url(../images/notify_icon_reader_mode_on.png);
}
/* switch engine button */
.address-box:not([inNewTab]) .icon-tray .core-switch[on-SwitchCoreIcon],
.address-box .icon-tray .core-switch[inCompatibleList] {
display: block;
}
.address-box .icon-tray .core-switch .button {
assigned!: self.titleid="ENGINE_TOOLTIP";
foreground-image: url(../images/mode_turbo.png);
}
.address-box .icon-tray .core-switch[compatibleMode]{
display: block;
}
.address-box .icon-tray .core-switch[compatibleMode] .button{
assigned!: self.titleid="ENGINE_TOOLTIP_COMP";
foreground-image: url(../images/mode_comp.png);
}
/* proxy button */
.address-box .icon-tray .proxy[on-ProxyButton],
.address-box .icon-tray .proxy[enableUserProxy]{
display: block;
}
.address-box .icon-tray .proxy .button{
assigned!: self.titleid="PROXY_TOOLTIP_ON";
}
.address-box .icon-tray .proxy:not([enableUserProxy]) .button{
foreground-image-transformation: colorize(#666);
assigned!: self.titleid="PROXY_TOOLTIP";
}
/* feed button */
.address-box .icon-tray .feed[feedDiscovered]{
display: block;
}
/* ad hunter button */
.address-box .icon-tray .adhunter[popupBlocked],
.address-box .icon-tray .adhunter[adBlocked]{
display: block;
}
.address-box .icon-tray .adhunter[on-StatusBar]{
display: none;
}
/*
Generic button class for Navigation Bar
*/
.nav-buttons {
width: min-intrinsic;
height: 100%%;
}
.nav-buttons .item{
margin: 3px 0;
padding: 3px 5px;
min-width: 10px;
min-height: 20px;
}
/*
Button image
*/
.nav-buttons .item img{
}
.nav-buttons .item:disabled img{
foreground-image-transformation: colorize(@BTN_ICON_DISABLED_COLOR);
}
/*
Items that require special treatments
*/
[on-FavoritesBar] .nav-buttons .fav-button {
display: none;
}
/*
Drop-down arrow button
@usage class="button dropdown"
*/
.nav-buttons .dropdown{
min-width: 10px !important;
}
/*
Sepcial buttons
*/
.nav-buttons > .nav-refresh {
assigned!: self.mx-click = "nav.refresh";
}
.nav-buttons > .nav-refresh img{
foreground: url(../images/nav_refresh.png) no-repeat 50% 50%;
}
.nav-buttons > .nav-refresh[pageLoading] {
assigned!: self.mx-click = "nav.stop";
}
.nav-buttons > .nav-refresh[pageLoading] img{
foreground: url(../images/nav_stop.png) no-repeat 50% 50%;
}
.nav-buttons .nav-home,
.nav-buttons .nav-restore-last,
.nav-buttons .nav-history{
display: none;
}
.nav-buttons .nav-home[on-NavHome],
.nav-buttons .nav-restore-last[on-NavRestoreLast],
.nav-buttons .nav-history[on-NavHistory]{
display: block;
}
/*
Navigation Bar Style
@author SiC
@revision 74
*/
.navbar{
flow: horizontal;
/*padding: 2px 3px;*/
padding: -2 0 -3 0;
height: 100%%;
overflow-x: hidden;
text-overflow: ellipsis;
}
Missing: navbar/buttons.htm
Missing: navbar/buttons.menu.htm
Missing: navbar/addressbox.htm
Missing: navbar/addressbox.menu.htm
Missing: navbar/addressbox.htm
Missing: navbar/addressbox.menu.htm
Missing: objects/buttons.htm
.sidebar {
display: none;
flow: horizontal;
width: 50px;
height: 100%%;
background: url(../images/sidebar_bg.png) expand;
background-position: 0 6 0 0;
}
body[winVer="6.0"]:not([winFrameless]):not([winMaximized]) .sidebar,
body[winVer="6.1"]:not([winFrameless]):not([winMaximized]) .sidebar {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
[winMaximized] .sidebar{
padding-bottom: 2px; /* evade start button */
}
.sidebar[on-Sidebar] {
display: block;
}
.sidebar .separator{
margin: 0 auto;
width: 41px;
height: 1px;
background: rgba(0,0,0,0.15);
}
/*
------------------------
icon dock
------------------------
*/
.sidebar .icon-dock{
height: 100%%;
}
.null-container,
.app-container{
width: 100%%;
height: 100%%;
overflow: hidden;
accept-drop: selector(.app-container .item);
}
.null-container{
visibility: hidden;
height: 0;
width: 0;
}
.app-container .item{
position: relative;
z-index: 20;
margin: 10 auto;
width: 38px;
height: 38px;
behavior: button;
draggable: only-move;
context-menu: selector(#MENU_SIDEBAR_APP_CONTEXT_MENU);
background: url(../images/app_bg.png) no-repeat 50% 50%;
}
[winMaximized] .app-container .item{
hit-margin: 0 0 0 2;
}
.app-container .item .icon{
z-index: 10;
margin: 3px;
height: 32px;
width: 32px;
foreground: url(../images/app_mask.png) no-repeat 50% 50%;
background: url(../images/blank.png) no-repeat 50% 50%;
}
.app-container .item:hover .icon{
background-image-transformation: contrast-brightness-gamma(0.55, 0.6, 1);
}
.app-container .item > .text,
.app-container .item > .badge{
display: none;
}
.app-container .item > .text{
position: absolute;
z-index: 50;
bottom: -4px;
right: -4px;
padding: 4 6 5 6;
color: #FFF;
font-size: 10px;
font-weight: bold;
line-height: 10px;
background: url(../images/sidebar_item_text_bg.png) expand;
background-position: 5 5 5 5;
}
.sidebar .button{
behavior: button;
height: 26px;
width: 26px;
margin: 2px auto;
foreground: url(../images/sidebar_add.png) no-repeat 50% 50%;
border: 1px solid transparent;
}
.sidebar .button:hover{
background: #ffffff33;
border-color: #ffffff66;
}
.sidebar .button:active{
background: #00000033;
}
/* "add" button */
.sidebar .add-button{
foreground-image: url(../images/sidebar_add.png);
}
/* "more" button */
.sidebar .more-button{
display: none;
height: 32px;
width: 32px;
foreground-image: url(../images/sidebar_more.png);
}
/* controls */
.sidebar .icon-dock .controls{
height: min-intrinsic;
flow: horizontal;
margin: 2px auto;
}
.sidebar .icon-dock .controls .button.config{
width: 22px;
height: 22px;
foreground: url(../images/sidebar_config.png);
}
/*
------------------------
pinned panel
------------------------
*/
.sidebar-pinned-panel{
position: relative;
display: none;
min-width: 140px;
width: 260px;
height: 100%%;
}
.sidebar-pinned-panel[on-Sidebar][SidebarPinnedMode][SidebarShowPinnedPanel]{
display: block;
}
/* that little cute arrow */
.sidebar-pinned-panel .anchor{
position: absolute;
left: -9px;
top: 80px;
width: 10px;
height: 14px;
foreground: url(../images/sidebar_pinned_panel_anchor.png) no-repeat 0 0;
}
/* title */
.sidebar-panel .title{
flow: horizontal;
background: rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.15);
}
.sidebar-panel .title .caption{
padding: 6px 8px;
width: 100%%;
height: 100%%;
color: #333;
font-weight: bold;
vertical-align: middle;
}
/* controls */
.sidebar-panel .title .controls{
flow: horizontal;
margin: 1 3 0 0;
width: min-intrinsic;
height: 100%%;
white-space: nowrap;
}
.sidebar-panel .title .controls .button{
behavior: button;
margin: 0 0 0 2;
width: 18px;
height: 18px;
vertical-align: middle;
foreground: url(../images/panel_btn_pinned.png) no-repeat 50% 50%;
border: 1p solid transparent;
}
.sidebar-panel .title .controls .button:hover{
background: #E9F4FF;
border-color: #3399FF;
}
.sidebar-panel .title .controls .button:active{
background: rgba(0,0,0,0.15);
border-color: rgba(0,0,0,0.35);
}
.sidebar-panel .title .controls .button.pin{
foreground-image: url(../images/panel_btn_pin.png);
}
.sidebar-panel .title .controls .button.popup{
display: none;
foreground-image: url(../images/panel_btn_popup.png);
}
.sidebar-panel .title .controls .button.close{
foreground-image: url(../images/panel_btn_close.png);
}
/* container */
.sidebar-panel .container{
height: 100%%;
background: #fff;
}
/*
------------------------
sidebar-splitter
------------------------
*/
.sidebar-splitter{
display: none;
behavior: splitter;
position: relative;
margin: 0 0 0 0;
width: 2px;
height: 100%%;
cursor: w-resize;
background: rgba(0,0,0,0.15);
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(0,0,0,0.3);
}
.sidebar-splitter[on-Sidebar][SidebarPinnedMode][SidebarShowPinnedPanel]{
display: block;
}
/*
------------------------
more panel
------------------------
*/
.more-panel {
width: min-intrinsic;
}
body[winFrameless] .more-panel{
padding: 8 8 14 8;
background: url(../images/sidebar_more_popup_bg.png) expand;
background-position: 8 8 8 8;
}
.more-panel .app-container{
padding: 0;
width: min-intrinsic;
height: min-intrinsic;
max-height: 274px;
flow: vertical-flow;
overflow: visible;
}
.more-panel .app-container .item{
margin: 3px;
}
/*
Status Bar Style Sheet
*/
.statusbar{
display: none;
flow: horizontal;
/*padding: 0 4 0 0;*/
padding: -2 4 -2 0;
overflow: hidden;
background: @TOOLBAR_BG;
border-top: 1px solid @TOOLBAR_BORDER;
}
[on-StatusBar] .statusbar{
display: block;
}
/* show sidebar button */
.statusbar .sidebar-button{
flow: horizontal;
width: min-intrinsic;
height: 100%%;
}
.statusbar .sidebar-button .icon{
foreground-image: url(../images/sidebar_show.png);
}
[sidebarDocked] .statusbar .sidebar-button,
.statusbar .sidebar-button[on-Sidebar]{
display: none;
}
/* addons container */
.statusbar .addons-container{
flow: horizontal;
height: 100%%;
width: max-intrinsic;
}
/* system info */
.statusbar .item[mxapp="sysinfo"] {
}
.statusbar .item[mxapp="sysinfo"] .icon:not(:first-child){
margin-left: 2;
}
.statusbar .item[mxapp="sysinfo"] .text{
margin-left: 0;
max-width: max-intrinsic;
}
.statusbar .item[mxapp="sysinfo"] .icon:only-child {
foreground-image: url(../images/sysinfo.png) !important;
}
.statusbar .item[mxapp="sysinfo"] .icon[name="sysinfo_cpu"]{
foreground-image: url(../images/sysinfo_cpu.png) !important;
}
.statusbar .item[mxapp="sysinfo"] .icon[name="sysinfo_tx"]{
foreground-image: url(../images/sysinfo_tx.png) !important;
}
.statusbar .item[mxapp="sysinfo"] .icon[name="sysinfo_rx"]{
foreground-image: url(../images/sysinfo_rx.png) !important;
}
.statusbar .item[mxapp="sysinfo"] .icon[name="sysinfo_free_ram"]{
foreground-image: url(../images/sysinfo_free_ram.png) !important;
}
.statusbar .item[mxapp="sysinfo"] .icon[name="sysinfo_free_vm"]{
foreground-image: url(../images/sysinfo_free_vm.png) !important;
}
.statusbar .item[mxapp="sysinfo"] .icon[name="sysinfo_ip"]{
foreground-image: url(../images/sysinfo_ip.png) !important;
}
.tabbar-container {
flow: horizontal;
width: 100%%;
height: 100%%;
}
[privateMode] .tabbar-container .bottom-wrapper:first-child{
width: 38px;
}
.tab-container .free-spacer{
width: 100%%;
context-menu: selector(menu#POPUP_TAB_BAR_CONTEXT_MENU);
}
.tab-container[tabFit] .free-spacer{
width: 0;
}
/*
[mx-object="tabbar.updateNotifier"],
[mx-object="tabbar.updateNotifierSxS"] {
value-changed! :
// calculate tab fit mode
obj_tabs = $1(< self.target >),
obj_tab_container = obj_tabs.parent(),
tab_count = obj_tabs.children(),
spacer_width = 0,
has_active = false,
obj_tab_container.$(.spacer) -> @(elem) (
(elem:current == true) ? (has_active=true),
spacer_width = spacer_width + elem.box-inner-width() + elem.class,
),
wrapper_width = obj_tab_container.box-inner-width(),
free_width = wrapper_width - spacer_width,
target_width = (tab_count + 1) * @TAB_MAX_WIDTH,
target_width >= free_width ?
(obj_tab_container.tabFit="fit")
# (obj_tab_container.tabFit=null),
update(obj_tab_container),
// set fixed tabbar height
obj_tabbar = $1(.tabbar),
obj_tabbar.sized=="sized" ? () # (
target_height = obj_tabbar.box-border-height(),
(has_active==false) ? (target_height = target_height + 1),
obj_tabbar::height = target_height,
obj_tabbar.sized = "sized"
)
;
}
*/
/*
Container class for tabs
*/
.tab-container {
flow: horizontal;
width: 100%%;
height: 100%%;
overflow-x: hidden;
white-space: nowrap;
}
/* Second Container */
.tab-container-sxs {
display: none;
}
[splitScreen] .tab-container-sxs {
display: block;
}
/* Splitter */
.tabbar-splitter {
behavior: mx-screen-splitter;
hover-on!: $( .page-splitter ):hover = true;
hover-off!: $( .page-splitter ):hover = false;
active-on!: $( .page-splitter ):active = true;
active-off!: $( .page-splitter ):active = false, $( .page-splitter ):hover = false;
display: none;
width: 6px;
height: 100%%;
cursor: w-resize;
background: url(../images/tabbar_splitter.png) expand;
background-position: 0 0 3 0;
background-repeat: stretch-middle;
border-bottom: 1px solid @TABBAR_BORDER;
}
.tabbar-splitter:hover {
background-image: url(../images/tabbar_splitter_hover.png);
}
.tabbar-splitter:active {
background-image: url(../images/tabbar_splitter_active.png);
}
[splitScreen] .tabbar-splitter {
display: block;
}
/* Real Container */
.tab-container-inner {
flow: horizontal;
height: 100%%;
white-space: nowrap;
}
[mx-object="tabbar.container"],
[splitScreen] [mx-object="tabbar.containerSxS"] {
overflow-x: visible;
/* width based on the content */
width: max-intrinsic;
accept-drop: selector(.tabbar .tab);
drop: insert;
}
.tab-container[tabFit] [mx-object="tabbar.container"],
.tab-container[tabFit] [mx-object="tabbar.containerSxS"]{
width: 100%%;
}
[splitScreen] [mx-object="tabbar.container"] .tab,
[splitScreen] [mx-object="tabbar.containerSxS"] .tab {
draggable: only-move;
}
[mx-object="tabbar.container"]:has-children .tab,
[mx-object="tabbar.containerSxS"]:has-children .tab {
draggable: only-move;
}
[mx-object="tabbar.container"] .tab .close,
[splitScreen] [mx-object="tabbar.containerSxS"] .tab .close {
draggable: none;
}
/*
Tab object
*/
.tab-container .tab {
context-menu: selector(menu#POPUP_TAB_CONTEXT_MENU);
flow:horizontal;
position: relative;
z-index: 9;
/* hit-margin: 2 0 0 0;
margin: 0 -1 0 0;
padding: 6 4 3 8;*/
hit-margin: 2 0 0 0;
margin: 0 -1 0 0;
padding: 2 4 1 8;
min-width: 16px;
max-width: @TAB_MAX_WIDTH;
width: @TAB_MAX_WIDTH;
height: 100%%;
color: @TAB_TEXT;
background: @TAB_BG;
border: 1px solid @TAB_BORDER;
border-right-color: transparent;
border-bottom: 1px solid @TAB_BOTTOM_BORDER;
}
.tab-container .tab:last-child{
margin-right: 0;
}
.tab-container[tabFit] .tab{
max-width: 100%;
width: 100%%;
}
.tab-container .tab:last-child,
.tab-container .tab-container-inner:drop-target .tab {
border-right-color: @TAB_BORDER;
}
.tab-container .tab:hover{
z-index: 20;
color: @TAB_HOVER_TEXT;
background: @TAB_HOVER_BG;
border-color: @TAB_HOVER_BORDER;
border-bottom-color: @TAB_HOVER_BOTTOM_BORDER;
}
/*
Active Tab object.
The program uses :current state.
.active class is only for test purpose.
*/
.tab-container .tab.active,
.tab-container .tab:current,
.tab-container .tab-container-inner:drop-target .tab:moving {
z-index: 40;
padding-right: 8;
padding-bottom: 4;
color: @TAB_ACTIVE_TEXT;
font-weight: bold;
background: @TAB_ACTIVE_BG;
border-color: @TAB_ACTIVE_BORDER;
border-bottom: none;
}
/*
Active tab in inactive tab group in split screen mode
[mode] attribute is added to mx-object="tabbar.container" by program
*/
.tab-container [mode=active] .tab:current,
.tab-container [mode=active] .tab:moving{
}
.tab-container [mode=inactive] .tab:current,
.tab-container [mode=inactive] .tab:moving{
padding-bottom: 2px;
font-weight: normal;
border-bottom: 1px solid @TAB_BOTTOM_BORDER;
}
/* fix for missing tab after drag/drop */
.tab-container .tab:drop-marker {
position: static;
visibility: visible;
background-color: transparent;
border: none;
border-bottom: 1px solid @TAB_BOTTOM_BORDER;
padding-right: 10;
}
.tab-container .tab:drop-marker > *{
visibility: hidden;
}
/* icon */
.tab-container .tab .icon{
width: 0;
height: 100%%;
margin-right: 4px;
opacity: 0.65;
foreground: url(../../icons/file_16.png) no-repeat 50% 50%;
}
.tab-container .tab .icon[style]{
width: 16px;
}
.tab-container .tab:hover .icon,
.tab-container .tab.active .icon,
.tab-container .tab:current .icon,
.tab-container .tab-container-inner:drop-target .tab:moving .icon {
opacity: 1.0;
}
/*
loading icon
@usage class="tab loading"
*/
.tab-container .loading .icon {
width: 16px;
foreground-image: url(../../icons/loading_16.png) !important;
}
/* text label */
.tab-container .tab .text{
min-width: 0px;
margin: 0 0 0 2px;
height: 100%%;
vertical-align: middle;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
/* lock icon */
.tab-container .tab .lock{
display: none;
/*width: 18px;
height: 18px;*/
width: 18px;
height: 15px;
vertical-align: middle;
opacity: 0.5;
foreground: url(../images/tab_lock.png) no-repeat 50% 100%;
}
.tab-container .tab:current .lock,
.tab-container .tab:hover .lock {
opacity: 1.0;
}
.tab-container .tab[locked] .lock{
display:block;
}
/* close button */
.tab-container .tab .close{
behavior: button;
display: none;
/*width: 18px;
height: 18px;*/
width: 18x;
height: 15px;
vertical-align: middle;
foreground: url(../images/tab_close.png) no-repeat 50% 100%;
}
.tab-container .tab .close:hover{
foreground: url(../images/tab_close_hover.png) no-repeat 50% 100%;
}
.tab-container .tab .close:active{
foreground: url(../images/tab_close_active.png) no-repeat 50% 100%;
}
.tab-container .tab.active .close,
.tab-container .tab:moving .close,
.tab-container .tab:current .close{
display: block;
margin-right: -4px;
}
.tab-container .tab[locked] .close{
display: none;
}
/*
New Tab button on the Tab Bar
*/
.tabbar .new{
behavior: button;
context-menu: selector(menu#POPUP_TAB_BAR_CONTEXT_MENU);
/*hit-margin: 2px 0 0 0;
margin: 2px 4px 3px 4px;
width: 34px;*/
hit-margin: 2px 0 0 0;
margin: 2px 4px 3px 4px;
width: 30px;
height: 100%%;
foreground: url(../images/tab_new.png) no-repeat 50% 50%;
border: 1px solid transparent;
}
.tabbar .new:hover{
background: @TAB_NEW_HOVER_BG;
border-color: @TAB_NEW_HOVER_BORDER;
}
.tabbar .new:active{
background: @TAB_NEW_ACTIVE_BG;
border-color: @TAB_NEW_ACTIVE_BORDER;
}
/*
More Tab button on the Tab Bar
*/
.tabbar .more{
display: none;
flow: horizontal;
width: max-intrinsic;
height: 100%%;
}
.tabbar .more .tab{
width: max-intrinsic;
}
.tabbar .more .tab > .text{
max-width: 50px;
}
/* dropdown button */
.tabbar .more .dropdown{
behavior: popup-menu;
context-menu: selector(#POPUP_TAB_MORE_LIST);
font-weight: bold;
/*
hover-on!:
popup-menu(self)
;
*/
}
.tabbar .more[pos="last"] .dropdown{
border-left: none;
}
.tabbar .more .dropdown .icon{
margin: 0 0 0 2px;
width: 12px;
foreground-image: url(../images/tab_more_dropdown.png);
}
#POPUP_TAB_MORE_LIST {
-hover-off!: self:popup = false;
}
[mx-object="tabbar.moreList"] li{
context-menu: selector(#POPUP_TAB_CONTEXT_MENU);
flow: horizontal;
padding: 4px;
}
[mx-object="tabbar.moreList"] li .text{
padding: 0 2px 0 0;
width: 100%%;
overflow: hidden;
text-overflow: ellipsis;
}
[mx-object="tabbar.moreList"] li .lock,
[mx-object="tabbar.moreList"] li .close{
height: 100%;
width: 16px;
foreground: url(../images/tab_close.png) no-repeat 50% 100%;
behavior: button;
}
[mx-object="tabbar.moreList"] li .close:hover{
foreground-image: url(../images/tab_close_hover.png);
}
[mx-object="tabbar.moreList"] li .close:active{
foreground-image: url(../images/tab_close_active.png);
}
[mx-object="tabbar.moreList"] li .lock{
display: none;
foreground-image: url(../images/tab_lock.png);
}
[mx-object="tabbar.moreList"] li[locked] .lock{
display: block;
}
[mx-object="tabbar.moreList"] li[locked] .close{
display: none;
}
[mx-object="tab.contextMenu"] .tab-lock li.unlock{
display: none;
}
[mx-object="tab.contextMenu"] .tab-lock[locked] li {
display: none;
}
[mx-object="tab.contextMenu"] .tab-lock[locked] li.unlock {
display: block;
}
/*
Tab Bar Style Sheet
@author SiC
@revision 74
*/
.tabbar {
flow: horizontal;
width: 100%%;
/*min-height: 28px;*/
min-height: 16px;
}
.tabbar[sized]{
overflow: hidden;
}
.tabbar .private-mode{
display: none;
position: absolute;
/* margin-top: -2px;
margin-left: 3px;
width: 32;
height: 32;*/
margin-top: -2px;
margin-left: 3px;
width: 16;
height: 16;
foreground: url(../images/private_mark.png) no-repeat 0 100%;
}
[privateMode] .tabbar .private-mode{
display: block;
}
.tabbar .bottom-wrapper {
width: min-intrinsic;
height: 100%%;
/* border-bottom: 1px solid @TABBAR_BORDER;*/
}
.tabbar .bottom-wrapper:first-child{
width: 6px;
}
.tabbar .max-spacer{
display: none;
width: 0;
}
[winMaximized] .tabbar .max-spacer{
display: block;
width: 120px;
}
Missing: navbar/buttons.htm
Missing: navbar/buttons.menu.htm
Missing: objects/buttons.htm
Missing: navbar/addressbox.htm
Missing: navbar/addressbox.menu.htm
Missing: navbar/addressbox.htm
Missing: navbar/addressbox.menu.htm
Missing: tabbar/container.htm
Missing: tabbar/container.menu.htm
body, html {
background-color: transparent;
margin: 0px;
}
#PAGE_THUMB{
min-width: 200px;
min-height: 200px;
width: 446;
height: 446;
}
.tabbar {
margin-left: 0px;
}
.tab {
width: 150px;
}
div[page="drag-out"] {
color: #000;
font-size: 12px;
font-family: "微软雅黑", "Segoe UI", Tahoma, Geneva, Verdana;
width: 420px;
height: min-intrinsic;
min-height: 150px;
background: url(../images/tab_drag_bg.png) expand;
background-position: 40px 250px 14px 14px;
background-repeat: stretch-left stretch-right stretch-middle;
}
.caption {
margin: 18px 0 0 16px;
font-weight: bold;
height: 16px;
line-height: 16px;
max-width: 210px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flow:horizontal;
}
.caption > .icon,
#FAVICON {
width: 16px;
height: 16px;
margin-right: 2px;
foreground-image:url(../../icons/file_16.png);
}
.content {
margin: 7px 14px 14px;
border: 1px solid #cdcdcb;
width: 100%%;
height: 100%%;
}
body > * {
display: none;
}
body[page="drag-up"] [page="drag-up"],
body[page="drag-out"] [page="drag-out"] {
display: block;
}
test baidu title test baidu title test baidu title
[ s k i n ]
_ d e f = 2 . 0 . 0
v e r s i o n = 2 . 0
g u i d = { 9 4 a d 1 3 3 8 - 5 9 c 2 - 4 b 2 1 - a a c 9 - d 7 e 8 f e 4 1 e 6 c 1 }
# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
[ s t y l e s ]
m a i n = *
# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
[ s t y l e - m a i n ]
n a m e = Y o y o a k o 1 b a r
b a s e S t y l e = m o d e r n
m a i n F o l d e r = m a i n
m a i n F i l e = i n d e x . h t m
t h u m b n a i l = t h u m b n a i l . p n g
n o W i n d o w C o n t r o l = 1
m a x T a b W i d t h = 2 3 2
t a b S p a c e r W i d t h = 5 4 PNG
IHDR d d pT sBIT|d pHYs ~ tEXtSoftware Adobe Fireworks CS6輲 tEXtCreation Time 10/22/10MT "IDATx1n@o#$*Kn\M$W`8sPApEfj&
K_9#!an6fl$u]7b fb fb fb fb fb fb fb fb fb fb fb fb fb fb ff㨔Rqw+RUUM|ARJva4RJJ)M&[G!cxTox(?:ȵiTp4M>ԯs^R8 @4\.N_V+-1FIzuEQd?%rC!t+A_Y5ƽU