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

2023年11月9日 (四) 17:33的版本

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

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

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

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

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

/** 中心页栏框 **/
.content_box {
	height: 14.375rem;
	width: 80%;
	margin: 0 auto;
	display: flex;
}

.content_box_column {
	flex: 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;
	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 10.3125rem; 
	margin: 0 auto; 
	margin-bottom:0.625rem; 
	width: 60%; 
	font-family: monospace; 
	font-size: 1.1em; 
	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 10.3125rem; 
	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:10.125rem 0.0rem 0.5rem 0.0rem; 
	background-image:linear-gradient(90deg,#00D7FE,#00A8FF);
}

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

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

.chat_left_bubble_control {
	position: absolute;
	left: 50.125rem; 
	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: -20.0rem;
	width: 30.375rem;
	height: 30.375rem;
	border-radius: 50%;
}

.chat_left_user_box {
	position: absolute;
	top: -30.0rem; 
	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: 10.125rem;
	vertical-align: bottom;
}

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

.chat_right_bubble_control {
	position: absolute;
	right: 50.125rem; 
	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: -20.0rem;
	width: 30.375rem;
	height: 30.375rem;
	border-radius: 50%;
}

.chat_right_user_box {
	position: absolute;
	top: -30.0rem; 
	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: 10.125rem;
	vertical-align: bottom;
}

/** 海龟汤问答框 **/
.dialogue-container {
    display: flex;
    width: 75%;
    margin: 0 auto;
    margin-top: 20.0rem; 	
    margin-bottom: 20.0rem;
    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;
}

img.x100width {
    width: 100%;
    height: auto;
    overflow: hidden;
}