/*для позиционирования по центру*/
/*html, body.form {
height: 100%;
}*/
/** {
box-sizing: border-box;
}*/
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -40px;
}
.footer,
.push {
height: 40px;
}
html, body, img, div, a, table {
image-rendering: -webkit-optimize-contrast !important;
}
.a-links {
color: #FF9C22;
text-decoration: none;
/*font-weight: bold;
font-size: 1em;
*/
}
.a-links:hover {
color: #2986B3;
text-decoration: none;
}
.a-kinorium {
color: #21B0D0;
text-decoration: none;
/*font-weight: bold;
font-size: 1em;
*/
}
.a-kinorium:hover {
color: #2986B3;
text-decoration: none;
}
.a-oscarnowatch {
color: darkgrey;
text-decoration: none;
}
.a-oscarnowatch:hover {
color: #2986B3;
text-decoration: none;
}
.logo {
display: block;
background: url(/template/images/cinemahub.png)50% no-repeat;
width: 150px;
height: 31px;
margin-left: -30px;
margin-top:-2px;
margin-right: 0px;
float: left;
}
.logo2 {
display: block;
background: url(/template/images/cinemahub2.png)50% no-repeat;
width: 160px;
height: 34px;
margin-left: -30px;
margin-top:-3px;
margin-right: -10px;
float: left;
}
.calendar {
display: block;
background: url(/template/images/calendar.png)50% no-repeat;
width: 32px;
height: 30px;
margin-left: 30px;
margin-top: 0px;
margin-right: 0px;
float: left;
}
.rndflick {
display: block;
background: url(/template/images/randomflick.png)50% no-repeat;
width: 32px;
height: 32px;
margin-left: 30px;
margin-top:-2px;
margin-right: 10px;
float: left;
}
.rndperson {
display: block;
background: url(/template/images/randomperson.png)50% no-repeat;
width: 32px;
height: 30px;
margin-left: 6px;
margin-top:-2px;
margin-right: 0px;
float: left;
}
.rndgenre {
display: block;
background: url(/template/images/randomgenre.png)50% no-repeat;
width: 32px;
height: 30px;
margin-left: 10px;
margin-top:-2px;
margin-right: 10px;
float: left;
}
.tooltip_templates {
display: none;
}
html.form, html.pass {
display: table;
margin: auto;
}
.backimgWinter {
background-image: url('pics/winter.png');
background-repeat: no-repeat;
background-position: center;
}
.backimgSpring {
background-image: url('pics/spring.png');
background-repeat: no-repeat;
background-position: left;
}
.backimgAutumn {
background-image: url('pics/autumn.png');
background-repeat: no-repeat;
background-position: center;
}
.backimgSummer {
background-image: url('pics/summer.png');
background-position: right top;
background-repeat: no-repeat;
}
/*стиль к содержимому страницы form.php */
body.form {
background-color: #DCDCDC;
/*background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;*/
font-family: 'Denk One', sans-serif;
display: table-cell;
vertical-align: middle;
/*font-family: 'Denk One', sans-serif;*/
}
/*стиль к содержимому страницы index.php */
body.index {
/*background-image: url(images/blue.jpg);*/
background-color: #DCDCDC;
font-family: palatino;
font-size: 16px;
}
body.mwd {
background-image: url('pics/cinema-screen.jpg');
background-repeat: no-repeat;
}
/*h1 {
color: #5DC4F8;
text-shadow: 1px 1px 2px black, 0 0 0.1em #5DC4F8;
text-align: center;
}*/
/*.h1-flick {
color: #FFD700;
text-shadow: 1px 1px 2px black;
text-align: center;
}
*/
/*
.h1-flickS {
border-bottom: 1px dashed black;
text-shadow: 1px 1px 2px black; Параметры тени
text-align: center;
}*/
/*.h1-person {
text-shadow: 1px 1px 2px black;
text-align: center;
}*/
.h1-person-origname {
color: grey;
font-size: 0.7em;
text-shadow: none;
text-align: center;
}
.text-flick {
color: #2F4F4F;
}
.h1-index {
text-shadow: none;
color:#E9661E;
text-align: center;
font-family: palatino;
font-size: 3em;
margin: 0;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
.h1-weekend {
color:#FF74FF;
}
input[type=text]:focus {
border: solid #0088cc 2px;
}
input[type=text]:hover {
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
textarea:focus {
border: solid #0088cc 2px;
}
textarea:hover {
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
/*input[type=submit] {
padding:5px 15px;
cursor: pointer;
background-color: #20B2AA;
color: white;
font-size: 16px;
border-radius: 10px;
border: solid #20B2AA;
}*/
/*input[type=submit]:hover {
box-shadow: 0 0 5px rgba(0,0,0,0.6);
}*/
/*input[type=button] {
padding:5px 10px;
cursor: pointer;
} */
/*input[type=button]:hover {
box-shadow: 0 0 5px rgba(0,0,0,0.6);
}*/
a {
color: #FF9C22;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #2986B3;
text-decoration: none;
}
.a-casual {
color: black;
text-decoration: none;
font-weight: normal;
}
.a-casual:hover {
color: black;
text-decoration: none;
}
.flick-day-movie-list {
color: #FF9C22;
text-decoration: none;
font-weight: normal;
}
.flick-day-movie-list:hover {
color: #2986B3;
text-decoration: none;
}
.a-dir:hover {
color: #2986B3;
text-decoration: none;
}
label {
font-weight: normal;
}
textarea {
font-family: palatino;
font-size: 20px;
}
table {
margin-left: 10%;
margin-right: 10%;
border-collapse: collapse;
background: white;
}
.content {
text-align: left;
}
.content_div {
color: black;
font-weight: normal;
}
th {
text-align: center;
font-size: 18px;
}
td {
border: black solid 1px;
padding: 5px;
height: 30px;
text-align: center;
font-size: 20px;
}
.weekend {
background-color: #FFB6C1;
}
.work {
background-color: #D6D6D6;
}
/*table tr:hover {
box-shadow: 0 0 5px rgba(0,0,0,0.6);
}*/
.nohover:hover {
color: black;
background-color: #FFFFFF;
box-shadow: none;
}
.nohover {
border: solid black 1px;
}
.tdGood {
background-color: #94D363;
}
.tdBad {
background-color: #D37F6C;
}
.impDayBold {
font-weight: bold;
}
/*buttons_begin*/
button {
cursor: pointer;
padding:5px 10px;
background-color: #20B2AA;
color: white;
font-size: 16px;
border-radius: 10px;
border: solid #20B2AA;
}
.button {
cursor: pointer;
padding:5px 10px;
background-color: #20B2AA;
color: white;
font-size: 16px;
border-radius: 10px;
border: solid #20B2AA;
}
.sm_button {
cursor: pointer;
padding:2px 4px;
background-color: #3CB371;
color: white;
font-size: 12px;
border-radius: 5px;
border: solid #3CB371;
}
.more_button {
cursor: pointer;
}
.more_button:hover {
margin-left: 12px !important;
}
.sm_button2 {
cursor: pointer;
padding: 0px 3px;
/*background-color: #DCDCDC;*/
background-color: white;
color: #A9A9A9;
font-size: 12px;
border-radius: 5px;
border: solid 1px #A9A9A9;
/*margin-top: 5px;*/
}
.RandDayButton {
/*position: absolute;
right: 20%;
top: 1%;*/
padding: 5px 10px;
cursor: pointer;
background-color: #20B2AA;
color: white;
font-size: 16px;
border-radius: 10px;
border: solid #20B2AA;
}
.RandFilmButton {
/*position: absolute;
right: 20%;
top: 1%;*/
padding: 5px 10px;
cursor: pointer;
background-color: #00FFFF;
color: white;
font-size: 16px;
border-radius: 10px;
border: solid #00FFFF;
}
.TodayHistoryButton {
/*position: absolute;
right: 30%;
top: 1%;*/
margin-left:30px;
padding: 5px 10px;
cursor: pointer;
background-color: #98FB98;
color: white;
font-size: 16px;
border-radius: 10px;
border: solid #98FB98;
}
.NewDayButton {
/*position: absolute;
left: 50%;
top: 1%;*/
padding: 5px 10px;
cursor: pointer;
background-color: #BA55D3;
color: white;
font-size: 16px;
border-radius: 10px;
border: solid #BA55D3;
}
.flickSearchButton {
padding: 5px 10px;
cursor: pointer;
background-color: #228B22;
color: white;
font-size: 14px;
border-radius: 10px;
border: solid #228B22;
}
.clearCinemaButton {
padding: 5px 10px;
cursor: pointer;
background-color: #708090;
color: white;
font-size: 14px;
border-radius: 10px;
border: solid #708090;
}
.signOut {
/*position: absolute;
right: 10%;
top: 1%; */
padding: 3px 6px;
cursor: pointer;
background-color: #C0C0C0;
color: white;
font-size: 16px;
border-radius: 10px;
border: solid #C0C0C0;
}
.signOut:hover {
box-shadow: 0 0 5px red;
}
.RandDayButton:hover, .TodayHistoryButton:hover, .NewDayButton:hover {
box-shadow: 0 0 5px rgba(0,0,0,0.6);
}
/*a button:hover {
box-shadow: 0 0 5px rgba(0,0,0,0.6);
}*/
.randomButtons {
float: right;
}
.button-save {
cursor: pointer;
padding:5px 10px;
background-color: green;
color: white;
font-size: 14px;
border-radius: 10px;
border: solid green;
}
.button-save-sm {
cursor: pointer;
padding: 1px 3px;
background-color: green;
color: white;
font-size: 12px;
border-radius: 5px;
border: solid green;
}
.button-addMovie {
cursor: pointer;
padding:2px 5px;
background-color: #6A5ACD;
color: white;
font-size: 14px;
border-radius: 10px;
border: solid #6A5ACD;
}
.button-addImg {
cursor: pointer;
padding:2px 5px;
background-color: #DA70D6;
color: white;
font-size: 14px;
border-radius: 10px;
border: solid #DA70D6;
}
.button-back {
cursor: pointer;
padding:5px 10px;
background-color: gray;
color: white;
font-size: 12px;
border-radius: 10px;
border: solid gray;
}
.randomButtonStyle {
cursor: pointer;
padding:5px 10px;
background-color: #1E90FF;
color: white;
font-size: 14px;
border-radius: 10px;
border: solid #1E90FF;
}
.randomButtonStyle2 {
cursor: pointer;
padding:5px 10px;
background-color: #6495ED;
color: white;
font-size: 14px;
border-radius: 10px;
border: solid #6495ED;
}
.prevNextDays {
cursor: pointer;
padding:5px 10px;
background-color: #20B2AA;
color: white;
font-size: 12px;
border-radius: 10px;
border: solid #20B2AA;
}
.prevNextDaysDisabled {
cursor: not-allowed;
opacity: 0.2;
padding:5px 10px;
background-color: #20B2AA;
color: white;
font-size: 12px;
border-radius: 10px;
border: solid #20B2AA;
}
.reload:hover {
opacity: 1 !important;
}
.renewTable {
padding: 5px 10px;
cursor: pointer;
background-color: #228B22;
color: white;
font-size: 16px;
border-radius: 10px;
border: solid #228B22;
}
.changeButton {
padding: 5px 10px;
cursor: pointer;
background-color: #FFA500;
color: white;
font-size: 16px;
border-radius: 10px;
border: solid #FFA500;
}
.newDay {
padding: 5px 10px;
cursor: pointer;
background-color: #FFA500;
color: white;
font-size: 16px;
border-radius: 10px;
border: solid #FFA500;
}
/*buttons_end*/
#toTop {
width:50px;
border:1px solid #ccc;
background:#f7f7f7;
text-align:center;
padding-top:555px;
padding-bottom:555px;
/*padding:5px;*/
position:fixed;
bottom:0px; /* отступ кнопки от нижнего края страницы*/
left:0px;
cursor:pointer;
display:none;
color:#333;
font-family:verdana;
font-size:11px;
}
.radioForm {
width: 200px;
float: left;
}
.multiselect {
border: solid darkgrey;
margin-bottom:-5px;
font-size: 14px;
}
a:active, a:focus {
outline: none !important;
}
a::-moz-focus-inner {
border: 0 !important;
}
.movie-block {
width: 100px;
height: 160px;
padding: 10px 10px;
/* border: solid black 1px;*/
float: left;
}
.movie-block-big {
width: 200px;
height: 400px;
padding: 10px 10px;
margin: 3px;
/* border: solid black 1px;*/
float: left;
display:inline-block;
position:relative;
}
.movie-block-big2 {
width: 200px;
height: 420px;
padding: 10px 18px;
/* margin: 3px 34px 3px 20px;*/
/* border: solid black 1px;*/
float: left;
display:inline-block;
position:relative;
text-align: center;
}
.movie-block-small {
width: 100px;
height: 150px;
padding: 10px 10px;
margin: 3px 4px 3px 10px;
/* border: solid black 1px;*/
float: left;
display:inline-block;
position:relative;
text-align: center;
}
.movie-block-big2_person {
width: 200px;
height: 420px;
padding: 10px 10px;
margin: 3px 4px 3px 10px;
/* border: solid black 1px;*/
float: left;
display:inline-block;
position:relative;
text-align: center;
}
.movie-block-small_person {
width: 100px;
height: 150px;
padding: 10px 10px;
margin: 3px 4px 3px 10px;
/* border: solid black 1px;*/
float: left;
display:inline-block;
position:relative;
text-align: center;
}
.movie-block-big3 {
width: 180px;
height: 250px;
/*padding: 10px 10px;*/
margin-right: 26px;
margin-bottom: 26px;
/* border: solid black 1px;*/
float: left;
display:inline-block;
position:relative;
}
.movie-block-huge {
width: 300px;
height: 540px;
padding: 10px 10px;
margin: 3px 46px 3px 0px;
/* border: solid black 1px;*/
float: left;
display:inline-block;
position:relative;
text-align: center;
}
.movie-block-huge_person {
width: 300px;
height: 540px;
padding: 5px 5px;
margin: 3px 6px 3px 10px;
/* border: solid black 1px;*/
float: left;
display:inline-block;
position:relative;
text-align: center;
}
.ratings-block2 {
display:inline-block;
position:absolute;
bottom:10px;
left:10px;
background: white;
border-radius: 6px;
border: 3px white;
}
.vote-span {
display:inline-block;
position:absolute;
top:20px;
left:174px;
}
.vote-span-ppl {
display:inline-block;
position:absolute;
top:20px;
left:168px;
}
.vote-span2 {
display:inline-block;
position:absolute;
top:10px;
left:130px;
}
.vote-span-huge {
display:inline-block;
position:absolute;
top:30px;
left:242px;
}
.vote-span-mini {
display:inline-block;
position:absolute;
top:18px;
left:90px;
}
.vote-span-main {
display:inline-block;
position:absolute;
top:10px;
left:140px;
}
.year-span {
display:inline-block;
position:absolute;
top:22px;
left:26px;
/*opacity: 0.8;*/
font-size: 1.4em;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-weight: bold;
font-family: arial;
}
.year-span-ppl {
display:inline-block;
position:absolute;
top:22px;
left:20px;
/*opacity: 0.8;*/
font-size: 1.4em;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-weight: bold;
font-family: arial;
}
.year-span2 {
display:inline-block;
position:absolute;
top:14px;
left:10px;
font-size: 1.2em;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-family: arial;
}
.year-span-huge {
display:inline-block;
position:absolute;
top:34px;
left:30px;
/*opacity: 0.8;*/
font-size: 1.8em;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-weight: bold;
font-family: arial;
}
.fav-img {
display:inline-block;
position:absolute;
bottom: 64px;
right:40px;
}
.fav-img2 {
display:inline-block;
position:absolute;
bottom: 50px;
right:36px;
}
.fav-img-dir {
display:inline-block;
position:absolute;
bottom: 36px;
right:40px;
}
.nat-img {
display:inline-block;
position:absolute;
bottom: 66px;
left:10px;
}
.nat-img2 {
display:inline-block;
position:absolute;
bottom: 50px;
right:10px;
}
.nat-img-dir {
display:inline-block;
position:absolute;
bottom: 36px;
left:10px;
}
.rating-img {
display:inline-block;
position:absolute;
top: 10px;
right:40px;
}
.photo-block {
width: 300px;
height: 220px;
/* padding: 5px 5px;*/
margin: 25px;
/*border: solid black 1px;*/
float: left;
}
.goldenBorder {
border-radius: 12px;
border: solid 7px gold;
}
.goldenBorder2 {
border-radius: 6px;
border: solid 3px gold;
}
.silverBorder {
border-radius: 12px;
border: solid 7px silver;
}
.silverBorder2 {
border-radius: 6px;
border: solid 2px silver;
}
.goldenBorder3 {
border-radius: 6px;
border: solid 3px gold;
}
.silverBorder3 {
border-radius: 6px;
border: solid 3px silver;
}
.bigPosterBorder {
border-radius: 6px;
border: 3mm ridge rgb(63, 32, 18, .5);
}
.bigPosterBorderRew {
border-radius: 6px;
border: 3mm ridge #3AE2CE;
}
.calendarDiv {
float: left;
padding: 10px;
margin: 20px;
width: 200px;
height: 300px ;
border: solid 2px black;
}
.good-movie-rating {
color: #2E8B57;
font-weight: 600;
}
.soso-movie-rating {
color: #696969;
font-weight: 600;
}
.bad-movie-rating {
color: #FD6347;
font-weight: 600;
}
/*.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert h4 {
margin-top: 0;
color: inherit;
}
.alert .alert-link {
font-weight: bold;
}
.alert > p,
.alert > ul {
margin-bottom: 0;
}
.alert > p + p {
margin-top: 5px;
}
.alert-dismissable,
.alert-dismissible {
padding-right: 35px;
}
.alert-dismissable .close,
.alert-dismissible .close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-success hr {
border-top-color: #c9e2b3;
}
.alert-success .alert-link {
color: #2b542c;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-info hr {
border-top-color: #a6e1ec;
}
.alert-info .alert-link {
color: #245269;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.alert-warning hr {
border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
color: #66512c;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
.alert-danger hr {
border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
color: #843534;
}
button.close {
-webkit-appearance: none;
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
}*/
.search{
position:relative;
}
.search_result, .search_result2 {
background: #FFF;
border: 1px #ccc solid;
width: 300px;
border-radius: 4px;
max-height:400px;
overflow-y:auto;
display:none;
position: absolute; z-index:10000;
}
.search_result li, .search_result2 li{
list-style: none;
padding: 5px 10px;
margin: 0 0 0 -40px;
color: #0896D3;
border-bottom: 1px #ccc solid;
cursor: pointer;
transition:0.3s;
}
.search_result li:hover, .search_result2 li:hover {
background: #F5DEB3;
}
.a-list {
color: #003B82;
text-decoration: none;
font-weight: bold;
font-size: 1em;
}
.a-list:hover {
color: #003B82;
text-decoration: none;
font-size: 1em;
}
.imgKpRatingSize {
width: 102px;
height: 38px;
}
.goldenBorder2:hover, .goldenBorder3:hover, .silverBorder3:hover, .silverBorder2:hover {
opacity: 1 !important;
}
.stats_titles {
color: #FF9C22 !important;
}
.stats_titles:hover {
color: #2986B3 !important;
}
.main-opacity img {
-webkit-filter: opacity(50%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.main-opacity img:hover {
-webkit-filter: opacity(100%);
}
.dead-opacity {
-webkit-filter: opacity(50%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.dead-opacity:hover {
-webkit-filter: opacity(100%);
}
.poster-baw-opacity img {
-webkit-filter: sepia(100%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.poster-baw-opacity img:hover {
-webkit-filter: sepia(0%);
}
.select-css {
display: inline-block;
/*font-size: 14px;*/
font-family: 'Arial';
/*font-weight: 700;*/
color: #444;
line-height: 1.3;
/* padding: .2em .3em .2em .2em;*/
padding-left:10px;
padding-top:4px;
padding-bottom:4px;
padding-right:20px;
width: auto;
/* max-width: 100%;*/
box-sizing: border-box;
margin: 0;
border: 1px solid #aaa;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
border-radius: .4em;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
background-repeat: no-repeat, repeat;
background-position: right .3em top 50%, 0 0;
background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
display: none;
}
.select-css:hover {
border-color: #888;
cursor: pointer;
}
.select-css:focus {
border-color: #aaa;
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
box-shadow: 0 0 0 3px -moz-mac-focusring;
color: #222;
outline: none;
}
.select-css option {
font-weight:normal;
}
.select-css:disabled, .select-css[aria-disabled=true] {
color: graytext;
opacity: 0.6;
cursor: not-allowed;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}
.select-css:disabled:hover, .select-css[aria-disabled=true] {
border-color: #aaa;
}
/*стили для селекта для киноигр, от DeepSeek*/
.custom-select {
position: relative;
width: 200px;
}
.custom-select select {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
appearance: none; /* Убираем стандартную стрелку */
background-color: #f9f9f9;
}
.custom-select::after {
content: '▼';
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
pointer-events: none;
color: #333;
}
/*чужие стили для календаря*/
.calendar-item {
width: 1120px;
display: inline-block;
vertical-align: top;
margin: 0 16px 20px;
font: 14px/1.2 Arial, sans-serif;
margin-bottom: 80px;
}
.calendar-head {
text-align: left;
margin-left: 120px;
margin-bottom: 20px;
padding: 5px;
font-weight: 600;
font-size: 24px;
color: darkgrey;
}
.calendar-item table {
border-collapse: collapse;
width: 100%;
margin-left: 120px;
}
.calendar-item th {
font-size: 18px;
padding: 6px 7px;
text-align: center;
color: #888;
font-weight: normal;
}
.calendar-item td {
font-size: 13px;
padding: 6px 5px;
text-align: center;
border: 1px solid #ddd;
width: 160px;
height: 150px;
}
.calendar-item tr th:nth-child(6), .calendar-item tr th:nth-child(7),
.calendar-item tr td:nth-child(6), .calendar-item tr td:nth-child(7) {
color: #e65a5a;
}
.calendar-day {
position: relative;
}
.calendar-day.last {
color: #999 !important;
}
.calendar-day.today {
font-weight: bold;
}
.calendar-day.empty {
background-color: darkgrey;
}
/*стили для выпадающего меню*/
/*.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}*/
.dropdown {
position: relative;
/*display: inline-block;*/
}
.dropdown-content-flicks {
display: none;
position: absolute;
left: 160px;
top: 24px;
background-color: white;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content-people {
display: none;
position: absolute;
left: 290px;
top: 24px;
background-color: white;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content-oscars {
display: none;
position: absolute;
left: 398px;
top: 24px;
background-color: white;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content-other {
display: none;
position: absolute;
left: 516px;
top: 24px;
background-color: white;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content-flicks a, .dropdown-content-people a, .dropdown-content-oscars a, .dropdown-content-other a {
color: orange;
font-size: 1.2em;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content-flicks a:hover {background-color: #F8F8F8;}
.dropdown-content-people a:hover {background-color: #F8F8F8;}
.dropdown-content-oscars a:hover {background-color: #F8F8F8;}
.dropdown-content-other a:hover {background-color: #F8F8F8;}
.dropdown:hover .dropdown-content-flicks {display: block;}
.dropdown:hover .dropdown-content-people {display: block;}
.dropdown:hover .dropdown-content-oscars {display: block;}
.dropdown:hover .dropdown-content-other {display: block;}
/*.dropdown:hover .dropbtn {background-color: #3e8e41;}*/
@keyframes blink {
0%, 100% { opacity: 1; } /* Элемент виден */
50% { opacity: 0; } /* Элемент мерцает и становится невидимым! */
}
.blink-text {
animation: blink 1s step-end infinite; /* Позволяет тексту постоянно мигать */
}
/* Стили для модального окна от DeepSeek */
.modal {
display: none; /* Скрыто по умолчанию */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
}
.modal-content {
background-color: #fefefe;
margin: 100px auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 800px;
text-align: center;
}
.close {
color: #aaa;
position: absolute;
top: 10px;
right: 10px;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover {
color: black;
}
.message {
display: none;
font-family: Arial;
background-color: #2986B3;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 10px;
margin-left: 10px;
position: absolute; /* Позиционирование сообщения */
z-index: 1000;
color: white;
}
.popup-message {
font-family: Arial;
display: none; /* Скрываем сообщение по умолчанию */
position: absolute; /* Абсолютное позиционирование */
background-color: #2986B3;
color: white;
padding: 10px 15px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1100;
/*white-space: nowrap;*/ /* Чтобы текст не переносился */
animation: fadeInOut 2s ease-in-out;
}
@keyframes fadeInOut {
0% { opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#timer {
vision: hidden;
text-align: center;
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный фон */
z-index: 999; /* Оверлей ниже модального окна, но выше всего остального */
display: none; /* По умолчанию скрыт */
}
/* Стили для модального окна */
#nameInputModal {
font-family: Arial;
position: fixed;
top: 50%;
left: 35%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
z-index: 1000; /* Модальное окно выше оверлея */
display: none; /* По умолчанию скрыто */
}
/* Стили для неактивной кнопки "ОК" */
#okButton[disabled] {
opacity: 0.2;
cursor: not-allowed;
}
/* Стили для активной кнопки "ОК" */
#okButton:not([disabled]) {
opacity: 1;
cursor: pointer;
}
/* Стили для сообщения об ошибке */
#errorMessage {
color: #F07427;
display: none;
}
/* Стили для модального окна */
.modal-top {
display: none; /* Скрыто по умолчанию */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
}
.modal-top-content {
background-color: #fefefe;
margin: 100px auto 0; /* Отступ сверху 40px, снизу 0 */
padding: 20px;
border: 1px solid #888;
width: 90%; /* Ширина окна */
max-width: 800px; /* Максимальная ширина */
text-align: center;
}
/* Стили для таблицы с ID topPlayersTable */
#topPlayersTable {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
margin-left: 0%;
border: 1px solid #888;
}
#topPlayersTable th, #topPlayersTable td {
padding: 10px;
/* text-align: left;*/
border-bottom: 1px solid #ddd;
}
#topPlayersTable th {
background-color: #2986B3; /* Цвет фона заголовков */
color: white; /* Цвет текста заголовков */
}
/* Стили для модального окна */
.modal-last10 {
display: none; /* Скрыто по умолчанию */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
}
.modal-last10-content {
background-color: #fefefe;
margin: 100px auto 0; /* Отступ сверху 100px, снизу 0 */
padding: 20px;
border: 1px solid #888;
width: 90%; /* Ширина окна */
max-width: 1200px; /* Максимальная ширина */
text-align: center;
}
/* Стили для таблицы с ID last10Table */
#last10Table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
margin-left: 0%;
border: 1px solid #888;
}
#last10Table th, #last10Table td {
padding: 10px;
border-bottom: 1px solid #ddd;
}
#last10Table th {
background-color: #2986B3; /* Цвет фона заголовков */
color: white; /* Цвет текста заголовков */
}
/* Стили для ячейки с результатом */
.win {
background-color: #96C8A2; /* Зеленый цвет */
color: transparent; /* Скрываем текст */
}
.lose {
background-color: #FFA089; /* Красный цвет */
color: transparent; /* Скрываем текст */
}
.interrupted {
background-color: #CCCCCC; /* Красный цвет */
color: transparent; /* Скрываем текст */
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: background-color 0.4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: transform 0.4s;
border-radius: 50%;
}
/* Стили для включенного состояния */
input:checked + .slider {
background-color: #2986B3; /* Ваш цвет */
}
input:checked + .slider:before {
transform: translateX(26px);
}
/* Анимация при клике */
input:checked + .slider {
transition: background-color 0.4s;
}
input:checked + .slider:before {
transition: transform 0.4s;
}
.theme-switch {
cursor: pointer;
}
.theme-switch input {
display: none; /* Скрываем чекбокс */
}
#theme-icon {
width: 30px; /* Размер иконки */
height: 30px;
vertical-align: middle;
}
:root {
--background-color: #ffffff;
--text-color: #000000;
}
[data-theme="dark"] {
--background-color: #2C3E50;
/* --text-color: #838996;*/
--text-color: #cdd2dd;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
[data-theme="dark"] .text-flick {
color: #cdd2dd; /* Новый цвет для темной темы */
}
[data-theme="dark"] #header-div {
background-color: #3A3A3A !important;
border-bottom: none !important;
}
[data-theme="dark"] #mainform {
background-color: #4A6A8D ;
}
#mainform, [data-theme="dark"] .ppl-div, [data-theme="dark"] .oscar-winner-div {
background-color: #4C759F !important;
}
[data-theme="dark"] .texts {
background-color: #4A6A8D ;
color: #cdd2dd;
}
.texts {
background-color: #f8f8f8 ;
color: #323232;
}
[data-theme="dark"] #collectionTitle {
color: #cdd2dd !important;
}
[data-theme="dark"] #flickIndexPeriod {
color: #cdd2dd !important;
}
[data-theme="dark"] #linkcopy {
opacity: 1 !important;
}
[data-theme="dark"] .dropdown-content-people, [data-theme="dark"] .dropdown-content-oscars, [data-theme="dark"] .dropdown-content-flicks, [data-theme="dark"] .dropdown-content-other {
background-color: #3A3A3A !important;
}
[data-theme="dark"] .modal-content, [data-theme="dark"] .modal-last10-content, [data-theme="dark"] .modal-top-content,
[data-theme="dark"] #last10Table,
[data-theme="dark"] #topPlayersTable {
background-color: #313939 !important;
}
[data-theme="dark"] #topPlayersTable td, [data-theme="dark"] #last10Table td {
border-bottom: 1px solid black !important;
}
[data-theme="dark"] .select-css {
background-color: #313939 !important;
color: #cdd2dd !important;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
}
[data-theme="dark"] #cat-images img {
background-color: #cdd2dd;
border-radius: 4px;
}
[data-theme="dark"] .sm_button2 {
cursor: pointer;
padding: 0px 3px;
background-color: #333;
color: #919090;
font-size: 12px;
border-radius: 5px;
border: solid 1px #919090;
/*margin-top: 5px;*/
}
@media screen and (orientation: landscape) {
body.quiz-body:not(.keyboard-active)::before {
content: "Скорее поверни меня обратно!";
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
z-index: 9999;
text-align: center;
padding-top: 20%;
font-size: 2.5em;
font-family: Arial;
color: #2986B3;
}
}
#start {
transition: filter 0.3s ease; /* Плавное изменение яркости */
}
#start:hover {
filter: brightness(1.2); /* Увеличиваем яркость на 20% */
}
.cinemaplay-links {
color:#C1710D;
}
.cinemaplay-links:hover {
color:#0E5F86;
}
[data-theme="dark"] .clickMe {
opacity: 1; /* Убираем прозрачность */
filter: brightness(1.5) invert(1); /* Увеличиваем яркость и инвертируем цвета */
transition: filter 0.3s ease; /* Добавляем плавный переход */
}
.disabled-option {
color:#F07427;
}
#gameArea {
font-family: Arial, sans-serif;
width: 800px;
margin: 0 auto;
padding: 20px 0;
}
.block-game {
margin-bottom: 50px;
}
.game-poster-container {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.game-poster {
width: 264px;
height: 352px;
object-fit: cover;
cursor: pointer;
border-radius: 10px;
transform-origin: center center;
transition: all 0.3s ease;
}
.game-ratings {
display: flex;
flex-direction: column;
align-items: center;
width: calc(100% - 300px);
transition: all 0.5s ease;
position: absolute;
right: 0;
}
.game-ratings.centered {
left: 50%;
transform: translateX(-50%);
right: auto;
}
.game-rating-category {
display: flex;
margin-bottom: 15px;
align-items: center;
}
.game-emoji {
font-size: 30px;
margin: 0 2px;
}
.game-info {
text-align: center;
line-height: 1.6;
}
.game-review-box {
width: 600px;
margin: 0 auto;
padding: 10px;
border: 2px solid #ccc;
text-align: left;
border-radius: 10px;
}
.escaped-poster {
position: absolute;
z-index: 1000;
width: 264px;
height: 352px;
object-fit: cover;
cursor: pointer;
transition: left 0.3s ease, top 0.3s ease;
transform-origin: center center;
}
.game-links-block {
text-align: center;
}
.games-games-container {
width: 1160px;
display: flex;
flex-wrap: wrap;
gap: 40px;
margin: 0 auto;
}
.games-game-poster {
width: 200px;
margin-bottom: 20px;
}
/* Базовые стили для всех постеров игр */
.games-game-poster img:not(.games-game-vote-img),
.games-game-poster a img:not(.games-game-vote-img) {
border-radius: 5px;
width: 200px;
height: auto;
}
/* Черно-белый эффект */
.grayscale-poster img,
.grayscale-poster a img {
filter: grayscale(100%);
}
/* Полупрозрачность */
.opacity-poster img,
.opacity-poster a img {
opacity: 0.5;
}
/* Hover-эффекты для обоих случаев */
.grayscale-poster img:hover,
.grayscale-poster a img:hover,
.opacity-poster img:hover,
.opacity-poster a img:hover {
filter: none;
opacity: 1;
transition: 0.3s;
}
/* Если нужно применить hover только когда родительский элемент имеет класс */
.grayscale-poster:hover img,
.grayscale-poster:hover a img,
.opacity-poster:hover img,
.opacity-poster:hover a img {
filter: none;
opacity: 1;
transition: 0.3s;
}
.wishlist-poster {
position: relative;
}
.wishlist-poster::after {
content: "✓";
position: absolute;
top: 8px; /* Увеличил для компенсации размера */
right: 8px; /* Увеличил для компенсации размера */
color: #4CAF50;
font-weight: bold;
font-size: 24px; /* Увеличил размер в 2 раза (обычно стандартный размер ~12px) */
line-height: 1; /* Чтобы не влияли line-height родителя */
}
.games-game-title {
width: 200px;
margin-bottom: 6px;
font-family: Arial;
font-size: 16px;
margin-top: 6px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
mask-image: linear-gradient(
to right,
black 170px,
transparent 200px
);
}
.games-game-details {
display: flex;
align-items: center;
font-size: 14px;
color: #666;
}
.games-game-vote-img {
margin-left: 10px;
height: 20px;
width: auto;
}
#games-form {
width: 1160px;
margin: 20px auto;
padding: 10px;
}
.games-select, .games-button {
padding: 5px 5px;
margin-right:5px;
}
.games-select.active-filter {
border: 2px solid #FFA500; /* Оранжевая граница */
border-radius: 4px;
}
#game-title-wrapper:hover .nav-arrow {
opacity: 0.5 !important;
}
.games-count-header {
padding: 10px 0;
border-bottom: 1px solid #eee;
margin-left: 10px;
font-family: Arial, sans-serif;
}
.games-count-header span.rating {
color: #2986B3;
font-weight: normal;
}
/* Общие стили (оставляем как есть) */
.author-name {
font-size: 2.5em;
}
.author-content-wrapper {
display: flex;
gap: 200px; /* Можно оставить 100px или вернуть 200px - это не повлияет на ширину портрета */
}
.author-portrait-container {
position: sticky;
top: 70px;
align-self: flex-start;
width: 300px; /* Фиксированная ширина */
flex: 0 0 300px; /* Не позволять элементу сжиматься или растягиваться */
}
.author-portrait {
width: 100%; /* Занимает всю ширину контейнера (300px) */
height: auto;
border-radius: 5px;
max-width: 100%; /* Защита от переполнения */
}
.author-bibliography {
flex: 1;
min-width: 0; /* Это важно! Позволяет контенту сжиматься, не влияя на левую колонку */
}
.author-book-item {
display: flex;
margin-bottom: 30px;
gap: 20px;
}
/* Полностью переделываем стили для обложек книг */
.author-book-cover-container {
position: relative;
width: 140px;
height: 200px;
}
.author-book-cover {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
border: 1px solid #ddd;
background: white;
box-shadow:
0 0 0 1px #eee,
0 2px 4px rgba(0,0,0,0.1);
}
/* Новый подход к толщине книги - через box-shadow */
.author-book-length-tiny {
box-shadow:
2px 2px 0 #d0d0d0,
3px 3px 0 #e0e0e0,
0 2px 4px rgba(0,0,0,0.1);
}
.author-book-length-small {
box-shadow:
3px 3px 0 #d0d0d0,
5px 5px 0 #e0e0e0,
0 2px 4px rgba(0,0,0,0.1);
}
.author-book-length-medium {
box-shadow:
5px 5px 0 #d0d0d0,
8px 8px 0 #e0e0e0,
0 2px 4px rgba(0,0,0,0.1);
}
.author-book-length-long {
box-shadow:
7px 7px 0 #d0d0d0,
11px 11px 0 #e0e0e0,
0 2px 4px rgba(0,0,0,0.1);
}
.author-book-length-verylong {
box-shadow:
9px 9px 0 #d0d0d0,
14px 14px 0 #e0e0e0,
0 2px 4px rgba(0,0,0,0.1);
}
/* Остальные стили оставляем как есть */
.author-book-info {
flex: 1;
min-width: 0;
}
.author-book-title {
width: 100%;
margin-bottom: 6px;
font-size: 18px;
margin-top: 6px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
mask-image: linear-gradient(
to right,
black 80%,
transparent 100%
);
}
.author-book-orig-title {
width: 100%;
margin-bottom: 6px;
font-size: 14px;
color: #666;
white-space: nowrap;
overflow: hidden;
mask-image: linear-gradient(
to right,
black 80%,
transparent 100%
);
}
.author-book-meta {
display: flex;
align-items: center;
font-size: 14px;
color: #666;
gap: 10px;
}
.author-book-vote-img {
width: 20px;
height: 20px;
}
/* Общие стили */
.book-title {
font-size: 2.5em;
margin-bottom: 5px;
display: flex;
align-items: center;
gap: 10px;
}
.book-title span {
font-size: 0.8em;
}
.book-subtitle {
color: grey;
margin-top: 5px;
font-size: 1.5em;
font-weight: normal;
margin-bottom: 30px;
}
.book-content-wrapper {
display: flex;
gap: 100px;
}
/* Левая колонка с обложкой */
.book-poster-container {
position: sticky;
top: 70px;
align-self: flex-start;
width: 300px;
}
.book-poster {
width: 100%;
max-width: 300px;
height: auto;
object-fit: cover;
border: 1px solid #ddd;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Стили для толщины книги */
.book-length-tiny {
box-shadow:
2px 2px 0 #d0d0d0,
3px 3px 0 #e0e0e0,
0 2px 4px rgba(0,0,0,0.1) !important;
}
.book-length-small {
box-shadow:
3px 3px 0 #d0d0d0,
5px 5px 0 #e0e0e0,
0 2px 4px rgba(0,0,0,0.1) !important;
}
.book-length-medium {
box-shadow:
5px 5px 0 #d0d0d0,
8px 8px 0 #e0e0e0,
0 2px 4px rgba(0,0,0,0.1) !important;
}
.book-length-long {
box-shadow:
7px 7px 0 #d0d0d0,
11px 11px 0 #e0e0e0,
0 2px 4px rgba(0,0,0,0.1) !important;
}
.book-length-verylong {
box-shadow:
9px 9px 0 #d0d0d0,
14px 14px 0 #e0e0e0,
0 2px 4px rgba(0,0,0,0.1) !important;
}
/* Правая колонка с информацией */
.book-info {
flex: 1;
}
/* Новые стили для блока с автором и оценкой */
.book-author-rating-block {
display: flex;
align-items: center;
margin-bottom: 30px;
}
.book-rating {
margin-right: 40px; /* Отступ между оценкой и автором */
}
.book-vote-img {
width: 150px;
height: 150px;
object-fit: contain;
}
.book-author-block {
display: flex;
align-items: center;
gap: 20px;
}
.book-author-portrait {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #ddd;
}
.book-author-name {
font-size: 1.3em;
font-weight: bold;
}
.book-vote-img {
width: 150px;
height: 150px;
object-fit: contain;
}
/* Блок с рецензией */
.book-review-box {
width: 100%;
padding: 15px;
border: 2px solid #ccc;
border-radius: 10px;
}
.book-review-paragraph {
line-height: 1.3;
padding: 3px 8px 3px 12px;
font-size: 18px;
margin: 5px 0;
}
.book-meta-info {
display: flex;
justify-content: space-between;
margin-left: 10px;
margin-top: 30px;
color: darkgrey;
font-size: 16px;
}
.books-books-container {
width: 1160px;
display: flex;
flex-wrap: wrap;
gap: 40px;
margin: 0 auto;
}
.books-book-poster {
width: 200px;
margin-bottom: 20px;
}
.books-book-poster img:not(.books-book-vote-img),
.books-book-poster a img:not(.books-book-vote-img) {
border-radius: 5px;
width: 200px;
height: 285px;
object-fit: cover;
}
/* Стиль для книг без даты прочтения */
.opacity-poster img,
.opacity-poster a img {
opacity: 0.7;
}
/* Hover-эффект для книг без даты прочтения */
.opacity-poster:hover img,
.opacity-poster:hover a img {
opacity: 1;
transition: 0.3s;
}
.books-book-title {
width: 200px;
margin-bottom: 6px;
font-family: Arial;
font-size: 16px;
margin-top: 16px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
mask-image: linear-gradient(
to right,
black 170px,
transparent 200px
);
}
.books-book-orig-title {
width: 200px;
margin-bottom: 6px;
font-family: Arial;
font-size: 14px;
color: #666;
white-space: nowrap;
overflow: hidden;
mask-image: linear-gradient(
to right,
black 170px,
transparent 200px
);
}
.books-book-details {
display: flex;
align-items: center;
font-size: 14px;
color: #666;
}
.books-book-vote-img {
margin-left: 10px;
height: 20px;
width: auto;
}
#books-form {
width: 1160px;
margin: 20px auto;
padding: 10px;
}
.books-select {
padding: 5px 5px;
margin-right:5px;
}
.books-select.active-filter {
border: 2px solid #FFA500;
border-radius: 4px;
}
.books-count-header {
padding: 10px 0;
border-bottom: 1px solid #eee;
margin-left: 10px;
font-family: Arial, sans-serif;
}
.books-count-header span.rating {
color: #2986B3;
font-weight: normal;
}
/* Основной стиль постера книги */
.books-poster {
width: 200px;
height: 285px;
object-fit: cover;
border: 1px solid #ddd;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
border-radius: 5px;
}
/* Стили для толщины книги */
.books-length-tiny {
box-shadow:
2px 2px 0 #d0d0d0,
3px 3px 0 #e0e0e0,
0 2px 4px rgba(0,0,0,0.1) !important;
}
.books-length-small {
box-shadow:
3px 3px 0 #d0d0d0,
5px 5px 0 #e0e0e0,
0 2px 4px rgba(0,0,0,0.1) !important;
}
.books-length-medium {
box-shadow:
5px 5px 0 #d0d0d0,
8px 8px 0 #e0e0e0,
0 2px 4px rgba(0,0,0,0.1) !important;
}
.books-length-long {
box-shadow:
7px 7px 0 #d0d0d0,
11px 11px 0 #e0e0e0,
0 2px 4px rgba(0,0,0,0.1) !important;
}
.books-length-verylong {
box-shadow:
9px 9px 0 #d0d0d0,
14px 14px 0 #e0e0e0,
0 2px 4px rgba(0,0,0,0.1) !important;
}
.no-select {
user-select: none; /* Стандартное свойство */
-webkit-user-select: none; /* Для Safari и старых версий Chrome */
-moz-user-select: none; /* Для Firefox */
-ms-user-select: none; /* Для Internet Explorer/Edge */
}
.month-top-number {
position: absolute;
top: 4px;
right: 4px;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: gold;
color: black;
font-weight: bold;
font-size: 12px;
z-index: 10;
box-shadow: 0 0 3px rgba(0,0,0,0.5);
line-height: 1;
}
.opacity-2 {
opacity: 0.6;
}
.opacity-3 {
opacity: 0.3;
}
.filter-header {
font-weight: 600;
font-size: 13px;
margin-bottom: 3px;
color: #333;
display: block;
text-align: left;
}
/* Для inline-block контейнеров с заголовками */
.filter-group {
display: inline-block;
vertical-align: top;
margin-right: 15px;
margin-bottom: 15px;
min-width: 150px;
}
.filter-group .filter-header {
margin-bottom: 2px;
}