Authorsatoru8
LicenseNo License
Categorydream
Created
Updated
Size5.3 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Larger centered previews, and pop-out previews.
Responsive art style grid based on your window size.
Scrollbars are themed now. They will only show on hover. And no longer distract you from your previews.
Buttons are compact and moved to the top.
Edit with Text mode changed to side-by-side view with large preview.
This is based on the dark mode dream.ai, but it should also work fine on light mode.
There's an option to change the color of the art-style border, the default is red
/* ==UserStyle==
@name Dream AI Responsive Theme (Dream.ai)
@namespace github.com/openstyles/stylus
@version 1.0.3
@description Better viewing :)
@author Sato
@var color borderColor "Art Style Border" red
==/UserStyle== */
@-moz-document url-prefix("https://dream.ai") {
.iknQDv {
height: calc(min(calc(calc(var(--vh) * 100) - 8px) * 0.9));
max-height: 100vh;
max-width: 100vw;
width: 100vw;
}
/*
** Left Prompt Grid
*/
.kULluh {
grid-template-columns: repeat(12, minmax(0px, 1fr));
gap: 0px 20px
}
.gOkreM {
margin: 10px
}
.iPXAWi.selected {
border: 4px solid var(--borderColor) !important
}
@media screen and (max-width: 2350px) {
.kULluh {
grid-template-columns: repeat(10, minmax(0px, 1fr))
}
}
@media screen and (max-width: 1950px) {
.kULluh {
grid-template-columns: repeat(8, minmax(0px, 1fr))
}
}
@media screen and (max-width: 1550px) {
.kULluh {
grid-template-columns: repeat(6, minmax(0px, 1fr))
}
}
@media screen and (max-width: 1250px) {
.kULluh {
grid-template-columns: repeat(5, minmax(0px, 1fr))
}
}
@media screen and (max-width: 1000px) {
.kULluh {
grid-template-columns: repeat(4, minmax(0px, 1fr))
}
}
/*
** Right Side Preview
*/
.DreamOutput__ArtPreview-sc-q3wcit-2 {
display: none
}
.iPZNUi {
padding-left: 0;
}
.jmCaAz {
height: 100%;
}
.jRFaEk {
flex-direction: column-reverse
}
/* Previews Display */
.kGyIww {
justify-content: center
}
#__next .fWinjJ {
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
}
.eTUVyR,
.enUoxV {
width: min(100%, calc(calc((calc(calc(min(calc(calc(var(--vh) * 100) - 64px) * 0.9, 800px)) - 144px) / 2) - 5px) * 0.612245));
width: 52%;
height: 100%
}
.cwzomt {
flex-direction: row
}
.cwzomt .blBgff {
margin: 8px 0 8px 0;
width: 80%
}
.cwzomt .ntunR {
width: 80%
}
/*
** Pop-out Preview
*/
.Modal-sc-23q3re-1.eCIvKq {
width: 50vw;
max-height: calc(calc(calc(var(--vh) * 100) - 34px) - 100px);
background: rgb(27 27 27 / 95%);
}
.Modal-sc-23q3re-1.fWCIPr {
width: 50vw;
max-height: calc(calc(calc(var(--vh) * 100) - 34px) - 100px);
background: rgb(190 190 190 / 90%);
}
.Modal-sc-23q3re-1.eCIvKq::-webkit-scrollbar,
.Modal-sc-23q3re-1.fWCIPr::-webkit-scrollbar {
width: 10px
}
.Modal-sc-23q3re-1.eCIvKq::-webkit-scrollbar-track,
.Modal-sc-23q3re-1.fWCIPr::-webkit-scrollbar-track {
background: transparent;
margin: 25px 0 25px 0
}
.Modal-sc-23q3re-1.eCIvKq::-webkit-scrollbar-thumb,
.Modal-sc-23q3re-1.fWCIPr::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 50px
}
.Modal-sc-23q3re-1.eCIvKq::-webkit-scrollbar-thumb:hover,
.Modal-sc-23q3re-1.fWCIPr::-webkit-scrollbar-thumb:hover {
background: rgb(0 128 255 / 40%)
}
/*
** Edit with Text
*/
.hKWYRq {
max-width: initial;
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
height: 100vh;
}
.kCKpuh {
height: 100%;
width: 100%
}
.hjuVnN {
width: min(100%, calc(calc(calc(calc(var(--vh) * 200) - 64px) - 488px) * 0.612245));
}
/*
** Finalize Screen
*/
.ContainerWithAspectRatio__Container-sc-1inm3d-0.cOtNQd {
height: 90%;
min-width: 50%;
width: min(100%, calc(calc(calc(calc(var(--vh) * 100) - 64px) - 488px) * 0.612245));
}
.Common__DreamImage-sc-1dxkxby-3.gbeYse {
border-radius: 20px
}
.Button__ButtonContainer-sc-1fhcnov-0.dMDcmA {
width: 35% !important;
}
.GenerateAgainButton__Button-sc-1dwt0yk-0.hpOWYs {
background: transparent;
font-size: 1em;
font-weight: bold;
bottom: 2%
}
/*
** Profile Dropdown
*/
/*
.ddMeRU {
top: 100%;
padding: 24px;
right: 70px;
width: 250px;
border-radius: 16px;
justify-content: center
}
.eJoRbK {
top: 100%;
padding: 24px;
right: 70px;
width: 250px;
border-radius: 16px;
justify-content: center
}
.jFbdIC {
position: relative;
padding:2px;
top: -200px
}
.ddMeRU .gnnTdr,
.eJoRbK .iBfWtd {
padding-top: 20px;
margin-top: 0;
border:none;
height:40px;
}
*/
}