memos.css

:root {
	--light-background: #fff;
	--light-background-secondary: #f4f5f9;
	--light-background-hover: #e6e8f0;
	--light-main-color: rgba(0, 0, 0, .85);
	--light-color: rgba(0, 0, 0, .65);
	--light-color-secondary: rgba(0, 0, 0, .45);
	--light-color-third: rgba(0,0,0, .25);
	--light-color-hover: rgba(0,0,0, .05);
	--light-border-color: #EBEDF0;
	--dark-background: #292a2d;
	--dark-background-secondary: #3b3d42;
	--dark-background-hover: #46484f;
	--dark-header: #252627;
	--dark-main-color: rgba(255, 255, 255, .85);
	--dark-color: rgba(255, 255, 255, .65);
	--dark-color-secondary: rgba(255, 255, 255, .45);
	--dark-color-third: rgba(255,255,255, .25);
	--dark-color-hover: rgba(255,255,255, .05);
	--dark-border-color: #4a4b50;
	--main-color: #1890ff;
	--main-hover-color: #40a9ff;
}
*, :before, :after {
	box-sizing: border-box;
	border-width: 0;
	border-style: solid;
	border-color: inherit;
}
.container{min-width:375px;}
#memo-list{min-height: 100vh;}
#memo-list a{padding-bottom:0;border-bottom:0;}
/* title */
a.primary {
	color: var(--main-color);
}
a.primary:hover,a.primary:focus,a.primary:active {
	color: var(--main-hover-color);
}
button,a {
	text-decoration: none;
	cursor: pointer;
}
.button-container {
	display: table;
	margin-right: auto;
	margin-left: auto;
}
.noclick{pointer-events:none;}
.button+.button {margin-left: 0;}
.button,a.button,button,.select,select {
	position: relative;
	display: flex;
	outline: none;
	border: 1px solid transparent;
	border-radius: .33rem;
	background-color: transparent;
	text-align: center;
	text-decoration: none;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: all .3s linear;
	align-items: center;
	justify-content: center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin-bottom:0;
}
.button.private.private-btn{background-color: var(--light-background-hover);}
.dark .button.private.private-btn{background-color: var(--dark-background-hover);}
.dark .button,
.dark a.button,
.dark button {
	background: var(--dark-background-secondary);
	color: inherit;
}
.user-now .button{border-radius: unset;}
.user-now .button:hover,.user-now .button.current,.myfeeds-xml.current,.myfeeds-xml:hover{color:var(--main-color);}
.dark .user-now .button{background: transparent;}

.button.outline,
a.button.outline,
button.outline,
.select.outline,
select.outline {
	border-color: var(--light-border-color);
	background: transparent;
	box-shadow: none;
}
.dark .button.outline,
.dark a.button.outline,
.dark button.outline,
.dark .select.outline,
.dark select.outline {border-color: var(--dark-border-color);color: inherit;}
.button.outline:hover,
a.button.outline:hover,
button.outline:hover,
.select.outline:hover,
select.outline:hover {
	background-color: var(--light-background-hover);
}

.dark .button.outline:hover,
.dark a.button.outline:hover,
.dark button.outline:hover,
.dark select.outline:hover,
.dark .select.outline:hover,
.dark select.outline:hover {
	background-color: var(--dark-background-hover);
	color: inherit;
}

.button.primary,
a.button.primary,
button.primary {
	color: var(--light-background);
	background-color: var(--main-color);
}

.button.primary:hover,
a.button.primary:hover,
button.primary:hover {
	background-color: var(--main-hover-color);
	box-shadow: 0px 5px 20px -3px rgba(24, 144, 255, 0.5);
}

.button.link,
a.button.link,
button.link {
	background: none;
	font-size: 1rem;
}

.select,select {
	position: relative;
	display: flex;
	text-align: center;
}

.select::after {
	position: absolute;
	top: 50%;
	right: .5rem;
	border-color: var(--light-color) transparent transparent transparent;
	border-style: solid;
	border-width: .25rem .25rem 0;
	content: '';
	transform: translateY(-50%);
}

.dark .select::after {
	border-color: var(--dark-color) transparent transparent transparent;
}

select>option {
	text-align: center;
	background-color: var(--light-background-secondary);
}

.dark select>option {
	background-color: var(--dark-background-secondary);
}

input {
	outline: none;
	border:none;
	border-radius: .33rem;
	background-color: transparent;
	box-shadow: none;
	color: inherit;
}

input:focus,input:active {
	outline: none;
	background-color: transparent;
}
input.search-memos-input{max-width:200px;}
textarea {
	font-family: inherit;
	overflow-x: hidden;
	overflow-y: clip;
	flex: 1;
	padding: 0;
	outline: .1rem solid transparent;
	outline-offset: .1rem;
	background-color: transparent;
	white-space: pre-wrap;
	line-height: 2;
	resize: none;
	overflow-wrap: anywhere;
	word-break: normal
}

button, input, optgroup, select, textarea {
	font-family: inherit;
	font-weight: inherit;
	color: inherit;
	transition: all 0.3s linear;
}

pre code {
	margin: 0;
	padding: 0;
	border: none;
	background-color: #f5f5f5;
}

.dark pre code {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
}

code {
	margin: 0 4px;
	padding: 3px 8px 2px;
	border: 1px solid var(--light-color-secondary);
	border-radius: .33rem;
	background-color: var(--light-background-secondary);
	vertical-align: middle;
	font-size: .75rem;
}

.dark code {
	border: 1px solid var(--dark-color-secondary);
	background-color: var(--dark-background-secondary);
}

pre {
	overflow: auto;
	margin: 0.5rem 0;
	padding: 1rem 1.5rem;
	border-radius: .33rem;
	font-size: .75rem;
}

blockquote {
	margin: 1rem 0;
	padding: .5rem 1rem;
	border-radius: .33rem;
	background-color: var(--light-color-hover);
}

.dark blockquote {
	background-color: var(--dark-color-hover);
}


.border-t {
	border-top: 1px solid var(--light-border-color);
}
.dark .border-t {
	border-top: 1px solid var(--dark-border-color);
}

.border-b {
	border-bottom: 1px solid var(--light-border-color);
}
.dark .border-b {
	border-bottom: 1px solid var(--dark-border-color);
}

.resource-wrapper {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

.resource-wrapper>.images-wrapper {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.memo-resource::after {
	display: block;
	padding-top: 100%;
	content: '';
}

.resource-wrapper>.images-wrapper>.memo-resource {
	position: relative;
	overflow: hidden;
	border-radius: .33rem;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.resource-wrapper>.images-wrapper>.memo-resource>img {
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: pointer;
	-o-object-fit: cover;
	object-fit: cover;
	transition: all 0.6s ease;
}

.resource-wrapper>.images-wrapper.images-scale>.memo-resource:hover>img {
	transform: scale(1.1);
}
 
@media (min-width:768px) {
	.resource-wrapper>.images-wrapper {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.resource-wrapper>.images-wrapper.images-card {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.video-wrapper {
	position: relative;
	display: flex;
	padding-bottom: 56%;
	height: 0
}

.video-wrapper iframe {
	position: absolute;
	width: 100%;
	height: 100%
}

/* twikoo */
.tk-tag,
.tk-extras,
.tk-row.actions .tk-action-icon.__markdown,
.tk-preview,
.tk-content p a.at {
	display: none !important;
}

.tk-replies .tk-content {
	font-size: 1em !important;
}

.tk-content img {
	max-width: 100% !important;
	max-height: 100% !important;
	vertical-align: initial !important;
}

.tk-owo-emotion {
	width: 30px;
}

.tk-footer {
	display: none;
}

.dark .OwO .OwO-body {
	background-color: var(--dark-background);
	color: var(--light-background);
}
/* Memos Editor */
.memos-editor{padding:0;position: relative;z-index: 2;}
.memos-editor-body{display:flex;border-radius:.33rem;background-color:var(--light-background-secondary);flex-direction:column;}
.dark .memos-editor-body{border: 1px solid var(--dark-background-hover);background-color: var(--dark-background-secondary);}
.memos-editor-content,.memos-editor-footer,.memos-editor-option{display: flex;}
.memos-editor-content .memos-editor-textarea{overflow-y:scroll;}
.memos-image-list .image-background{background-size:cover;background-repeat:no-repeat;width:8rem;height:8rem;border-radius:0.33rem}
.memos-image-list .memos-tag:hover{text-decoration: line-through;}
.memos-editor-tools{display: flex;flex-direction: column;}
.memos-editor-tools .iconfont{font-size:1.35rem;}
.memos-editor-tools .action-btn {padding: .25rem;margin:.5rem 0.5rem 0 0;}
.memos-editor-tools .memos-tag-list {display:flex;flex-wrap:wrap;align-items:center;line-height:2;}
.memos-editor-tools .memos-tag {position:relative;}
.memos-editor-tools .memos-tag a {flex:1}
.memos-editor-footer .edit-memos {display:flex;text-wrap:nowrap;}
.memos-tag{border:1px solid var(--light-background-hover);}
.dark .memos-tag{border:1px solid var(--dark-background-hover);}
.memos-tag.selected{
    border:1px solid var(--light-color);
}
.dark .memos-tag.selected{
    border:1px solid var(--dark-color);
}
.memos-tagnow-name{cursor: pointer !important;}
.memos-tagnow-name svg {
    width: 1rem;
    margin-left: 6px;
    vertical-align: middle;
    margin-top: -4px;
}
.memos-tagnow-name:hover {
    text-decoration: line-through
}
/* dropdown */
.dropdown {
	position: relative;
}

.dropdown-wrapper {
	position: absolute;
	display: flex;
	flex-direction: column;
	top: 0.65rem;
	right: 0;
	padding: .25rem;
	border-radius: .33rem;
	background-color: var(--light-background-secondary);
	font-size:1rem;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
	z-index: 999;
}
.aitop .dropdown-wrapper{top:0rem;right:1.55rem;}
.dark .dropdown-wrapper {
	background-color: var(--dark-background);
}

.dropdown-wrapper>.btn {
	cursor: pointer;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	display: flex;
	justify-content: center;
	padding: .2rem 1rem;
	line-height: 1.6rem;
	border-radius: .24rem;
}

.dropdown-wrapper>.btn:hover {
	color: var(--light-main-color);
	background-color: var(--light-background-hover);
}

.dark .dropdown-wrapper>.btn:hover {
	color: var(--dark-main-color);
	background-color: var(--dark-background-hover);
}
/* card */
.card-item {
	position: relative;
	overflow: hidden;
	border-radius: .33rem;
	background-color: var(--light-background-secondary);
	cursor: default;
	transition: all .6s ease-out;
}

.card-item:hover {
	background-color: var(--light-background-hover);
}

.dark .card-item {
	background-color: var(--dark-background-secondary);
}

.dark .card-item:hover {
	background-color: var(--dark-background-hover);
}

.oneday .card-item{box-shadow: rgba(100, 100, 100,0.2) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.1) -3px -3px 6px 1px inset;}
.dark .oneday .card-item{box-shadow: rgba(0, 0, 0,0.25) 3px 3px 6px 0px inset, rgba(100, 100, 100, 0.25) -3px -3px 6px 1px inset;background-color: var(--dark-background-hover);}

.oneday .item-header{margin-bottom: 0 !important;}
.oneday .item-avatar,.oneday .item-creator{display: none;}
.oneday .item-mate{font-size: .9rem !important;margin-top: 0 !important;}


.card-item .item-album {
	position:relative;
	overflow:hidden;
	justify-content:center;
	align-items:center;
	background-color: rgba(0,0,0,.1);
}

.dark .card-item .item-album {
	background-color: rgba(255,255,255,.1);
}

.card-item .item-album img{
	position:absolute;
	width:100%;
	transition:transform .2s ease-in-out;
	flex:1;
	object-fit: cover;
	transition: all 0.6s ease;
}
.card-item .item-album::after{
	display:block;
	padding-top:64%;
	content:''
}

.card-item:hover .item-album>img {
	transform: scale(1.1);
}

.card-item .item-header {
	position: relative;
	display: flex;
	line-height: 2rem;
	align-items: start;
}

.card-item .item-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--light-background);
	background-size: contain;
	flex: 0 0 auto;
	cursor: pointer;
}

.dark .card-item .item-avatar {
	background-color: var(--dark-background);
}
.userlist{
	justify-content: center;
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    height: 168px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 10px;
}
.userlist.row{margin-right:0;margin-left:0;}
.userlist.card-item .item-avatar {
    background-color: var(--light-background);
    border-radius: 50%;
    margin: 0 6px 5px 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.card-item .item-sub {
	line-height: 1;
}

.card-item .item-creator {
	font-weight: 700;
}

.card-item .item-mate {
	color: var(--light-color-secondary);
}

.dark .card-item .item-mate {
	color: var(--dark-color-secondary);
}

.card-item .item-option {
	opacity:0.3;
	z-index: 1;
	margin-left: auto;
}

.card-item:hover .item-option {
	display: flex;
	opacity:1;
}

.card-item .item-content {
	position: relative;
	display: flex;
	transition: all .3s ease;
	flex-direction: column;
	justify-content: center;
}

.card-item .item-content.is-feature {
	background-image: linear-gradient(transparent,rgba(0,0,0,.85));
	-webkit-backdrop-filter: saturate(180%) blur(.33rem);
	backdrop-filter: saturate(180%) blur(.33rem);
	opacity: 0;
	transition: transform 0.4s cubic-bezier(0.51, 0.01, 0.18, 1.03), opacity 0.3s ease;
}

.card-item:hover .item-content.is-feature {
	opacity: 1;
}

.card-item .item-content p {
	margin: .5rem 0;
	line-height: 1.8rem;
}

.card-item .item-footer>.item>a {
	display: flex;
	align-items: center;
}

.card-item .item-tag, .list-item .item-tag, .memos-tag{
	white-space: nowrap;
	border-radius: .33rem;
	background-color: var(--light-color-hover);
	cursor: pointer;
	line-height:1.8rem !important;
	font-size: 0.9rem !important;
}
.item-tag.no-cursor{cursor:unset;}
.dark .card-item .item-tag, .dark .list-item .item-tag, .dark .memos-tag {
	background-color: var(--dark-color-hover);
}

.card-item .item-note{
	overflow:hidden;
	height:calc(1em * 2 * 1.5);
}

.card-item .item-fadein {
	opacity: 0;
	transition: transform .4s ease;
	transform: translate3d(0, 100%, 0);
}

.card-item:hover .item-fadein {
	opacity: 1;
	transition: transform .4s ease;
	transform: translate3d(0, 0, 0);
}
.item-inner ul li{font-size:1rem;}
.item-comment {
	padding: 1rem;
	border-radius: .33rem;
	background-color: var(--dark-main-color);
}

.dark .item-comment {
	background-color: var(--light-color-third);
}

.load {
	position: relative;
	display: flex;
}

.load-btn {
	color: var(--light-color);
	font-weight: 400;
	transition: all .6s ease-out;
	flex: 1;
	background-color: var(--light-background-secondary);
}

.load-btn:hover {
	background: var(--light-background-hover);
}

.dark .load-btn:hover {
	background: var(--dark-background-hover);
}

button{margin-bottom:0 !important;}
button.button-load{width:98%;margin:0 auto;}
buttom.cancel-edit-btn{margin-left:-1rem;}
/*db-card*/
.db-card{margin:2rem 3rem;background-color:var(--dark-color);box-shadow: 0 1px 2px rgb(0 0 0 / 25%), 0 0 1px rgb(0 0 0 / 25%);border-radius:0 !important;}
.db-card-subject{display: flex;align-items:flex-start;line-height:1.6;padding:12px;position:relative;}
.dark .db-card{background:#252627;}
.db-card-content {flex:1 1 auto;}
.db-card-post {width: 96px;margin-right: 15px;display: flex;flex: 0 0 auto;}
.db-card-title {margin-bottom: 5px;font-size: 18px;}
.db-card-title a{text-decoration: none!important}
.db-card-abstract,.db-card-comment{font-size:14px;overflow: hidden;max-height:3rem;}
.db-card-cate{position: absolute;top:0;right:0;background:#f99b01;padding:1px 8px;font-size:small;font-style:italic;border-radius:0 0 0 8px;text-transform:capitalize;}
.db-card-post img{width: 96px!important;height: 96px!important;border-radius: 4px;-o-object-fit: cover;object-fit: cover;}
.rating{margin: 0 0 5px;font-size:13px;line-height: 1;display: flex;align-items: center;}
.rating .allstardark{position:relative;color: #f99b01;height: 16px;width: 80px;background-size: auto 100%;margin-right: 8px;background-repeat: repeat;background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6TTY2NC44IDU2MS42bDM2LjEgMjEwLjNMNTEyIDY3Mi43IDMyMy4xIDc3MmwzNi4xLTIxMC4zLTE1Mi44LTE0OUw0MTcuNiAzODIgNTEyIDE5MC43IDYwNi40IDM4MmwyMTEuMiAzMC43LTE1Mi44IDE0OC45eiIgZmlsbD0iI2Y5OWIwMSIvPjwvc3ZnPg==);
}
.rating .allstarlight{position: absolute;left: 0;color: #f99b01;height:16px;overflow: hidden;background-size: auto 100%;background-repeat: repeat;background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik05MDguMSAzNTMuMWwtMjUzLjktMzYuOUw1NDAuNyA4Ni4xYy0zLjEtNi4zLTguMi0xMS40LTE0LjUtMTQuNS0xNS44LTcuOC0zNS0xLjMtNDIuOSAxNC41TDM2OS44IDMxNi4ybC0yNTMuOSAzNi45Yy03IDEtMTMuNCA0LjMtMTguMyA5LjMtMTIuMyAxMi43LTEyLjEgMzIuOS42IDQ1LjNsMTgzLjcgMTc5LjEtNDMuNCAyNTIuOWMtMS4yIDYuOS0uMSAxNC4xIDMuMiAyMC4zIDguMiAxNS42IDI3LjYgMjEuNyA0My4yIDEzLjRMNTEyIDc1NGwyMjcuMSAxMTkuNGM2LjIgMy4zIDEzLjQgNC40IDIwLjMgMy4yIDE3LjQtMyAyOS4xLTE5LjUgMjYuMS0zNi45bC00My40LTI1Mi45IDE4My43LTE3OS4xYzUtNC45IDguMy0xMS4zIDkuMy0xOC4zIDIuNy0xNy41LTkuNS0zMy43LTI3LTM2LjN6IiBmaWxsPSIjZjk5YjAxIi8+PC9zdmc+);}
@media (max-width:550px) {
	.db-card{margin:0.8rem 1rem;}
	.db-card-comment{display: none;}
	input.search-memos-input{max-width:80px;}
	.gohome-memos,.editor-selector{margin-right: .5rem !important;}
	.edit-memos-btn{padding-right:1rem !important;padding-left:1rem !important;}
}
.db-card{box-shadow: none;margin:0 -1rem 10px;}
.dark .db-card{background-color:var(--light-color-third)}
/* db-card -------- end */
.user-now{overflow: hidden;}
.user-now .row-fill{display:flex;align-items:center;margin-left:auto;}
.user-now .row-fill .iconfont,.load-memos-editor .iconfont{font-size: 1.25rem;}
.user-now.row{margin-right:0;margin-left:0;}
.user-now.card-item{overflow:hidden;height:3.5rem;}
.user-now.card-item .item-avatar{border-radius:unset;background-color: transparent;width:3.5rem;height:3.5rem;cursor: pointer;}
.user-now.card-item .item-avatar img{border-radius:8px;display: inline-block;max-width: 100%;}
.user-now-name{height:3.5rem;line-height:3.5rem;}
.user-now-name,.item-creator,.item-footer{font-size:0.875rem;}
.item-footer svg{opacity:0.4;}
.item-footer .item span{color: var(--light-color-secondary);}
.dark .item-footer .item span{color: var(--dark-color-secondary);}
.load-memos-editor{background: var(--light-background-secondary) !important;}
.dark .load-memos-editor{background: var(--dark-background-secondary) !important;}

/* loading */
.el-loading {
	position: relative;
	flex: 1;
}
.el-skeleton {
	padding: 1rem;
	flex: 1;
	border-radius: .33rem;
	background-size: 400% 100%;
	background-position: 100% 50%;
	background-image: linear-gradient(90deg, var(--light-background-hover) 25%, var(--light-color-hover) 45%, var(--light-background-hover) 65%);
	animation: skeleton-loading 3s ease infinite;
}

.dark .el-skeleton {
	background-image: linear-gradient(90deg, var(--dark-background-secondary) 25%, var(--dark-color-hover) 45%, var(--dark-background-secondary) 65%);
}

.todo-btn{display:none;}
.emoji-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 8px 0;
}
.emoji-item {
    padding: 4px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer
}
.emoji-item:hover {
    background: var(--light-background-hover);
    border-radius: 4px
}
@media (max-width:480px) {
	.user-now-name{display:none;}
	.user-now .row-fill span.mr-2{margin-right:0 !important;}
}
.dark .artalk{
	--at-color-font: #fff;
	--at-color-deep: #e7e7e7;
	--at-color-sub: #e7e7e7;
	--at-color-grey: #fff;
	--at-color-meta: #fff;
	--at-color-border: #2d3235;
	--at-color-light: #687a86;
	--at-color-bg: #1e2224;
	--at-color-bg-transl: rgba(30, 34, 36, .95);
	--at-color-bg-grey: #46494e;
	--at-color-bg-grey-transl: rgba(8, 8, 8, .95);
	--at-color-bg-light: rgba(29, 161, 242, .1);
	--at-color-main: #0083ff;
	--at-color-red: #ff5652;
	--at-color-pink: #fa5a57;
	--at-color-yellow: #ff7c37;
	--at-color-green: #4caf50;
	--at-color-gradient: linear-gradient(180deg, transparent, rgba(30, 34, 36, 1))
}
.myfeeds{
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
}
.myfeeds .myfeeds-floor{
    position: absolute;
    top: 0;
    right: 0.5rem;
    font-style: italic;
    font-size: 3rem;
    line-height: 1.5rem;
    z-index: 1;
    font-weight: 400;
	color: var(--light-color-hover)
}
.dark .myfeeds .myfeeds-floor{color: var(--dark-color-hover)}

.myfeeds-xml{cursor: pointer;}
.myfeeds .item-avatar.face {
    display: block;
    font-size: 1.5rem;
    width: 38px;
    height: 38px;
    color: #fff;
    line-height: 38px;
    border-radius: 50%;
    text-align: center;
    text-transform: uppercase;
}

.backtop {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    align-items: center;
    justify-content: center;
    z-index: 1;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.33rem;
    background-color: var(--light-color-third);
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
    font-size: 1rem;
    color: var(--light-background);
}
.dark .backtop {
	background-color: var(--light-color);
}

.backtop:hover,
.backtop:focus {
	background-color: var(--main-color);
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.cfworkerai-load-btn svg,.geminiai-load-btn svg{
    animation: spin 1s infinite linear;
}