XeNote/styles/style.css

234 lines
5.0 KiB
CSS
Raw Normal View History

a {
color: var(--text-accent);
outline: none;
}
a:hover {
color: var(--text-accent-hover);
}
.container {
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
flex-direction: row;
justify-content: center;
}
2022-04-08 04:56:09 +00:00
/* Foooter section BEGIN */
.note-footer {
display: block;
background-color: rgba(238, 238, 238, 0.5);
2022-04-08 04:56:09 +00:00
border-radius: 16px;
margin-top: 24px;
padding: 16px;
}
.backlink-container {
flex-wrap: wrap;
justify-content: space-between;
position: relative;
/*background-color: #f8bbbb;*/
flex-direction: row;
display: flex;
}
.note-footer .backlink-heading {
display: block;
font-size: 18px;
line-height: 24px;
font-weight: 600;
color: var(--text-muted);
}
.backlink-container .backlink {
/*background-color: #f8f2f2;*/
margin: 8px -8px 0px;
padding: 8px;
height: 116px;
2022-04-08 04:56:09 +00:00
width: 318px;
text-decoration: none;
display: block;
overflow: hidden;
border-radius: 8px;
/*padding-bottom: 8px;*/
}
.note-footer .no-backlinks {
color: var(--text-muted);
}
2022-04-08 04:56:09 +00:00
.backlink-container .backlink:hover {
background-color: rgba(199, 199, 199, 0.3);
2022-04-08 04:56:09 +00:00
}
.backlink-container .backlink-title {
font-size: 14px;
line-height: 18px;
2022-04-08 04:56:09 +00:00
font-weight: 600;
text-decoration: none;
}
.backlink-container a{
text-decoration: none;
color: var(--text-muted);
}
.backlink-container .backlink-preview {
font-size: 12px;
line-height: 16px;
overflow: hidden;
}
.backlink-container p {
margin: 12px 0px;
}
/* Foooter section END */
.markdown-rendered {
font-size: 18px;
line-height: 1.6em;
width: 740px;
background-color: var(--background-primary);
color: var(--text-normal);
font-family:var(--default-font);
2022-04-18 16:18:26 +00:00
padding: 15px 30px;
}
.nav-bar {
width: 300px;
flex: 0 0 300px;
position: relative;
display: flex;
background-color: var(--background-primary-alt);
border-right: 1px solid var(--background-secondary-alt);
font-family:var(--default-font);
font-size: 14px;
line-height: 1.6;
min-height: 0;
padding-top: 20px;
flex-direction: column;
}
:root {
--default-font: 'Inter', sans-serif;
}
.theme-light {
--background-primary: rgba(222, 222, 222, 0.1);
--background-primary-alt: #f5f6f8;
--background-secondary: #f2f3f5;
--background-secondary-alt: #e3e5e8;
--background-modifier-border: #ddd;
--background-modifier-form-field: #fff;
--background-modifier-form-field-highlighted: #fff;
--background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
--background-modifier-success: #A4E7C3;
--background-modifier-error: #990000;
--background-modifier-error-rgb: 230, 135, 135;
--background-modifier-error-hover: #bb0000;
--background-modifier-cover: rgba(0, 0, 0, 0.8);
--text-accent: #705dcf;
--text-accent-hover: #7a6ae6;
--text-normal: #2e3338;
--text-muted: #888888;
--text-muted-rgb: 136, 136, 136;
--text-faint: #999999;
--text-error: #800000;
--text-error-hover: #990000;
--text-highlight-bg: rgba(255, 255, 0, 0.4);
--text-highlight-bg-active: rgba(255, 128, 0, 0.4);
--text-selection: rgb(204 232 255);
--text-on-accent: #f2f2f2;
--interactive-normal: #f2f3f5;
--interactive-hover: #e9e9e9;
--interactive-accent: #7b6cd9;
--interactive-accent-rgb: 123, 108, 217;
--interactive-accent-hover: #8273e6;
--interactive-success: #197300;
--scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2);
--scrollbar-bg: rgba(0, 0, 0, 0.05);
--scrollbar-thumb-bg: rgba(0, 0, 0, 0.1);
--highlight-mix-blend-mode: darken;
--dark: #141021;
}
2022-04-18 14:38:11 +00:00
.markdown-rendered img:not([width]),
.markdown-rendered audio,
.markdown-rendered video {
max-width: 100%;
outline: none;
}
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
margin: 15px 0;
}
.markdown-rendered h1 {
font-size: 2em;
}
.markdown-rendered h2 {
font-size: 1.6em;
}
.markdown-rendered h3 {
font-size: 1.37em;
}
.markdown-rendered h4 {
font-size: 1.25em;
}
.markdown-rendered h5,
.markdown-rendered h6 {
font-size: 1.12em;
}
.markdown-rendered h6 {
color: var(--text-muted);
2022-04-18 15:33:35 +00:00
}
.right-bar-container{
display: block;
padding: 0em 1em;
}
footer {
margin-top: 2em;
text-align: center;
}
footer ul li{
margin: auto;
text-align: center;
list-style-type: none;
display: inline-block;
padding: 0 1em
}
hr {
display: block;
unicode-bidi: isolate;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
margin-inline-start: auto;
margin-inline-end: auto;
overflow: hidden;
border-style: inset;
border-width: 0;
width: 25%;
margin: 2em auto;
height: 2px;
border-radius: 1px;
color: var(--dark);
background-color: var(--dark);
2022-04-18 15:33:35 +00:00
}
2022-04-18 16:18:26 +00:00
@media screen and (max-width: 1400px) {
2022-04-18 15:33:35 +00:00
.right-bar-container {
display: none;
}
}
@media screen and (max-width: 800px) {
.nav-bar {
display: none;
}
}