From b1d1a8bbaca0a31b2c2581911368b6892d447718 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Sun, 12 Mar 2017 01:00:23 +0100 Subject: [PATCH] third and last part of syncing LCARStrek with Firefox 52 browser windows theme changes --- LCARStrek/browser/aboutNetError.css | 24 +++- LCARStrek/browser/aboutPrivateBrowsing.css | 45 ------- LCARStrek/browser/aboutTabCrashed.css | 68 +++++++++- .../browser/addons/addon-install-anchor.svg | 20 ++- LCARStrek/browser/browser.css | 88 ++++++++++--- .../downloads/allDownloadsViewOverlay.css | 29 ++--- LCARStrek/browser/downloads/downloads.css | 69 +++------- .../browser/downloads/progressmeter.inc.css | 70 ++++++++++ LCARStrek/browser/newtab/newTab.css | 123 ++++++++++++++++-- LCARStrek/browser/notification-icons.svg | 7 + .../privatebrowsing/aboutPrivateBrowsing.css | 17 +++ LCARStrek/browser/wifi.svg | 30 +++++ 12 files changed, 437 insertions(+), 153 deletions(-) delete mode 100644 LCARStrek/browser/aboutPrivateBrowsing.css create mode 100644 LCARStrek/browser/downloads/progressmeter.inc.css create mode 100644 LCARStrek/browser/wifi.svg diff --git a/LCARStrek/browser/aboutNetError.css b/LCARStrek/browser/aboutNetError.css index 2c504843..acb4e8a4 100644 --- a/LCARStrek/browser/aboutNetError.css +++ b/LCARStrek/browser/aboutNetError.css @@ -16,6 +16,10 @@ body.certerror { #FFCF00 66%, #FFCF00); } +body.captiveportal .title { + background-image: url("wifi.svg"); +} + body.certerror .title { background-image: url("cert-error.svg"); } @@ -39,15 +43,15 @@ button:disabled { display: none; } -#certErrorButtonContainer { +#certErrorAndCaptivePortalButtonContainer { display: none; } -body.certerror #certErrorButtonContainer { +body:not(.neterror) #certErrorAndCaptivePortalButtonContainer { display: flex; } -body.certerror #netErrorButtonContainer { +body:not(.neterror) #netErrorAndCaptivePortalButtonContainer { display: none; } @@ -64,7 +68,19 @@ body.certerror #netErrorButtonContainer { display: none; } -body.certerror #advancedButton { +body.captiveportal #returnButton { + display: none; +} + +body:not(.captiveportal) #openPortalLoginPageButton { + display: none; +} + +#openPortalLoginPageButton { + margin-inline-start: 0; +} + +body:not(.neterror) #advancedButton { display: block; } diff --git a/LCARStrek/browser/aboutPrivateBrowsing.css b/LCARStrek/browser/aboutPrivateBrowsing.css deleted file mode 100644 index 541f18c3..00000000 --- a/LCARStrek/browser/aboutPrivateBrowsing.css +++ /dev/null @@ -1,45 +0,0 @@ -/* 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/. */ - -body.private > #errorPageContainer { - background-image: url("chrome://browser/skin/Privacy-48.png"); -} - -body.normal > #errorPageContainer { - background-image: url("chrome://global/skin/icons/alert-question.gif"); -} - -#clearRecentHistoryDesc { - margin-top: 2em; -} - -#clearRecentHistoryDesc > p { - font-size: 110%; /* to match the value set in chrome://global/skin/netError.css */ -} - -#startPrivateBrowsingDesc > button { - margin-inline-start: 0; -} - -#footerDesc > p { - font-size: 110%; /* to match the value set in chrome://global/skin/netError.css */ -} - -#moreInfo { - font-size: 110%; /* to match the value set in chrome://global/skin/netError.css */ - padding-inline-start: 25px; - background: url("chrome://global/skin/icons/information-16.png") no-repeat top left; -} - -#moreInfo:dir(rtl) { - background-position: top right; -} - -#moreInfoText { - margin-bottom: 0; -} - -#moreInfoLinkContainer { - margin-top: 0.5em; -} diff --git a/LCARStrek/browser/aboutTabCrashed.css b/LCARStrek/browser/aboutTabCrashed.css index d8658ad3..24e76776 100644 --- a/LCARStrek/browser/aboutTabCrashed.css +++ b/LCARStrek/browser/aboutTabCrashed.css @@ -2,15 +2,35 @@ * 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/. */ +body { + font-size: 1.25rem; +} + .title { background-image: url("chrome://browser/skin/tab-crashed.svg"); } +.title > h1, +.offers { + margin-left: 14px; +} + +.title > h1 { + /** + * Add commentary? + */ + padding-right: 14px; +} + +.container { + width: 45%; +} + #reportSent { font-weight: bold; } -#crash-reporter-container { +#reportBox { width: 80%; background-color: var(--in-content-box-background); margin: 24px 0; @@ -19,6 +39,10 @@ border-radius: 2px; } +#reportBox > h2:first-child { + margin-top: 0; +} + #crash-reporter-title { font-weight: bold; margin: 0 0 14px 0; @@ -31,12 +55,48 @@ textarea { resize: none; } +input[type="text"], +input[type="checkbox"] { + -moz-margin-start: 0px; +} + #options { list-style: none; margin-inline-start: 0; } -input[type="text"], -#options > li { - margin: 14px 0 0 0; +#options > li, +#email { + margin-top: 14px; +} + +.checkbox-with-label { + display: flex; +} + +.checkbox-with-label > label { + margin-top: auto; + margin-bottom: auto; +} + +/** + * Hack alert: the #autoSubmit checkbox has a long label, which means + * it often wraps, at least in en-US. Bug 418833 and bug 1317795 allows + * us to fix this properly, but bug 418833 didn't uplift in time for this + * release. We use some hackery here to make sure that this label wraps + * properly, and doesn't end up underneath the checkbox pseudoelement. + * We do this by setting a negative margin on the pseudoelement, and then + * a positive equivalent margin on the label itself. + * + * The magic number of 35px is derived from the total width of the checkbox. + * The checkbox width is explicitly set at 23px. This, plus the 1px border on either + * side gives us 25px. Then there's the 10px margin-inline-end, which gives us 35px. + */ +#autoSubmit + label:before { + margin-inline-start: -35px; +} + +#autoSubmit + label { + margin-inline-start: 35px; + line-height: 1.75em; } diff --git a/LCARStrek/browser/addons/addon-install-anchor.svg b/LCARStrek/browser/addons/addon-install-anchor.svg index 6d469c9a..e1fda049 100644 --- a/LCARStrek/browser/addons/addon-install-anchor.svg +++ b/LCARStrek/browser/addons/addon-install-anchor.svg @@ -3,9 +3,27 @@ - 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/. --> + - + diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index 6a07f64b..b7aa6fb8 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -51,7 +51,7 @@ menubar { --arrowpanel-active: #FF9F00; --arrowpanel-dimmed: #402000; --arrowpanel-dimmed-further: #794900; - --arrowpanel-dimmed-even-further: 603000; + --arrowpanel-dimmed-even-further: #603000; --urlbar-separator-color: #9C9CFF; } @@ -1277,14 +1277,14 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon, #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack, -#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon, +#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon, #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack, #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ { /* padding-inline-end: 17px;*/ } #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon, -#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon { +#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon { /* horizontal padding + border + icon width */ /* max-width: 43px;*/ } @@ -2020,6 +2020,13 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but height: 16px; } +#urlbar[actiontype="extension"] > #identity-box > #identity-icon { + -moz-image-region: inherit; + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg); + width: 16px; + height: 16px; +} + /* SHARING ICON */ #sharing-icon { @@ -2170,15 +2177,56 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box padding: 0px 1px 0px 1px; } +#PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon { + margin-inline-start: 4px; + margin-inline-end: 0; +} + #PopupAutoComplete > richlistbox > richlistitem > .ac-title { font: icon; - margin-inline-start: 6px; + margin-inline-start: 4px; } #PopupAutoComplete > richlistbox { padding: 0; } +/* Login form autocompletion */ +#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon { + display: initial; + list-style-image: url(chrome://browser/skin/notification-icons.svg#login); +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] { + list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted); +} + +/* Insecure field warning */ +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] { + background-color: var(--arrowpanel-dimmed); + border-bottom: 1px solid var(--panel-separator-color); + padding-bottom: 4px; + padding-top: 4px; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] { + background-color: var(--arrowpanel-dimmed-further); + color: #FFCF00; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title { + color: #A09090; + font-size: 1em; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title { + color: inherit; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon); +} + /* === END autocomplete.inc.css === */ #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] { @@ -2912,8 +2960,8 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type- padding: 0; } -.tab-icon-sound[soundplaying-scheduledremoval]:not(:hover), -.tab-icon-overlay[soundplaying-scheduledremoval]:not(:hover) { +.tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover), +.tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) { transition: opacity .3s linear var(--soundplaying-removal-delay); opacity: 0; } @@ -3484,7 +3532,7 @@ html|*#webRTC-previewVideo { /* INSTALL ADDONS */ .install-icon { - list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default); + list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg); } .popup-notification-icon[popupid="xpinstall-disabled"], @@ -5511,19 +5559,17 @@ menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left { #ContentSelectDropdown > menupopup > menucaption, #ContentSelectDropdown > menupopup > menuitem { - padding: 4px 6px; + padding: 0 6px; + border-width: 0; +/* font: -moz-list;*/ } #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text, #ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text { - font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; - font-size: 11px; - /** - * Remove the extra vertical padding set by menu.css since - * the menuitem itself will include enough padding. - */ - padding-top: 0px; - padding-bottom: 0px; + /* Padding should follow the 4/12 ratio, where 12px is the default font-size + with 4px being the preferred padding size. */ + padding-top: .3333em; + padding-bottom: .3333em; } #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text { @@ -5543,8 +5589,10 @@ menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left { color: #A09090; } -#ContentSelectDropdown > .isOpenedViaTouch > menucaption, -#ContentSelectDropdown > .isOpenedViaTouch > menuitem { - padding-top: 11px; - padding-bottom: 11px; +#ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text, +#ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text { + /* Touch padding should follow the 11/12 ratio, where 12px is the default + font-size with 11px being the preferred padding size. */ + padding-top: .9167em; + padding-bottom: .9167em; } diff --git a/LCARStrek/browser/downloads/allDownloadsViewOverlay.css b/LCARStrek/browser/downloads/allDownloadsViewOverlay.css index 1c945f23..4ac7d8e0 100644 --- a/LCARStrek/browser/downloads/allDownloadsViewOverlay.css +++ b/LCARStrek/browser/downloads/allDownloadsViewOverlay.css @@ -4,6 +4,9 @@ /* === BEGIN allDownloadsViewOverlay.inc.css === */ +/* In the original, this is at the end of the file as a preprocessor-include */ +@import url("progressmeter.inc.css"); + /*** View and outer controls ***/ #downloadsRichListBox { @@ -21,16 +24,13 @@ } .downloadTypeIcon { - margin-top: 8px; - margin-inline-end: 12px; - margin-bottom: 8px; - margin-inline-start: 0; + margin: 8px 13px; width: 32px; height: 32px; } .downloadBlockedBadge { - margin: 0 4px; + margin: 0 5px; background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat; } @@ -51,14 +51,15 @@ richlistitem.download > toolbarseparator { } .downloadTarget { - margin-bottom: 3px; - cursor: inherit; + margin: 0; } .downloadDetails { opacity: 0.7; font-size: 95%; - cursor: inherit; + /* Use calc() to keep the height consistent with .downloadTarget, so that the + progress bar can be vertically centered. */ + margin: 4px 0 calc(1em / 0.95 - 1em); } .downloadButton { @@ -66,9 +67,9 @@ richlistitem.download > toolbarseparator { background: transparent; min-width: 0; min-height: 0; - margin: 3px; + margin: 0; border: none; - padding: 5px; + padding: 0 18px; color: inherit; } @@ -76,7 +77,6 @@ richlistitem.download > toolbarseparator { -moz-appearance: none; padding: 2px !important; border-radius: 50%; - color: graytext; } .downloadButton > .button-box > .button-icon { @@ -100,10 +100,6 @@ richlistitem.download > toolbarseparator { background-color: #FF9F00; } -richlistitem.download[selected] > .downloadButtonArea > .downloadButton > .button-box { - color: inherit; -} - richlistitem.download[selected] > .downloadButtonArea > .downloadButton:hover > .button-box { background-color: #FFCF00; color: #000000; @@ -128,6 +124,9 @@ richlistitem.download[selected] > .downloadButtonArea > .downloadButton:hover:ac list-style-image: url("chrome://browser/skin/panel-icons.svg#retry"); } +/*** Progressmeter ***/ +/* %include progressmeter.inc.css - this happens as @import at the start of the file */ + /* === END allDownloadsViewOverlay.inc.css === */ /*** List items ***/ diff --git a/LCARStrek/browser/downloads/downloads.css b/LCARStrek/browser/downloads/downloads.css index a59e0975..e1be297a 100644 --- a/LCARStrek/browser/downloads/downloads.css +++ b/LCARStrek/browser/downloads/downloads.css @@ -4,6 +4,9 @@ /* === BEGIN downloads.inc.css === */ +/* In the original, this is at the end of the file as a preprocessor-include */ +@import url("progressmeter.inc.css"); + /*** Panel and outer controls ***/ #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent { @@ -18,10 +21,8 @@ #downloadsListBox { background-color: transparent; - padding: 0; color: inherit; margin: 0; - border: none; } #emptyDownloads { @@ -128,8 +129,6 @@ richlistitem[type="download"]:hover > toolbarseparator, } #downloadsSummary { - padding: 0 12px; - cursor: pointer; -moz-user-focus: normal; } @@ -146,36 +145,26 @@ richlistitem[type="download"]:hover > toolbarseparator, #downloadsSummary, richlistitem[type="download"] { height: var(--downloads-item-height); - padding-inline-end: 0; - color: inherit; } richlistitem[type="download"] { - margin: 0; border-bottom: 1px solid var(--panel-separator-color); background: transparent; - padding: 0; + color: inherit; } richlistitem[type="download"]:last-child { border-bottom: none; } -richlistitem[type="download"] > .downloadMainArea { - padding: 8px; -} - .downloadTypeIcon { - margin-top: 8px; - margin-inline-end: 12px; - margin-bottom: 8px; - margin-inline-start: 0; + margin: 8px 13px; width: 32px; height: 32px; } .downloadBlockedBadge { - margin: 0 4px; + margin: 0 5px; background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat; } @@ -205,26 +194,23 @@ richlistitem[type="download"][verdict="Uncommon"] .downloadBlockedBadge { font-size of .downloadContainer's parent, we use calc to go from the smaller font-size back to the original font-size. */ -#downloadsSummaryDetails, .downloadContainer { font-size: calc(100% * var(--downloads-item-font-size-factor)); + margin-inline-end: 13px; } #downloadsSummaryDescription, .downloadTarget { - margin-bottom: var(--downloads-item-target-margin-bottom); - cursor: inherit; -} - -.downloadTarget { + margin: 0; font-size: calc(100% / var(--downloads-item-font-size-factor)); } #downloadsSummaryDetails, .downloadDetails { - margin-top: var(--downloads-item-details-margin-top); opacity: var(--downloads-item-details-opacity); - cursor: inherit; + /* Use calc() to keep the height consistent with .downloadTarget, so that the + progress bar can be vertically centered. */ + margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em); } richlistitem[type="download"][verdict] > toolbarseparator { @@ -236,8 +222,8 @@ richlistitem[type="download"][verdict] > toolbarseparator { margin: 0; /* border: none; */ background: transparent; - padding: 8px; - color: #A09090; + padding: 0; + color: inherit; } .downloadButton > .button-box > .button-icon { @@ -253,21 +239,16 @@ richlistitem[type="download"][verdict] > toolbarseparator { padding: 0; } -richlistitem[type="download"][state="1"][exists]:hover > .downloadMainArea, -richlistitem[type="download"]:not([verdict]):hover > .downloadButtonArea { - background-color: var(--arrowpanel-dimmed); -} - richlistitem[type="download"][state="1"][exists] .downloadMainArea:hover, richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover, richlistitem[type="download"][verdict]:hover { - background-color: var(--arrowpanel-dimmed-further); + background-color: var(--arrowpanel-dimmed); } richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover:active, richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover:active, richlistitem[type="download"][verdict]:hover:active { - background-color: var(--arrowpanel-dimmed-even-further); + background-color: var(--arrowpanel-dimmed-further); } richlistitem[type="download"][showingsubview] { @@ -284,10 +265,6 @@ richlistitem[type="download"][verdict="Malware"][showingsubview] { color: #000000; } -richlistitem[type="download"][verdict="Malware"]:hover > .downloadButtonArea > .downloadButton { - color: inherit; -} - /*** Button icons ***/ .downloadIconCancel > .button-box > .button-icon { @@ -367,19 +344,13 @@ richlistitem[type="download"][verdict="Malware"]:hover > .downloadButtonArea > . -moz-margin-end: 16px; } +/*** Progressmeter ***/ +/* %include progressmeter.inc.css - this happens as @import at the start of the file */ + /* === END downloads.inc.css === */ /*** Panel and outer controls ***/ -#downloadsSummary { -} - -#downloadsSummary:hover { -} - -#downloadsSummary:hover:active { -} - #downloadsPanel[keyfocus] #downloadsSummary:focus, #downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus { outline: 1px #008484 dotted; @@ -408,10 +379,8 @@ richlistitem[type="download"][showingsubview][verdict="Malware"] { /*** List items and similar elements in the summary ***/ :root { - --downloads-item-height: 7em; + --downloads-item-height: 5.5em; --downloads-item-font-size-factor: 0.9; - --downloads-item-target-margin-bottom: 6px; - --downloads-item-details-margin-top: 0; --downloads-item-details-opacity: 0.6; } diff --git a/LCARStrek/browser/downloads/progressmeter.inc.css b/LCARStrek/browser/downloads/progressmeter.inc.css new file mode 100644 index 00000000..d2c72b55 --- /dev/null +++ b/LCARStrek/browser/downloads/progressmeter.inc.css @@ -0,0 +1,70 @@ +/*** Common-styled progressmeter ***/ +.downloadProgress { + height: 8px; + border-radius: 1px; + margin: 4px 0 0; + margin-inline-end: 12px; + + /* for overriding rules in progressmeter.css */ + -moz-appearance: none; + border-style: none; + background-color: transparent; + min-width: initial; + min-height: initial; +} + +.downloadProgress[mode="undetermined"] { + /* for overriding rules on global.css in Linux. */ + -moz-binding: url("chrome://global/content/bindings/progressmeter.xml#progressmeter"); +} + +.downloadProgress > .progress-bar { + background-color: #008484; + + /* for overriding rules in progressmeter.css */ + -moz-appearance: none; +} + +.downloadProgress[paused="true"] > .progress-bar { + background-color: #A09090; +} + +.downloadProgress[mode="undetermined"] > .progress-bar { + /* Make a white reflecting animation. + Create a gradient with 2 identical pattern, and enlarge the size to 200%. + This allows us to animate background-position with percentage. */ + background-image: linear-gradient(90deg, transparent 0%, + rgba(255,255,255,0.5) 25%, + transparent 50%, + rgba(255,255,255,0.5) 75%, + transparent 100%); + background-blend-mode: lighten; + background-size: 200% 100%; + animation: downloadProgressSlideX 1.5s linear infinite; +} + +.downloadProgress > .progress-remainder { + border: solid #9C9CFF; + border-block-start-width: 1px; + border-block-end-width: 1px; + border-inline-start-width: 0; + border-inline-end-width: 1px; + background-color: #000000; +} + +.downloadProgress[value="0"] > .progress-remainder { + border-width: 1px; +} + +.downloadProgress > .progress-remainder[mode="undetermined"] { + border: none; +} + +@keyframes downloadProgressSlideX { + 0% { + background-position: 0 0; + } + 100% { + background-position: -100% 0; + } +} diff --git a/LCARStrek/browser/newtab/newTab.css b/LCARStrek/browser/newtab/newTab.css index 9cd34110..202d13f3 100644 --- a/LCARStrek/browser/newtab/newTab.css +++ b/LCARStrek/browser/newtab/newTab.css @@ -102,22 +102,41 @@ body { background-color: #FFCF00; } +/* GRID */ +#topsites-heading { + color: #A09090; + font-size: 1em; + font-weight: normal; + /* Position the heading such that it doesn't affect how many cells we + can fit into the grid. */ + position: absolute; + /* The top margin moves the heading away from the grid. + The horizontal margin aligns the heading with the cells. */ + margin: -1em 10px 0; +} + /* CELLS */ .newtab-cell { + --cell-corner-radius: 10px; background-color: rgba(255,159,0,.2); border: 1px solid; border-color: #9C9CFF; - border-radius: 10px; + border-radius: var(--cell-corner-radius); +} + +body.compact .newtab-cell { + --cell-corner-radius: 3px; } .newtab-cell:empty { outline: 2px dashed #A09090; - -moz-outline-radius: 2px; + outline-offset: -2px; + -moz-outline-radius: var(--cell-corner-radius); } /* SITES */ .newtab-site { - border-radius: inherit; + border-radius: var(--cell-corner-radius); text-decoration: none; transition-property: top, left, opacity, box-shadow, background-color; } @@ -135,7 +154,7 @@ body { /* LINKS */ .newtab-link { - border-radius: 10px; + border-radius: var(--cell-corner-radius); overflow: hidden; } @@ -151,11 +170,28 @@ body { background-clip: padding-box; background-repeat: no-repeat; background-size: cover; - border-radius: 8px 8px 0px 0px; height: 180px; transition: opacity 100ms ease-out; } +body.compact .newtab-thumbnail { + height: 100%; + border-radius: calc(var(--cell-corner-radius) + 1px); + outline: 1px solid hsla(0,0%,0%,.1); + -moz-outline-radius: var(--cell-corner-radius); + outline-offset: -1px; +} + +.newtab-thumbnail.placeholder { + color: #FFCF00; + font-size: 85px; + line-height: 200%; +} + +body.compact .newtab-thumbnail.placeholder { + font-size: 45px; +} + .newtab-cell:not([ignorehover]) .newtab-site:hover .newtab-thumbnail.enhanced-content { opacity: 0; } @@ -165,22 +201,47 @@ body { .newtab-site[type=organic] .newtab-thumbnail, .newtab-site[type=sponsored] .newtab-thumbnail { background-position: center center; +} + +body.compact .newtab-site[type=affiliate] .newtab-thumbnail { + background-position: center 30%; +} + +.newtab-site[type=affiliate] .newtab-thumbnail, +body:not(.compact) .newtab-site[type=enhanced] .newtab-thumbnail, +body:not(.compact) .newtab-site[type=organic] .newtab-thumbnail, +body:not(.compact) .newtab-site[type=sponsored] .newtab-thumbnail { background-size: auto; } /* TITLES */ -.newtab-sponsored, +.newtab-title { + background-color: #FF9F00; + font-size: 13px; + line-height: 30px; + border: 1px solid #9C9CFF; + border-radius: 0 0 var(--cell-corner-radius) var(--cell-corner-radius); +} + +body.compact .newtab-title { + background-color: rgba(255,159,0,.85); + font-size: 12px; + line-height: 21px; +/* border: 1px solid hsla(0,0%,80%,.8); + border-top-color: hsla(0,0%,0%,.1);*/ + background-clip: padding-box; +} + .newtab-title, .newtab-suggested { - padding: 0 8px; - background-color: rgba(255,159,0,.8); color: #000000; - border: none; - line-height: 24px; - bottom: 0 !important; } -/* +body.compact .newtab-title, +body.compact .newtab-suggested { + color: #000000; +} + .newtab-suggested { background-color: #9C9CFF; } @@ -194,9 +255,18 @@ body { background-color: #FF9F00; border: 0; } -*/ -.newtab-site:hover .newtab-title { + +body:not(.compact) .newtab-site:hover .newtab-title { background-color: #FFCF00; +/* border-color: #333; + border-top-color: white;*/ +} + +body.compact .newtab-site:hover .newtab-title { +/* color: white; + background-color: hsla(0,0%,20%,.85); + border-color: hsla(0,0%,0%,.8); + border-top-color: white;*/ } .newtab-site[pinned] .newtab-title { @@ -228,6 +298,31 @@ body { border: none; height: 24px; width: 24px; + top: 4px; +} + +.newtab-control-pin:dir(ltr), +.newtab-control-block:dir(rtl) { + left: 4px; +} + +.newtab-control-block:dir(ltr), +.newtab-control-pin:dir(rtl) { + right: 4px; +} + +body.compact .newtab-control { + top: -8px; +} + +body.compact .newtab-control-pin:dir(ltr), +body.compact .newtab-control-block:dir(rtl) { + left: -8px; +} + +body.compact .newtab-control-block:dir(ltr), +body.compact .newtab-control-pin:dir(rtl) { + right: -8px; } .newtab-control-pin, diff --git a/LCARStrek/browser/notification-icons.svg b/LCARStrek/browser/notification-icons.svg index e9561604..5923293e 100644 --- a/LCARStrek/browser/notification-icons.svg +++ b/LCARStrek/browser/notification-icons.svg @@ -36,6 +36,12 @@ .blocked { clip-path: url(#clip); } + + #login-highlighted { + fill: #000000; + fill-opacity: 1; + } + #plugin-blocked, #plugin-blocked:target ~ #strikeout { fill: #FF0000; @@ -88,6 +94,7 @@ + diff --git a/LCARStrek/browser/privatebrowsing/aboutPrivateBrowsing.css b/LCARStrek/browser/privatebrowsing/aboutPrivateBrowsing.css index 5dc085ea..a6170569 100644 --- a/LCARStrek/browser/privatebrowsing/aboutPrivateBrowsing.css +++ b/LCARStrek/browser/privatebrowsing/aboutPrivateBrowsing.css @@ -144,6 +144,23 @@ a.button:active { background-color: #FF9F00; } +/** + * We want to hide the checkbox in lieu of the toggle-btn + * "slider toggle". We need to make the toggle keyboard + * focusable, however, which is not possible if it's + * display:none. We work around this by making the toggle + * invisible but still present in the display list, allowing + * it to receive keyboard events. When it is focused by keyboard, + * we use the -moz-focusring selector on the invisible checkbox + * to show a focus ring around the slider toggle. + */ +.toggle-input { + opacity: 0; + width: 0; + pointer-events: none; + position: absolute; +} + .toggle + .toggle-btn { box-sizing: border-box; cursor: pointer; diff --git a/LCARStrek/browser/wifi.svg b/LCARStrek/browser/wifi.svg new file mode 100644 index 00000000..bfaec468 --- /dev/null +++ b/LCARStrek/browser/wifi.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + -- 2.43.0