From e72ef92b5bdc43cd2584198e2e54e951b70299e8 Mon Sep 17 00:00:00 2001 From: "Matt A. Tobin" Date: Fri, 2 Feb 2018 03:32:58 -0500 Subject: Add Basilisk --- .../themes/shared/syncedtabs/sidebar.inc.css | 234 +++++++++++++++++++++ 1 file changed, 234 insertions(+) create mode 100644 application/basilisk/themes/shared/syncedtabs/sidebar.inc.css (limited to 'application/basilisk/themes/shared/syncedtabs/sidebar.inc.css') diff --git a/application/basilisk/themes/shared/syncedtabs/sidebar.inc.css b/application/basilisk/themes/shared/syncedtabs/sidebar.inc.css new file mode 100644 index 000000000..4e76a7fc5 --- /dev/null +++ b/application/basilisk/themes/shared/syncedtabs/sidebar.inc.css @@ -0,0 +1,234 @@ +% This Source Code Form is subject to the terms of the Mozilla Public +% License, v. 2.0. If a copy of the MPL was not distributed with this +% file, You can obtain one at http://mozilla.org/MPL/2.0/. + +/* These styles are intended to mimic XUL trees and the XUL search box. */ + +html { + height: 100%; +} + +body { + height: 100%; + margin: 0; + font: message-box; + color: #333333; + -moz-user-select: none; +} + +/* The content-container holds the non-scrollable header and the scrollable + content area. +*/ +.content-container { + display: flex; + flex-flow: column; + height: 100%; +} + +/* The content header is not scrollable */ +.content-header { + flex: 0 1 auto; +} + +/* The main content area is scrollable and fills the rest of the area */ +.content-scrollable { + flex: 1 1 auto; + overflow: auto; +} + +.emptyListInfo { + cursor: default; + padding: 3em 1em; + text-align: center; +} + +.list, +.item-tabs-list { + display: flex; + flex-flow: column; + flex-grow: 1; +} + +.item.client { + opacity: 1; + max-height: unset; + display: unset; +} + +.item.client.closed .item-tabs-list { + display: none; +} + +.item { + display: inline-block; + opacity: 1; + flex: 1; + min-width: 0; + white-space: nowrap; + overflow: hidden; + outline: none; + color: -moz-FieldText; +} + +.item.selected > .item-title-container { + background-color: -moz-cellhighlight; + color: -moz-cellhighlighttext; + font-weight: bold; +} + +.item.selected:focus > .item-title-container { + background-color: Highlight; + color: HighlightText; +} + +.client .item.tab > .item-title-container { + padding-inline-start: 35px; +} + +.item.tab > .item-title-container { + padding-inline-start: 20px; +} + +.item.client.device-image-desktop > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/sync-desktopIcon.svg#icon"); +} + +.item.client.device-image-desktop.selected:focus > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/sync-desktopIcon.svg#icon-inverted"); +} + +.item.client.device-image-mobile > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/sync-mobileIcon.svg#icon"); +} + +.item.client.device-image-mobile.selected:focus > .item-title-container > .item-icon-container { + background-image: url("chrome://browser/skin/sync-mobileIcon.svg#icon-inverted"); +} + +.item.tab > .item-title-container > .item-icon-container { + background-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); +} + +@media (min-resolution: 1.1dppx) { +.item.tab > .item-title-container > .item-icon-container { + background-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png"); + } +} + +.item-icon-container { + min-width: 16px; + max-width: 16px; + min-height: 16px; + max-height: 16px; + margin-right: 5px; + margin-left: 5px; + background-size: 16px 16px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} + +.item-title-container { + display: flex; + flex-flow: row; + overflow: hidden; + flex-grow: 1; + padding: 1px 0px 1px 0px; +} + +.item-title { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + margin: 0px; + line-height: 1.3; + cursor: default; +} + +.item[hidden] { + opacity: 0; + max-height: 0; + transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms; +} + +.item.empty .item-title-container { + color: #aeaeae; +} + +.client .item.empty > .item-title-container { + padding-inline-start: 35px; +} + +.text-input-box { + display: flex; + flex-flow: row nowrap; +} + +.textbox-input-box { + display: flex; + flex-direction: row; +} + +.tabsFilter { + flex: 1; + /* min-width of anything to override the implicit "-moz-min-content" value. + 0px is safe as the sidebar itself has a constrained size meaning we will + never actually hit this minimum + */ + min-width: 0px; +} + +.sync-state > p { + padding-inline-end: 10px; + padding-inline-start: 10px; + color: #888; +} + +.text-link { + color: rgb(0, 149, 221); + cursor: pointer; +} + +.text-link:hover { + text-decoration: underline; +} + +.text-link, +.text-link:focus { + margin: 0px; + padding: 0px; + border: 0px; +} + +.deck .sync-state { + display: none; + opacity: 0; + transition: opacity 1.5s; + border-top: 1px solid #bdbdbd; +} + +.deck .sync-state.tabs-container { + border-top: 0px; +} + +.deck .sync-state.selected { + display: unset; + opacity: 100; +} + +.sidebar-search-container.tabs-container:not(.selected) { + display: none; +} + +.textbox-search-clear:not([disabled]) { + cursor: default; +} + +.textbox-search-icons .textbox-search-clear, +.filtered .textbox-search-icons .textbox-search-icon { + display: none; +} + +.filtered .textbox-search-icons .textbox-search-clear { + display: block; +} -- cgit v1.2.3