random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progress

Browse Source
This commit is contained in:
mgabdev
2020-01-24 16:18:17 -05:00
parent 3af35f4840
commit a2b5d72e08
40 changed files with 539 additions and 873 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
app/javascript/styles/gabsocial/about.scss
View File

@@ -632,66 +632,6 @@ $small-breakpoint: 960px;
border-radius: 0;
}
.hero-widget {
@include vertical-margin(30px, 0);
h4 {
padding: 10px;
text-transform: uppercase;
color: $darker-text-color;
@include text-sizing(13px, 700);
}
&__text {
border-radius: 0;
padding-bottom: 0;
}
&__footer {
background: $ui-base-color;
padding: 10px;
border-radius: 0 0 4px 4px;
display: flex;
&__column {
flex: 1 1 50%;
}
}
.account {
padding: 10px 0;
border-bottom: 0;
.account__display-name {
display: flex;
align-items: center;
}
.account__avatar {
background-size: 44px 44px;
@include size(44px);
}
}
&__counter {
padding: 10px;
strong {
font-family: $font-display, sans-serif;
display: block;
@include text-sizing(15px, 700);
}
span {
font-size: 14px;
color: $darker-text-color;
}
}
}
.simple_form .user_agreement .label_input > label {
font-weight: 400;
color: $darker-text-color;
@@ -724,13 +664,6 @@ $small-breakpoint: 960px;
order: 2;
flex: 0 0 auto;
}
.hero-widget {
order: 1;
flex: 0 0 auto;
@include vertical-margin(0, 10px);
}
}
&__column-registration {
@@ -745,19 +678,6 @@ $small-breakpoint: 960px;
@media screen and (max-width: $no-gap-breakpoint) {
grid-gap: 0;
.hero-widget {
display: block;
margin-bottom: 0;
box-shadow: none;
&__img,
&__img img,
&__footer {
border-radius: 0;
}
}
.hero-widget,
.box-widget,
.directory__tag {
border-bottom: 1px solid lighten($ui-base-color, 8%);

1
app/javascript/styles/gabsocial/basics.scss
View File

@@ -139,7 +139,6 @@ button {
}
.app-holder {
&,
&>div {
outline: 0 !important;

38
app/javascript/styles/gabsocial/boost.scss
View File

File diff suppressed because one or more lines are too long

95
app/javascript/styles/gabsocial/components.scss
View File

@@ -3,101 +3,6 @@
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.button {
background-color: $ui-highlight-color;
border: 10px none;
border-radius: 4px;
box-sizing: border-box;
color: $primary-text-color;
cursor: pointer;
display: inline-block;
font-family: inherit;
padding: 0 16px;
position: relative;
text-decoration: none;
@include size(auto, 36px);
@include text-overflow(nowrap);
@include text-sizing(14px, 500, 36px, center, 0);
&:active,
&:focus,
&:hover {
background-color: lighten($ui-highlight-color, 10%);
}
&--destructive {
transition: none;
&:active,
&:focus,
&:hover {
background-color: $error-red;
transition: none;
}
}
&:disabled,
&.disabled {
background-color: $ui-primary-color;
cursor: default;
}
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
&.button-alternative {
color: $inverted-text-color;
background: $ui-primary-color;
&:active,
&:focus,
&:hover {
background-color: lighten($ui-primary-color, 4%);
}
}
&.button-alternative-2 {
background: $ui-base-lighter-color;
&:active,
&:focus,
&:hover {
background-color: lighten($ui-base-lighter-color, 4%);
}
}
&.button-secondary {
color: $darker-text-color;
background: transparent;
padding: 3px 15px;
border: 1px solid $ui-primary-color;
&:active,
&:focus,
&:hover {
border-color: lighten($ui-primary-color, 4%);
color: lighten($darker-text-color, 4%);
}
&:disabled {
opacity: 0.5;
}
}
&.button--block {
display: block;
width: 100%;
}
}
.invisible {
font-size: 0 !important;
line-height: 0 !important;

22
app/javascript/styles/gabsocial/components/buttons.scss
View File

@@ -1,22 +0,0 @@
button,
a.button {
&.standard {
// NOTE - will define the larger standard buttons here and apply class where used.
&-small {
height: 20px;
padding: 5px 15px;
border: none;
border-radius: 4px;
text-transform: uppercase;
color: white;
background: $gab-small-cta-primary;
@include text-sizing(11px, 700, 11px);
}
}
}

115
app/javascript/styles/gabsocial/fonts.scss
View File

@@ -1,87 +1,52 @@
// Roboto Regular
@font-face {
font-family: 'Roboto';
font-weight: 400;
font-style: normal;
src: url('../fonts/roboto/roboto-regular-400.eot?#iefix');
src: url('../fonts/roboto/roboto-regular-400.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-regular-400.woff2') format('woff2'),
url('../fonts/roboto/roboto-regular-400.woff') format('woff'),
url('../fonts/roboto/roboto-regular-400.ttf') format('truetype'),
url('../fonts/roboto/roboto-regular-400.svg') format('svg');
}
font-family: 'Roboto';
font-weight: 400;
font-style: normal;
src: url('../fonts/roboto/roboto-regular-400.eot?#iefix');
src: url('../fonts/roboto/roboto-regular-400.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-regular-400.woff2') format('woff2'),
url('../fonts/roboto/roboto-regular-400.woff') format('woff'),
url('../fonts/roboto/roboto-regular-400.ttf') format('truetype'),
url('../fonts/roboto/roboto-regular-400.svg') format('svg');
}
// Roboto Light
@font-face {
font-family: 'Roboto';
font-weight: 300;
font-style: normal;
src: url('../fonts/roboto/roboto-light-300.eot?#iefix');
src: url('../fonts/roboto/roboto-light-300.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-light-300.woff2') format('woff2'),
url('../fonts/roboto/roboto-light-300.woff') format('woff'),
url('../fonts/roboto/roboto-light-300.ttf') format('truetype'),
url('../fonts/roboto/roboto-light-300.svg') format('svg');
}
font-family: 'Roboto';
font-weight: 300;
font-style: normal;
src: url('../fonts/roboto/roboto-light-300.eot?#iefix');
src: url('../fonts/roboto/roboto-light-300.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-light-300.woff2') format('woff2'),
url('../fonts/roboto/roboto-light-300.woff') format('woff'),
url('../fonts/roboto/roboto-light-300.ttf') format('truetype'),
url('../fonts/roboto/roboto-light-300.svg') format('svg');
}
// Roboto Bold
@font-face {
font-family: 'Roboto';
font-weight: 700;
font-style: normal;
src: url('../fonts/roboto/roboto-bold-700.eot?#iefix');
src: url('../fonts/roboto/roboto-bold-700.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-bold-700.woff2') format('woff2'),
url('../fonts/roboto/roboto-bold-700.woff') format('woff'),
url('../fonts/roboto/roboto-bold-700.ttf') format('truetype'),
url('../fonts/roboto/roboto-bold-700.svg') format('svg');
}
font-family: 'Roboto';
font-weight: 700;
font-style: normal;
src: url('../fonts/roboto/roboto-bold-700.eot?#iefix');
src: url('../fonts/roboto/roboto-bold-700.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-bold-700.woff2') format('woff2'),
url('../fonts/roboto/roboto-bold-700.woff') format('woff'),
url('../fonts/roboto/roboto-bold-700.ttf') format('truetype'),
url('../fonts/roboto/roboto-bold-700.svg') format('svg');
}
// Montserrat Extra Bold
// Used for all bold number, scoreboard, count displays
@font-face {
font-family: 'Montserrat';
font-weight: 800;
font-style: normal;
src: url('../fonts/montserrat/montserrat-extra-bold-800.eot?#iefix');
src: url('../fonts/montserrat/montserrat-extra-bold-800.eot?#iefix') format('embedded-opentype'),
url('../fonts/montserrat/montserrat-extra-bold-800.woff2') format('woff2'),
url('../fonts/montserrat/montserrat-extra-bold-800.woff') format('woff'),
url('../fonts/montserrat/montserrat-extra-bold-800.ttf') format('truetype'),
url('../fonts/montserrat/montserrat-extra-bold-800.svg') format('svg');
}
// TYPEOGRAPHY MIXINS
// declare the font family using these shortcuts
@mixin font-roboto() {font-family: 'Roboto', Arial, sans-serif !important;}
@mixin font-montserrat() {font-family: 'Montserrat', Arial, sans-serif !important;}
// Declare font weights as a numerical value in rendered output
// Prevents certain browsers which do not play nice with "light, medium" textual declarations
// Numeical values always work more consistently across browsers
// Each font-weight is linked with the @font-face declaration to the actual font file
@mixin font-weight($weight) {
@if $weight == 'light' {font-weight: 300;}
@if $weight == 'normal' {font-weight: 400;}
@if $weight == 'medium' {font-weight: 500;}
@if $weight == 'bold' {font-weight: 700;}
@if $weight == 'extrabold' {font-weight: 800;}
}
// Use these mixins to define font-size and line-height
// html and body declaration allows developer to pass px value as argument
// Rendered css will default to "rem" and fall back to "px" for unsupported browsers
@mixin font-size($size) {
$rem: ($size / 10);
$px: $size;
font-size: #{$px + "px"};
font-size: #{$rem + "rem"};
}
@mixin line-height($size) {
$rem: ($size / 10);
$px: $size;
line-height: #{$px + "px"};
line-height: #{$rem + "rem"};
}
font-family: 'Montserrat';
font-weight: 800;
font-style: normal;
src: url('../fonts/montserrat/montserrat-extra-bold-800.eot?#iefix');
src: url('../fonts/montserrat/montserrat-extra-bold-800.eot?#iefix') format('embedded-opentype'),
url('../fonts/montserrat/montserrat-extra-bold-800.woff2') format('woff2'),
url('../fonts/montserrat/montserrat-extra-bold-800.woff') format('woff'),
url('../fonts/montserrat/montserrat-extra-bold-800.ttf') format('truetype'),
url('../fonts/montserrat/montserrat-extra-bold-800.svg') format('svg');
}

0
app/javascript/styles/gabsocial/introduction.scss
View File

35
app/javascript/styles/gabsocial/scrollbars.scss
View File

@@ -1,35 +0,0 @@
// A lot of this stuff is temporary for now.
// Content containers are meant to behave much differently than the mastodon default UI
// For now linking default gab colors to replace the base UI colors and formulas
html {scrollbar-color: lighten($gab-background-container, 4%) $gab-background-container;}
::-webkit-scrollbar {
@include size(12px);
}
::-webkit-scrollbar-thumb {
border: none;
background: rgba($gab-placeholder-accent, .5);
@at-root body.theme-gabsocial-light#{&} {background: rgba($gab-background-container-light, .3);}
}
::-webkit-scrollbar-thumb:hover {
background: rgba($gab-placeholder-accent, .75);
@at-root body.theme-gabsocial-light#{&} {background: rgba($gab-background-container-light, .4);}
}
::-webkit-scrollbar-thumb:active {
background: $gab-placeholder-accent;
@at-root body.theme-gabsocial-light#{&} {background: rgba($gab-background-container-light, .5);}
}
::-webkit-scrollbar-track {
border: none;
background: rgba($gab-background-container, .5);
@at-root body.theme-gabsocial-light#{&} {background: rgba($gab-background-base, .3);}
}
::-webkit-scrollbar-track:hover {
background: rgba($gab-background-container, .75);
@at-root body.theme-gabsocial-light#{&} {background: rgba($gab-background-base, .4);}
}
::-webkit-scrollbar-track:active {
background: $gab-background-container;
@at-root body.theme-gabsocial-light#{&} {background: rgba($gab-background-base, .5);}
}
::-webkit-scrollbar-corner {background: transparent;}

224
app/javascript/styles/gabsocial/widgets.scss
View File

@@ -1,105 +1,3 @@
.hero-widget {
margin-bottom: 10px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
&__img {
width: 100%;
position: relative;
overflow: hidden;
border-radius: 4px 4px 0 0;
background: $base-shadow-color;
img {
object-fit: cover;
display: block;
margin: 0;
border-radius: 4px 4px 0 0;
@include size(100%);
}
}
&__text {
background: $ui-base-color;
padding: 20px;
border-radius: 0 0 4px 4px;
color: $darker-text-color;
word-wrap: break-word;
@include text-sizing(15px, 400, 20px);
.emojione {
margin: -3px 0 0;
@include size(20px);
}
p {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
em {
display: inline;
margin: 0;
padding: 0;
background: transparent;
font-family: inherit;
color: lighten($darker-text-color, 10%);
@include text-sizing(inherit, 700, inherit);
}
a {
color: $secondary-text-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
@media screen and (max-width: $no-gap-breakpoint) {
display: none;
}
}
.endorsements-widget {
margin-bottom: 10px;
padding-bottom: 10px;
h4 {
padding: 10px;
text-transform: uppercase;
color: $darker-text-color;
@include text-sizing(13px, 700);
}
.account {
padding: 10px 0;
&:last-child {
border-bottom: 0;
}
.account__display-name {
display: flex;
align-items: center;
}
.account__avatar {
background-size: 44px 44px;
@include size(44px);
}
}
}
.box-widget {
padding: 20px;
border-radius: 4px;
@@ -107,124 +5,6 @@
box-shadow: 0 0 1px 1px rgba($base-shadow-color, 0.2);
}
.contact-widget,
.landing-page__information.contact-widget {
box-sizing: border-box;
padding: 20px;
min-height: 100%;
border-radius: 4px;
background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
}
.contact-widget {
color: $darker-text-color;
word-wrap: break-word;
@include text-sizing(15px, 400, 20px);
strong {
font-weight: 500;
}
p {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
&__mail {
margin-top: 10px;
a {
color: $primary-text-color;
text-decoration: none;
}
}
}
.moved-account-widget {
padding: 15px;
padding-bottom: 20px;
border-radius: 4px;
background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
color: $secondary-text-color;
font-weight: 400;
margin-bottom: 10px;
strong,
a {
font-weight: 500;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
a {
color: inherit;
text-decoration: underline;
&.mention {
text-decoration: none;
span {
text-decoration: none;
}
&:focus,
&:hover,
&:active {
text-decoration: none;
span {
text-decoration: underline;
}
}
}
}
&__message {
margin-bottom: 15px;
.fa {
margin-right: 5px;
color: $darker-text-color;
}
}
&__card {
.detailed-status__display-avatar {
position: relative;
cursor: pointer;
}
.detailed-status__display-name {
margin-bottom: 0;
text-decoration: none;
span {
font-weight: 400;
}
}
}
}
.memoriam-widget {
padding: 20px;
border-radius: 4px;
background: $base-shadow-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
font-size: 14px;
color: $darker-text-color;
margin-bottom: 10px;
}
.page-header {
background: lighten($ui-base-color, 8%);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
@@ -421,11 +201,7 @@
}
}
.moved-account-widget,
.memoriam-widget,
.box-widget,
.contact-widget,
.landing-page__information.contact-widget,
.directory,
.page-header {
@media screen and (max-width: $no-gap-breakpoint) {