Инициализация
This commit is contained in:
Arsen Mirzaev Tatyano-Muradovich
67
mirzaev/surikovlib/system/public/css/auth.css
Normal file
67
mirzaev/surikovlib/system/public/css/auth.css
Normal file
@@ -0,0 +1,67 @@
|
||||
#authentication>:is(form, div) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#authentication .exit {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
#authentication p {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#authentication p>span {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#authentication>form>input:is([type="text"], [type="password"]) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#authentication>form>input:last-child {
|
||||
margin-bottom: unset;
|
||||
}
|
||||
|
||||
#authentication>form>.submit {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#authentication>form>.submit>label {
|
||||
padding: 10px 20px;
|
||||
border: unset;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
#authentication>form>.submit>input {
|
||||
padding: 10px 20px;
|
||||
flex-grow: 1;
|
||||
border: unset;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
|
||||
#authentication>form>input[type=submit].registration {
|
||||
padding: 7px 20px;
|
||||
background-color: #86781C;
|
||||
}
|
||||
|
||||
#authentication>form>input[type=submit].registration:hover {
|
||||
background-color: #9e8d20;
|
||||
}
|
||||
|
||||
#authentication>form>input[type=submit].registration:is(:active, :focus) {
|
||||
background-color: #776b19;
|
||||
}
|
||||
|
||||
#authentication>form>ul.errors {
|
||||
margin-top: 18px;
|
||||
margin-bottom: 0px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
background-color: #ae8f8f;
|
||||
}
|
||||
52
mirzaev/surikovlib/system/public/css/books.css
Normal file
52
mirzaev/surikovlib/system/public/css/books.css
Normal file
@@ -0,0 +1,52 @@
|
||||
main>section#books {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
main>section#books>* {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
main>section#books>form.upload {
|
||||
width: calc(100% / 3 - 20px - 9px * 2);
|
||||
height: calc(220px - 9px * 2);
|
||||
margin: 5px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
main>section#books>form.upload>p {
|
||||
font-size: 3rem;
|
||||
height: 0.3rem;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
main>section#books>article.book {
|
||||
width: calc(100% / 3 - 20px);
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main>section#books>article.book:nth-child(3) {
|
||||
width: calc(100% / 3);
|
||||
margin-right: unset;
|
||||
}
|
||||
|
||||
main>section#books>article.book>img {
|
||||
height: 220px;
|
||||
object-fit: cover;
|
||||
object-position: right;
|
||||
overflow: hidden;
|
||||
clip-path: polygon(5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 5px, 5px 5px);
|
||||
}
|
||||
|
||||
main>section#books>article.book>h4 {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main>section#books>article.book>p {
|
||||
margin: unset;
|
||||
}
|
||||
262
mirzaev/surikovlib/system/public/css/main.css
Normal file
262
mirzaev/surikovlib/system/public/css/main.css
Normal file
@@ -0,0 +1,262 @@
|
||||
* {
|
||||
font-family: "open sans";
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 150px;
|
||||
grid-template-columns: auto 300px 600px auto;
|
||||
background-color: #e5ddd1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: unset;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
padding: 0px 20vw;
|
||||
}
|
||||
|
||||
aside {
|
||||
margin-right: 20px;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
aside>section {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
aside>section>h3 {
|
||||
margin-top: -0.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:is(main, aside) {
|
||||
margin-top: 30px;
|
||||
display: inline-block;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
:is(main, aside)>section {
|
||||
border-radius: 3px;
|
||||
background-color: #d9b5b5;
|
||||
}
|
||||
|
||||
:is(main, aside)>section {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
main {
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
main>section>h2 {
|
||||
margin-left: 1.5rem;
|
||||
margin-top: unset;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
/* main>section>h2:has(+ .divider) { */
|
||||
main>section>h2+.divider {
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
header {
|
||||
z-index: 1000;
|
||||
margin-bottom: 30px;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
header>.menu {
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
header>.menu>nav {
|
||||
top: 0;
|
||||
margin: 0 auto;
|
||||
height: 40px;
|
||||
padding: 15px 0;
|
||||
position: sticky;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
header>.menu>nav>#logo {
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
header>.menu>nav>#logo>img {
|
||||
height: inherit;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
header>.menu>nav>#logo~.link {
|
||||
margin-right: unset;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
header>.menu>nav>.link {
|
||||
margin: auto 0;
|
||||
margin-right: 50px;
|
||||
text-decoration: none;
|
||||
color: #e5ddd1;
|
||||
}
|
||||
|
||||
header>.menu>nav>.link:last-child {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
header>.window {
|
||||
z-index: 500;
|
||||
height: 650px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 30px;
|
||||
overflow: hidden;
|
||||
background-color: #1a1449;
|
||||
}
|
||||
|
||||
header>.window>.background {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
header>.window>.img_1 {
|
||||
left: -70px;
|
||||
bottom: -20px;
|
||||
height: 120%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
header,
|
||||
footer {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 5;
|
||||
}
|
||||
|
||||
header>nav,
|
||||
footer {
|
||||
background-color: #1a1449;
|
||||
}
|
||||
|
||||
footer {
|
||||
z-index: 800;
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.banners {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.banners>img {
|
||||
width: 100%;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.banner {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button,
|
||||
:is(a, label)[type="button"],
|
||||
input[type="submit"] {
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
border: unset;
|
||||
border-radius: 3px;
|
||||
color: #fdfdfd;
|
||||
background-color: #AD4717;
|
||||
}
|
||||
|
||||
.button:hover,
|
||||
:is(a, label)[type="button"]:hover,
|
||||
input[type="submit"]:hover {
|
||||
color: #fff;
|
||||
background-color: #c5531f;
|
||||
}
|
||||
|
||||
.button:active:is(:active, :focus),
|
||||
:is(a, label)[type="button"]:is(:active, :focus),
|
||||
input[type="radio"]:checked+label[type="button"],
|
||||
input[type="submit"]:is(:active, :focus) {
|
||||
color: #ddd;
|
||||
background-color: #993f15;
|
||||
}
|
||||
|
||||
input:is([type="checkbox"], [type="radio"]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
select,
|
||||
input:is([type="text"], [type="password"]),
|
||||
input:is([type="text"], [type="password"]).measured+.unit {
|
||||
padding: 8px 12px;
|
||||
outline: unset;
|
||||
border-radius: 3px;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
select {
|
||||
padding-top: unset;
|
||||
padding-bottom: unset;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select.measured,
|
||||
input:is([type="text"], [type="password"]).measured {
|
||||
margin-right: unset;
|
||||
padding-right: 3px;
|
||||
text-align: right;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
select.measured+.unit,
|
||||
input:is([type="text"], [type="password"]).measured+.unit {
|
||||
margin-right: 3px;
|
||||
padding-left: unset;
|
||||
display: inline;
|
||||
border-radius: 0 3px 3px 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.unit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.unselectable,
|
||||
.unselectable * {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.divider+h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section>div.divider {
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 3px solid #aaa9a9;
|
||||
}
|
||||
33
mirzaev/surikovlib/system/public/css/upload.css
Normal file
33
mirzaev/surikovlib/system/public/css/upload.css
Normal file
@@ -0,0 +1,33 @@
|
||||
form.upload {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
border: 4px dashed #e5ddd1;
|
||||
}
|
||||
|
||||
form.upload:hover {
|
||||
background-color: #ccc6bd;
|
||||
border: 4px dashed #fff7ea;
|
||||
}
|
||||
|
||||
form.upload>p {
|
||||
margin: auto;
|
||||
font-weight: bold;
|
||||
color: #eee6d9;
|
||||
}
|
||||
|
||||
form.upload:hover>p {
|
||||
color: #fff7ea;
|
||||
}
|
||||
|
||||
form.upload>input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
form.upload:hover>input {
|
||||
cursor: pointer;
|
||||
}
|
||||
Reference in New Issue
Block a user