theming.scss 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. /** Calculate luma as it is also used in OCA\Theming\Util::calculateLuma */
  2. @function luma($c) {
  3. $-local-red: red(rgba($c, 1.0));
  4. $-local-green: green(rgba($c, 1.0));
  5. $-local-blue: blue(rgba($c, 1.0));
  6. @return (0.2126 * $-local-red + 0.7152 * $-local-green + 0.0722 * $-local-blue) / 255;
  7. }
  8. .nc-theming-main-background {
  9. background-color: $color-primary;
  10. }
  11. .nc-theming-main-text {
  12. color: $color-primary-text;
  13. }
  14. .nc-theming-contrast {
  15. color: $color-primary-text;
  16. }
  17. @if (luma($color-primary) > 0.6) {
  18. #appmenu:not(.inverted) svg {
  19. filter: invert(1);
  20. }
  21. #appmenu.inverted svg {
  22. filter: none;
  23. }
  24. .searchbox input[type="search"] {
  25. background: transparent url('../../../core/img/actions/search.svg') no-repeat 6px center;
  26. }
  27. #contactsmenu .icon-contacts {
  28. background-image: url('../../../core/img/places/contacts-dark.svg');
  29. }
  30. #settings .icon-settings-white {
  31. background-image: url('../../../core/img/actions/settings-dark.svg');
  32. }
  33. #appmenu .icon-more-white {
  34. background-image: url('../../../core/img/actions/more.svg');
  35. }
  36. #body-login {
  37. input,
  38. #alternative-logins li a {
  39. border: 1px solid nc-lighten($color-primary-text, 50%);
  40. }
  41. input.primary,
  42. #alternative-logins li a {
  43. background-color: $color-primary;
  44. }
  45. a,
  46. label,
  47. p,
  48. #alternative-logins legend {
  49. color: $color-primary-text !important;
  50. }
  51. input[type='checkbox'].checkbox--white + label:before {
  52. border-color: nc-darken($color-primary-element, 40%) !important;
  53. }
  54. input[type='checkbox'].checkbox--white:not(:disabled):not(:checked) + label:hover:before,
  55. input[type='checkbox'].checkbox--white:focus + label:before {
  56. border-color: nc-darken($color-primary-element, 30%) !important;
  57. }
  58. input[type='checkbox'].checkbox--white:checked + label:before {
  59. border-color: nc-darken($color-primary-element, 30%) !important;
  60. background-image: url('../../../core/img/actions/checkbox-mark.svg');
  61. background-color: nc-darken($color-primary-element, 30%) !important;
  62. }
  63. }
  64. } @else {
  65. #appmenu:not(.inverted) svg {
  66. filter: none;
  67. }
  68. #appmenu.inverted svg {
  69. filter: invert(1);
  70. }
  71. }
  72. /* Colorized svg images */
  73. .icon-file, .icon-filetype-text {
  74. background-image: url(./img/core/filetypes/text.svg?v=#{$theming-cachebuster});
  75. }
  76. .icon-folder, .icon-filetype-folder {
  77. background-image: url(./img/core/filetypes/folder.svg?v=#{$theming-cachebuster});
  78. }
  79. .icon-filetype-folder-drag-accept {
  80. background-image: url(./img/core/filetypes/folder-drag-accept.svg?v=#{$theming-cachebuster}) !important;
  81. }
  82. /* override styles for login screen in guest.css */
  83. @if variable_exists('theming-logo-mime') and $theming-logo-mime != '' {
  84. #theming-preview-logo,
  85. #header .logo {
  86. background-image: url(#{$image-logo});
  87. background-size: contain;
  88. }
  89. #body-login #header .logo {
  90. margin-bottom: 22px;
  91. }
  92. } @else {
  93. #theming-preview-logo {
  94. background-image: url(#{$image-logo});
  95. }
  96. }
  97. @if variable_exists('theming-background-mime') and $theming-background-mime != '' {
  98. #body-login,
  99. #firstrunwizard .firstrunwizard-header,
  100. #theming-preview {
  101. background-image: url(#{$image-login-background});
  102. background-color: $color-primary;
  103. }
  104. } @else {
  105. #theming-preview {
  106. background-image: url(#{$image-login-background});
  107. background-color: $color-primary;
  108. }
  109. }
  110. @if variable_exists('theming-logoheader-mime') and $theming-logoheader-mime != '' {
  111. #theming .advanced-option-logoheader .image-preview,
  112. body:not(#body-login) #header .logo {
  113. background-image: url(#{$image-logoheader});
  114. }
  115. } @else {
  116. #theming .advanced-option-favicon .image-preview {
  117. background-image: none;
  118. }
  119. }
  120. @if variable_exists('theming-favicon-mime') and $theming-favicon-mime != '' {
  121. #theming .advanced-option-favicon .image-preview {
  122. background-image: url(#{$image-favicon});
  123. }
  124. } @else {
  125. #theming .advanced-option-favicon .image-preview {
  126. background-image: none;
  127. }
  128. }
  129. input.primary,
  130. #alternative-logins li a {
  131. background-color: $color-primary-element;
  132. border: 1px solid $color-primary-text;
  133. color: $color-primary-text;
  134. }
  135. @if (luma($color-primary) > 0.6) {
  136. #body-login #submit-wrapper .icon-confirm-white {
  137. background-image: url('../../../core/img/actions/confirm.svg');
  138. }
  139. }
  140. // plain background color for login page
  141. @if $image-login-plain == 'true' {
  142. #body-login, #firstrunwizard .firstrunwizard-header, #theming-preview {
  143. background-image: none !important;
  144. background-color: $color-primary;
  145. }
  146. #body-login {
  147. a, label, p {
  148. color: $color-primary-text !important;
  149. }
  150. }
  151. } @else {
  152. #body-login {
  153. background-color: $color-primary;
  154. }
  155. }
  156. @if ($color-primary == #ffffff) {
  157. /* show grey border below header */
  158. #body-user #header,
  159. #body-settings #header,
  160. #body-public #header {
  161. border-bottom: 1px solid #ebebeb;
  162. }
  163. /* show triangle in header in grey */
  164. #appmenu li a.active:before,
  165. .header-right #settings #expand:before {
  166. border-bottom-color:#ebebeb;
  167. }
  168. /* show border around quota bar in files app */
  169. .app-files #quota .quota-container {
  170. border: 1px solid #ebebeb;
  171. }
  172. }