Created
August 2, 2020 11:23
-
-
Save vintprox/5e200189de79a910f62b96aeab9c6c97 to your computer and use it in GitHub Desktop.
objection.lol Objection Maker CSS redesign
This file contains 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
/** | |
* Произвольные стили для objection.lol | |
* | |
* @author vintprox | |
*/ | |
/*********** | |
СТИЛИ СЦЕНЫ | |
***********/ | |
:root { | |
/* ⬇ Цвет рамки */ | |
--border-color: #08e; | |
/* ⬇ Название шрифта */ | |
--font-family: MODDigitalStripCyrillic; | |
/* ⬇ Цвет фона в плашке с именем */ | |
--name-plate-bg: #06a; | |
/* ⬇ Цвет текста в плашке с именем */ | |
--name-plate-fg: #026; | |
/* ⬇ Подсветка */ | |
--name-plate-fg-glow: #fff; | |
--name-plate-fg-glow2: #0ff; | |
/* ⬇ Фон диалога */ | |
--chat-box-bg: rgba(0, 0, 0, .6); | |
/* ⬇ Цвет контура для реплик */ | |
--chat-box-fg-glow: #000; | |
} | |
.name-plate { | |
background: var(--name-plate-bg); | |
border: 0; | |
border-left: 2px solid var(--border-color); | |
border-radius: 0; | |
border-top-right-radius: 14px; | |
bottom: 24.63%; | |
box-shadow: -2px -2px var(--border-color); | |
filter: drop-shadow(3.25px 0 var(--border-color)); | |
padding: 5px 0; | |
} | |
.name-plate:after { | |
border-bottom: 38px solid var(--name-plate-bg); | |
border-right: 16px solid transparent; | |
bottom: 0; | |
height: 0; | |
position: absolute; | |
right: 1.1px; | |
transform: translateX(100%); | |
width: 0; | |
} | |
.name-plate-text { | |
color: var(--name-plate-fg); | |
font-family: var(--font-family); | |
letter-spacing: 10px; | |
margin-right: -10px; | |
text-shadow: 0 0 2px var(--name-plate-fg-glow), 0 2px 2px var(--name-plate-fg-glow), 2px 0 2px var(--name-plate-fg-glow), 0 0 5px var(--name-plate-fg-glow2), 0 0 5px var(--name-plate-fg-glow2), 0 0 5px var(--name-plate-fg-glow2), 0 0 5px var(--name-plate-fg-glow2), 0 0 5px var(--name-plate-fg-glow2); | |
} | |
.chat-box { | |
background-color: var(--chat-box-bg); | |
border: 2px solid var(--border-color); | |
border-radius: 0; | |
box-shadow: 0 0 10px var(--name-plate-fg-glow), 0 0 30px var(--name-plate-fg-glow2); | |
padding: 6px 0; | |
} | |
.chat-box-text, | |
.chat-box-text-measure { | |
font-family: var(--font-family); | |
letter-spacing: 3px; | |
text-shadow: 0 0 2px var(--chat-box-fg-glow), 0 0 2px var(--chat-box-fg-glow), 0 0 2px var(--chat-box-fg-glow), 0 2px 2px var(--chat-box-fg-glow), -2px 0 2px var(--chat-box-fg-glow), 2px 0 2px var(--chat-box-fg-glow); | |
word-spacing: 5px; | |
} | |
.courtroom.hide .name-plate { | |
height: 46px; | |
} | |
.courtroom.hide .name-plate:after { | |
content: ''; | |
} | |
/******************************* | |
СТИЛИ РЕДАКТОРА OBJECTION MAKER | |
*******************************/ | |
#EditInfo { | |
filter: drop-shadow(-5px 5px 5px #0ff); | |
position: fixed; | |
right: 0; | |
top: 0; | |
z-index: 10; | |
} | |
link + .row .col-lg-6 > .row:first-child { | |
display: none; | |
} | |
#pills-tabContent .tab-pane { | |
display: block !important; | |
min-height: initial !important; | |
} | |
#pills-main > .row:nth-child(3) { | |
display: inline-flex; | |
flex-direction: column; | |
margin-right: 5%; | |
width: 25%; | |
} | |
#pills-main .col-lg-4 { | |
margin: 2px 0; | |
max-width: 100%; | |
} | |
#pills-main .col-lg-4 label { | |
color: #0a6; | |
} | |
#pills-main .col-lg-4 select { | |
text-align-last: center; | |
} | |
#pills-main .col-lg-4:nth-child(1) label:before { | |
content: '💢 '; | |
} | |
#pills-main .col-lg-4:nth-child(2) label:before { | |
content: '🎬 '; | |
} | |
#pills-main .col-lg-4:nth-child(3) label:before { | |
content: '🔛 '; | |
} | |
#pills-main .alert-info { | |
background-color: transparent; | |
border: 0; | |
display: inline-flex; | |
flex-direction: column; | |
width: 70%; | |
} | |
#pills-main .alert-info .col-5 { | |
align-items: center; | |
display: flex; | |
flex-basis: 30%; | |
font-size: 80%; | |
padding-right: 0; | |
} | |
#pills-main .alert-info .col-5:after { | |
border-bottom: 2px dotted #0c7; | |
content: ''; | |
display: inline-block; | |
flex: 1; | |
margin-left: 10px; | |
opacity: .5; | |
} | |
#pills-main .alert-info .col-7 { | |
flex-basis: 70%; | |
max-width: 70%; | |
} | |
#pills-main .alert-info .row:nth-child(odd) .col-5:after { | |
border-color: #07c; | |
} | |
#pills-main .alert-info .row .col-7:before, | |
#pills-main .alert-info .row .col-7:after { | |
display: inline-block; | |
opacity: .5; | |
transform: translateY(1px) scale(.9); | |
} | |
#pills-main .alert-info .row:nth-child(1) .col-7:before { | |
content: '🎨'; | |
} | |
#pills-main .alert-info .row:nth-child(2) .col-7:before { | |
content: '🏃'; | |
} | |
#pills-main .alert-info .row:nth-child(2) .col-7:after { | |
content: '🐌'; | |
} | |
#pills-main .alert-info .row:nth-child(3) .col-7:before { | |
content: '🛑'; | |
} | |
#pills-main .alert-info .row:nth-child(4) .col-7:before { | |
content: '📸'; | |
} | |
#pills-main .alert-info .row:nth-child(4) .col-7:after { | |
content: '⚡'; | |
} | |
#pills-main .alert-info .row:nth-child(5) .col-7:before { | |
content: '📳'; | |
} | |
#pills-main .alert-info .row:nth-child(5) .col-7:after { | |
content: '💥'; | |
} | |
#pills-main .alert-info .row:nth-child(6) .col-7:before { | |
content: '🔉'; | |
} | |
#pills-main .alert-info .row:nth-child(7) .col-7:before { | |
content: '🎶'; | |
} | |
#pills-main .alert-info .row:nth-child(8) .col-7:before { | |
content: '💼'; | |
} | |
#pills-main .alert-info .badge { | |
padding: 5px 7px; | |
transition: .1s all; | |
} | |
#pills-main .alert-info .badge:hover { | |
box-shadow: inset 0 0 10px #0ff; | |
transform: scale(1.1); | |
} | |
#pills-main .alert-info .badge:not(.tag-color) { | |
background: #000; | |
color: #fff; | |
} | |
#pills-main .alert-info .tag-custom-color { | |
height: 20px; | |
} | |
#pills-options { | |
margin-top: 15px; | |
} | |
#pills-options .form-check { | |
display: inline-block; | |
margin: 0 10px; | |
} | |
#Added { | |
user-select: none; | |
} | |
#Added ::selection { | |
background-color: #fff; | |
color: #000; | |
} | |
#Added .frame { | |
animation: .2s frame-appear; | |
} | |
#Added .card-header { | |
font-size: 80%; | |
} | |
#Added .card-header .font-weight-bold { | |
font-family: monospace; | |
width: 60px; | |
} | |
#Added .card-header .font-weight-bold:before { | |
content: 'ID'; | |
} | |
#Added .row > :nth-child(2) { | |
background-color: rgba(0, 0, 50, .5); | |
flex-basis: 89.8%; | |
font-family: monospace; | |
margin: 0 0 0 10px; | |
padding: 5px !important; | |
user-select: text; | |
} | |
#Added .fa-share { | |
color: #0f0; | |
} | |
#Added .fa-comment-slash { | |
color: #0ff; | |
} | |
.ShowAdded .col-12 > .col-12 { | |
background-color: #eee; | |
bottom: 0px; | |
box-shadow: 0 0 5px #000; | |
display: inline-block; | |
left: 50%; | |
padding: 5px !important; | |
position: sticky; | |
text-align: center; | |
transform: translateX(-50%); | |
width: auto; | |
} | |
#FormMulti { | |
display: inline-block; | |
width: 304px; | |
} | |
.ShowAdded .btn-preview { | |
width: 220px; | |
} | |
@media (min-width: 992px) { | |
h4.lead { | |
display: inline-flex !important; | |
margin-top: 5px; | |
width: 40%; | |
} | |
h4.lead span { | |
display: inline-block; | |
flex: 0 1 50px; | |
font-weight: bold; | |
} | |
h4.lead:after { | |
color: #05c; | |
content: 'Pages: ↙ 1 ▪ 2 ↘'; | |
margin-left: auto; | |
} | |
#Added { | |
columns: 2; | |
} | |
#Added .frame { | |
max-width: initial; | |
padding: 0; | |
} | |
} | |
@keyframes frame-appear { | |
from { | |
transform: scale(1.2); | |
z-index: 10; | |
} | |
to { | |
transform: scale(1); | |
z-index: initial; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment