Главная » DARYA DLE » Файл "styles.css"
1 039 0  

Файл "styles.css"

В создание шаблона (index.html), я использую два файла .css если нужно то в конце их обьединяю.
Первый файл "styles.css"  содержит сброс и дизайн сайта, а второй "sitka.css" общие стили и медиа запросы.
Для шаблонов DLE предусмотрен еще файл "nuz.css" который содержит нужные стили самого движка (всплывающие окна, опросы, прелоадер, карточку пользователя.)

Содержание файла "styles.css":


/* rullan.in.ua  12.02.2021 - made in Ukraine  */
@media (prefers-reduced-motion: no-preference) {
/* Прокрутка происходит плавно. Время и функция перехода устанавливаются непосредственно браузером.*/
:root {scroll-behavior: smooth;}
}
@media (prefers-reduced-motion: reduce) {	
/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
* {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;}
}
:root {
  --blue: #0d6efd;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #d63384;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #198754;
  --teal: #20c997;
  --cyan: #0dcaf0;
  --white: #fff;
  --light: #f8f9fa;
  --black: #000;
  --dark: #212529;
  --gray: #6c757d;
  --font: 'Roboto Condensed', sans-serif;
  --bs-font: "Panton-Black", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --jovt: #ffb301;
  --siniy: #25284e;
  --siniymut: #393a46;
  --zel: #00cc48;
  --marglr: 0 auto;
  --margsect: 40px auto;
}
/*--- Ищезает при фокусе надпись в поле ---*/
input::-webkit-input-placeholder       {opacity: 1; transition: opacity 0.3s ease;}
input::-moz-placeholder                {opacity: 1; transition: opacity 0.3s ease;}
input:-moz-placeholder                 {opacity: 1; transition: opacity 0.3s ease;}
input:-ms-input-placeholder            {opacity: 1; transition: opacity 0.3s ease;}
input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
input:focus::-moz-placeholder          {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-moz-placeholder           {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-ms-input-placeholder      {opacity: 0; transition: opacity 0.3s ease;}

@font-face {
  font-family: 'Panton-Black'; 
  src: url('font/Panton-Black.eot');
  src: url('font/Panton-Black.eot?#iefix') format('embedded-opentype'),
  url('font/Panton-Black.woff') format('woff'),
  url('font/Panton-Black.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}
body {padding:0; margin:0;font-size:14px;color:#191817; background: url('../images/bg.png'); font-family: var(--font); font-weight:inherit;font-style:inherit;border-style:none;min-height: 100vh;text-rendering: optimizeSpeed;scroll-behavior: smooth;}
figure, iframe, media {width:100%;padding:0; margin:0;}
div, section, header, article, main, aside, footer, textarea, input, button, nav, ol, ul, li, a  {border-style: none;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
table {border:none;border-collapse:collapse;}
td {text-align:left;vertical-align:top;padding:0; margin:0;}
s, u, i {text-decoration:none;font-style:normal;}
/* gipersulku */
a, button {display:inline-block;text-decoration:none;cursor: pointer;transition: color .2s ease-in-out;outline:none;}
a:not([class]):hover, button:hover {color:var(--zel);outline:none;}
a:not([class]):focus, button:focus {color:var(--zel);outline:none;}
*:focus{outline:none;}
a:not([class]) {color:#2f5377;text-decoration-skip-ink: auto;} /* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
img {max-width: 100%; display: block;}
/* forma */
input, .combo_field input, #sec_code, .form textarea, #comments {background: #fff; color:var(--gray);  height: 40px; padding:8px; font-size: 14px; border-radius:4px; border: 1px solid var(--gray); }
.form textarea, #comments  {padding:12px;}
input:focus, textarea:focus {cursor:text;color: #495057;background-color: #fff; border-color: #80bdff; box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);}
:focus::-webkit-input-placeholder {color: transparent} :focus::-moz-placeholder {color: transparent}:focus:-moz-placeholder {color: transparent} :focus:-ms-input-placeholder {color: transparent}
:hover::-webkit-input-placeholder {color: transparent; transition:0.6s;} :hover::-moz-placeholder {color: transparent; transition:0.6s;} :hover:-moz-placeholder {color: transparent; transition:0.6s;} :hover:-ms-input-placeholder {color: transparent; transition:0.6s;}

/* tipografika */
p {text-align:left;color:var(--dark);font-size:16px;line-height:1.4; margin:0 0 10px 0;}
strong, b { font-family: var(--bs-font); font-weight:400;}
em{ font-style: italic; }
ul:not([class]), ol:not([class]) {list-style: square outside; display:block; line-height:1.6; padding:0;margin:0;} /* стиль для ul и ol, у которых нет class*/
h1, h2, h3, h4, h5, h6, .big-zag {margin:0;padding:0; text-decoration:none; line-height:1; font-family: var(--bs-font); font-weight:400; color:#231f20;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
h1{font-size:2.2em;}
h2{font-size:1.6em;}
h3{font-size:1.3em;}
h4{font-size:1.1em; text-transform:uppercase;}
.big-zag {display:block; width:100%; font-size:3em;  margin:0 auto 20px auto; color: var(--siniy);}
.big-zag span {position:relative; padding-left:70px;}
.big-zag span::before {content:''; display:block; width:59px; height:69px; background:url(../images/sprit.png) -763px -1031px; position:absolute; top:-16px; left:0; z-index:6; }
.big-zag u {font-size:1.5em;color: var(--jovt);text-shadow: 2px 2px 4px #000000;}
.big-zag sup {font-size:0.5em;}
/* sprait */
[class*='bg-']{display:block; background:url(../images/sprit.png) no-repeat;}
/* linia */
hr {margin: 1rem 0;color: inherit;background-color: currentColor; border: 0;opacity: 0.25;}
hr.eleghr {border: 0;height: 1px;background-image: -webkit-linear-gradient(left, rgba(105,106,105,0), rgba(105,106,105,0.75), rgba(105,106,105,0));background-image: -moz-linear-gradient(left, rgba(105,106,105,0), rgba(105,106,105,0.75), rgba(105,106,105,0));background-image: -ms-linear-gradient(left, rgba(105,106,105,0), rgba(105,106,105,0.75), rgba(105,106,105,0));background-image: -o-linear-gradient(left, rgba(105,106,105,0), rgba(105,106,105,0.75), rgba(105,106,105,0));}
.a-center{text-align: center;width:100%;vertical-align: baseline;}
/* otstyp */
.clear{display:table; width:100%;min-height:1px;font-size:2px;float:none;clear: both;}.clear:before, .clear:after{float:none;content:"";display: block;height:2px;width:100%;clear:both;}
.str-5 {height:5px;}.str-10 {height:10px;}.str-20 {height:20px;}.str-30 {height:30px;}.str-40 {height:40px;} .str-50 {height:50px;}.str-60 {height:60px;} .str-70 {height:70px;}.str-80 {height:80px;} .str-90 {height:90px;}.str-100 {height:100px;}
/* knopki */
.knop_v2 {padding:10px 20px 8px 20px; font-size:18px; letter-spacing:2px; line-height:1; text-transform:uppercase; color:var(--black); border: 2px solid var(--black); background: var(--jovt);}
/* maket */
.ramka  {overflow:hidden;}
.footmenu {max-width:1600px; margin: var(--marglr);}
.sect {max-width:1600px; margin: var(--margsect);}
/*-- END shablon --*/

/*-- FLEX --*/
.hedmenu, .hed-vidstagki, .cena, .foot-cont, .footmenu, .foots, .txttwo-block, .cena-opis, .cenakr-img, .cenakr-folinia, .cenakr-flia-podp, .sklad-bloki > div, .faq, .fotorab-two, .foto-inf, .textbl
{display:flex; flex-flow: row wrap;justify-content: space-between;}

/*-- GRID --*/
.block {display: grid; grid-gap: 10px; grid-template: 60px minmax(200px, max-content) 40px / 240px 1fr 300px;  grid-template-areas:
    "hed hed hed"
    "asdl mains asdr"
    "fot fot fot";
}
.headers {grid-area: hed;}
.asidel {grid-area: asdl;}
.asider {grid-area: asdr;}
.tilos {grid-area: mains;}
.footers {grid-area: fot;}
/* ====  Дизайн :) ==========*/

/* ====  НИЖЕ ВСЯКАЯ ХРЕНЬ :) ==========*/


 /*Knopka vverh*/
#back-top {font:800 44px/1.4 Georgia, serif; position:fixed; right:20px;padding:0;line-height:.8;border-radius:3px;color:#000;background:#c9d7bc;}

 /*DLE elemens*/
  /*poisk*/
#q_search{display:block;width:38%;position:absolute;right:20px;top:20px;z-index:700;}
#story {width:77%;padding-left:20px;float:left;margin-right:3%;height:30px;border-radius:3px;background:rgba(6,5,19,0.4);color:#fff;border: 1px solid #334272;}
#q_search button{margin:0;float:left;width:16%;}
#story:focus{border: 1px solid #93a297; color:#000; border-radius:3px;background:#fff; box-shadow:0 0 10px 0 rgba(117,140,126,0.9);}
  /*speedbar*/
.speedbar {position:absolute;top:52px;left:71px;z-index:95;color:#4e4e4e;}
.speedbar .over::before{content:""; display:inline-block;width:25px;height:16px; background:url(../images/sprit.png)  -426px -453px;}

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020