Commit 3d2d4f33 authored by mgabdev's avatar mgabdev

Removed unused/old scss files

• Removed:
- unused/old scss files
parent 4170e715
// * copied for now from styles/gabsocial/variables.scss
// Going to create a Gab Specific color stack and gracefully remove the existing stack
// We know what colors we want to use for everything in the UI
// The existing color stack is based on propagating color tint variants of a few basic colors
////////// GAB SPECIFIC VARIABLE STACK //////////
// NOTE - will eventually create a systematic approach of setting color variables to easily change instance themes
// STATIC COLORS
$gab-brand-default: #21cf7a;
$gab-alert-red: #cc6643;
$gab-secondary-text: #999;
$gab-text-highlight: $gab-brand-default;
$gab-small-cta-primary: #607CF5;
// THEME COLORS
// default theme (dark)
$gab-background-base: #333;
$gab-background-container: #222;
$gab-placeholder-accent: #666;
// light theme
$gab-background-base-light: #f2f3f6;
$gab-background-container-light: #fff;
$gab-default-text-light: #6c6c6c;
////////// EXISTING VARIABLE STACK (with modifications) //////////
// Commonly used web colors
// We certainly don't need variables for white and black.
// you can declare color: white; color: black; or #fff; #000;
$black: #000000; // Black
$white: #ffffff; // White
$success-green: #79bd9a !default; // Padua
$error-red: #df405a !default; // Cerise
$warning-red: #ff5050 !default; // Sunset Orange
$gold-star: #ca8f04 !default; // Dark Goldenrod
// Values from the classic Gab Social UI
$classic-base-color: $gab-background-base;
$classic-primary-color: $gab-background-base;
$classic-secondary-color: $gab-placeholder-accent;
$classic-highlight-color: $gab-text-highlight;
// Variables for defaults in UI
$base-shadow-color: $black !default;
$base-overlay-background: $black !default;
$base-border-color: $white !default;
$simple-background-color: $white !default;
$valid-value-color: $success-green !default;
$error-value-color: $error-red !default;
// Tell UI to use selected colors
$ui-base-color: $classic-base-color !default; // Darkest
$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
$ui-primary-color: $classic-primary-color !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest
$ui-highlight-color: $classic-highlight-color !default;
// Variables for texts
$primary-text-color: $white !default;
$darker-text-color: $gab-secondary-text !default;
$dark-text-color: $ui-base-lighter-color !default;
$secondary-text-color: $ui-secondary-color !default;
$highlight-text-color: $ui-highlight-color !default;
$action-button-color: $ui-base-lighter-color !default;
// For texts on inverted backgrounds
$inverted-text-color: $ui-base-color !default;
$lighter-text-color: $ui-base-lighter-color !default;
$light-text-color: $ui-primary-color !default;
\ No newline at end of file
This diff is collapsed.
$black-emojis: '8ball' 'ant' 'back' 'black_circle' 'black_heart' 'black_large_square' 'black_medium_small_square' 'black_medium_square' 'black_nib' 'black_small_square' 'bomb' 'bowling' 'bust_in_silhouette' 'busts_in_silhouette' 'camera' 'camera_with_flash' 'clubs' 'copyright' 'curly_loop' 'currency_exchange' 'dark_sunglasses' 'eight_pointed_black_star' 'electric_plug' 'end' 'female-guard' 'film_projector' 'fried_egg' 'gorilla' 'guardsman' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'hocho' 'hole' 'joystick' 'kaaba' 'lower_left_ballpoint_pen' 'lower_left_fountain_pen' 'male-guard' 'microphone' 'mortar_board' 'movie_camera' 'musical_score' 'on' 'registered' 'soon' 'spades' 'speaking_head_in_silhouette' 'spider' 'telephone_receiver' 'tm' 'top' 'tophat' 'turkey' 'vhs' 'video_camera' 'video_game' 'water_buffalo' 'waving_black_flag' 'wavy_dash';
%white-emoji-outline {
filter: drop-shadow(1px 1px 0 $white) drop-shadow(-1px 1px 0 $white) drop-shadow(1px -1px 0 $white) drop-shadow(-1px -1px 0 $white);
transform: scale(.71);
}
.emojione {
@each $emoji in $black-emojis {
&[title=':#{$emoji}:'] {
@extend %white-emoji-outline;
}
}
}
.card {
&>a {
display: block;
text-decoration: none;
color: inherit;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
@media screen and (max-width: $no-gap-breakpoint) {
box-shadow: none;
}
&:hover,
&:active,
&:focus {
.card__bar {
background: lighten($ui-base-color, 8%);
}
}
}
&__img {
height: 130px;
position: relative;
background: darken($ui-base-color, 12%);
border-radius: 4px 4px 0 0;
img {
display: block;
margin: 0;
object-fit: cover;
border-radius: 4px 4px 0 0;
@include size(100%);
}
@include breakpoint(sm) {
height: 200px;
}
@media screen and (max-width: $no-gap-breakpoint) {
display: none;
}
}
&__bar {
position: relative;
padding: 15px;
background: lighten($ui-base-color, 4%);
border-radius: 0 0 4px 4px;
@include flex(flex-start, center);
@media screen and (max-width: $no-gap-breakpoint) {
border-radius: 0;
}
.avatar {
flex: 0 0 auto;
padding-top: 2px;
@include size(48px);
img {
display: block;
margin: 0;
border-radius: 4px;
background: darken($ui-base-color, 8%);
object-fit: cover;
@include size(100%);
}
}
.display-name {
margin-left: 15px;
text-align: left;
strong {
color: $primary-text-color;
@include text-overflow;
@include text-sizing(15px, 500);
}
span {
display: block;
color: $gab-secondary-text;
@include text-overflow;
@include text-sizing(14px, 400);
}
}
}
}
.pagination {
padding: 30px 0;
text-align: center;
overflow: hidden;
a,
.current,
.newer,
.older,
.page,
.gap {
color: $primary-text-color;
display: inline-block;
padding: 6px 10px;
text-decoration: none;
@include text-sizing(14px, 500);
}
.current {
background: $simple-background-color;
border-radius: 100px;
color: $inverted-text-color;
cursor: default;
margin: 0 10px;
}
.gap {
cursor: default;
}
.older,
.newer {
text-transform: uppercase;
color: $secondary-text-color;
}
.older {
float: left;
padding-left: 0;
.fa {
display: inline-block;
margin-right: 5px;
}
}
.newer {
float: right;
padding-right: 0;
.fa {
display: inline-block;
margin-left: 5px;
}
}
.disabled {
cursor: default;
color: lighten($inverted-text-color, 10%);
}
@media screen and (max-width: 700px) {
padding: 30px 20px;
.page {
display: none;
}
.newer,
.older {
display: inline-block;
}
}
}
.nothing-here {
background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
color: $gab-secondary-text;
cursor: default;
border-radius: 4px;
padding: 20px;
min-height: 30vh;
@include flex(center, center);
@include text-sizing(14px, 500, 1, center);
&--under-tabs {
border-radius: 0 0 4px 4px;
}
&--flexible {
box-sizing: border-box;
min-height: 100%;
}
}
.account-role {
display: inline-block;
padding: 4px 6px;
cursor: default;
color: $ui-secondary-color;
background-color: rgba($ui-secondary-color, 0.1);
@include text-sizing(12px, 500, 12px);
@include border-design(rgba($ui-secondary-color, 0.5), 1px, 3px);
&.moderator {
color: $success-green;
background-color: rgba($success-green, 0.1);
border-color: rgba($success-green, 0.5);
}
&.admin {
color: lighten($error-red, 12%);
background-color: rgba(lighten($error-red, 12%), 0.1);
border-color: rgba(lighten($error-red, 12%), 0.5);
}
}
.account__header__fields {
padding: 0;
margin: 15px -15px -15px;
border: 0 none;
border-top: 1px solid lighten($ui-base-color, 12%);
border-bottom: 1px solid lighten($ui-base-color, 12%);
@include text-sizing(14px, 400, 20px);
dl {
display: flex;
border-bottom: 1px solid lighten($ui-base-color, 12%);
}
dt,
dd {
box-sizing: border-box;
max-height: 48px;
@include text-overflow(nowrap);
@include text-sizing(14px, 400, 1, center);
}
dt {
font-weight: 500;
width: 120px;
flex: 0 0 auto;
color: $secondary-text-color;
background: rgba(darken($ui-base-color, 8%), 0.5);
}
dd {
flex: 1 1 auto;
color: $darker-text-color;
}
a {
color: $highlight-text-color;
text-decoration: none;
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
}
.verified {
border: 1px solid rgba($valid-value-color, 0.5);
background: rgba($valid-value-color, 0.25);
a {
color: $valid-value-color;
font-weight: 500;
}
&__mark {
color: $valid-value-color;
}
}
dl:last-child {
border-bottom: 0;
}
}
.directory__tag .trending-item__uses {
width: auto;
}
.pending-account {
&__header {
color: $darker-text-color;
a {
color: $ui-secondary-color;
text-decoration: none;
&:hover,
&:active,
&:focus {
text-decoration: underline;
}
}
strong {
color: $primary-text-color;
font-weight: 700;
}
}
&__body {
margin-top: 10px;
}
}
\ No newline at end of file
This diff is collapsed.
@function hex-color($color) {
@if type-of($color)=='color' {
$color: str-slice(ie-hex-str($color), 4);
}
@return '%23'+unquote($color)
}
html {
@include font-roboto();
@include font-weight(normal);
font-size: 62.5%;
text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
font-size: 16px;
line-height: 19px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizelegibility;
font-feature-settings: "kern";
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
color: white;
background: $gab-background-base;
&.theme-gabsocial-light {
color: $gab-default-text-light;
background: $gab-background-base-light;
}
&.system-font {
// system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
// -apple-system => Safari <11 specific
// BlinkMacSystemFont => Chrome <56 on macOS specific
// Segoe UI => Windows 7/8/10
// Oxygen => KDE
// Ubuntu => Unity/Ubuntu
// Cantarell => GNOME
// Fira Sans => Firefox OS
// Droid Sans => Older Androids (<4.0)
// Helvetica Neue => Older macOS <10.11
// $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", $font-sans-serif, sans-serif;
}
&.app-body {
position: absolute;
width: 100%;
padding: 0;
overflow: hidden;
overflow-y: scroll;
&.with-modals--active {
overflow-y: hidden;
}
}
&.lighter {
background: $ui-base-color;
}
&.with-modals {
overflow-x: hidden;
overflow-y: scroll;
&--active {
overflow-y: hidden;
margin-right: 13px;
}
}
&.player {
text-align: center;
}
&.embed {
background: lighten($ui-base-color, 4%);
margin: 0;
padding-bottom: 0;
.container {
position: absolute;
overflow: hidden;
@include size(100%);
}
}
&.admin {
background: darken($ui-base-color, 4%);
position: fixed;
padding: 0;
@include size(100%);
}
&.error {
position: absolute;
text-align: center;
color: $darker-text-color;
background: $ui-base-color;
padding: 0;
@include flex(center, center);
@include size(100%);
.dialog {
vertical-align: middle;
margin: 20px;
&__illustration {
img {
display: block;
max-width: 470px;
margin-top: -120px;
@include size(100%, auto);
}
}
h1 {
@include text-sizing(20px, 400, 28px);
}
}
}
}
button {
font-family: inherit;
cursor: pointer;
&:focus {
outline: none;
}
}
.app-holder {
&,
&>div {
outline: 0 !important;
@include flex(center, start);
@include size(100%);
}
}
\ No newline at end of file
.app-body {
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.invisible {
font-size: 0 !important;
line-height: 0 !important;
display: inline-block;
position: absolute;
@include size(0);
img,
svg {
margin: 0 !important;
border: 0 !important;
padding: 0 !important;
@include size(0 !important);
}
}
.ellipsis::after {
content: "…";
}
.focusable {
&:focus {
outline: 0;
background: lighten($ui-base-color, 4%);
.status.status-direct {
background: lighten($ui-base-color, 12%);
&.muted {
background: transparent;
}
}
.detailed-status,
.detailed-status-action-bar {
background: lighten($ui-base-color, 8%);
}
}
}
.status__display-name,
.status__relative-time {
text-decoration: none;
}
.muted {
.emojione {
opacity: 0.5;
}
}
.status__display-name {
&:hover strong {
text-decoration: underline;
}
}
.muted {
.status__content p,
.status__content a {
color: $dark-text-color;
}
.status__display-name strong {
color: $dark-text-color;
}
.status__avatar {
opacity: 0.5;
}
a.status__content__spoiler-link {
background: $ui-base-lighter-color;
color: $inverted-text-color;
&:hover {
background: lighten($ui-base-lighter-color, 7%);
text-decoration: none;
}
}
}
.status__relative-time {
&:hover {
text-decoration: underline;
}
}
.emoji-mart-emoji {
span {
background-repeat: no-repeat;
}
}
.dropdown--active .emoji-button img {
opacity: 1;
filter: none;
}
.loading-bar {
background-color: $highlight-text-color;
height: 3px;
position: absolute;
top: 0;
left: 0;
}
.detailed,
.fullscreen {
.video-player__volume__current,