用户:LettuceIce/styles.css：修订间差异

2025年2月26日 (三) 15:34的最新版本

/** 页面边框 **/
.page_border {
	border: 0.3125rem solid #eaf7fd; 
	border-radius: 0.3125rem; 
	box-shadow: 0 0 0.625rem 0.3125rem #bfe5fb;
	margin-bottom: 0.75rem;
}

/** 顶部渐变 **/
.header_gadient {
	background: linear-gradient(to top, rgba(255, 255, 255, 0), #87ceeb); 
	padding-top: 0.625rem;
}

/** 顶部装饰用分割线 **/
.custom_split_line {
	margin: 1rem auto;
	padding: 0; 
	border: none;
	width: 70%;
	height: 0.1875rem;
	background-color: white;
}

/** 页面主标题 **/
@media screen and (max-width: 480px) {
	.main_header {
		font-size:2rem; 
		color: white; 
		text-shadow: 0 0 0.5rem lightblue, 0 0 0.5rem white;
	}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
	.main_header {
		font-size:3.5rem; 
		color: white; 
		text-shadow: 0 0 0.5rem lightblue, 0 0 0.5rem white;
	}
}

@media screen and (min-width: 769px) {
	.main_header {
		font-size:5rem; 
		color: white; 
		text-shadow: 0 0 0.5rem lightblue, 0 0 0.5rem white;
	}
}

/** 更改选中颜色 **/
::selection {
	color: #2168bf;
	background-color: #dee7ff;
}

/** 图片虚化 **/
.blurred-image {
  filter: blur(0.3125rem);
}

/** 中心页栏框 **/
.content_border {
	display:block;
}

@media screen and (max-width: 480px) {
	.content_box {
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		row-gap: 4rem;
	}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
	.content_box {
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		row-gap: 4rem;
	}
}

@media screen and (min-width: 769px) {
	.content_box {
		width: 80%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		row-gap: 4rem;
	}
}

.content_box_left {
	height: 14.375rem;
	min-width: 20rem;
	flex-basis:50%;
	flex-shrink:0;
	flex-grow:1
}

.content_box_right {
	height: 14.375rem;
	min-width: 20rem; 
	flex-basis:50%;
	flex-shrink:0;
	flex-grow:1
}

.column_header {
	border: solid 0.0625rem white;
	border-radius: 0.625rem;
	background-color: #CCEAFC;
	margin: 0.625rem;
	box-shadow: 0.1875rem 0.1875rem 0.375rem #F1F9FE;
}

.column_header_text {
	padding: 0.125rem 0.625rem;
	color: #fff;
	font-weight: 600;
	text-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,.35);
}

.column_body {
	padding: 0.3125rem 0.625rem;
	height: 10.0rem;
	width:auto;
	background-image: linear-gradient(180deg,white,#ECF7FC);
	overflow-y: hidden;
}

.column_footer {
	padding: 0.0625rem 0.625rem;
	color: ivory;
	font-weight: 600;
	text-align: right;
	text-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,.5);
}

/** 控制台样式 **/
.console {
	padding: 0.3125rem 0.3125rem 0.3125rem 0.9375rem; 
	margin: 0 auto; 
	margin-bottom:0.625rem; 
	width: 60%; 
	font-family: monospace; 
	font-size: 1.1rem; 
	background-color:#002200; 
	border: 0.1875rem solid #55AA55; 
	color: #77CC77;
}

/** 打开子页面样式 **/
.subpage {
	background: white; 
	margin: 0 auto; 
	width: 60%; 
	border: solid 0.125rem #000000; 
	padding: 0.0625rem 0.9375rem; 
	box-shadow: 0 0.0625rem 0.1875rem rgba(0,0,0,.2);
}

/** QQ聊天 **/
.chat_header {
	margin: 0 auto; 
	text-align: center; 
	width: 60%; color: 
	white; padding:0.75rem 0.0rem 0.5rem 0.0rem; 
	background-image:linear-gradient(90deg,#00D7FE,#00A8FF);
}

.chat_background {
	background-color: #F1F1F1; 
	width: 60%; padding-top: 0.75rem; 
	padding-bottom:0.1875rem; 
	margin: 0 auto;
}

.chat_left_box {
	position: relative; 
	margin-top: 3.125rem; 
	margin-bottom: 3.125rem;
}

.chat_left_bubble_control {
	position: absolute;
	left: 3.25rem; 
	margin-bottom: 0.625rem; 
	max-width: 75%;
}

.chat_left_bubble {
	border-radius: 0.625rem;
	background-color: white; 
	padding: 0.375rem 0.625rem 0.375rem 0.625rem; 
	display: inline-block;
}

.chat_left_text {
	color: #000000; 
	font-size: 0.875rem; 
}

.chat_left_profile {
	position: absolute;
	left: 0.625rem;
	top: -1.25rem;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
}

.chat_left_user_box {
	position: absolute;
	top: -1.875rem; 
	left:3.375rem;
}

.chat_left_user_title {
	color: white;
	background-image: linear-gradient(90deg,#C487FF,#E8A2FC); 
	padding: 0 0.1875rem 0 0.1875rem; 
	border-radius: 0.1875rem; 
	font-size:0.625rem; 
	display: inline-block;
}

.chat_left_user_name {
	color: gray;
	font-size: 0.75rem;
	vertical-align: bottom;
}

.chat_right_box {
	position: relative; 
	margin-top: 3.125rem; 
	margin-bottom: 3.125rem;
}

.chat_right_bubble_control {
	position: absolute;
	right: 3.25rem; 
	margin-bottom: 0.625rem; 
	max-width: 75%;
}

.chat_right_bubble {
	border-radius: 0.625rem;
	background-color: white; 
	padding: 0.375rem 0.625rem 0.375rem 0.625rem; 
	display: inline-block;
}

.chat_right_text {
	color: #000000; 
	font-size: 0.875rem; 
}

.chat_right_profile {
	position: absolute;
	right: 0.625rem;
	top: -1.25rem;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
}

.chat_right_user_box {
	position: absolute;
	top: -1.875rem; 
	right: 3.375rem;
}

.chat_right_user_title {
	color: white;
	background-image: linear-gradient(90deg,#C487FF,#E8A2FC); 
	padding: 0 0.1875rem 0 0.1875rem; 
	border-radius: 0.1875rem; 
	font-size:0.625rem; 
	display: inline-block;
	text-align: center;
}

.chat_right_user_name {
	color: gray;
	font-size: 0.75rem;
	vertical-align: bottom;
}

/** 海龟汤问答框 **/
.dialogue-container {
    display: flex;
    width: 75%;
    margin: 0 auto;
    margin-top: 1.25rem; 	
    margin-bottom: 1.25rem;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.625rem;
}

.question {
    background-color: #e6e6e6;
    padding: 0.4375rem;
    border-radius: 0.3125rem;
    margin-right: 0.625rem;
}

.answer {
    background-color: #f2f2f2;
    padding: 0.4375rem;
    border-radius: 0.3125rem;
}

/** 根据页面改变图片大小 **/
img.x20width {
    width: 20%;
    height: auto;
    overflow: hidden;
    margin:0;
    padding:0;
}

img.x98width {
    width: 98%;
    height: auto;
    overflow: hidden;
    margin:0;
    padding:0;
}