degmods.com/src/styles/styles.css
freakoverse 999301a4d9
All checks were successful
Release to Staging / build_and_release (push) Successful in 44s
created a new class to handle input dropdown so it doesn't overflow
2024-08-16 14:29:11 +00:00

574 lines
10 KiB
CSS

.bodyMain {
background: unset;
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
min-height: 100vh;
position: relative;
letter-spacing: 1px;
font-size: 16px;
line-height: 25px;
word-break: break-word;
color: #ffffff;
}
.ContainerMain {
max-width: 1400px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: end;
padding: 0 10px 0 10px;
position: relative;
}
p {
margin: 0;
}
.InnerBodyMain {
width: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;
align-items: center;
padding: 25px 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
.IBMSecMain {
width: 100%;
display: flex;
flex-direction: column;
}
.IBMSMTitleMain {
width: 100%;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
}
@media (max-width: 768px) {
.IBMSMTitleMain {
}
}
.IBMSMTitleMainHeading {
color: rgba(255, 255, 255, 0.75);
}
.btnMain {
transition: ease 0.4s;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
color: rgba(255, 255, 255, 0.5);
font-weight: bold;
text-align: center;
outline: unset;
border: unset;
grid-gap: 10px;
}
.btnMain:hover {
transition: ease 0.4s;
outline: unset;
border: unset;
color: rgba(255, 255, 255, 0.75);
background: rgba(255, 255, 255, 0.1);
transform: scale(1.01);
text-decoration: unset;
}
.btnMain:active {
transition: ease 0.1s;
transform: scale(1);
}
.btnMain:focus {
background: rgba(255, 255, 255, 0.1);
}
.btnMain.btnMainClear {
background: rgba(255, 255, 255, 0);
}
.btnMain.btnMainClear:hover {
background: rgba(255, 255, 255, 0.1);
}
.btnMain.btnMainClear.btnMainClearActive {
background: rgba(255, 255, 255, 0.1);
}
.btnMain.btnMainAltText {
justify-content: start;
}
.IBMSecMainGroup {
width: 100%;
display: flex;
flex-direction: column;
grid-gap: 75px;
padding: 50px 0;
}
.IBMSMAction {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.btnMain.IBMSMActionBtn::before {
transition: ease 0.4s;
opacity: 0;
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: linear-gradient(
rgba(255, 255, 255, 0.05),
rgba(255, 255, 255, 0.05)
),
linear-gradient(to top right, #262626, #292929, #262626),
linear-gradient(to top right, #262626, #292929, #262626);
z-index: -1;
border-radius: 10px;
}
.btnMain.IBMSMActionBtn {
background: unset;
box-shadow: unset;
padding: 10px 25px;
border: solid 1px rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.25);
}
.btnMain.IBMSMActionBtn:hover {
border: solid 1px rgba(255, 255, 255, 0);
color: rgba(255, 255, 255, 0.75);
}
.btnMain.IBMSMActionBtn:hover::before {
transition: ease 0.4s;
opacity: 1;
}
.IBMSecMainGroup.IBMSecMainGroupAlt {
grid-gap: 25px;
padding: 25px 0;
}
.IBMSMTitleMainHeadingSpan {
font-weight: normal;
}
.blockquoteMainWrapper {
padding: 0 0 0 25px;
margin: 15px 0;
width: 100%;
}
.blockquoteMain {
width: 100%;
border-radius: 0 10px 10px 0;
border-left: solid 6px rgba(255, 255, 255, 0.1);
padding: 25px;
background: #232323;
font-style: italic;
color: rgba(255, 255, 255, 0.75);
margin: 0;
}
.blockquoteMainText {
}
.dropdownMain {
/*width: 100%;*/
background-color: unset;
flex-grow: 1;
}
.btnMain.btnMainDropdown {
width: 100%;
box-shadow: unset;
border: unset;
padding: 5px 15px;
color: rgba(255, 255, 255, 0.5);
background: linear-gradient(
rgba(255, 255, 255, 0.03),
rgba(255, 255, 255, 0.03)
),
linear-gradient(to top right, #262626, #292929, #262626);
font-size: 16px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
grid-gap: 5px;
}
.btnMain.btnMainDropdown:focus {
outline: unset;
box-shadow: unset;
background: rgba(255, 255, 255, 0.05);
}
.dropdownMainMenu {
width: 100%;
padding: 5px 5px 0 5px;
background: #232323;
border-radius: 10px;
border: solid 1px rgba(255, 255, 255, 0.1);
flex-direction: column;
grid-gap: 10px;
max-height: 200px;
overflow: auto;
font-size: 16px;
}
.dropdownMainMenuItem {
transition: ease 0.4s;
background: linear-gradient(
rgba(255, 255, 255, 0.03),
rgba(255, 255, 255, 0.03)
),
linear-gradient(to top right, #262626, #292929, #262626);
color: rgba(255, 255, 255, 0.75);
border-radius: 5px;
color: rgba(255, 255, 255, 0.5);
padding: 5px 10px;
margin: 0 0 5px 0;
white-space: normal;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
grid-gap: 10px;
}
.dropdownMainMenuItem:hover {
transition: ease 0.4s;
background: linear-gradient(
rgba(255, 255, 255, 0.05),
rgba(255, 255, 255, 0.05)
),
linear-gradient(to top right, #262626, #292929, #262626);
color: rgba(255, 255, 255, 0.75);
text-decoration: unset;
}
.inputMain {
transition: ease 0.4s;
background: rgba(0, 0, 0, 0.1);
outline: unset;
border-radius: 10px;
padding: 10px 15px;
border: solid 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 8px 0 rgb(0, 0, 0, 0.1);
color: white;
width: 100%;
}
.inputMain:focus {
border: solid 1px rgba(255, 255, 255, 0.2);
}
.labelMain {
margin: 0;
color: rgba(255, 255, 255, 0.5);
display: flex;
flex-direction: column;
justify-content: center;
}
.inputWrapperMain {
width: 100%;
display: flex;
flex-direction: row;
grid-gap: 10px;
position: relative;
overflow: hidden;
border-radius: 10px;
}
.inputWrapperMain.inputWrapperMainAlt {
overflow: unset;
}
.inputWrapperMainWrapper {
width: 100%;
display: flex;
flex-direction: column;
grid-gap: 10px;
}
.labelDescriptionMain {
color: rgba(255, 255, 255, 0.35);
font-size: 14px;
}
.btnMain.btnMainRemove {
background: rgba(255, 255, 255, 0);
padding: 0;
width: 50px;
min-width: 50px;
}
.btnMain.btnMainRemove:hover {
background: rgba(255, 255, 255, 0.05);
color: tomato;
}
.btnMain.btnMainAdd {
background: rgba(255, 255, 255, 0);
}
.btnMain.btnMainAdd:hover {
background: rgba(255, 255, 255, 0.05);
}
.labelWrapperMain {
width: 100%;
display: flex;
flex-direction: row;
grid-gap: 15px;
justify-content: space-between;
align-items: center;
}
.inputLabelWrapperMain {
width: 100%;
display: flex;
flex-direction: column;
grid-gap: 10px;
}
.inputLabelWrapperMain.inputLabelWrapperMainAlt {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.inputLabelWrapperMain.inputLabelWrapperMainAltStylized {
padding: 10px 15px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1);
}
.linkMain {
color: rgba(255, 115, 255, 0.5);
}
.FundingCampaign {
width: 100%;
background: rebeccapurple;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
@media (max-width: 992px) {
.FundingCampaign {
flex-direction: column;
}
}
.FundingCampaignLink {
color: rgba(255, 255, 255, 0.75);
font-weight: bold;
text-decoration: unset;
padding: 10px;
flex-grow: 1;
text-align: center;
}
@media (max-width: 992px) {
.FundingCampaignLink {
width: 100%;
}
}
.FundingCampaignLink:hover {
color: rgb(255, 255, 255);
}
.CheckboxMain {
-webkit-appearance: none;
appearance: none;
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
border-radius: 8px;
border: solid 1px rgba(255, 255, 255, 0.1);
background-color: rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 8px 0 rgb(0, 0, 0, 0.1);
display: grid;
place-content: center;
cursor: pointer;
}
.CheckboxMain::before {
transition: ease 0.4s;
content: '\2713';
width: 24px;
height: 24px;
transform: scale(0);
transition: 120ms transform ease-in-out;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.CheckboxMain:checked::before {
transition: ease 0.2s;
transform: scale(1);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1);
border-radius: 6px;
}
.CheckboxMain:hover {
border: solid 1px rgba(255, 255, 255, 0.15);
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: rgb(44, 44, 44);
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.25);
}
a {
color: rgba(255, 115, 255, 0.5);
text-decoration: unset;
}
a:hover {
color: rgba(255, 115, 255, 0.75);
text-decoration: underline;
}
.inputWrapperMainBox {
width: 50px;
min-width: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.25);
}
.form-range.inputRangeMain {
background: rgba(255, 255, 255, 0.1);
padding: 5px;
border-radius: 5px;
}
.form-range.inputRangeMain::-webkit-slider-runnable-track {
transition: ease 0.4s;
background: rgba(0, 0, 0, 0.25);
border-radius: 5px;
box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1);
}
.form-range.inputRangeMain::-webkit-slider-runnable-track:hover {
transition: ease 0.4s;
background: rgba(0, 0, 0, 0.35);
border-radius: 5px;
box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1);
}
.form-range.inputRangeMain::-webkit-slider-thumb {
transition: ease 0.4s;
background: #a0a0a0;
border-radius: 5px;
box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1);
}
.form-range.inputRangeMain::-webkit-slider-thumb:hover {
transition: ease 0.4s;
background: #dcdcdc;
border-radius: 5px;
box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1);
}
.inputLabelWrapperMainSliderWrapper {
display: flex;
flex-direction: row;
grid-gap: 10px;
}
.btnMain.btnMainInsideField:hover {
background: unset;
}
.btnMain.btnMainInsideField {
position: absolute;
right: 0;
top: 0;
bottom: 0;
border-radius: unset;
}
.inputMain.inputMainWithBtn {
padding-right: 50px;
}
.errorMain {
width: 100%;
border-radius: 10px;
padding: 10px;
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.5);
display: flex;
flex-direction: row;
grid-gap: 10px;
}
.errorMainColor {
width: 5px;
border-radius: 2px;
background: tomato;
}
.errorMainText {
}