Skip to content

Instantly share code, notes, and snippets.

@Yalme
Last active January 3, 2024 01:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Yalme/0e64328494d4ee70e5637655b35f6275 to your computer and use it in GitHub Desktop.
Save Yalme/0e64328494d4ee70e5637655b35f6275 to your computer and use it in GitHub Desktop.
/* ---------- 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