MediaWiki
Group-Grouse.css: Difference between revisions
From Grouse House Wiki
No edit summary |
No edit summary |
||
(13 intermediate revisions by the same user not shown) | |||
Line 93: | Line 93: | ||
} | } | ||
Decor preview modal | |||
#decorModalV1 { | #decorModalV1 { | ||
Line 122: | Line 109: | ||
#decorModalContent { | #decorModalContent { | ||
border: 3px solid transparent; | |||
border-radius: 10px; | |||
height: min(100vh, calc(100vw * .75)); | |||
width: | min-height: min(435px, 100vh); | ||
max-height: 620px; | |||
left: 50%; | |||
max-width: min(640px, 100vw); | |||
overflow: hidden; | |||
padding: 0; | |||
position: fixed; | |||
transform: translate(-50%, -50%); | |||
top: 50%; | |||
width: 100vw; | |||
min-width: 290px; | |||
z-index: 12000; | |||
} | } | ||
Line 155: | Line 152: | ||
.modalbody { | .modalbody { | ||
height: | height: 91.5%; | ||
} | } | ||
Line 170: | Line 158: | ||
position: fixed; | position: fixed; | ||
z-index: 99902; | z-index: 99902; | ||
top: | top: 47%; | ||
left: 50%; | left: 50%; | ||
width: 640px; | width: 640px; | ||
Line 180: | Line 168: | ||
position: fixed; | position: fixed; | ||
z-index: 99900; | z-index: 99900; | ||
top: | top: 47%; | ||
left: 50%; | left: 50%; | ||
width: 640px; | width: 640px; | ||
Line 190: | Line 178: | ||
position: fixed; | position: fixed; | ||
z-index: 99901; | z-index: 99901; | ||
top: | top: 47%; | ||
left: 50%; | left: 50%; | ||
width: 640px; | width: 640px; | ||
max-width: 640px; | max-width: 640px; | ||
transform: translate(-50%, -50%); | transform: translate(-50%, -50%); | ||
} | |||
#previewbackground { | |||
top: 47%; | |||
left: 50%; | |||
max-width: 640px; | |||
transform: translate(-50%,-50%); | |||
position: fixed; | |||
width: 640px; | |||
} | } | ||
Line 203: | Line 200: | ||
padding: 10px; | padding: 10px; | ||
align-items: center; | align-items: center; | ||
margin-top: | margin-top: -4em; | ||
} | } | ||
Line 254: | Line 218: | ||
line-height: 2em; | line-height: 2em; | ||
padding: 5px; | padding: 5px; | ||
border-radius: | border-radius: 0px; | ||
width: 6em; | width: 6em; | ||
text-align: center; | text-align: center; | ||
Line 266: | Line 230: | ||
} | } | ||
#checkboxes { | #decorModalV1 #checkboxes { | ||
position: fixed; | position: fixed; | ||
background: #bbb; | background: #bbb; | ||
Line 272: | Line 236: | ||
text-align: center; | text-align: center; | ||
top: 70%; | top: 70%; | ||
left: | left: 25%; | ||
width: 15em; | width: 15em; | ||
max-width: 640px; | max-width: 640px; | ||
Line 281: | Line 245: | ||
} | } | ||
@media only screen and (max-width: 40rem) { | |||
#decorModalContent { | |||
height: 65vh; | |||
width: 95vw; | |||
} | |||
.modalbody { | |||
height: 63.5%; | |||
} | } | ||
# | #decorpreviewimg { | ||
top: | top: 40vh; | ||
left: 50%; | left: 50%; | ||
width: 90vw; | |||
} | } | ||
# | #behinddecorpreviewimg { | ||
top: 40vh; | |||
left: 50%; | |||
width: 90vw; | |||
} | } | ||
# | #previewbasewolf { | ||
top: 40vh; | |||
left: 50%; | |||
width: 90vw; | |||
} | } | ||
# | #previewbackground { | ||
top: 40vh; | |||
left: 50%; | |||
width: 90vw; | |||
} | } | ||
.modalfooter { | |||
margin-top: 9.5vh; | |||
} | |||
} | } |
Revision as of 20:43, 21 November 2024
.mw-headline + .mw-editsection { display: none; } h2 { font-size: 0em; } h2.c-header.active { font-size: 1.3em; } h2.c-header.hidden { font-size: 1.3em; } h3 { font-size: 0em; } h3.c-header.active { font-size: 1.1em; } h3.c-header.hidden { font-size: 1.1em; } #talkpagelink { width: 30px; position: absolute; right: 7.5em; top: 0.3em; } @media only screen and (max-width: 73.75rem) { table.mobiletoc { top: 10em; } #sidebarlogo { top: 2em; } } @media only screen and (max-width: 51.063rem) { table.mobiletoc { top: 14em; } #sidebarlogo { top: 1em; left: 4vw; } #sidebarlogo img { height: 100px; } } @media only screen and (max-width: 47rem) { table.mobiletoc { top: 18em; } #sidebarlogo { top: 4em; left: 4vw; } #sidebarlogo img { height: 100px; } } @media only screen and (max-width: 42.5rem) { table.mobiletoc { top: 18em; } #sidebarlogo { top: 4em; left: 4vw; } #sidebarlogo img { height: 100px; } } Decor preview modal #decorModalV1 { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100vh; overflow: hidden; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } #decorModalContent { border: 3px solid transparent; border-radius: 10px; height: min(100vh, calc(100vw * .75)); min-height: min(435px, 100vh); max-height: 620px; left: 50%; max-width: min(640px, 100vw); overflow: hidden; padding: 0; position: fixed; transform: translate(-50%, -50%); top: 50%; width: 100vw; min-width: 290px; z-index: 12000; } .modalheader { background-color: #3a5f70; padding: 10px; font-weight: bold; color: white; } .decorname { font-weight: bold; } .modalclose { color: white; float: right; font-size: 28px; font-weight: bold; } .modalclose:hover, .modalclose:focus { color: black; text-decoration: none; cursor: pointer; } .modalbody { height: 91.5%; } #decorpreviewimg { position: fixed; z-index: 99902; top: 47%; left: 50%; width: 640px; max-width: 640px; transform: translate(-50%, -50%); } #behinddecorpreviewimg { position: fixed; z-index: 99900; top: 47%; left: 50%; width: 640px; max-width: 640px; transform: translate(-50%, -50%); } #previewbasewolf { position: fixed; z-index: 99901; top: 47%; left: 50%; width: 640px; max-width: 640px; transform: translate(-50%, -50%); } #previewbackground { top: 47%; left: 50%; max-width: 640px; transform: translate(-50%,-50%); position: fixed; width: 640px; } .modalfooter { display: flex; flex-direction: row; background: #d4d4d4; padding: 10px; align-items: center; margin-top: -4em; } #previewinput { display: none; width: 50%; text-align: right; } #previewoptions { width: 100%; } #checkboxesbutton { background: #acacac; height: auto; line-height: 2em; padding: 5px; border-radius: 0px; width: 6em; text-align: center; margin-right: 0.8em; display: none; } #checkboxesbutton:hover { background: #8c8c8c; cursor: pointer; } #decorModalV1 #checkboxes { position: fixed; background: #bbb; padding: 10px; text-align: center; top: 70%; left: 25%; width: 15em; max-width: 640px; transform: translate(-50%,-50%); z-index: 99999; padding-top: 20px; display: none; } @media only screen and (max-width: 40rem) { #decorModalContent { height: 65vh; width: 95vw; } .modalbody { height: 63.5%; } #decorpreviewimg { top: 40vh; left: 50%; width: 90vw; } #behinddecorpreviewimg { top: 40vh; left: 50%; width: 90vw; } #previewbasewolf { top: 40vh; left: 50%; width: 90vw; } #previewbackground { top: 40vh; left: 50%; width: 90vw; } .modalfooter { margin-top: 9.5vh; } }