• Темы:
  • [[include theme:flopstyle]]
  • [[include component:centered-header-sigma-9]]
• Модуль CSS плашки Flops:
  • [[module CSS]] /* == ITEM INFO == */ .itemInfo { position: relative; top: .5em; width: 100%; max-width: 100%; font-size: 135%; text-transform: uppercase; white-space: nowrap; } .itemInfoHeading { font-weight: 900; } .alignL { position: relative; right: .195em; } .alignR { position: relative; left: .195em; text-align: right; } .infofield_1, .infofield_2, .infofield_3 { font-weight: inherit; } /* == DISRUPTION CLASS == */ a.disruptionHeader { display: inline-block; width: 100%; padding: .3em 0 .4em; color: hsl(0, 0%, 94%); transition: color .15s linear; font-size: 145%; line-height: 1; text-align: center; text-decoration: none; text-shadow: .5px .9px 0 hsla(0, 0%, 0%, .3), 1.5px 2.6px 0 hsla(0, 0%, 0%, .3); text-transform: uppercase; } a.disruptionHeader:hover { color: white; background-color: transparent; text-decoration: none; } [[/module]]

• Блоки с цитатами:

  • [[div class="card-block"]]
    Между ними текст и так это выглядет
    [[/div]]

• • Заголовок записи

    ---

    [[div class="log-header"]]
    +++* Заголовок записи
    ----
    Текст
    [[/div]]

• • Блок отчётов

    [[div class="report-box"]]
    +++* Сюда заголовок
    ----
    Так выглядит и текстик.
    [[/div]]

• • За кадром
    
    [[div class="narration justified indented"]]
    //[[div]]
    Блок для закадровых деталей.
    [[/div]]
    [[/div]]//

• • ПРЕДУПРЕЖДЕНИЕ

    ---

    [[div class="warning-notice"]]
    +* ПРЕДУПРЕЖДЕНИЕ
    ----
    Текст
    [[/div]]

[[include component:wide-spoiler
bg-color=#D3C29B |
color= black |
class=classic |
border=1px solid #000000|
hover-border=#999999 solid 1px |
all-spoilers=t]]

[[module CSS]] /* подстройка под малые экраны */

/* 768px (обычно планшеты и телефоны) */
@media (max-width: 768px) {
.rimg {
width: 70%;
}
.rimg span, .limg span, .cimg span {
font-size: 84%;
}
}

/* 490px (обычно телефоны) */
@media (max-width: 490px) {
.rimg {
width: 60%;
}
.rimg span, .limg span, .cimg span {
font-size: 77%;
}
}
[[/module]]

[[module CSS]] /* бумага и скрепки */
.paper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #e3d1ab;
border: 1px solid #ccc;
box-shadow: 0 5px 10px rgba(0, 0.1, 0.1, 0.1);
}
.paper-stack { position: relative; display: flex; right: 10px; margin: 10px; }
.paper-main {
position: relative;
display: block;
z-index: 4;
background: #d9c7a2;
/* padding: 10px 25px 0px 40px; */
padding: 10px;
}
.paper-3 {z-index: 1; transform: translate(7px, 8px) rotate(0deg); }
.paper-2 {z-index: 2; transform: translate(-4px, 5px) rotate(0deg); }
.paper-1 {z-index: 3; transform: translate(8px, -4px) rotate(0deg); }
.paperclip {
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 20px;
height: 25px;
z-index: 5;
pointer-events: none;
}
.paperclip::before,
.paperclip::after {
content: '';
position: absolute;
background-color: #555;
border-radius: 2px;
}
.paperclip::before {
top: 0;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 100%;
}
.paperclip::after {
bottom: 0;
left: 0;
width: 100%;
height: 4px;
}
.paperclip {
background-color: #555;
width: 4px;
height: 100%;
left: 50%;
transform: translateX(-50%) rotate(45deg);
border-radius: 2px;
}
.paperclip::before {
top: -4px;
left: 50%;
transform: translateX(-50%) rotate(-90deg);
width: 100%;
height: 4px;
transform-origin: bottom center;
}
.paperclip::after {
bottom: -4px;
left: 50%;
transform: translateX(-50%) rotate(90deg);
width: 100%;
height: 4px;
transform-origin: top center;
}
.paper-clip {
position: absolute;
width: 30px;
height: 120px;
border: 5px solid #555;
border-radius: 20px;
transform: rotate(20deg);
left: -5px;
}
.paper-clip-before {
z-index: 5;
position: absolute;
top: -8px;
left: 5px;
width: 30px;
height: 60px;
border: 5px solid #555;
border-radius: 5px 5px 15px 15px;
transform: rotate(20deg);
}
.paperclip-small {
position: absolute;
top: 10px;
z-index: 5;
pointer-events: none;
background-color: #555;
width: 4px;
height: 35px;
left: 30px;
transform: translateX(-50%) rotate(45deg);
}
[[/module]]

[[module CSS]] /* модифицируем collapsible */

#page-content .collapsible-block {
box-shadow: none;
background: none;
border: none;
}

#page-content .collapsible-block:hover {
border: none;
}

[[/module]]

[[module CSS]] /* задники на бумаге */

.paper-stain {
background-image: url(//files.scpfoundation.net/local—files/draft:eduard-dirmshi/разводы_на_бумаге.png1466);
background-repeat: no-repeat;
background-size: 50%;
background-position: right -14% bottom 0%;
}

.paper-crooked-handwriting {
background-image: url(//files.scpfoundation.net/local—files/draft:eduard-dirmshi/кривой_почерк.png1466);
background-repeat: no-repeat;
background-size: 100%;
background-position: top right 1%;
}

.paper-foundation-seal {
background-image: url(//files.scpfoundation.net/local—files/draft:eduard-dirmshi/foundation-seal.png);
background-repeat: no-repeat;
background-size: 25%;
background-position: bottom right;
top: -5px;
}
[[/module]]

[[module CSS]] /* Контейнер для карточки фотоаппарата */
.camera-card {
height: 390px;
background: linear-gradient(145deg, #b5ac90, #928a73);
box-shadow: 8px 8px 11px rgba(0, 0, 0, 0.5), inset 2px 3px 5px rgba(255, 255, 255, 0.2);
transform: rotate(6deg);
position: relative;
display: flex;
justify-content: center;
padding-top: 25px;
float: left;
margin-right: 30px;
margin-bottom: 30px;
margin-top: 30px;
padding-left: 25px;
padding-right: 25px;
left: -30px;
}
[[/module]]

[[module CSS]] /* переназначаем rimg на свой собственный крутой класс отображения пикч ибо нехуй */
.rimg {
margin-bottom: 15px;
position: relative;
overflow: hidden;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.rimg-image {
height: auto;
display: block;
transition: transform 0.3s ease;
}
.rimg:hover .rimg-image { transform: scale(1.1); }
.rimg-caption {
position: absolute;
bottom: 7px;
width: 100%;
color: white;
opacity: 1;
transition: opacity 0.3s ease;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
text-shadow: 0 0 20px #000000;
}
.rimg:hover .rimg-caption { opacity: 0; }
[[/module]]

[[module CSS]] /* реализация возможности клика по фотокарточке */
.button-checkbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.button-div {
width: 300px;
height: 300px;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
transition: all 0.3s ease;
position: relative;
float: inherit;
}
.button-div::before {
content: "?";
position: absolute;
color: white;
}
.button-checkbox:checked + .button-div {
background-color: transparent;
background-size: cover;
background-position: center;
color: transparent;
}
.button-checkbox:checked + .button-div::before { content: ""; }
.button-checkbox:not(:checked) + .button-div:hover { background-color: #333; }

[[/module]]

[[module CSS]] /* остальные элементы */

.email {border: solid 2px #000000; padding: 1px 15px; margin: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.5) }
.black_negr { margin: 10px; border: solid 3px #D3D3D3; background: #000000; padding: 5px; color: white; }

.p-reset-wrapper p { margin-block-start: 0; margin-block-end: 0; }
.make_right_please { margin-left: 35px; margin-right: 25px; }

[[/module]]