add guestbook
This commit is contained in:
4DBug
202
style.css
202
style.css
@@ -847,10 +847,10 @@ a:hover {
|
||||
border-radius: 18px;
|
||||
box-shadow: inset 0px 0px 5px 0px rgb(202, 202, 202), 0px -4px 5px -3px #bbbbbb, 0px 5px 1px -3px #ffffff;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#pictochat-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -936,8 +936,9 @@ a:hover {
|
||||
color: var(--col);
|
||||
}
|
||||
|
||||
#pictochat-content .picto > div > div:last-of-type {
|
||||
#pictochat-content .picto > div > .gb-msg-content {
|
||||
padding: 3px;
|
||||
padding-top: 20px;
|
||||
text-indent: 0px;
|
||||
line-height: 18px;
|
||||
}
|
||||
@@ -975,7 +976,7 @@ a:hover {
|
||||
calc(100% - 4px) calc(100% - 0px), calc(100% - 4px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 4px), calc(100% - 0px) calc(100% - 4px));
|
||||
}
|
||||
|
||||
#pictochat-content .picto > div img:first-of-type {
|
||||
#pictochat-content .picto > div img:first-of-type:not(.gb-emote) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: auto;
|
||||
@@ -1301,3 +1302,198 @@ a:hover {
|
||||
letter-spacing: 4px;
|
||||
text-shadow: 0 0 3px #93bdec66;
|
||||
}
|
||||
|
||||
|
||||
#gb-name {
|
||||
position: absolute;
|
||||
top: 153px;
|
||||
left: 24px;
|
||||
height: 17px;
|
||||
width: 125px;
|
||||
font-size: 11px;
|
||||
font-family: 'DSWare';
|
||||
color: #30baf3;
|
||||
font-weight: 500;
|
||||
border: rgba(255, 0, 0, 0) solid 1px;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
outline: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#gb-name::placeholder {
|
||||
font-size: 10px;
|
||||
font-weight: normal;
|
||||
font-family: 'DSWare';
|
||||
color: #30baf3;
|
||||
}
|
||||
|
||||
#gb-name:focus {
|
||||
outline: none;
|
||||
border: 1px solid rgba(163, 197, 11, 0);
|
||||
}
|
||||
|
||||
#gb-message {
|
||||
position: absolute;
|
||||
top: 167px;
|
||||
left: 20px;
|
||||
width: 200px;
|
||||
height: 64px;
|
||||
resize: none;
|
||||
padding-top: 1px;
|
||||
line-height: 1.6;
|
||||
font-size: 10px;
|
||||
font-family: 'DSWare';
|
||||
color: #494949;
|
||||
border: rgba(0, 255, 21, 0) solid 1px;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
outline: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#gb-message:focus {
|
||||
outline: none;
|
||||
border: 1px solid rgba(163, 197, 11, 0);
|
||||
}
|
||||
|
||||
#gb-message::placeholder {
|
||||
font-size: 10px;
|
||||
font-family: 'DSWare';
|
||||
color: #b0bcc8;
|
||||
}
|
||||
|
||||
#gb-send {
|
||||
position: absolute !important;
|
||||
top: 244px;
|
||||
left: 217.5px;
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
image-rendering: pixelated;
|
||||
background: none;
|
||||
border: none;
|
||||
animation: gb-sendPulse 2s infinite ease;
|
||||
}
|
||||
|
||||
#gb-send:hover {
|
||||
content: url('images/sendbuttonhover.png');
|
||||
}
|
||||
|
||||
#gb-send.gb-disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
animation: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes gb-sendPulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
30% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
#gb-emote-toggle {
|
||||
top: 275px;
|
||||
left: 217.5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#gb-emote-selector {
|
||||
display: none;
|
||||
position: relative;
|
||||
padding: 8px 6px;
|
||||
z-index: 100;
|
||||
top: -52px;
|
||||
left: 15px;
|
||||
width: 205px;
|
||||
box-sizing: border-box;
|
||||
image-rendering: pixelated;
|
||||
animation: gbFadeIn 0.3s;
|
||||
background: linear-gradient(90deg, #fafbfb 0%, #f7f7f7 50%, #fafbfb 100%);
|
||||
border: 1.5px solid #c9c9c9;
|
||||
border-radius: 18px;
|
||||
box-shadow: inset 0px 0px 5px 0px rgb(202, 202, 202), 0px 0px 5px 0px #dadada;
|
||||
}
|
||||
|
||||
#gb-emote-selector.gb-visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gb-emote-item {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
cursor: pointer;
|
||||
image-rendering: pixelated;
|
||||
border-radius: 3px;
|
||||
padding: 2px;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.gb-emote-item:hover {
|
||||
background: #e0f0ff;
|
||||
}
|
||||
|
||||
.gb-date {
|
||||
position: absolute !important;
|
||||
top: 2px !important;
|
||||
right: 10px !important;
|
||||
left: auto !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
text-indent: 0 !important;
|
||||
font-size: 9px;
|
||||
color: #494949;
|
||||
font-family: 'DSWare';
|
||||
z-index: 1;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.gb-date::before,
|
||||
.gb-date::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.gb-emote {
|
||||
display: inline;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
vertical-align: middle;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.gb-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-top: 3px;
|
||||
padding-top: 0;
|
||||
padding-left: 2px;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
.gb-like-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-family: 'DSWare';
|
||||
font-size: 9px;
|
||||
color: #30baf3;
|
||||
cursor: pointer;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.gb-like-btn:hover {
|
||||
color: #0080d0;
|
||||
}
|
||||
|
||||
.gb-liked {
|
||||
color: #ff6b8a !important;
|
||||
}
|
||||
|
||||
.gb-like-icon {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
@keyframes gbFadeIn {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user