Last active
January 3, 2024 01:11
-
-
Save Yalme/0e64328494d4ee70e5637655b35f6275 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ---------- reset ---------- */ | |
*{box-sizing:border-box;padding:0;margin:0;font:inherit;}b,strong{font-weight:bold}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border:0}button,input,optgroup,select,textarea{font-family:inherit;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block}table{border-collapse:collapse;border-spacing:0} | |
/* variables */ | |
:root { | |
--id-1-color: #219653; /* news */ | |
--text-grey: #443E3E; | |
--mobile-h1-size: 1.8rem; | |
--mobile-h2-size: 1.6rem; | |
--mobile-h3-size: 1.4rem; | |
--form-max-width: 600px; | |
} | |
/* -------------------------- */ | |
/* ---------- basic ---------- */ | |
/* -------------------------- */ | |
/* html, body { font-family: 'Montserrat', sans-serif; font-size: 16px; line-height: 1.6; background: #FFF; color: #000; min-width: 320px; } */ | |
html, body { width: 100%; height: 100%; overflow-x: hidden; } | |
body { font-family: 'Montserrat', sans-serif; font-size: 16px; /* font-size: clamp(16px, 4vw, 22px); line-height: 20px; */ line-height: 1.43; background: #FFF; color: #333333; } | |
.font-heading { font-family: 'Montserrat', sans-serif; } | |
.font-primary { } | |
/* .font-alt2 { font-family: 'Raleway', sans-serif; } */ | |
/* .font-xl { font-size: 36px; font-size: clamp(22px, 4vw, 36px); } */ | |
.font-xxl { font-size: clamp(26px, 4vw, 46px); } | |
.font-xl { font-size: clamp(22px, 4vw, 36px); } | |
.font-x { font-size: clamp(16px, 4vw, 28px); } | |
.font-s { font-size: clamp(14px, 4vw, 18px); } | |
.text-center { text-align: center;} | |
h1, h2, h3, h4, .box-title, .h1, .h2, .h3, .h4, .font-title { display: block; font-weight: bold; color: #333333; } | |
h1, .h1 {margin: 0px 0 1.5rem 0; font-size: 42px; font-weight: 600; line-height: 1.2; } | |
h2, .h2 {margin: 30px 0 20px 0; font-size: 28px; font-weight: 600; line-height: 1.3; } | |
h3, .h3 {margin: 30px 0 20px 0; font-size: 20px; font-weight: 800;} | |
h4, .h4 {margin: 10px 0 15px 0; font-size: 16px; font-weight: 600;} | |
h5, .h5 {margin: 0px 0 5px 0; font-size: 1.38rem; font-weight: normal;} | |
h6, .h6 {margin: 0px 0 5px 0; font-size: 1.2rem; font-weight: normal;} | |
h1 span, h2 span, h3 span, .h1 span, .h2 span, .h3 span { /* background: #baff00; */ } | |
h1 i, h2 i, h3 i, .h1 i, .h2 i, .h3 i { background: rgba(0,0,0,0); background-image: none;} /* background: #baff00; */ | |
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {} | |
h2, .h2 { } /* background-image: linear-gradient(318deg, #000, #555); */ | |
h3, .h3 {} | |
h4, .h4 {} | |
h3:first-child {margin-top: 0px;} | |
h1 i { margin-right: 10px;} | |
ul, ol { } | |
li { list-style: none; } | |
small, .small { font-size: 0.9rem; } | |
.xsmall { font-size: 0.8rem; } | |
p {margin-bottom: 1rem; } | |
em { font-style: italic;} | |
/* a {color: #1c1c1c; outline: none; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0.2); } */ | |
a {color: #295DA5; outline: none; text-decoration: none; border-bottom: 1px solid rgba(41, 93, 165, 0.3); } | |
a img { } | |
.href-reverse a {color: #EEE; border-bottom-color: rgba(255,255,255,0.2); } | |
/* a {color: #0073B8; outline: none; text-decoration: underline; } */ | |
a:hover {text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0); opacity: 0.8;} | |
a.emoji:hover { opacity: 0.8;} | |
a.emoji { text-decoration: none; border: 0px !important; } | |
a:active {color: #C33;} | |
.pseudo { text-decoration: none; border-bottom: 1px dashed rgba(0,0,0,0.4) ; cursor: pointer; color: #000;} | |
.pseudo:hover { text-decoration: none; border: none; opacity: 0.9;} | |
.hover {cursor: pointer;} | |
.hover:hover { opacity: 0.8; } | |
.zoom:hover {transform: scale(1.1); transition: all 0.2s ease;} | |
.hover, .trans { transition: all 0.2s ease; } | |
img {} | |
img, object, embed {vertical-align: middle; display: inline-block;} /* fix bug indent */ | |
table.basic { width: 100%; } | |
table.basic td { padding: 7px 11px; border: 1px solid rgba(0,0,0,0.2);} | |
table.basic tr:nth-child(even) td { background: rgba(0,0,0,0.05);} | |
table.basic a { text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0.1);} | |
table.basic td.fit { width: 1px; } | |
table.basic .header { font-weight: bold; } | |
/* -------------------------- */ | |
/* ---------- forms and buttons ---------- */ | |
/* -------------------------- */ | |
select {padding: 6px;} | |
form {vertical-align: top;} | |
input[type="checkbox"], input[type="radio"] {vertical-align: baseline; margin-right: 3px;} | |
.field { padding-bottom: 15px;} | |
.field > * {} | |
.field .name { font-weight: bold;} | |
.field .elem { } | |
.field .info, .field-info { font-size: 0.9rem; color: #555; max-width: 800px;} | |
label:hover span { background: #f9f9ea; cursor: pointer;} | |
.button, a.button, button, input, textarea, select, option {padding: 10px 15px; display: inline-block; color: #000; vertical-align: top; background: #FFF; border: 1px solid #333333; transition: all 0.1s ease; } | |
textarea { width: 100%; max-width: 800px; height: 20vh; padding: 10px 15px; } | |
textarea.autoheight { height: 1px; overflow: hidden;} | |
select, option { height: 40px; line-height: 40px; padding-left: 8px;} | |
.button, input, button { line-height: 1.4rem; } | |
[type="submit"]:disabled { background: #bbb !important;} | |
.button, [type="submit"], [type="button"], a.button, button { cursor: pointer; background: #295DA5; border-color: #295DA5; color: #fff; font-weight: bold; font-size: 14px; } | |
.button:hover, [type="submit"]:hover, input[type="button"]:hover, button:hover { box-shadow: 0px 0px 5px rgba(0,0,0,0.3); opacity: 0.9; } | |
.button:active, [type="submit"]:active, input[type="button"]:active { background: #EEE; } | |
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea { background: rgba(0,0,0,0); width: 100%; max-width: 600px;} | |
input:focus, textarea:focus { outline: 0px; border-bottom-color: #1056a8 ;} | |
input.error {border: 1px solid red;} | |
.button.big, [type="submit"].big, input[type="button"].big, a.button.big { font-size: 16px; font-weight: 600; padding: 15px 40px; } | |
.button.dark { background: #333333; color: #F2F2F2; } | |
.button.medium {} | |
.button.add {} | |
.button.save { background: rgb(192, 228, 202); color: #000; } | |
.button.delete { background: rgb(255, 172, 172); color: #000; } | |
.button.delete:hover { } | |
.button.arrow-right { background-image: url('/local/templates/vmg/assets/css/assets/images/b-arr-r.png'); background-repeat: no-repeat; background-position: center right 30px; padding-right: 90px; } | |
.button.rounded { border-radius: 500px; } | |
.button.yellow { background-color: #FFCC00; color: #000; box-shadow: 0px 6px 0px #BC9300, 0px 12px 30px #BEC8CA; border:0; margin-bottom: 6px;} | |
.button.fiolet { background-color: #803df3; color: #FFF; box-shadow: 0px 6px 0px #4d2297, 0px 12px 30px #BEC8CA; border:0; margin-bottom: 6px;} | |
.button.skarlet { background-color: #FE264C; color: #FFF; box-shadow: 0px 6px 0px #a7152f, 0px 12px 30px #BEC8CA; border:0; margin-bottom: 6px;} | |
.button.green { background: #ABCD74; border-color: #ABCD74; } | |
::placeholder { color: #a6abad; } | |
.fields.v2 {} | |
.fields.v2 input[type="text"], .fields.v2 input[type="email"], .fields.v2 input[type="password"], .fields.v2 textarea { background: #f5f5f5; border: 0; border-radius: 5px; padding: 15px 20px; box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.2);} | |
/* -------------------------- */ | |
/* ---------- misc ---------- */ | |
/* -------------------------- */ | |
.flex { display: flex; flex-wrap: wrap; align-items: center;} | |
.flex-fill { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } | |
.flex-centered { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around;} | |
.yal-gap-1 { gap: 0.25rem; } | |
.yal-gap-2 { gap: 0.5rem; } | |
.yal-gap-3 { gap: 0.75rem; } | |
.yal-gap-4 { gap: 1rem; } | |
.yal-gap-5 { gap: 1.25rem; } | |
.yal-gap-6, .yal-gap { gap: 1.5rem; } | |
.yal-gap-8 { gap: 2rem; } | |
.yal-gap-10 { gap: 2.5rem; } | |
.yal-gap-12 { gap: 3rem; } | |
.yal-cols { display: flex; } | |
.yal-cols > * { display: block; flex-basis: 0; flex-grow: 1; flex-shrink: 1; } | |
.yal-cols > .fixed { flex-basis: auto; flex-grow: 0; flex-shrink: 0; } | |
.yal-cols.va-top { align-items: flex-start; } | |
.yal-cols.va-center { align-items: center; } | |
.yal-tiles { display: flex; flex-wrap: wrap; align-items: stretch; } | |
.yal-tiles > * { } | |
.yal-tiles > * > .inner { height: 100%; } | |
.yal-tiles.by-2 > * { flex-basis: 50%; } | |
.yal-tiles.by-3 > * { flex-basis: 33.33%; } | |
.yal-tiles.by-4 > * { flex-basis: 25%; } | |
@media all and (max-width: 1280px) { | |
.yal-tiles.by-4 > * { flex-basis: calc(33.33%); } | |
} | |
@media all and (max-width: 1024px) { | |
.yal-tiles > * { flex-basis: calc(50%); } | |
} | |
@media all and (max-width: 768px) { | |
.yal-tiles.by-4 > * { flex-basis: calc(50%); } | |
} | |
@media all and (max-width: 640px) { | |
.yal-tiles > * { flex-basis: 100%;} | |
.yal-tiles.by-4 > * { flex-basis: 100%; } | |
} | |
.block-s1 { margin-bottom: 0.25rem; min-height: 1px; } | |
.block-s2 { margin-bottom: 0.5rem; min-height: 1px; } | |
.block-s3 { margin-bottom: 0.75rem; min-height: 1px; } | |
.block-s4 { margin-bottom: 1rem; min-height: 1px; } | |
.block-s5 { margin-bottom: 1.25rem; min-height: 1px; } | |
.block, .block-s6 { margin-bottom: 1.5rem; min-height: 1px; } | |
.block-s7 { margin-bottom: 1.75rem; min-height: 1px; } | |
.block-s8 { margin-bottom: 2rem; min-height: 1px; } | |
.block-s9 { margin-bottom: 2.25rem; min-height: 1px; } | |
.block-s10 { margin-bottom: 2.5rem; min-height: 1px; } | |
.block-s11 { margin-bottom: 2.75rem; min-height: 1px; } | |
.block-s12 { margin-bottom: 3rem; min-height: 1px; } | |
.page-box-indent { height: 120px; overflow: hidden; clear: both;} | |
.page-box-indent.s20 { height: 20px;} | |
.page-box-indent.s30 { height: 30px;} | |
.page-box-indent.s50 { height: 50px;} | |
.page-box-indent.s60 { height: 60px;} | |
.page-box-indent.s80 { height: 80px;} | |
.page-box-indent.s100 { height: 100px;} | |
.page-box-indent.s110 { height: 110px;} | |
.page-box-indent.s120 { height: 120px;} | |
.page-box-indent.s130 { height: 130px;} | |
.page-box-indent.s140 { height: 140px;} | |
.page-box-indent.s150 { height: 150px;} | |
.page-box-indent.s160 { height: 160px;} | |
.page-box-indent.s180 { height: 180px;} | |
.page-box-indent.s200 { height: 200px;} | |
.skeleton { position: relative; overflow: hidden; background-color: #DDDBDD;} | |
.skeleton::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0)); -webkit-animation: shimmer 2s infinite; animation: shimmer 2s infinite; content: ""; } | |
.skeleton img, .skeleton-image { position: relative; z-index: 2;} | |
.skeleton-box { display: inline-block; height: 1rem; margin-bottom: 0.75rem;} | |
@-webkit-keyframes shimmer { 100% { transform: translateX(100%); } } | |
@keyframes shimmer { 100% { transform: translateX(100%); } } | |
.text-centered { text-align: center;} | |
.pierced {pointer-events: none;} | |
.non-pierced {pointer-events: visible;} | |
.nowrap {white-space: nowrap;} | |
.onhover {visibility: hidden;} | |
.emoji {text-decoration: none;} | |
.emoji:hover {text-decoration: none;} | |
.bold { font-weight: bold; } | |
.w100 { width: 100%; } | |
.w300px { width: 300px; } | |
.spaced > * { margin-right: 20px; margin-bottom: 20px;} | |
.spaced-small { margin-bottom: 10px;} | |
.spaced-small > * { margin-right: 10px; margin-bottom: 10px;} | |
.pb-10 { padding-bottom: 10px;} | |
.pl-10 { padding-left: 10px;} | |
.pr-10 { padding-right: 10px;} | |
.mb { margin-bottom: 20px;} | |
.ml { margin-left: 20px;} | |
.ml-10 { margin-left: 10px;} | |
.mr-10 { margin-right: 10px;} | |
.mb-10 { margin-bottom: 10px;} | |
.clear {display: block; clear: both; height: 0 !important; margin: 0px !important; /* overflow: hidden; height: 0px; line-height: 0px; width: 100%; */ } | |
.clear:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0 !important; overflow: hidden; width: 100%;} | |
hr { border-top: 1px dashed #E7E7E7; height: 1px; overflow: hidden;} | |
.hr-gradient { width: 165px; height: 15px; background: linear-gradient(247.21deg, #FFCC00 44.6%, #FF5C00 83.42%, #FF0000 108.13%); margin-bottom: 1rem; } | |
.pixelate, .pixelate img {image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor;} | |
.embed-video { position: relative; padding-bottom: 56.25%; height: 0; width: 100%; } | |
.embed-video iframe, .embed-video object, .embed-video embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} | |
.no-scroll { overflow: hidden !important; overflow-x: hidden; overflow-y: hidden; height: 100%;} | |
.filter-blur { -webkit-filter: blur(3px); filter: blur(3px); } | |
.page-meta { display: none;} | |
.text-gradient { background: #ee5b08; background: -webkit-linear-gradient(80deg, #EFAB08 0%, #FF5C00 80%, #FF0000); background: -o-linear-gradient(80deg, #EFAB08 0%, #FF5C00 80%, #FF0000); background: linear-gradient(170deg, #EFAB08 0%, #FF5C00 80%, #FF0000); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } | |
.ui-loader {} | |
.ui-loader .content { width: 100px; height: auto;} | |
.ui-loader .content > * { width: 100%; height: auto;} | |
.ui-alert { font-size: 28px; padding: 40px; width: 100%; background: #458A59; color: #FFF; overflow: hidden; box-shadow: 0px 0px 30px rgba(0,0,0,0.6); text-align: center;} | |
.ui-messages { margin: 20px 0px 0px; display: flex; flex-direction: column; align-items: flex-start} | |
.ui-messages li { list-style: none; padding: 10px 15px; margin-bottom: 10px; background: rgb(192, 228, 202); border-radius: 5px;} | |
.ui-messages li:before { content: "СЂСџвЂРЊСЂСџРЏС"; margin-right: 10px;} | |
.ui-messages li.ok, .ui-messages li.good, .ui-messages li.success { background: rgb(192, 228, 202);} | |
.ui-messages li.error, .ui-messages li.bad { background: rgb(236, 177, 177);} | |
.ui-messages li.error:before, .ui-messages li.bad:before { content: "вљ пёЏ"; } | |
.tooltip { color: #1056a8; cursor: pointer; } | |
.tooltip:hover { opacity: 0.8;} | |
.tooltip .data { display: none; font-weight: normal;} | |
.tippy-content { font-weight: normal;} | |
.fa.bftx, .fas.bftx { margin-right: 5px; } | |
.hidden { display: none;} | |
.yal_debug { padding: 5px; border: 1px dashed #C02124; margin: 5px;} | |
.yal_debug .trace { font-size: 0.8rem;} | |
.yal_debug .sep { display: none;} | |
.adminshitbox {position: absolute; top: 20px; left: 20px; background: #FFF; width: 50%; height: 90%; overflow: auto; box-shadow: 0px 0px 10px #000; z-index: 999; padding: 10px 15px;} | |
.adminshitbox .controls { padding-bottom: 10px;} | |
.rfrf iframe {width: 1px; height: 1px; border: none;} | |
.noborder, .no-border { border: 0 !important; } | |
.grecaptcha-badge { display: none;} | |
img.fit { object-fit: cover; width: 100%; height: 100%; } | |
img.fluid { width: 100%; max-width: 100%; height: auto;} | |
.popup { position: fixed; min-height: 100vh; width: 100vw; display: none; top: 0; right: 0; bottom: 0; left: 0; z-index: 720; color: #000; overflow-x: hidden; } | |
/* .popup .bg { position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; background: rgba(7, 141, 195, 0.6); z-index: 710; backdrop-filter: blur(3px); } */ | |
.popup .popup-area { position: relative; height: fit-content; width: 100%;} | |
.popup .bg { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; width: 100%; background: rgba(7, 141, 195, 0.6); z-index: 710; backdrop-filter: blur(3px); } | |
.yal-popup-bg { position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; background: rgba(7, 141, 195, 0.6); z-index: 710; backdrop-filter: blur(3px); } | |
.popup .holder { width: 100%; display: flex; overflow-y: auto; align-items: center; justify-content: center; position: relative; z-index: 730; pointer-events: none; padding: 5vh 0px;} | |
.popup .box { width: auto; max-width: 800px; position: relative; box-sizing: border-box; z-index: 740; background: #eaecf2; box-shadow: 0px 0px 40px rgba(0,0,0,0.5); padding: 50px 40px 40px; border-radius: 20px; pointer-events: visible; max-height: 100%; overflow-y:auto; } | |
.popup .page-box-title { font-weight: 900; padding-bottom: 20px; line-height: 1.2; } | |
.popup .close { position: fixed; top: 15px; right: 20px; z-index: 780; font-size: 80px; line-height: 1; color: #FFF; display: inline-block; cursor: pointer; } | |
.popup .close:hover { opacity: 0.8; } | |
.popup .row { margin-bottom: 1.25rem;} | |
.popup.fullscreen .holder { height: 100%; width: 100%; padding: 0;} | |
.popup.fullscreen .box { height: 100%; width: 100%; border-radius: 0;} | |
.popup_opened, .with-fancybox { overflow: hidden; } | |
.page-popups { } | |
.page-width { max-width: 1280px; position: relative; border: 40px solid rgba(0,0,0,0); border-top: 0; border-bottom: 0; margin: 0px auto; position: relative;} | |
.page-width.full { max-width: none;} | |
.page-formatting { } | |
.page-formatting * { max-width: 100%; height: auto;} | |
.page-formatting img { margin-bottom: 1rem;} | |
.page-formatting figure { display: inline-block;} | |
.page-formatting figcaption { margin-bottom: 1rem; margin-top: -0.5rem; font-size: 0.8rem; color: #555; text-align: center; font-style: italic;} | |
.page-formatting ul, .page-formatting ol { padding-bottom: 1.25rem; } | |
.page-formatting ul ul, .page-formatting ol ol { margin-left: 20px;} | |
.page-formatting ul li { list-style-type: circle; margin-left: 26px; } | |
.page-formatting ol li { list-style-type: decimal; } | |
.page-formatting li { padding-bottom: 0.5rem;} | |
.page-formatting li:last-child { padding-bottom: 0;} | |
.page-formatting table { margin-bottom: 1rem; } | |
.page-formatting table { width: 100%; } | |
.page-formatting table td { padding: 10px 11px; border: 0px solid rgba(0,0,0,0.1);} | |
.page-formatting table tr:nth-child(even) td { background: rgba(0,0,0,0.05);} | |
.page-formatting table a { text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0.1);} | |
.page-formatting table td.fit { width: 1px; } | |
.page-formatting table .header { font-weight: bold; } | |
.page-formatting .table-wrapper { overflow-x: auto; } | |
/* -------------------------- */ | |
/* ---------- custom ---------- */ | |
/* -------------------------- */ | |
.page-header {} | |
.page-footer {} | |
/* -------------------------- */ | |
/* ---------- adaptive ---------- */ | |
/* -------------------------- */ | |
@media all and (min-width: 1600px) { | |
} | |
@media all and (max-width: 1600px) { | |
} | |
@media all and (max-width: 1280px) { | |
} | |
@media all and (max-width: 1240px) { | |
} | |
@media all and (max-width: 1200px) { | |
} | |
@media all and (max-width: 1120px) { /* extra */ | |
} | |
@media all and (max-width: 1023px) { | |
} | |
@media all and (max-width: 940px) { /* extra */ | |
} | |
@media all and (max-width: 900px) { | |
} | |
@media all and (max-width: 840px) { /* extra */ | |
} | |
@media all and (max-width: 800px) { | |
} | |
@media all and (max-width: 768px) { | |
} | |
@media all and (max-width: 767px) { | |
} | |
@media all and (max-width: 680px) { | |
} | |
@media all and (max-width: 640px) { | |
} | |
@media all and (max-width: 600px) { | |
} | |
@media all and (max-width: 550px) { | |
} | |
@media all and (max-width: 480px) { | |
} | |
@media all and (max-width: 460px) { | |
} | |
@media all and (max-width: 414px) { | |
} | |
@media all and (max-width: 359px) { | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment