assets/styles/layout/_layout.scss
body {
background: var(--kbin-bg);
position: relative;
}
#logo path {
fill: red
}
.kbin-container {
margin: 0 auto;
max-width: 1360px;
}
#middle {
background: var(--kbin-bg);
padding-bottom: 3rem;
z-index: 5;
position: relative;
.kbin-container {
display: grid;
grid-template-areas: 'main sidebar';
grid-template-columns: 3fr 1fr;
@include media-breakpoint-up(lg) {
.sidebar-left & {
grid-template-areas: 'sidebar main';
grid-template-columns: 1fr 3fr;
}
}
@include media-breakpoint-down(lg) {
grid-template-areas: 'main main'
'sidebar sidebar';
grid-template-columns: 1fr;
margin: 0 auto;
}
}
//a:focus-visible,
//input:focus-visible,
//button:focus-visible,
//textarea:focus-visible {
// outline-color: darkorange;
//}
#main {
grid-area: main;
padding: 0 .5rem;
position: relative;
@include media-breakpoint-down(md) {
overflow-x: clip;
}
}
#sidebar {
grid-area: sidebar;
padding: 0 .5rem;
}
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
menu {
margin: 0;
padding: 0;
}
.content {
// margin: -3px !important;
overflow: hidden !important;
// padding: 3px !important;
details {
margin-bottom: 1rem;
}
blockquote {
border-left: 2px solid var(--kbin-blockquote-color);
margin: 0 0 1rem 1rem !important;
padding-left: 1rem;
}
}
main {
.content {
a {
color: var(--kbin-section-link-color) !important;
}
}
}
.row,
.content {
position: relative;
word-break: break-word;
}
hr {
border: 1px solid var(--kbin-bg);
}
.float-end {
text-align: right;
}
table {
border-collapse: collapse;
font-family: sans-serif;
font-size: .9em;
-webkit-overflow-scrolling: touch;
overflow-x: auto;
width: 100%;
border: var(--kbin-section-border);
}
table thead tr {
font-weight: bold;
text-align: left;
}
table th {
background-color: var(--kbin-bg);
}
table th a {
overflow-wrap: normal !important;
}
table th,
table td {
padding: 1.5rem 1rem;
position: relative;
border: var(--kbin-section-border);
}
table tbody tr {
border-bottom: var(--kbin-section-border);
}
table tbody tr:nth-of-type(even) {
background-color: var(--kbin-bg-nth);
}
.icon {
font-size: 0;
i {
font-size: initial;
}
}
figure {
margin: 0;
}
.rounded-edges {
.section,
.options,
.alert,
.btn,
figure img,
input:not([type='radio']),
textarea,
select,
button,
.preview img,
.preview iframe,
.dropdown__menu,
#sidebar .theme,
#sidebar .font-size,
#sidebar .row div,
#sidebar .user-list img,
.no-image-placeholder,
.pagination__item,
.no-avatar,
code,
.ts-control > [data-value].item,
.image-preview-container {
border-radius: var(--kbin-rounded-edges-radius) !important;
}
.ts-wrapper {
.ts-control {
border-radius: .5rem;
}
&.dropdown-active .ts-control {
border-radius: .5rem .5rem 0 0;
}
}
.ts-dropdown {
border-radius: 0 0 .5rem .5rem
}
.options {
button {
border-radius: 0;
}
menu {
border-radius: 0 0 0 .5rem;
}
}
.options--top,
.section--top {
border-radius: 0 0 .5rem .5rem !important;
}
.magazine__subscribe,
.user__actions,
.domain__subscribe {
gap: 0.25rem
}
}
.dot {
background: var(--kbin-primary-color);
border-radius: 50%;
display: inline-block;
height: 15px;
width: 15px;
}
.opacity-50 {
opacity: .5;
}
.ms-1 {
margin-left: .5rem;
}
.me-1 {
margin-right: .5rem;
}
.text-right {
text-align: right !important;
}
.z-5 {
z-index: 5 !important;
}
.visually-hidden {
visibility: hidden;
}
.loader {
animation: rotation 1s linear infinite;
border: 5px solid var(--kbin-meta-text-color);
border-bottom-color: transparent;
border-radius: 50%;
box-sizing: border-box;
display: inline-block;
height: 28px;
text-align: center;
width: 28px;
line-height: 1;
margin: auto;
span {
visibility: hidden;
}
&.hide {
display: none;
}
&.small {
width: 14px;
height: 14px;
border-width: 3px;
}
}
.danger, .danger i {
color: var(--kbin-danger-color) !important;
}
.danger-bg {
background: var(--kbin-danger-color);;
}
.success,
.success i {
color: var(--kbin-success-color) !important;
}
.secondary-bg {
background: var(--kbin-section-bg);
color: var(--kbin-meta-text-color);
}
.kbin-bg {
background: var(--kbin-bg);
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.hidden {
display: none !important;
}
.select div {
height: 100%;
select {
height: 100%;
}
}
.flex {
display: flex;
gap: .25rem;
}
.flex-wrap {
flex-wrap: wrap;
}
pre, code {
white-space: pre-wrap;
word-wrap: break-word;
}
pre > code {
display: inline-block;
color: var(--kbin-text-color);
background: var(--kbin-bg);
padding: 1rem;
font-size: .85rem;
max-height: 16rem;
overflow: auto;
}
p > code {
color: var(--kbin-text-color);
background: var(--kbin-bg);
padding: 0.2rem .4rem;
font-size: .85rem;
}
.markdown {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: .5rem;
}
#scroll-top {
background-color: var(--kbin-section-bg);
border-radius: 5px;
bottom: 20px;
cursor: pointer;
//display: none;
font-size: 18px;
outline: none;
padding: 15px 20px;
position: fixed;
right: 30px;
z-index: 99;
}
.js-container {
margin-bottom: 0;
}
.bold {
font-weight: bold;
}
.no-avatar {
display: block;
width: 30px;
height: 30px;
border: var(--kbin-avatar-border);
@include media-breakpoint-up(sm) {
width: 40px;
height: 40px;
}
}
:target {
scroll-margin-top: 8rem;
}
.boost-link {
&.active {
color: var(--kbin-boosted-color);
}
}