Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>tags/v25.0.0beta1
@@ -15,6 +15,9 @@ | |||
* @license GNU AGPL version 3 or any later version | |||
* | |||
*/ | |||
@use 'variables'; | |||
@use 'sass:math'; | |||
@import 'functions'; | |||
/* BASE STYLING ------------------------------------------------------------ */ | |||
// no h1 allowed since h1 = logo | |||
@@ -78,9 +81,9 @@ kbd { | |||
/* APP-NAVIGATION ------------------------------------------------------------ */ | |||
/* Navigation: folder like structure */ | |||
#app-navigation:not(.vue) { | |||
width: $navigation-width; | |||
width: variables.$navigation-width; | |||
position: fixed; | |||
top: $header-height; | |||
top: variables.$header-height; | |||
left: 0; | |||
z-index: 500; | |||
overflow-y: auto; | |||
@@ -378,7 +381,7 @@ kbd { | |||
margin: 0; | |||
padding: 0; | |||
background: none; | |||
@include icon-color('triangle-s', 'actions', $color-black, 1, true); | |||
@include icon-color('triangle-s', 'actions', variables.$color-black, 1, true); | |||
background-size: 16px; | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
@@ -394,7 +397,7 @@ kbd { | |||
z-index: 105; // above a, under button | |||
background-color: var(--color-background-hover); | |||
border-radius: 50%; | |||
transition: opacity $animation-quick ease-in-out; | |||
transition: opacity variables.$animation-quick ease-in-out; | |||
} | |||
/* force padding on link no matter if 'a' has an icon class */ | |||
@@ -442,7 +445,7 @@ kbd { | |||
.app-navigation-entry-utils-menu-button { | |||
/* Prevent bg img override if an icon class is set */ | |||
button:not([class^='icon-']):not([class*=' icon-']) { | |||
@include icon-color('more', 'actions', $color-black, 1, true); | |||
@include icon-color('more', 'actions', variables.$color-black, 1, true); | |||
} | |||
&:hover button, | |||
&:focus button { | |||
@@ -530,7 +533,7 @@ kbd { | |||
.app-navigation-entry-deleted { | |||
display: inline-flex; | |||
padding-left: 44px; | |||
transform: translateX(#{$navigation-width}); | |||
transform: translateX(#{variables.$navigation-width}); | |||
.app-navigation-entry-deleted-description { | |||
position: relative; | |||
white-space: nowrap; | |||
@@ -592,7 +595,7 @@ kbd { | |||
position: relative; | |||
display: flex; | |||
// padding is included in height | |||
padding-top: $header-height; | |||
padding-top: variables.$header-height; | |||
min-height: 100%; | |||
} | |||
@@ -601,10 +604,10 @@ kbd { | |||
/** | |||
* !Important. We are defining the minimum requirement we want for flex | |||
* Just before the mobile breakpoint we have $breakpoint-mobile (1024px) - $navigation-width | |||
* Just before the mobile breakpoint we have variables.$breakpoint-mobile (1024px) - variables.$navigation-width | |||
* -> 468px. In that case we want 200px for the list and 268px for the content | |||
*/ | |||
$min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width; | |||
$min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - variables.$list-min-width; | |||
#app-content { | |||
z-index: 1000; | |||
@@ -614,7 +617,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width; | |||
min-height: 100%; | |||
/* margin if navigation element is here */ | |||
#app-navigation:not(.hidden) + & { | |||
margin-left: $navigation-width; | |||
margin-left: variables.$navigation-width; | |||
} | |||
/* no top border for first settings item */ | |||
> .section:first-child { | |||
@@ -648,16 +651,17 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width; | |||
*/ | |||
#app-sidebar { | |||
width: 27vw; | |||
min-width: $sidebar-min-width; | |||
max-width: $sidebar-max-width; | |||
min-width: variables.$sidebar-min-width; | |||
max-width: variables.$sidebar-max-width; | |||
display: block; | |||
@include position('sticky'); | |||
top: $header-height; | |||
position: -webkit-sticky; | |||
position: sticky; | |||
top: variables.$header-height; | |||
right:0; | |||
overflow-y: auto; | |||
overflow-x: hidden; | |||
z-index: 1500; | |||
height: calc(100vh - #{$header-height}); | |||
height: calc(100vh - #{variables.$header-height}); | |||
background: var(--color-main-background); | |||
border-left: 1px solid var(--color-border); | |||
flex-shrink: 0; | |||
@@ -727,6 +731,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width; | |||
width: 100%; | |||
padding: 0; | |||
margin: 0; | |||
background-color: var(--color-main-background); | |||
box-shadow: none; | |||
border: 0; | |||
border-radius: 0; | |||
@@ -867,7 +872,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width; | |||
/* POPOVER MENU ------------------------------------------------------------ */ | |||
$popoveritem-height: 44px; | |||
$popovericon-size: 16px; | |||
$outter-margin: ($popoveritem-height - $popovericon-size) / 2; | |||
$outter-margin: math.div($popoveritem-height - $popovericon-size, 2); | |||
.ie, | |||
.edge { | |||
@@ -1126,19 +1131,20 @@ $outter-margin: ($popoveritem-height - $popovericon-size) / 2; | |||
/* CONTENT LIST ------------------------------------------------------------ */ | |||
.app-content-list { | |||
@include position('sticky'); | |||
top: $header-height; | |||
position: -webkit-sticky; | |||
position: sticky; | |||
top: variables.$header-height; | |||
border-right: 1px solid var(--color-border); | |||
display: flex; | |||
flex-direction: column; | |||
transition: transform 250ms ease-in-out; | |||
min-height: calc(100vh - #{$header-height}); | |||
max-height: calc(100vh - #{$header-height}); | |||
min-height: calc(100vh - #{variables.$header-height}); | |||
max-height: calc(100vh - #{variables.$header-height}); | |||
overflow-y: auto; | |||
overflow-x: hidden; | |||
flex: 1 1 $list-min-width; | |||
min-width: $list-min-width; | |||
max-width: $list-max-width; | |||
flex: 1 1 variables.$list-min-width; | |||
min-width: variables.$list-min-width; | |||
max-width: variables.$list-max-width; | |||
/* Default item */ | |||
.app-content-list-item { |
@@ -1,70 +0,0 @@ | |||
// CSS4 Variables | |||
// Remember, you cannot use scss functions with css4 variables | |||
// All css4 variables must be fixed! Scss is a PRE processor | |||
// css4 variables are processed after scss! | |||
:root { | |||
--color-main-text: #{$color-main-text}; | |||
--color-main-background: #{$color-main-background}; | |||
--color-main-background-translucent: #{$color-main-background-translucent}; | |||
// To use like this: background-image: linear-gradient(0, var(--gradient-main-background)); | |||
--gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%; | |||
--color-background-hover: #{$color-background-hover}; | |||
--color-background-dark: #{$color-background-dark}; | |||
--color-background-darker: #{$color-background-darker}; | |||
--color-placeholder-light: #{$color-placeholder-light}; | |||
--color-placeholder-dark: #{$color-placeholder-dark}; | |||
--color-primary: #{$color-primary}; | |||
--color-primary-hover: #{$color-primary-hover}; | |||
--color-primary-light: #{$color-primary-light}; | |||
--color-primary-light-hover: #{$color-primary-light-hover}; | |||
--color-primary-text: #{$color-primary-text}; | |||
--color-primary-light-text: #{$color-primary-light-text}; | |||
--color-primary-text-dark: #{$color-primary-text-dark}; | |||
--color-primary-element: #{$color-primary-element}; | |||
--color-primary-element-hover: #{$color-primary-element-hover}; | |||
--color-primary-element-light: #{$color-primary-element-light}; | |||
--color-primary-element-lighter: #{$color-primary-element-lighter}; | |||
--color-error: #{$color-error}; | |||
--color-error-hover: #{$color-error-hover}; | |||
--color-warning: #{$color-warning}; | |||
--color-warning-hover: #{$color-warning-hover}; | |||
--color-success: #{$color-success}; | |||
--color-success-hover: #{$color-success-hover}; | |||
--color-text-maxcontrast: #{$color-text-maxcontrast}; | |||
--color-text-light: #{$color-main-text}; | |||
--color-text-lighter: #{$color-text-maxcontrast}; | |||
--image-logo: #{$image-logo}; | |||
--image-login-background: #{$image-login-background}; | |||
--image-logoheader: #{$image-logoheader}; | |||
--image-favicon: #{$image-favicon}; | |||
--color-loading-light: #{$color-loading-light}; | |||
--color-loading-dark: #{$color-loading-dark}; | |||
--color-box-shadow: #{$color-box-shadow}; | |||
--color-border: #{$color-border}; | |||
--color-border-dark: #{$color-border-dark}; | |||
--border-radius: #{$border-radius}; | |||
--border-radius-large: #{$border-radius-large}; | |||
--border-radius-pill: #{$border-radius-pill}; | |||
--font-face: #{$font-face}; | |||
--default-font-size: #{$default-font-size}; | |||
--default-line-height: #{$default-line-height}; | |||
--animation-quick: #{$animation-quick}; | |||
--animation-slow: #{$animation-slow}; | |||
--header-height: #{$header-height}; | |||
} |
@@ -20,21 +20,6 @@ | |||
* | |||
*/ | |||
/** | |||
* Removes the "#" from a color. | |||
* | |||
* @param string $color The color | |||
* @return string The color without # | |||
*/ | |||
@function remove-hash-from-color($color) { | |||
$color: unquote($color); | |||
$index: str-index(inspect($color), '#'); | |||
@if $index { | |||
$color: str-slice(inspect($color), 2); | |||
} | |||
@return $color; | |||
} | |||
/** | |||
* @see core/src/icons.js | |||
*/ | |||
@@ -80,12 +65,3 @@ | |||
$varName: "--icon-#{$icon}-#{$color}"; | |||
background-image: var(#{$varName}); | |||
} | |||
@mixin position($value) { | |||
@if $value == 'sticky' { | |||
position: -webkit-sticky; // Safari support | |||
position: sticky; | |||
} @else { | |||
position: $value; | |||
} | |||
} |
@@ -12,6 +12,7 @@ | |||
* @license GNU AGPL version 3 or any later version | |||
* | |||
*/ | |||
@use 'variables'; | |||
/* prevent ugly selection effect on accidental selection */ | |||
#header, | |||
@@ -48,7 +49,7 @@ | |||
top: 0; | |||
width: 100%; | |||
z-index: 2000; | |||
height: $header-height; | |||
height: variables.$header-height; | |||
background-color: var(--color-primary); | |||
background-image: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%); | |||
box-sizing: border-box; | |||
@@ -78,7 +79,7 @@ | |||
@mixin header-menu-height() { | |||
min-height: calc(44px * 1.5); // show at least 1.5 entries | |||
max-height: calc(100vh - #{$header-height} * 4); | |||
max-height: calc(100vh - #{variables.$header-height} * 4); | |||
} | |||
#header { | |||
@@ -96,7 +97,7 @@ | |||
max-width: 350px; | |||
@include header-menu-height(); | |||
right: 5px; // relative to parent | |||
top: $header-height; | |||
top: variables.$header-height; | |||
margin: 0; | |||
&:not(.popovermenu) { | |||
@@ -229,7 +230,7 @@ | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
width: $header-height; | |||
width: variables.$header-height; | |||
height: 100%; | |||
cursor: pointer; | |||
opacity: 0.6; | |||
@@ -300,9 +301,9 @@ | |||
/* NAVIGATION --------------------------------------------------------------- */ | |||
nav[role='navigation'] { | |||
display: inline-block; | |||
width: $header-height; | |||
height: $header-height; | |||
margin-left: -$header-height; | |||
width: variables.$header-height; | |||
height: variables.$header-height; | |||
margin-left: -#{variables.$header-height}; | |||
position: relative; | |||
} | |||
@@ -424,7 +425,7 @@ nav[role='navigation'] { | |||
/* Apps menu */ | |||
#appmenu { | |||
display: inline-flex; | |||
min-width: $header-height; | |||
min-width: variables.$header-height; | |||
z-index: 2; | |||
li { | |||
@@ -438,8 +439,8 @@ nav[role='navigation'] { | |||
position: relative; | |||
display: flex; | |||
margin: 0; | |||
height: $header-height; | |||
width: $header-height; | |||
height: variables.$header-height; | |||
width: variables.$header-height; | |||
align-items: center; | |||
justify-content: center; | |||
opacity: .6; | |||
@@ -642,13 +643,13 @@ nav[role='navigation'] { | |||
background: var(--color-primary) !important; | |||
&.skip-content { | |||
left: $navigation-width; | |||
left: variables.$navigation-width; | |||
margin-left: 3px; | |||
} | |||
&:focus, | |||
&:active { | |||
top: $header-height; | |||
top: variables.$header-height; | |||
} | |||
} | |||
@@ -26,6 +26,8 @@ | |||
* along with this program. If not, see <http://www.gnu.org/licenses/>. | |||
* | |||
*/ | |||
@use 'variables'; | |||
@import 'functions'; | |||
/* GLOBAL ------------------------------------------------------------------- */ | |||
[class^='icon-'], [class*=' icon-'] { | |||
@@ -117,36 +119,13 @@ audio, canvas, embed, iframe, img, input, object, video { | |||
background-size: 32px !important; | |||
} | |||
.icon-white { | |||
&.icon-shadow { | |||
filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); | |||
} | |||
} | |||
.icon-audio-white { | |||
filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); | |||
} | |||
.icon-audio-off-white { | |||
filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); | |||
} | |||
.icon-fullscreen-white { | |||
filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); | |||
} | |||
.icon-screen-white { | |||
filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); | |||
} | |||
.icon-screen-off-white { | |||
filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); | |||
} | |||
.icon-video-white { | |||
filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); | |||
} | |||
.icon-white.icon-shadow, | |||
.icon-audio-white, | |||
.icon-audio-off-white, | |||
.icon-fullscreen-white, | |||
.icon-screen-white, | |||
.icon-screen-off-white, | |||
.icon-video-white, | |||
.icon-video-off-white { | |||
filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); | |||
} |
@@ -11,6 +11,8 @@ | |||
* @license GNU AGPL version 3 or any later version | |||
* | |||
*/ | |||
@use 'variables'; | |||
@import 'functions'; | |||
/* Specifically override browser styles */ | |||
input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] { | |||
@@ -281,7 +283,7 @@ input { | |||
margin-right: 0; | |||
&:disabled { | |||
cursor: default; | |||
@include icon-color('confirm-fade', 'actions', $color-black, 2, true); | |||
@include icon-color('confirm-fade', 'actions', variables.$color-black, 2, true); | |||
} | |||
} | |||
@@ -330,8 +332,8 @@ select, | |||
/* Radio & Checkboxes */ | |||
$checkbox-radio-size: 14px; | |||
$color-checkbox-radio-disabled: nc-darken($color-main-background, 27%); | |||
$color-checkbox-radio-border: nc-darken($color-main-background, 47%); | |||
$color-checkbox-radio-disabled: nc-darken(variables.$color-main-background, 27%); | |||
$color-checkbox-radio-border: nc-darken(variables.$color-main-background, 47%); | |||
$color-checkbox-radio-white: #fff; | |||
input { |
@@ -1,4 +1,6 @@ | |||
@media only screen and (max-width: $breakpoint-mobile) { | |||
@use 'variables'; | |||
@media only screen and (max-width: variables.$breakpoint-mobile) { | |||
/* position share dropdown */ | |||
#dropdown { | |||
@@ -20,7 +22,7 @@ | |||
/* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/ | |||
#app-navigation { | |||
transform: translateX(-#{$navigation-width}); | |||
transform: translateX(-#{variables.$navigation-width}); | |||
} | |||
.snapjs-left { | |||
#app-navigation { | |||
@@ -64,7 +66,7 @@ | |||
#app-navigation-toggle-back { | |||
position: fixed; | |||
display: inline-block !important; | |||
top: $header-height; | |||
top: variables.$header-height; | |||
left: 0; | |||
width: 44px; | |||
height: 44px; | |||
@@ -117,7 +119,7 @@ | |||
display: none; | |||
} | |||
#body-settings #controls { | |||
min-width: $breakpoint-mobile !important; | |||
min-width: variables.$breakpoint-mobile !important; | |||
} | |||
/* do not show dates in filepicker */ |
@@ -13,6 +13,7 @@ | |||
* @license GNU AGPL version 3 or any later version | |||
* | |||
*/ | |||
@use 'variables'; | |||
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { | |||
margin: 0; | |||
@@ -179,7 +180,8 @@ body { | |||
#controls { | |||
box-sizing: border-box; | |||
@include position('sticky'); | |||
position: -webkit-sticky; | |||
position: sticky; | |||
height: 44px; | |||
padding: 0; | |||
margin: 0; | |||
@@ -190,7 +192,7 @@ body { | |||
-ms-user-select: none; | |||
user-select: none; | |||
display: flex; | |||
top: $header-height; | |||
top: variables.$header-height; | |||
} | |||
/* position controls for apps with app-navigation */ |
@@ -0,0 +1,52 @@ | |||
@use 'variables'; | |||
@import 'functions'; | |||
.toastify.toast { | |||
min-width: 200px; | |||
background: none; | |||
background-color: var(--color-main-background); | |||
color: var(--color-main-text); | |||
box-shadow: 0 0 6px 0 var(--color-box-shadow); | |||
padding: 12px; | |||
padding-right: 34px; | |||
margin-top: 45px; | |||
position: fixed; | |||
z-index: 9000; | |||
border-radius: var(--border-radius); | |||
.toast-close { | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
width: 38px; | |||
opacity: 0.4; | |||
padding: 12px; | |||
@include icon-color('close', 'actions', variables.$color-black, 2, true); | |||
background-position: center; | |||
background-repeat: no-repeat; | |||
text-indent: 200%; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
&:hover, &:focus, &:active { | |||
cursor: pointer; | |||
opacity: 1; | |||
} | |||
} | |||
} | |||
.toastify.toastify-top { | |||
right: 10px; | |||
} | |||
.toast-error { | |||
border-left: 3px solid var(--color-error); | |||
} | |||
.toast-info { | |||
border-left: 3px solid var(--color-primary); | |||
} | |||
.toast-warning { | |||
border-left: 3px solid var(--color-warning); | |||
} | |||
.toast-success { | |||
border-left: 3px solid var(--color-success); | |||
} |
@@ -19,8 +19,7 @@ | |||
* along with this program. If not, see <http://www.gnu.org/licenses/>. | |||
* | |||
*/ | |||
// SCSS darken/lighten function override | |||
// SCSS darken/lighten function override | |||
@function nc-darken($color, $value) { | |||
@return darken($color, $value); | |||
} | |||
@@ -117,3 +116,4 @@ $header-menu-profile-item-height: 66px; | |||
// mobile. Keep in sync with core/js/js.js | |||
$breakpoint-mobile: 1024px; | |||