openNAMU__openNAMU/views/main_css/css/main.css

/* 기본 전체 옵션 */
body, html, video, table, iframe, input, textarea, img, hr, blockquote, pre, iframe, .table_safe {
    max-width: 100%;
}

body {
    word-break: break-all;
    
    overflow: auto;

    font-size: 14px;
}

/* 텍스트 필드 */
textarea, input {
    width: 100%;
}

input {
    box-sizing: border-box;
}

input[type="checkbox"], input[type="radio"] {
    width: auto;
}

/* 테이블 */
table {
    overflow-x: scroll;

    border-collapse: collapse;
}

td {
    border: 0.5px solid gainsboro;
    border-width: 0.5px;

    padding: 8px 10px;
}

@supports (-webkit-touch-callout: none) {
    td {
        border: 1px solid gainsboro;
        border-width: 1px;
    }
}

/* 폴딩 */
details summary {
    cursor: pointer;
    user-select: none;
    
    display: list-item;
}

/* diff */
.opennamu_diff_green {
    background: #eaf2c2;
}

.opennamu_diff_red {
    background: #fadad7;
}

/* list */
.opennamu_ul {
    padding-left: 20px;
}

.opennamu_ul li {
    margin-left: 20px;

    margin-top: 5px;
    margin-bottom: 5px;
}

/* thread */
.opennamu_comment {
    display: inline-table;
    width: 100%;
}

.opennamu_comment_color_green {
    background: palegreen;
}

.opennamu_comment_color_blue {
    background: paleturquoise;
}

.opennamu_comment_color_red {
    background: pink;
}

.opennamu_comment_color_default {
    background: palegoldenrod;
}

.opennamu_comment_color_gray {
    background: gainsboro;
}

.opennamu_comment_blind {
    display: none;
}

.opennamu_comment_blind_admin {
    background: gainsboro;
}

.opennamu_comment_scroll {
    max-height: 500px;

    white-space: pre-wrap;
    
    overflow: scroll;
    -ms-overflow-style: none;

    scrollbar-width: none;
}

.opennamu_comment_scroll::-webkit-scrollbar {
    display: none;
}

/* render */
/* - link */
a {
    color: dodgerblue;
    
    text-decoration: none;
}

a:hover {
    color: darkblue;
}

.opennamu_not_exist_link {
    color: red;
}

.opennamu_not_exist_link:hover {
    color: darkred;
}

.opennamu_same_link {
    font-weight: bold;
}

.opennamu_link_out, .opennamu_link_inter {
    color: green;
}

.opennamu_link_out:hover, .opennamu_link_inter:hover {
    color: darkgreen;
}

.opennamu_link_out::before {
    content: '🅴';
    
    font-weight: lighter;
    
    background: transparent;
}

/* - toc */
.opennamu_TOC {
    border: 1px solid gainsboro;
    padding: 20px;
    
    width: fit-content;
    width: -moz-fit-content;

    display: inline-block;
    
    clear: both;
    
    margin-top: 10px;
}

.opennamu_TOC_title {
    font-size: 18px;
}

/* - category */
.opennamu_category, .opennamu_trace {
    border: 1px solid gainsboro;
    
    padding: 10px;
    
    white-space: pre;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.opennamu_category_button, .opennamu_trace_button {
    float: right;
    z-index: 100;
    position: relative;
}

.opennamu_category_blur {
    filter: blur(5px);
}

.opennamu_category_blur:hover {
    filter: none;
}

/* - footnote */
.opennamu_footnote {
    border-top: 1px solid gainsboro;

    padding-top: 10px;

    margin-top: 10px;
}

pre, .opennamu_redirect {
    border: 1px solid gainsboro;
    
    padding: 10px;
}

pre {    
    white-space: pre-wrap;

    margin: 0;
}

code, pre {
    font-family: Consolas, Monaco, monospace;
}

#syntax {
    padding: 0;
}

.opennamu_textarea_500 {
    height: 500px;
}

.opennamu_textarea_100 {
    height: 100px;
}

.opennamu_spead_footnote {
    color: #555;
    background-color: #efefef;
    
    border: 1px solid #cecece;

    font-size: small;
    font-weight: initial;
}

.opennamu_popup_footnote {
    position: absolute;

    z-index: 10000;

    max-width: 50%;

    padding: 10px;

    background-color: white;
    color: initial;
    
    border: 1px solid #cecece;
    border-radius: 5px;

    font-size: small;
    font-weight: initial;
}

@media(max-width: 768px) {
    .opennamu_popup_footnote {
        max-width: 100%;
    }
}

@media(max-width: 420px) {
    .table_safe {
        float: none !important;
    }
}

hr {
    margin-top: 10px;
    margin-bottom: 10px;

    border: 0;
    border-top: 1px solid gainsboro;
}

.opennamu_render_complete {
    white-space: pre-wrap;
    
    line-break: anywhere;

    display: inline;
}

.opennamu_render_complete img {
    vertical-align: middle;
}

blockquote {
    padding: 15px;
    
    margin: 0;
    margin-top: 10px;
    margin-bottom: 10px;

    display: inline-block;

    border: 2px solid #ccc;
    border-left: 5px solid black;
}

/* 취소선 */
s, strike, del {
    color: gray;
}

s:hover, strike:hover, del:hover {
    text-decoration: none;
}

/* 최근 변경 관련 테이블 */
#main_table_set {
    width: 100%;
    
    text-align: center;
}

#main_table_width {
    width: 33.3%;
}

#main_table_width_half {
    width: 50%;
}

#main_table_width_quarter {
    width: 25%;
}

#main_table_top_tr {
    background: gainsboro;
}

.opennamu_history_blind {
    background: gainsboro;
}

/* 기타 */
.main_hr {
    border: none;
    
    padding-top: 6px;
    padding-bottom: 6px;
    
    margin: 0;
}

.change_space {
    white-space: pre-line;
}

.katex .base {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.opennamu_width_200 {
    width: 200px;
}

.opennamu_list_1 {
    list-style: disc;
}

.opennamu_list_2 {
    list-style: circle;
}

.opennamu_list_3 {
    list-style: square;
}

.opennamu_list_4 {
    list-style: none;
}

.opennamu_list_4::before {
    display: inline-block;
    content: "⬦";
    width: 1.2em;
    margin-left: -1.2em;
}

.opennamu_list_5 {
    list-style: none;
}

.opennamu_list_5::before {
    display: inline-block;
    content: "⬥";
    width: 1.2em;
    margin-left: -1.2em;
}

.opennamu_list_none {
    list-style: none;
}

.opennamu_folding {
    margin-top: 10px;
}

.opennamu_recent_change {
    padding-bottom: 10px;

    border-bottom: 2px solid gainsboro;
}

/* 이 부분 이하로는 레거시 */
#topic_color {
    background: #bbeabb;
}

/* 외부 확장 기능 연관 */
td.hljs-ln-line.hljs-ln-code, td.hljs-ln-line.hljs-ln-numbers {
    padding: 0px !important;
    padding-right: 10px !important;
    
    border: 0;
}

/* SVG */
.opennamu_svg {
    width: 14px;
    display: inline-block;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.opennamu_svg_tool {
    background-image: url(/views/main_css/file/icon/tool.svg);
}