lucidergs/dragon_fire
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

style(css): ✨ use of new CSS features (@import and nested CSS)

Browse source
This commit is contained in:
David Bailey 2025-01-06 22:45:37 +01:00
parent 95e3fc0b00
commit d609265862
6 changed files with 464 additions and 276 deletions
Download patch file Download diff file Expand all files Collapse all files

42
www/static/styles/age_gate.css Normal file
View file

@ -0,0 +1,42 @@
/****************
* AGE GATE CSS *
****************/
#age_gate_block {
position: fixed;
top: 0;
left: 0;
z-index: 1040;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(20px);
transition: opacity 0.8s linear;
& div {
background-color: var(--bg_3);
border-radius: 1em;
padding: 1em;
width: 12em;
margin:0 auto;
display: table;
position: absolute;
left: 0;
right:0;
top: 50%;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform:translateY(-50%);
}
& p {
min-height: 5em;
}
}

118
www/static/styles/post_navbar.css Normal file
View file

@ -0,0 +1,118 @@
.navbar {
position: sticky;
top: 0px;
background: var(--bg_2);
box-shadow: 0px 5px 5px 0px #00000040;
z-index: 5;
& > ._titles {
display: flex;
flex-direction: row;
justify-content: left;
list-style-type: none;
padding: 0px;
& li {
padding: 0.2rem 0.8rem;
font-style: bold;
font-size: 1.5rem;
background: var(--highlight_1);
}
}
& > ._path {
width: 100%;
font-style: italic;
padding-left: 0.5rem;
background: var(--highlight_1);
font-size: 1.1rem;
display: flex;
flex-direction: row;
list-style-type: none;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
& a {
color: var(--text_1);
padding-right: 0.2rem;
}
}
& > ._expand_label {
cursor: pointer;
}
& > ._details {
background-color: var(--bg_3);
border: 0.15rem solid var(--highlight_1);
border-top: none;
border-radius: 0 0 0.2rem 0.2rem;
overflow: clip;
padding-bottom: 0.2rem;
padding-left: 0.3rem;
max-height: 80vh;
overflow-y: scroll;
& > ._full_path {
width: 100%;
font-style: italic;
padding-left: 0.2rem;
display: flex;
flex-direction: row;
list-style-type: none;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
& li {
margin-left: 0.3rem;
}
}
& > ._folder_list {
list-style: none;
padding-left: 0.4rem;
margin-left: 0.4rem;
border-left: 1px solid var(--text_border);
& ul {
list-style: none;
padding-left: 0.4rem;
margin-left: 0.4rem;
border-left: 1px solid var(--text_border);
}
& a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
& span, & label {
width: 1rem;
display: inline-block;
cursor: pointer;
}
}
}
}

113
www/static/styles/search.css Normal file
View file

@ -0,0 +1,113 @@
.dergen_search_form {
text-align: center;
& h1 {
padding-left: 0px;
border: none;
margin-bottom: 0.1em;
}
& input[type='text'] {
color: var(--text_1);
height: 2.5rem;
min-width: min(80%, 30em);
font-size: 1.2em;
background-color: #616161;
border: none;
border-radius: 1.25rem;
padding-left: 1.5rem;
margin-bottom: 0.8em;
box-shadow: 3px 3px 3px #00000033;
}
& button {
color: var(--text_1);
background-color: #515151;
border: none;
border-radius: 0.5rem;
cursor: pointer;
width: 15em;
height: 2.5em;
margin-left: 1em;
margin-right: 1em;
margin-bottom: 1em;
box-shadow: 3px 3px 2px #00000033;
}
button, input[type='text'] {
transition: background-color 0.3s;
&:hover {
background-color: #777777;
}
}
& ._search_type {
text-align: left;
margin-top: 1em;
& input {
display: none;
}
& label {
min-width: 5em;
text-align: center;
padding-left: 0.7em;
padding-right: 0.7em;
cursor: pointer;
display: inline-block;
border-bottom: 2px solid #FFFFFF50;
}
& input:checked + label {
border-bottom: 2px solid #FFFFFF;
}
}
}
.dergen_search_result_listing {
list-style: none;
margin-left: 0em;
padding-left: 0;
& > li {
margin-bottom: 2em;
}
& ._details {
list-style: none;
padding-left: 1.3em;
& ._path_details {
color: #AAAAAA;
& span {
font-size: 0.8rem;
min-width: 5rem;
display: inline-block;
}
}
& ._title {
font-size: 1.5rem;
}
}
}

41
www/static/styles/toc.css Normal file
View file

@ -0,0 +1,41 @@
.table_of_contents {
position: sticky;
float: left;
top: 3em;
width: 20em;
& a {
display: inline-block;
transition: all 0.5s !important;
line-height: 1em;
text-align: justify;
font-size: 0.9rem;
padding-left: 0.2em;
padding-right: 0.2em;
padding-bottom: 0.2em;
border-radius: 0.2em;
}
& .active {
background-color: var(--highlight_1);
color: var(--bg_1);
}
& ol {
padding-left: 0.5em;
list-style: none;
border-left: 1px solid #FFFFFF44;
}
& li {
margin-bottom: 0.2em;
}
}