Skip to content

Commit

Permalink
[FB] Preferences | Fix design
Browse files Browse the repository at this point in the history
  • Loading branch information
@surapunoyousei
surapunoyousei committed Jul 27, 2024
1 parent cd68722 commit c984bc2
Showing 1 changed file with 12 additions and 302 deletions.
314 changes: 12 additions & 302 deletions browser/components/preferences/preferences-floorp.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,18 @@
--in-content-sidebar-width: 275px !important;
}

@media (prefers-color-scheme: dark) {
:root {
--card-background: #111111 !important;
}
}

@media (prefers-color-scheme: light) {
:root {
--card-background: #edebeb !important;
}
}

#trackingGroup[hidden="true"] {
display: none !important;
}
Expand Down Expand Up @@ -233,35 +245,6 @@
padding-top: 1em;
}

#about-legacy-sub {
display: block !important;
}

#contributeDesc {
padding-bottom: 1em;
}

#floorp-legacy-sub-sub {
color: var(--in-content-deemphasized-text) !important;
margin: 4px 0 10px !important;
line-height: 1.4em !important;
}

#floorp-header {
border-top: solid 0.1px gray;
}

#floorp-legacy-s {
color: var(--in-content-deemphasized-text) !important;
margin: 4px 0 10px !important;
line-height: 1.4em !important;
}

#floorp-legacy-s::after {
content: "\A" !important;
white-space: pre !important;
}

#category-general>.category-icon {
list-style-image: url(chrome://browser/skin/preferences/category-general.svg) !important;
}
Expand Down Expand Up @@ -301,279 +284,6 @@
list-style-image: url(chrome://browser/skin/new-tab.svg) !important;
}


/* Visual Ajustments */

:root {
--in-content-page-background: #f7f7f7 !important;
--in-content-text-color: #262626 !important;
--in-content-page-color: #262626 !important;
--card-background: #fff;
--card-shadow: rgb(0 0 0 / 13%) 0px 1.6px 3.6px, rgb(0 0 0 / 11%) 0px 0px 2.9px !important;
--sidebar-border-color: #bebebe;
--in-content-accent-color: #0078d4 !important;
--category-selected: #0001;
--in-content-link-color: #0078d4 !important;
--section-highlight-background-color: #0078d420 !important;
--search-bgcolor: #fff;
--input-border-color: var(--sidebar-border-color);
--input-border-color-focused: #888;
--checkbox-bgcolor: #f7f7f7;
--checkbox-border-color: #8D8D8D;
--checkbox-hover-border-color: #666;
--checkbox-fill-color: #262626;
--checkbox-checked-bgcolor: #0078D4;
--checkbox-checked-fill-color: #fff;
}

.content-blocking-category.selected {
border-color: #0078d4 !important;
}

.content-blocking-category.expanded:not(.selected) .content-blocking-warning {
background-color: #f7f7f7 !important;
}

@media (prefers-color-scheme: dark) {
:root {
--in-content-page-background: #333 !important;
--in-content-text-color: #fff !important;
--in-content-page-color: #fff !important;
--card-background: #3b3b3b;
--card-shadow: 0px 1.6px 3.6px rgb(0 0 0 / 25%), 0px 0px 2.9px rgb(0 0 0 / 22%) !important;
--sidebar-border-color: #6b6b6b;
--in-content-accent-color: #63ade5 !important;
--category-selected: #fff1;
--in-content-link-color: #63ade5 !important;
--section-highlight-background-color: #63ade520 !important;
--search-bgcolor: #2b2b2b;
--input-border-color-focused: #808080;
--checkbox-bgcolor: #333;
--checkbox-border-color: #7d7d7d;
--checkbox-hover-border-color: #A4A4A4;
--checkbox-fill-color: #fff;
--checkbox-checked-bgcolor: #006CBE;
--checkbox-checked-fill-color: #fff;
}
.content-blocking-category.selected {
border-color: #63ade5 !important;
}
.content-blocking-category.expanded:not(.selected) .content-blocking-warning {
background-color: #333 !important;
}
.dialogBox {
--in-content-page-background: #333333 !important;
}
}


/* Cards For Certain Sections */

#fxaGroup, .sync-group, #searchbarGroup, #homeContentsGroup, #permissionsGroup, #httpsOnlyBox, #applicationsGroup, #oneClickSearchProvidersGroup {
padding: 12px 16px;
background: var(--card-background) !important;
box-shadow: var(--card-shadow) !important;
border-radius: 4px !important;
border: 0 !important;
}

:is(.sync-group, #trackingGroup, #searchbarGroup, #homeContentsGroup, #permissionsGroup, #httpsOnlyBox, #applicationsGroup, #oneClickSearchProvidersGroup) h2 {
margin-top: 2px !important;
}

h1 {
margin: 0 0 16px !important;
font-weight: 600 !important;
font-size: 20px !important;
}

#openChangeProfileImage {
height: 64px !important;
width: 64px !important;
margin: 10px !important;
margin-inline: 6px 20px !important;
}

menulist {
max-width: 400px !important;
}

search-textbox, input[type="text"] {
background-color: transparent !important;
border: 1px solid var(--input-border-color) !important;
transition: all .2s ease-in-out !important;
}

search-textbox:hover, search-textbox[focused], input[type="text"]:focus, input[type="text"]:hover {
--input-border-color: var(--input-border-color-focused) !important;
outline: 0 !important;
}

search-textbox[focused], input[type="text"]:focus {
box-shadow: 0 0 0 1px inset var(--input-border-color) !important;
}

search-textbox {
background-color: var(--search-bgcolor) !important;
padding: 2px 8px !important;
margin: 16px 0 !important;
min-height: 34px !important;
}

#policies-container {
margin: 17px 0 17px 0 !important;
position: relative !important;
z-index: 99 !important;
background-color: var(--in-content-page-background) !important;
}

button, menulist {
background-color: transparent !important;
border: 1px solid var(--input-border-color) !important;
border-radius: 2px !important;
transition: all .2s ease-in-out !important;
}

button:hover, menulist:hover {
border-color: var(--input-border-color-focused) !important;
}

dropmarker {
list-style-image: url(../popup/menu-right.svg) !important;
transform: rotate(90deg) scale(calc(16 / 12)) !important;
margin: 0 4px 0 0 !important;
max-width: 12px !important;
}

.navigation {
border-right: 1px solid var(--sidebar-border-color) !important;
}

.sticky-container {
border-bottom: 1px solid var(--sidebar-border-color) !important;
}

.preferences-text {
font-size: 24px;
font-weight: 600;
position: absolute !important;
min-height: 34px;
top: 16px;
left: 4px;
}

#mainPrefPane {
margin-top: 16px !important;
}

.checkbox-check {
/* Move Checkboxes to Right */
order: 2 !important;
width: 40px !important;
height: 20px !important;
padding: 4px !important;
padding-inline: 0 24px !important;
list-style-image: none !important;
border-radius: 99px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='context-fill'/%3E%3C/svg%3E") !important;
background-position: 4px 4px !important;
background-repeat: no-repeat !important;
background-size: 10px !important;
transition: all 0.1s ease-in-out !important;
-moz-context-properties: fill, fill-opacity !important;
fill: currentColor !important;
background-color: var(--checkbox-bgcolor) !important;
color: var(--checkbox-fill-color) !important;
border: 1px solid var(--checkbox-border-color) !important;
margin: 3px 8px !important;
}

.indent>checkbox>.checkbox-check {
margin-inline-start: 32px !important;
}

.checkbox-check:hover {
border-color: var(--checkbox-hover-border-color) !important;
}

.checkbox-check[checked] {
background-position: 24px 4px !important;
background-color: var(--checkbox-checked-bgcolor) !important;
color: var(--checkbox-checked-fill-color) !important;
border-color: transparent !important;
}

.radio-check {
background-color: var(--checkbox-bgcolor) !important;
border: 1px solid var(--checkbox-border-color) !important;
}

.radio-check:hover {
background-color: var(--checkbox-bgcolor) !important;
border-color: var(--checkbox-hover-border-color) !important;
}

.radio-check[selected] {
background-color: #00b7ff !important;
border-color: transparent !important;
color: var(--checkbox-bgcolor) !important;
}

.radio-check[selected]:hover {
background-color: var(--checkbox-hover-border-color) !important;
}

#categories {
padding-inline: 16px !important;
margin: 16px 0 0 !important;
}

.category {
position: relative !important;
margin: 0 !important;
padding-inline: 12px !important;
}

.sidebar-footer-link, .sidebar-footer-button>.text-link {
margin-inline: 16px !important;
height: 40px !important;
}

.sidebar-footer-icon {
margin: 12px 16px !important;
height: 16px !important;
width: 16px !important;
scale: 1 !important;
translate: 0 !important;
}

.sidebar-footer-list {
margin: 0 !important;
margin-bottom: 16px !important;
}

@media (max-width: 830px) {
:root {
--in-content-sidebar-width: 80px !important;
}
.navigation {
margin-inline-end: 16px !important;
}
}

.category::before {
content: "";
height: calc(100% - 24px) !important;
position: absolute !important;
top: 12px;
left: 0;
border-left: 3px solid transparent !important;
}

.category[selected]::before {
border-color: var(--in-content-accent-color) !important;
}

BSB-header-links {
font-size: 1.25rem;
margin-block-end: 15px;
Expand Down

0 comments on commit c984bc2

Please sign in to comment.