/* SCROLLBARS */ .group::-webkit-scrollbar, #pin_list::-webkit-scrollbar { height: var(--scrollbar_height); width: var(--scrollbar_width); } .group::-webkit-scrollbar-thumb, #pin_list::-webkit-scrollbar-thumb { background-color: var(--scrollbar_thumb); } .group::-webkit-scrollbar-thumb:hover, #pin_list::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar_thumb_hover); } .group::-webkit-scrollbar-track, #pin_list::-webkit-scrollbar-track { background-color: var(--scrollbar_track); } div { background-repeat: no-repeat; -webkit-mask-repeat:no-repeat; mask-repeat: no-repeat; } .sidebar_body { background-color: var(--tab_list_background); } /* MAIN TOOLBAR */ #toolbar { position: absolute; top: 0px; left: 0px; width: 100%; background-color: var(--toolbar_background); border-bottom: 1px solid var(--toolbar_border_bottom); } #toolbar_main { position: relative; width: 100%; height: 26px; top: 0px; border-bottom: 1px solid var(--toolbar_border_bottom); background-color: var(--toolbar_background); } .toolbar_shelf { position: relative; width: 100%; height: 26px; border-bottom: 1px solid var(--toolbar_border_bottom); background-color: var(--toolbar_background); overflow: hidden; } .button.disabled { opacity: 0.2; } .button { position: relative; display: inline-block; vertical-align: top; width: var(--button_size); height: var(--button_size); top: 1px; left: 1px; margin-right: 1px; } .button:not(.on) { background-color: var(--button_background); border: 1px solid var(--button_border); } .button:hover:not(.on) { background-color: var(--button_hover_background); border: 1px solid var(--button_hover_border); } .button:hover:not(.on)>.button_img { background-color: var(--button_icons_hover); } .button.on { width: var(--button_size); height: 26px; background-color: var(--toolbar_background); border: 1px solid var(--toolbar_border_bottom); } .button_img { width: var(--button_size); height: var(--button_size); background-size: var(--button_size) var(--button_size); background-position: 0px 0px; background-color: var(--button_icons); } /* MAIN TOOLBAR BUTTONS */ #button_bookmarks>.button_img { -webkit-mask-image: url(../theme/toolbar_bookmarks.svg); mask-image: url(../theme/toolbar_bookmarks.svg); } #button_options>.button_img { -webkit-mask-image: url(../theme/toolbar_options.svg); mask-image: url(../theme/toolbar_options.svg); } #button_settings>.button_img { -webkit-mask-image: url(../theme/toolbar_settings.svg); mask-image: url(../theme/toolbar_settings.svg); } #button_move .button_img { -webkit-mask-image: url(../theme/toolbar_move.svg); mask-image: url(../theme/toolbar_move.svg); } #button_pin>.button_img { -webkit-mask-image: url(../theme/toolbar_pin.svg); mask-image: url(../theme/toolbar_pin.svg); } #button_history>.button_img { -webkit-mask-image: url(../theme/toolbar_history.svg); mask-image: url(../theme/toolbar_history.svg); } #button_undo>.button_img { -webkit-mask-image: url(../theme/toolbar_undo.svg); mask-image: url(../theme/toolbar_undo.svg); } #button_downloads>.button_img { -webkit-mask-image: url(../theme/toolbar_downloads.svg); mask-image: url(../theme/toolbar_downloads.svg); } #button_extensions>.button_img { -webkit-mask-image: url(../theme/toolbar_extensions.svg); mask-image: url(../theme/toolbar_extensions.svg); } #button_discard>.button_img { -webkit-mask-image: url(../theme/toolbar_discard.svg); mask-image: url(../theme/toolbar_discard.svg); } #button_new>.button_img { -webkit-mask-image: url(../theme/toolbar_plus_big.svg); mask-image: url(../theme/toolbar_plus_big.svg); } #button_tools>.button_img { -webkit-mask-image: url(../theme/toolbar_wrench.svg); mask-image: url(../theme/toolbar_wrench.svg); } #button_search>.button_img { -webkit-mask-image: url(../theme/toolbar_search.svg); mask-image: url(../theme/toolbar_search.svg); } #button_groups>.button_img { -webkit-mask-image: url(../theme/toolbar_groups.svg); mask-image: url(../theme/toolbar_groups.svg); } #button_groups_toolbar_hide>.button_img { -webkit-mask-image: url(../theme/toolbar_groups_hide.svg); mask-image: url(../theme/toolbar_groups_hide.svg); } #button_new_group>.button_img { -webkit-mask-image: url(../theme/toolbar_plus_small.svg); mask-image: url(../theme/toolbar_plus_small.svg); } #button_edit_group>.button_img { -webkit-mask-image: url(../theme/toolbar_edit.svg); mask-image: url(../theme/toolbar_edit.svg); } #button_remove_group>.button_img { -webkit-mask-image: url(../theme/toolbar_trashcan.svg); mask-image: url(../theme/toolbar_trashcan.svg); } #button_import_group>.button_img { -webkit-mask-image: url(../theme/toolbar_import.svg); mask-image: url(../theme/toolbar_import.svg); } #button_load_bak1>.button_img { -webkit-mask-image: url(../theme/toolbar_load_bak1.svg); mask-image: url(../theme/toolbar_load_bak1.svg); } #button_load_bak2>.button_img { -webkit-mask-image: url(../theme/toolbar_load_bak2.svg); mask-image: url(../theme/toolbar_load_bak2.svg); } #button_load_bak3>.button_img { -webkit-mask-image: url(../theme/toolbar_load_bak3.svg); mask-image: url(../theme/toolbar_load_bak3.svg); } #button_backup>.button_img { -webkit-mask-image: url(../theme/toolbar_save.svg); mask-image: url(../theme/toolbar_save.svg); } #button_export_bak>.button_img { -webkit-mask-image: url(../theme/toolbar_save.svg); mask-image: url(../theme/toolbar_save.svg); } #button_import_merge_bak>.button_img { -webkit-mask-image: url(../theme/toolbar_merge.svg); mask-image: url(../theme/toolbar_merge.svg); } #button_import_bak>.button_img { -webkit-mask-image: url(../theme/toolbar_import.svg); mask-image: url(../theme/toolbar_import.svg); } #button_export_group>.button_img { -webkit-mask-image: url(../theme/toolbar_save.svg); mask-image: url(../theme/toolbar_save.svg); } #button_folders>.button_img { -webkit-mask-image: url(../theme/toolbar_folder.svg); mask-image: url(../theme/toolbar_folder.svg); } #button_new_folder>.button_img { -webkit-mask-image: url(../theme/toolbar_plus_small.svg); mask-image: url(../theme/toolbar_plus_small.svg); } #button_edit_folder>.button_img { -webkit-mask-image: url(../theme/toolbar_edit.svg); mask-image: url(../theme/toolbar_edit.svg); } #button_remove_folder>.button_img { -webkit-mask-image: url(../theme/toolbar_trashcan.svg); mask-image: url(../theme/toolbar_trashcan.svg); } /* MAIN TOOLBAR SEARCHBOX */ #button_filter_type.url>.button_img { -webkit-mask-image: url(../theme/toolbar_filter_url.svg); mask-image: url(../theme/toolbar_filter_url.svg); } #button_filter_type.title>.button_img { -webkit-mask-image: url(../theme/toolbar_filter_title.svg); mask-image: url(../theme/toolbar_filter_title.svg); } #filter_search_go_prev, #filter_search_go_next { width: 16px; } #filter_search_go_prev>.button_img { -webkit-mask-image: url(../theme/toolbar_filter_search_go_prev.svg); mask-image: url(../theme/toolbar_filter_search_go_prev.svg); width: 16px; background-size: 16px 22px; } #filter_search_go_next>.button_img { -webkit-mask-image: url(../theme/toolbar_filter_search_go_next.svg); mask-image: url(../theme/toolbar_filter_search_go_next.svg); width: 16px; background-size: 16px 22px; } #toolbar_search_input_box { position: relative; display: inline-block; vertical-align: top; top: 0px; left: 2px; height: 25px; width: calc(100% - 67px); overflow: hidden; } #filter_box { position: relative; display: inline-block; vertical-align: top; top: 2px; padding-left: 6px; width: calc(100% - 10px); height: 18px; background-color: var(--filter_box_background); border: solid 1px var(--filter_box_border); color: var(--filter_box_font); } #filter_box:focus { outline: none; } #button_filter_clear { display: inline-block; vertical-align: top; -webkit-mask-image: url(../theme/toolbar_filter_clear.svg); mask-image: url(../theme/toolbar_filter_clear.svg); top: 5.5px; right: 4px; width: 16px; height: 16px; background-color: var(--filter_clear_icon); } #toolbar_search_buttons { position: relative; display: inline-block; vertical-align: top; left: 2px; height: 24px; width: 30px; } /* LISTS */ #pin_list { position: absolute; display: block; width: calc(100% - 1px); height: auto; left: 0px; overflow-x: auto; overflow-y: hidden; padding-right: 2px; padding-bottom: 1px; background-color: var(--pin_list_background); border-bottom: 1px solid var(--pin_list_border_bottom); } #groups { position: absolute; display: inline-block; width: 100%; } .group { position: absolute; height: 100%; width: calc(100% - 1px); display: inline-block; overflow-x: hidden; overflow-y: auto; background-color: var(--tab_list_background); } /* GROUPS (SHELF LIKE BUTTONS) TOOLBAR */ #toolbar_groups { position: relative; display: none; vertical-align: top; top: 0px; left: 0px; /* width and border are set in RestoreStateOfGroupsToolbar() */ width: 0px; height: 100%; background-color: var(--group_list_background); border-right: none; overflow: visible; } #group_list { position: relative; display: block; vertical-align: top; left: 0px; top: 4px; width: 50px; height: calc(100% - 8px); overflow-x: visible; overflow-y: scroll; } .group_title { padding-right: 5px; padding-left: 6px; display: inline-block; position: absolute; transform: rotateZ(-90deg) translateX(-100%) translateY(1.5px); transform-origin: top left; font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, Sans-serif; font-size: 11px; font-weight: bold; color: var(--group_list_default_font_color); background: transparent; } .group_button { position: relative; margin-left: 1px; width: 16px; height: 300px; border: 1px solid transparent; background-color: transparent; } .group_drag_box { position: absolute; width: 100%; height: 100%; left: -1px; top: -1px; background-color: transparent; } .group_drag_box.highlighted_drop_target { border: 1px solid var(--drag_indicator); } .group_button:hover:not(.active_group) { background-color: var(--group_list_button_hover_background); } .group_button.active_group { width: 20px; border: 1px solid var(--group_list_borders); background-color: var(--tab_list_background); } /* GROUP AND FOLDER EDIT DIALOG */ .edit_dialog { z-index: 1000; position: absolute; overflow: hidden; width: calc(100% - 28px); height: 53px; background-color: var(--tabs_menu_background); display: none; word-wrap: normal; white-space: initial; font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, Sans-serif; font-size: 12px; border: 1px solid var(--tabs_menu_border); padding: 0px 0px 0px 0px; color: var(--tabs_menu_font); } .edit_dialog_confirm, .edit_dialog_discard { position: absolute; } .edit_dialog_confirm, .edit_dialog_discard { line-height: 17px; font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, Sans-serif; font-size: 11px; text-overflow: ellipsis; background: transparent; text-align: center; vertical-align: middle; overflow: hidden; display: inline-block; top: 30px; width: calc(50% - 8px); height: 17px; border: 1px solid var(--tabs_menu_border); color: var(--tabs_menu_font); } .edit_dialog_confirm { left: 5px; } .edit_dialog_discard { left: calc(50% + 1px); } .edit_dialog_confirm:hover, .edit_dialog_discard:hover { border: 1px solid var(--tabs_menu_hover_border); background-color: var(--tabs_menu_hover_background); } .edit_dialog_edit_name { position: absolute; display: inline-block; vertical-align: top; top: 4px; left: 5px; width: calc(100% - 38px); height: 19px; background-color: var(--filter_box_background); border: solid 1px var(--filter_box_border); color: var(--filter_box_font); } .edit_dialog_edit_name:focus { outline: none; } #folder_edit_name { width: calc(100% - 14px); } #group_edit_font { position: absolute; display: inline-block; top: 5px; right: 5px; width: 19px; height: 19px; border: 1px solid var(--tabs_menu_border); background-color: #000000; color: var(--tabs_menu_font); } #group_edit_font:hover { opacity: 0.8; } /* PINS AND TABS COLORS, WATCH OUT AND DON'T MESS WITH IT */ /* normal */ .tab_header{ border-radius:var(--tab_header_border_radius); border:1px solid var(--tab_border); background-color:var(--tab_background); } .tab>.tab_header>.tab_title{ color:var(--tab_title_font_color); font-style:var(--tab_title_font_style); font-weight:var(--tab_title_font_weight); } /* normal hover */ .tab_header_hover{ border-radius:var(--tab_header_border_radius); border:1px solid var(--tab_hover_border); background-color:var(--tab_hover_background); } .tab>.tab_header_hover>.tab_title{ color:var(--tab_hover_title_font_color); font-style:var(--tab_hover_title_font_style); font-weight:var(--tab_hover_title_font_weight); } /* normal selected */ .selected_tab>.tab_header{ border:1px solid var(--tab_selected_border); background-color:var(--tab_selected_background); } .tab.selected_tab>.tab_header>.tab_title{ color:var(--tab_selected_title_font_color); font-style:var(--tab_selected_title_font_style); font-weight:var(--tab_selected_title_font_weight); } /* normal selected hover */ .selected_tab>.tab_header_hover{ border:1px solid var(--tab_selected_hover_border); background-color:var(--tab_selected_hover_background); } .tab.selected_tab>.tab_header_hover>.tab_title{ color:var(--tab_selected_hover_title_font_color); font-style:var(--tab_selected_hover_title_font_style); font-weight:var(--tab_selected_hover_title_font_weight); } /* normal active */ .active_tab>.tab_header{ border:1px solid var(--tab_active_border); background-color:var(--tab_active_background); } .tab.active_tab>.tab_header>.tab_title{ color:var(--tab_active_title_font_color); font-style:var(--tab_active_title_font_style); font-weight:var(--tab_active_title_font_weight); } /* normal active hover */ .active_tab>.tab_header_hover{ border:1px solid var(--tab_active_hover_border); background-color:var(--tab_active_hover_background); } .tab.active_tab>.tab_header_hover>.tab_title{ color:var(--tab_active_hover_title_font_color); font-style:var(--tab_active_hover_title_font_style); font-weight:var(--tab_active_hover_title_font_weight); } /* normal selected active */ .selected_tab.active_tab>.tab_header{ border:1px solid var(--tab_active_selected_border); background-color:var(--tab_active_selected_background); } .tab.selected_tab.active_tab>.tab_header>.tab_title{ color:var(--tab_active_selected_title_font_color); font-style:var(--tab_active_selected_title_font_style); font-weight:var(--tab_active_selected_title_font_weight); } /* normal selected active hover */ .selected_tab.active_tab>.tab_header_hover{ border:1px solid var(--tab_selected_active_hover_border); background-color:var(--tab_selected_active_hover_background); } .tab.selected_tab.active_tab>.tab_header_hover>.tab_title{ color:var(--tab_selected_active_hover_title_font_color); font-style:var(--tab_selected_active_hover_title_font_style); font-weight:var(--tab_selected_active_hover_title_font_weight); } /* unloaded */ .discarded>.tab_header{ border:1px solid var(--tab_discarded_border); background-color:var(--tab_discarded_background); } .tab.discarded>.tab_header>.tab_title{ color:var(--tab_discarded_title_font_color); font-style:var(--tab_discarded_title_font_style); font-weight:var(--tab_discarded_title_font_weight); } /* unloaded hover */ .discarded>.tab_header_hover{ border:1px solid var(--tab_discarded_hover_border); background-color:var(--tab_discarded_hover_background); } .tab.discarded>.tab_header_hover>.tab_title{ color:var(--tab_discarded_hover_title_font_color); font-style:var(--tab_discarded_hover_title_font_style); font-weight:var(--tab_discarded_hover_title_font_weight); } /* unloaded selected */ .selected_tab.discarded>.tab_header{ border:1px solid var(--tab_selected_discarded_border); background-color:var(--tab_selected_discarded_background); } .tab.selected_tab.discarded>.tab_header>.tab_title{ color:var(--tab_selected_discarded_title_font_color); font-style:var(--tab_selected_discarded_title_font_style); font-weight:var(--tab_selected_discarded_title_font_weight); } /* unloaded selected hover */ .selected_tab.discarded>.tab_header_hover{ border:1px solid var(--tab_selected_discarded_hover_border); background-color:var(--tab_selected_discarded_hover_background); } .tab.selected_tab.discarded>.tab_header_hover>.tab_title{ color:var(--tab_selected_discarded_hover_title_font_color); font-style:var(--tab_selected_discarded_hover_title_font_style); font-weight:var(--tab_selected_discarded_hover_title_font_weight); } /* search result */ .filtered>.tab_header{ border:1px solid var(--tab_filtered_border); background-color:var(--tab_filtered_background); } .tab.filtered>.tab_header>.tab_title{ color:var(--tab_filtered_title_font_color); font-style:var(--tab_filtered_title_font_style); font-weight:var(--tab_filtered_title_font_weight); } /* search result hover */ .filtered>.tab_header_hover{ border:1px solid var(--tab_filtered_hover_border); background-color:var(--tab_filtered_hover_background); } .tab.filtered>.tab_header_hover>.tab_title{ color:var(--tab_filtered_hover_title_font_color); font-style:var(--tab_filtered_hover_title_font_style); font-weight:var(--tab_filtered_hover_title_font_weight); } /* search result active */ .filtered.active_tab>.tab_header{ border:1px solid var(--tab_filtered_active_border); background-color:var(--tab_filtered_active_background); } .tab.filtered.active_tab>.tab_header>.tab_title{ color:var(--tab_filtered_active_title_font_color); font-style:var(--tab_filtered_active_title_font_style); font-weight:var(--tab_filtered_active_title_font_weight); } /* search result active hover */ .filtered.active_tab>.tab_header_hover{ border:1px solid var(--tab_filtered_active_hover_border); background-color:var(--tab_filtered_active_hover_background); } .tab.filtered.active_tab>.tab_header_hover>.tab_title{ color:var(--tab_filtered_active_hover_title_font_color); font-style:var(--tab_filtered_active_hover_title_font_style); font-weight:var(--tab_filtered_active_hover_title_font_weight); } /* search result selected */ .selected_tab.filtered>.tab_header{ border:1px solid var(--tab_filtered_selected_border); background-color:var(--tab_filtered_selected_background); } .tab.selected_tab.filtered>.tab_header>.tab_title{ color:var(--tab_filtered_selected_title_font_color); font-style:var(--tab_filtered_selected_title_font_style); font-weight:var(--tab_filtered_selected_title_font_weight); } /* search result selected hover */ .selected_tab.filtered>.tab_header_hover{ border:1px solid var(--tab_filtered_selected_hover_border); background-color:var(--tab_filtered_selected_hover_background); } .tab.selected_tab.filtered>.tab_header_hover>.tab_title{ color:var(--tab_filtered_selected_hover_title_font_color); font-style:var(--tab_filtered_selected_hover_title_font_style); font-weight:var(--tab_filtered_selected_hover_title_font_weight); } /* search result active selected */ .selected_tab.filtered.active_tab>.tab_header{ border:1px solid var(--tab_filtered_selected_active_border); background-color:var(--tab_filtered_selected_active_background); } .tab.selected_tab.filtered.active_tab>.tab_header>.tab_title{ color:var(--tab_filtered_selected_active_title_font_color); font-style:var(--tab_filtered_selected_active_title_font_style); font-weight:var(--tab_filtered_selected_active_title_font_weight); } /* search result active selected hover */ .selected_tab.filtered.active_tab>.tab_header_hover{ border:1px solid var(--tab_filtered_selected_active_hover_border); background-color:var(--tab_filtered_selected_active_hover_background); } .tab.filtered.selected_tab.active_tab>.tab_header_hover>.tab_title{ color:var(--tab_filtered_selected_active_hover_title_font_color); font-style:var(--tab_filtered_selected_active_hover_title_font_style); font-weight:var(--tab_filtered_selected_active_hover_title_font_weight); } /* search result highlighted */ .filtered.highlighted_search>.tab_header{ border:1px solid var(--tab_filtered_highlighted_search_border); background-color:var(--tab_filtered_highlighted_search_background); } .tab.filtered.highlighted_search>.tab_header>.tab_title{ color:var(--tab_filtered_highlighted_search_title_font_color); font-style:var(--tab_filtered_highlighted_search_title_font_style); font-weight:var(--tab_filtered_highlighted_search_title_font_weight); } /* search result highlighted hover */ .filtered.highlighted_search>.tab_header_hover{ border:1px solid var(--tab_filtered_highlighted_search_hover_border); background-color:var(--tab_filtered_highlighted_search_hover_background); } .tab.filtered.highlighted_search>.tab_header_hover>.tab_title{ color:var(--tab_filtered_highlighted_search_hover_title_font_color); font-style:var(--tab_filtered_highlighted_search_hover_title_font_style); font-weight:var(--tab_filtered_highlighted_search_hover_title_font_weight); } /* search result active highlighted */ .active_tab.filtered.highlighted_search>.tab_header{ border:1px solid var(--tab_filtered_active_highlighted_search_border); background-color:var(--tab_filtered_active_highlighted_search_background); } .tab.active_tab.filtered.highlighted_search>.tab_header>.tab_title{ color:var(--tab_filtered_active_highlighted_search_title_font_color); font-style:var(--tab_filtered_active_highlighted_search_title_font_style); font-weight:var(--tab_filtered_active_highlighted_search_title_font_weight); } /* search result active highlighted hover */ .active_tab.filtered.highlighted_search>.tab_header_hover{ border:1px solid var(--tab_filtered_active_highlighted_search_hover_border); background-color:var(--tab_filtered_active_highlighted_search_hover_background); } .tab.active_tab.filtered.highlighted_search>.tab_header_hover>.tab_title{ color:var(--tab_filtered_active_highlighted_search_hover_title_font_color); font-style:var(--tab_filtered_active_highlighted_search_hover_title_font_style); font-weight:var(--tab_filtered_active_highlighted_search_hover_title_font_weight); } /* search result selected highlighted */ .selected_tab.filtered.highlighted_search>.tab_header{ border:1px solid var(--tab_filtered_selected_highlighted_search_border); background-color:var(--tab_filtered_selected_highlighted_search_background); } .tab.selected_tab.filtered.highlighted_search>.tab_header>.tab_title{ color:var(--tab_filtered_selected_highlighted_search_title_font_color); font-style:var(--tab_filtered_selected_highlighted_search_title_font_style); font-weight:var(--tab_filtered_selected_highlighted_search_title_font_weight); } /* search result selected highlighted hover */ .selected_tab.filtered.highlighted_search>.tab_header_hover{ border:1px solid var(--tab_filtered_selected_highlighted_search_hover_border); background-color:var(--tab_filtered_selected_highlighted_search_hover_background); } .tab.selected_tab.filtered.highlighted_search>.tab_header_hover>.tab_title{ color:var(--tab_filtered_selected_highlighted_search_hover_title_font_color); font-style:var(--tab_filtered_selected_highlighted_search_hover_title_font_style); font-weight:var(--tab_filtered_selected_highlighted_search_hover_title_font_weight); } /* search result selected active highlighted */ .active_tab.selected_tab.filtered.highlighted_search>.tab_header{ border:1px solid var(--tab_filtered_selected_active_highlighted_search_border); background-color:var(--tab_filtered_selected_active_highlighted_search_background); } .tab.active_tab.selected_tab.filtered.highlighted_search>.tab_header>.tab_title{ color:var(--tab_filtered_selected_active_highlighted_search_title_font_color); font-style:var(--tab_filtered_selected_active_highlighted_search_title_font_style); font-weight:var(--tab_filtered_selected_active_highlighted_search_title_font_weight); } /* search result selected active highlighted hover */ .active_tab.selected_tab.filtered.highlighted_search>.tab_header_hover{ border:1px solid var(--tab_filtered_selected_active_highlighted_search_hover_border); background-color:var(--tab_filtered_selected_active_highlighted_search_hover_background); } .tab.active_tab.selected_tab.filtered.highlighted_search>.tab_header_hover>.tab_title{ color:var(--tab_filtered_selected_active_highlighted_search_hover_title_font_color); font-style:var(--tab_filtered_selected_active_highlighted_search_hover_title_font_style); font-weight:var(--tab_filtered_selected_active_highlighted_search_hover_title_font_weight); } /* TABS */ /* regular tab title */ .tab_title { z-index: 5; font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, Sans-serif; white-space: nowrap; text-overflow: ellipsis; width: auto; overflow: hidden; padding-right: 3px; padding-left: var(--tab_title_text_padding_left); font-size: var(--title_font_size); } .tab { position: relative; display: block; left: 0px; height: auto; width: auto; border-top: 1px solid transparent; } .tab>.tab_header { /* tab size is here, all the rest is automatically calculated, adjust line-height to fix title vertical position */ z-index: 10; position: relative; top: 0px; left: 1px; height: var(--tab_height); line-height: var(--tab_height_line); width: calc(100% - 4px); background-image: url(../theme/icon_empty.svg); background-size: var(--favicon_width) var(--favicon_height); background-position: var(--favicon_left), center; } /* DRAG AND DROP TARGETS */ .drop_target { position: absolute; pointer-events: none; } .tab>.drag_enter_center { border-radius: var(--tab_header_border_radius); z-index: 11; top: -1px; left: 1px; height: calc(var(--tab_height) + 2px); width: calc(100% - 4px); border: 1px solid transparent; } .tab>.drag_enter_center.highlighted_drop_target { border: 1px solid var(--drag_indicator); } .tab>.drag_entered_top { border-radius: var(--tab_header_border_radius); z-index: 15; top: -1px; left: 1px; width: calc(100% - 2px); height: var(--drag_area_top); border-top: 1px solid transparent; } .tab>.drag_entered_top.highlighted_drop_target { border-top: 1px solid var(--drag_indicator); } .tab>.drag_entered_bottom { border-radius: var(--tab_header_border_radius); z-index: 20; bottom: -1px; left: 1px; width: calc(100% - 2px); height: var(--drag_area_bottom); border-bottom: 1px solid transparent; } .tab>.drag_entered_bottom.highlighted_drop_target { bottom: -1px; border-bottom: 1px solid var(--drag_indicator); } .tab>.children>.tab:last-child>.drag_entered_bottom { z-index: 19; bottom: 3px; border-bottom: 1px solid transparent; } .tab>.children>.tab:last-child>.drag_entered_bottom.highlighted_drop_target { bottom: -1px; height: calc(var(--drag_area_bottom) + 4px); border-bottom: 1px solid var(--drag_indicator); } /* .group>.tab:last-child { */ .group>:last-child { margin-bottom: 12px; } /* TABS WITH CHILDREN, OPEN AND CLOSED */ .expand { z-index: 200; position: absolute; top: 0px; left: 0px; height: var(--expand_height); width: var(--expand_width); -webkit-mask-position: var(--expand_mask_left) var(--expand_mask_top); -webkit-mask-size: var(--expand_mask_width) var(--expand_mask_height); mask-size: var(--expand_mask_width) var(--expand_mask_height); mask-position: var(--expand_mask_left) var(--expand_mask_top); } /* CHILDREN TABS */ .tab>.children { position: relative; padding-left: var(--children_padding_left); } .tab.o>.children { height: auto; } .tab.c>.children { display: none; height: 0px; } .tab.c>.tab_header>.expand.hover, .tab.o>.tab_header>.expand.hover { background-color: var(--expand_hover_background); } .tab.c>.tab_header>.expand { background-color: var(--expand_closed_background); mask-image: url(../theme/expand_closed.svg); -webkit-mask-image: url(../theme/expand_c.svg); } .tab.o>.tab_header>.expand { background-color: var(--expand_open_background); mask-image: url(../theme/expand_open.svg); -webkit-mask-image: url(../theme/expand_o.svg); } .o.tab>.tab_header>.tab_title, .c.tab>.tab_header>.tab_title { padding-left: var(--tab_title_text_padding_exp_left); } /* FOLDERS */ /* .group>.children_folders{ background-color: var(--folder_list_background); } */ .folder_title { z-index: 5; font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, Sans-serif; white-space: nowrap; text-overflow: ellipsis; width: auto; overflow: hidden; padding-right: 3px; padding-left: var(--tab_title_text_padding_left); font-size: var(--title_font_size); color:var(--tab_title_font_color); font-style:var(--tab_title_font_style); font-weight:var(--tab_title_font_weight); } .folder { position: relative; display: block; left: 0px; height: auto; width: auto; border-top: 1px solid transparent; } .folder>.folder_header { z-index: 10; position: relative; top: 0px; left: 1px; height: var(--tab_height); line-height: var(--tab_height_line); width: calc(100% - 4px); border-radius:var(--tab_header_border_radius); border:1px solid var(--tab_border); background-color:var(--tab_background); } .folder>.drag_enter_center { border-radius: var(--tab_header_border_radius); z-index: 11; top: -1px; left: 1px; height: calc(var(--tab_height) + 2px); width: calc(100% - 4px); border: 1px solid transparent; } .folder>.drag_enter_center.highlighted_drop_target { border: 1px solid var(--drag_indicator); } .folder>.drag_entered_top { border-radius: var(--tab_header_border_radius); z-index: 15; top: -1px; left: 1px; width: calc(100% - 2px); height: var(--drag_area_top); border-top: 1px solid transparent; } .folder>.drag_entered_top.highlighted_drop_target { border-top: 1px solid var(--drag_indicator); } .folder>.drag_entered_bottom { border-radius: var(--tab_header_border_radius); z-index: 20; bottom: -1px; left: 1px; width: calc(100% - 2px); height: var(--drag_area_bottom); border-bottom: 1px solid transparent; } .folder>.drag_entered_bottom.highlighted_drop_target { bottom: -1px; border-bottom: 1px solid var(--drag_indicator); } .folder>.children>.folder:last-child>.drag_entered_bottom { z-index: 19; bottom: 3px; border-bottom: 1px solid transparent; } .folder>.children>.folder:last-child>.drag_entered_bottom.highlighted_drop_target { bottom: -1px; height: calc(var(--drag_area_bottom) + 4px); border-bottom: 1px solid var(--drag_indicator); } .folder>.children { position: relative; padding-left: var(--children_padding_left); } .folder.o>.children { height: auto; } .folder.c>.children { display: none; height: 0px; } .folder.c>.folder_header, .folder.o>.folder_header { background-position: calc(var(--favicon_left) + 8px), center; } .folder_icon { z-index: 200; position: absolute; top: calc(var(--tab_height)/2 - var(--favicon_height)/2); left: var(--favicon_left); width: var(--favicon_width); height: var(--favicon_height); mask-size: var(--favicon_width) var(--favicon_height); mask-position: 0px 0px; -webkit-mask-size: var(--favicon_width) var(--favicon_height); -webkit-mask-position: 0px 0px; } .folder.c>.folder_header>.folder_icon:hover, .folder.o>.folder_header>.folder_icon:hover { background-color: var(--expand_hover_background); } .folder>.folder_header>.folder_icon, .folder.n>.folder_header>.folder_icon, .folder.c>.folder_header>.folder_icon { /* background-color: #b2b2b2; */ background-color: var(--expand_closed_background); -webkit-mask-image: url(../theme/icon_folder_closed.svg); mask-image: url(../theme/icon_folder_closed.svg); } .folder.o>.folder_header>.folder_icon { background-color: var(--expand_open_background); -webkit-mask-image: url(../theme/icon_folder_open.svg); mask-image: url(../theme/icon_folder_open.svg); } /* normal hover */ .folder>.folder_header_hover{ border-radius:var(--tab_header_border_radius); border:1px solid var(--tab_hover_border); background-color:var(--tab_hover_background); } /* normal selected */ .selected_folder>.folder_header{ border:1px solid var(--tab_selected_border); background-color:var(--tab_selected_background); } .selected_folder>.folder_header>.folder_title{ color:var(--tab_selected_title_font_color); font-style:var(--tab_selected_title_font_style); font-weight:var(--tab_selected_title_font_weight); } /* normal selected hover */ .selected_folder>.folder_header_hover{ border:1px solid var(--tab_selected_hover_border); background-color:var(--tab_selected_hover_background); } .selected_folder>.folder_header_hover>.folder_title{ color:var(--tab_selected_hover_title_font_color); font-style:var(--tab_selected_hover_title_font_style); font-weight:var(--tab_selected_hover_title_font_weight); } .children_folders>:last-child { margin-bottom: 1px; } /* PINS */ @keyframes blinking { 0% {background-color: var(--tab_background); border:1px solid var(--tab_border);} 50% {background-color: var(--attention_background); border:1px solid var(--attention_border);} 80% {background-color: var(--tab_background); border:1px solid var(--tab_border);} 100% {background-color: var(--tab_background); border:1px solid var(--tab_border);} } .pin.attention>.tab_header { animation: blinking 2.5s infinite; } .pin { /* pin size is here, all the rest is automatically calculated */ position: relative; display: inline-block; vertical-align: top; top: 1px; left: 1px; height: var(--pin_height); width: var(--pin_width); /* border: 1px solid red; */ } .pin>.tab_header>.tab_title, .pin>.tab_header>.expand { display: none; } .pin>.tab_header { height: calc(100% - 3px); width: calc(100% - 3px); background-image: url(../theme/icon_empty.svg); background-size: var(--favicon_width) var(--favicon_height); background-position: center, center; } .pin>.drag_entered_top { z-index: 20; position: absolute; top: 1px; left: -1px; height: calc(100% - 4px); width: 50%; border-left: 1px solid transparent; } .pin>.drag_entered_top.highlighted_drop_target { border-left: 1px solid var(--drag_indicator); } .pin>.drag_entered_bottom { z-index: 21; position: absolute; top: 1px; left: calc(50% - 2px); height: calc(100% - 4px); width: 50%; border-left: 1px solid transparent; } .pin>.drag_entered_bottom.highlighted_drop_target { border-right: 1px solid var(--drag_indicator); } .pin>.drag_enter_center { z-index: 2; position: absolute; top: 0px; height: 0px; width: 0px; /* border: 1px solid yellow; */ } /* MEDIA */ /* .tab.c>.tab_header>.tab_mediaicon, .tab.o>.tab_header>.tab_mediaicon { left: calc(var(--pin_width) - 4px); } */ .tab_mediaicon { position: absolute; display: inline-block; vertical-align: top; z-index: 999; bottom: 2px; left: var(--tab_mediaicon_left); bottom: var(--tab_mediaicon_bottom); height: 0px; width: 0px; background-size: 0px 0px; } .audible>.tab_header>.tab_mediaicon { height: var(--tab_mediaicon_height); width: var(--tab_mediaicon_width); background-image: url(../theme/icon_audio.svg); background-size: var(--tab_mediaicon_width) var(--tab_mediaicon_height); } .audible>.tab_header>.tab_mediaicon:hover { background-image: url(../theme/icon_audio_hover.svg); } .muted>.tab_header>.tab_mediaicon { height: var(--tab_mediaicon_height); width: var(--tab_mediaicon_width); background-image: url(../theme/icon_audio_muted.svg); background-size: var(--tab_mediaicon_width) var(--tab_mediaicon_height); } .muted>.tab_header>.tab_mediaicon:hover { background-image: url(../theme/icon_audio_muted_hover.svg); } /* LOADING FAVICON */ .loading>.tab_header { background-image: url(../theme/loading.svg); } /* CLOSE BUTTON */ .close { border: 1px solid transparent; z-index: 998; display: none; position: absolute; top: var(--close_top); right: var(--close_right); height: var(--close_height); width: var(--close_width); background-size: var(--close_height) var(--close_width); } .close_img { z-index: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background-color: var(--close_x); -webkit-mask-image: url(../theme/close.svg); mask-image: url(../theme/close.svg); mask-size: 100%; mask-position: center, center; } .close_show>.tab_title { padding-right: var(--tab_title_text_padding_right_with_close_button); } .close_show>.close { display: inline-block; } .close_show>.close_hover>.close_img { top: 0px; background-color: var(--close_hover_x); } .close_show>.close_hover { border: 1px solid var(--close_hover_border); background-color: var(--close_hover_background); } .pin>.tab_header>.close { display: none; z-index: 0; } /* MENU */ .menu { position: absolute; overflow: hidden; display: none; word-wrap: normal; white-space: initial; z-index: 1000; font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, Sans-serif; font-size: 12px; border: 1px solid var(--tabs_menu_border); padding: 0px 0px 0px 0px; background: var(--tabs_menu_background); color: var(--tabs_menu_font); } .menu li { padding: 3px 8px; border: 1px solid var(--tabs_menu_background); list-style-type: none; } .menu li:hover { border: 1px solid var(--tabs_menu_hover_border); background-color: var(--tabs_menu_hover_background); } .menu .separator { height: 1px; width: 80%; background-color: var(--tabs_menu_separator); margin: 0px auto; } /* HIDE */ .hidden { display: none; position: absolute; top: -1000px; left: -1000px; width: 0px; height: 0px; border: none; margin: 0px; padding: 0; overflow: hidden; }