Files
standardnotes-app-web/packages/web/src/stylesheets/_items-column.scss

168 lines
3.7 KiB
SCSS

@import './scrollbar';
#items-column {
background-color: var(--items-column-background-color);
font-size: var(--sn-stylekit-font-size-h2);
user-select: none;
@media screen and (min-width: 768px) {
border-right: 1px solid var(--items-column-border-right-color);
}
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
.empty-items-list {
flex-grow: 1;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: var(--sn-stylekit-font-size-h3);
}
#items-title-bar-container {
padding: 0.8125rem;
}
#items-title-bar {
font-weight: normal;
overflow: visible;
.section-title-bar-header .title {
width: calc(90% - 45px);
}
}
#items-menu-bar {
position: relative;
}
#notes-options-menu {
margin-left: 10px;
}
.filter-section {
clear: left;
max-height: 80px;
margin-top: 10px;
position: relative;
display: flex;
flex-direction: column;
.filter-bar {
background-color: var(--items-column-search-background-color);
border-radius: var(--sn-stylekit-general-border-radius);
height: 100%;
color: #909090;
text-align: center;
font-weight: normal;
font-size: var(--sn-stylekit-font-size-h3);
border-style: solid;
border-color: transparent;
width: 100%;
position: relative;
height: 28px;
}
.search-options {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
font-size: var(--sn-stylekit-font-size-p);
white-space: nowrap;
overflow-x: auto;
}
#search-clear-button {
padding: 0;
border: none;
border-radius: 50%;
width: 17px;
height: 17px;
cursor: default;
background-color: var(--sn-stylekit-neutral-color);
color: var(--sn-stylekit-neutral-contrast-color);
font-size: 10px;
line-height: 17px;
text-align: center;
position: absolute;
top: 20%;
transform: translateY(-50%);
right: 10px;
cursor: pointer;
transition: background-color 0.15s linear;
&:hover {
background-color: var(--sn-stylekit-info-color);
}
}
}
.infinite-scroll {
background-color: var(--items-column-items-background-color);
}
.content-list-item {
@media screen and (hover: hover) {
&:hover {
background-color: var(--item-cell-selected-background-color);
}
}
&:active {
background-color: var(--item-cell-selected-background-color);
}
ul {
list-style: disc;
}
progress {
background-color: var(--note-preview-progress-background-color);
color: var(--note-preview-progress-color);
border: none;
&::-webkit-progress-bar {
background-color: var(--note-preview-progress-background-color);
}
&::-webkit-progress-value {
background-color: var(--note-preview-progress-color);
}
&::-moz-progress-bar {
background-color: var(--note-preview-progress-color);
}
}
&.selected {
background-color: var(--item-cell-selected-background-color);
progress {
background-color: var(--note-preview-selected-progress-background-color);
color: var(--note-preview-selected-progress-color);
&::-webkit-progress-bar {
background-color: var(--note-preview-selected-progress-background-color);
}
&::-webkit-progress-value {
background-color: var(--note-preview-progress-color);
}
&::-moz-progress-bar {
background-color: var(--note-preview-progress-color);
}
}
}
}
}