базовый клиент на сайте
This commit is contained in:
Alexey Kasyanchuk
24
src/app.css
Normal file
24
src/app.css
Normal file
@ -0,0 +1,24 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #222;
|
||||
height: 150px;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-intro {
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
19
src/app.js
Normal file
19
src/app.js
Normal file
@ -0,0 +1,19 @@
|
||||
import React, { Component } from 'react';
|
||||
import './app.css';
|
||||
|
||||
var io = require("socket.io-client");
|
||||
window.torrentSocket = io('http://localhost:8099/');
|
||||
|
||||
import RecentTorrents from './recent-torrents'
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="App">
|
||||
<RecentTorrents />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
256
src/css/izi/animations.css
Normal file
256
src/css/izi/animations.css
Normal file
@ -0,0 +1,256 @@
|
||||
.animated {
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.scale0 {
|
||||
transform: scale(0,0);
|
||||
}
|
||||
|
||||
.scale1 {
|
||||
transform: scale(1,1);
|
||||
}
|
||||
|
||||
|
||||
/* - - - - - - - - - - - - - - -
|
||||
|
||||
АНИМАЦИИ
|
||||
|
||||
- - - - - - - - - - - - - - - - */
|
||||
|
||||
.an-zoom-in {
|
||||
animation: zoom-in 0.2s;
|
||||
}
|
||||
|
||||
@keyframes zoom-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.an-show-op {
|
||||
animation: show-op 0.2s;
|
||||
}
|
||||
|
||||
@keyframes show-op {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.an-slide-r {
|
||||
animation: slide-r 0.2s;
|
||||
}
|
||||
|
||||
@keyframes slide-r {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(+50px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.an-slide-l {
|
||||
animation: slide-l 0.2s;
|
||||
}
|
||||
|
||||
@keyframes slide-l {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-50px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.an-slide-t {
|
||||
animation: slide-t 0.2s;
|
||||
}
|
||||
|
||||
@keyframes slide-t {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.an-slide-b {
|
||||
animation: slide-b 0.2s;
|
||||
}
|
||||
|
||||
@keyframes slide-b {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.an-flare-red {
|
||||
animation: flare-red;
|
||||
}
|
||||
|
||||
@keyframes flare-red {
|
||||
0% {
|
||||
box-shadow: 0px 0px 0px 10px rgba(255, 42, 42, 0.0);
|
||||
}
|
||||
30% {
|
||||
box-shadow: 0px 0px 0px 25px rgba(255, 42, 42, 0.2);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0px 0px 0px 50px rgba(255, 42, 42, 0.0);
|
||||
}
|
||||
}
|
||||
|
||||
.an-flare-green {
|
||||
animation: flare-green;
|
||||
}
|
||||
|
||||
@keyframes flare-green {
|
||||
0% {
|
||||
box-shadow: 0px 0px 0px 10px rgba(54, 215, 146, 0.0);
|
||||
}
|
||||
30% {
|
||||
box-shadow: 0px 0px 0px 25px rgba(54, 215, 146, 0.2);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0px 0px 0px 50px rgba(54, 215, 146, 0.0);
|
||||
}
|
||||
}
|
||||
|
||||
.an-flare-glam {
|
||||
animation: flare-glam;
|
||||
}
|
||||
|
||||
@keyframes flare-glam {
|
||||
0% {
|
||||
box-shadow: 0px 0px 0px 10px rgba(210, 95, 210, 0.0);
|
||||
}
|
||||
30% {
|
||||
box-shadow: 0px 0px 0px 25px rgba(210, 95, 210, 0.25);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0px 0px 0px 50px rgba(210, 95, 210, 0.0);
|
||||
}
|
||||
}
|
||||
|
||||
.an-flare-orange {
|
||||
animation: flare-orange;
|
||||
}
|
||||
|
||||
@keyframes flare-orange {
|
||||
0% {
|
||||
box-shadow: 0px 0px 0px 10px rgba(255, 173, 64, 0.0);
|
||||
}
|
||||
30% {
|
||||
box-shadow: 0px 0px 0px 25px rgba(255, 173, 64, 0.25);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0px 0px 0px 50px rgba(255, 173, 64, 0.0);
|
||||
}
|
||||
}
|
||||
|
||||
.an-flare-blue {
|
||||
animation: flare-blue;
|
||||
}
|
||||
|
||||
@keyframes flare-blue {
|
||||
0% {
|
||||
box-shadow: 0px 0px 0px 10px rgba(31,225,227, 0.0);
|
||||
}
|
||||
30% {
|
||||
box-shadow: 0px 0px 0px 25px rgba(31,225,227, 0.25);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0px 0px 0px 50px rgba(31,225,227, 0.0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.an0-25 {
|
||||
animation-duration: 0.25s;
|
||||
}
|
||||
|
||||
.an0-5 {
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.an0-75 {
|
||||
animation-duration: 0.75s;
|
||||
}
|
||||
|
||||
.an1 {
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.an1-5 {
|
||||
animation-duration: 1.5s;
|
||||
}
|
||||
|
||||
.an2 {
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
.an2-5 {
|
||||
animation-duration: 2.5s;
|
||||
}
|
||||
|
||||
.an-linear {
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
.an-infinite {
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/* точечный спиннер */
|
||||
|
||||
.spinner {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spinner > div {
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
margin: 0.25em;
|
||||
background-color: #dedede;
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.spinner .bounce1 {
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.spinner .bounce2 {
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
@keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0);
|
||||
} 40% {
|
||||
transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
334
src/css/izi/components.css
Normal file
334
src/css/izi/components.css
Normal file
@ -0,0 +1,334 @@
|
||||
/* пирог */
|
||||
|
||||
.pie > * {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* ---------------------
|
||||
|
||||
СТРАНИЦЫ
|
||||
|
||||
--------------------- */
|
||||
|
||||
.page.padding {
|
||||
padding: 2.5rem 0.5rem;
|
||||
}
|
||||
|
||||
.page-container.hide > .page-content {
|
||||
transform: translateX(-50px);
|
||||
opacity: 0;
|
||||
}
|
||||
.page-container.show > .page-content {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
.page-container.close > .page-content {
|
||||
transform: translateX(+50px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* крылья */
|
||||
|
||||
.wings {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wings::before,
|
||||
.wings::after {
|
||||
content: "";
|
||||
flex-basis: 100%;
|
||||
height: 1px;
|
||||
background: rgba(40, 40, 40, 0.1);
|
||||
}
|
||||
|
||||
/* текст */
|
||||
|
||||
.p {
|
||||
max-width: 17.5em;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* всплывающие подсказки */
|
||||
|
||||
[data-title] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-title]:hover:active::before,
|
||||
[data-title]:hover:active::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-title]::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-color: transparent #1D7373 transparent transparent;
|
||||
border-width: 10px 10px 10px 0;
|
||||
right: -12.5px;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
animation: show-op 0.2s;
|
||||
-webkit-animation: show-op 0.2s;
|
||||
}
|
||||
|
||||
[data-title]::after {
|
||||
content: attr(data-title);
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
width: 100px;
|
||||
right: -107.5px;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
border-radius: 1px;
|
||||
text-align: center;
|
||||
line-height: normal;
|
||||
font-size: 0.7rem;
|
||||
color: #fff;
|
||||
background: #1D7373;
|
||||
padding: 5px;
|
||||
animation: show-op 0.2s;
|
||||
-webkit-animation: show-op 0.2s;
|
||||
}
|
||||
|
||||
[data-title]:hover::after,
|
||||
[data-title]:hover::before {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#float-buttons {
|
||||
position: fixed;
|
||||
bottom: 0.85rem;
|
||||
right: 0.85rem;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
#float-buttons > * {
|
||||
display: flex;
|
||||
font-size: 1.15em;
|
||||
flex-shrink: 0;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
#float-buttons.hide > * {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
#notifier {
|
||||
position: fixed;
|
||||
transition: 0.2s;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
#notifier.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@media only screen and (orientation: landscape) and (min-width: 1100px) {
|
||||
#notifier {
|
||||
padding: 0.5em;
|
||||
width: 25em;
|
||||
}
|
||||
}
|
||||
|
||||
/* лодер */
|
||||
|
||||
.loader {
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: #ddd;
|
||||
}
|
||||
.loader:before{
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: -200px;
|
||||
width: 200px;
|
||||
height: 4px;
|
||||
background-color: #2980b9;
|
||||
animation: loading 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
from {left: -200px; width: 30%;}
|
||||
50% {width: 30%;}
|
||||
70% {width: 70%;}
|
||||
80% { left: 50%;}
|
||||
95% {left: 120%;}
|
||||
to {left: 100%;}
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
/* страничный лодер */
|
||||
|
||||
#fountainG{
|
||||
position:relative;
|
||||
width:234px;
|
||||
height:22px;
|
||||
}
|
||||
|
||||
.fountainG{
|
||||
position:absolute;
|
||||
top:0;
|
||||
background-color:rgb(168,168,168);
|
||||
width:22px;
|
||||
height:22px;
|
||||
animation-name:bounce_fountainG;
|
||||
animation-duration:1.5s;
|
||||
animation-iteration-count:infinite;
|
||||
animation-direction:normal;
|
||||
transform:scale(.3);
|
||||
border-radius:15px;
|
||||
}
|
||||
|
||||
#fountainG_1{
|
||||
left:0;
|
||||
animation-delay:0.6s;
|
||||
}
|
||||
|
||||
#fountainG_2{
|
||||
left:29px;
|
||||
animation-delay:0.75s;
|
||||
}
|
||||
|
||||
#fountainG_3{
|
||||
left:58px;
|
||||
animation-delay:0.9s;
|
||||
}
|
||||
|
||||
#fountainG_4{
|
||||
left:88px;
|
||||
animation-delay:1.05s;
|
||||
}
|
||||
|
||||
#fountainG_5{
|
||||
left:117px;
|
||||
animation-delay:1.2s;
|
||||
}
|
||||
|
||||
#fountainG_6{
|
||||
left:146px;
|
||||
animation-delay:1.35s;
|
||||
}
|
||||
|
||||
#fountainG_7{
|
||||
left:175px;
|
||||
animation-delay:1.5s;
|
||||
}
|
||||
|
||||
#fountainG_8{
|
||||
left:205px;
|
||||
animation-delay:1.64s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes bounce_fountainG{
|
||||
0%{
|
||||
transform:scale(1);
|
||||
background-color:rgb(97,97,97);
|
||||
}
|
||||
|
||||
100%{
|
||||
transform:scale(.3);
|
||||
background-color:rgb(255,255,255);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.chat {
|
||||
padding-right: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat .messageBox {
|
||||
overflow-y: auto;
|
||||
overflow-x: none;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.chat .message {
|
||||
padding: 2px 0px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.chat .message img {
|
||||
max-height: 42px;
|
||||
max-width: 42px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.chat .message span {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.chat .message .messageText {
|
||||
margin-left: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat .messageSend {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* слайдер */
|
||||
|
||||
.main-slider .sponsors {
|
||||
overflow-x: auto;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.main-slider .sponsors img {
|
||||
height: 5.5em;
|
||||
padding: 0 0.7em;
|
||||
}
|
||||
|
||||
.about-sponsors .sponsors {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.about-sponsors .sponsors img {
|
||||
height: 7em;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.about-socials .socials {
|
||||
padding: 1em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.about-socials .socials svg {
|
||||
fill: black;
|
||||
height: 3em;
|
||||
padding: 0 1em;
|
||||
}
|
||||
178
src/css/izi/flex.css
Normal file
178
src/css/izi/flex.css
Normal file
@ -0,0 +1,178 @@
|
||||
/* FLEX */
|
||||
|
||||
.row, .column {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.row.reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.column.reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.row.center,
|
||||
.column.inline {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.column.center,
|
||||
.row.inline {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row.stretch,
|
||||
.column.stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.row.top,
|
||||
.column.left {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.row.bottom,
|
||||
.colum.right {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.row > .self-top {
|
||||
align-self: flex-end;
|
||||
}
|
||||
.row > .self-bottom {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.column > .self-right {
|
||||
align-self: flex-end;
|
||||
}
|
||||
.column > .self-left {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.self-center {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.self-stretch {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.row.space-between,
|
||||
.column.space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.row.space-around,
|
||||
.column.space-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
|
||||
.ml-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mt-auto {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.jc-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.shrink0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.shrink1 {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
/* поток */
|
||||
|
||||
.column.indent0-25 > *:not(:first-child):not(.ripple) {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
.column.indent0-5 > *:not(:first-child):not(.ripple) {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.column.indent0-75 > *:not(:first-child):not(.ripple) {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
.column.indent1 > *:not(:first-child):not(.ripple) {
|
||||
margin-top: 1em;
|
||||
}
|
||||
.column.indent1-25 > *:not(:first-child):not(.ripple) {
|
||||
margin-top: 1.25em;
|
||||
}
|
||||
.column.indent1-5 > *:not(:first-child):not(.ripple) {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.column.indent1-75 > *:not(:first-child):not(.ripple) {
|
||||
margin-top: 1.75em;
|
||||
}
|
||||
.column.indent2 > *:not(:first-child):not(.ripple) {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
/* строка с остступами */
|
||||
|
||||
.row.indent0-25 > *:not(:first-child):not(.ripple) {
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
.row.indent0-5 > *:not(:first-child):not(.ripple) {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.row.indent0-75 > *:not(:first-child):not(.ripple) {
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
|
||||
.row.indent1 > *:not(:first-child):not(.ripple) {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.row.indent1-25 > *:not(:first-child):not(.ripple) {
|
||||
margin-left: 1.25em;
|
||||
}
|
||||
.row.indent1-5 > *:not(:first-child):not(.ripple) {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
.row.indent1-75 > *:not(:first-child):not(.ripple) {
|
||||
margin-left: 1.75em;
|
||||
}
|
||||
.row.indent2 > *:not(:first-child):not(.ripple) {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.row.indent.wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.row.indent.wrap > * {
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
|
||||
/* размеры */
|
||||
|
||||
.row > .full-size, .column > .full-size {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.row.solid > *:not(.soft), .column.solid > *:not(.soft) {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
164
src/css/izi/inputs.css
Normal file
164
src/css/izi/inputs.css
Normal file
@ -0,0 +1,164 @@
|
||||
/* переключалка */
|
||||
|
||||
[data-switch]:not(.butt):not(.show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ---- инпуты ---- */
|
||||
|
||||
|
||||
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"] {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
width: 100%;
|
||||
background: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
font-size: 1em;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
border: none;
|
||||
color: inherit;
|
||||
}
|
||||
select:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
width: 100%;
|
||||
|
||||
resize: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* обычный инпут */
|
||||
|
||||
.input-normal {
|
||||
font-size: 1em;
|
||||
padding: 0.75em;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.input-normal > *:not(:first-child) {
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
|
||||
.input-normal svg {
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
/* лэйбл-инпут */
|
||||
|
||||
.input-label {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
font-size: 1em;
|
||||
height: 4em;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.input-label .combo {
|
||||
position: relative;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-label .combo > * {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.input-label .placeholder {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.input-label.focused .placeholder {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.input-label input {
|
||||
transform: scale(1, 0);
|
||||
}
|
||||
|
||||
.input-label.focused input {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
.input-label .underline {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
border-bottom: 1px solid;
|
||||
transform: translateY(0.5em);
|
||||
}
|
||||
|
||||
.input-label.focused .underline {
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* чекбокс-инпут */
|
||||
|
||||
label.input-checkbox {
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
label.input-checkbox .switcher {
|
||||
position: relative;
|
||||
width: 2em;
|
||||
height: 1em;
|
||||
border-radius: 1em;
|
||||
padding: 0;
|
||||
background: #d3d3d3;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
label.input-checkbox .switcher::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.input-checkbox input[type="checkbox"]:checked ~ .switcher::before {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.input-checkbox input[type="checkbox"]:checked ~ .switcher {
|
||||
background: #3F51B5;
|
||||
}
|
||||
|
||||
.input-checkbox input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
480
src/css/izi/izi.css
Normal file
480
src/css/izi/izi.css
Normal file
@ -0,0 +1,480 @@
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
:before,
|
||||
:after {
|
||||
box-sizing: inherit;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-touch-callout: none;
|
||||
/* -webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
*/
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Roboto, Arial, Helvetica, sans-serif;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
background: #ededed;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
svg.iconmonstr {
|
||||
padding: 0.10em;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* фикс мерцания */
|
||||
|
||||
.flick-fix {
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* ссылки */
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* примитивные позиции */
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.absolute.full-size {
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* указатель на нажатие */
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
transition: 0.5s;
|
||||
-webkit-user-select: none; /* Chrome all / Safari all */
|
||||
-moz-user-select: none; /* Firefox all */
|
||||
-ms-user-select: none; /* IE 10+ */
|
||||
user-select: none; /* Likely future */
|
||||
}
|
||||
|
||||
.clickable .ripple {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
transform:scale(0);
|
||||
}
|
||||
|
||||
[class*="-bright-b"] .ripple {
|
||||
background:rgba(80, 80, 80, 0.20);
|
||||
}
|
||||
[class*="-dark-b"] .ripple {
|
||||
background:rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.an-ripple {
|
||||
animation:ripple 0.65s linear;
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
100% {
|
||||
opacity: 0; transform: scale(2.5);
|
||||
}
|
||||
}
|
||||
|
||||
/* разделитель */
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
[class*="-bright-b"] .divider:not([class*="-dark-c"]) {
|
||||
color: rgba(0,0,0,0.07);
|
||||
}
|
||||
|
||||
[class*="-dark-b"] .divider:not([class*="-bright-c"]) {
|
||||
color: rgba(255,255,255,0.07);
|
||||
}
|
||||
|
||||
.border1 {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
[class*="-bright-b"] .border1 {
|
||||
border-color: rgba(0,0,0,0.10);
|
||||
}
|
||||
|
||||
[class*="-dark-b"] .border1 {
|
||||
border-color: rgba(255,255,255,0.10);
|
||||
}
|
||||
|
||||
/* eщё разделитель */
|
||||
|
||||
[class*="-bright-b"] .underlined {
|
||||
border-bottom: 1px solid rgba(0,0,0,0.07);
|
||||
}
|
||||
|
||||
[class*="-dark-b"] .underlined {
|
||||
border-bottom: 1px solid rgba(255,255,255,0.07);
|
||||
}
|
||||
|
||||
[class*="-bright-b"] .upperlined {
|
||||
border-top: 1px solid rgba(0,0,0,0.07);
|
||||
}
|
||||
|
||||
[class*="-dark-b"] .upperlined {
|
||||
border-top: 1px solid rgba(255,255,255,0.07);
|
||||
}
|
||||
|
||||
/* круг */
|
||||
|
||||
.round {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* закруглённые углы */
|
||||
|
||||
.rounded {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* вот это повороты */
|
||||
|
||||
.rotate90 {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.rotate180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* текст без переносов */
|
||||
|
||||
.text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.text-nowrap {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.text-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* переносы по буквам */
|
||||
|
||||
.break-word {
|
||||
word-break: break-word;
|
||||
min-width:0;
|
||||
}
|
||||
|
||||
/* upper-case */
|
||||
|
||||
.u-case {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* прокрутка */
|
||||
|
||||
.scroll {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.scrollY {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.scrollX {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* ---------------------
|
||||
|
||||
РАЗМЕРЫ
|
||||
|
||||
--------------------- */
|
||||
|
||||
.full-size {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.w100p {
|
||||
width: 100%;
|
||||
}
|
||||
.h100p {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.w50p {
|
||||
width: 50%;
|
||||
}
|
||||
.h50p {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.mw100p {
|
||||
max-width: 100%;
|
||||
}
|
||||
.mh100p {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.w1em {
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.h1em {
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.sz1em {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
/* ---------------------
|
||||
|
||||
ПОЗИЦИИ
|
||||
|
||||
--------------------- */
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.top0 {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.left0 {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.right0 {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.bottom0 {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* ---------------------
|
||||
|
||||
ТЕНИ
|
||||
|
||||
--------------------- */
|
||||
|
||||
.shadow1 {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.shadow2 {
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
.shadow3 {
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
.shadow4 {
|
||||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.shadow5 {
|
||||
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
/* ---------------------
|
||||
|
||||
ПРОЗРАЧНОСТЬ
|
||||
|
||||
--------------------- */
|
||||
|
||||
.op75 {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.op5 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.op25 {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
/* ---------------------
|
||||
|
||||
МАРГИНЫ
|
||||
|
||||
--------------------- */
|
||||
|
||||
.mar0-25 {
|
||||
margin: 0.25em;
|
||||
}
|
||||
|
||||
/* ---------------------
|
||||
|
||||
ПАДДИНГИ
|
||||
|
||||
--------------------- */
|
||||
|
||||
.pad0-25 {
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
.pad0-5 {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.pad0-75 {
|
||||
padding: 0.75em;
|
||||
}
|
||||
|
||||
.pad1 {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.pad1-25 {
|
||||
padding: 1.25em;
|
||||
}
|
||||
|
||||
.pad1-5 {
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
/* ---------------------
|
||||
|
||||
РАЗМЕРЫ ШРИФТА
|
||||
|
||||
--------------------- */
|
||||
|
||||
.fs0-25 {
|
||||
font-size: 0.25em;
|
||||
}
|
||||
.fs0-5 {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
.fs0-65 {
|
||||
font-size: 0.65em;
|
||||
}
|
||||
.fs0-75 {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.fs0-85 {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
.fs1 {
|
||||
font-size: 1em;
|
||||
}
|
||||
.fs1-15 {
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
.fs1-25 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.fs1-5 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.fs1-75 {
|
||||
font-size: 1.75em;
|
||||
}
|
||||
|
||||
.fs2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.fs2-25 {
|
||||
font-size: 2.25em;
|
||||
}
|
||||
.fs2-5 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
.fs2-75 {
|
||||
font-size: 2.75em;
|
||||
}
|
||||
|
||||
.fs3 {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.fs3-25 {
|
||||
font-size: 3.25em;
|
||||
}
|
||||
.fs3-5 {
|
||||
font-size: 3em;
|
||||
}
|
||||
.fs3-75 {
|
||||
font-size: 3.75em;
|
||||
}
|
||||
|
||||
/* ---------------------
|
||||
|
||||
Z-ИНДЕКС
|
||||
|
||||
--------------------- */
|
||||
|
||||
.z0 {
|
||||
z-index: 0
|
||||
}
|
||||
.z1 {
|
||||
z-index: 1
|
||||
}
|
||||
.z2 {
|
||||
z-index: 2
|
||||
}
|
||||
.z3 {
|
||||
z-index: 3
|
||||
}
|
||||
.z4 {
|
||||
z-index: 4
|
||||
}
|
||||
.z5 {
|
||||
z-index: 5
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
461
src/css/izi/material-palette.css
Normal file
461
src/css/izi/material-palette.css
Normal file
@ -0,0 +1,461 @@
|
||||
/* - - - - - - - - - - - - -
|
||||
|
||||
ПАЛИТРА
|
||||
|
||||
- - - - - - - - - - - - - */
|
||||
|
||||
.veil-black-dark-c {
|
||||
color: #303030;
|
||||
fill: #303030;
|
||||
}
|
||||
|
||||
.veil-black-dark-b {
|
||||
background-color: #303030;
|
||||
}
|
||||
|
||||
/* DARK BLUE */
|
||||
|
||||
.dark-blue-dark-c {
|
||||
color: #151b27;
|
||||
fill: #151b27;
|
||||
}
|
||||
|
||||
.dark-blue-dark-b {
|
||||
background-color: #151b27;
|
||||
}
|
||||
|
||||
/* ЧЁРНЫЙ */
|
||||
|
||||
.black-dark-c {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
fill: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
|
||||
[class*="-bright-b"] {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
fill:rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
[class*="-bright-b"] .sec-c {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
[class*="-bright-b"] .dis-c {
|
||||
color: rgba(0, 0, 0, 0.38);
|
||||
fill:rgba(0, 0, 0, 0.38);
|
||||
}
|
||||
|
||||
[class*="-bright-b"] ::placeholder {
|
||||
color: rgba(0, 0, 0, 0.38);
|
||||
}
|
||||
|
||||
[class*="-bright-b"] .icon svg {
|
||||
fill:rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
[class*="-bright-b"] .dis-c .icon svg {
|
||||
fill:rgba(0, 0, 0, 0.38);
|
||||
}
|
||||
|
||||
.black-dark-b {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
/* БЕЛЫЙ */
|
||||
|
||||
.veil-white {
|
||||
background: rgba(255,255,255,0.7);
|
||||
}
|
||||
|
||||
.white-bright-c {
|
||||
color: rgba(255,255,255,1);
|
||||
fill: rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
[class*="-dark-b"] {
|
||||
color: rgb(255,255,255);
|
||||
fill: rgb(255, 255, 255);
|
||||
}
|
||||
[class*="-dark-b"] .sec-c {
|
||||
color: rgba(255,255,255,0.70);
|
||||
fill: rgba(255,255,255,0.70);
|
||||
}
|
||||
[class*="-dark-b"] .dis-c {
|
||||
color: rgba(255,255,255,0.50);
|
||||
fill: rgba(255,255,255,0.50);
|
||||
}
|
||||
|
||||
[class*="-dark-b"] ::placeholder {
|
||||
color: rgba(255,255,255,0.50);
|
||||
}
|
||||
|
||||
[class*="-dark-b"] .icon svg {
|
||||
fill: rgb(255,255,255);
|
||||
}
|
||||
[class*="-dark-b"] .dis-c .icon svg {
|
||||
fill: rgba(255,255,255,0.50);
|
||||
}
|
||||
|
||||
.white-bright-b {
|
||||
background-color: rgb(255,255,255);
|
||||
}
|
||||
|
||||
|
||||
/* RED */
|
||||
|
||||
.red-dark-c {
|
||||
color: #F44336;
|
||||
fill: #F44336;
|
||||
}
|
||||
|
||||
.red-dark-b {
|
||||
background-color: #F44336;
|
||||
}
|
||||
|
||||
.red-bright-c {
|
||||
color: #FF8A80;
|
||||
fill: #FF8A80;
|
||||
}
|
||||
|
||||
.red-bright-b {
|
||||
background-color: #FF8A80;
|
||||
}
|
||||
|
||||
|
||||
/* PINK */
|
||||
|
||||
.pink-dark-c {
|
||||
color: #E91E63;
|
||||
fill: #E91E63;
|
||||
}
|
||||
|
||||
.pink-dark-b {
|
||||
background-color: #E91E63;
|
||||
}
|
||||
|
||||
.pink-bright-c {
|
||||
color: #FF80AB;
|
||||
fill: #FF80AB;
|
||||
}
|
||||
|
||||
.pink-bright-b {
|
||||
background-color: #FF80AB;
|
||||
}
|
||||
|
||||
|
||||
/* PURPLE */
|
||||
|
||||
.purple-dark-c {
|
||||
color: #9C27B0;
|
||||
fill: #9C27B0;
|
||||
}
|
||||
|
||||
.purple-dark-b {
|
||||
background-color: #9C27B0;
|
||||
}
|
||||
|
||||
.purple-bright-c {
|
||||
color: #EA80FC;
|
||||
fill: #EA80FC;
|
||||
}
|
||||
|
||||
.purple-bright-b {
|
||||
background-color: #E040FB;
|
||||
}
|
||||
|
||||
|
||||
/* DEEP PURPLE */
|
||||
|
||||
.dpurple-dark-c {
|
||||
color: #673AB7;
|
||||
fill: #673AB7;
|
||||
}
|
||||
|
||||
.dpurple-dark-b {
|
||||
background-color: #673AB7;
|
||||
}
|
||||
|
||||
.dpurple-bright-c {
|
||||
color: #B388FF;
|
||||
fill: #B388FF;
|
||||
}
|
||||
|
||||
.dpurple-bright-b {
|
||||
background-color: #B388FF;
|
||||
}
|
||||
|
||||
|
||||
/* INDIGO */
|
||||
|
||||
.indigo-dark-c {
|
||||
color: #3F51B5;
|
||||
fill: #3F51B5;
|
||||
}
|
||||
|
||||
.indigo-dark-b {
|
||||
background-color: #3F51B5;
|
||||
}
|
||||
|
||||
.indigo-bright-c {
|
||||
color: #8C9EFF;
|
||||
fill: #8C9EFF;
|
||||
}
|
||||
|
||||
.indigo-bright-b {
|
||||
background-color: #8C9EFF;
|
||||
}
|
||||
|
||||
|
||||
/* BLUE */
|
||||
|
||||
.blue-dark-c {
|
||||
color: #2196F3;
|
||||
fill: #2196F3;
|
||||
}
|
||||
|
||||
.blue-dark-b {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
.blue-bright-c {
|
||||
color: #82B1FF;
|
||||
fill: #82B1FF;
|
||||
}
|
||||
|
||||
.blue-bright-b {
|
||||
background-color: #82B1FF;
|
||||
}
|
||||
|
||||
|
||||
/* LIGHT BLUE */
|
||||
|
||||
.lblue-dark-c {
|
||||
color: #039BE5;
|
||||
fill: #039BE5;
|
||||
}
|
||||
|
||||
.lblue-dark-b {
|
||||
background-color: #039BE5;
|
||||
}
|
||||
|
||||
.lblue-bright-c {
|
||||
color: #40C4FF;
|
||||
fill: #40C4FF;
|
||||
}
|
||||
|
||||
.lblue-bright-b {
|
||||
background-color: #40C4FF;
|
||||
}
|
||||
|
||||
|
||||
/* CYAN */
|
||||
|
||||
.cyan-dark-c {
|
||||
color: #0097A7;
|
||||
fill: #0097A7;
|
||||
}
|
||||
|
||||
.cyan-dark-b {
|
||||
background-color: #0097A7;
|
||||
}
|
||||
|
||||
.cyan-bright-c {
|
||||
color: #18FFFF;
|
||||
fill: #18FFFF;
|
||||
}
|
||||
|
||||
.cyan-bright-b {
|
||||
background-color: #18FFFF;
|
||||
}
|
||||
|
||||
|
||||
/* TYAL */
|
||||
|
||||
.teal-dark-c {
|
||||
color: #009688;
|
||||
fill: #009688;
|
||||
}
|
||||
|
||||
.teal-dark-b {
|
||||
background-color: #009688;
|
||||
}
|
||||
|
||||
.teal-bright-c {
|
||||
color: #64FFDA;
|
||||
fill: #64FFDA;
|
||||
}
|
||||
|
||||
.teal-bright-b {
|
||||
background-color: #64FFDA;
|
||||
}
|
||||
|
||||
|
||||
/* GREEN */
|
||||
|
||||
.green-dark-c {
|
||||
color: #43A047;
|
||||
fill: #43A047;
|
||||
}
|
||||
|
||||
.green-dark-b {
|
||||
background-color: #43A047;
|
||||
}
|
||||
|
||||
.green-bright-c {
|
||||
color: #69F0AE;
|
||||
fill: #69F0AE;
|
||||
}
|
||||
|
||||
.green-bright-b {
|
||||
background-color: #69F0AE;
|
||||
}
|
||||
|
||||
|
||||
/* LIGHT GREEN */
|
||||
|
||||
.lgreen-dark-c {
|
||||
color: #689F38;
|
||||
fill: #689F38;
|
||||
}
|
||||
|
||||
.lgreen-dark-b {
|
||||
background-color: #689F38;
|
||||
}
|
||||
|
||||
.lgreen-bright-c {
|
||||
color: #B2FF59;
|
||||
fill: #B2FF59;
|
||||
}
|
||||
|
||||
.lgreen-bright-b {
|
||||
background-color: #B2FF59;
|
||||
}
|
||||
|
||||
|
||||
/* LIME */
|
||||
|
||||
.lime-dark-c {
|
||||
color: #827717;
|
||||
fill: #827717;
|
||||
}
|
||||
|
||||
.lime-dark-b {
|
||||
background-color: #827717;
|
||||
}
|
||||
|
||||
.lime-bright-c {
|
||||
color: #EEFF41;
|
||||
fill: #EEFF41;
|
||||
}
|
||||
|
||||
.lime-bright-b {
|
||||
background-color: #EEFF41;
|
||||
}
|
||||
|
||||
|
||||
/* YELLOW */
|
||||
|
||||
.yellow-bright-c {
|
||||
color: #FFFF00;
|
||||
fill: #FFFF00;
|
||||
}
|
||||
|
||||
.yellow-bright-b {
|
||||
background-color: #FFFF00;
|
||||
}
|
||||
|
||||
|
||||
/* AMBER */
|
||||
|
||||
.amber-bright-c {
|
||||
color: #FFD740;
|
||||
fill: #FFD740;
|
||||
}
|
||||
|
||||
.amber-bright-b {
|
||||
background-color: #FFD740;
|
||||
}
|
||||
|
||||
|
||||
/* ORANGE */
|
||||
|
||||
.orange-dark-c {
|
||||
color: #EF6C00;
|
||||
fill: #EF6C00;
|
||||
}
|
||||
|
||||
.orange-dark-b {
|
||||
background-color: #EF6C00;
|
||||
}
|
||||
|
||||
.orange-bright-c {
|
||||
color: #FFAB40;
|
||||
fill: #FFAB40;
|
||||
}
|
||||
|
||||
.orange-bright-b {
|
||||
background-color: #FFAB40;
|
||||
}
|
||||
|
||||
|
||||
/* DEEP ORANGE */
|
||||
|
||||
.dorange-dark-c {
|
||||
color: #FF5722;
|
||||
fill: #FF5722;
|
||||
}
|
||||
|
||||
.dorange-dark-b {
|
||||
background-color: #FF5722;
|
||||
}
|
||||
|
||||
.dorange-bright-c {
|
||||
color: #FF6E40;
|
||||
fill: #FF6E40;
|
||||
}
|
||||
|
||||
.dorange-bright-b {
|
||||
background-color: #FF6E40;
|
||||
}
|
||||
|
||||
|
||||
/* BROWN */
|
||||
|
||||
.brown-dark-c {
|
||||
color: #795548;
|
||||
fill: #795548;
|
||||
}
|
||||
|
||||
.brown-dark-b {
|
||||
background-color: #795548;
|
||||
}
|
||||
|
||||
|
||||
/* GREY */
|
||||
|
||||
.grey-dark-c {
|
||||
color: #757575;
|
||||
fill: #757575;
|
||||
}
|
||||
|
||||
.grey-dark-b {
|
||||
background-color: #757575;
|
||||
}
|
||||
|
||||
.grey-bright-c {
|
||||
color: #9E9E9E;
|
||||
fill: #9E9E9E;
|
||||
}
|
||||
|
||||
.grey-bright-b {
|
||||
background-color: #9E9E9E;
|
||||
}
|
||||
|
||||
|
||||
/* BLUE GREY */
|
||||
|
||||
.bgrey-dark-c {
|
||||
color: #607D8B;
|
||||
fill: #607D8B;
|
||||
}
|
||||
|
||||
.bgrey-dark-b {
|
||||
background-color: #607D8B;
|
||||
}
|
||||
5
src/index.css
Normal file
5
src/index.css
Normal file
@ -0,0 +1,5 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
17
src/index.js
Normal file
17
src/index.js
Normal file
@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './app';
|
||||
|
||||
import './css/izi/izi.css';
|
||||
import './css/izi/material-palette.css';
|
||||
import './css/izi/flex.css';
|
||||
import './css/izi/inputs.css';
|
||||
import './css/izi/components.css';
|
||||
import './css/izi/animations.css';
|
||||
|
||||
import './index.css';
|
||||
|
||||
ReactDOM.render(
|
||||
<App />,
|
||||
document.getElementById('root')
|
||||
);
|
||||
35
src/recent-torrents.js
Normal file
35
src/recent-torrents.js
Normal file
@ -0,0 +1,35 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
export default class RecentTorrents extends Component {
|
||||
constructor() {
|
||||
super()
|
||||
this.torrents = [];
|
||||
}
|
||||
componentDidMount() {
|
||||
window.torrentSocket.emit('recentTorrents', (data) => {
|
||||
this.torrents = data;
|
||||
this.forceUpdate();
|
||||
});
|
||||
window.torrentSocket.on('newTorrent', (torrent) => {
|
||||
this.torrents.unshift(torrent);
|
||||
if(this.torrents.length > 10)
|
||||
this.torrents.pop()
|
||||
this.forceUpdate();
|
||||
});
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div className="list column">
|
||||
{
|
||||
this.torrents.map((torrent, index) =>{
|
||||
return(
|
||||
<div key={index}>
|
||||
{torrent.name}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user