mirror of
https://github.com/System-End/daydream-phoenix.git
synced 2026-04-19 19:45:13 +00:00
163 lines
No EOL
4 KiB
CSS
163 lines
No EOL
4 KiB
CSS
/* Daydream Theme - Custom CSS for external websites */
|
|
/* Import the serif font from daydream.hackclub.com */
|
|
@import url('https://daydream.hackclub.com/fonts/serif.woff') format('woff');
|
|
@import url('https://daydream.hackclub.com/fonts/serif-italic.woff') format('woff');
|
|
|
|
/* Define the Daydream fonts */
|
|
@font-face {
|
|
font-family: 'Daydream New';
|
|
font-display: swap;
|
|
src: url('https://daydream.hackclub.com/fonts/serif.woff') format('woff');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Daydream New';
|
|
font-display: swap;
|
|
src: url('https://daydream.hackclub.com/fonts/serif-italic.woff') format('woff');
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Apply serif font to all headers */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'Daydream New', ui-serif, serif !important;
|
|
color: #833710;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Question container styling - letter appearance */
|
|
#question-container {
|
|
border-radius: 0px;
|
|
background-color: #fffbdf;
|
|
background-image: url('https://daydream.hackclub.com/letter-texture.png');
|
|
background-size: 100% auto;
|
|
background-repeat: repeat-y;
|
|
border: 2px solid #d3b180;
|
|
color: #8B4513;
|
|
}
|
|
|
|
/* Button styling - matching the "get free stickers" button */
|
|
[data-cy="button-component"] {
|
|
display: inline-flex;
|
|
padding: 8px 16px;
|
|
background-color: #E472AB;
|
|
border: none;
|
|
border-bottom: 2px solid #A65A80;
|
|
color: white;
|
|
border-radius: 9999px;
|
|
font-family: 'Atkinson Hyperlegible', ui-sans-serif, sans-serif;
|
|
font-weight: normal;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.1s ease;
|
|
text-align: center;
|
|
min-width: max-content;
|
|
}
|
|
|
|
[data-cy="button-component"]:hover {
|
|
box-shadow: 0 2px 0 0 #A65A80;
|
|
transform: translateY(-2px);
|
|
background-color: #E472AB !important;
|
|
}
|
|
|
|
[data-cy="button-component"]:active {
|
|
transform: translateY(2px);
|
|
border-bottom-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-cy="button-component"]:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(228, 114, 171, 0.3);
|
|
}
|
|
|
|
/* Add cloud decoration to buttons */
|
|
[data-cy="button-component"]::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: auto;
|
|
height: 100%;
|
|
background-image: url('https://daydream.hackclub.com/button-clouds.svg');
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: bottom center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
|
|
[data-cy="input-component"],
|
|
div:has(> div > [data-cy="select-value-container"]),
|
|
.ant-picker,
|
|
#react-select-2-live-region + span + div, .PhoneInputCountry, .PhoneInputInput {
|
|
background-color: #fffef2;
|
|
border-color: rgba(211, 177, 128,0.5);
|
|
border-radius: 0px;
|
|
}
|
|
|
|
/* Additional Daydream color variables for use */
|
|
:root {
|
|
--daydream-blue: #487DAB;
|
|
--daydream-blue-dark: #3F709A;
|
|
--daydream-teal: #44DBC8;
|
|
--daydream-teal-hover: #3CC2AF;
|
|
--daydream-dark: #4477A3;
|
|
--daydream-light: #FCF7C4;
|
|
--daydream-pink: #E472AB;
|
|
--daydream-pink-dark: #A65A80;
|
|
--daydream-bg-blue: #CCF4FD;
|
|
--daydream-bg-cream: #FCEFC5;
|
|
--daydream-text-brown: #8B4513;
|
|
}
|
|
|
|
#scrollable-widgets-wrapper {
|
|
background: url('https://daydream.hackclub.com/cloudy-bg-dim.png'), linear-gradient(to bottom, #CCF4FD, #AECDF6);
|
|
background-attachment: local !important;
|
|
background-position: center bottom;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
position: relative;
|
|
}
|
|
|
|
#undefined-error-sub-label {
|
|
color: #E472AB;
|
|
}
|
|
|
|
button {
|
|
box-shadow: none;
|
|
}
|
|
|
|
a {
|
|
color: #548abb;
|
|
}
|
|
|
|
/* the "- Or -" divider */
|
|
.text-sm > span.px-2 {
|
|
background-color: #FFFBDF !important;
|
|
}
|
|
|
|
/* make the 'Thank You' text use the header font */
|
|
.fillout-field-thank-you > div > div > div:not(.mt-\[3px\]) p {
|
|
font-family: 'Daydream New', ui-serif, serif !important;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* make the checkbox text clickable */
|
|
div:has(> div > [role="checkbox"]) p {
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
/* 'sign in with google' button */
|
|
[data-cy="button-component"] .text-blue-500 {
|
|
color: white !important;
|
|
}
|
|
|
|
.fillout-field-send-response > div {
|
|
background: #fffef2;
|
|
} |