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