You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
769 lines
12 KiB
769 lines
12 KiB
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,900&display=swap');
|
|
|
|
body
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #071c24;
|
|
margin: 0px;
|
|
overflow-y: hidden;
|
|
overflow-x: hidden;
|
|
padding: 0px;
|
|
|
|
}
|
|
|
|
#userWrapper
|
|
{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1em;
|
|
justify-content: center;
|
|
margin-top:5vh;
|
|
left:50%;
|
|
height: 15vh;
|
|
width: 80%;
|
|
background-color: var(--card-color);
|
|
border-radius: 10px;
|
|
border: 1px solid #fffff042;
|
|
}
|
|
#avatar
|
|
{
|
|
flex-direction: column;
|
|
background-color: ivory;
|
|
height: 10vh;
|
|
width: 10vh;
|
|
background-size: 10vh 10vh;
|
|
position: relative;
|
|
top:2vh;
|
|
border-radius: 10px;
|
|
}
|
|
.userNameWrapper
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 20vh;
|
|
max-width: 70%;
|
|
height: 15vh;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
#userName
|
|
{
|
|
margin: 0;
|
|
position: relative;
|
|
|
|
font-size: 2.5em;
|
|
font-family: 'Lato';
|
|
font-weight: bolder;
|
|
white-space: pre-wrap;
|
|
color: rgb(15, 98, 131);
|
|
}
|
|
.info:hover .tooltip{
|
|
visibility: visible;
|
|
}
|
|
.PopUpContainer
|
|
{
|
|
position: absolute;
|
|
top:25%;
|
|
left:10%;
|
|
width: 80%;
|
|
height: 100%;
|
|
}
|
|
.popup .checkBox
|
|
{
|
|
position: relative;
|
|
top:-0.1em;
|
|
right:1vh;
|
|
float:right;
|
|
}
|
|
.popup .info
|
|
{
|
|
position: relative;
|
|
font-size: 20px;
|
|
}
|
|
.popup .tooltip {
|
|
visibility: hidden;
|
|
width: 17vw;
|
|
background-color: rgba(37, 14, 165, 0.171);
|
|
color: ivory;
|
|
font-size: small;
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
padding: 5px 0;
|
|
white-space: pre-wrap;
|
|
/* Position the tooltip */
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
.popup
|
|
{
|
|
background-color: rgba(210, 252, 253, 0.295);
|
|
border-radius: 5px;
|
|
border: 3px solid #020608;
|
|
text-align: center;
|
|
backdrop-filter: blur(3px);
|
|
height: 50%;
|
|
overflow: auto ;
|
|
}
|
|
|
|
.popup h3
|
|
{
|
|
margin-bottom: 1.7em;
|
|
}
|
|
.popup > p:hover
|
|
{
|
|
background-color: darkslategray;
|
|
width: 50%;
|
|
margin-left: 25%;
|
|
}
|
|
.popup > p
|
|
{
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
cursor: pointer;
|
|
background-color: #00345e69;
|
|
border-radius: 25px;
|
|
border: 2px solid #00345eb5;
|
|
width: 50%;
|
|
margin-left: 25%;
|
|
}
|
|
|
|
h1
|
|
{
|
|
font-family: 'Lato';
|
|
position: relative;
|
|
top: -50%;
|
|
}
|
|
.roleRuleWrapper > h1 , .FeedWrapper > h1
|
|
{
|
|
top:0;
|
|
}
|
|
#newRole
|
|
{
|
|
background-color: rgba(20, 43, 65, 0.678);
|
|
}
|
|
#newFeed
|
|
{
|
|
background-color: rgba(20, 43, 65, 0.678);
|
|
}
|
|
#newRole:hover
|
|
{
|
|
background-color:rgb(20, 43, 65) ;
|
|
}
|
|
#newFeed:hover
|
|
{
|
|
background-color:rgb(20, 43, 65) ;
|
|
}
|
|
|
|
.guildname
|
|
{
|
|
margin-top: 0.6em;
|
|
font-size: 1.3em;
|
|
font-family: 'Lato', sans-serif;
|
|
color:black;
|
|
text-shadow: 0 0 15px var(--glow-color);
|
|
animation: glow 2s infinite alternate;
|
|
}
|
|
|
|
@keyframes glow
|
|
{
|
|
from
|
|
{
|
|
text-shadow: 0 0 15px var(--glow-color);
|
|
}
|
|
to
|
|
{
|
|
text-shadow: 0 0 25px var(--glow-color);
|
|
}
|
|
}
|
|
p
|
|
{
|
|
font-family: 'Lato';
|
|
padding-top: 1vh;
|
|
padding-bottom: 1vh;
|
|
}
|
|
|
|
.hidden
|
|
{
|
|
display: none;
|
|
}
|
|
#close_bt
|
|
{
|
|
position: absolute;
|
|
top:1vh;
|
|
right:1vh;
|
|
cursor:pointer;
|
|
}
|
|
|
|
#Feeds
|
|
{
|
|
cursor:pointer;
|
|
}
|
|
|
|
#Guilds
|
|
{
|
|
/* background-color: ivory; */
|
|
width: 80%;
|
|
height: 60%;
|
|
position: absolute;
|
|
display:flex;
|
|
gap: 1em;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateY(-50%) translateX(-50%);
|
|
}
|
|
|
|
.true
|
|
{
|
|
background-color: rgba(0, 52, 94, 0.123) !important;
|
|
border-radius: 5px;
|
|
}
|
|
.img
|
|
{
|
|
width: 50%;
|
|
height: 100%;
|
|
background-size: 100.5% 100%;
|
|
background-position: var(--p, 0);
|
|
transition: background-position 0.5s ease;
|
|
}
|
|
.imgtrue
|
|
{
|
|
filter:grayscale(0.4);
|
|
}
|
|
.imgfalse
|
|
{
|
|
filter:grayscale(0.7)
|
|
}
|
|
.card:hover >.card-content > .card-image > .imgtrue
|
|
{
|
|
--p:20400%;
|
|
filter:grayscale(0);
|
|
|
|
}
|
|
|
|
|
|
/* width */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
/* Track */
|
|
::-webkit-scrollbar-track {
|
|
background: #020a0e91;
|
|
}
|
|
|
|
/* Handle */
|
|
::-webkit-scrollbar-thumb {
|
|
background: #076969;
|
|
}
|
|
|
|
/* Handle on hover */
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #064e4e;
|
|
}
|
|
|
|
:root {
|
|
--card-color: rgb(23, 23, 23);
|
|
}
|
|
|
|
|
|
#cards {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
width: calc(100% - 20px);
|
|
justify-content: center;
|
|
}
|
|
|
|
#cards:hover > .card::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.card {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
height: 260px;
|
|
flex-direction: column;
|
|
position: relative;
|
|
width: 300px;
|
|
z-index:10;
|
|
}
|
|
|
|
.card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.card::before,
|
|
.card::after {
|
|
border-radius: inherit;
|
|
content: "";
|
|
height: 100%;
|
|
left: 0px;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0px;
|
|
transition: opacity 500ms;
|
|
width: 100%;
|
|
}
|
|
|
|
.card::before {
|
|
background: radial-gradient(
|
|
800px circle at var(--mouse-x) var(--mouse-y),
|
|
rgba(255, 255, 255, 0.06),
|
|
transparent 40%
|
|
);
|
|
z-index: 3;
|
|
}
|
|
|
|
.card::after {
|
|
background: radial-gradient(
|
|
600px circle at var(--mouse-x) var(--mouse-y),
|
|
rgb(255, 255, 255),
|
|
transparent 40%
|
|
);
|
|
z-index: 1;
|
|
}
|
|
|
|
.card > .card-content{
|
|
background-color: var(--card-color);
|
|
border-radius: inherit;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
inset: 1px;
|
|
padding: 10px;
|
|
position: absolute;
|
|
}
|
|
|
|
|
|
/* -- ↓ ↓ ↓ extra card content styles ↓ ↓ ↓ -- */
|
|
|
|
h1, h2, h3, h4, span {
|
|
color: rgb(240, 240, 240);
|
|
font-family: "Rubik", sans-serif;
|
|
font-weight: 400;
|
|
margin: 0px;
|
|
}
|
|
|
|
i {
|
|
color: rgb(240, 240, 240);
|
|
}
|
|
|
|
.card-image {
|
|
align-items: center;
|
|
display: flex;
|
|
margin-top:2vh;
|
|
height: 140px;
|
|
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-image > i {
|
|
font-size: 6em;
|
|
opacity: 0.25;
|
|
}
|
|
|
|
.card-info-wrapper {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-grow: 1;
|
|
justify-content: flex-start;
|
|
padding: 0px 20px;
|
|
}
|
|
|
|
.card-info {
|
|
align-items: flex-start;
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.card-info > i {
|
|
font-size: 1em;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.card-info-title > h3 {
|
|
font-size: 1.1em;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.card-info-title > h4 {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-size: 0.85em;
|
|
margin-top: 8px;
|
|
}
|
|
#RoleRules
|
|
{
|
|
cursor:pointer;
|
|
}
|
|
#Strikes
|
|
{
|
|
cursor:pointer;
|
|
}
|
|
.rules
|
|
{
|
|
border: 2px solid #020608;
|
|
height: 20vh;
|
|
position: absolute;
|
|
top:1%;
|
|
overflow-y: scroll;
|
|
width: 60%;
|
|
left: 20%;
|
|
background-color:#071c24de;
|
|
color: ivory;
|
|
border-radius: 5px;
|
|
background-color:#5a8786;
|
|
}
|
|
|
|
.roleRuleWrapper
|
|
{
|
|
height: 20em;
|
|
border: 1px solid ivory;
|
|
font-size:1em;
|
|
text-align:center;
|
|
border-radius: 10px;
|
|
background-color: rgba(210, 252, 253, 0.295);
|
|
border-radius: 5px;
|
|
border: 3px solid #020608;
|
|
text-align: center;
|
|
backdrop-filter: blur(3px);
|
|
}
|
|
|
|
/* .roleRuleWrapper:before
|
|
{
|
|
content:'';
|
|
height: 100%;
|
|
aspect-ratio: 16/9;
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
} */
|
|
/* .roleRuleWrapper:after
|
|
{
|
|
content:attr(data-before);
|
|
height: 9em;
|
|
font-family: 'Lato';
|
|
position:absolute;
|
|
top:48%;
|
|
left:50%;
|
|
transform:translateX(-50%) translateY(-50%);
|
|
filter: blur(1px);
|
|
background-image: linear-gradient(ivory, #2a2a291f);
|
|
background-size: 100%;
|
|
-webkit-background-clip: text;
|
|
-moz-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
-moz-text-fill-color: transparent;
|
|
} */
|
|
.roleRule
|
|
{
|
|
color: ivory;
|
|
font-family: 'Lato';
|
|
font-weight: bolder;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.role
|
|
{
|
|
color:ivory;
|
|
position:absolute;
|
|
left: 10%;
|
|
top:58%;
|
|
}
|
|
.emoji
|
|
{
|
|
color:ivory;
|
|
position:absolute;
|
|
right: 10%;
|
|
top:58%;
|
|
}
|
|
.roleID
|
|
{
|
|
transform:translateY(250%);
|
|
background-color:#00000054;
|
|
border:2px solid transparent;
|
|
width: 37.5%;
|
|
}
|
|
p
|
|
{
|
|
font-weight:bold;
|
|
font-family: 'Lato';
|
|
}
|
|
input
|
|
{
|
|
font-weight:bold;
|
|
}
|
|
.emojiID
|
|
{
|
|
transform:translateY(250%);
|
|
background-color:#00000054;
|
|
border:2px solid transparent;
|
|
color:ivory;
|
|
text-align:right;
|
|
width: 37.5%;
|
|
}
|
|
.messageID
|
|
{
|
|
transform:translateY(250%);
|
|
background-color:#00000054;
|
|
border:2px solid transparent;
|
|
width: 37.5%;
|
|
}
|
|
.bt
|
|
{
|
|
width:20%;
|
|
height:1.5em;
|
|
background-color: #00345e69;
|
|
border-radius: 25px;
|
|
border: 2px solid #00345eb5;
|
|
position:absolute;
|
|
bottom:5%;
|
|
left:50%;
|
|
transform:translateX(-50%);
|
|
color:ivory;
|
|
cursor:pointer;
|
|
font-weight: bold;
|
|
font-family: 'lato';
|
|
}
|
|
#change
|
|
{
|
|
left:70%;
|
|
}
|
|
|
|
#delete
|
|
{
|
|
left:30%;
|
|
color: #410303a9;
|
|
}
|
|
#emojiImg
|
|
{
|
|
width:1.5em;
|
|
height:1.5em;
|
|
margin-right:1em;
|
|
border:0px solid trasparent;
|
|
}
|
|
#close_bt2
|
|
{
|
|
color:ivory;
|
|
float:right;
|
|
margin-right:0.5em;
|
|
margin-top:0.5em;
|
|
cursor:pointer;
|
|
}
|
|
#ChannelName
|
|
{
|
|
position: absolute;
|
|
color: ivory;
|
|
top: 1.5vh;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-family: 'lato';
|
|
}
|
|
|
|
.FeedWrapper
|
|
{
|
|
height: 45vh;
|
|
border: 1px solid ivory;
|
|
font-size:1em;
|
|
font-family:'lato';
|
|
color:ivory;
|
|
text-align:center;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
background-color:#5a8786;
|
|
}
|
|
.FeedWrapper > form
|
|
{
|
|
margin-top:4em;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.FeedWrapper > p
|
|
{
|
|
padding:0;
|
|
}
|
|
.FeedWrapper > form > section > input, .FeedWrapper > form > section > textarea, .FeedWrapper > form > section > input
|
|
{
|
|
background-color: #00000054;
|
|
color:white;
|
|
}
|
|
.costumMessageSection
|
|
{
|
|
width: 100%;
|
|
|
|
}
|
|
.dcSection
|
|
{
|
|
width: 50%;
|
|
}
|
|
.ytChannelSection
|
|
{
|
|
width: 50%;
|
|
}
|
|
.buttonsSection
|
|
{
|
|
width: 100%;
|
|
height: 3em;
|
|
margin-top: 3em;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
align-content: center;
|
|
}
|
|
.buttonsSection > .button
|
|
{
|
|
width:20%;
|
|
height:1.5em;
|
|
background-color: #00345e69;
|
|
border-radius: 25px;
|
|
border: 2px solid #00345eb5;
|
|
color:ivory;
|
|
cursor:pointer;
|
|
font-weight: bold;
|
|
font-family: 'lato';
|
|
}
|
|
|
|
.dc
|
|
{
|
|
background-color: #00000054;
|
|
border: 2px solid transparent;
|
|
border-radius: 4px;
|
|
color: ivory;
|
|
text-align: center;
|
|
}
|
|
option
|
|
{
|
|
background:#087575;
|
|
}
|
|
|
|
.rules p
|
|
{
|
|
cursor: pointer;
|
|
}
|
|
.feeds p
|
|
{
|
|
cursor: pointer;
|
|
}
|
|
.CostumMessage
|
|
{
|
|
color:ivory;
|
|
}
|
|
.CostumMessageI
|
|
{
|
|
border: 2px solid transparent;
|
|
color: ivory;
|
|
text-overflow: wrap;
|
|
width: 80%;
|
|
height: 3em;
|
|
resize: none;
|
|
}
|
|
|
|
.fancy{
|
|
font-family: 'Lato', monospace;
|
|
font-size: clamp(3rem, 10vw, 10rem);
|
|
color: white;
|
|
padding: 0rem clamp(1rem, 2vw, 3rem);
|
|
border-radius: clamp(0.4rem, 0.75vw, 1rem);
|
|
}
|
|
/*Scrool Bar*/
|
|
/* width */
|
|
::-webkit-scrollbar
|
|
{
|
|
width: 5px;
|
|
}
|
|
|
|
/* Track */
|
|
::-webkit-scrollbar-track
|
|
{
|
|
box-shadow: inset 0 0 5px #0e2934;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* Handle */
|
|
::-webkit-scrollbar-thumb
|
|
{
|
|
background: #010f14;
|
|
border-radius: 5px;
|
|
}
|
|
::-webkit-scrollbar-corner
|
|
{
|
|
background: rgba(0, 0, 0, 0.267);
|
|
}
|
|
|
|
|
|
:root {
|
|
--glow-color: rgba(0, 4, 255, 0.8);
|
|
}
|
|
|
|
#container
|
|
{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.material-symbols-outlined
|
|
{
|
|
cursor: pointer;
|
|
}
|
|
.spinnerContainer
|
|
{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.bt-spinner {
|
|
width: 75px;
|
|
height: 75px;
|
|
border-radius: 50%;
|
|
background-color: transparent;
|
|
border: 4px solid #222;
|
|
border-top-color: #009688;
|
|
-webkit-animation: 1s spin linear infinite;
|
|
animation: 1s spin linear infinite;
|
|
}
|
|
-webkit-@keyframes spin {
|
|
-webkit-from {
|
|
-webkit-transform: rotate(0deg);
|
|
-ms-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
-webkit-to {
|
|
-webkit-transform: rotate(360deg);
|
|
-ms-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes spin {
|
|
from {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
} |