mozhi/public/css/global.css

381 lines
6.0 KiB
CSS
Raw Normal View History

2023-06-25 12:27:59 +05:30
/* god bless you */
:root {
--text: #fff;
--background: #252525;
--secondary-background: #353535;
--background-darker: #151515;
--accent: #00b7c3;
--yellow: #8b8000;
color-scheme: dark;
}
body {
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
sans-serif;
color: var(--text);
background-color: var(--background-darker);
transition: ease-in-out 0.25s;
margin: 0;
}
::-webkit-scrollbar {
width: 8px;
height: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background: var(--background);
}
main {
margin: 0 24vw;
}
.margin-ow {
margin: 0 12vw;
}
pre {
overflow: scroll;
background: var(--secondary-background);
border-radius: 4px;
padding: 4px;
}
#wrap {
display: flex;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
padding: 8px;
margin-bottom: 8px;
background-color: var(--background);
}
.index-gh {
background: var(--background);
color: var(--text);
padding: 4px;
border-radius: 8px;
}
.brand {
display: flex;
align-items: center;
gap: 8px;
transition: ease-in-out 0.25s;
color: var(--text);
}
.navbar-slogan:hover {
text-decoration: underline;
text-underline-offset: 5px;
}
.brand:hover {
color: var(--text);
text-decoration: underline;
}
.error {
background-color: var(--background);
padding: 8px;
border-radius: 4px;
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
sans-serif;
color: var(--text);
}
.center {
text-align: center;
}
a {
color: var(--text);
text-decoration: underline;
text-underline-offset: 5px;
}
a:hover {
color: var(--accent);
}
.setup-notice {
background-color: var(--yellow);
padding: 8px;
border-radius: 4px;
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
sans-serif;
color: var(--text);
}
.setup-notice > a {
text-decoration: underline;
text-underline-offset: 5px;
}
.setup-notice > a:hover {
color: var(--text);
opacity: 1;
}
/* URI: /explore */
.explore-card,
.user-repo-card {
background-color: var(--background);
padding: 8px;
border-radius: 4px;
margin: 8px 0 8px 0;
text-overflow: ellipsis;
white-space: wrap;
text-decoration: none;
display: flex;
transition: ease-in-out 0.25s;
}
.explore-card:hover,
.user-repo-card:hover {
background-color: var(--secondary-background);
color: var(--text);
}
/* URI: /:user */
.user-profile {
background-color: var(--background);
padding: 8px;
border-radius: 4px;
margin: 8px;
display: flex;
flex-direction: column;
align-items: center;
}
.user-profile h1 {
color: var(--accent);
margin: 4px;
word-wrap: nowrap;
text-overflow: ellipsis;
overflow-wrap: anywhere;
}
.user-profile h2 {
margin: 4px;
}
.user-profile p {
margin: 4px;
}
.user-profile img {
border: 4px solid var(--accent);
border-radius: 50%;
}
.user-bio,
.user-readme {
background-color: var(--background);
padding: 8px;
border-radius: 4px;
margin: 8px;
}
.user-bio-text,
.user-readme-text {
background-color: var(--background-darker);
padding: 8px;
border-radius: 4px;
margin-bottom: 0;
}
.user-readme-text {
margin-top: 0;
}
.social-links {
display: flex;
flex-direction: column;
}
.user-repo-card {
background-color: var(--background-darker);
padding: 4px;
border-radius: 4px;
margin: 8px 0 8px 0;
text-overflow: ellipsis;
white-space: wrap;
text-decoration: none;
display: flex;
flex-direction: column;
transition: ease-in-out 0.25s;
}
.user-repo-card > p {
margin: 8px;
}
.user-repo-card:hover {
background-color: var(--secondary-background);
color: var(--text);
}
.lang-bar:last-child {
margin-bottom: 0;
}
.lang-bar {
width: 100%;
display: inherit;
height: 10px;
border-radius:4px;
overflow: hidden; /* To force the corners to be round. */
user-select: none; /* Prevent the selection */
-webkit-user-select: none; /* Safari specific fix. */
}
/* URI: /:user/:repo */
.button {
background-color: var(--background);
padding: 8px;
border-radius: 4px;
margin: 8px;
color: var(--text);
text-decoration: none;
text-align: center;
display: inline-block;
}
.button:hover {
background-color: var(--secondary-background);
color: var(--text);
}
.button-parent {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.file-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.file-u-list {
padding: 0;
margin: 0;
list-style-type: none;
}
/* URI: /file/:user/:repo/:file */
.user-readme pre {
padding: 8px;
border-radius: 4px;
/*white-space: pre-wrap;*/
overflow-x: auto;
}
.user-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.secondary {
background-color: var(--secondary-background);
}
/* Overwrite */
.no-margin {
margin: 0;
}
.no-padding {
padding: 0;
}
.float-right {
float: right;
display: grid;
flex: none;
align-self: flex-start;
}
@media screen and (prefers-color-scheme: light) {
:root {
--text: #000;
--background: #ececec;
--secondary-background: #f5f5f5;
--background-darker: #dddddd;
--accent: #005ec3;
--yellow: #f5f5a5;
color-scheme: light;
}
a {
color: black;
}
a:hover {
color: #005ec3;
}
.explore-card {
background-color: var(--background);
color: #000;
}
}
@media screen and (max-width: 900px) {
main {
margin: 8px;
}
#wrap {
display: flex;
flex-direction: column;
}
.float-right {
float: none;
display: inline-grid;
}
.navbar-slogan {
display: none;
}
.navbarImg {
height: 40px;
}
.explore-card {
margin-left: 0;
margin-bottom: 8px;
margin-right: 0;
}
.social-links {
flex-direction: column;
}
}
.cl {
padding-left: 8px;
}