X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fpreferences%2Fin-content%2Fpreferences.css;h=373ea31d26b2ea03a03396ff97ac77a8ec1c3ae6;hp=c54cda0540448f76fc751ab169d947bd772d567a;hb=31bc2dc17978c5a0a3e0e5da77eaa04af610fec8;hpb=589b5528220a57ff70809bd8ef0eeaf51a0c8b2f diff --git a/LCARStrek/browser/preferences/in-content/preferences.css b/LCARStrek/browser/preferences/in-content/preferences.css index c54cda05..373ea31d 100644 --- a/LCARStrek/browser/preferences/in-content/preferences.css +++ b/LCARStrek/browser/preferences/in-content/preferences.css @@ -6,232 +6,66 @@ @namespace html "http://www.w3.org/1999/xhtml"; -@font-face { - font-family: "Clear Sans"; - src: url("chrome://browser/content/fonts/ClearSans-Regular.woff") format('woff'); -} - -page { - background-color: #000000; -} - -caption { - -moz-appearance: none; - margin: 0; -} - -.caption-text { - font-size: 1.3rem; - font-weight: bold; - line-height: 22px; - margin: 0 !important; -} - .main-content { - padding: 40px 48px 48px; + padding: 1.5em 0 0; /* That padding needs to match the upper stripe. */ overflow: auto; + + /* This actually results in two black boxes extending to the right and bottom, + * leaving the LCARS-gray background only in a top stripe and + * a bit larger area on the top left. + * The prefpane will overlay that with the rounded shape we want. */ + background-color: #A09090; + background-position: 3em 1.5em, 0px 5em; + background-image: linear-gradient(0deg, #000, #000), linear-gradient(0deg, #000, #000); + background-repeat: no-repeat; } -prefpane { +#mainPrefPane { + padding: 10px 20px 0px; + border-radius: 1em 0 0 0; + background-color: #000000; + max-width: 800px; - padding: 0; - font-family: "Clear Sans", sans-serif; + font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; font-size: 1.25rem; line-height: 22px; - color: #000000; -} - -prefpane > .content-box { - overflow: visible; -} - -/* groupboxes */ - -groupbox { -} - -groupbox label { -} - -/* tabpanels and tabs */ - -tabpanels { -} - -tabs { + color: #FF9F00; } -.tabs-left, -.tabs-right { +* { + -moz-user-select: text; } -tab { -} - -tab[selected] { -} - -.tab-text { -} - -tab:not([selected]):hover > .tab-middle > .tab-text { -} - -tab:not([selected]):hover:active > .tab-middle > .tab-text { -} - -tab[selected] > .tab-middle > .tab-text { -} - -/* buttons and menulists */ - button, -menulist { -} - -button:not([disabled]):hover, -menulist:not([disabled]):hover { -} - -button:not([disabled]):hover:active, -menulist[open="true"]:not([disabled]) { -} - -button[disabled], -menulist[disabled] { -} - -button > .button-box, -menulist > .menulist-label-box { -} - -button[type="menu"] > .button-box > .button-menu-dropmarker { -} - -.spinbuttons-button { -} - -.spinbuttons-up { -} - -.spinbuttons-down { -} - -.spinbuttons-button > .button-box { -} - -.spinbuttons-up > .button-box > .button-icon { -} - -.spinbuttons-up[disabled] > .button-box > .button-icon { -} - -.spinbuttons-down > .button-box > .button-icon { -} - -.spinbuttons-down[disabled] > .button-box > .button-icon { -} - -menulist:not([editable="true"]) > .menulist-dropmarker { -} - -menulist[disabled]:not([editable="true"]) > .menulist-dropmarker { -} - -menulist > menupopup, -button[type="menu"] > menupopup { -} - -menulist > menupopup menu, -menulist > menupopup menuitem, -button[type="menu"] > menupopup menu, -button[type="menu"] > menupopup menuitem { -} - -menulist > menupopup > menu[_moz-menuactive="true"], -menulist > menupopup > menuitem[_moz-menuactive="true"], -button[type="menu"] > menupopup > menu[_moz-menuactive="true"], -button[type="menu"] > menupopup > menuitem[_moz-menuactive="true"] { -} - -menulist > menupopup menuseparator, -button[type="menu"] > menupopup menuseparator { -} - -/* textboxes */ - -textbox { -} - -textbox[focused] { -} - -textbox[disabled] { -} - -/* Links */ - -.text-link, -.inline-link, -html|a.inline-link { -} - -.text-link:hover, -.inline-link:hover { -} - -.text-link:hover:active, -.inline-link:hover:active { -} - -/* Checkboxes and radio buttons */ - -.checkbox-check { -} - -.checkbox-check[checked] { -} - -checkbox:hover::before, -checkbox[checked]::before { -} - -checkbox[checked]::before { -} - -radio { -} - -.radio-check { -} - -.radio-check[selected] { -} - -radio:hover::before, -radio[selected]::before { -} - -radio[selected]::before { +treecol { + /* override the * rule */ + -moz-user-select: none; } /* Category List */ #categories { + max-height: 100vh; + background-color: #A09090; -/* -moz-border-end: 1px solid #FF9F00; */ - padding-top: 39px; + padding-top: 4em; margin: 0; border-radius: 1em 0 0 0; + border: none; +} + +#categories > scrollbox { + overflow-x: hidden !important; } .category { background-color: #000000; color: #FFCF00; -moz-border-end-width: 0; - -moz-padding-start: 14px; + -moz-padding-start: 15px; -moz-padding-end: 21px; min-height: 40px; + transition: background-color 150ms; } .category:hover { @@ -244,265 +78,199 @@ radio[selected]::before { color: #000000; } +#categories[keyboard-navigation="true"]:-moz-focusring > .category[current] { + border-top: 1px dotted #000000; + border-bottom: 1px dotted #000000; +} + .category-name { line-height: 22px; - font-family: "Clear Sans", sans-serif; font-size: 1.25rem; padding-bottom: 2px; -moz-padding-start: 9px; margin: 0; } +/** + * We want the last category to always have non-0 getBoundingClientRect().bottom + * so we can use the value to figure out the max-height of the list in + * preferences.js, so use collapse instead of display: none; if it's hidden + */ +#categories > .category[hidden="true"] { + display: -moz-box; + visibility: collapse; +} + .category-icon { width: 24px; height: 24px; - list-style-image: url("chrome://browser/skin/preferences/in-content/icons.png"); } #category-general > .category-icon { - -moz-image-region: rect(0, 24px, 24px, 0); + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#general"); } #category-general:hover > .category-icon, #category-general[selected] > .category-icon { - -moz-image-region: rect(24px, 24px, 48px, 0); + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#general-active"); +} + +#category-search > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#search"); +} + +#category-search:hover > .category-icon, +#category-search[selected] > .category-icon { + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#search-active"); } #category-content > .category-icon { - -moz-image-region: rect(0, 48px, 24px, 24px) + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#content"); } #category-content:hover > .category-icon, #category-content[selected] > .category-icon { - -moz-image-region: rect(24px, 48px, 48px, 24px); + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#content-active"); } #category-application > .category-icon { - -moz-image-region: rect(0, 72px, 24px, 48px) + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#applications"); } #category-application:hover > .category-icon, #category-application[selected] > .category-icon { - -moz-image-region: rect(24px, 72px, 48px, 48px); + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#applications-active"); } #category-privacy > .category-icon { - -moz-image-region: rect(0, 96px, 24px, 72px) + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#privacy"); } #category-privacy:hover > .category-icon, #category-privacy[selected] > .category-icon { - -moz-image-region: rect(24px, 96px, 48px, 72px); + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#privacy-active"); } #category-security > .category-icon { - -moz-image-region: rect(0, 120px, 24px, 96px) + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#security"); } #category-security:hover > .category-icon, #category-security[selected] > .category-icon { - -moz-image-region: rect(24px, 120px, 48px, 96px); + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#security-active"); } #category-sync > .category-icon { - -moz-image-region: rect(0, 144px, 24px, 120px); + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#sync"); } #category-sync:hover > .category-icon, #category-sync[selected] > .category-icon { - -moz-image-region: rect(24px, 144px, 48px, 120px); + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#sync-active"); } #category-advanced > .category-icon { - -moz-image-region: rect(0, 168px, 24px, 144px) + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#advanced"); } #category-advanced:hover > .category-icon, #category-advanced[selected] > .category-icon { - -moz-image-region: rect(24px, 168px, 48px, 144px); + list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#advanced-active"); } -/* header */ - -.header { - margin-bottom: 15px; +@media (max-width: 800px) { + .category-name { + display: none; + } } -.header-icon { - width: 40px; - max-height: 40px; - -moz-margin-end: 20px; - list-style-image: url("chrome://browser/skin/preferences/in-content/header.png"); -} +/* header */ -.header-name { - font-size: 2.5rem; - font-weight: normal; - line-height: 40px; - margin: 0; +#header-advanced { + border-bottom: none; + padding-bottom: 0; } -#header-general > .header-icon { - -moz-image-region: rect(0, 40px, 40px, 0); +.indent { + margin-top: 7px; + margin-bottom: 7px; } -#header-content > .header-icon { - -moz-image-region: rect(0, 80px, 40px, 40px); -} +/* General Pane */ -#header-application > .header-icon { - -moz-image-region: rect(0, 120px, 40px, 80px); +#startupTable { + border-collapse: collapse; } -#header-privacy > .header-icon { - -moz-image-region: rect(0, 160px, 40px, 120px); +#startupTable > tr > td { + padding: 0; /* remove the padding from html.css */ } -#header-security > .header-icon { - -moz-image-region: rect(0, 200px, 40px, 160px); +#startupTable > tr:not(:first-child) > td { + padding-top: 0.5em; /* add a spacing between the rows */ } -#header-sync > .header-icon { - -moz-image-region: rect(0, 240px, 40px, 200px); +#startupTable > tr > .label-cell { + text-align: end; + width: 0; /* make the column as small as possible */ } -#header-advanced > .header-icon { - -moz-image-region: rect(0, 280px, 40px, 240px); +#startupTable > tr > .label-cell > label { + white-space: nowrap; } -@media (min-resolution: 2dppx) { - .header-icon { - list-style-image: url("chrome://browser/skin/preferences/in-content/header@2x.png"); - } - - #header-general > .header-icon { - -moz-image-region: rect(0, 80px, 80px, 0); - } - - #header-content > .header-icon { - -moz-image-region: rect(0, 160px, 80px, 80px); - } - - #header-application > .header-icon { - -moz-image-region: rect(0, 240px, 80px, 160px); - } - - #header-privacy > .header-icon { - -moz-image-region: rect(0, 320px, 80px, 240px); - } - - #header-security > .header-icon { - -moz-image-region: rect(0, 400px, 80px, 320px); - } - - #header-sync > .header-icon { - -moz-image-region: rect(0, 480px, 80px, 400px); - } - - #header-advanced > .header-icon { - -moz-image-region: rect(0, 560px, 80px, 480px); - } +#startupTable > tr > .content-cell > menulist, +#startupTable > tr > .content-cell > textbox { + width: calc(100% - 8px); + margin-left: 4px; + margin-right: 4px; } -.indent { - margin-top: 7px; - margin-bottom: 7px; +#startupTable > tr > .homepage-buttons { + display: flex; + flex-wrap: wrap; } -/* General Pane */ -/* -filefield { - -moz-appearance: none; - background-color: transparent; - border: none; - padding: 0; -} - -.fileFieldContentBox { - background-color: transparent; -} - -.fileFieldIcon { - -moz-margin-start: 10px; - -moz-margin-end: 0; -} - -.fileFieldLabel { - -moz-margin-start: -26px; - -moz-padding-start: 36px; +#startupTable > tr > .homepage-buttons > .content-cell-item { + flex-grow: 1; } -*/ - -/* Applications Pane Styles */ -#applications-content { - -moz-margin-start: 60px; - padding: 15px; +#useFirefoxSync { + font-size: 90%; + -moz-margin-end: 8px !important; } -#handlersView { - font-size: 1.25rem; - line-height: 22px; - border: none; /*1px solid #9C9CFF;*/ - margin: 0; - overflow-y: auto; - border-top-left-radius: 0; - border-top-right-radius: 0; +#getStarted { + font-size: 90%; } -#handersView > listheader > treecol { - border-radius: 0; +#isNotDefaultLabel { + font-weight: bold; } -#typeColumn, -#actionColumn { - font-family: "Clear Sans", sans-serif; - line-height: 20px; -/* color: #737980; - height: 36px; - padding: 0 10px; - background-color: #F7F7F7; - border: 1px solid #CCCCCC; - -moz-border-top-colors: none; - -moz-border-right-colors: none; - -moz-border-bottom-colors: none; - -moz-border-left-colors: none; -*/ +/* Content pane */ +#playDRMContentLink { + /* Line up with the buttons in the other grid bits: */ + margin-left: 4px !important; + margin-right: 4px !important; } -#typeColumn:-moz-locale-dir(ltr), -#actionColumn:-moz-locale-dir(rtl) { - border-top-left-radius: 5px; -} +/* Applications Pane Styles */ -#typeColumn:-moz-locale-dir(rtl), -#actionColumn:-moz-locale-dir(ltr) { - border-top-right-radius: 5px; -} -/* -#typeColumn:hover, -#actionColumn:hover { - border-color: #737980; +#applicationsContent { + padding: 15px 0; } -#typeColumn:hover:active, -#actionColumn:hover:active { - padding: 0 10px; - border-color: #0096DC; -} -*/ -#typeColumn > .treecol-sortdirection[sortDirection=ascending], -#actionColumn > .treecol-sortdirection[sortDirection=ascending], -#typeColumn > .treecol-sortdirection[sortDirection=descending], -#actionColumn > .treecol-sortdirection[sortDirection=descending] { +#filter { + -moz-margin-start: 0; } -#typeColumn > .treecol-sortdirection[sortDirection=descending], -#actionColumn > .treecol-sortdirection[sortDirection=descending] { +#handlersView { + height: 25em; } #handlersView > richlistitem { - min-height: 40px !important; + min-height: 36px !important; } .typeIcon { @@ -516,8 +284,7 @@ filefield { } .actionsMenu { - height: 40px; - max-height: 40px; + min-height: 36px; } .actionsMenu > menupopup > menuitem { @@ -528,128 +295,201 @@ filefield { -moz-margin-end: 8px !important; } +/* Collapse the non-active vboxes in decks to use only the height the + active vbox needs */ +#historyPane:not([selectedIndex="1"]) > #historyDontRememberPane, +#historyPane:not([selectedIndex="2"]) > #historyCustomPane, +#weavePrefsDeck:not([selectedIndex="1"]) > #hasAccount, +#weavePrefsDeck:not([selectedIndex="2"]) > #needsUpdate, +#weavePrefsDeck:not([selectedIndex="3"]) > #fxaDeterminingStatus, +#weavePrefsDeck:not([selectedIndex="4"]) > #noFxaAccount, +#weavePrefsDeck:not([selectedIndex="5"]) > #hasFxaAccount, +#fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified, +#fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected { + visibility: collapse; +} + /* XXX This style is for bug 740213 and should be removed once that bug has a solution. */ description > html|a { cursor: pointer; } -/* Content Pane */ - -#defaultFontSize { - min-width: 5.5em; +#noFxaAccount { + /* Overriding the margins from the base preferences.css theme file. + These overrides can be simplified by fixing bug 1027174 */ + margin: 0; } -/* Sync Pane */ - -#syncEnginesList { -/* -moz-appearance: none; - color: #737980; - padding: 10px; - border: 1px solid rgba(23,50,77,0.4); - border-radius: 5px; - background-color: #F1F1F1;*/ +#weavePrefsDeck > vbox > label, +#weavePrefsDeck > vbox > groupbox, +#weavePrefsDeck > vbox > description, +#weavePrefsDeck > vbox > #pairDevice > label, +#weavePrefsDeck > #needsUpdate > hbox > #loginError, +#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-normal) > label, +#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-small) > label { + /* no margin-start for elements at the begin of a line */ + -moz-margin-start: 0; } -/* Advanced Pane */ - #advancedPrefs { padding-bottom: 0; /* no padding needed in inContent prefs */ } -#encryptionPanel { - margin-top: 15px; - -moz-margin-start: 60px; -} - -#offlineAppsList { -/* -moz-appearance: none; - color: #737980; - padding: 2px; - border: 1px solid rgba(23,50,77,0.4); - border-radius: 5px; - background-color: #F1F1F1;*/ +#tabsElement { +/* -moz-margin-end: 4px; / add the 4px end-margin of other elements */ } #telemetryLearnMore, #FHRLearnMore, #crashReporterLearnMore { + /* provide some margin between the links and the label text */ + /* !important is needed to override the rules defined in common.css */ + -moz-margin-start: 20px !important; /* center the links */ margin-top: 8px; margin-bottom: 8px; } -/* === END shared/in-content/preferences.css === */ - -.indent-small { - -moz-margin-start: 10px; +#trackingProtectionImage { + width: 16px; + height: 16px; + list-style-image: url("chrome://browser/skin/bad-content-blocked-16.png"); } @media (min-resolution: 2dppx) { - checkbox:hover::before, - checkbox[checked]::before { + #trackingProtectionImage { + list-style-image: url("chrome://browser/skin/bad-content-blocked-16@2x.png"); } +} - checkbox[checked]::before { - } +#showUpdateHistory { + -moz-margin-start: 0; +} - .category-icon { - list-style-image: url("chrome://browser/skin/preferences/in-content/icons@2x.png"); - } +/** + * Dialog + */ - #category-general > .category-icon { - -moz-image-region: rect(0, 48px, 48px, 0); - } +#dialogOverlay { + background-color: rgba(0,0,0,0.75); + visibility: hidden; +} - #category-general[selected] > .category-icon { - -moz-image-region: rect(48px, 48px, 96px, 0); - } +#dialogBox { + background-color: #000000; + background-clip: content-box; + color: #FF9F00; + /* font-size: 14px; */ + border: 1px solid #9C9CFF; + border-radius: 10px; + display: -moz-box; + margin: 0; + padding-right: 6px; + padding-left: 6px; +} - #category-content > .category-icon { - -moz-image-region: rect(0, 96px, 48px, 48px); - } +#dialogBox[resizable="true"] { + resize: both; + overflow: hidden; + min-height: 20em; + min-width: 66ch; +} - #category-content[selected] > .category-icon { - -moz-image-region: rect(48px, 96px, 96px, 48px); - } +#dialogBox > .groupbox-title { + -moz-margin-start: 0; + -moz-margin-end: 0; +/* padding: 3.5px 0; + background-color: #F1F1F1; */ +} - #category-application > .category-icon { - -moz-image-region: rect(0, 144px, 48px, 96px); - } +#dialogTitle { + text-align: center; +} - #category-application[selected] > .category-icon { - -moz-image-region: rect(48px, 144px, 96px, 96px); - } +.close-icon { + background-color: transparent !important; + border: none; + box-shadow: none; + height: 18px; + padding: 0; + min-width: 18px; +} - #category-privacy > .category-icon { - -moz-image-region: rect(0, 192px, 48px, 144px); - } +#dialogBox > .groupbox-title > caption { + margin: 0; + border-radius: 1000px; + background-color: #A09090; +} - #category-privacy[selected] > .category-icon { - -moz-image-region: rect(48px, 192px, 96px, 144px); - } +#dialogBox > .groupbox-body { + -moz-appearance: none; + padding: 0; +} - #category-security > .category-icon { - -moz-image-region: rect(0, 240px, 48px, 192px); - } +#dialogFrame { + -moz-box-flex: 1; + /* Default dialog dimensions */ + height: 20em; + width: 66ch; +} - #category-security[selected] > .category-icon { - -moz-image-region: rect(48px, 240px, 96px, 192px); - } +.largeDialogContainer.doScroll { + overflow-y: auto; + -moz-box-flex: 1; +} - #category-sync > .category-icon { - -moz-image-region: rect(0, 288px, 48px, 240px); - } +/** + * End Dialog + */ - #category-sync[selected] > .category-icon { - -moz-image-region: rect(48px, 288px, 96px, 240px); - } +/** + * Font dialog menulist fixes + */ + +#defaultFontType, +#serif, +#sans-serif, +#monospace { + min-width: 30ch; +} + +/** + * Sync migration + */ +#sync-migrate-upgrade-description { + /* description elts need a min-width to wrap correctly - bug 630864? */ + min-width: 100px +} + +#sync-migration { + border: 1px solid #9C9CFF; + background-color: #000000; + color: #A09090; + text-shadow: none; + margin: 5px 0 0 0; + animation: fadein 3000ms; +} + +@keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } +} + +/* === END shared/in-content/preferences.css === */ + +caption { +} - #category-advanced > .category-icon { - -moz-image-region: rect(0, 336px, 48px, 288px); +.indent-small { + -moz-margin-start: 10px; +} + +@media (min-resolution: 2dppx) { + checkbox:hover::before, + checkbox[checked]::before { } - #category-advanced[selected] > .category-icon { - -moz-image-region: rect(48px, 336px, 96px, 288px); + checkbox[checked]::before { } }