From 43f8c66801b6c42f0a463917e8ea4f17813af18c Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 11 Oct 2022 14:57:33 +1100 Subject: [PATCH] fix: more sass cleanup --- stylesheets/_global.scss | 120 +------------------------------- stylesheets/_mixins.scss | 25 ------- stylesheets/_modal.scss | 4 +- stylesheets/_session_theme.scss | 1 - stylesheets/_variables.scss | 9 --- stylesheets/manifest.scss | 3 +- ts/themes/SessionTheme.tsx | 1 + 7 files changed, 7 insertions(+), 156 deletions(-) delete mode 100644 stylesheets/_variables.scss diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index fcc3e6be2..3dc56d7df 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -4,7 +4,8 @@ html { height: 100%; - background-color: white; + // Default theme is Classic Dark + background-color: black; } body { @@ -40,15 +41,6 @@ audio { max-width: 100%; } -.clearfix:before, -.clearfix:after { - display: table; - content: ' '; -} -.clearfix:after { - clear: both; -} - .hide { display: none; } @@ -67,118 +59,12 @@ button { } } } -button.grey { - border-radius: $border-radius; - border: solid 1px var(--color-light-gray-color); - cursor: pointer; - margin: 1em auto; - padding: 1em; - font-family: inherit; - color: var(--color-gray-color); - background: var(--color-lightest-gray-color); - box-shadow: 0 0 10px -5px rgba(var(--color-gray-color-rgb), 0.5); - - &:hover { - box-shadow: 0 0 10px -3px rgba(var(--color-gray-color-rgb), 0.7); - } - - &[disabled='disabled'] { - &, - &:hover { - opacity: 0.5; - box-shadow: none; - cursor: default; - } - } -} a { cursor: pointer; user-select: text; } -.file-input { - position: relative; - .choose-file { - cursor: pointer; - } - - input[type='file'] { - // Must be displayed in order to programmatically - // insert file paths) - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - cursor: pointer; - z-index: -100; - } -} - -.banner { - z-index: 100; - - // what's the right color? - background-color: var(--color-light-blue-color); - color: black; - box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); - - position: absolute; - top: 25px; - right: 30px; - left: 30px; - - padding: 5px 25px 5px 10px; - - text-align: center; - border-radius: 10px; - - cursor: pointer; - - .warning { - width: 18px; - height: 18px; - display: inline-block; - vertical-align: text-bottom; - @include color-svg('../images/warning.svg', black); - } - - .dismiss { - position: absolute; - right: 3px; - top: 3px; - - height: 23px; - width: 23px; - @include color-svg('../images/x.svg', black); - } -} - -$loading-height: 16px; - -.loading { - position: relative; - &::before { - display: block; - margin: 0px auto; - content: ' '; - height: $loading-height; - width: $loading-height; - border-radius: 2 * $loading-height; - border: solid 3px; - border-color: var(--color-light-blue-color) var(--color-light-blue-color) - var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important; - animation: rotate 1s linear infinite; - } - - @keyframes rotate { - to { - transform: rotate(360deg); - } - } -} - @keyframes loading { 50% { transform: scale(1); @@ -199,7 +85,7 @@ $loading-height: 16px; display: flex; align-items: center; user-select: none; - // force this to black, to stay consistent with the password prompt being in dark mode too. + // Default theme is Classic Dark so we force this for the password prompt background-color: black; .content { diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss index f47a758e0..e58cdb70a 100644 --- a/stylesheets/_mixins.scss +++ b/stylesheets/_mixins.scss @@ -1,30 +1,5 @@ -@mixin button-reset { - background: none; - color: inherit; - border: none; - padding: 0; - font: inherit; - cursor: pointer; - outline: inherit; -} - @mixin color-svg($svg, $color) { -webkit-mask: url($svg) no-repeat center; -webkit-mask-size: 100%; background-color: $color; } - -@mixin header-icon-white($svg) { - @include color-svg($svg, rgba(255, 255, 255, 0.8)); - &:focus, - &:hover { - @include color-svg($svg, white); - } -} -@mixin header-icon-black($svg) { - @include color-svg($svg, rgba(0, 0, 0, 0.5)); - &:focus, - &:hover { - @include color-svg($svg, black); - } -} diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss index 9e3df3e82..1fcc0ef5e 100644 --- a/stylesheets/_modal.scss +++ b/stylesheets/_modal.scss @@ -15,7 +15,7 @@ margin: 100px auto; padding: 1em; background-color: var(--modal-background-content-color); - border-radius: $border-radius; + border-radius: var(--border-radius); overflow: auto; box-shadow: var(--modal-drop-shadow); } @@ -101,7 +101,7 @@ min-width: 60%; padding: 1em; background: var(--modal-background-content-color); - border-radius: $border-radius; + border-radius: var(--border-radius); overflow: auto; box-shadow: 0px 0px 15px 0px var(--modal-background-color); } diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index 1bc8d3aaf..15c5c65a7 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -87,7 +87,6 @@ @include fontAccentBold(); } -// TODO Theming - Confirm this works h1 { @include session-h-title; color: var(--text-secondary-color); diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss deleted file mode 100644 index 0f75af332..000000000 --- a/stylesheets/_variables.scss +++ /dev/null @@ -1,9 +0,0 @@ -// A few layout variables used cross-file - -$header-height: 55px; -$button-height: 24px; - -$border-radius: 5px; - -$font-size: 14px; -$font-size-small: calc(13 / 14) + em; diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index e660524f3..14fcfa59a 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -7,9 +7,8 @@ @import '../node_modules/sanitize.css/forms.css'; @import '../node_modules/sanitize.css/typography.css'; -// Global Settings, Variables, and Mixins +// Global Settings and Mixins @import 'session_constants'; -@import 'variables'; @import 'mixins'; @import 'global'; diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 4e99faa18..03ab0bc63 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -70,6 +70,7 @@ export const SessionGlobalStyles = createGlobalStyle` --padding-message-content: 7px 13px; --padding-link-preview: -7px -13px 7px -13px; // bottom has positive value because a link preview has always a body below --border-radius-message-box: 16px; + --border-radius: 5px; /* SIZES */ --main-view-header-height: 63px;