web -> desktop
This commit is contained in:
Alexey Kasyanchuk
256
src/app/css/izi/animations.css
Normal file
256
src/app/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);
|
||||
}
|
||||
}
|
||||
86
src/app/css/izi/components.css
Normal file
86
src/app/css/izi/components.css
Normal file
@ -0,0 +1,86 @@
|
||||
|
||||
.torrent-information-row .info-table {
|
||||
flex-basis: 60%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px)
|
||||
{
|
||||
.torrent-information-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
.torrent-information-row .info-table {
|
||||
flex-basis: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 445px)
|
||||
{
|
||||
.recent-title {
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 510px)
|
||||
{
|
||||
.donation-line {
|
||||
width: 65%;
|
||||
}
|
||||
}
|
||||
|
||||
.recent-torrents {
|
||||
width: 60%
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1250px)
|
||||
{
|
||||
.recent-torrents {
|
||||
width: 68%
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1100px)
|
||||
{
|
||||
.recent-torrents {
|
||||
width: 75%
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px)
|
||||
{
|
||||
.recent-torrents {
|
||||
width: 90%
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 650px)
|
||||
{
|
||||
.recent-torrents {
|
||||
width: 100%
|
||||
}
|
||||
}
|
||||
|
||||
.filter-control-border {
|
||||
top: -10px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 530px)
|
||||
{
|
||||
.filter-control-row {
|
||||
flex-wrap: wrap;
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
padding-top: 30px;
|
||||
align-items: inherit !important;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.filter-control-border {
|
||||
padding-top: 5px;
|
||||
top: 6px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
178
src/app/css/izi/flex.css
Normal file
178
src/app/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/app/css/izi/inputs.css
Normal file
164
src/app/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/app/css/izi/izi.css
Normal file
480
src/app/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/app/css/izi/material-palette.css
Normal file
461
src/app/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;
|
||||
}
|
||||
Reference in New Issue
Block a user