diff --git a/dist/assets/index.869843f0.css b/dist/assets/index.869843f0.css index 1531814..90279e6 100644 --- a/dist/assets/index.869843f0.css +++ b/dist/assets/index.869843f0.css @@ -1 +1,987 @@ -@import"https://fonts.googleapis.com/css2?family=Lato&display=swap";*{font-family:Lato,sans-serif;margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth}.container{width:100%;padding:0 5rem;max-width:100%;margin:0 auto;height:100%}html{font-size:62.5%;height:100%}body{background-color:#222831;position:relative}body,#root,.App{height:100%}ul{list-style-type:none}input,button{background:none;outline:none;border:none}button:disabled{background:#d4d4d4!important;border:none!important;cursor:not-allowed!important}a{text-decoration:none}a,h1,h2,h3,h4,h5,h6,span,label,input,textarea,p{color:#f2f2f2}.green{color:#2fad8c;font-size:1.6rem;font-weight:700}.red{color:red;font-size:1.6rem;font-weight:700}input,textarea,select{transition:.1s all ease;border:.1rem #f2f2f2 solid;outline:#2fad8c 0rem solid}input:focus,textarea:focus,select:focus{transition:.1s all ease;border:.1rem #393e46 solid;outline:#2fad8c .3rem solid}input[type=datetime-local]::-webkit-calendar-picker-indicator{color:#0000;opacity:1;display:block;background:url(/assets/calendar.a859ae72.svg) no-repeat;border-width:thin}::-webkit-scrollbar{width:1rem}::-webkit-scrollbar-track{background:#c9fce9}::-webkit-scrollbar-thumb{background:#2fad8c}::-webkit-scrollbar-thumb:hover{background:#268a6f}.login{height:100%}.login.inner{display:flex;align-items:center;justify-content:center}.login__wrapper{display:flex;flex-direction:column;gap:2.4rem}.login__header{text-align:center;font-size:2.8rem}.login__form{min-width:35rem;background:#393e46;padding:3.5rem;border:1px solid #222831;border-radius:.5rem;display:flex;flex-direction:column;gap:1.6rem}.login__form__error{overflow:hidden;height:0;color:red;font-size:1.4rem;font-weight:700;transition:.3s all ease}.login__form__error.active{transition:.3s all ease;height:2rem}.login__form__button{border-radius:.5rem;cursor:pointer;width:100%;padding:.6rem 1.2rem;color:#fff;font-size:1.6rem}.login__form__button--violet{background-color:#2fad8c;border:.1rem solid #2fad8c;transition:.3s all ease}.login__form__button--violet:hover{transition:.3s all ease;background-color:#268a6f;border:.1rem solid #268a6f}.login__form__block{display:flex;flex-direction:column;gap:.8rem}.login__form__block label{font-size:1.6rem}.login__form__block input{font-size:1.6rem;padding:.6rem 1.2rem;border-radius:.5rem}.login__form__block--check label{font-size:1.6rem;display:flex;align-items:center;gap:.6rem}.nav__dropdown{background:#393e46;z-index:5;border-radius:1rem;width:100%;opacity:0;overflow:hidden;position:absolute;transition:.3s all ease;top:calc(100% + 1rem);left:0;height:0;border:.1rem solid #222831}.nav__dropdown.active{height:14.7rem;opacity:1;transition:.3s all ease}.nav__dropdown__wrapper{display:flex;flex-direction:column}.nav__dropdown__wrapper li{display:flex;flex-direction:column;gap:.2rem}.nav__dropdown__wrapper li:nth-child(2n){padding-bottom:1rem}.nav__left{display:flex;align-items:center;justify-content:flex-start;gap:5%}.nav__right{justify-self:flex-end;max-width:10rem;display:flex;align-items:center}.nav__right__user{cursor:pointer;position:relative;background:#393e46;border:.1rem solid #222831;border-radius:1rem;padding:1rem;display:flex;align-items:center;gap:1.6rem;transition:.3s all ease}.nav__right__user:hover{transition:.3s all ease;border:.1rem solid #393e46;background:#222831}.nav__right__user button{border-top:.1rem solid #c8c8c8;padding:1rem 1rem .5rem;cursor:pointer;color:#25acda}.nav__right__user span{font-size:1.6rem}.nav__right__user p{font-size:1.2rem;padding:0 1rem}.nav__right__user__img{width:3rem;height:3rem}.nav__right__user__img img{width:3rem;height:3rem;object-fit:contain}.nav__right__user h2,.nav__right__user h3{padding:1rem 1rem .5rem;width:100%;font-size:1.4rem}.nav.inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;padding:2rem 0}.nav__img{width:7rem;height:5rem}.nav__img svg{width:7rem;height:5rem}.nav__btn{cursor:pointer;display:flex;align-items:center;justify-content:center;width:4.8rem;height:3.2rem;padding:.4rem 0;border:.1rem solid #393e46;border-radius:.5rem;transition:.3s all ease}.nav__btn img{width:4.8rem;height:3.2rem;object-fit:contain}.nav__btn:active{transition:.3s all ease;border:.3rem solid #393e46}.main__mid{padding:3rem 0;display:grid;grid-template-columns:auto 1fr}.aside{transition:.3s all ease;overflow:hidden;max-width:0;width:100%}.aside__img{width:3rem;height:3rem}.aside.active{max-width:25rem;transition:.3s all ease}.aside__list{width:100%;padding:1rem;display:flex;flex-direction:column;gap:1rem;background:#393e46}.aside__list__element{min-width:13.12rem;transition:.3s all ease;background:transparent;display:flex;gap:1.5rem;align-items:center;font-size:1.6rem;cursor:pointer}.aside__list__element a,.aside__list__element div{display:flex;align-items:center;justify-content:flex-start;gap:1.4rem;width:100%;padding:.8rem .4rem .8rem 1.2rem}.aside__list__element:hover{transition:.3s all ease;background:#222831}.aside__list__element__img{width:2rem;height:2rem}.aside__list__element__img img{width:2rem;height:2rem;object-fit:contain}.aside__list__element--title{cursor:default!important;background:transparent!important;font-size:1.4rem}.aside__list__element--title:not(:first-child){padding-top:1rem;margin-top:1rem}.aside__list__element--title svg{width:3rem;height:3rem}.posts__pagination{width:100%;display:flex;gap:3rem;align-items:center;justify-content:flex-end}.posts__pagination input{border-radius:.5rem;border:none!important;width:5%;text-align:center;font-weight:700}.posts__pagination button{transition:.3s all ease;cursor:pointer;color:#f2f2f2;font-size:1.6rem;width:15%;padding:1rem 2rem;border-radius:.5rem;background:#2fad8c}.posts__pagination button:hover{transition:.3s all ease;background:#268a6f}.posts__select{display:flex;flex-direction:column;gap:.8rem}.posts__select label{display:flex;gap:.8rem;font-size:1.4rem}.posts__select input{background:#393e46;color:#f2f2f2;font-size:1.6rem;padding:1rem 1.2rem;border-radius:.2rem;cursor:default;border-radius:.5rem}.posts__select__wrapper{display:flex;gap:1rem}.posts select{padding:1rem 1.2rem;color:#f2f2f2;background:#393e46;border-radius:.5rem}.posts.inner{display:flex;flex-direction:column;gap:4rem}.posts__table.disabled{pointer-events:none}.posts__table__head{min-height:unset!important;background:#393e46}.posts__table th{padding:.3rem;display:flex;align-items:center;justify-content:center;gap:.6rem;cursor:pointer;width:100%;height:100%;text-align:center;font-size:1.6rem;justify-self:center;background:transparent;transition:.3s all ease}.posts__table th input{padding:1rem 2rem;width:100%}.posts__table th span{width:100%;color:#f2f2f2;transition:.3s all ease}.posts__table th.active{background:#c9fce9;transition:.3s all ease}.posts__table th.active span{color:#222831;transition:.3s all ease}.posts__table .post-link{background:#222831}.posts__table .post-link:nth-child(2n){background:#c9fce9}.posts__table .post-link:nth-child(2n) td{color:#393e46}.posts__table .post-link:nth-child(2n) td svg{fill:#222831}.posts__table tr{min-height:7rem;padding:1rem;display:grid;grid-template-columns:1fr 2fr 2.5fr 2fr 2.5fr 2.5fr 2.5fr;gap:1rem}.posts__table td{color:#f2f2f2;text-align:center;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;justify-self:center;font-size:1.2rem;align-self:center}.posts__table td a{width:100%;display:flex;align-items:center;justify-content:center}.posts__table td svg{width:2rem;height:2rem}.posts__table tbody{min-height:20rem;position:relative;display:flex;flex-direction:column}.posts__reset{color:#fff;max-width:30rem;font-size:1.6rem;border-radius:.5rem;background:#2fad8c;padding:.5rem 2rem;text-align:center;height:67%;min-width:20rem;cursor:pointer;transition:.3s all ease}.posts__reset:hover{transition:.3s all ease;background-color:#268a6f;border:.1rem solid #268a6f}.posts__reset__btn{display:flex;flex-direction:row;align-items:flex-end}.post{padding-bottom:4rem}.post.inner{display:flex;flex-direction:column;gap:4rem}.post h1{font-size:2.4rem}.post__head svg{width:5rem;height:5rem}.post__content{display:flex;flex-direction:column;gap:3rem}.post__content__btn{display:flex;align-items:center;gap:1rem;border-radius:.2rem;cursor:pointer;width:100%;padding:1rem 1.2rem;color:#f2f2f2;font-size:1.6rem;background-color:#2fad8c;transition:.3s all ease}.post__content__btn:hover{transition:.3s all ease;background-color:#268a6f}.post__content input{font-size:1.6rem;padding:.6rem 1.2rem;border-radius:.5rem;cursor:default;background:#393e46}.post__content textarea{background:#393e46;cursor:default;padding:.6rem 1.2rem;resize:none;font-size:1.6rem;border-radius:.5rem}.post__content__block{display:flex;flex-direction:column;gap:.8rem}.post__content__block h4{font-size:1.6rem}.post__content__table thead tr{min-height:unset!important;background:#393e46}.post__content__table th{width:100%;height:100%;text-align:center;font-size:1.6rem;justify-self:center;background:transparent;color:#f2f2f2;transition:.3s all ease}.post__content__table tr{background:#222831}.post__content__table tr:nth-child(2n){background:#c9fce9}.post__content__table tr:nth-child(2n) td{color:#393e46}.post__content__table tr:nth-child(2n) td svg{fill:#222831}.post__content__table tr{min-height:7rem;padding:1rem;display:grid;grid-template-columns:1fr repeat(4,2fr);gap:1rem}.post__content__table td{color:#f2f2f2;text-align:center;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;justify-self:center;font-size:1.2rem;align-self:center}.post__content__table td a{width:100%;display:flex;align-items:center;justify-content:center}.post__content__table td svg{width:2rem;height:2rem}.post__content__table tbody{min-height:20rem;position:relative;display:flex;flex-direction:column}.table__empty{font-size:1.6rem;text-align:center}.details.inner{display:flex;flex-direction:column;gap:4rem}.details__data{display:grid;grid-template-columns:1fr 1fr;gap:3rem}.details__data__block{width:100%;display:flex;flex-direction:column;gap:.6rem}.details__data label{font-size:2rem}.details__data input{font-size:1.6rem;padding:1rem 1.2rem;border-radius:.5rem}.details__content,.category.inner{display:flex;flex-direction:column;gap:4rem}.category__head svg{width:4rem;height:4rem}.category th{cursor:pointer;width:100%;height:100%;text-align:center;font-size:1.6rem;justify-self:center;background:transparent;color:#f2f2f2;transition:.3s all ease}.category__form{display:flex;flex-direction:column;align-items:flex-start;gap:4rem}.category__form__block{width:100%;max-width:40rem;display:flex;flex-direction:column;gap:.6rem}.category__form__block label{font-size:2rem}.category__form__block input{padding:.7rem 1rem;border:.1rem solid #cccccc;border-radius:.5rem}.category__form button{display:flex;align-items:center;justify-content:center;gap:1rem;max-width:30rem;border-radius:.2rem;cursor:pointer;width:100%;padding:1rem 1.8rem;color:#fff;font-size:1.6rem;background-color:#7c69ef;border:.1rem solid #7c69ef;transition:.3s all ease}.category__form button:hover{transition:.3s all ease;background-color:#705ed6;border:.1rem solid #705ed6}.category__table__wrapper{display:flex;flex-direction:column;gap:1rem}.category__table__wrapper h3{font-size:2rem;font-weight:400}.category__table__head{cursor:default;min-height:unset!important;background:#393e46!important}.category__table tr{min-height:7rem;padding:1rem;display:grid;grid-template-columns:1fr 2fr 3fr 4fr;gap:1rem;color:#f2f2f2;background:#222831}.category__table tr:nth-child(2n){background:#c9fce9}.category__table tr:nth-child(2n) td{color:#393e46}.category__table tr:nth-child(2n) td svg{fill:#222831}.category__table tr:nth-child(2n) td span{color:#222831;font-weight:700}.category__table td{text-align:center;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;justify-self:center;font-size:1.2rem;align-self:center}.category__table tbody{max-height:70vh;overflow-y:auto;display:flex;flex-direction:column}.source-action{display:flex;gap:1rem;align-items:center;justify-content:center}.source-action__block button,.source-action__block a{cursor:pointer;display:flex;align-items:center;gap:.6rem}.source-action__block svg{width:1.5rem;height:1.5rem}.source-action__block span{font-size:1.6rem}.source__link{display:flex;align-items:center;gap:1rem;max-width:30rem;font-size:1.6rem;border-radius:.5rem;background:#2fad8c;padding:1rem 2rem;transition:.3s all ease;text-align:center}.source__link:hover{background:#268a6f;transition:.3s all ease}.source__head svg{width:4rem;height:4rem}.source__create.inner,.source__create__block{display:flex;flex-direction:column;gap:4rem}.dashboard__head{display:flex;align-items:center;gap:1rem}.dashboard__head h1{font-size:3.2rem}.dashboard__head svg{width:4rem;height:4rem}.source-edit.inner,.source-edit__content form{display:flex;flex-direction:column;gap:4rem}.source-edit__info,.source-edit__content{display:flex;flex-direction:column;gap:3rem;padding:1rem}.source-edit__info h2,.source-edit__content h2{font-weight:400;font-size:3rem}.source-edit__input{color:#f2f2f2;display:flex;flex-direction:column;gap:.8rem;font-size:1.6rem}.source-edit__input input{font-size:1.6rem;background:#393e46;padding:.6rem 1.2rem;border-radius:.5rem}.source-edit__submit{font-size:1.6rem;cursor:pointer;color:#f2f2f2;border-radius:.5rem;background:#2fad8c;transition:.3s all ease;padding:1.6rem 1.2rem}.source-edit__submit:hover{transition:.3s all ease;background:#268a6f}.loader{z-index:20;display:flex;justify-content:center;align-items:center;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.4)}.loader.inner{opacity:1}.loader.inner img{width:100%;height:100%;max-width:10rem;max-height:10rem}.popup{opacity:0;left:4rem;bottom:2rem;border-radius:.6rem;z-index:30;position:absolute;width:35rem;height:6rem;display:flex;align-items:center;gap:3rem;padding:1.6rem;background:#393e46;transition:.3s all ease}.popup__wrapper{pointer-events:none;top:0;left:0;position:absolute;overflow:hidden;height:100vh;width:100%}.popup__wrapper__inner{width:100%;height:100%;position:relative}.popup span{font-size:1.6rem}.popup svg{width:3rem;height:3rem}.popup.active{transition:.3s all ease;animation:slideIn 2s ease-in-out 0s 1 forwards}@keyframes slideIn{0%{transform:translateY(3rem)}25%{opacity:1;transform:translateY(0)}50%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(3rem)}} +@import "https://fonts.googleapis.com/css2?family=Lato&display=swap"; +* { + font-family: Lato, sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; + scroll-behavior: smooth; +} +.container { + width: 100%; + padding: 0 5rem; + max-width: 100%; + margin: 0 auto; + height: 100%; +} +html { + font-size: 62.5%; + height: 100%; +} +body { + background-color: #222831; + position: relative; +} +body, +#root, +.App { + height: 100%; +} +ul { + list-style-type: none; +} +input, +button { + background: none; + outline: none; + border: none; +} +button:disabled { + background: #d4d4d4 !important; + border: none !important; + cursor: not-allowed !important; +} +a { + text-decoration: none; +} +a, +h1, +h2, +h3, +h4, +h5, +h6, +span, +label, +input, +textarea, +p { + color: #f2f2f2; +} +.green { + color: #2fad8c; + font-size: 1.6rem; + font-weight: 700; +} +.red { + color: red; + font-size: 1.6rem; + font-weight: 700; +} +input, +textarea, +select { + transition: 0.1s all ease; + border: 0.1rem #f2f2f2 solid; + outline: #2fad8c 0rem solid; +} +input:focus, +textarea:focus, +select:focus { + transition: 0.1s all ease; + border: 0.1rem #393e46 solid; + outline: #2fad8c 0.3rem solid; +} +input[type="datetime-local"]::-webkit-calendar-picker-indicator { + color: #0000; + opacity: 1; + display: block; + background: url(/assets/calendar.a859ae72.svg) no-repeat; + border-width: thin; +} +::-webkit-scrollbar { + width: 1rem; +} +::-webkit-scrollbar-track { + background: #c9fce9; +} +::-webkit-scrollbar-thumb { + background: #2fad8c; +} +::-webkit-scrollbar-thumb:hover { + background: #268a6f; +} +.login { + height: 100%; +} +.login.inner { + display: flex; + align-items: center; + justify-content: center; +} +.login__wrapper { + display: flex; + flex-direction: column; + gap: 2.4rem; +} +.login__header { + text-align: center; + font-size: 2.8rem; +} +.login__form { + min-width: 35rem; + background: #393e46; + padding: 3.5rem; + border: 0.1rem solid #222831; + border-radius: 0.5rem; + display: flex; + flex-direction: column; + gap: 1.6rem; +} +.login__form__error { + overflow: hidden; + height: 0; + color: red; + font-size: 1.4rem; + font-weight: 700; + transition: 0.3s all ease; +} +.login__form__error.active { + transition: 0.3s all ease; + height: 2rem; +} +.login__form__button { + border-radius: 0.5rem; + cursor: pointer; + width: 100%; + padding: 0.6rem 1.2rem; + color: #fff; + font-size: 1.6rem; +} +.login__form__button--violet { + background-color: #2fad8c; + border: 0.1rem solid #2fad8c; + transition: 0.3s all ease; +} +.login__form__button--violet:hover { + transition: 0.3s all ease; + background-color: #268a6f; + border: 0.1rem solid #268a6f; +} +.login__form__block { + display: flex; + flex-direction: column; + gap: 0.8rem; +} +.login__form__block label { + font-size: 1.6rem; +} +.login__form__block input { + font-size: 1.6rem; + padding: 0.6rem 1.2rem; + border-radius: 0.5rem; +} +.login__form__block--check label { + font-size: 1.6rem; + display: flex; + align-items: center; + gap: 0.6rem; +} +.nav__dropdown { + background: #393e46; + z-index: 5; + border-radius: 1rem; + width: 100%; + opacity: 0; + overflow: hidden; + position: absolute; + transition: 0.3s all ease; + top: calc(100% + 1rem); + left: 0; + height: 0; + border: 0.1rem solid #222831; +} +.nav__dropdown.active { + height: 14.7rem; + opacity: 1; + transition: 0.3s all ease; +} +.nav__dropdown__wrapper { + display: flex; + flex-direction: column; +} +.nav__dropdown__wrapper li { + display: flex; + flex-direction: column; + gap: 0.2rem; +} +.nav__dropdown__wrapper li:nth-child(2n) { + padding-bottom: 1rem; +} +.nav__left { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 5%; +} +.nav__right { + justify-self: flex-end; + max-width: 10rem; + display: flex; + align-items: center; +} +.nav__right__user { + cursor: pointer; + position: relative; + background: #393e46; + border: 0.1rem solid #222831; + border-radius: 1rem; + padding: 1rem; + display: flex; + align-items: center; + gap: 1.6rem; + transition: 0.3s all ease; +} +.nav__right__user:hover { + transition: 0.3s all ease; + border: 0.1rem solid #393e46; + background: #222831; +} +.nav__right__user button { + border-top: 0.1rem solid #c8c8c8; + padding: 1rem 1rem 0.5rem; + cursor: pointer; + color: #25acda; +} +.nav__right__user span { + font-size: 1.6rem; +} +.nav__right__user p { + font-size: 1.2rem; + padding: 0 1rem; +} +.nav__right__user__img { + width: 3rem; + height: 3rem; +} +.nav__right__user__img img { + width: 3rem; + height: 3rem; + object-fit: contain; +} +.nav__right__user h2, +.nav__right__user h3 { + padding: 1rem 1rem 0.5rem; + width: 100%; + font-size: 1.4rem; +} +.nav.inner { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + padding: 2rem 0; +} +.nav__img { + width: 7rem; + height: 5rem; +} +.nav__img svg { + width: 7rem; + height: 5rem; +} +.nav__btn { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + width: 4.8rem; + height: 3.2rem; + padding: 0.4rem 0; + border: 0.1rem solid #393e46; + border-radius: 0.5rem; + transition: 0.3s all ease; +} +.nav__btn img { + width: 4.8rem; + height: 3.2rem; + object-fit: contain; +} +.nav__btn:active { + transition: 0.3s all ease; + border: 0.3rem solid #393e46; +} +.main__mid { + padding: 3rem 0; + display: grid; + grid-template-columns: auto 1fr; +} +.aside { + transition: 0.3s all ease; + overflow: hidden; + max-width: 0; + width: 100%; +} +.aside__img { + width: 3rem; + height: 3rem; +} +.aside.active { + max-width: 25rem; + transition: 0.3s all ease; +} +.aside__list { + width: 100%; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 1rem; + background: #393e46; +} +.aside__list__element { + min-width: 13.12rem; + transition: 0.3s all ease; + background: transparent; + display: flex; + gap: 1.5rem; + align-items: center; + font-size: 1.6rem; + cursor: pointer; +} +.aside__list__element a, +.aside__list__element div { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 1.4rem; + width: 100%; + padding: 0.8rem 0.4rem 0.8rem 1.2rem; +} +.aside__list__element:hover { + transition: 0.3s all ease; + background: #222831; +} +.aside__list__element__img { + width: 2rem; + height: 2rem; +} +.aside__list__element__img img { + width: 2rem; + height: 2rem; + object-fit: contain; +} +.aside__list__element--title { + cursor: default !important; + background: transparent !important; + font-size: 1.4rem; +} +.aside__list__element--title:not(:first-child) { + padding-top: 1rem; + margin-top: 1rem; +} +.aside__list__element--title svg { + width: 3rem; + height: 3rem; +} +.posts__pagination { + width: 100%; + display: flex; + gap: 3rem; + align-items: center; + justify-content: flex-end; +} +.posts__pagination input { + border-radius: 0.5rem; + border: none !important; + width: 5%; + text-align: center; + font-weight: 700; +} +.posts__pagination button { + transition: 0.3s all ease; + cursor: pointer; + color: #f2f2f2; + font-size: 1.6rem; + width: 15%; + padding: 1rem 2rem; + border-radius: 0.5rem; + background: #2fad8c; +} +.posts__pagination button:hover { + transition: 0.3s all ease; + background: #268a6f; +} +.posts__select { + display: flex; + flex-direction: column; + gap: 0.8rem; +} +.posts__select label { + display: flex; + gap: 0.8rem; + font-size: 1.4rem; +} +.posts__select input { + background: #393e46; + color: #f2f2f2; + font-size: 1.6rem; + padding: 1rem 1.2rem; + border-radius: 0.2rem; + cursor: default; + border-radius: 0.5rem; +} +.posts__select__wrapper { + display: flex; + gap: 1rem; +} +.posts select { + padding: 1rem 1.2rem; + color: #f2f2f2; + background: #393e46; + border-radius: 0.5rem; +} +.posts.inner { + display: flex; + flex-direction: column; + gap: 4rem; +} +.posts__table.disabled { + pointer-events: none; +} +.posts__table__head { + min-height: unset !important; + background: #393e46; +} +.posts__table th { + padding: 0.3rem; + display: flex; + align-items: center; + justify-content: center; + gap: 0.6rem; + cursor: pointer; + width: 100%; + height: 100%; + text-align: center; + font-size: 1.6rem; + justify-self: center; + background: transparent; + transition: 0.3s all ease; +} +.posts__table th input { + padding: 1rem 2rem; + width: 100%; +} +.posts__table th span { + width: 100%; + color: #f2f2f2; + transition: 0.3s all ease; +} +.posts__table th.active { + background: #c9fce9; + transition: 0.3s all ease; +} +.posts__table th.active span { + color: #222831; + transition: 0.3s all ease; +} +.posts__table .post-link { + background: #222831; +} +.posts__table .post-link:nth-child(2n) { + background: #c9fce9; +} +.posts__table .post-link:nth-child(2n) td { + color: #393e46; +} +.posts__table .post-link:nth-child(2n) td svg { + fill: #222831; +} +.posts__table tr { + min-height: 7rem; + padding: 1rem; + display: grid; + grid-template-columns: 1fr 2fr 2.5fr 2fr 2.5fr 2.5fr 2.5fr; + gap: 1rem; +} +.posts__table td { + color: #f2f2f2; + text-align: center; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + justify-self: center; + font-size: 1.2rem; + align-self: center; +} +.posts__table td a { + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.posts__table td svg { + width: 2rem; + height: 2rem; +} +.posts__table tbody { + min-height: 20rem; + position: relative; + display: flex; + flex-direction: column; +} +.posts__reset { + color: #fff; + max-width: 30rem; + font-size: 1.6rem; + border-radius: 0.5rem; + background: #2fad8c; + padding: 0.5rem 2rem; + text-align: center; + height: 67%; + min-width: 20rem; + cursor: pointer; + transition: 0.3s all ease; +} +.posts__reset:hover { + transition: 0.3s all ease; + background-color: #268a6f; + border: 0.1rem solid #268a6f; +} +.posts__reset__btn { + display: flex; + flex-direction: row; + align-items: flex-end; +} +.post { + padding-bottom: 4rem; +} +.post.inner { + display: flex; + flex-direction: column; + gap: 4rem; +} +.post h1 { + font-size: 2.4rem; +} +.post__head svg { + width: 5rem; + height: 5rem; +} +.post__content { + display: flex; + flex-direction: column; + gap: 3rem; +} +.post__content__btn { + display: flex; + align-items: center; + gap: 1rem; + border-radius: 0.2rem; + cursor: pointer; + width: 100%; + padding: 1rem 1.2rem; + color: #f2f2f2; + font-size: 1.6rem; + background-color: #2fad8c; + transition: 0.3s all ease; +} +.post__content__btn:hover { + transition: 0.3s all ease; + background-color: #268a6f; +} +.post__content input { + font-size: 1.6rem; + padding: 0.6rem 1.2rem; + border-radius: 0.5rem; + cursor: default; + background: #393e46; +} +.post__content textarea { + background: #393e46; + cursor: default; + padding: 0.6rem 1.2rem; + resize: none; + font-size: 1.6rem; + border-radius: 0.5rem; +} +.post__content__block { + display: flex; + flex-direction: column; + gap: 0.8rem; +} +.post__content__block h4 { + font-size: 1.6rem; +} +.post__content__table thead tr { + min-height: unset !important; + background: #393e46; +} +.post__content__table th { + width: 100%; + height: 100%; + text-align: center; + font-size: 1.6rem; + justify-self: center; + background: transparent; + color: #f2f2f2; + transition: 0.3s all ease; +} +.post__content__table tr { + background: #222831; +} +.post__content__table tr:nth-child(2n) { + background: #c9fce9; +} +.post__content__table tr:nth-child(2n) td { + color: #393e46; +} +.post__content__table tr:nth-child(2n) td svg { + fill: #222831; +} +.post__content__table tr { + min-height: 7rem; + padding: 1rem; + display: grid; + grid-template-columns: 1fr repeat(4, 2fr); + gap: 1rem; +} +.post__content__table td { + color: #f2f2f2; + text-align: center; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + justify-self: center; + font-size: 1.2rem; + align-self: center; +} +.post__content__table td a { + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.post__content__table td svg { + width: 2rem; + height: 2rem; +} +.post__content__table tbody { + min-height: 20rem; + position: relative; + display: flex; + flex-direction: column; +} +.table__empty { + font-size: 1.6rem; + text-align: center; +} +.details.inner { + display: flex; + flex-direction: column; + gap: 4rem; +} +.details__data { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; +} +.details__data__block { + width: 100%; + display: flex; + flex-direction: column; + gap: 0.6rem; +} +.details__data label { + font-size: 2rem; +} +.details__data input { + font-size: 1.6rem; + padding: 1rem 1.2rem; + border-radius: 0.5rem; +} +.details__content, +.category.inner { + display: flex; + flex-direction: column; + gap: 4rem; +} +.category__head svg { + width: 4rem; + height: 4rem; +} +.category th { + cursor: pointer; + width: 100%; + height: 100%; + text-align: center; + font-size: 1.6rem; + justify-self: center; + background: transparent; + color: #f2f2f2; + transition: 0.3s all ease; +} +.category__form { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4rem; +} +.category__form__block { + width: 100%; + max-width: 40rem; + display: flex; + flex-direction: column; + gap: 0.6rem; +} +.category__form__block label { + font-size: 2rem; +} +.category__form__block input { + padding: 0.7rem 1rem; + border: 0.1rem solid #cccccc; + border-radius: 0.5rem; +} +.category__form button { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + max-width: 30rem; + border-radius: 0.2rem; + cursor: pointer; + width: 100%; + padding: 1rem 1.8rem; + color: #fff; + font-size: 1.6rem; + background-color: #7c69ef; + border: 0.1rem solid #7c69ef; + transition: 0.3s all ease; +} +.category__form button:hover { + transition: 0.3s all ease; + background-color: #705ed6; + border: 0.1rem solid #705ed6; +} +.category__table__wrapper { + display: flex; + flex-direction: column; + gap: 1rem; +} +.category__table__wrapper h3 { + font-size: 2rem; + font-weight: 400; +} +.category__table__head { + cursor: default; + min-height: unset !important; + background: #393e46 !important; +} +.category__table tr { + min-height: 7rem; + padding: 1rem; + display: grid; + grid-template-columns: 1fr 2fr 3fr 4fr; + gap: 1rem; + color: #f2f2f2; + background: #222831; +} +.category__table tr:nth-child(2n) { + background: #c9fce9; +} +.category__table tr:nth-child(2n) td { + color: #393e46; +} +.category__table tr:nth-child(2n) td svg { + fill: #222831; +} +.category__table tr:nth-child(2n) td span { + color: #222831; + font-weight: 700; +} +.category__table td { + text-align: center; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + justify-self: center; + font-size: 1.2rem; + align-self: center; +} +.category__table tbody { + max-height: 70vh; + overflow-y: auto; + display: flex; + flex-direction: column; +} +.source-action { + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; +} +.source-action__block button, +.source-action__block a { + cursor: pointer; + display: flex; + align-items: center; + gap: 0.6rem; +} +.source-action__block svg { + width: 1.5rem; + height: 1.5rem; +} +.source-action__block span { + font-size: 1.6rem; +} +.source__link { + display: flex; + align-items: center; + gap: 1rem; + max-width: 30rem; + font-size: 1.6rem; + border-radius: 0.5rem; + background: #2fad8c; + padding: 1rem 2rem; + transition: 0.3s all ease; + text-align: center; +} +.source__link:hover { + background: #268a6f; + transition: 0.3s all ease; +} +.source__head svg { + width: 4rem; + height: 4rem; +} +.source__create.inner, +.source__create__block { + display: flex; + flex-direction: column; + gap: 4rem; +} +.dashboard__head { + display: flex; + align-items: center; + gap: 1rem; +} +.dashboard__head h1 { + font-size: 3.2rem; +} +.dashboard__head svg { + width: 4rem; + height: 4rem; +} +.source-edit.inner, +.source-edit__content form { + display: flex; + flex-direction: column; + gap: 4rem; +} +.source-edit__info, +.source-edit__content { + display: flex; + flex-direction: column; + gap: 3rem; + padding: 1rem; +} +.source-edit__info h2, +.source-edit__content h2 { + font-weight: 400; + font-size: 3rem; +} +.source-edit__input { + color: #f2f2f2; + display: flex; + flex-direction: column; + gap: 0.8rem; + font-size: 1.6rem; +} +.source-edit__input input { + font-size: 1.6rem; + background: #393e46; + padding: 0.6rem 1.2rem; + border-radius: 0.5rem; +} +.source-edit__submit { + font-size: 1.6rem; + cursor: pointer; + color: #f2f2f2; + border-radius: 0.5rem; + background: #2fad8c; + transition: 0.3s all ease; + padding: 1.6rem 1.2rem; +} +.source-edit__submit:hover { + transition: 0.3s all ease; + background: #268a6f; +} +.loader { + z-index: 20; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.4); +} +.loader.inner { + opacity: 1; +} +.loader.inner img { + width: 100%; + height: 100%; + max-width: 10rem; + max-height: 10rem; +} +.popup { + opacity: 0; + left: 4rem; + bottom: 2rem; + border-radius: 0.6rem; + z-index: 30; + position: absolute; + width: 35rem; + height: 6rem; + display: flex; + align-items: center; + gap: 3rem; + padding: 1.6rem; + background: #393e46; + transition: 0.3s all ease; +} +.popup__wrapper { + pointer-events: none; + top: 0; + left: 0; + position: absolute; + overflow: hidden; + height: 100vh; + width: 100%; +} +.popup__wrapper__inner { + width: 100%; + height: 100%; + position: relative; +} +.popup span { + font-size: 1.6rem; +} +.popup svg { + width: 3rem; + height: 3rem; +} +.popup.active { + transition: 0.3s all ease; + animation: slideIn 2s ease-in-out 0s 1 forwards; +} +@keyframes slideIn { + 0% { + transform: translateY(3rem); + } + 25% { + opacity: 1; + transform: translateY(0); + } + 50% { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(3rem); + } +} diff --git a/src/App.tsx b/src/App.tsx index abd8020..45c71eb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -19,7 +19,6 @@ import Popup from "./components/Popup"; import Login from "./pages/Login"; import Main from "./pages/Main"; import Posts from "./pages/Posts"; -import Details from "./pages/Details"; import Post from "./pages/Post"; import Source from "./pages/Source"; import EditSource from "./pages/EditSource"; @@ -93,11 +92,6 @@ const App = () => { path="/source/create" element={
} />} /> - - } />} - /> } /> diff --git a/src/assets/icons/calendar.svg b/src/assets/icons/calendar.svg index 5fb5c12..8e51d67 100644 --- a/src/assets/icons/calendar.svg +++ b/src/assets/icons/calendar.svg @@ -1,12 +1,12 @@ - - - - - - - - - - + + + + + + + + + + diff --git a/src/assets/icons/loader.svg b/src/assets/icons/loader.svg index 6f610fc..19e24a6 100644 --- a/src/assets/icons/loader.svg +++ b/src/assets/icons/loader.svg @@ -1,5 +1,5 @@ - + \ No newline at end of file diff --git a/src/assets/styles/_aside.scss b/src/assets/styles/_aside.scss index e53c9ec..4a8f88a 100644 --- a/src/assets/styles/_aside.scss +++ b/src/assets/styles/_aside.scss @@ -20,7 +20,7 @@ display: flex; flex-direction: column; gap: 1rem; - background: $light-black; + background: transparent; &__element { min-width: 13.12rem; @@ -33,6 +33,11 @@ font-size: 1.6rem; cursor: pointer; + h2, + span { + color: #495057; + } + a, div { display: flex; diff --git a/src/assets/styles/_details.scss b/src/assets/styles/_details.scss deleted file mode 100644 index 117dceb..0000000 --- a/src/assets/styles/_details.scss +++ /dev/null @@ -1,36 +0,0 @@ -.details { - &.inner { - display: flex; - flex-direction: column; - gap: 4rem; - } - - &__data { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 3rem; - - &__block { - width: 100%; - display: flex; - flex-direction: column; - gap: 0.6rem; - } - - label { - font-size: 2rem; - } - - input { - font-size: 1.6rem; - padding: 1rem 1.2rem; - border-radius: 0.5rem; - } - } - - &__content { - display: flex; - flex-direction: column; - gap: 4rem; - } -} diff --git a/src/assets/styles/_edit-source.scss b/src/assets/styles/_edit-source.scss index 6f55990..d4fbb73 100644 --- a/src/assets/styles/_edit-source.scss +++ b/src/assets/styles/_edit-source.scss @@ -7,6 +7,9 @@ &__content { form { + padding: 2rem; + border: 0.1rem solid rgba(0, 40, 100, 0.12); + background: $base-white; display: flex; flex-direction: column; gap: 4rem; @@ -18,7 +21,6 @@ display: flex; flex-direction: column; gap: 3rem; - padding: 1rem; h2 { font-weight: normal; @@ -35,7 +37,7 @@ input { font-size: 1.6rem; - background: $light-black; + background: $base-gray; padding: 0.6rem 1.2rem; border-radius: 0.5rem; } diff --git a/src/assets/styles/_general.scss b/src/assets/styles/_general.scss index 2d37199..932f9d9 100644 --- a/src/assets/styles/_general.scss +++ b/src/assets/styles/_general.scss @@ -22,7 +22,7 @@ html { } body { - background-color: $base-black; + background-color: $base-gray; position: relative; } @@ -65,7 +65,7 @@ label, input, textarea, p { - color: $base-gray; + color: #000; } .green { @@ -100,23 +100,3 @@ input[type="date"]::-webkit-calendar-picker-indicator { background: url("../icons/calendar.svg") no-repeat; border-width: thin; } - -/* width */ -::-webkit-scrollbar { - width: 1rem; -} - -/* Track */ -::-webkit-scrollbar-track { - background: $light-blue; -} - -/* Handle */ -::-webkit-scrollbar-thumb { - background: $base-blue; -} - -/* Handle on hover */ -::-webkit-scrollbar-thumb:hover { - background: $hover-blue; -} diff --git a/src/assets/styles/_login.scss b/src/assets/styles/_login.scss index 1ffeb72..97e63bb 100644 --- a/src/assets/styles/_login.scss +++ b/src/assets/styles/_login.scss @@ -15,13 +15,14 @@ &__header { text-align: center; font-size: 2.8rem; + font-weight: normal; } &__form { min-width: 35rem; - background: $light-black; + background: $base-white; + border: 0.1rem solid #d9e2ef; padding: 3.5rem; - border: 1px solid $base-black; border-radius: 0.5rem; display: flex; flex-direction: column; diff --git a/src/assets/styles/_nav.scss b/src/assets/styles/_nav.scss index f5fab29..da46447 100644 --- a/src/assets/styles/_nav.scss +++ b/src/assets/styles/_nav.scss @@ -1,6 +1,6 @@ .nav { &__dropdown { - background: $light-black; + background: $base-white; z-index: 5; border-radius: 1rem; width: 100%; @@ -52,8 +52,8 @@ &__user { cursor: pointer; position: relative; - background: $light-black; - border: 0.1rem solid $base-black; + background: $base-white; + border: 0.1rem solid #495057; border-radius: 1rem; padding: 1rem; display: flex; @@ -63,8 +63,6 @@ &:hover { @include transition-std; - border: 0.1rem solid $light-black; - background: $base-black; } button { @@ -72,7 +70,7 @@ padding: 1rem; padding-bottom: 0.5rem; cursor: pointer; - color: rgb(37, 172, 218); + color: $base-blue; } span { diff --git a/src/assets/styles/_popup.scss b/src/assets/styles/_popup.scss index 65b5489..2356b7a 100644 --- a/src/assets/styles/_popup.scss +++ b/src/assets/styles/_popup.scss @@ -27,7 +27,8 @@ align-items: center; gap: 3rem; padding: 1.6rem; - background: $light-black; + background: $base-white; + border: 0.1rem solid rgba(0, 40, 100, 0.12); @include transition-std; span { diff --git a/src/assets/styles/_posts.scss b/src/assets/styles/_posts.scss index 3b3e711..b6e6194 100644 --- a/src/assets/styles/_posts.scss +++ b/src/assets/styles/_posts.scss @@ -43,7 +43,7 @@ } input { - background: $light-black; + background: $light-gray; color: $base-gray; font-size: 1.6rem; padding: 1rem 1.2rem; @@ -59,8 +59,8 @@ } select { padding: 1rem 1.2rem; - color: $base-gray; - background: $light-black; + color: #495057; + background: $light-gray; border-radius: 0.5rem; } @@ -71,13 +71,14 @@ } &__table { + border: 0.1rem solid rgba(0, 40, 100, 0.12); &.disabled { pointer-events: none; } &__head { min-height: unset !important; - background: $light-black; + background: $light-gray; } th { @@ -96,39 +97,42 @@ @include transition-std; input { + color: $dark-gray; + border: 0.1rem solid $dark-gray; padding: 1rem 2rem; width: 100%; } span { width: 100%; - color: $base-gray; + color: #494057; + font-weight: normal; @include transition-std; } &.active { - background: $light-blue; + background: $dark-gray; @include transition-std; span { - color: $base-black; + color: #494057; @include transition-std; } } } .post-link { - background: $base-black; - &:nth-child(2n) { - background: $light-blue; - td { - color: $light-black; + background: $base-gray; + td { + color: $light-black; - svg { - fill: $base-black; - } + svg { + color: $base-blue; } } + &:nth-child(2n) { + background: $light-gray; + } } tr { @@ -179,7 +183,7 @@ max-width: 30rem; font-size: 1.6rem; border-radius: 0.5rem; - background: #2fad8c; + background: $base-blue; padding: 0.5rem 2rem; transition: 0.3s all ease; text-align: center; @@ -221,10 +225,18 @@ } } + &__date { + font-size: 1.6rem; + font-weight: normal; + } + &__content { display: flex; flex-direction: column; gap: 3rem; + background: $base-white; + padding: 2rem; + border: 0.1rem solid rgba(0, 40, 100, 0.12); &__btn { display: flex; @@ -235,10 +247,14 @@ cursor: pointer; width: 100%; padding: 1rem 1.2rem; - color: $base-gray; + font-size: 1.6rem; background-color: $base-blue; + span { + color: $base-white; + } + @include transition-std; &:hover { @include transition-std; @@ -251,11 +267,11 @@ padding: 0.6rem 1.2rem; border-radius: 0.5rem; cursor: default; - background: $light-black; + background: $base-gray; } textarea { - background: $light-black; + background: $base-gray; cursor: default; padding: 0.6rem 1.2rem; resize: none; diff --git a/src/assets/styles/_source.scss b/src/assets/styles/_source.scss index e1a4a1b..8791b63 100644 --- a/src/assets/styles/_source.scss +++ b/src/assets/styles/_source.scss @@ -12,14 +12,14 @@ } th { - cursor: pointer; width: 100%; height: 100%; text-align: center; font-size: 1.6rem; justify-self: center; background: transparent; - color: $base-gray; + color: $light-black; + font-weight: normal; @include transition-std; } @@ -71,6 +71,7 @@ } &__table { + border: 0.1rem solid rgba(0, 40, 100, 0.12); &__wrapper { display: flex; flex-direction: column; @@ -84,7 +85,7 @@ &__head { cursor: default; min-height: unset !important; - background: $light-black !important; + background: $base-white !important; } tr { min-height: 7rem; @@ -92,21 +93,11 @@ display: grid; grid-template-columns: 1fr 2fr 3fr 4fr; gap: 1rem; - color: $base-gray; + color: $light-black; background: $base-black; &:nth-child(2n) { - background: $light-blue; - td { - color: $light-black; - svg { - fill: $base-black; - } - span { - color: $base-black; - font-weight: bold; - } - } + background: $light-gray; } } @@ -168,6 +159,11 @@ padding: 1rem 2rem; @include transition-std; text-align: center; + color: $base-white; + + span { + color: $base-white; + } &:hover { background: $hover-blue; @@ -192,6 +188,9 @@ display: flex; flex-direction: column; gap: 4rem; + padding: 2rem; + border: 0.1rem solid rgba(0, 40, 100, 0.12); + background: $base-white; } } } @@ -204,6 +203,7 @@ h1 { font-size: 3.2rem; + color: #495057; } svg { diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss index e5d1a41..39345d3 100644 --- a/src/assets/styles/_variables.scss +++ b/src/assets/styles/_variables.scss @@ -1,11 +1,13 @@ -$base-gray: #f2f2f2; +$base-gray: #f0f4f8; +$dark-gray: #d3d3d3; +$light-gray: #fafafa; $light-black: #393e46; -$base-black: #3b4452; +$base-black: #f0f4f8; $dark-blue: #00785a; -$light-blue: #5dd8ab; -$base-blue: #2fad8c; -$hover-blue: #268a6f; -$body-white: #f7f3dd; +$light-blue: #f0f4f8; +$base-blue: #7d69ef; +$hover-blue: #6f60c7; +$base-white: #ffffff; @mixin transition-std { transition: 0.3s all ease; diff --git a/src/assets/styles/style.scss b/src/assets/styles/style.scss index c7c9129..2c2d8bd 100644 --- a/src/assets/styles/style.scss +++ b/src/assets/styles/style.scss @@ -5,7 +5,6 @@ @import "./main"; @import "./aside"; @import "./posts"; -@import "./details"; @import "./source"; @import "./edit-source"; @import "./loader.scss"; diff --git a/src/components/Aside.tsx b/src/components/Aside.tsx index eea54a8..fa8e088 100644 --- a/src/components/Aside.tsx +++ b/src/components/Aside.tsx @@ -28,7 +28,7 @@ const Aside = ({ aside, setAside }: Props) => {