mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +07:00
fixed global styles
This commit is contained in:
Fedor Katurov
parent
8f9c61e1f6
commit
f354b4aacc
6 changed files with 113 additions and 205 deletions
|
|
@ -4,8 +4,7 @@ import { Provider } from 'react-redux';
|
|||
import { PersistGate } from 'redux-persist/integration/react';
|
||||
import { configureStore } from '~/redux/store';
|
||||
import App from '~/containers/App';
|
||||
|
||||
require('./styles/main.scss');
|
||||
import '~/styles/main.scss';
|
||||
|
||||
const { store, persistor } = configureStore();
|
||||
|
||||
|
|
|
|||
110
src/styles/_global.scss
Normal file
110
src/styles/_global.scss
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
html {
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: darken($main_bg_color, 12%);
|
||||
min-height: 100vh;
|
||||
background: url('../../src/sprites/noise.png') $main_bg_color;
|
||||
color: $main_text_color;
|
||||
font: $font_16_regular;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
fill: white;
|
||||
stroke: white;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 600px;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
background: url('../../src/sprites/noise_top.png') 0% 0%;
|
||||
background-size: 600px 600px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
|
||||
& > div {
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
.grey {
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.todo, .done {
|
||||
color: #333333;
|
||||
border-radius: 3px;
|
||||
padding: 0 2px;
|
||||
font: $font_14_semibold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.todo {
|
||||
background-color: $red;
|
||||
}
|
||||
|
||||
.done {
|
||||
background-color: $green;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font: $font_24_bold;
|
||||
}
|
||||
|
||||
.username {
|
||||
background: transparentize($color: #000000, $amount: 0.8);
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
color: $wisegreen;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #999999;
|
||||
border: 4px solid $content_bg;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: lighten(#999999, 4%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background: lighten(#999999, 8%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $content_bg;
|
||||
border: 0px none #ffffff;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
|
@ -1,201 +0,0 @@
|
|||
// @import '~raleway-cyrillic/raleway.css';
|
||||
@import "src/styles/variables";
|
||||
|
||||
html {
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: darken($main_bg_color, 12%);
|
||||
min-height: 100vh;
|
||||
// background: url('http://vault48.org/pixmaps/texture.jpg');
|
||||
background: url('../../src/sprites/noise.png') $main_bg_color;
|
||||
color: $main_text_color;
|
||||
font: $font_16_regular;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
// font-size: 16px;
|
||||
fill: white;
|
||||
stroke: white;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 600px;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
// background: url('http://vault48.org/pixmaps/texture_alt.jpg');
|
||||
background: url('../../src/sprites/noise_top.png') 0% 0%;
|
||||
background-size: 600px 600px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
:global(#app) {
|
||||
min-height: 100vh;
|
||||
|
||||
& > div {
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.gap) {
|
||||
height: $gap;
|
||||
}
|
||||
|
||||
:global(.spc) {
|
||||
height: $spc;
|
||||
|
||||
&:global(.double) {
|
||||
height: $spc * 2;
|
||||
}
|
||||
|
||||
&:global(.quadro) {
|
||||
height: $spc * 4;
|
||||
}
|
||||
|
||||
&:global(.sixty) {
|
||||
height: $spc * 6;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.padded) {
|
||||
padding: $gap;
|
||||
}
|
||||
|
||||
:global(.default_container) {
|
||||
width: 100%;
|
||||
max-width: $content_width;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
:global(.content_container) {
|
||||
// background: $content_bg_color;
|
||||
}
|
||||
|
||||
:global(.head_container) {
|
||||
//background: $main_bg_color;
|
||||
}
|
||||
|
||||
:global(.footer) {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
:global(.grey) {
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
:global {
|
||||
.todo, .done {
|
||||
color: #333333;
|
||||
border-radius: 3px;
|
||||
padding: 0 2px;
|
||||
font: $font_14_semibold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.todo {
|
||||
background-color: $red;
|
||||
}
|
||||
|
||||
.done {
|
||||
background-color: $green;
|
||||
}
|
||||
}
|
||||
|
||||
:global(h2) {
|
||||
font: $font_24_bold;
|
||||
}
|
||||
|
||||
:global(.username) {
|
||||
background: transparentize($color: #000000, $amount: 0.8);
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
color: $wisegreen;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #999999;
|
||||
border: 4px solid $content_bg;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: lighten(#999999, 4%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background: lighten(#999999, 8%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $content_bg;
|
||||
border: 0px none #ffffff;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@keyframes fading {
|
||||
0% {
|
||||
opacity: 1;
|
||||
background: red;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
background: blue;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
.fade-enter {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s;
|
||||
|
||||
&-active {
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
&-done {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-exit {
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s;
|
||||
|
||||
&-active {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
&-done {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
@import 'reset.scss';
|
||||
@import 'global.scss';
|
||||
@import '_reset.scss';
|
||||
@import '_global.scss';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue