yagich/pyrom
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make the sass file extendable

Browse Source
This commit is contained in:
Lera Elvoé
2025-08-16 23:44:02 +03:00
parent f1f62fa2c8
commit aaeb3a524b
5 changed files with 1160 additions and 909 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
data/static/style.css → data/static/css/style.css
View File

@ -28,12 +28,11 @@
}
.reaction-button.active, .tab-button, .currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
cursor: default;
color: black;
font-size: 0.9em;
font-family: "Cadman";
text-decoration: none;
border: 1px solid black;
border-radius: 3px;
border-radius: 4px;
padding: 5px 20px;
margin: 10px 0;
}
@ -42,6 +41,14 @@ body {
font-family: "Cadman";
margin: 20px 100px;
background-color: rgb(173.5214173228, 183.6737007874, 161.0262992126);
color: black;
}
a:link {
color: #c11c1c;
}
a:visited {
color: #730c0c;
}
.big {
@ -50,6 +57,7 @@ body {
#topnav {
padding: 10px;
margin: 0;
display: flex;
justify-content: end;
background-color: #c1ceb1;
@ -59,6 +67,7 @@ body {
#bottomnav {
padding: 10px;
margin: 0;
display: flex;
justify-content: end;
background-color: rgb(143.7039271654, 144.3879625984, 142.8620374016);
@ -81,7 +90,7 @@ body {
font-size: 3rem;
margin: 0 20px;
text-decoration: none;
color: black;
color: black !important;
}
.thread-title {
@ -120,7 +129,7 @@ body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: min-content 1fr min-content;
gap: 0px 0px;
gap: 0;
grid-auto-flow: row;
grid-template-areas: "post-info" "post-content" "post-reactions";
grid-area: post-content-container;
@ -185,6 +194,30 @@ pre code {
tab-size: 4;
}
.copy-code-container {
position: sticky;
width: calc(100% - 4px);
display: flex;
justify-content: space-between;
align-items: last baseline;
font-family: "Cadman";
border-top-right-radius: 8px;
border-top-left-radius: 8px;
background-color: #c1ceb1;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 2px solid black;
}
.copy-code-container::before {
content: "code block";
font-style: italic;
margin-left: 10px;
}
.copy-code {
margin-right: 10px;
}
.inline-code {
background-color: rgb(38.5714173228, 40.9237007874, 35.6762992126);
color: white;
@ -193,6 +226,7 @@ pre code {
margin: 4px;
border-radius: 4px;
font-size: 1rem;
white-space: pre;
}
#delete-dialog, .lightbox-dialog {
@ -230,30 +264,6 @@ pre code {
align-items: center;
}
.copy-code-container {
position: sticky;
width: calc(100% - 4px);
display: flex;
justify-content: space-between;
align-items: last baseline;
font-family: "Cadman";
border-top-right-radius: 8px;
border-top-left-radius: 8px;
background-color: #c1ceb1;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 2px solid black;
}
.copy-code-container::before {
content: "code block";
font-style: italic;
margin-left: 10px;
}
.copy-code {
margin-right: 10px;
}
blockquote {
padding: 10px 20px;
margin: 10px;
@ -290,9 +300,9 @@ blockquote {
}
.user-page-posts {
border-left: solid 1px black;
border-right: solid 1px black;
border-bottom: solid 1px black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
background-color: #c1ceb1;
}
@ -319,6 +329,7 @@ blockquote {
button, input[type=submit], .linkbutton {
display: inline-block;
background-color: rgb(177, 206, 204.5);
color: black !important;
}
button:hover, input[type=submit]:hover, .linkbutton:hover {
background-color: rgb(192.6, 215.8, 214.6);
@ -334,8 +345,8 @@ button.reduced, input[type=submit].reduced, .linkbutton.reduced {
padding: 5px;
}
button.critical, input[type=submit].critical, .linkbutton.critical {
color: white;
background-color: red;
color: white !important;
}
button.critical:hover, input[type=submit].critical:hover, .linkbutton.critical:hover {
background-color: #ff3333;
@ -352,6 +363,7 @@ button.critical.reduced, input[type=submit].critical.reduced, .linkbutton.critic
}
button.warn, input[type=submit].warn, .linkbutton.warn {
background-color: #fbfb8d;
color: black !important;
}
button.warn:hover, input[type=submit].warn:hover, .linkbutton.warn:hover {
background-color: rgb(251.8, 251.8, 163.8);
@ -369,7 +381,8 @@ button.warn.reduced, input[type=submit].warn.reduced, .linkbutton.warn.reduced {
input[type=file]::file-selector-button {
background-color: rgb(177, 206, 204.5);
margin: 10px 10px;
color: black !important;
margin: 10px;
}
input[type=file]::file-selector-button:hover {
background-color: rgb(192.6, 215.8, 214.6);
@ -391,6 +404,7 @@ p {
.pagebutton {
background-color: rgb(177, 206, 204.5);
color: black !important;
padding: 5px 5px;
margin: 0;
display: inline-block;
@ -425,7 +439,7 @@ p {
}
.login-container > * {
width: 25%;
width: 40%;
margin: auto;
}
@ -443,7 +457,7 @@ p {
input[type=text], input[type=password], textarea, select {
border: 1px solid black;
border-radius: 3px;
border-radius: 4px;
padding: 7px 10px;
width: 100%;
box-sizing: border-box;
@ -480,7 +494,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
display: grid;
grid-template-columns: 96px 1.6fr 96px;
grid-template-rows: 1fr;
gap: 0px 0px;
gap: 0;
grid-auto-flow: row;
min-height: 96px;
grid-template-areas: "thread-sticky-container thread-info-container thread-locked-container";
@ -519,8 +533,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
.post-image {
object-fit: contain;
max-width: 300px;
max-height: 300px;
max-width: 400px;
max-height: 400px;
min-width: 200px;
min-height: 200px;
flex: 1 1 0%;
@ -559,7 +573,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
display: grid;
grid-template-columns: 1.5fr 300px;
grid-template-rows: 1fr;
gap: 0px 0px;
gap: 0;
grid-auto-flow: row;
grid-template-areas: "guide-topics guide-toc";
}
@ -626,7 +640,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
display: grid;
grid-template-columns: 1.5fr 96px;
grid-template-rows: 1fr;
gap: 0px 0px;
gap: 0;
grid-auto-flow: row;
grid-template-areas: "topic-info-container topic-locked-container";
}
@ -650,9 +664,9 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
user-select: none;
background-color: #c1ceb1;
padding: 20px;
margin: 12px 0;
border-top: 6px outset rgb(217.26, 220.38, 213.42);
border-bottom: 6px outset rgb(135.1928346457, 145.0974015748, 123.0025984252);
margin: 15px 0;
border-top: 5px outset rgb(217.26, 220.38, 213.42);
border-bottom: 5px outset rgb(135.1928346457, 145.0974015748, 123.0025984252);
}
.draggable-topic.dragged {
background-color: rgb(177, 206, 204.5);
@ -690,6 +704,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
.tab-button {
background-color: rgb(177, 206, 204.5);
color: black !important;
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
@ -722,9 +737,9 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
background-color: rgb(191.3137931034, 189.7, 193.3);
border: 1px solid black;
padding: 10px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
ul, ol {
@ -740,7 +755,7 @@ ul, ol {
position: fixed;
bottom: 80px;
right: 80px;
border: 2px solid black;
border: 1px solid black;
background-color: #81a3e6;
padding: 20px 15px;
border-radius: 4px;
@ -753,8 +768,8 @@ ul, ol {
}
.accordion {
border-top-right-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
box-sizing: border-box;
border: 1px solid black;
margin: 10px 5px;
@ -837,6 +852,7 @@ footer {
.reaction-button.active {
background-color: #beb1ce;
color: black !important;
}
.reaction-button.active:hover {
background-color: rgb(203, 192.6, 215.8);
@ -857,7 +873,7 @@ footer {
margin: 0;
border: none;
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.6901960784);
background-color: rgba(0, 0, 0, 0.5019607843);
padding: 5px 10px;
width: 250px;
}