diff options
Diffstat (limited to 'apps/accessibility/css')
| -rw-r--r-- | apps/accessibility/css/dark.scss | 112 | ||||
| -rw-r--r-- | apps/accessibility/css/fontdyslexic.scss | 18 | ||||
| -rw-r--r-- | apps/accessibility/css/highcontrast.scss | 31 | ||||
| -rw-r--r-- | apps/accessibility/css/highcontrastdark.scss | 25 | ||||
| -rw-r--r-- | apps/accessibility/css/style.scss | 73 |
5 files changed, 0 insertions, 259 deletions
diff --git a/apps/accessibility/css/dark.scss b/apps/accessibility/css/dark.scss deleted file mode 100644 index 6cced2997bc..00000000000 --- a/apps/accessibility/css/dark.scss +++ /dev/null @@ -1,112 +0,0 @@ -// SCSS variables -$color-main-text: #d8d8d8; -$color-main-background: #181818; - -$color-background-hover: lighten($color-main-background, 4%); -$color-background-dark: lighten($color-main-background, 7%); -$color-background-darker: lighten($color-main-background, 14%); - -$color-placeholder-light: lighten($color-main-background, 10%); -$color-placeholder-dark: lighten($color-main-background, 20%); - -$color-text-maxcontrast: darken($color-main-text, 30%); -$color-text-light: darken($color-main-text, 10%); -$color-text-lighter: darken($color-main-text, 20%); - -$color-loading-light: #777; -$color-loading-dark: #ccc; - -$color-box-shadow: transparentize(darken($color-main-background, 70%), 0.5); - -$color-border: lighten($color-main-background, 7%); -$color-border-dark: lighten($color-main-background, 14%); - -$image-logo: url('../../../core/img/logo/logo.svg?v=1'); -$image-logoheader: url('../../../core/img/logo/logo.svg?v=1'); - -#app-navigation > ul > li > a:first-child, -#app-navigation > ul > li > ul > li > a:first-child, -#contactsmenu-menu a, -#expanddiv a, -.activity-section .activity-icon.monochrome { - & > img, - :not(.avatardiv) > img { - filter: invert(100%); - } -} - -#navigation #apps li a, -#body-settings #content-vue.app-settings .app-image-icon, -#body-settings #content-vue.app-settings #app-sidebar #app-details-view h2 { - svg { - filter: invert(100%); - } -} - -// Otherwise icon-more gets inverted via function -#appmenu .icon-more-white { - filter: invert(100%); -} - -// since svg icons are inverted, revert to white for the header -.header-right > * { - >[class^='icon-'] { - filter: invert(100%); - } -} - -.bubble, -.app-navigation-entry-menu, -.popovermenu, -.popover__menu { - li { - > button, - > a, - > .menuitem, > .popover__menuitem { - > img { - filter: invert(100%); - } - } - } -} -.bubble, -.app-navigation-entry-menu, -.popovermenu, -#header .menu { - border: 1px solid var(--color-border); -} - -.popover[x-placement^='top'] .popover__arrow { - border-top-color: var(--color-border); -} -.popover[x-placement^='bottom'] .popover__arrow { - border-bottom-color: var(--color-border); -} -.popover[x-placement^='left'] .popover__arrow { - border-left-color: var(--color-border); -} -.popover[x-placement^='right'] .popover__arrow { - border-right-color: var(--color-border); -} -.popover .popover__inner { - border: 1px solid var(--color-border); -} - -// Prevent slideshow icons from going dark -#slideshow { - [class^='icon-'], [class*=' icon-']{ - filter: invert(100%); - } -} - -input[type=checkbox] { - &.checkbox { - &:checked + label:before { - background-image: url('../../../core/img/actions/checkbox-mark-dark.svg'); - } - - &:indeterminate + label:before { - background-image: url('../../../core/img/actions/checkbox-mixed-dark.svg'); - } - } -} diff --git a/apps/accessibility/css/fontdyslexic.scss b/apps/accessibility/css/fontdyslexic.scss deleted file mode 100644 index 647509bf2dc..00000000000 --- a/apps/accessibility/css/fontdyslexic.scss +++ /dev/null @@ -1,18 +0,0 @@ -@font-face { - font-family: 'OpenDyslexic'; - font-style: normal; - font-weight: 400; - src: url('../fonts/OpenDyslexic-Regular.woff') format('woff'); -} - -@font-face { - font-family: 'OpenDyslexic'; - font-style: normal; - font-weight: 700; - src: url('../fonts/OpenDyslexic-Bold.woff') format('woff'); -} - -$font-face: OpenDyslexic, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, 'Noto Color Emoji', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; - -$image-logo: url('../../../core/img/logo/logo.svg?v=1'); -$image-logoheader: url('../../../core/img/logo/logo.svg?v=1'); diff --git a/apps/accessibility/css/highcontrast.scss b/apps/accessibility/css/highcontrast.scss deleted file mode 100644 index a1b14abec33..00000000000 --- a/apps/accessibility/css/highcontrast.scss +++ /dev/null @@ -1,31 +0,0 @@ -// SCSS variables -$color-main-text: #000; -$color-main-background: #fff; - -$color-background-dark: darken($color-main-background, 30%); -$color-background-darker: darken($color-main-background, 30%); - -$color-placeholder-light: darken($color-main-background, 30%); -$color-placeholder-dark: darken($color-main-background, 45%); - -$color-text-maxcontrast: $color-main-text; -$color-text-light: $color-main-text; -$color-text-lighter: $color-main-text; - -$color-loading-light: #ddd; -$color-loading-dark: #000; - -$color-box-shadow: $color-main-text; - -$color-border: darken($color-main-background, 50%); -$color-border-dark: darken($color-main-background, 50%); - -$image-logo: url('../../../core/img/logo/logo.svg?v=1'); -$image-logoheader: url('../../../core/img/logo/logo.svg?v=1'); - -[class^='icon-'], [class*=' icon-'], -.action, -#appmenu li a, -.menutoggle { - opacity: 1 !important; -} diff --git a/apps/accessibility/css/highcontrastdark.scss b/apps/accessibility/css/highcontrastdark.scss deleted file mode 100644 index c5238dc2433..00000000000 --- a/apps/accessibility/css/highcontrastdark.scss +++ /dev/null @@ -1,25 +0,0 @@ -// SCSS variables -$color-main-text: #fff; -$color-main-background: #000; - -$color-background-dark: lighten($color-main-background, 30%); -$color-background-darker: lighten($color-main-background, 30%); - -$color-text-maxcontrast: $color-main-text; -$color-text-light: $color-main-text; -$color-text-lighter: $color-main-text; - -$color-loading-light: #000; -$color-loading-dark: #ddd; - -$color-box-shadow: $color-main-text; - -$color-border: lighten($color-main-background, 50%); -$color-border-dark: lighten($color-main-background, 50%); - -[class^='icon-'], [class*=' icon-'], -.action, -#appmenu li a, -.menutoggle { - opacity: 1 !important; -} diff --git a/apps/accessibility/css/style.scss b/apps/accessibility/css/style.scss deleted file mode 100644 index 9dd2e428d80..00000000000 --- a/apps/accessibility/css/style.scss +++ /dev/null @@ -1,73 +0,0 @@ -// Rules we could port to the rest of Nextcloud too - -// Proper highlight for links and focus feedback -#accessibility a { - font-weight: bold; - - &:hover, - &:focus { - text-decoration: underline; - } -} - -// Highlight checkbox label in bold for focus feedback -// Drawback: Text width increases a bit -#accessibility .checkbox:focus + label { - font-weight: bold; -} - -// Limit width of settings sections for readability -#accessibility.section p { - max-width: 800px; -} - -// End of rules we could port to rest of Nextcloud - - - -.preview-list { - display: flex; - flex-direction: column; - max-width: 800px; -} - -.preview { - display: flex; - justify-content: flex-start; - margin-top: 3em; - position: relative; - - &, - * { - user-select: none; - } - - .preview-image { - flex-basis: 200px; - flex-shrink: 0; - margin-right: 1em; - background-position: top left; - background-size: cover; - background-repeat: no-repeat; - border-radius: var(--border-radius); - } - - .preview-description { - display: flex; - flex-direction: column; - - label { - padding: 12px 0; - } - } -} - -@media (max-width: ($breakpoint-mobile / 2)) { - .app-settings #accessibility .preview-list .preview { - display: unset; - - .preview-image { - height: 150px; - } - } -} |