assets/css/custom_style.css

@media screen and (min-width: 70em) { .main-content { max-width: 70rem; padding: 2rem 6rem; margin: 0 auto; font-size: 1.1rem; } }
@font-face { font-family: 'flexslider-icon'; src: url("../fonts/flexslider-icon.eot"); src: url("../fonts/flexslider-icon.eot?#iefix") format("embedded-opentype"), url("../fonts/flexslider-icon.woff") format("woff"), url("../fonts/flexslider-icon.ttf") format("truetype"), url("../fonts/flexslider-icon.svg#flexslider-icon") format("svg"); font-weight: normal; font-style: normal; }
header h1, header h2 { font-weight: normal; line-height: normal; }

header h2 { margin-top: .83em; }

.main-content p { text-align: justify; }

.jailbreak-intro-sec { width: 80%; margin: 1em auto; }

#refusal-loss-formula .formula { text-align: center; }

#refusal-loss-formula .formula-list { width: fit-content; margin: 0 auto; }

#refusal-loss-formula .formula-list a { display: inline-block; width: 250px; margin: 0 20px; padding: 8px 10px; text-align: center; background: #DDD; cursor: pointer; text-decoration: none; color: #333; border-radius: 10px; user-select: none; transition-duration: 0.3s; }

#jailbreak-demo .radio-group { margin-right: 5px; }

input[type='radio'] { visibility: hidden; display: none; }

#jailbreak-demo .radio-group .option-label { font-size: 1em; cursor: pointer; position: relative; padding: 0.1em 0.6em; border: 1px solid #999; background: #FFF; border-radius: 0.2em; transition: 0.2s; }

#jailbreak-demo .radio-group .options:checked ~ .option-label { color: #FFF; background: #777; }

#refusal-loss-formula .formula-list a:hover, #jailbreak-demo #defense-methods .defense:hover { background: #555; color: #FFF; }

#jailbreak-demo #defense-methods .options:checked ~ .defense { color: #FFF; background: #555; }

#jailbreak-demo #defense-methods .defense { display: inline-block; width: 60%; margin: 2% auto 8%; padding: 8px 10px; text-align: center; background: #DDD; cursor: pointer; text-decoration: none; color: #333; border-radius: 10px; user-select: none; transition-duration: 0.3s; }

#jailbreak-demo .legend { text-align: center; width: 70%; margin: 0 auto; }

#jailbreak-demo .figure-option { text-align: center; width: 70%; margin: 4% auto 0; /* Customize the label (the container) */ /* Hide the browser's default checkbox */ /* Create a custom checkbox */ /* On mouse-over, add a grey background color */ /* When the checkbox is checked, add a blue background */ /* Create the checkmark/indicator (hidden when not checked) */ /* Show the checkmark when checked */ /* Style the checkmark/indicator */ }
#jailbreak-demo .figure-option .container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#jailbreak-demo .figure-option .container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
#jailbreak-demo .figure-option .checkmark { position: absolute; top: 4px; left: 8px; height: 25px; width: 25px; background-color: #eee; }
#jailbreak-demo .figure-option .container:hover input ~ .checkmark { background-color: #ccc; }
#jailbreak-demo .figure-option .container input:checked ~ .checkmark { background-color: #9b9bff; }
#jailbreak-demo .figure-option .checkmark:after { content: ""; position: absolute; display: none; }
#jailbreak-demo .figure-option .container input:checked ~ .checkmark:after { display: block; }
#jailbreak-demo .figure-option .container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

#jailbreak-demo .figure { margin: 0 auto; display: block; }

#jailbreak-demo .figure #original { display: none; }

#jailbreak-demo .figure img { user-drag: none; -webkit-user-drag: none; user-select: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; pointer-events: none; position: relative; left: 35px; }

#jailbreak-demo .figure-caption { width: 240px; text-align: center; display: block; margin: 0 auto; padding: 10px 0 0; font-size: .8em; }

#jailbreak-demo .figure-caption ul { padding-left: 0; }

#jailbreak-demo .figure-caption ul li { list-style: none; }

#jailbreak-demo .figure-caption .model-prediction { font-weight: bold; }

#jailbreak-demo .figure-caption .correct { color: #009926; }

#jailbreak-demo .figure-caption .wrong { color: #e31327; }

#jailbreak-demo .attack-success-rate { display: inline-block; width: 60%; margin: 2% auto 8%; padding: 8px 10px; text-align: center; text-decoration: none; background: #DDD; color: #333; border-radius: 10px; user-select: none; }
#jailbreak-demo .attack-success-rate .jailbreak-metric { font-size: 0.75em; display: block; }
#jailbreak-demo .attack-success-rate .attack-success-rate-value { font-size: 1.5em; font-family: "sans-serif"; color: #820000; }

#jailbreak-demo .benign-refusal-rate { display: inline-block; width: 60%; margin: 2% auto 8%; padding: 8px 10px; text-align: center; text-decoration: none; background: #DDD; color: #333; border-radius: 10px; user-select: none; }
#jailbreak-demo .benign-refusal-rate .jailbreak-metric { font-size: 0.75em; display: block; }
#jailbreak-demo .benign-refusal-rate .benign-refusal-rate-value { font-size: 1.5em; font-family: "sans-serif"; color: #820000; }

.warning-quote { padding: 15px; font-size: 0.8em; background-color: #f43636ba; color: white; margin-bottom: 15px; border-left: 5px solid #ff3030; transition-duration: 0.3s; }

.closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 6px; line-height: 20px; cursor: pointer; transition: 0.3s; }

/* When moving the mouse over the close button */
.closebtn:hover { color: black; }

.slider-container { display: block; margin-top: 1em; margin-bottom: 0.5em; float: left; }

.slider-label { width: 140px; float: left; line-height: 1; }

.slider-content { width: 450px; position: relative; float: right; }

#ppl-threshold, #gradient-norm-threshold { width: 3em; height: 1.6em; top: 50%; margin-top: -.8em; text-align: center; line-height: 1.6em; }


.example-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.example-selector {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    gap: 10px; /* 设置按钮之间的间距 */
  }
  .example-selector button {
    width: 100%; /* 让按钮宽度占满容器 */
    padding: 10px; /* 增加按钮的内边距 */
    font-size: 16px; /* 设置字体大小 */
    text-align: left; /* 文本左对齐 */
  }

/*.example-selector {
    margin-bottom: 20px;
}

.example-selector button {
    margin-right: 10px;
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    transition: background-color 0.3s;
}
*/

.example-selector button:hover {
    background-color: #0056b3;
}

.example-box {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
}

.highlight {
    background-color: yellow;
}

/* 容器样式 */
  .image-container {
    display: flex; /* 使用 flexbox 实现并排布局 */
    justify-content: space-around; /* 图片之间留有间距 */
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; /* 设置图片之间的间距 */
    margin: 10px;
  }

  /* 图片样式 */
  .image-container img {
    max-width: 100%; /* 每张图片占容器宽度的 45% */
    height: auto; /* 保持图片比例 */
    border: 1px solid #ccc; /* 添加边框 */
    border-radius: 8px; /* 圆角效果 */
  }

  /* 标题样式 */
  .image-container figcaption {
    text-align: center; /* 标题居中 */
    font-size: 16px; /* 字体大小 */
    margin-top: 10px; /* 标题与图片之间的间距 */
    color: #333; /* 文字颜色 */
  }

/* 容器样式 */
.gif-container {
    text-align: center;
    background-color: #ffffff; /* 白色背景 */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

/* GIF 图片样式 */
.gif-container img {
    max-width: 100%;
    height: auto;
    border-radius: 5px; /* 圆角边框 */
}